/* ==========================================================
   IslandTravelAtlas — Connectivity Direct Widget V6

   Page-specific repair:
   - Removes dark-on-dark text
   - Uses direct Travelpayouts widget placement
   - Removes iframe placeholder spacing
   - Provides consistent section spacing

   Scope:
   body.ita-connectivity-direct-v6
   ========================================================== */

html body.ita-connectivity-direct-v6 {
  --ic6-page: #f3f7f5;
  --ic6-white: #ffffff;
  --ic6-soft: #eaf3f0;
  --ic6-border: #d5e2dc;

  --ic6-ink: #14271f;
  --ic6-text: #40574d;
  --ic6-muted: #64776e;

  --ic6-accent: #007c6d;
  --ic6-accent-hover: #006458;

  --ic6-dark: #082b24;
  --ic6-dark-two: #12483b;

  --ic6-on-dark: #f7fbf9;
  --ic6-on-dark-muted: #d5e8e0;

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

html body.ita-connectivity-direct-v6 main {
  background: var(--ic6-page) !important;
  color: var(--ic6-text) !important;
}

/* ==========================================================
   EXISTING MAIN SECTIONS
   ========================================================== */

html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section) {
  min-height: 0 !important;

  margin: 0 !important;

  padding-top:
    clamp(38px, 4.5vw, 58px) !important;

  padding-bottom:
    clamp(38px, 4.5vw, 58px) !important;

  border-top:
    1px solid var(--ic6-border) !important;

  background-color:
    var(--ic6-white) !important;

  background-image:
    none !important;

  color:
    var(--ic6-text) !important;
}

html body.ita-connectivity-direct-v6
main > section:first-child {
  border-top: 0 !important;

  padding-top:
    clamp(48px, 5.5vw, 72px) !important;

  padding-bottom:
    clamp(44px, 5vw, 66px) !important;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(0, 124, 109, 0.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #f8fcfa 0%,
      #eaf5f1 100%
    ) !important;
}

html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section):nth-of-type(even) {
  background-color:
    var(--ic6-soft) !important;
}

/* ==========================================================
   EXISTING PAGE TEXT
   ========================================================== */

html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
h1,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
h2,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
h3,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
h4,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
strong,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
b {
  color: var(--ic6-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
p,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
li,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
span,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
small,
html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
label {
  color: var(--ic6-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.ita-connectivity-direct-v6
main > section:not(.ita-connectivity-widget-section)
a {
  color: var(--ic6-accent-hover) !important;
  opacity: 1 !important;
}

html body.ita-connectivity-direct-v6
main .rf-kicker,
html body.ita-connectivity-direct-v6
main .ita-tool-eyebrow,
html body.ita-connectivity-direct-v6
main .breadcrumbs {
  color: var(--ic6-accent) !important;
  opacity: 1 !important;
}

html body.ita-connectivity-direct-v6
main > section:first-child h1 {
  max-width: 900px;

  color: var(--ic6-ink) !important;

  font-size:
    clamp(2.15rem, 4.7vw, 3.45rem) !important;

  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
}

html body.ita-connectivity-direct-v6
main h2 {
  font-size:
    clamp(1.55rem, 2.8vw, 2.25rem) !important;

  line-height: 1.14 !important;
}

/* ==========================================================
   PROVIDER CARDS
   ========================================================== */

html body.ita-connectivity-direct-v6
main .ita-tool-grid,
html body.ita-connectivity-direct-v6
main .ita-provider-grid,
html body.ita-connectivity-direct-v6
main .ita-options-grid,
html body.ita-connectivity-direct-v6
main .rf-destination-grid {
  gap:
    clamp(15px, 2vw, 22px) !important;
}

html body.ita-connectivity-direct-v6
main .ita-tool-card,
html body.ita-connectivity-direct-v6
main .ita-provider-card,
html body.ita-connectivity-direct-v6
main .ita-affiliate-card,
html body.ita-connectivity-direct-v6
main .ita-option-card {
  min-height: 0 !important;
  height: auto !important;

  padding:
    clamp(18px, 2.3vw, 24px) !important;

  border:
    1px solid var(--ic6-border) !important;

  background:
    var(--ic6-white) !important;

  color:
    var(--ic6-text) !important;

  box-shadow:
    0 10px 28px rgba(16, 49, 39, 0.07) !important;
}

html body.ita-connectivity-direct-v6
main .ita-tool-card h3,
html body.ita-connectivity-direct-v6
main .ita-provider-card h3,
html body.ita-connectivity-direct-v6
main .ita-affiliate-card h3,
html body.ita-connectivity-direct-v6
main .ita-option-card h3 {
  color: var(--ic6-ink) !important;
}

html body.ita-connectivity-direct-v6
main .ita-tool-card p,
html body.ita-connectivity-direct-v6
main .ita-provider-card p,
html body.ita-connectivity-direct-v6
main .ita-affiliate-card p,
html body.ita-connectivity-direct-v6
main .ita-option-card p {
  color: var(--ic6-text) !important;
}

/* ==========================================================
   DESTINATION IMAGE CARDS
   ========================================================== */

html body.ita-connectivity-direct-v6
main .pm-destination-card div span,
html body.ita-connectivity-direct-v6
main .pm-destination-card div strong,
html body.ita-connectivity-direct-v6
main .pm-destination-card div small,
html body.ita-connectivity-direct-v6
main .rf-destination-content span,
html body.ita-connectivity-direct-v6
main .rf-destination-content strong,
html body.ita-connectivity-direct-v6
main .rf-destination-content small,
html body.ita-connectivity-direct-v6
main .rf-destination-content p,
html body.ita-connectivity-direct-v6
main .rf-destination-content em {
  color: #ffffff !important;

  opacity: 1 !important;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.76) !important;
}

/* ==========================================================
   DIRECT WIDGET SECTION
   ========================================================== */

html body.ita-connectivity-direct-v6
main .ita-connectivity-widget-section {
  margin: 0 !important;

  padding:
    clamp(42px, 5vw, 66px)
    0 !important;

  border-top:
    1px solid var(--ic6-border) !important;

  background:
    var(--ic6-soft) !important;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-shell {
  width:
    min(1160px, calc(100% - 36px));

  margin-inline: auto;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-intro {
  max-width: 760px;

  margin-bottom:
    clamp(24px, 3vw, 34px);
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-eyebrow {
  margin: 0 0 9px;

  color: var(--ic6-accent) !important;

  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-intro h2 {
  margin: 0;

  color: var(--ic6-ink) !important;

  font-size:
    clamp(1.7rem, 3vw, 2.4rem) !important;

  line-height: 1.12 !important;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-intro p:last-child {
  margin: 13px 0 0;

  color: var(--ic6-text) !important;

  line-height: 1.65;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(285px, 340px);

  align-items: start;

  gap: 22px;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-card {
  min-width: 0;

  padding:
    clamp(18px, 2.5vw, 28px);

  border:
    1px solid var(--ic6-border);

  border-radius: 20px;

  background:
    var(--ic6-white);

  box-shadow:
    0 14px 38px rgba(16, 49, 39, 0.09);
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-card h3 {
  margin: 0;

  color: var(--ic6-ink) !important;

  font-size: 1.2rem;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-card > p {
  margin: 7px 0 20px;

  color: var(--ic6-muted) !important;
}

html body.ita-connectivity-direct-v6
#ita-airalo-widget {
  min-height: 220px;

  overflow: hidden;

  border-radius: 14px;

  background: var(--ic6-white);
}

html body.ita-connectivity-direct-v6
.ita-connectivity-widget-note {
  margin: 18px 0 0 !important;

  color: var(--ic6-muted) !important;

  font-size: 0.78rem;
  line-height: 1.5;
}

/* ==========================================================
   DARK REVIEW PANEL
   ========================================================== */

html body.ita-connectivity-direct-v6
.ita-connectivity-review {
  padding: 24px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      var(--ic6-dark),
      var(--ic6-dark-two)
    ) !important;

  color:
    var(--ic6-on-dark) !important;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-review h3,
html body.ita-connectivity-direct-v6
.ita-connectivity-review strong {
  margin-top: 0;

  color:
    #ffffff !important;

  opacity: 1 !important;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-review p,
html body.ita-connectivity-direct-v6
.ita-connectivity-review li,
html body.ita-connectivity-direct-v6
.ita-connectivity-review label,
html body.ita-connectivity-direct-v6
.ita-connectivity-review span,
html body.ita-connectivity-direct-v6
.ita-connectivity-review small {
  color:
    var(--ic6-on-dark-muted) !important;

  opacity: 1 !important;
  text-shadow: none !important;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-review ul {
  display: grid;

  gap: 12px;

  margin: 18px 0 0;
  padding-left: 20px;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-review a {
  color:
    #ffffff !important;

  opacity: 1 !important;

  font-weight: 750;
}

html body.ita-connectivity-direct-v6
.ita-connectivity-review-links {
  display: grid;

  gap: 8px;

  margin-top: 22px;
  padding-top: 18px;

  border-top:
    1px solid rgba(255, 255, 255, 0.17);
}

/* ==========================================================
   DARK NAVIGATION INTRODUCTION
   ========================================================== */

html body.ita-connectivity-direct-v6
.pm-mega-intro {
  background:
    linear-gradient(
      145deg,
      var(--ic6-dark),
      var(--ic6-dark-two)
    ) !important;

  color:
    var(--ic6-on-dark) !important;
}

html body.ita-connectivity-direct-v6
.pm-mega-intro h2,
html body.ita-connectivity-direct-v6
.pm-mega-intro strong,
html body.ita-connectivity-direct-v6
.pm-mega-intro a {
  color:
    #ffffff !important;

  opacity: 1 !important;
}

html body.ita-connectivity-direct-v6
.pm-mega-intro p,
html body.ita-connectivity-direct-v6
.pm-mega-intro span,
html body.ita-connectivity-direct-v6
.pm-mega-intro small {
  color:
    var(--ic6-on-dark-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   FOOTER CONTRAST
   ========================================================== */

html body.ita-connectivity-direct-v6
.pm-footer {
  margin-top: 0 !important;

  background:
    var(--ic6-dark) !important;

  color:
    var(--ic6-on-dark) !important;
}

html body.ita-connectivity-direct-v6
.pm-footer h2,
html body.ita-connectivity-direct-v6
.pm-footer h3,
html body.ita-connectivity-direct-v6
.pm-footer strong,
html body.ita-connectivity-direct-v6
.pm-footer a {
  color:
    #ffffff !important;

  opacity: 1 !important;
}

html body.ita-connectivity-direct-v6
.pm-footer p,
html body.ita-connectivity-direct-v6
.pm-footer li,
html body.ita-connectivity-direct-v6
.pm-footer span,
html body.ita-connectivity-direct-v6
.pm-footer small,
html body.ita-connectivity-direct-v6
.pm-footer button {
  color:
    var(--ic6-on-dark-muted) !important;

  opacity: 1 !important;
}

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

@media (max-width: 900px) {
  html body.ita-connectivity-direct-v6
  .ita-connectivity-widget-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  html body.ita-connectivity-direct-v6
  .ita-connectivity-widget-shell {
    width:
      min(100% - 24px, 1160px);
  }

  html body.ita-connectivity-direct-v6
  main > section:not(.ita-connectivity-widget-section) {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  html body.ita-connectivity-direct-v6
  main > section:first-child {
    padding-top: 44px !important;
    padding-bottom: 42px !important;
  }

  html body.ita-connectivity-direct-v6
  #ita-airalo-widget {
    min-height: 300px;
  }
}