/* ═══════════════════════════════════════════════════════════
   Stripe Checkout Clone — CSS
   Pixel-perfect match to tickets-oceanariumsg.shop
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#1a1f36;min-height:100vh;background:#f6f9fc}
img,svg{display:inline-block;vertical-align:middle}
input,select,button{font:inherit}
a{color:#5469d4;text-decoration:none}
#root{min-height:100vh}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.checkout-container{display:flex;min-height:100vh;position:relative}
.checkout-bg{position:fixed;top:0;left:0;width:50%;height:100%;z-index:-1}
.checkout-summary{flex:0 0 50%;display:flex;justify-content:flex-end;padding:48px 40px;color:#fff;position:relative;z-index:1}
.checkout-form-panel{flex:0 0 50%;display:flex;justify-content:flex-start;padding:48px 40px;background:#fff;z-index:1}
.checkout-form-panel main{width:100%;max-width:480px}
.summary-inner{width:100%;max-width:350px;display:flex;flex-direction:column;min-height:100%}

/* ─── SUMMARY PANEL ──────────────────────────────────────── */
.summary-logo{margin-bottom:40px}
.stripe-badge-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);padding:6px 12px;border-radius:20px;font-size:12px}
.badge-pill-text{color:#6d6e78;font-weight:400;font-size:12px;letter-spacing:.01em}
.stripe-badge-pill svg{vertical-align:middle;margin-top:1px}
.summary-product{margin-bottom:40px}
.summary-product-name{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.65);margin-bottom:8px;letter-spacing:.02em}
.summary-amount{font-size:36px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
.currency-symbol{font-weight:600}
.summary-totals{border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:auto}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:rgba(255,255,255,.75);font-weight:400}
.summary-row-total{font-size:16px;font-weight:600;color:#fff;border-top:1px solid rgba(255,255,255,.15);padding-top:16px;margin-top:12px}
.summary-badge{margin-top:40px;display:flex;align-items:center;gap:6px;opacity:.5}
.badge-text{font-size:12px;color:rgba(255,255,255,.7)}
.badge-stripe-img{height:14px;filter:brightness(100)}

/* ─── FORM FIELDS ────────────────────────────────────────── */
.section-title{font-size:16px;font-weight:600;color:#30313d;margin-bottom:12px;letter-spacing:-.01em}
.field-group{margin-bottom:0}
.field-label{display:block;font-size:13px;font-weight:500;color:#6d6e78;margin-bottom:6px}
.field-wrap{position:relative}
.field-single{border:1px solid #e6e6e6;border-radius:6px;overflow:hidden}
.field-single .field-input{border:none}
.field-input{width:100%;padding:10px 12px;font-size:14px;border:1px solid #e6e6e6;background:#fff;color:#30313d;outline:none;transition:border-color .15s,box-shadow .15s}
.field-input:focus{border-color:#0570de;box-shadow:0 0 0 3px rgba(5,112,222,.12)}
.field-input::placeholder{color:#aab7c4}
.field-input.error{border-color:#df1b41;box-shadow:none}
.field-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236d6e78' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;color:#30313d}
.field-select option{color:#30313d}

/* Fieldset grouping — connected borders like real Stripe */
.fieldset-group{border:1px solid #e6e6e6;border-radius:6px;overflow:hidden}
.fieldset-group .field-wrap{border-bottom:1px solid #e6e6e6}
.fieldset-group .field-wrap:last-child,.fieldset-group .field-wrap-row:last-child{border-bottom:none}
.fieldset-group .field-input{border:none;border-radius:0}
.fieldset-group .field-input:focus{box-shadow:inset 0 0 0 2px rgba(5,112,222,.25);z-index:1;position:relative}
.fieldset-group .field-wrap-row{border-bottom:1px solid #e6e6e6}
.fieldset-group .field-wrap-row:last-child{border-bottom:none}
.field-wrap-row{display:flex}
.field-wrap-row .field-wrap{flex:1}
.field-wrap-row .field-wrap+.field-wrap{border-left:1px solid #e6e6e6}

/* Card number with brand icon */
.card-number-input{padding-right:48px!important}
.card-brand-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:20px;display:flex;align-items:center;justify-content:center}

/* ─── PAYMENT METHODS ────────────────────────────────────── */
.payment-methods{border:1px solid #e6e6e6;border-radius:6px;overflow:hidden}
.pm-item{border-bottom:1px solid #e6e6e6}
.pm-item:last-child{border-bottom:none}
.pm-header{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;min-height:48px}
.pm-radio{width:16px;height:16px;accent-color:#0570de;margin:0;cursor:pointer;flex-shrink:0}
.pm-icon-img{width:18px;height:18px;flex-shrink:0;object-fit:contain}
.pm-label{font-size:14px;font-weight:500;color:#30313d}
.pm-label-gray{font-size:14px;color:#6d6e78}
.pm-brands{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pm-brand-icon{height:18px;width:auto;object-fit:contain}
.pm-body{padding:0 16px 16px}
.pm-active{background:#f7f8fa}
.pm-inactive{background:#f0f0f0}
.pm-inactive .pm-header{cursor:default;opacity:.85}
.pm-inactive .pm-radio{opacity:.5}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-pay{width:100%;height:44px;background:#0570de;color:#fff;font-size:16px;font-weight:600;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,opacity .15s,transform .08s;letter-spacing:.01em}
.btn-pay:hover{background:#0462c7}
.btn-pay:active{transform:scale(.997)}
.btn-pay:disabled{opacity:.65;cursor:not-allowed}
.btn-lock-icon{display:flex;align-items:center}
.btn-spinner{width:20px;height:20px;display:flex;align-items:center}
.btn-spinner svg{width:20px;height:20px;animation:spin .6s linear infinite}
.btn-spinner svg ellipse{fill:none;stroke-width:3;stroke-dasharray:45 30}
.btn-retry{background:#df1b41}
.btn-retry:hover{background:#c41838}
.pay-btn-wrap{margin-top:24px}

/* ─── CARD ALERT BANNER ─────────────────────────────────── */
.card-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:13px;line-height:1.5;animation:alertSlide .3s ease}
.card-alert-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.card-alert-warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.card-alert-icon{flex-shrink:0;margin-top:1px}
.card-alert-text{font-weight:500}
@keyframes alertSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

@keyframes spin{to{transform:rotate(360deg)}}

/* ─── OTP SECTION ────────────────────────────────────────── */
.otp-section,.push-notification,.balance-section,.result-section,.loading-section{padding:40px 0}
.otp-inner,.push-notification,.balance-section .otp-inner,.result-inner,.loading-inner{max-width:400px;margin:0 auto;text-align:center}
.otp-title{font-size:16px;font-weight:500;color:#30313d;margin-bottom:24px;line-height:1.5}
.otp-inputs{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.otp-input{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:1px solid #e6e6e6;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s;color:#30313d}
.otp-input:focus{border-color:#0570de;box-shadow:0 0 0 3px rgba(5,112,222,.12)}
.otp-input.error{border-color:#df1b41}
.otp-error{display:flex;align-items:center;gap:6px;color:#df1b41;font-size:13px;margin-bottom:16px;justify-content:center}
.otp-submit-btn{margin-top:8px}

/* ─── PUSH SECTION ───────────────────────────────────────── */
.push-notification{text-align:center}
.push-notification h2{font-size:20px;font-weight:700;color:#30313d;margin-bottom:16px}
.push-notification p{font-size:14px;color:#6d6e78;margin-bottom:12px;line-height:1.6}
.push-timer-wrap{font-size:14px;color:#6d6e78;margin:20px 0}
.push-timer{font-weight:700;color:#30313d;font-size:18px}
.push-confirm-btn{margin-top:16px}

/* ─── BALANCE SECTION ────────────────────────────────────── */
.balance-input-wrap{margin-bottom:20px}
.balance-input{text-align:center;font-size:18px;padding:14px!important;border-radius:8px!important}

/* ─── RESULT SECTIONS ────────────────────────────────────── */
.result-inner{text-align:center;padding:40px 20px}
.result-icon{margin-bottom:20px}
.result-icon svg{margin:0 auto}
.result-success h2{color:#22c55e;font-size:22px;margin-bottom:8px}
.result-failed h2{color:#df1b41;font-size:22px;margin-bottom:8px}
.result-inner p{color:#6d6e78;font-size:14px;margin-bottom:20px}

/* ─── LOADING ────────────────────────────────────────────── */
.loading-inner{text-align:center;padding:60px 20px}
.loading-spinner{width:40px;height:40px;border:3px solid #e6e6e6;border-top-color:#0570de;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 16px}
.loading-inner p{color:#6d6e78;font-size:14px}

/* ─── OVERLAY ────────────────────────────────────────────── */
.hp-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:100;display:none}
.hp-overlay.active{display:block}

/* ─── FOOTER ─────────────────────────────────────────────── */
.checkout-footer{margin-top:32px;display:flex;justify-content:space-between;align-items:center;padding-bottom:24px}
.footer-powered{font-size:12px;color:#8792a2;display:flex;align-items:center;gap:4px}
.footer-stripe-icon{vertical-align:middle}
.footer-links{display:flex;gap:12px}
.footer-links a{font-size:12px;color:#8792a2;transition:color .15s}
.footer-links a:hover{color:#5469d4}
.confirm-terms{font-size:13px;color:#6d6e78;text-align:center;margin-top:16px;line-height:1.5}

/* ─── UTILITIES ──────────────────────────────────────────── */
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.d-none{display:none!important}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — matches real Stripe Checkout mobile layout
   
   Real Stripe on mobile:
   - Summary panel sits ON TOP as a compact bar
   - Background color fills top behind summary
   - Form panel takes full width below
   - No side-by-side split
   ═══════════════════════════════════════════════════════════ */

@media(max-width:991.98px){
  .checkout-container{flex-direction:column}
  .checkout-bg{position:absolute;top:0;left:0;width:100%;height:auto;z-index:0}
  
  /* Summary panel — compact bar on top */
  .checkout-summary{
    flex:none;
    padding:24px 20px 20px;
    justify-content:center;
    order:-1;
  }
  .summary-inner{max-width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
  
  /* Logo smaller on mobile */
  .summary-logo{margin-bottom:0;flex:0 0 100%}
  .summary-logo svg{height:20px}
  
  /* Product info inline */
  .summary-product{margin-bottom:0;flex:1;min-width:0}
  .summary-product-name{font-size:13px;margin-bottom:4px}
  .summary-amount{font-size:28px}
  
  /* Totals inline */
  .summary-totals{border-top:none;padding-top:0;margin-top:0;flex:0 0 100%;display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.15);padding-top:12px}
  .summary-row{padding:0;font-size:13px}
  .summary-row-total{border-top:none;padding-top:0;margin-top:0;font-size:14px}
  
  /* Badge compact */
  .summary-logo{margin-bottom:16px}
  
  /* Form panel full width */
  .checkout-form-panel{
    flex:none;
    padding:24px 20px 32px;
    justify-content:center;
  }
  .checkout-form-panel main{max-width:100%}
  
  /* Footer centered */
  .checkout-footer{justify-content:center;flex-direction:column;gap:8px;align-items:center}
  .footer-powered{justify-content:center}
}

@media(max-width:480px){
  .checkout-summary{padding:20px 16px 16px}
  .checkout-form-panel{padding:20px 16px 24px}
  .summary-amount{font-size:24px}
  .otp-input{width:42px;height:48px;font-size:20px}
  .pm-brand-icon{height:15px}
  .pm-brands{gap:3px}
}

/* Very small screens */
@media(max-width:360px){
  .otp-inputs{gap:4px}
  .otp-input{width:38px;height:44px;font-size:18px}
  .field-wrap-row{flex-direction:column}
  .field-wrap-row .field-wrap+.field-wrap{border-left:none;border-top:1px solid #e6e6e6}
}