/* ═══════════════════════════════════════
   Soup N' Spud - Checkout Modal Styles
═══════════════════════════════════════ */

/* Checkout modal mobile */
  .checkout-modal-overlay{padding:0;align-items:flex-end;}
  .checkout-modal{max-width:100%;max-height:100vh;border-radius:20px 20px 0 0;}
  .co-steps{padding:18px 16px 0;}
  .co-panel{padding:20px 16px;}
  .co-field-row{grid-template-columns:1fr;}
  .co-summary-item{font-size:13px;}
  /* Auth modal mobile */
  .auth-overlay{padding:0;align-items:flex-end;}
  .auth-box{width:100%;border-radius:20px 20px 0 0;max-height:96vh;overflow-y:auto;}
  /* Account panel mobile */
  .account-panel-head{padding:20px 16px 14px;}
  .account-section{padding:14px 16px;}
  .account-info-row{font-size:13px;}
  /* Admin mobile */
  .admin-wrap{padding:20px 12px 60px;}
  .admin-stats{flex-wrap:wrap;}
  .admin-stat-card{min-width:calc(50% - 8px);flex:none;}
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .admin-tabs::-webkit-scrollbar{display:none;}
  .admin-tab{white-space:nowrap;flex-shrink:0;}
  .admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .admin-table{min-width:560px;}
  .order-filters{flex-wrap:wrap;gap:6px;}
  .order-filter{padding:7px 12px;font-size:11px;}
  .order-card-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .order-actions{flex-wrap:wrap;gap:6px;}
  .btn-status-preparing,.btn-status-ready,.btn-status-delivered,.btn-status-cancel{padding:7px 14px;font-size:11px;}
  /* Settings fields */
  .settings-input{font-size:14px;}
  .settings-label{font-size:11px;}
  /* iOS: prevent zoom on input focus */
  .co-input,.co-select,.auth-input,.settings-input,.admin-input{font-size:16px!important;}
  .email-admin-field{max-width:100%;}
  /* Delivery zone mobile */
  .dz-form-row{grid-template-columns:1fr;gap:8px;}
  .dz-zone-card{flex-direction:column;align-items:flex-start;gap:8px;}
  .dz-zone-actions{align-self:flex-end;}
  .cal-day{padding:6px 2px;font-size:12px;}
  /* User menu */
  .user-menu{right:-40px;min-width:200px;}
}

/* ── Very small phones ── */
@media(max-width:380px){
  nav{padding:0 10px;}
  .nav-cart{padding:7px 10px;font-size:11px;}
  .nav-account{padding:6px 8px;}
  .hero{padding:24px 12px 0;}
  .hero-h1{font-size:32px;}
  .page-wrap{padding:24px 12px 48px;}
  .section-h2{font-size:24px;}
  .byo-grid{grid-template-columns:1fr;gap:8px;}
  .auth-box{padding:28px 16px 20px;}
  .co-panel{padding:16px 12px;}
  .admin-wrap{padding:16px 10px 48px;}
  .admin-stat-card{min-width:100%;}
}

/* ── Safe area insets (iPhone notch) ── */
@supports(padding:env(safe-area-inset-top)){
  nav{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
  footer{padding-bottom:max(24px,env(safe-area-inset-bottom));}
  .cart-drawer{padding-bottom:env(safe-area-inset-bottom);}
  .checkout-modal{padding-bottom:env(safe-area-inset-bottom);}
  .auth-box{padding-bottom:max(24px,env(safe-area-inset-bottom));}
}

/* ═══════════════════════════════════════
   CHECKOUT MODAL
═══════════════════════════════════════ */
.checkout-modal-overlay {
  position:fixed; inset:0; background:rgba(30,42,34,.55);
  backdrop-filter:blur(8px); z-index:600;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.checkout-modal-overlay.open { opacity:1; pointer-events:all; }
.checkout-modal {
  background:var(--warm-white); border-radius:24px;
  width:100%; max-width:520px; max-height:94vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
  transform:scale(.95) translateY(24px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.checkout-modal-overlay.open .checkout-modal { transform:none; }

/* Progress steps */
.co-steps {
  display:flex; align-items:center; padding:24px 28px 0;
  gap:0;
}
.co-step {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex:1; position:relative;
}
.co-step:not(:last-child)::after {
  content:''; position:absolute; top:14px; left:calc(50% + 18px);
  width:calc(100% - 36px); height:2px;
  background:var(--border); z-index:0;
}
.co-step.done:not(:last-child)::after { background:var(--green); }
.co-step-dot {
  width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
  background:var(--cream); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--text-light);
  position:relative; z-index:1; transition:all .3s;
}
.co-step.active .co-step-dot { border-color:var(--green); background:var(--green); color:#fff; }
.co-step.done .co-step-dot { border-color:var(--green); background:var(--green); color:#fff; }
.co-step-label { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-light); }
.co-step.active .co-step-label, .co-step.done .co-step-label { color:var(--green); }

/* Modal head */
.co-head {
  padding:20px 28px 18px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.co-title { font-family:'Lora',serif; font-size:20px; font-weight:700; }
.co-close {
  width:34px; height:34px; border-radius:50%; background:var(--cream);
  font-size:20px; color:var(--text-mid); display:flex; align-items:center;
  justify-content:center; cursor:pointer; border:none; transition:background .2s;
}
.co-close:hover { background:var(--cream-dark); }

/* Panels */
.co-panel { display:none; padding:24px 28px 28px; }
.co-panel.active { display:block; }

/* Order summary strip */
.co-summary {
  background:var(--cream); border-radius:12px; padding:14px 16px;
  margin-bottom:22px;
}
.co-summary-title { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light); margin-bottom:10px; }
.co-summary-item { display:flex; justify-content:space-between; font-size:13px; color:var(--text-mid); margin-bottom:5px; }
.co-summary-item:last-child { margin-bottom:0; }
.co-summary-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:var(--text); padding-top:10px; border-top:1px solid var(--border); margin-top:8px; }

/* Form fields */
.co-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.co-field { margin-bottom:14px; display:flex; flex-direction:column; gap:5px; }
.co-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); }
.co-input, .co-select {
  padding:10px 13px; border:1.5px solid var(--border); border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:14px; background:var(--cream);
  color:var(--text); outline:none; transition:border-color .2s; width:100%;
}
.co-input:focus, .co-select:focus { border-color:var(--green); }
.co-input.error { border-color:#dc2626; }

/* Square card container */
#sq-card-container {
  min-height:90px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--cream); padding:12px; margin-bottom:8px;
  transition:border-color .2s;
}
#sq-card-container.sq-focused { border-color:var(--green); }
.sq-card-loading {
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--text-light); font-size:13px; padding:20px 0;
}
.sq-spinner {
  width:18px; height:18px; border:2px solid var(--border);
  border-top-color:var(--green); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Payment method tabs */
.pm-tabs { display:flex; gap:8px; margin-bottom:18px; }
.pm-tab {
  flex:1; padding:9px; border-radius:10px; border:1.5px solid var(--border);
  font-size:12px; font-weight:600; cursor:pointer; background:none;
  color:var(--text-mid); transition:all .2s; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pm-tab.active { background:var(--green-pale); border-color:var(--green); color:var(--green-dark); }

/* Security badge */
.sq-security {
  display:flex; align-items:center; gap:7px;
  font-size:11px; color:var(--text-light); margin-top:8px;
}

/* Pay button */
.btn-pay {
  width:100%; background:var(--green); color:#fff; border:none;
  border-radius:12px; padding:15px; font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s, transform .2s, box-shadow .2s; margin-top:20px;
}
.btn-pay:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(58,92,67,.3); }
.btn-pay:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-pay-loading { display:flex; align-items:center; gap:10px; }

/* Navigation buttons */
.co-nav { display:flex; gap:10px; justify-content:space-between; margin-top:22px; }
.btn-co-back { background:none; border:1.5px solid var(--border); border-radius:10px; padding:10px 20px; font-size:14px; font-weight:500; color:var(--text-mid); cursor:pointer; }
.btn-co-next { background:var(--green); color:#fff; border:none; border-radius:10px; padding:10px 28px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s, transform .2s; }
.btn-co-next:hover { background:var(--green-dark); transform:translateY(-1px); }

/* Success screen */
.co-success { text-align:center; padding:16px 0 8px; }
.co-success-icon {
  width:72px; height:72px; border-radius:50%; background:#dcfce7;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:32px;
}
.co-success-title { font-family:'Lora',serif; font-size:24px; font-weight:700; margin-bottom:8px; }
.co-success-sub { font-size:14px; color:var(--text-mid); line-height:1.65; margin-bottom:24px; }
.co-order-box {
  background:var(--cream); border-radius:14px; padding:18px;
  text-align:left; margin-bottom:20px;
}
.co-order-num { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-light); margin-bottom:4px; }
.co-order-val { font-family:'Lora',serif; font-size:22px; font-weight:700; color:var(--green); }
.co-details { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.co-detail { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-mid); }
.co-detail-icon { width:22px; flex-shrink:0; font-size:14px; }

/* No credentials notice */
.co-nocreds {
  background:#FEF9E7; border:1px solid #C8973A;
  border-radius:12px; padding:18px; margin-bottom:20px;
  font-size:13px; color:#7A5520; line-height:1.6;
}
.co-nocreds strong { display:block; margin-bottom:4px; font-size:14px; }