/* ==========================================================
   IslandTravelAtlas — Bali Booking Desk V1

   Customer flow:
   Bali guide → internal decision page → internal live tool
   → approved provider or embedded partner widget.
   ========================================================== */

html body.ita-bali-booking-desk-v1 {
  --bbd-page: #f3f7f5;
  --bbd-surface: #ffffff;
  --bbd-soft: #e8f2ee;
  --bbd-border: #d4e2dc;

  --bbd-ink: #142820;
  --bbd-text: #40574d;
  --bbd-muted: #667a70;

  --bbd-primary: #087c6c;
  --bbd-primary-dark: #056456;
  --bbd-primary-soft: #dff1eb;

  --bbd-dark: #082c24;
  --bbd-dark-two: #124b3d;

  --bbd-radius: 18px;
  --bbd-shadow:
    0 14px 36px rgba(17, 55, 44, 0.09);

  background: var(--bbd-page) !important;
  color: var(--bbd-text) !important;
}

html body.ita-bali-booking-desk-v1
main.ita-bali-booking-main {
  overflow: hidden;

  background: var(--bbd-page);
  color: var(--bbd-text);
}

html body.ita-bali-booking-desk-v1
main.ita-bali-booking-main * {
  box-sizing: border-box;
}

html body.ita-bali-booking-desk-v1
.bbd-shell {
  width: min(1180px, calc(100% - 40px));

  margin-inline: auto;
}

html body.ita-bali-booking-desk-v1
.bbd-section {
  padding:
    clamp(48px, 5.6vw, 78px)
    0;

  border-top: 1px solid var(--bbd-border);

  background: var(--bbd-surface);

  text-align: left;
}

html body.ita-bali-booking-desk-v1
.bbd-section--soft {
  background: var(--bbd-page);
}

html body.ita-bali-booking-desk-v1
.bbd-eyebrow {
  margin: 0 0 10px;

  color: var(--bbd-primary) !important;
  -webkit-text-fill-color:
    var(--bbd-primary) !important;

  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html body.ita-bali-booking-desk-v1
.bbd-heading {
  max-width: 850px;

  margin: 0 0 16px;

  color: var(--bbd-ink) !important;
  -webkit-text-fill-color:
    var(--bbd-ink) !important;

  font-size:
    clamp(1.7rem, 3vw, 2.45rem);

  font-weight: 830;
  line-height: 1.12;
  letter-spacing: -0.035em;

  text-align: left;
  text-wrap: balance;
}

html body.ita-bali-booking-desk-v1
.bbd-copy {
  max-width: 790px;

  margin: 0;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  font-size: 1rem;
  line-height: 1.7;

  text-align: left;
  text-wrap: pretty;
}

/* ==========================================================
   HERO
   ========================================================== */

html body.ita-bali-booking-desk-v1
.bbd-hero {
  padding:
    clamp(52px, 6vw, 86px)
    0
    clamp(48px, 5.6vw, 76px);

  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(8, 124, 108, 0.17),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #f9fcfb 0%,
      #e8f3ee 100%
    );
}

html body.ita-bali-booking-desk-v1
.bbd-breadcrumbs {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin: 0 0 24px;

  color: var(--bbd-muted);

  font-size: 0.86rem;
}

html body.ita-bali-booking-desk-v1
.bbd-breadcrumbs a {
  color: var(--bbd-primary-dark) !important;

  font-weight: 750;
  text-decoration: none;
}

html body.ita-bali-booking-desk-v1
.bbd-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

  align-items: center;

  gap: clamp(34px, 5vw, 68px);
}

html body.ita-bali-booking-desk-v1
.bbd-hero h1 {
  max-width: 850px;

  margin: 10px 0 20px;

  color: var(--bbd-ink) !important;
  -webkit-text-fill-color:
    var(--bbd-ink) !important;

  font-size:
    clamp(2.25rem, 5vw, 4rem);

  font-weight: 860;
  line-height: 1.02;
  letter-spacing: -0.055em;

  text-align: left;
  text-wrap: balance;
}

html body.ita-bali-booking-desk-v1
.bbd-hero-copy {
  max-width: 740px;

  margin: 0 0 27px;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  font-size:
    clamp(1rem, 1.7vw, 1.17rem);

  line-height: 1.72;

  text-align: left;
}

html body.ita-bali-booking-desk-v1
.bbd-route-box {
  padding: clamp(23px, 2.8vw, 31px);

  border: 1px solid var(--bbd-border);
  border-radius: 20px;

  background: var(--bbd-surface);

  box-shadow: var(--bbd-shadow);
}

html body.ita-bali-booking-desk-v1
.bbd-route-box h2 {
  margin: 0 0 14px;

  color: var(--bbd-ink) !important;
  -webkit-text-fill-color:
    var(--bbd-ink) !important;

  font-size: 1.25rem;
  font-weight: 830;
  line-height: 1.25;
}

html body.ita-bali-booking-desk-v1
.bbd-route-list {
  display: grid;

  gap: 12px;

  margin: 0;
  padding: 0;

  list-style: none;
  counter-reset: bbd-route;
}

html body.ita-bali-booking-desk-v1
.bbd-route-list li {
  counter-increment: bbd-route;

  position: relative;

  padding-left: 43px;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  line-height: 1.5;
}

html body.ita-bali-booking-desk-v1
.bbd-route-list li::before {
  content:
    counter(bbd-route, decimal-leading-zero);

  position: absolute;

  top: 0;
  left: 0;

  color: var(--bbd-primary);

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

/* ==========================================================
   NAVIGATION BUTTONS
   ========================================================== */

html body.ita-bali-booking-desk-v1
.bbd-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 11px;

  margin: 0;
}

html body.ita-bali-booking-desk-v1
.bbd-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 12px 18px;

  border: 1px solid var(--bbd-primary);
  border-radius: 11px;

  background: var(--bbd-primary);

  color: #ffffff !important;
  -webkit-text-fill-color:
    #ffffff !important;

  font-size: 0.93rem;
  font-weight: 810;
  line-height: 1.2;

  text-align: center;
  text-decoration: none;
}

html body.ita-bali-booking-desk-v1
.bbd-button:hover {
  border-color: var(--bbd-primary-dark);

  background: var(--bbd-primary-dark);
}

html body.ita-bali-booking-desk-v1
.bbd-button--secondary {
  background: transparent;

  color: var(--bbd-primary-dark) !important;
  -webkit-text-fill-color:
    var(--bbd-primary-dark) !important;
}

/* ==========================================================
   DECISION CARDS
   ========================================================== */

html body.ita-bali-booking-desk-v1
.bbd-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: stretch;

  gap: clamp(18px, 2.4vw, 27px);

  margin-top: 32px;
}

html body.ita-bali-booking-desk-v1
.bbd-card {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-start;

  min-width: 0;
  min-height: 100%;

  padding: clamp(22px, 2.7vw, 30px);

  border: 1px solid var(--bbd-border);
  border-radius: var(--bbd-radius);

  background: var(--bbd-surface);

  color: var(--bbd-text);

  box-shadow: var(--bbd-shadow);

  text-align: left;
}

html body.ita-bali-booking-desk-v1
.bbd-card-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 44px;
  min-height: 34px;

  margin: 0 0 17px;
  padding: 6px 11px;

  border-radius: 999px;

  background: var(--bbd-primary-soft);

  color: var(--bbd-primary-dark) !important;
  -webkit-text-fill-color:
    var(--bbd-primary-dark) !important;

  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

html body.ita-bali-booking-desk-v1
.bbd-card h3 {
  width: 100%;

  margin: 0 0 11px;

  color: var(--bbd-ink) !important;
  -webkit-text-fill-color:
    var(--bbd-ink) !important;

  font-size: 1.28rem;
  font-weight: 830;
  line-height: 1.22;

  text-align: left;
}

html body.ita-bali-booking-desk-v1
.bbd-card p {
  width: 100%;

  flex-grow: 1;

  margin: 0 0 20px;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  font-size: 0.97rem;
  line-height: 1.65;

  text-align: left;
}

html body.ita-bali-booking-desk-v1
.bbd-card .bbd-button {
  margin-top: auto;
}

/* ==========================================================
   TOOL SECTIONS
   ========================================================== */

html body.ita-bali-booking-desk-v1
.bbd-tool-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(0, 1.22fr);

  align-items: start;

  gap: clamp(28px, 4vw, 52px);

  margin-top: 30px;
}

html body.ita-bali-booking-desk-v1
.bbd-tool-panel {
  padding: clamp(23px, 2.8vw, 31px);

  border: 1px solid var(--bbd-border);
  border-radius: var(--bbd-radius);

  background: var(--bbd-surface);

  box-shadow: var(--bbd-shadow);
}

html body.ita-bali-booking-desk-v1
.bbd-tool-panel h3 {
  margin: 0 0 12px;

  color: var(--bbd-ink) !important;
  -webkit-text-fill-color:
    var(--bbd-ink) !important;

  font-size: 1.25rem;
  font-weight: 830;
  line-height: 1.25;
}

html body.ita-bali-booking-desk-v1
.bbd-tool-panel p {
  margin: 0 0 19px;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  line-height: 1.65;
}

html body.ita-bali-booking-desk-v1
.bbd-checklist {
  display: grid;

  gap: 12px;

  margin: 0;
  padding: 0;

  list-style: none;
}

html body.ita-bali-booking-desk-v1
.bbd-checklist li {
  position: relative;

  padding-left: 33px;

  color: var(--bbd-text) !important;
  -webkit-text-fill-color:
    var(--bbd-text) !important;

  line-height: 1.55;
}

html body.ita-bali-booking-desk-v1
.bbd-checklist li::before {
  content: "✓";

  position: absolute;

  top: 1px;
  left: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: var(--bbd-primary-soft);
  color: var(--bbd-primary-dark);

  font-size: 0.76rem;
  font-weight: 900;
}

/* ==========================================================
   FINAL NOTICE
   ========================================================== */

html body.ita-bali-booking-desk-v1
.bbd-final {
  background:
    linear-gradient(
      145deg,
      var(--bbd-dark),
      var(--bbd-dark-two)
    );

  color: #ffffff;
}

html body.ita-bali-booking-desk-v1
.bbd-final .bbd-heading {
  color: #ffffff !important;
  -webkit-text-fill-color:
    #ffffff !important;
}

html body.ita-bali-booking-desk-v1
.bbd-final .bbd-copy {
  color: #d8e9e2 !important;
  -webkit-text-fill-color:
    #d8e9e2 !important;
}

html body.ita-bali-booking-desk-v1
.bbd-final .bbd-button--secondary {
  border-color: rgba(255, 255, 255, 0.72);

  color: #ffffff !important;
  -webkit-text-fill-color:
    #ffffff !important;
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

html body.ita-bali-booking-desk-v1
main.ita-bali-booking-main
a:focus-visible {
  outline:
    4px solid rgba(8, 124, 108, 0.25);

  outline-offset: 3px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  html body.ita-bali-booking-desk-v1
  .bbd-hero-grid,
  html body.ita-bali-booking-desk-v1
  .bbd-tool-layout {
    grid-template-columns: 1fr;
  }

  html body.ita-bali-booking-desk-v1
  .bbd-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  html body.ita-bali-booking-desk-v1
  .bbd-shell {
    width: min(100% - 24px, 1180px);
  }

  html body.ita-bali-booking-desk-v1
  .bbd-section {
    padding: 42px 0;
  }

  html body.ita-bali-booking-desk-v1
  .bbd-grid {
    grid-template-columns: 1fr;
  }

  html body.ita-bali-booking-desk-v1
  .bbd-actions {
    align-items: stretch;
    flex-direction: column;
  }

  html body.ita-bali-booking-desk-v1
  .bbd-actions .bbd-button,
  html body.ita-bali-booking-desk-v1
  .bbd-card .bbd-button {
    width: 100%;
  }
}