/* =========================================================================
   Global CSS for Hub Converter
   Contains shared styles for all converters (digital_storage, length, etc.)
   ========================================================================= */

/* =========================================================================
   1. CSS Variables
   Modify colors, fonts, and other global settings here
   ========================================================================= */
   :root {
    --primary-color: #007bff;       /* Main accent color (e.g., buttons, borders) */
    --text-color: #333;             /* Primary text color */
    --text-secondary: #666;         /* Secondary text color (e.g., labels) */
    --background-light: #fff;        /* Background for cards, inputs */
    --card-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Shadow for cards */
  }
  
  /* =========================================================================
     2. Base Styles
     General styles for body, typography, and layout
     ========================================================================= */
  body {
    font-family: 'Poppins', sans-serif; /* Main font */
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;         /* Page background */
  }
  
  .title {
    text-align: center;
    color: var(--text-color);
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  /* =========================================================================
     3. Conversion Wrapper
     Styles for the main conversion section
     ========================================================================= */
  .conversion-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
  }
  
  .conversion-title {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: 1.5em;
  }
  
  /* =========================================================================
     4. Carousel
     Styles for the unit selection carousel
     ========================================================================= */
  .carousel-container {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  
  .instruction-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
  }
  
  .carousel-item {
    background: var(--background-light);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, opacity 0.3s;
  }
  
  .carousel-item.selected {
    border: 2px solid var(--primary-color);
  }
  
  .unit-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .unit-name-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
  }
  
  .unit-denomination {
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  .unit-flag {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .input-copy-wrapper {
    display: flex;
    align-items: center;
  }
  
  .unit-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .conversion-result {
    text-align: center;
    margin-top: 20px;
    color: var(--text-color);
    display: none;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* =========================================================================
     5. Add Unit Button and Unit List
     Styles for adding new units
     ========================================================================= */
  .add-unit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
  }
  
  .add-unit-btn i {
    margin-left: 5px;
  }
  
  .unit-list {
    position: absolute;
    background: var(--background-light);
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    width: 250px;
  }
  
  .unit-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    min-height: 40px;
  }
  
  .unit-list-item:hover {
    background-color: #f0f0f0;
  }
  
  .unit-list-name {
    font-size: 14px;
    font-weight: 600;
    margin-right: 8px;
  }
  
  .unit-list-denomination {
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 8px;
  }
  
  .unit-list-flag {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  /* =========================================================================
     6. Quick Conversions
     Styles for accordion-based quick conversion buttons
     ========================================================================= */
  .quick-conversions {
    margin-top: 30px;
  }
  
  .quick-conversions h3 {
    font-size: 18px;
    color: var(--text-color);
    margin-bottom: 15px;
    text-align: center;
  }
  
  .accordion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .accordion-item {
    background: var(--background-light);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .accordion-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
  }
  
  .accordion-title:hover {
    background-color: #f5f5f5;
  }
  
  .accordion-title .unit-name {
    margin: 0;
  }
  
  .accordion-title i {
    margin-left: 10px;
    transition: transform 0.3s;
  }
  
  .accordion-title.active i {
    transform: rotate(180deg);
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  
  .accordion-content.active {
    max-height: 300px; /* Adjust based on content */
  }
  
  .conversion-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  
  .conversion-button:last-child {
    border-bottom: none;
  }
  
  .conversion-button:hover {
    background-color: #f0f0f0;
  }
  
  .conversion-button .unit-name {
    margin: 0;
  }
  
  /* =========================================================================
     7. System Titles
     Styles for separating metric/imperial units (e.g., in length converter)
     ========================================================================= */
  .system-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 20px 0 10px;
    text-align: center;
  }
  
  /* =========================================================================
     8. Responsive Styles
     Media queries for mobile and smaller screens
     ========================================================================= */
  @media (max-width: 768px) {
    /* General */
    .title {
      font-size: 2em;
    }
    .carousel-item {
      padding: 10px;
    }
    .unit-name {
      gap: 6px;
    }
    .unit-name-text {
      font-size: 14px;
    }
    .unit-denomination {
      font-size: 12px;
    }
    .unit-flag {
      width: 20px;
      height: 20px;
    }
    /* Add Unit Button */
    .add-unit-btn {
      position: sticky;
      bottom: 10px;
      margin: 10px auto;
    }
    .unit-list {
      width: 200px;
    }
    /* Quick Conversions */
    .quick-conversions h3 {
      font-size: 16px;
    }
    .accordion-title {
      font-size: 14px;
      padding: 10px;
    }
    .accordion-title .unit-name-text {
      font-size: 14px;
    }
    .accordion-title .unit-flag {
      width: 20px;
      height: 20px;
    }
    .conversion-button {
      font-size: 13px;
      padding: 8px;
    }
    .conversion-button .unit-name-text {
      font-size: 13px;
    }
    .conversion-button .unit-flag {
      width: 18px;
      height: 18px;
    }
    /* System Titles */
    .system-title {
      font-size: 16px;
      margin: 15px 0 8px;
    }
  }