/* ── Navbar ───────────────────────────────────────────── */
.navbar{
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);padding:16px 0;position:sticky;top:0;z-index:1000
}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.nav-back{font-size:.9rem;font-weight:500;color:var(--teal);display:flex;align-items:center;gap:6px}
.nav-back:hover{color:var(--navy)}
.nav-tabs{display:flex;gap:4px;background:var(--grey-100);border-radius:60px;padding:4px}
.nav-tab{
  padding:8px 22px;border-radius:60px;font-size:.85rem;font-weight:600;
  color:var(--grey-500);background:transparent;transition:var(--transition)
}
.nav-tab:hover{color:var(--navy)}
.nav-tab.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-user{display:none;align-items:center;gap:10px}
.nav-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--teal);color:var(--white);display:flex;
  align-items:center;justify-content:center;
  font-weight:700;font-size:.7rem
}
.nav-username{font-size:.85rem;font-weight:600;color:var(--navy)}
.nav-signout{font-size:.75rem;color:var(--grey-500);font-weight:500}
.nav-signout:hover{color:var(--rose)}

/* ── Auth Modal ───────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,29,58,.6);
  backdrop-filter:blur(8px);z-index:2000;display:none;
  justify-content:center;align-items:center;padding:24px
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--white);border-radius:var(--radius-lg);
  max-width:480px;width:100%;box-shadow:var(--shadow-lg);
  overflow:hidden;animation:modalIn .4s ease;position:relative
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;
  border-radius:50%;background:var(--grey-100);display:flex;
  align-items:center;justify-content:center;font-size:1.2rem;
  color:var(--grey-700);transition:var(--transition);z-index:10
}
.modal-close:hover{background:var(--grey-200)}
.modal-header{
  background:linear-gradient(135deg,var(--teal),var(--navy));
  padding:36px 36px 28px;color:var(--white)
}
.modal-header h2{font-family:var(--font-display);font-size:1.6rem;margin-bottom:6px}
.modal-header p{opacity:.75;font-size:.9rem}
.modal-body{padding:36px}

/* ── Forms ────────────────────────────────────────────── */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:8px}
.form-input{
  width:100%;padding:14px 18px;border-radius:var(--radius);
  background:var(--grey-100);border:2px solid transparent;
  font-size:1rem;transition:var(--transition);color:var(--grey-900)
}
.form-input:focus{border-color:var(--teal);background:var(--white)}
.form-input::placeholder{color:var(--grey-500)}
.otp-group{display:flex;gap:10px;justify-content:center}
.otp-input{
  width:52px;height:60px;text-align:center;font-size:1.5rem;
  font-family:var(--font-mono);font-weight:700;border-radius:var(--radius);
  background:var(--grey-100);border:2px solid transparent;
  transition:var(--transition);color:var(--navy)
}
.otp-input:focus{border-color:var(--teal);background:var(--white)}
.form-hint{font-size:.8rem;color:var(--grey-500);margin-top:8px;text-align:center}
.form-error{font-size:.8rem;color:var(--rose);margin-top:6px;display:none}
.form-error.active{display:block}

/* ── Schedule Page Layout ─────────────────────────────── */
.schedule-page{padding:48px 0 80px}
.schedule-card{
  background:var(--white);border-radius:var(--radius-lg);
  max-width:720px;margin:0 auto;box-shadow:var(--shadow);overflow:hidden
}
.schedule-header{
  background:linear-gradient(135deg,var(--navy),var(--teal));
  padding:32px 36px;color:var(--white)
}
.schedule-header h2{font-family:var(--font-display);font-size:1.5rem}
.schedule-body{padding:36px;background:var(--grey-100);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.schedule-section{
  margin-bottom:20px;background:var(--white);
  border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  padding:24px 28px;box-shadow:0 2px 8px rgba(11,29,58,.04)
}
.schedule-section:last-child{margin-bottom:0}
.schedule-section h3{
  font-family:var(--font-display);font-size:1.15rem;
  color:var(--navy);margin-bottom:16px;display:flex;align-items:center;gap:10px
}
.schedule-section h3 .step-num{
  width:28px;height:28px;border-radius:50%;background:var(--teal);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:.75rem;font-weight:700
}
.datetime-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dropoff-preview{
  background:var(--cream);border-radius:var(--radius);padding:20px;
  border-left:4px solid var(--gold);margin-top:16px
}
.dropoff-preview .note{font-size:.8rem;color:var(--grey-500);margin-top:8px}
.instructions-input{
  width:100%;padding:14px 18px;border-radius:var(--radius);
  background:var(--grey-100);border:2px solid transparent;
  font-size:.95rem;resize:vertical;min-height:80px;
  transition:var(--transition);font-family:var(--font-body)
}
.instructions-input:focus{border-color:var(--teal);background:var(--white)}

/* ── Payment Method ───────────────────────────────────── */
.payment-loading{
  text-align:center;padding:20px;color:var(--grey-500);font-size:.9rem
}
.saved-card{
  background:var(--cream);border-radius:var(--radius);padding:20px;
  border-left:4px solid var(--teal);
  display:flex;justify-content:space-between;align-items:center
}
.saved-card-info{
  display:flex;align-items:center;gap:8px;
  font-size:1rem;font-weight:600;color:var(--navy)
}
.saved-card-dots{color:var(--grey-500);letter-spacing:2px}
.saved-card-brand{
  font-family:var(--font-mono);font-size:.85rem;
  background:var(--grey-100);padding:4px 10px;border-radius:6px;
  color:var(--grey-700);font-weight:500
}
.saved-card-last4{font-family:var(--font-mono)}
.stripe-card-container{
  background:var(--grey-100);border-radius:var(--radius);
  padding:16px 18px;border:2px solid transparent;
  transition:var(--transition);margin-bottom:12px
}
.stripe-card-container:focus-within{
  border-color:var(--teal);background:var(--white)
}
.stripe-card-container .form-error{
  margin-top:8px;font-size:.8rem;color:var(--rose);display:none
}

/* ── Pricing Info ─────────────────────────────────────── */
.pricing-info{
  background:var(--cream);border-radius:var(--radius);padding:20px;
  border-left:4px solid var(--teal)
}
.pricing-info-row{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.pricing-info-rate{font-family:var(--font-display);font-size:1.3rem;color:var(--navy)}
.pricing-info-min{font-size:.82rem;color:var(--grey-500);font-weight:500}
.pricing-info-note{font-size:.85rem;color:var(--grey-700);line-height:1.6}

.schedule-footer{
  padding:24px 36px;border-top:1px solid var(--grey-200);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px
}
.footer-toast{
  display:none;width:100%;text-align:center;
  padding:12px 20px;border-radius:var(--radius);
  font-size:.9rem;font-weight:500
}
.footer-toast.active{display:block}
.footer-toast.success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.footer-toast.error{background:#fdecea;color:#b71c1c;border:1px solid #f5c6cb}

/* ── Orders Panel ─────────────────────────────────────── */
.orders-panel{max-width:720px;margin:0 auto}
.orders-card{
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden
}
.orders-card-header{
  background:linear-gradient(135deg,var(--navy),var(--teal));
  padding:32px 36px;color:var(--white)
}
.orders-card-header h2{font-family:var(--font-display);font-size:1.5rem}
.orders-card-body{padding:36px}
.orders-empty{color:var(--grey-500);font-size:.95rem;text-align:center;padding:24px 0}
.order-card{
  background:var(--cream);border-radius:var(--radius);padding:20px;
  margin-bottom:12px
}
.order-card:last-child{margin-bottom:0}
.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.order-id{font-family:var(--font-mono);font-size:.8rem;color:var(--grey-500);font-weight:500}
.order-status{
  padding:5px 12px;border-radius:60px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px
}
.order-status.pending{background:rgba(233,168,76,.15);color:#b8862f}
.order-status.picked_up{background:rgba(59,130,246,.12);color:#2563eb}
.order-status.processing{background:rgba(139,92,246,.12);color:#7c3aed}
.order-status.ready{background:rgba(16,185,129,.12);color:#059669}
.order-status.delivered{background:rgba(26,107,106,.2);color:var(--navy)}

/* ── Order Timeline ───────────────────────────────────── */
.order-timeline{padding-left:2px}
.timeline-row{display:flex;align-items:center;gap:10px}
.timeline-dot{
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--teal);background:var(--white);flex-shrink:0
}
.timeline-dot.filled{background:var(--teal)}
.timeline-label{font-size:.8rem;font-weight:600;color:var(--grey-500);width:48px}
.timeline-value{font-size:.88rem;font-weight:500;color:var(--navy)}
.timeline-line{width:2px;height:14px;background:var(--grey-200);margin-left:4px}

/* ── Order Pricing ────────────────────────────────────── */
.order-pricing{margin-top:14px;padding-top:14px;border-top:1px solid var(--grey-200)}
.order-pricing-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0}
.order-pricing-label{font-size:.82rem;color:var(--grey-500);font-weight:500}
.order-pricing-value{font-size:.88rem;font-weight:600;color:var(--navy)}
.order-pricing-pending{font-size:.82rem;color:var(--grey-500);font-style:italic}

/* ── Address Autocomplete ─────────────────────────────── */
.addr-autocomplete{position:relative}
.addr-dropdown{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:100;
  background:var(--white);border:1px solid var(--grey-200);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 24px rgba(11,29,58,.1);max-height:320px;overflow-y:auto
}
.addr-dropdown.open{display:block}
.addr-item{
  padding:12px 18px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--grey-100);transition:background .15s
}
.addr-item:last-child{border-bottom:none}
.addr-item:hover,.addr-item.active{background:var(--cream)}
.addr-item-address{font-size:.92rem;color:var(--grey-900)}
.addr-item-detail{font-size:.75rem;color:var(--grey-500);white-space:nowrap;margin-left:12px}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:768px){
  .datetime-row{grid-template-columns:1fr}
  .schedule-header{flex-direction:column;gap:16px;text-align:center}
  .schedule-body{padding:16px}
  .schedule-section{padding:20px 18px}
  .schedule-footer{padding:18px 24px}
  .navbar .container{flex-wrap:wrap;gap:12px}
  .nav-right{gap:12px}
  .nav-username{display:none}
  .nav-tabs{order:3;width:100%;justify-content:center}
  .orders-card-body{padding:24px}
}