/* =========================================================
   TAIPEI PUB CRAWL — checkout
   Companion stylesheet to tpc.css (which supplies the tokens, header,
   drawer, footer, buttons and pill/tag styles). Load tpc.css FIRST.

   Pairs with views/v2/checkoutTPC.ejs and the shared Angular controller
   assets/v2/js/checkout.js. Class names marked "JS contract" are read or
   generated by that controller — do not rename them.
   ========================================================= */

/* ---------- page shell ---------- */
.checkout-container{max-width:1180px;margin:0 auto;padding:34px 20px 70px}
.checkout-header{margin-bottom:30px}
.checkout-header h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,6vw,60px);line-height:.96;color:#fff;
}
.checkout-header p{color:var(--muted);font-size:15.5px;margin:10px 0 0}
.checkout-steps{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.checkout-steps span{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.checkout-steps span b{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff;font-size:11px;
}
.checkout-steps span.on{color:#fff}
.checkout-steps span.on b{background:var(--grad);border-color:transparent;box-shadow:0 0 16px rgba(255,43,209,.5)}
.checkout-steps i{color:rgba(255,255,255,.22);font-size:10px}

.checkout-content{display:grid;grid-template-columns:1fr 384px;gap:34px;align-items:start}
@media (max-width:940px){.checkout-content{grid-template-columns:1fr;gap:26px}}

/* ---------- shared panel look ---------- */
.panel{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  padding:26px;
}
.panel + .panel{margin-top:22px}
.panel > h2,.panel > h3{
  font-family:var(--font-head);font-weight:700;color:#fff;
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.panel > h2{font-size:19px}
.panel > h3{font-size:17px}
.panel > h2 i,.panel > h3 i{color:var(--magenta);font-size:16px}

/* ---------- cart ---------- */
.cart-empty{text-align:center;padding:56px 20px;color:var(--muted)}
.cart-empty i{font-size:38px;color:rgba(255,255,255,.16);margin-bottom:16px;display:block}
.cart-empty p{font-size:15.5px;margin:0 0 20px}
.cart-empty .btn{
  display:inline-block;background:var(--grad);color:#fff;font-family:var(--font-head);
  font-weight:700;padding:13px 28px;border-radius:12px;text-decoration:none;
  box-shadow:0 8px 24px rgba(255,43,209,.4);
}
.cart-empty .btn:hover{filter:brightness(1.12)}

.bundle-discount{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:linear-gradient(120deg,rgba(255,43,209,.16),rgba(139,92,255,.10));
  border:1px solid rgba(255,43,209,.5);border-radius:14px;
  padding:16px 18px;margin-bottom:22px;box-shadow:0 0 30px rgba(255,43,209,.14);
}
.bundle-discount i{
  flex:0 0 auto;color:#fff;font-size:16px;width:40px;height:40px;border-radius:50%;
  background:var(--grad);display:grid;place-items:center;box-shadow:0 0 18px rgba(255,43,209,.55);
}
.bundle-discount h3{font-family:var(--font-head);font-size:15.5px;color:#fff;margin:0 0 2px}
.bundle-discount p{font-size:13.5px;color:var(--text);margin:0}

/* timeline (JS contract: .ct-* set by the ng-repeat in checkoutTPC.ejs) */
.cart-timeline{display:block}
.ct-date-header{margin:22px 0 12px}
.ct-date-header:first-child{margin-top:0}
.ct-date-pill{
  display:inline-block;background:rgba(255,255,255,.07);border:1px solid var(--line);
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;padding:7px 15px;border-radius:999px;
}
.ct-row{display:flex;gap:14px}
.ct-dot-col{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;padding-top:8px}
.ct-dot{width:11px;height:11px;border-radius:50%;background:var(--magenta);flex:0 0 auto;box-shadow:0 0 12px var(--magenta)}
.ct-line{width:2px;flex:1;background:var(--line);margin-top:5px;min-height:26px}
.ct-conflict .ct-dot{background:#ff5d7a;box-shadow:0 0 12px rgba(255,93,122,.85)}

.ct-card{
  flex:1;min-width:0;background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:14px;padding:17px 19px;margin-bottom:16px;
}
.ct-conflict .ct-card{background:rgba(255,93,122,.10);border-color:rgba(255,93,122,.45)}
.ct-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ct-time-badge{
  background:rgba(34,231,255,.12);border:1px solid rgba(34,231,255,.4);color:var(--cyan);
  border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;
}
.ct-remove{
  background:none;border:0;color:var(--muted);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;transition:.15s;
}
.ct-remove:hover{background:rgba(255,93,122,.16);color:#ff9fb5}

.ct-name{font-family:var(--font-head);font-size:16.5px;font-weight:700;color:#fff;margin-bottom:6px}
.ct-option{display:block;font-family:var(--font-body);font-weight:600;color:var(--magenta);font-size:13.5px;margin-top:3px}
.ct-date-link{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--cyan);
  font-weight:600;cursor:pointer;margin-bottom:10px;
}
.ct-date-link:hover{text-decoration:underline;text-underline-offset:3px}
.ct-promo{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,43,209,.14);
  border:1px solid rgba(255,43,209,.4);color:#ffb3ec;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;margin-bottom:10px;
}
.ct-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.ct-qty{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:999px;padding:5px 7px;
}
.ct-qty button{
  width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.09);
  color:#fff;display:grid;place-items:center;font-size:11px;transition:.15s;
}
.ct-qty button:hover:not(:disabled){background:var(--magenta);box-shadow:0 0 14px rgba(255,43,209,.6)}
.ct-qty button:disabled{opacity:.32;cursor:not-allowed}
.ct-qty span{font-family:var(--font-head);font-weight:700;min-width:16px;text-align:center;font-size:14.5px;color:#fff}

.ct-per-person{text-align:right}
.ct-price-now{font-family:var(--font-head);font-weight:700;color:#fff;font-size:16px}
.ct-price-was{color:var(--muted);text-decoration:line-through;font-size:12.5px;margin-left:7px}
.ct-per-label{color:var(--muted);font-size:11.5px;display:block}
.ct-group-total{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--text);
}
.ct-group-total strong{color:#fff;font-family:var(--font-head)}
.ct-cap-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.ct-cap-hint a{color:var(--cyan)}

.time-conflict-warning,
.payment-conflict-warning,
.validation-summary{
  background:rgba(255,93,122,.10);border:1px solid rgba(255,93,122,.42);
  color:#ff9fb5;border-radius:12px;
}
.time-conflict-warning{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:10px 13px;margin-top:12px}
.validation-summary{padding:17px 20px;margin-bottom:22px}
.validation-summary h4{font-size:14.5px;color:#ff9fb5;display:flex;align-items:center;gap:9px;margin:0 0 9px}
.validation-summary ul{margin:0;padding-left:20px;font-size:13.5px;color:#ff9fb5}
.payment-conflict-warning{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;padding:11px 14px;margin-top:12px}
.payment-conflict-warning a{color:#fff;text-decoration:underline}

.add-more-tours{text-align:center;padding:8px 0 4px}
.add-more-btn{
  display:inline-flex;align-items:center;gap:9px;color:var(--cyan);
  font-weight:700;font-size:14.5px;text-decoration:none;
}
.add-more-btn:hover{text-decoration:underline;text-underline-offset:3px}

/* upsell card (JS contract: item.bundleOpportunity) */
.bundle-opportunity{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(120deg,rgba(255,43,209,.13),rgba(139,92,255,.08));
  border:1px dashed rgba(255,43,209,.6);border-radius:12px;
  padding:14px 16px;margin-top:14px;
}
.bundle-opportunity .bo-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--grad);
  color:#fff;display:grid;place-items:center;font-size:15px;box-shadow:0 0 18px rgba(255,43,209,.5);
}
.bundle-opportunity .bo-body{flex:1;min-width:0}
.bundle-opportunity .bo-savings{display:block;font-family:var(--font-head);font-weight:700;color:#ffb3ec;font-size:13.5px;margin-bottom:2px}
.bundle-opportunity .bo-message{font-size:13px;color:var(--text);line-height:1.5}
.bundle-opportunity .bo-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--grad);
  color:#fff;font-weight:700;font-size:12.5px;padding:10px 17px;border-radius:999px;
  text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(255,43,209,.4);
}
.bundle-opportunity .bo-cta:hover{filter:brightness(1.12)}
@media (max-width:575px){
  .bundle-opportunity{flex-wrap:wrap}
  .bundle-opportunity .bo-cta{margin-left:52px}
}

/* ---------- form ---------- */
.form-group{margin-bottom:19px}
.form-group label{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:8px}
.form-group label i{color:var(--magenta);width:16px;text-align:center;margin-right:3px}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select{
  width:100%;font-family:var(--font-body);font-size:15px;color:#fff;
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  background:rgba(255,255,255,.06);transition:border-color .15s,box-shadow .15s;
}
.form-group input::placeholder{color:rgba(255,255,255,.32)}
.form-group input:focus,.form-group select:focus{
  outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,43,209,.18);
}
/* native dropdown lists paint in the OS palette — force them readable on dark */
.form-group select option,.form-group select optgroup{background:#120520;color:#fff}
.form-group.has-error input,.form-group.has-error select{border-color:#ff5d7a}
.error-message{display:flex;align-items:center;gap:7px;color:#ff9fb5;font-size:12.5px;font-weight:600;margin-top:7px}

.email-prediction,.email-suggestion{
  border-radius:11px;padding:11px 15px;margin-top:9px;font-size:13.5px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.email-prediction{background:rgba(34,231,255,.10);border:1px solid rgba(34,231,255,.4)}
.email-suggestion{background:rgba(255,199,61,.10);border:1px solid rgba(255,199,61,.4)}
.email-prediction i{color:var(--cyan)}
.email-suggestion i{color:#ffc73d}
.email-prediction strong,.email-suggestion strong{color:#fff}
.email-prediction button,.email-suggestion button{
  border:0;padding:6px 14px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;
}
.email-prediction button:first-of-type,.email-suggestion button:first-of-type{background:var(--grad);color:#fff}
.email-prediction button:last-of-type,.email-suggestion button:last-of-type{background:rgba(255,255,255,.10);color:#fff}

.ubn-section{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:14px;padding:17px 19px}
.ubn-notice{display:flex;gap:11px;font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:13px}
.ubn-notice i{color:var(--magenta);margin-top:3px}
.ubn-notice strong{color:#fff}
.ubn-checkbox{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#fff;cursor:pointer}
.ubn-checkbox input{width:17px;height:17px;accent-color:var(--magenta)}
.ubn-warning{display:flex;align-items:center;gap:7px;color:#ff9fb5;font-size:12.5px;font-weight:600;margin-top:9px}
.ubn-fields{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}

/* ---------- date editor modal (JS contract: ids below are written by checkout.js) ---------- */
.date-editor-overlay{
  position:fixed;inset:0;background:rgba(3,0,8,.78);backdrop-filter:blur(6px);
  z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;
}
.date-editor-modal{
  background:#120520;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.8);max-width:430px;width:100%;max-height:86vh;overflow-y:auto;
}
.date-editor-header{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--line)}
.date-editor-header h3{font-family:var(--font-head);font-size:17px;color:#fff}
.close-btn{background:none;border:0;color:var(--muted);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.close-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.date-editor-content{padding:20px 22px 24px}
.tour-info{font-size:14.5px;color:var(--text);margin:0 0 18px}
.tour-info strong{color:#fff}

.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.calendar-header h4{font-family:var(--font-head);font-size:15px;color:#fff;margin:0}
.nav-btn{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;transition:.15s;flex:0 0 32px;
}
.nav-btn:hover{background:var(--magenta);border-color:var(--magenta)}
.calendar-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.weekday-header{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:6px 0}
.calendar-mini-day{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;font-size:13px;position:relative;
}
/* checkout.js emits a completely empty <div> for every past / no-departure day,
   so on a dark background the grid reads as a void with three floating dates.
   A faint tile and dash restore the calendar shape without inventing numbers. */
.calendar-mini-day.disabled{color:rgba(255,255,255,.16);background:rgba(255,255,255,.02)}
.calendar-mini-day.disabled::after{content:"–";color:rgba(255,255,255,.10);font-size:12px}
.calendar-note{
  margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5;
}
.calendar-mini-day.clickable{cursor:pointer;color:#fff;font-weight:600;background:rgba(255,255,255,.05);transition:.14s}
.calendar-mini-day.clickable:hover{background:rgba(255,43,209,.28);box-shadow:0 0 14px rgba(255,43,209,.4)}
.calendar-mini-day.other-month{opacity:.4}
.calendar-mini-day.selected{background:var(--grad);color:#fff;box-shadow:0 0 18px rgba(255,43,209,.6)}
.calendar-mini-day .has-event-dot{width:4px;height:4px;border-radius:50%;background:var(--magenta);margin-top:3px;box-shadow:0 0 6px var(--magenta)}
.calendar-mini-day.selected .has-event-dot{background:#fff;box-shadow:none}
.calendar-mini-day.disabled .has-event-dot{display:none}

.available-times{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.available-times h4{font-family:var(--font-head);font-size:13.5px;color:#fff;margin:0 0 12px}
.time-slots{display:flex;flex-wrap:wrap;gap:8px}
.loading-times{text-align:center;padding:22px;color:var(--muted);font-size:13.5px}
.loading-times i{font-size:20px;margin-bottom:9px;display:block;color:var(--magenta)}

/* ---------- promo ---------- */
.promo-input-group{display:flex;gap:10px}
.promo-input-group input{
  flex:1;min-width:0;font-family:var(--font-body);font-size:14.5px;color:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 15px;background:rgba(255,255,255,.06);
}
.promo-input-group input::placeholder{color:rgba(255,255,255,.32)}
.promo-input-group input:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,43,209,.18)}
.promo-input-group button{
  background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px;
  border:0;border-radius:12px;padding:0 24px;box-shadow:0 6px 18px rgba(255,43,209,.35);flex:0 0 auto;
}
.promo-input-group button:hover:not(:disabled){filter:brightness(1.12)}
.promo-input-group button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.promo-success{display:flex;align-items:center;gap:8px;color:var(--lime);font-size:13.5px;font-weight:600;margin-top:11px}
.promo-error{display:flex;align-items:center;gap:8px;color:#ff9fb5;font-size:13.5px;font-weight:600;margin-top:11px}

/* ---------- summary ---------- */
.cart-summary{
  position:sticky;top:88px;
  background:linear-gradient(165deg,rgba(31,8,50,.92),rgba(8,2,15,.95));
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px rgba(255,43,209,.12),0 26px 60px rgba(0,0,0,.6);
  padding:26px;
}
@media (max-width:940px){.cart-summary{position:static}}
.cart-summary h2{font-family:var(--font-head);font-size:18px;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.cart-summary h2 i{color:var(--magenta)}

.price-summary{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}
/* tpc.css styles .price-row as a bordered pricing-table row for the product
   page — inside the summary it is a plain line item, so reset it here */
.price-summary .price-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border:0;background:none;padding:7px 0;border-radius:0;
  font-size:14.5px;color:var(--text);
}
.price-summary .price-row:hover{border:0}
.price-summary .price-row.discount{color:var(--lime)}
.price-summary .price-row.total{
  font-family:var(--font-head);font-size:18px;font-weight:700;color:#fff;
  padding-top:12px;border-top:1px dashed var(--line);margin-top:8px;
}
.price-summary .price-row.total .amount{text-align:right}
.original-price-strike{display:block;font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:line-through}

.checkout-btn{
  position:relative;width:100%;background:var(--grad);color:#fff;border:0;border-radius:14px;
  padding:15px 18px;box-shadow:0 10px 30px rgba(255,43,209,.42);transition:.18s;overflow:hidden;
}
.checkout-btn:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 12px 38px rgba(255,43,209,.6)}
.checkout-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-top{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:16px}
.btn-separator{height:1px;background:rgba(255,255,255,.35);margin:11px 0}
.btn-bottom{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.pay-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;opacity:.92}
.payment-info{display:flex;align-items:center;gap:9px;justify-content:center;color:var(--muted);font-size:12.5px;margin-top:16px}
.payment-info i{color:var(--lime)}
.payment-info strong{color:#fff}

.summary-reassure{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.summary-reassure div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text);line-height:1.5}
.summary-reassure i{color:var(--lime);margin-top:3px;flex:0 0 auto}

.continue-shopping{text-align:center;margin-top:30px}
.continue-shopping a{display:inline-flex;align-items:center;gap:9px;color:var(--cyan);font-weight:700;font-size:14.5px;text-decoration:none}
.continue-shopping a:hover{text-decoration:underline;text-underline-offset:3px}

.loading-spinner{
  position:fixed;inset:0;background:rgba(5,1,10,.9);backdrop-filter:blur(6px);z-index:1400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.loading-spinner i{font-size:36px;color:var(--magenta)}
.loading-spinner p{font-size:15px;color:#fff;font-weight:600}