/* =========================
   Sovereign Parking – Front
   ========================= */

/* Base */
.spb-container{max-width:1100px;margin:0 auto;padding:10px}
.spb-card{background:#fff;border:1px solid #e6eef6;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:18px;margin-bottom:16px}
.spb-btnss{background:#0B5ED7!important;color:#fff!important;border-radius:22px!important;padding:10px 18px!important;display:inline-block;text-decoration:none!important;font-weight:600!important;}
.spb-steps{display:flex;gap:24px;justify-content:center;margin:10px 0 18px;flex-wrap:wrap}
.spb-step{display:flex;flex-direction:column;align-items:center;gap:8px;color:#475569}
.spb-step .dot{width:30px;height:30px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;background:#fff}
.spb-step.active .dot{border-color:#0B5ED7;color:#0B5ED7}

.spb-grid{display:grid;grid-template-columns:1fr 340px;gap:18px}
.spb-pane{display:none}
.spb-pane.active{display:block}
.spb-aside{background:#f3f6fc;border:1px solid #e6eef6;border-radius:10px;padding:16px}
.spb-field input,.spb-field select,.spb-field textarea{width:100%;border:1px solid #d8e2ef;border-radius:8px;padding:12px;background:#fff}
.spb-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}
.spb-badge{background:#0b0b0b;color:#fff;border-radius:10px;padding:8px 14px;display:inline-block}
.spb-badge.light{background:#f1f5f9;color:#0b0b0b}
.spb-summary-total{font-weight:800}
.spb-row-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spb-total-inline{margin-left:auto}

.spb-steps-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.spb-link-back{color:#0B5ED7;text-decoration:none;font-weight:600}

/* DataTables base table (desktop) */
.spb-table{width:100%;border-collapse:separate;border-spacing:0}
.spb-table thead th{font-weight:700;color:#334155;padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}
.spb-table tbody td{padding:12px 10px;border-bottom:1px solid #f1f5f9}

/* =========================
   NEW theme + shuttle styles
   ========================= */
.spb-steps-root{--spb-primary:#0B5ED7;--spb-primary-600:#0A53C1;--spb-primary-700:#0948A7;--spb-text:#0f172a;--spb-border:#e2e8f0}
.spb-steps-root a,.spb-steps-root button,.spb-steps-root .spb-btn,.spb-btnss{text-decoration:none!important}

/* Generic buttons */
.spb-steps-root .spb-btn,
.spb-steps-root .button,
.spb-steps-root button[type="button"],
#spx_load_slots{
  background:var(--spb-primary)!important;border:1px solid var(--spb-primary)!important;color:#fff!important;
  border-radius:12px!important;padding:10px 16px!important;font-weight:600!important;line-height:1.2!important;
  box-shadow:0 1px 2px rgba(15,23,42,.06);cursor:pointer;transition:background .15s, border-color .15s, box-shadow .15s
}
.spb-steps-root .spb-btn:hover,.spb-steps-root .button:hover,#spx_load_slots:hover{
  background:var(--spb-primary-600)!important;border-color:var(--spb-primary-600)!important;box-shadow:0 4px 10px rgba(11,94,215,.18)
}

/* Outline (chips) */
.spb-steps-root .spb-btn.spb-btn-outline{
  background:transparent!important;color:var(--spb-primary)!important;border:1px solid var(--spb-primary)!important
}
.spb-steps-root .spb-btn.spb-btn-outline:hover{
  background:rgba(11,94,215,.08)!important;color:var(--spb-primary-700)!important;border-color:var(--spb-primary-600)!important
}
.spb-steps-root .spb-btn.active,.spb-steps-root .spb-btn.spb-btn-outline.active{
  background:var(--spb-primary)!important;color:#fff!important;border-color:var(--spb-primary)!important
}

.spb-steps-root input[type="number"]{border:1px solid var(--spb-border)!important;border-radius:12px!important;padding:8px 10px!important}
#spx-slot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
#spx-slot-list .spb-btn{width:100%;text-align:center;padding:10px 12px!important;border-radius:12px!important}
.spb-steps-root .spb-muted{color:#64748b}
.spb-steps-root .spb-alert-warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:10px}
.spb-steps-root .spb-alert-danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:10px}
.spx-invalid{border-color:#ef4444!important;box-shadow:0 0 0 2px rgba(239,68,68,.10)!important}
.spb-card-element{padding:12px;border:1px solid #e2e8f0;border-radius:8px}

/* =========================================
   RESPONSIVE RULES
   ========================================= */

/* Tablet down */
@media (max-width: 992px){
  .spb-grid{grid-template-columns:1fr}           /* aside drops below */
  .spb-container{padding:6px}
  .spb-actions{justify-content:stretch}
  .spb-actions.spb-actions-stack .spb-btn{width:100%}
}

/* Make two-column customer form stack on small screens */
.spb-two-col{grid-template-columns:1fr 1fr;gap:12px}
.spb-two-col .span-2{grid-column:1/3}
@media (max-width: 768px){
  .spb-two-col{grid-template-columns:1fr}
  .spb-two-col .span-2{grid-column:auto}
  .spb-total-inline{margin-left:0}
  .pax-input{width:100%}
  .hint-inline{display:block;margin-left:0}
}

/* Stack the payment/summary columns sooner */
.spb-stack-on-mobile{grid-template-columns:1fr 360px;gap:16px}
@media (max-width: 900px){
  .spb-stack-on-mobile{grid-template-columns:1fr}
}

/* Buttons full-width on very small screens */
@media (max-width: 520px){
  .spb-actions.spb-actions-stack{flex-direction:column}
  .spb-actions.spb-actions-stack .spb-btn{width:100%}
}

/* ===== Responsive TABLE → CARD under 768px ===== */
@media (max-width: 768px){
  .spb-table thead{display:none}
  .spb-table, .spb-table tbody, .spb-table tr, .spb-table td{display:block;width:100%}
  .spb-table tr{background:#fff;border:1px solid #e6eef6;border-radius:12px;margin-bottom:12px;padding:10px}
  .spb-table td{
    border:none;border-bottom:1px solid #f1f5f9;position:relative;padding:10px 10px 10px 130px;min-height:44px
  }
  .spb-table td:last-child{border-bottom:none}
  .spb-table td::before{
    content: attr(data-label);
    position:absolute;left:10px;top:10px;width:110px;font-weight:600;color:#475569;white-space:normal
  }
  .spb-btnss{display:inline-flex;justify-content:center;width:100%}
}

/* Make step dots tighter on phones */
@media (max-width:480px){
  .spb-step .dot{width:26px;height:26px}
  .spb-steps{gap:16px}
  .spb-steps-bar{justify-content:center}
}


/* --- SLOT CHIP OVERFLOW FIX --- */
.spb-steps-root, 
.spb-steps-root * { 
  box-sizing: border-box;               /* keep widths inside the box */
}

#spx-slot-list{
  display: flex !important;          /* override previous grid */
  flex-direction: column !important; /* vertical list */
  gap: 10px !important;
  margin-top: 10px;
}

#spx-slot-list > * { 
  min-width: 0;                          /* allow shrinking inside grid cells */
}

#spx-slot-list .spb-btn{
  display: block;
  width: 100%;
  white-space: normal;               /* allow wrapping if long */
  text-align: left;                  /* optional: left-align text */
  padding: 12px 14px !important;     /* comfy tap target */
  border-radius: 12px !important;
}

/* If your theme sets overflow hidden on cards, let this one breathe */
#spx-shuttle,
#spx-shuttle .spb-card{
  overflow: visible !important;
}

.spb-steps-root, .spb-steps-root *{
  box-sizing: border-box;
}