/* ================================================
   PHARAOH'S PATH — tour detail page styles
   (loaded alongside style.css on tour.html only)
   ================================================ */

/* ---------- tour hero ---------- */
.tour-hero{
  position: relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  padding: 160px 24px 70px;
  overflow:hidden;
}
.tour-hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.tour-hero .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,5,3,.35) 0%, rgba(8,5,3,.55) 45%, rgba(8,5,3,.96) 100%);
}
.tour-hero-content{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; width:100%; }

.breadcrumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12px; color: var(--text-dim); margin: 0 0 18px; text-transform:uppercase; letter-spacing:1px;
}
.breadcrumb a{ color: var(--text-muted); transition: color .3s; }
.breadcrumb a:hover{ color: var(--gold-bright); }
.breadcrumb span{ color: var(--text-dim); }
.breadcrumb #crumbCurrent{ color: var(--gold-bright); }

.tour-hero .eyebrow{ margin-bottom: 12px; }
.tour-title{
  font-family: var(--font-display); font-variant: small-caps;
  font-size: clamp(38px, 6vw, 66px); font-weight:600; margin: 0 0 14px; line-height:1.05;
  max-width: 780px;
}
.tour-tagline{ color: var(--text-muted); font-size:17px; max-width:620px; margin: 0 0 34px; }

.tour-facts{
  display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 34px;
}
.fact{
  background: rgba(16,11,7,.55); backdrop-filter: blur(8px);
  border:1px solid var(--border); border-radius: 12px;
  padding: 12px 20px; min-width: 130px;
}
.fact small{ display:block; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-dim); margin-bottom:4px; }
.fact strong{ font-family: var(--font-display); font-size:20px; font-weight:600; color: var(--text); }
.fact-price strong{ color: var(--gold-bright); }

/* ---------- overview ---------- */
.tour-overview{ padding: 100px 0; }
.overview-inner{
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items:start;
}
.loc-line{ display:flex; align-items:center; gap:8px; color: var(--gold-bright); font-size:14px; margin: -6px 0 22px; }
.loc-line .pin{ width:15px; height:15px; }
.overview-copy p{ color: var(--text-muted); font-size:15.5px; margin: 0 0 16px; }
.highlight-list{ display:flex; flex-direction:column; gap:14px; margin-top: 26px; }
.highlight-list li{ display:flex; align-items:flex-start; gap:14px; font-size:14.5px; color: var(--text); }

.overview-gallery{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  height: 460px;
}
.overview-gallery .gallery-item{
  border-radius: var(--radius); border:1px solid var(--border);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.8);
  position: relative; overflow:hidden; padding:0; cursor: zoom-in;
}
.overview-gallery .gallery-item .egy-photo{ position:absolute; inset:0; transition: transform .5s var(--ease); }
.overview-gallery .gallery-item:hover .egy-photo{ transform: scale(1.06); }
.overview-gallery .gallery-item:first-child{ grid-row: 1 / 3; }

/* ---------- included / not included ---------- */
.tour-included{ padding: 90px 0; background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.included-inner{
  max-width: var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 50px;
}
.included-col h3{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:22px; font-weight:600; margin: 0 0 20px; color: var(--gold-bright);
}
.included-col h3 svg{ width:20px; height:20px; color: var(--gold); }
.included-col.excluded h3{ color: var(--text-muted); }
.included-col.excluded h3 svg{ color: var(--text-dim); }
.included-list{ display:flex; flex-direction:column; gap:12px; }
.included-list li{
  font-size:14.5px; color: var(--text-muted); padding-left:26px; position:relative;
}
.included-list li::before{ content:'\2022'; position:absolute; left:6px; color: var(--gold); }
.included-col.excluded .included-list li::before{ color: var(--text-dim); }

/* ---------- packages ---------- */
.packages{ padding: 90px 0; }
.package-grid{
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.package-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px; position:relative; transition: border-color .3s, transform .3s var(--ease);
  display:flex; flex-direction:column;
}
.package-card:hover{ transform: translateY(-4px); }
.package-card.selected{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 20px 40px -24px rgba(212,175,55,.4); }
.package-badge{
  position:absolute; top:-12px; left:28px; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#1a1208; font-size:11px; font-weight:600; padding:5px 14px; border-radius:999px; letter-spacing:.5px;
}
.package-card h3{ font-family: var(--font-display); font-size:22px; margin: 6px 0 6px; }
.package-card .package-price{ font-family: var(--font-display); font-size:32px; color: var(--gold-bright); margin: 0 0 20px; }
.package-card .package-price small{ font-family: var(--font-body); font-size:13px; color: var(--text-dim); }
.package-included-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; flex:1; }
.package-included-list li{ font-size:13.5px; color: var(--text-muted); padding-left:22px; position:relative; }
.package-included-list li::before{ content:'\2713'; position:absolute; left:0; color: var(--gold); font-weight:700; }
.package-included-list.excluded li{ color: var(--text-dim); }
.package-included-list.excluded li::before{ content:'\2715'; color: var(--text-dim); font-size:11px; }
.package-select-btn{
  width:100%; padding:13px; border-radius:999px; border:1px solid var(--border-strong); background:none;
  color: var(--text); font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; cursor:pointer;
  transition: all .3s;
}
.package-card.selected .package-select-btn{ background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#1a1208; border-color:transparent; font-weight:600; }

/* ---------- booking ---------- */
.booking{ padding: 100px 0; }
.booking-body{
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items:start;
}
.booking-form{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 34px; display:flex; flex-direction:column; gap: 20px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.booking-form label{
  display:flex; flex-direction:column; gap:8px;
  font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim);
}
.booking-form label.full{ width:100%; }
.booking-form label small{ text-transform:none; letter-spacing:0; }
.booking-form input,
.booking-form select,
.booking-form textarea{
  background: var(--bg-alt); border:1px solid var(--border); border-radius:10px;
  padding: 13px 16px; color: var(--text); font-size:14px; font-family: var(--font-body);
  text-transform:none; letter-spacing:normal;
  transition: border-color .3s;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{ outline:none; border-color: var(--gold); }
.booking-form textarea{ resize: vertical; min-height: 80px; }

.stepper{ display:flex; align-items:center; gap:0; width: fit-content; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.stepper button{
  width:40px; height:44px; background: var(--bg-alt); color: var(--gold-bright); font-size:18px;
  transition: background .3s;
}
.stepper button:hover{ background: var(--gold-soft); }
.stepper input{
  width:52px; text-align:center; border:none !important; border-left:1px solid var(--border) !important; border-right:1px solid var(--border) !important;
  border-radius:0 !important; background: var(--bg-alt);
}

.form-note{ font-size:12px; color: var(--text-dim); text-align:center; margin:0; }

.booking-success{
  background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius);
  padding: 44px; text-align:center;
}
.success-icon{
  width:56px; height:56px; margin: 0 auto 18px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#1a1208; font-size:26px; display:flex; align-items:center; justify-content:center;
}
.booking-success h3{ font-family: var(--font-display); font-size:26px; margin:0 0 10px; }
.booking-success > p{ color: var(--text-muted); font-size:14px; margin: 0 0 6px; }
.success-ref{ font-family: var(--font-display); font-size: 24px; color: var(--gold-bright); letter-spacing:2px; margin: 0 0 26px; }
.success-recap{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
  text-align:left; background: var(--bg-alt); border:1px solid var(--border); border-radius:12px;
  padding: 20px; margin-bottom: 22px;
}
.success-recap div{ display:flex; flex-direction:column; gap:4px; }
.success-recap span{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); }
.success-recap strong{ font-family: var(--font-display); font-size:16px; color: var(--text); }

.booking-summary{ position: sticky; top: 110px; }
.summary-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.8);
}
.summary-thumb{
  width:100%; aspect-ratio: 16/10; border-radius:10px; margin-bottom:18px;
  border:1px solid var(--border);
}
.summary-card h4{ font-family: var(--font-display); font-size:22px; margin: 0 0 4px; }
.summary-price{ color: var(--gold-bright); font-size:14px; margin: 0 0 20px; }
.summary-line{ display:flex; justify-content:space-between; align-items:center; padding: 12px 0; border-top:1px solid var(--border); font-size:13.5px; color: var(--text-muted); }
.summary-line strong{ color: var(--text); font-family: var(--font-display); font-size:16px; }
.summary-line.total{ border-top:1px solid var(--border-strong); }
.summary-line.total strong{ color: var(--gold-bright); font-size:20px; }
.summary-note{ font-size:11.5px; color: var(--text-dim); margin: 16px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .overview-inner{ grid-template-columns: 1fr; }
  .overview-gallery{ height: 320px; }
  .included-inner{ grid-template-columns: 1fr; gap: 40px; }
  .booking-body{ grid-template-columns: 1fr; }
  .booking-summary{ position: static; order:-1; }
}
@media (max-width: 640px){
  .tour-hero{ padding: 140px 20px 50px; min-height: 66vh; }
  .overview-inner, .included-inner, .booking-body{ padding: 0 20px; }
  .form-row{ grid-template-columns: 1fr; }
  .booking-form{ padding: 24px; }
  .success-recap{ grid-template-columns: 1fr; }
  .booking-success{ padding: 30px 22px; }
  .fact{ min-width: 44%; }
}