/* --- Checkout polish for desktop & mobile --- */
#payment-message{
  color:#df1b41;
  font-size:14px;
  margin-top:10px;
}

#paybtn{
  width:100%;
  height:48px;
  border-radius:10px;
  font-weight:600;
  letter-spacing:.2px;
  background:#BF952B;
  border:none;
}

#paybtn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Make sure Stripe iframes scale nicely */
#payment-element, .StripeElement, .ElementsApp, .PaymentElement{
  max-width:100% !important;
}

/* Try to ensure the section that hosts payment element isn't clipped */
.card, .panel, .block, .container, .section{
  overflow:visible !important;
}

/* Inputs full width if any theme constrains them */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea{
  width:100% !important;
}

/* Spacing */
#payment-element{ margin-top:12px; }
form .field, .form-field, .input-group{ margin-bottom:12px; }

/* Desktop small tweaks */
@media (min-width: 992px){
  .checkout-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:24px;
  }
}

/* Mobile stack & readability */
@media (max-width: 768px){
  /* Force 1-column layout for anything resembling rows/columns */
  .row, .rows, .columns, .column, .col, .left, .right, .grid, .checkout-grid{
    display:block !important;
    width:100% !important;
  }
  .checkout-left, .checkout-right{ width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  #paybtn{ width:100%; margin-top:12px; }
  /* keep summary below */
  .summary, .order-summary{ margin-top:16px; }
}


/* ===== Bottom Pay Bar (placed at very bottom of page) ===== */
#pay-actions{ display:none !important; } /* hide previous in-page pay row if exists */
form button[type="submit"]:not(#paybtn){ display:none !important; } /* only keep our main button */

.paybar-bottom{
  width:100%;
  margin-top:24px;
}
.paybar-bottom .paybar-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-top:1px solid rgba(0,0,0,.06);
}
.paybar-bottom .paybar-total{
  font-weight:800;
  font-size:18px;
}
/* reuse checkout theme button */
.paybar-bottom .btn-pay{
  padding:12px 18px;
  border-radius:10px;
  background:#BF952B;
  color:#111;
  border:none;
  font-weight:700;
}

@media (max-width: 768px){
  .paybar-bottom .paybar-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .paybar-bottom .paybar-total{ font-size:18px; margin-bottom:6px; }
  .paybar-bottom .btn-pay{ width:100%; height:48px; }
}


/* ===== desktop half-width pay button in bottom bar ===== */
@media (min-width: 992px){
  .paybar-bottom .paybar-inner{
    justify-content:flex-start;
    gap:24px;
  }
  .paybar-bottom .btn-pay{
    width:50%;
  }
}

/* Hide any legacy pay button/total not in bottom bar */
#paybtn{ display:none !important; }
#paybar-bottom #paybtn{ display:inline-block !important; }
#pay-actions, .legacy-total, .legacy-pay { display:none !important; }


/* ===== Mobile stacking fix: keep Informations above, prevent Stripe overlay ===== */
@media (max-width: 768px){
  /* make sure both sections are block flow and full-width */
  #payment-element, .PaymentElement, .StripeElement{
    display:block !important;
    width:100% !important;
    float:none !important;
    clear:both !important;
    position:relative !important;
    z-index:1 !important;
  }
  /* Inputs sit above any iframe if browsers mess with z-index */
  form input, form select, form textarea, .form-control{
    position:relative;
    z-index:3;
  }
  /* parent containers must not clip children */
  .checkout-left, .checkout-form, .card, .panel, .container, .content, main{
    overflow:visible !important;
  }
  /* avoid margin collapse weirdness */
  #payment-element{ margin-top:12px; }
}

/* Slight polish for tabs spacing so nothing floats over the form title */
.payment-tabs, .PaymentElementContainer{
  position:relative;
  z-index:1;
}


/* ====== MOBILE INFO OVERLAY HARD FIX (v2) ====== */
@media (max-width: 768px){
  /* Force block flow and stacking order */
  #checkout-v2-form{ display:block !important; }
  #info-section, #pay-section{
    display:block !important;
    position:relative !important;
    float:none !important;
    clear:both !important;
    isolation:isolate; /* create new stacking context for safety */
  }
  #info-section{ z-index: 5 !important; }
  #pay-section { z-index: 2 !important; margin-top: 12px; }

  /* Stripe containers must not be sticky/absolute */
  #pay-section .PaymentElement,
  #pay-section .StripeElement,
  #pay-section [id*='PaymentElement'],
  #pay-section iframe{
    position:relative !important;
    display:block !important;
    width:100% !important;
    z-index:1 !important;
  }

  /* Inputs must always be on top within info-section */
  #info-section input, #info-section select, #info-section textarea, 
  #info-section .form-control, #info-section .field{
    position:relative !important;
    z-index:6 !important;
  }

  /* Remove any clipping from parent blocks on mobile */
  main, .container, .content, .card, .panel, .checkout-left, .checkout-form{
    overflow:visible !important;
  }

  /* Avoid unexpected transforms creating new stacking contexts */
  #info-section, #pay-section, #paybar-bottom { transform:none !important; }
}



/* ====== MOBILE: hard fix when Stripe iframe visually covers headings ====== */
@media (max-width: 768px){
  /* Make sure the section titles are always on top and readable */
  #pay-section > h2,
  #info-section > h2,
  .checkout-title, .section-title{
    position: relative !important;
    z-index: 999 !important;
    background: #fff !important;
  }

  /* Stripe container must sit below titles */
  #pay-section .PaymentElement,
  #pay-section .StripeElement,
  #pay-section [id*='PaymentElement'],
  #pay-section iframe{
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  /* Prevent any odd negative margins or overlaps from custom themes */
  #pay-section, #info-section{
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  /* Ensure parents don't clip the headings */
  #checkout-v2-form, #pay-section, #info-section{
    overflow: visible !important;
  }
}




/* --- FIX: Stripe Payment Element overlapping "Informations" on mobile (<1000px) --- */
@media (max-width: 1000px){
  /* Ensure the title stays above any iframes */
  .section-card > h1{
    position: relative !important;
    z-index: 12 !important;
    background: #fff !important; /* avoids translucency artifacts */
  }
  /* Create explicit stacking contexts for sections */
  .section-card, #info-section, #pay-section, #checkout-v2-form{
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }
  /* Stripe host should never float above headings */
  #payment-element{
    position: relative !important;
    z-index: 2 !important;
    min-height: 220px !important; /* reserve space during async mount */
    margin-top: 8px !important;
  }
  /* Defensive: make sure any stray sticky bars from themes stay below headings */
  .paybar, .paybar-bottom{
    z-index: 9 !important;
  }
}


/* EXTRA: enforce flow layout for Stripe host and neighbors */
@media (max-width: 1000px){
  #payment-element{ display:block !important; float:none !important; clear:both !important; }
  /* avoid any accidental negative margins from themes */
  #payment-element, #info-section, #checkout-v2-form{ margin-top: 8px !important; }
}


/* HARD FIX: disable sticky paybar on mobile so Stripe element doesn't overlay fields */
@media (max-width: 1000px){
  .paybar{
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    border-top: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  .paybar .paybar-inner{
    padding: 0 !important;
    gap: 12px !important;
  }
}


@media (max-width: 768px){
  .checkout-min-header{ margin-top:4px; }
  .checkout-min-header .back-to-cart{ font-size:13px; padding:8px 10px; }
}