/* =====================================================================
   CUSTOM TRIP BUILDER — styled with the same design tokens as the rest
   of the WOOW Lanka Leisure site (assets/css/style.css). This file
   only adds new component rules; it never redefines existing classes.
   ===================================================================== */

.ctb-section{ padding-top:10px; }

.ctb-steps{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-bottom:36px;
}
.ctb-step{
  padding:.6em 1.3em; border-radius:999px; font-size:.82rem; font-weight:700;
  letter-spacing:.02em; background:var(--ivory-deep, #F4F2ED); color:var(--ink-faint);
  border:1px solid var(--sand-line);
}
.ctb-step.active{ background:var(--forest-950, #0A2E38); color:#fff; border-color:var(--forest-950, #0A2E38); }
.ctb-step.done{ background:var(--coral); color:#fff; border-color:var(--coral); }

.ctb-panel{ max-width:1180px; margin-inline:auto; }

/* --- Step 1: map + lists layout --- */
.ctb-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start; }
@media (max-width: 900px){ .ctb-layout{ grid-template-columns:1fr; } }

.ctb-search{ margin-bottom:12px; }
.ctb-search input{
  width:100%; padding:.85em 1.2em; border:1px solid var(--sand-line); border-radius:999px;
  font-size:.92rem; font-family:var(--f-body); background:var(--paper);
}
.ctb-search input:focus{ outline:none; border-color:var(--coral); }

.ctb-map{
  width:100%; height:460px; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--sand-line); background:var(--ivory-deep, #F4F2ED);
}
@media (max-width: 600px){ .ctb-map{ height:320px; } }

.ctb-map-loading{
  text-align:center; padding:10px; font-size:.82rem; color:var(--ink-faint);
}
.ctb-map-loading:empty, .ctb-map-loading.hidden{ display:none; }

/* Leaflet popup content styling to match the brand */
.ctb-popup h4{ font-family:var(--f-display); font-size:1.05rem; margin:0 0 4px; }
.ctb-popup p{ font-size:.82rem; color:var(--ink-soft); margin:0 0 10px; }
.ctb-popup button{
  width:100%; padding:.5em 1em; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; font-size:.8rem; font-family:var(--f-body);
  background:var(--coral); color:#fff;
}
.ctb-popup button.remove{ background:var(--ink-faint); }

.ctb-map-col{ min-width:0; }
.ctb-list-col h3{ font-family:var(--f-display); font-weight:500; font-size:1.15rem; margin:0 0 12px; }
.ctb-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--coral); color:#fff; font-size:.72rem; font-weight:700; margin-left:6px;
}

.ctb-destination-list{ max-height:260px; overflow-y:auto; display:grid; gap:10px; padding-right:4px; }
.ctb-dest-card{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--sand-line); border-radius:10px; background:var(--paper);
  transition:border-color .2s ease;
}
.ctb-dest-card.selected{ border-color:var(--coral); background:#FFF6F3; }
.ctb-dest-card .thumb{ width:52px; height:40px; border-radius:6px; object-fit:cover; background:var(--ivory-deep, #F4F2ED); flex:none; }
.ctb-dest-card .info{ flex:1; min-width:0; }
.ctb-dest-card .info h4{ margin:0; font-size:.92rem; font-family:var(--f-display); font-weight:500; }
.ctb-dest-card .info span{ font-size:.74rem; color:var(--ink-faint); }
.ctb-dest-card button{
  flex:none; padding:.45em .9em; border-radius:999px; border:1px solid var(--sand-line);
  background:transparent; font-size:.74rem; font-weight:700; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ctb-dest-card button.add{ border-color:var(--coral); color:var(--coral); }
.ctb-dest-card button.add:hover{ background:var(--coral); color:#fff; }
.ctb-dest-card button.remove{ border-color:var(--ink-faint); color:var(--ink-faint); }
.ctb-dest-card button.remove:hover{ background:var(--ink-faint); color:#fff; }

.ctb-selected-list{ display:grid; gap:10px; }
.ctb-empty-hint{ font-size:.86rem; color:var(--ink-faint); line-height:1.6; }
.ctb-selected-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--sand-line); border-radius:10px; background:var(--paper);
}
.ctb-selected-item .order-num{
  width:26px; height:26px; border-radius:50%; background:var(--forest-950, #0A2E38); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex:none;
}
.ctb-selected-item .info{ flex:1; min-width:0; }
.ctb-selected-item .info h4{ margin:0; font-size:.9rem; font-family:var(--f-display); font-weight:500; }
.ctb-reorder-btns{ display:flex; flex-direction:column; gap:2px; }
.ctb-reorder-btns button{
  width:24px; height:20px; border:1px solid var(--sand-line); background:var(--paper);
  border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; line-height:1; color:var(--ink-soft);
}
.ctb-reorder-btns button:disabled{ opacity:.35; cursor:not-allowed; }
.ctb-remove-btn{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--sand-line);
  background:var(--paper); cursor:pointer; color:var(--ink-faint); font-size:.85rem; line-height:1;
}
.ctb-remove-btn:hover{ background:#fde8e8; color:#A12626; border-color:#f3c8c8; }

.ctb-nav-actions{
  display:flex; justify-content:space-between; gap:12px; margin-top:32px;
  flex-wrap:wrap;
}
.ctb-nav-actions .btn-primary:only-child{ margin-left:auto; }

/* --- Step 2: form sections --- */
.ctb-form-section{
  padding:24px 0; border-bottom:1px solid var(--sand-line);
}
.ctb-form-section:first-child{ padding-top:0; }
.ctb-form-section:last-child{ border-bottom:0; }
.ctb-form-section h3{ font-family:var(--f-display); font-weight:500; font-size:1.1rem; margin:0 0 16px; }
.ctb-activity-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }

/* --- Step 3: summary --- */
.ctb-summary{ max-width:680px; margin:0 auto; }
.ctb-summary-block{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--sand-line); }
.ctb-summary-block:last-child{ border-bottom:0; }
.ctb-summary-block h3{ font-family:var(--f-display); font-weight:500; font-size:1.05rem; margin:0 0 12px; color:var(--coral); }
.ctb-summary-row{ display:flex; justify-content:space-between; gap:16px; padding:6px 0; font-size:.92rem; }
.ctb-summary-row span:first-child{ color:var(--ink-faint); }
.ctb-summary-row span:last-child{ text-align:right; font-weight:600; }
.ctb-summary-route{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ctb-summary-route li{
  display:flex; align-items:center; gap:10px; font-size:.92rem;
}
.ctb-summary-route .order-num{
  width:22px; height:22px; border-radius:50%; background:var(--forest-950, #0A2E38); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex:none;
}

/* --- Success panel --- */
.ctb-success{ text-align:center; max-width:560px; margin:0 auto; padding:40px 0; }
.ctb-success-icon{
  width:64px; height:64px; border-radius:50%; background:#e6f7ec; color:#1a7a3f;
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.ctb-success-icon svg{ width:30px; height:30px; }
.ctb-success h2{ font-family:var(--f-display); font-weight:500; font-size:1.5rem; margin:0 0 14px; }
.ctb-reference{ font-size:1rem; margin-bottom:16px; }
.ctb-success-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* Leaflet marker tint to match brand (default blue pin still used;
   this recolors the standard marker shadow area subtly if needed) */
.leaflet-popup-content-wrapper{ border-radius:12px; }

/* Shared form-helper classes reused from the admin panel's visual
   language, given a public-site-appropriate treatment here since
   assets/css/style.css doesn't define them (they were admin-only). */
.admin-form{ max-width:820px; }
.field-hint{ margin-top:6px; font-size:.78rem; color:var(--ink-faint); line-height:1.5; }
.checkbox-label{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; cursor:pointer; }
.checkbox-label input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--coral); flex:none; }
.btn-ghost{ background:transparent; border:1px solid var(--sand-line); color:var(--ink); }
.btn-ghost:hover{ background:var(--ivory-deep); }

/* MOBILE LUXURY OVERRIDE — Custom Trip Builder */
@media (max-width: 767px){
  .ctb-section{ padding-top:0; }
  .ctb-steps{ justify-content:flex-start; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:24px; scrollbar-width:none; }
  .ctb-steps::-webkit-scrollbar{ display:none; }
  .ctb-step{ flex:0 0 auto; padding:.58em .95em; font-size:.72rem; }
  .ctb-layout{ grid-template-columns:1fr; gap:22px; }
  .ctb-map{ height:300px; border-radius:20px; }
  .ctb-list-col h3{ font-size:1.15rem; }
  .ctb-destination-list{ max-height:none; overflow:visible; gap:9px; }
  .ctb-dest-card{ padding:10px; border-radius:15px; gap:10px; box-shadow:0 8px 22px rgba(8,24,34,.05); }
  .ctb-dest-card .thumb{ width:62px; height:52px; border-radius:10px; }
  .ctb-dest-card .info h4{ font-size:.9rem; }
  .ctb-dest-card button{ min-height:38px; padding:.45em .75em; }
  .ctb-selected-item{ border-radius:15px; padding:11px; }
  .ctb-form-section{ padding:22px 0; }
  .ctb-activity-grid{ grid-template-columns:1fr; }
  .ctb-nav-actions{ display:grid; grid-template-columns:1fr; gap:9px; margin-top:24px; }
  .ctb-nav-actions .btn,.ctb-nav-actions .btn-primary,.ctb-nav-actions .btn-ghost{ width:100%; justify-content:center; margin-left:0 !important; min-height:50px; }
  .ctb-summary{ width:100%; }
  .ctb-summary-block{ margin-bottom:20px; padding-bottom:18px; }
  .ctb-summary-row{ display:grid; grid-template-columns:1fr; gap:3px; padding:8px 0; }
  .ctb-summary-row span:last-child{ text-align:left; }
  .ctb-success{ padding:24px 0; }
  .ctb-success-actions{ display:grid; grid-template-columns:1fr; }
}