/*
 * SAT Widget Sections CSS
 * Loaded globally (non-single-safari pages) whenever any SAT Elementor widget is used.
 * Contains CSS variables + styles for: Destinations, Travel Styles, Why Us, Process, FAQ.
 */

/* ── CSS Variables (mirror homepage-template.html :root) ── */
:root {
  --ink:    #1C1208;
  --br:     #7D4F37;
  --og:     #DD844E;
  --gold:   #C9954A;
  --mh:     #86441E;
  --esp:    #593325;
  --dk:     #2E1508;
  --cr:     #F9F4F1;
  --crdk:   #EDE3DA;
  --sd:     #E6DAD0;
  --wh:     #FFFFFF;
  --mu:     #68544A;
  --ta:     #00AA6C;
  --wa:     #25D366;
  --shadow:   0 2px 24px rgba(28,18,8,.08);
  --shadowlg: 0 12px 48px rgba(28,18,8,.16);
  --tr:     all .28s cubic-bezier(.4,0,.2,1);
}

/* ── Shared layout helpers ── */
.wrap { max-width:1600px; margin:0 auto; padding:0 48px; }
@media(max-width:1024px){ .wrap { padding:0 32px; } }
@media(max-width:768px) { .wrap { padding:0 20px; } }

.eyebrow {
  font-family:'DM Sans',sans-serif;
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--og);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::after { content:'';width:32px;height:1.5px;background:var(--og); }

.page-h2 {
  font-family:'Jost',sans-serif;
  font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-weight:500;color:var(--ink);line-height:1.30;margin-bottom:16px;
}
.page-h2 em { font-style:italic;color:var(--og); }

.btn {
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:var(--tr);border-radius:4px;
  padding:14px 28px;white-space:nowrap;border:none;text-decoration:none;
}
.btn-cta { background:var(--og);color:#fff;box-shadow:0 4px 20px rgba(221,132,78,.32); }
.btn-cta:hover { background:var(--mh);transform:translateY(-2px); }
.btn-ghost-dk { background:transparent;color:var(--br);border:1.5px solid var(--br); }
.btn-ghost-dk:hover { background:var(--br);color:#fff; }


/* ══════════════════════════════════════
   DESTINATIONS SECTION
══════════════════════════════════════ */
#destinations { padding:100px 0;background:var(--wh);overflow:hidden; }

.dest-header { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;gap:24px;flex-wrap:wrap; }

.dest-carousel-wrap { position:relative; }
.dest-strip { display:flex;gap:14px;overflow:hidden; }

.dest-card {
  flex:0 0 calc(20% - 12px);min-width:0;
  position:relative;border-radius:12px;overflow:hidden;cursor:pointer;
  height:360px;display:flex;align-items:flex-end;transition:var(--tr);
  text-decoration:none;
}
.dest-card:hover { transform:translateY(-4px);box-shadow:var(--shadowlg); }
.dest-card-img { position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s ease; }
.dest-card:hover .dest-card-img { transform:scale(1.07); }
.dest-card-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,10,4,.88) 0%,rgba(20,10,4,.2) 50%,rgba(20,10,4,.05) 100%);
  transition:var(--tr);
}
.dest-card:hover .dest-card-overlay { background:linear-gradient(to top,rgba(20,10,4,.92) 0%,rgba(20,10,4,.35) 100%); }
.dest-card-body { position:relative;z-index:2;padding:18px 16px;width:100%; }
.dest-card-name { font-family:'Playfair Display',serif;font-size:.95rem;font-weight:500;color:#fff;line-height:1.2;margin-bottom:5px; }
.dest-card-tags { font-size:.62rem;color:rgba(255,255,255,.58);line-height:1.5; }
.dest-card-arrow {
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  margin-top:10px;opacity:0;transform:translateY(4px);transition:var(--tr);
}
.dest-card:hover .dest-card-arrow { opacity:1;transform:translateY(0); }
.dest-card-arrow svg { width:13px;height:13px;color:#fff; }

.dest-arrow {
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;
  background:var(--wh);border:2px solid var(--sd);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 18px rgba(28,18,8,.14);transition:var(--tr);flex-shrink:0;
}
.dest-arrow:hover { background:var(--og);border-color:var(--og);box-shadow:0 6px 24px rgba(221,132,78,.35); }
.dest-arrow:hover svg { color:#fff; }
.dest-arrow svg { width:20px;height:20px;color:var(--br);transition:var(--tr); }
.dest-arrow.prev { left:-26px; }
.dest-arrow.next { right:-26px; }

.dest-dots { display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px; }
.dest-dot {
  width:9px;height:9px;border-radius:50%;background:var(--sd);
  cursor:pointer;transition:var(--tr);border:none;padding:0;
}
.dest-dot:hover { background:var(--br); }
.dest-dot.active { background:var(--og);transform:scale(1.35);box-shadow:0 0 0 3px rgba(221,132,78,.22); }

@media(max-width:1100px){ .dest-card { flex:0 0 calc(33.333% - 10px); } }
@media(max-width:900px)  { .dest-arrow.prev{left:-14px;} .dest-arrow.next{right:-14px;} }
@media(max-width:768px)  { .dest-card{flex:0 0 calc(50% - 8px);height:280px;} }
@media(max-width:480px)  {
  .dest-card { flex:0 0 100%; }
  .dest-arrow { width:38px;height:38px; }
  .dest-arrow svg { width:16px;height:16px; }
  .dest-arrow.prev { left:-8px; }
  .dest-arrow.next { right:-8px; }
}


/* ══════════════════════════════════════
   TRAVEL STYLES SECTION
══════════════════════════════════════ */
#travel-styles { padding:100px 0;background:var(--cr); }

.styles-header { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;gap:20px;flex-wrap:wrap; }

.styles-carousel-wrap { position:relative;padding:0 10px; }
.styles-grid { display:flex;gap:18px;overflow:hidden; }

.style-card {
  flex:0 0 calc(25% - 14px);min-width:0;
  position:relative;border-radius:12px;overflow:hidden;height:380px;cursor:pointer;
}
.style-img { width:100%;height:100%;object-fit:cover;transition:transform .5s;background:#8a6f52; }
.style-card:hover .style-img { transform:scale(1.07); }
.style-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(20,10,4,.88) 0%,rgba(20,10,4,.1) 60%); }
.style-body { position:absolute;bottom:0;left:0;right:0;padding:24px 22px;color:#fff; }
.style-name { font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:400;margin-bottom:6px; }
.style-desc { font-size:.8rem;color:rgba(255,255,255,.7);line-height:1.6; }
.style-link { display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;transition:gap .2s;text-decoration:none; }
.style-link:hover { gap:10px; }

.styles-arrow {
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;
  background:var(--wh);border:2px solid var(--sd);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 18px rgba(28,18,8,.14);transition:var(--tr);flex-shrink:0;
}
.styles-arrow:hover { background:var(--og);border-color:var(--og);box-shadow:0 6px 24px rgba(221,132,78,.35); }
.styles-arrow:hover svg { color:#fff; }
.styles-arrow svg { width:20px;height:20px;color:var(--br);transition:var(--tr); }
.styles-arrow.sprev { left:-26px; }
.styles-arrow.snext { right:-26px; }

.styles-dots { display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px; }
.styles-dot { width:9px;height:9px;border-radius:50%;background:var(--sd);cursor:pointer;transition:var(--tr);border:none;padding:0; }
.styles-dot:hover { background:var(--br); }
.styles-dot.active { background:var(--og);transform:scale(1.35);box-shadow:0 0 0 3px rgba(221,132,78,.22); }

@media(max-width:1000px){ .style-card { flex:0 0 calc(50% - 10px); } }
@media(max-width:900px)  { .styles-grid{gap:14px;} .styles-arrow.sprev{left:-14px;} .styles-arrow.snext{right:-14px;} }
@media(max-width:540px)  { .style-card { flex:0 0 100%; } }
@media(max-width:480px)  {
  .styles-arrow { width:38px;height:38px; }
  .styles-arrow svg { width:16px;height:16px; }
  .styles-arrow.sprev { left:-8px; }
  .styles-arrow.snext { right:-8px; }
}


/* ══════════════════════════════════════
   WHY CHOOSE US SECTION
══════════════════════════════════════ */
#why { padding:96px 0;background:#fff;position:relative;overflow:hidden; }

.why-header { text-align:center;margin-bottom:64px;position:relative;z-index:1; }
.why-header p { font-size:.94rem;color:rgb(122 97 88);max-width:540px;margin:0 auto;line-height:1.8; }

.why-features { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.why-features-full { grid-template-columns:repeat(3,1fr);max-width:100%; }

.why-feat {
  padding:28px 24px;background:var(--wh);
  border:1.5px solid var(--sd);border-radius:12px;
  transition:var(--tr);cursor:default;
}
.why-feat:hover {
  background:rgba(221,132,78,.06);border-color:rgba(221,132,78,.35);
  transform:translateY(-4px);box-shadow:0 8px 28px rgba(28,18,8,.08);
}
.why-feat-icon {
  width:52px;height:52px;border-radius:12px;
  background:rgba(221,132,78,.1);border:1.5px solid rgba(221,132,78,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:18px;transition:var(--tr);
}
.why-feat:hover .why-feat-icon { background:var(--crdk);border-color:var(--og); }
.why-feat h4 { font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:7px;line-height:1.2; }
.why-feat p  { font-size:.78rem;color:var(--mu);line-height:1.65;margin:0; }

@media(max-width:900px){ .why-features-full { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .why-features-full { grid-template-columns:1fr; } }


/* ══════════════════════════════════════
   BOOKING PROCESS SECTION
══════════════════════════════════════ */
#process { padding:96px 0;background:var(--wh); }

.process-hbox {
  display:grid;
  grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr; /* default 4-step */
  gap:0;align-items:start;
}
.process-ibox {
  background:var(--cr);border:1.5px solid var(--sd);border-radius:16px;
  padding:32px 24px;text-align:center;transition:var(--tr);position:relative;
}
.process-ibox:hover {
  border-color:rgba(221,132,78,.4);
  box-shadow:0 8px 32px rgba(28,18,8,.08);transform:translateY(-4px);
}
.pib-icon-wrap {
  width:64px;height:64px;border-radius:50%;
  background:rgba(221,132,78,.1);border:1.5px solid rgba(221,132,78,.22);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;transition:var(--tr);
}
.process-ibox:hover .pib-icon-wrap { background:var(--og);border-color:var(--og); }
.pib-icon-wrap svg { width:26px;height:26px;color:var(--og);transition:var(--tr); }
.process-ibox:hover .pib-icon-wrap svg { color:#fff; }
.pib-title { font-family:'Playfair Display',serif;font-size:.94rem;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.25; }
.pib-desc  { font-size:.78rem;color:var(--mu);line-height:1.65;margin:0; }
.pib-connector { display:flex;align-items:center;justify-content:center;padding-top:56px;color:var(--sd); }
.pib-connector svg { width:40px;height:16px; }

@media(max-width:1000px){ .process-hbox { grid-template-columns:1fr 1fr!important;gap:16px; } .pib-connector { display:none; } }
@media(max-width:520px) { .process-hbox { grid-template-columns:1fr!important; } }


/* ══════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════ */
#faq {
  padding:100px 0;background:var(--cr);position:relative;overflow:hidden;
}
#faq::before {
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cellipse cx='400' cy='400' rx='350' ry='200' fill='none' stroke='%23dd844e' stroke-width='0.4' opacity='0.08'/%3E%3Cellipse cx='400' cy='400' rx='280' ry='140' fill='none' stroke='%23dd844e' stroke-width='0.4' opacity='0.08'/%3E%3Cellipse cx='400' cy='400' rx='210' ry='90' fill='none' stroke='%23dd844e' stroke-width='0.4' opacity='0.07'/%3E%3Cellipse cx='400' cy='400' rx='140' ry='50' fill='none' stroke='%23dd844e' stroke-width='0.4' opacity='0.06'/%3E%3C/svg%3E");
  background-size:900px 900px;background-position:center;background-repeat:no-repeat;
  pointer-events:none;z-index:0;
}
.faq-inner  { position:relative;z-index:1; }
.faq-header { text-align:center;margin-bottom:52px; }
.faq-eyebrow { font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--og);margin-bottom:12px; }
.faq-header h2 { font-family:'Jost',sans-serif;font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:500;color:var(--ink);line-height:1.30;margin-bottom:16px; }
.faq-header p  { font-size:.88rem;color:var(--mu);max-width:560px;margin:0 auto;line-height:1.75; }

.faq-two-col { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
@media(max-width:860px){ .faq-two-col { grid-template-columns:1fr; } }

.faq-item {
  background:var(--wh);border:1px solid var(--sd);border-radius:10px;
  overflow:hidden;transition:var(--tr);margin-bottom:12px;
}
.faq-item:hover { border-color:rgba(221,132,78,.3); }
.faq-item.faq-open { border-color:rgba(221,132,78,.4);box-shadow:0 4px 18px rgba(28,18,8,.07); }

.faq-q {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;cursor:pointer;gap:16px;
  font-size:.88rem;font-weight:600;color:var(--ink);
  user-select:none;transition:var(--tr);
}
.faq-q:hover  { color:var(--og); }
.faq-item.faq-open .faq-q { color:var(--og); }

.faq-chevron {
  width:28px;height:28px;border-radius:50%;
  background:var(--cr);border:1px solid var(--sd);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr);
}
.faq-item.faq-open .faq-chevron { background:var(--og);border-color:var(--og);transform:rotate(180deg); }
.faq-chevron svg { width:14px;height:14px;color:var(--mu);transition:var(--tr); }
.faq-item.faq-open .faq-chevron svg { color:#fff; }

.faq-a {
  display:none;padding:0 22px 18px;
  font-size:.82rem;color:var(--mu);line-height:1.78;
  border-top:1px solid var(--sd);padding-top:14px;
}
.faq-item.faq-open .faq-a { display:block; }