/* =========================================
   1. GLOBAL RESET & TYPOGRAPHY
   ========================================= */
   * {
    box-sizing: border-box; /* CRITICAL: Prevents padding from breaking layout */
  }
  
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto; 
    min-height: 100vh; /* Allow scrolling if needed */
  }
  
  body {
    display: flex;
    flex-direction: column;
    background-color: #0F172A; /* Navy */
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    color: #F7EBCA; /* Cream */
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */

    min-height: 100vh; 
    height: auto; 
    position: relative; /* Helps anchor elements */
  }
  
  h2, h3, label, p, button, input, select {
    font-family: 'Baloo Bhaijaan 2', sans-serif !important;
  }
  
  /* =========================================
     2. MAIN LAYOUT WRAPPERS
     ========================================= */
  /* Logo */
  .logo-container {
    margin-top: 40px;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
  }
  
  .main-logo {
    max-width: 250px;
    height: auto;
    display: inline-block;
  }
  
  /* Middle Content Area */
  .parent-container {
    flex: 1 0 auto; /* Pushes footer down */
    display: flex;
    flex-direction: column; /* Default: normal column direction */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0 60px 0;
  }
  
  /* Order Confirmation View: Use column-reverse (all screen sizes) */
  .parent-container:has(#celebrationContainer:not(.hidden)),
  .parent-container.show-celebration {
    flex-direction: column-reverse;
  }
  
  /* Form View: Use column-reverse for both desktop and mobile */
  .parent-container:has(#orderFormContainer:not(.hidden)),
  .parent-container.show-form {
    flex-direction: column-reverse;
  }
  
  /* Footer */
  footer {
    flex-shrink: 0;
    width: 100%;
    padding: 20px 0;
    background: transparent;
    text-align: center;
    margin-top: auto;
  }
  
  footer p {
    color: rgba(247, 235, 202, 0.5);
    font-size: 14px;
    margin: 0;
  }
  
  /* =========================================
     3. COMPONENT CARDS (The Navy Boxes)
     ========================================= */
  /* General Container */
  .container, 
  #genderSelection, 
  #orderFormContainer, 
  .celebration-container {
    background-color: #1E293B; /* Lighter Navy */
    border: 1px solid #E2C476; /* Gold Border */
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 30px;
    margin: 20px auto;
    width: 96%; /* Mobile Safe Width */
    max-width: 500px; /* Desktop Max Width */
    position: relative;
  }
  
  /* Special Width for Checkout Form */
  #orderFormContainer {
    max-width: 600px; 
  }
  
  /* Active Builder Step */
  .step.active {
    display: block;
    width: 100%;
  }
  .step { display: none; }
  
  #genderSelection h2 {
    color: #F7EBCA;
    font-size: 22px;
    margin-bottom: 30px;
    text-align: center;
  }
  
  /* =========================================
     4. THE CHARACTER CIRCLE & SVG FIX
     ========================================= */
  .circle-container {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-image: url('../images/order/char-bg.png');
    background-size: cover;
    background-position: bottom;
    border: 4px solid #E2C476;
    box-shadow: 0 0 30px rgba(226, 196, 118, 0.2);
    margin: 0 auto 20px auto;
    position: relative;
    background-color: #fff;
    overflow: hidden; /* Keeps SVG inside */
    z-index: 1;
  }
  
  .svg-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* FORCE SVG TO FIT (The "Speck" Fix) */
  .svg-container svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  
  /* =========================================
     5. SLIDERS (HAIR/COLORS) FIXES
     ========================================= */
  .glider-contain {
    width: 100%;
    position: relative;
    padding: 0 40px !important; 
    margin: 0 auto;
  }
  
  .glider {
    overflow-x: hidden;
    /* FOUC Fix: Force horizontal immediately */
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
  }
  
  /* Option Items (Hair/Glasses/Color Circles) */
  .hair-option, .beard-option, .glasses-option, .glider img, .color-circle {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important; /* Prevent Squashing */
    min-height: 55px !important;
    
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #ccc;
    object-fit: contain;
    cursor: pointer;
    display: block;
    
    margin: 5px 7px !important; /* Nice spacing */
  }
  
  .hair-option:hover, .color-circle:hover {
    border-color: #E2C476 !important;
    transform: scale(1.1);
  }
  
  /* Arrows */
  .glider-prev, .glider-next {
    background-color: #E2C476;
    color: #0F172A;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important; /* Fixed Position */
    margin: 0 !important;
    border: none;
    z-index: 5;
    font-size: 20px !important;
  }
  .glider-prev { left: 0; }
  .glider-next { right: 0; }
  
  /* Fix Arrow Jump on Hover */
  .glider-prev:hover, .glider-next:hover {
    transform: translateY(-50%) scale(1.1) !important;
    background-color: #fff !important;
    margin-top: 0 !important;
  }
  
  /* Fix Beard/Glasses Row */
  #beardstyles, #glassesstyles, #glassesstyles-female {
    display: flex !important;
    flex-direction: row !important;
    /* flex-wrap: wrap !important; */
    justify-content: center !important;
    gap: 10px !important;
  }
  
  /* =========================================
     6. BUTTONS & INPUTS
     ========================================= */
  button {
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  /* Primary Gold Buttons */
  #startCharacter, #maleSelect, #femaleSelect, #nextStep, #nextStep-female, .order-create, button[type="submit"] {
    background-color: #E2C476 !important;
    color: #0F172A !important;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(226, 196, 118, 0.2);
    min-width: 120px;
  }
  
  button:hover {
    transform: translateY(-2px);
    background-color: #fff !important;
    box-shadow: 0 8px 20px rgba(226, 196, 118, 0.4);
  }
  
  /* Secondary Buttons */
  #prevStep, #prevStep-female, .start-over {
    background-color: transparent !important;
    border: 2px solid #E2C476 !important;
    color: #E2C476 !important;
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
  }
  
  .button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
  }
  
  /* Inputs */
  input, select, textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #F7EBCA;
    color: #0F172A;
    border: 2px solid transparent;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
  }
  
  input:focus, select:focus {
    outline: none;
    border-color: #E2C476;
  }
  
  label {
    color: #E2C476;
    display: block;
    text-align: right;
    margin-bottom: 15px;
    font-weight: 600;
  }
  
  /* =========================================
     7. CHECKOUT PAGE SPECIFICS
     ========================================= */
  #previewContainer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(226, 196, 118, 0.2);
    padding-bottom: 20px;
  }
  
  .preview-item {
    flex: 1;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .preview-item h3 {
    color: #E2C476 !important;
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  /* Limit Character Height on Desktop */
  #previewContainer svg {
    height: 160px !important;
    width: auto !important;
  }
  
  .order-create-container {
    display: flex;
    gap: 15px;
    justify-content: space-between;
  }
  .order-create, .start-over {
    flex: 1;
  }
  
  #orderForm h2 {
    color: #F7EBCA;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* =========================================
     8. THANK YOU SCREEN
     ========================================= */
  .celebration-container {
    text-align: center;
  }
  .thank-you { color: #E2C476; font-size: 32px; font-weight: bold; }
  .order-number {
    border: 1px dashed #E2C476;
    color: #E2C476;
    padding: 10px;
    margin: 15px 0;
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
  }
  
  /* =========================================
     9. MOBILE RESPONSIVENESS (The Fix)
     ========================================= */
  @media screen and (max-width: 768px) {
    /* 1. Fix Margins - exclude hidden elements */
    .container, #genderSelection:not(.hidden), #orderFormContainer:not(.hidden), .celebration-container:not(.hidden) {
      width: 100% !important;
      margin: 10px auto !important;
      padding: 20px 20px !important;
      max-width: 361px;
    }
  
    #genderSelection:not(.hidden) {
      max-width: 361px !important;
    }
    
    /* Ensure hidden elements take absolutely no space */
    #genderSelection.hidden,
    #orderFormContainer.hidden,
    .celebration-container.hidden {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 0 !important;
      max-width: 0 !important;
      overflow: hidden !important;
    }

    /* 2. Fix Circle Size */
    .circle-container {
      width: 220px;
      height: 220px;
    }
  
    /* 3. Fix Slider Arrows on Edge */
    .glider-contain {
      padding: 0 30px;
    }
    .glider-prev { left: -5px; }
    .glider-next { right: -5px; }
  
    /* 4. Shrink Option Circles slightly to fit more */
    .hair-option, .beard-option, .glasses-option, .glider img, .color-circle {
      width: 45px !important;
      height: 45px !important;
      min-width: 45px !important;
      min-height: 45px !important;
    }
  
    /* 5. Fix Checkout Characters Size */
    #previewContainer svg {
      height: 120px !important; /* Smaller on mobile */
    }
    
    /* 6. Stack Buttons if needed, or keep full width */
    .button-group button {
      padding: 12px 5px; /* Less padding */
      font-size: 16px;
    }
    
    /* 7. Logo Fix - Reduce top margin on mobile */
    .logo-container {
      margin-top: 15px !important; /* Reduced from 30px to minimize space */
      margin-bottom: 10px !important; /* Small bottom margin before container */
    }
    .main-logo { max-width: 180px !important; }
    
    /* Fix parent-container gap issue on mobile - use block instead of flex */
    .parent-container {
      display: block !important; /* Removes flex display to fix gap issue on mobile */
      flex: none !important;
      align-items: unset !important;
      justify-content: unset !important;
      padding-top: 5px !important; /* Reduced from 20px to minimize top space */
      padding-bottom: 60px !important;
    }
    
    /* Ensure hidden elements take no space on mobile - must override all other rules */
    #genderSelection.hidden {
      display: none !important;
      height: 0 !important;
      width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      visibility: hidden !important;
      opacity: 0 !important;
      overflow: hidden !important;
      max-width: 0 !important;
      max-height: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      border: none !important;
      position: absolute !important;
      left: -9999px !important;
    }
    
    #celebrationContainer.hidden {
      display: none !important;
      height: 0 !important;
      width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      visibility: hidden !important;
      opacity: 0 !important;
      overflow: hidden !important;
      max-width: 0 !important;
      max-height: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      border: none !important;
      position: absolute !important;
      left: -9999px !important;
    }
    
    #startScreen.hidden {
      display: none !important;
      height: 0 !important;
      width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      visibility: hidden !important;
      opacity: 0 !important;
      overflow: hidden !important;
      max-width: 0 !important;
      max-height: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      border: none !important;
      position: absolute !important;
      left: -9999px !important;
    }
    
    /* Center startScreen button on mobile after removing flex */
    #startScreen {
      text-align: center !important;
      width: 100% !important;
    }
    
    #startCharacter {
      margin: 0 auto !important;
      display: inline-block !important;
    }
    
    #startScreen.hidden #startCharacter,
    #startCharacter[style*="display: none"] {
      display: none !important;
    }
  }
  
  /* Utilities */
  .hidden { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
    height: 0 !important; 
    overflow: hidden !important;
  }
  .validation-error { color: #ff6b6b; font-size: 14px; min-height: 20px; }

  /* =========================================
   UPDATED MOBILE FIXES (Paste inside the media query)
   ========================================= */

@media (max-width: 768px) {

  /* 1. Fix the Container Width & Padding */
  .container, #genderSelection:not(.hidden), #orderFormContainer:not(.hidden), .celebration-container:not(.hidden) {
    width: 100% !important; /* Give it a tiny bit more width */
    padding: 25px 20px !important; /* More vertical breathing room */
    max-width: 361px !important;
  }

  #genderSelection:not(.hidden) {
    max-width: 361px !important;
  }
  
  /* Ensure hidden containers take no space */
  #genderSelection.hidden,
  #orderFormContainer.hidden,
  .celebration-container.hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }

  /* 2. FIX THE ARROW OVERLAP (Crucial) */
  .glider-contain {
    /* Increase padding so arrows sit in their own lane, not on top of items */
    padding: 0 45px !important; 
  }

  /* 3. Shrink Arrows Slightly on Mobile */
  .glider-prev, .glider-next {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    /* Pull them closer to the edge so they don't crowd the center */
    left: 5px !important;
  }
  
  .glider-next {
    left: auto !important;
    right: 5px !important;
  }

  /* 4. Ensure Circles are Small Enough to fit */
  .hair-option, .beard-option, .glasses-option, .glider img, .color-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    /* Ensure margins are safe */
    margin: 5px 7px !important;
  }

  /* 5. Stack the Bottom Buttons (Better for Thumbs) */
  .button-group {
    flex-direction: row; /* Keep side-by-side usually looks better for Next/Prev */
    gap: 10px;
  }
  
  .button-group button {
    padding: 14px 10px !important; /* Taller buttons for touch */
  }
}

/* =========================================
   FIX: GENDER BUTTONS ALIGNMENT (MOBILE)
   ========================================= */

   @media (max-width: 768px) {
  
    /* 1. Turn the Gender Box into a Flex Grid */
    #genderSelection {
      display: flex !important;
      flex-direction: row !important; /* Arrange items horizontally */
      flex-wrap: wrap !important; /* Allow wrapping */
      justify-content: center !important; /* Center everything */
      gap: 15px !important; /* Clean space between buttons */
      padding: 30px 15px !important;
    }
  
    /* 2. Force the Headline to take the full top row */
    #genderSelection h2 {
      width: 100% !important;
      margin-bottom: 15px !important;
      order: 1; /* Ensure it stays at the top */
    }
  
    /* 3. Make Buttons Equal & Side-by-Side */
    #maleSelect, #femaleSelect {
      order: 2; /* Below the title */
      width: 45% !important; /* Each takes almost half width */
      min-width: auto !important;
      margin: 0 !important; /* Remove messy margins */
      flex: 0 0 auto !important; /* Stop them from squishing */
      
      /* Center text/icon inside */
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 8px; /* Space between icon and text */
    }
  }

  /* =========================================
   FIX: GENDER BUTTONS ALIGNMENT (MOBILE)
   ========================================= */

@media (max-width: 768px) {
  
  /* 1. Turn the Gender Box into a Flex Grid */
  #genderSelection {
    display: flex !important;
    flex-direction: row !important; /* Arrange items horizontally */
    flex-wrap: wrap !important; /* Allow wrapping */
    justify-content: center !important; /* Center everything */
    gap: 15px !important; /* Clean space between buttons */
    padding: 30px 15px !important;
  }

  /* 2. Force the Headline to take the full top row */
  #genderSelection h2 {
    width: 100% !important;
    margin-bottom: 15px !important;
    order: 1; /* Ensure it stays at the top */
  }

  /* 3. Make Buttons Equal & Side-by-Side */
  #maleSelect, #femaleSelect {
    order: 2; /* Below the title */
    width: 45% !important; /* Each takes almost half width */
    min-width: auto !important;
    margin: 0 !important; /* Remove messy margins */
    flex: 0 0 auto !important; /* Stop them from squishing */
    
    /* Center text/icon inside */
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between icon and text */
  }
}

/* =========================================
   FIX: GENDER SELECTION (DESKTOP & GLOBAL)
   ========================================= */
   #genderSelection {
    /* 1. Enable Flexbox to center everything perfectly */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows items to wrap to next line */
    justify-content: center; /* Horizontal Center */
    align-items: center; /* Vertical Center */
    gap: 20px; /* Clean space between buttons */
  
    /* 2. Card Styling */
    text-align: center;
    padding: 40px;
    background: #1E293B;
    border: 1px solid #E2C476;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
  }
  
  /* 3. Force the Title to take the full top row */
  #genderSelection h2 {
    width: 100%; 
    color: #F7EBCA;
    font-size: 22px;
    margin-bottom: 20px;
  }
  
  /* 4. Reset Button Margins so 'gap' handles spacing */
  #maleSelect, #femaleSelect {
    margin: 0 !important;
  }
  

  /* =========================================
   MOBILE FIXES (Paste inside @media max-width: 768px)
   ========================================= */

  /* 1. FIX THE "PACKED" THANK YOU TEXT */
  /* We use Flexbox 'gap' to force space between every line */
  .celebration-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 25px !important; /* Adds 25px of air between every element */
    padding: 40px 20px !important;
  }

  /* Reset margins so 'gap' does the work evenly */
  .celebration-container div, 
  .celebration-container p,
  .thank-you, 
  .order-label, 
  .order-number,
  .confirmation, 
  .contact {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Fix Line Height for long text */
  .confirmation, .contact {
    line-height: 1.8 !important; /* More space between lines of text */
    font-size: 16px !important;
  }

  /* 2. FIX THE DROPDOWN (SELECT) BOX */
  select {
    width: 100% !important;
    height: 50px !important; /* Force height to match inputs */
    
    /* Force text to be centered on mobile */
    text-align: center !important;
    text-align-last: center !important; /* Critical for Android/Chrome */
    
    /* Remove weird native margins */
    margin-bottom: 15px !important;
    
    /* Ensure background matches inputs */
    background-color: #F7EBCA !important;
    border-radius: 12px !important;
  }