@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --spruce-900:#152F26;
  --spruce-700:#234437;
  --mist-100:#F5F2E9;
  --paper:#FBF9F3;
  --marigold-500:#E7A335;
  --marigold-600:#CE8A1F;
  --rust-600:#B8563A;
  --slate-500:#5B6B63;
  --slate-700:#3A453F;
  --line:#DCD5C2;
  --danger:#C0392B;
  --display:'Fraunces', serif;
  --body:'Manrope', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--body); background:var(--mist-100); color:var(--spruce-900); -webkit-font-smoothing:antialiased;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--display); margin:0 0 8px;}
.mark{width:32px;height:32px;border-radius:50%;background:var(--marigold-500);display:inline-flex;align-items:center;justify-content:center;color:var(--spruce-900);font-family:var(--mono);font-weight:700;font-size:.78rem;}

/* ================= PANEL (admin/agent) LAYOUT ================= */
.panel-body{background:var(--mist-100);}
.panel-shell{display:flex; min-height:100vh;}
.panel-side{
  width:230px; background:var(--spruce-900); color:var(--mist-100);
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
}
.panel-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.05rem; margin-bottom:26px; padding:0 8px;}
.panel-nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.panel-nav a{
  padding:10px 12px; border-radius:8px; font-size:.88rem; font-weight:600; text-decoration:none;
  color:rgba(245,242,233,.75); transition:background .15s, color .15s;
}
.panel-nav a:hover{background:rgba(255,255,255,.06); color:var(--mist-100);}
.panel-nav a.active{background:var(--marigold-500); color:var(--spruce-900);}
.panel-logout{
  margin-top:14px; text-align:center; padding:10px; border-radius:8px; font-size:.85rem; font-weight:700;
  text-decoration:none; color:var(--mist-100); border:1px solid rgba(255,255,255,.2);
}
.panel-logout:hover{background:rgba(255,255,255,.08);}
.panel-main{flex:1; padding:28px 34px 60px; max-width:1200px;}
.panel-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.panel-topbar-title{font-family:var(--display); font-size:1.5rem; font-weight:600;}
.panel-topbar-user{font-size:.82rem; color:var(--slate-500); font-family:var(--mono);}

.alert{padding:12px 16px; border-radius:8px; font-size:.88rem; font-weight:600; margin-bottom:18px;}
.alert-success{background:#E4F3EA; color:#1F7A44; border:1px solid #BFE3CC;}
.alert-error{background:#FBE7E4; color:var(--danger); border:1px solid #F3C4BC;}
.alert-info{background:#EAF1FB; color:#295B9E; border:1px solid #C9DBF3;}

.card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:20px;}
.card h3{font-size:1.1rem;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
.stat-box{background:var(--spruce-900); color:var(--mist-100); border-radius:12px; padding:18px 20px;}
.stat-box .num{font-family:var(--mono); font-size:1.7rem; font-weight:700; color:var(--marigold-500);}
.stat-box .lab{font-size:.78rem; color:rgba(245,242,233,.7); margin-top:2px;}

table.data{width:100%; border-collapse:collapse; font-size:.87rem;}
table.data th{text-align:left; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); padding:10px 12px; border-bottom:2px solid var(--line);}
table.data td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data tr:hover td{background:rgba(231,163,53,.06);}

.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  font-family:var(--body); font-weight:700; font-size:.82rem; padding:9px 16px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; transition:all .15s;
}
.btn-primary{background:var(--spruce-900); color:var(--mist-100);}
.btn-primary:hover{background:var(--rust-600);}
.btn-accent{background:var(--marigold-500); color:var(--spruce-900);}
.btn-accent:hover{background:var(--marigold-600);}
.btn-ghost{background:transparent; color:var(--spruce-900); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--spruce-900);}
.btn-danger{background:#FBE7E4; color:var(--danger); border-color:#F3C4BC;}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-sm{padding:6px 12px; font-size:.75rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.badge{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:100px; display:inline-block;}
.badge-active{background:#E4F3EA; color:#1F7A44;}
.badge-inactive{background:#F1F0EC; color:var(--slate-500);}
.badge-pending{background:#FDF1DA; color:var(--marigold-600);}
.badge-expired, .badge-rejected{background:#FBE7E4; color:var(--danger);}
.badge-scheduled{background:#EAF1FB; color:#295B9E;}

form .field{margin-bottom:16px;}
form label{display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; color:var(--spruce-700);}
form .hint{font-size:.74rem; color:var(--slate-500); margin-top:4px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:var(--body);
  font-size:.9rem; background:#fff; color:var(--spruce-900);
}
textarea{resize:vertical; min-height:90px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--marigold-500); outline-offset:1px; border-color:var(--marigold-500);}
.form-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px;}
.checkbox-grid{display:flex; flex-wrap:wrap; gap:10px;}
.checkbox-grid label{
  display:flex; align-items:center; gap:6px; font-weight:600; font-size:.82rem; background:#fff;
  border:1px solid var(--line); padding:7px 12px; border-radius:100px; cursor:pointer;
}
.checkbox-grid input{width:auto;}

.day-block{border:1px solid var(--line); background:#fff; border-radius:10px; padding:16px; margin-bottom:12px; position:relative;}
.day-block .day-tag{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--marigold-600); font-weight:700; margin-bottom:8px;}
.day-block .remove-day{position:absolute; top:12px; right:12px; background:none; border:none; color:var(--danger); font-size:.78rem; font-weight:700; cursor:pointer;}

@media (max-width:900px){
  .panel-shell{flex-direction:column;}
  .panel-side{width:100%; height:auto; position:relative; flex-direction:row; flex-wrap:wrap; align-items:center;}
  .panel-nav{flex-direction:row; flex-wrap:wrap;}
  .panel-main{padding:20px;}
}

/* ================= PUBLIC SITE ================= */
header.site{position:sticky; top:0; z-index:50; background:var(--spruce-900); color:var(--mist-100); border-bottom:1px solid rgba(255,255,255,.08);}
.nav-wrap{max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:1.3rem;}
nav.links{display:flex; gap:24px; font-size:.88rem; font-weight:600;}
nav.links a{text-decoration:none; opacity:.85;}
nav.links a:hover{opacity:1;}
.nav-cta{background:var(--marigold-500); color:var(--spruce-900); padding:9px 18px; border-radius:100px; font-weight:700; font-size:.82rem; text-decoration:none; border:none; cursor:pointer;}

.hero-search{background:linear-gradient(180deg, var(--spruce-900) 0%, var(--spruce-700) 100%); color:var(--mist-100); padding:52px 24px 70px;}
.hero-search-inner{max-width:900px; margin:0 auto; text-align:center;}
.hero-search h1{font-size:clamp(1.8rem, 4vw, 2.7rem); font-weight:600; line-height:1.12; margin-bottom:10px;}
.hero-search p{color:rgba(245,242,233,.8); margin-bottom:26px;}
.search-box{position:relative; max-width:520px; margin:0 auto;}
.search-box input{padding:14px 16px; border-radius:100px; border:none; font-size:.95rem;}
.search-suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.25); text-align:left; overflow:hidden; z-index:20; display:none;
}
.search-suggest a{display:block; padding:11px 16px; font-size:.88rem; color:var(--spruce-900); text-decoration:none; border-bottom:1px solid var(--line);}
.search-suggest a:last-child{border-bottom:none;}
.search-suggest a:hover{background:var(--mist-100);}

.section{max-width:1180px; margin:0 auto; padding:44px 24px;}
.tag-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px;}
.tag-chip{
  font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; padding:7px 15px;
  border-radius:100px; background:var(--paper); border:1px solid var(--line); text-decoration:none; color:var(--spruce-700); cursor:pointer;
}
.tag-chip:hover{border-color:var(--marigold-500);}
.tag-chip.active{background:var(--spruce-900); color:var(--mist-100); border-color:var(--spruce-900);}

.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.pkg-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s;}
.pkg-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(21,47,38,.1); border-color:var(--marigold-500);}
.pkg-card-media{position:relative; width:100%; aspect-ratio:16/10; background:var(--spruce-700); overflow:hidden;}
.pkg-card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.pkg-card-media-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(245,242,233,.5); font-family:var(--display); font-size:1rem; background:linear-gradient(135deg, var(--spruce-900), var(--spruce-700));}
.video-badge-btn{
  position:absolute; right:10px; bottom:10px; background:rgba(21,47,38,.85); color:#fff; border:none;
  padding:7px 12px; border-radius:100px; font-size:.72rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px;
  backdrop-filter:blur(2px);
}
.video-badge-btn:hover{background:var(--rust-600);}
.pkg-card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pkg-card .loc{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--rust-600); font-weight:700;}
.pkg-card h3{font-size:1.2rem;}
.pkg-card .meta{font-family:var(--mono); font-size:.78rem; color:var(--slate-500);}
.pkg-card .tags{display:flex; gap:6px; flex-wrap:wrap;}
.pkg-card .chip{font-size:.68rem; background:var(--mist-100); border:1px solid var(--line); padding:3px 9px; border-radius:100px;}
.pkg-card .from{margin-top:auto; padding-top:10px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline;}
.pkg-card .from .amt{font-family:var(--mono); font-weight:700; color:var(--rust-600); font-size:1.05rem;}

.star-rating{display:inline-flex; align-items:center; gap:2px;}
.star-rating svg{display:block;}
.star-rating-num{font-family:var(--mono); font-size:.72rem; color:var(--slate-500); margin-left:4px;}

.pop-tab{background:var(--paper); border:none; font-family:var(--mono);}
.verified-badge{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700;
  color:#1F7A44; background:#E4F3EA; padding:3px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:3px;
}
.empty-state{text-align:center; padding:50px 20px; color:var(--slate-500);}

/* package detail page */
.pkg-hero{background:linear-gradient(180deg, var(--spruce-900), var(--spruce-700)); color:var(--mist-100); padding:44px 24px; background-size:cover; background-position:center;}
.pkg-hero.has-image{background-blend-mode:normal;}
.pkg-hero-inner{max-width:1000px; margin:0 auto;}
.pkg-hero .loc-tag{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; color:var(--marigold-500); margin-bottom:10px;}
.pkg-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:10px;}
.pkg-hero .tags{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 22px;}
.pkg-hero .tags span{font-family:var(--mono); font-size:.7rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:5px 11px; border-radius:100px;}
.pkg-hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.pdf-btn{background:var(--rust-600); color:#fff; border:none;}
.pdf-btn:hover{background:var(--spruce-900);}

.incl-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.incl-cols h4{font-size:.95rem; margin-bottom:10px;}
.incl-cols ul{margin:0; padding-left:18px; font-size:.9rem; line-height:1.7; color:var(--slate-700);}
.incl-cols.excl ul li{color:var(--danger);}

.compare-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.compare-bar select{max-width:220px;}
.agent-list{display:flex; flex-direction:column; gap:14px;}
.agent-ticket{background:var(--paper); border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:1fr 190px; position:relative; overflow:hidden;}
.agent-ticket .perf{position:absolute; top:0; bottom:0; left:calc(100% - 190px); border-left:2px dashed var(--line);}
.agent-main{padding:18px 20px;}
.agent-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.agent-name{display:flex; align-items:center; gap:10px;}
.agent-name .avatar{width:34px;height:34px;border-radius:50%;background:var(--spruce-700); color:var(--mist-100); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:.9rem;}
.transport-badge{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; padding:5px 10px; border-radius:6px; font-weight:700; background:#E4EEE9; color:var(--spruce-700); white-space:nowrap;}
.hotel-badge{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--mist-100); color:var(--slate-700); border:1px solid var(--line);}
.detail-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:8px;}
.detail-item .k{color:var(--slate-500); font-family:var(--mono); font-size:.66rem; text-transform:uppercase;}
.detail-item .v{font-weight:600; font-size:.82rem;}
.agent-price{padding:18px 20px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
.agent-price .amt{font-family:var(--mono); font-weight:700; font-size:1.4rem; color:var(--rust-600);}
.wa-btn{margin-top:6px; background:#25D366; color:#fff; border:none; padding:10px 12px; border-radius:8px; font-weight:700; font-size:.78rem; cursor:pointer;}
.wa-btn:hover{background:#1DA851;}

.itinerary-list{display:flex; flex-direction:column; gap:0;}
.itin-day{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line);}
.itin-day:last-child{border-bottom:none;}
.itin-day .day-num{font-family:var(--display); font-size:1.3rem; font-weight:600; color:var(--marigold-600);}
.itin-day h4{font-size:1.02rem; margin-bottom:6px;}
.itin-day p{margin:0; color:var(--slate-700); font-size:.9rem; line-height:1.6;}

.agent-cta-strip{background:var(--spruce-900); color:var(--mist-100); text-align:center; padding:48px 24px; margin-top:40px;}
.agent-cta-strip h3{font-size:1.5rem; margin-bottom:8px;}
.agent-cta-strip p{color:rgba(245,242,233,.75); margin-bottom:18px;}

footer.site{background:var(--spruce-900); color:rgba(245,242,233,.6); padding:36px 24px; text-align:center; font-size:.82rem;}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(21,47,38,.6); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--paper); border-radius:14px; padding:28px; max-width:460px; width:100%; max-height:90vh; overflow-y:auto; position:relative;}
.modal-box h3{margin-bottom:6px;}
.modal-box p.sub{color:var(--slate-500); font-size:.85rem; margin-bottom:18px;}
.modal-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--slate-500);}

@media (max-width:860px){
  .pkg-grid{grid-template-columns:1fr;}
  .incl-cols{grid-template-columns:1fr;}
  .agent-ticket{grid-template-columns:1fr;}
  .agent-ticket .perf{display:none;}
  .detail-grid{grid-template-columns:repeat(2,1fr);}
  nav.links{display:none;}
  .itin-day{grid-template-columns:1fr;}
}