/* AHT Notebook legacy.css: exact copy of the live Customizer Additional CSS (post 8), exported 2026-11-07.
   Printed before tokens.css so the redesign sheets win. The stored copy stays in the database as the rollback source.
   Remove dead rules later, page type by page type. wp_custom_css_cb is removed in functions.php so this is not printed twice. */
/* header */
.site-header {
    position: relative !important;
    background: rgba(255, 255, 255, 0.95); /* optional, semi-transparent */
    z-index: 1000;
  }

  /* Only push content under the header; avoid blanket .wp-block-container */
  .wp-block-cover,
  .wp-block-cover-image {
    margin-top: 80px; /* adjust to match header height */
  }

  /* faq */

  /* FAQ styles */
  .faq { --bg: #fff; --ink: #1f2937; --muted:#6b7280; --ring:#e5e7eb; --accent:#10b981; }
  @media (prefers-color-scheme: dark){
    .faq { --bg:#0b0f14; --ink:#e5e7eb; --muted:#9ca3af; --ring:#1f2937; --accent:#34d399; }
  }
  .faq { max-width: 860px; margin: 2rem auto; color: var(--ink); }
  .faq h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 1rem; }
  .faq-item {
    background: var(--bg);
    border:1px solid var(--ring);
    border-radius: 14px;
    padding: .25rem .75rem;
    margin: .75rem 0;
    transition: border-color .2s ease;
  }
  .faq-item[open]{ border-color: var(--accent); }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: .9rem .6rem;
    font-weight: 700;
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary:after {
    content:"▾";
    margin-left:auto;
    transform: rotate(0deg);
    transition: transform .2s ease;
  }
  .faq-item[open] summary:after { transform: rotate(180deg); }
  .faq-answer { padding: 0 .6rem 1rem; color: var(--muted); line-height: 1.7; }
  .faq a { text-decoration: underline; text-underline-offset: 2px; }
  .faq-item:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }


  /*cards*/
  /* ===== Base tokens (adjust once) ===== */
  :root{
    --aht-radius: 16px;              /* general rounding for images/cards  */
    --aht-pill: 9999px;              /* pill/badge buttons                 */
    --aht-shadow: 0 8px 24px rgba(0,0,0,.06);
    /* Brand colors */
    --aht-blue: var(--ast-global-color-0, #00AEEF);
    --aht-blue-hover: var(--ast-global-color-1, #008cb3);
    --aht-yellow: #EFCD0F;
    --aht-yellow-hover: #dcb300;
    --aht-text: #444;
    --aht-text-dark: #222;
    --aht-text-muted: #555;
    --aht-border: #e0e0e0;
    --aht-border-light: #eee;
    --aht-bg-warm: #fcfbf2;
    --aht-green: #27ae60;
    --aht-red: #c0392b;
    --aht-orange: #f39c12;
    --aht-shadow-card: 0 4px 15px rgba(0,0,0,0.05);
    --aht-shadow-light: 0 4px 12px rgba(0,0,0,0.03);
  }

  /* ===== Buttons (core & Astra) ===== */
  .wp-block-button .wp-block-button__link,
  .ast-button,
  .button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]{
    border-radius: var(--aht-radius) !important;
    padding: 12px 18px;
    font-weight: 600;
    text-underline-offset: 3px;
  }
  .wp-block-button.is-style-outline .wp-block-button__link{
    border-radius: var(--aht-radius) !important;
  }

  /* Ghost/pill option (add class 'aht-pill' to a button block) */
  .aht-pill .wp-block-button__link{ border-radius: var(--aht-pill) !important; }

  /* ===== Card pattern (wrap content in Group block with class 'aht-card') ===== */
  .aht-card{
    border: 1px solid #eaeaea;
    border-radius: var(--aht-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--aht-shadow);
  }

  /* Image inside card (use Image block or Featured image) */
  .aht-card img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;     /* prevents CLS jump */
    object-fit: cover;
    border-radius: 0;        /* wrapper handles rounding */
  }

  /* Standalone rounded images (add class 'aht-rounded' to the Image block) */
  img.aht-rounded{ border-radius: var(--aht-radius); }

  /* Events date badges (add class 'aht-badge' to a Paragraph or Buttons block) */
  .aht-badge{
    display: inline-block;
    border-radius: var(--aht-pill);
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    font-size: 12px;
  }

  /* Footer polish */
  .site-footer{ border-top: 1px solid #eaeaea; }
  .site-footer a{ text-underline-offset: 3px; }

  /* Breadcrumbs (Yoast/RankMath/Astra) */
  #breadcrumbs, .rank-math-breadcrumb, .ast-breadcrumbs{
    font-size: 14px;
    color: #6b7280;
  }
  #breadcrumbs a, .rank-math-breadcrumb a, .ast-breadcrumbs a{
    color: #374151;
    text-decoration: underline;
    text-underline-offset: 2px;
  }


  /* cta */
  /* container */
  .aht-inline{
    display:flex;
    align-items:baseline;
    gap:.4rem;          /* small visual gap */
    width:100%;
  }

  /* push link to the right + match style */
  .aht-inline .aht-viewall{
    margin-left:auto;        /* right align */
    white-space:nowrap;
    font-weight:600;
    color: var(--ast-global-color-0, #1e73be);
    text-decoration:none;
  }
  .aht-inline .aht-viewall:hover{
    color: var(--ast-global-color-1, #0b5ea8);
    text-decoration:underline;
  }

  /* optional: on small screens let it stack */
  @media (max-width: 700px){
    .aht-inline{ display:block; }
    .aht-inline .aht-viewall{ margin-left:.4rem; }
  }

  /* Hide the whole meta line under the post title */
  .single-post .entry-meta,
  .single .entry-header .entry-meta,
  .ast-single-post .entry-meta {
    display: none !important;
  }

  /* === Event posts base layout === */
  .aht-event-layout {
    max-width: 860px;
    margin: 0 auto 3rem;
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Snapshot block */
  .aht-event-snapshot {
    margin: 1.5rem 0 2rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--aht-radius);
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: var(--aht-shadow);
  }


  /* Date badge */
  .aht-event-date {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .25rem .8rem;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #111827;
    color: #f9fafb;
  }

  /* Meta lines inside the snapshot */
  .aht-event-meta {
    margin: 0;
    font-size: .95rem;
  }

  .aht-event-meta + .aht-event-meta {
    margin-top: .35rem;
  }

  /* Headings inside event layout */
  .aht-event-layout h2 {
    margin-top: 2.2rem;
    margin-bottom: .75rem;
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  }

  .aht-event-layout h3 {
    margin-top: 1.4rem;
    margin-bottom: .4rem;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  }

  /* Lists and spacing */
  .aht-event-layout ul {
    padding-left: 1.4rem;
    margin: .2rem 0 1.4rem;
  }

  .aht-event-layout p {
    margin: 0 0 1.1rem;
  }

  /* Responsive tweak */
  @media (max-width: 640px) {
    .aht-event-snapshot {
      padding: 1rem 1.1rem;
    }
  }

  /* === Single post layout tweaks for event posts === */

  /* Soft grey background for all single posts (similar to homepage hero background) */
  body.single-post {
    background-color: #f3f4f6;
  }

  /* Let the main content sit on this grey without extra white wrapper from Astra container */
  body.single-post .site-content .ast-container {
    background: transparent;
  }

  /* Center the header area on single posts */
  body.single-post .entry-header {
    text-align: center;
  }

  /* Center and constrain the main post title */
  body.single-post .entry-title {
    text-align: center;
    max-width: 900px;
    margin: 1.8rem auto 0;
  }

  /* Center featured image and give it card-like rounding and shadow */
  body.single-post .post-thumb img,
  body.single-post .post-thumbnail img,
  body.single-post .entry-header img {
    display: block;
    margin: 0 auto 1.5rem;
    border-radius: var(--aht-radius);
    box-shadow: var(--aht-shadow);
  }


  /*sticky toc*/
  /* === STICKY TOC LAYOUT === */
  /* === Things to Do – Sticky TOC, Desktop + Responsive === */

  /* Base proportions: slim left column, wide right column */
  .things-layout.wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 190px;      /* width of TOC column */
    max-width: 190px;
  }

  .things-layout.wp-block-columns > .wp-block-column:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Make the entire left column sticky on larger screens */
  .wp-block-column.things-toc {
    position: sticky;
    top: 110px;           /* distance from the top below your header */
    align-self: flex-start;
  }

  /* TOC card styling (shared) */
  .wp-block-column.things-toc .things-toc-inner {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.9rem;
  }

  .things-toc-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: #6b7280;
  }

  .things-toc-inner a {
    display: block;
    padding: 0.15rem 0.6rem;   /* Was 0.35rem */
    /* 2. Reduce this number to close the gap between items */
    margin-bottom: 0.1rem;     /* Was 0.25rem */
    border-radius: 999px;
    text-decoration: none;
    color: #111827;
    border: 1px solid transparent;
  }

  .things-toc-inner a:hover {
    background: #e5f2fb;
    border-color: #0ea5e9;
  }

  /* --- Desktop / large screens --- */
  @media (min-width: 901px) {
    /* Center the two-column block and match main content width */
    .entry-content .things-layout.wp-block-columns {
      max-width: 960px;   /* tweak 920–980 if you want */
      margin: 2rem auto 0;
    }

    /* Nudge TOC slightly left to align with text above */
    .wp-block-column.things-toc {
      margin-left: -30px; /* adjust -20 / -10 to taste */
    }

    /* Give right column a bit of breathing room */
    .things-layout.wp-block-columns > .wp-block-column:last-child {
      padding-right: 16px;
    }
  }

  /* --- Tablet & mobile: stacked, non-sticky TOC --- */
  @media (max-width: 900px) {
    /* Stack columns, let theme handle overall width */
    .things-layout.wp-block-columns {
      display: block;
      max-width: 100%;
      margin: 2rem auto 0;
    }

    /* TOC column becomes a normal block above content */
    .wp-block-column.things-toc {
      position: static;
      max-width: 100%;
      margin: 0 0 1.5rem;
    }

    .wp-block-column.things-toc .things-toc-inner {
      display: block;
      overflow: visible;
      white-space: normal;
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
    }

    .things-toc-title {
      display: block;
      margin-bottom: 0.5rem;
    }

    .things-toc-inner a {
      display: block;
      margin-right: 0;
      padding: 0.15rem 0.6rem;   /* Was 0.35rem */

    /* 2. Reduce this number to close the gap between items */
      margin-bottom: 0.1rem;     /* Was 0.25rem */
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 0.9rem;
    }

    /* Remove extra padding on right column when stacked */
    .things-layout.wp-block-columns > .wp-block-column:last-child {
      padding-right: 0;
    }
  }

  /* Smooth scroll for TOC links */
  html {
    scroll-behavior: smooth;
  }

  /* fix spacing below menu */
  /* Reduce gap on internal pages (Not Homepage) */
  body:not(.home) .entry-header,
  body:not(.home) .entry-title,
  body:not(.home) h1 {
      margin-top: 0 !important;
      padding-top: 0 !important;
  }

  /* If the gap is still too big, use this "Pull Up" rule */
  /* Adjust the -40px number until the spacing looks right to you */
  body:not(.home) #content,
  body:not(.home) .site-content,
  body:not(.home) main {
      padding-top: 0 !important;
      margin-top: -40px !important;
  }

  /* header customization */
  /* Add a thin gray border to the bottom of the header */
  /* Try this first: Targets only the main header ID */
  #masthead {
      border-bottom: 1px solid #e5e7eb;
  }

  /* Apply -70px bottom margin to header on all pages EXCEPT homepage */
  /* Apply -70px margin ONLY on Desktop and ONLY on internal pages */
  @media (min-width: 901px) {
      body:not(.home) #masthead {
          margin-bottom: -70px !important;
      }
  }


  /* Banners */
  /* 1. Hide globally first (Mobile/Tablet safety) */
  .sticky-banner {
      display: none !important;
  }

  /* 2. Desktop Logic */
  @media (min-width: 1300px) {
      .sticky-banner {
          display: block !important;
          position: fixed;
          top: 150px;
          width: 120px;
          height: 600px;
          z-index: 1000; /* High z-index to sit on top of everything */
      }

      /* THE FIX: Use 'calc' to do the math in one step */
      /* "Go to 50% of the screen, then add 530px" */
      .banner-right {
          right: auto;
          left: calc(50% + 630px) !important;
      }

      /* Optional Left Banner logic */
      .banner-left {
          left: auto;
          right: calc(50% + 630px) !important;
      }
  }


  /* ===================================================================
     PROMO PAGE BASE
     Shared styles for .benagil-promo-wrapper and .barao-promo-wrapper
     =================================================================== */

  .benagil-promo-wrapper,
  .barao-promo-wrapper {
      box-sizing: border-box;
      color: var(--aht-text);
      background: #ffffff;
      max-width: 1000px;
      margin: 40px auto;
  }

  .benagil-promo-wrapper *,
  .barao-promo-wrapper * {
      box-sizing: border-box;
  }

  /* Typography */
  .benagil-promo-wrapper h1,
  .benagil-promo-wrapper h2,
  .benagil-promo-wrapper h3,
  .benagil-promo-wrapper h4,
  .barao-promo-wrapper h1,
  .barao-promo-wrapper h2,
  .barao-promo-wrapper h3 {
      color: var(--aht-text-dark);
      margin-top: 0;
      line-height: 1.2;
  }

  .benagil-promo-wrapper h2 {
      font-size: 1.8rem;
      border-bottom: 2px solid var(--aht-yellow);
      display: inline-block;
      margin-bottom: 25px;
      padding-bottom: 5px;
  }

  .benagil-promo-wrapper p,
  .barao-promo-wrapper p {
      margin-bottom: 15px;
      line-height: 1.6;
      font-size: 1rem;
  }

  .benagil-promo-wrapper ul,
  .barao-promo-wrapper ul {
      margin-bottom: 15px;
      padding-left: 20px;
      color: var(--aht-text-muted);
  }

  .benagil-promo-wrapper li,
  .barao-promo-wrapper li {
      margin-bottom: 8px;
      font-size: 0.95rem;
      line-height: 1.5;
  }

  /* Bold labels in lists */
  .benagil-promo-wrapper li strong,
  .barao-promo-wrapper li strong {
      color: var(--aht-blue);
  }

  /* Hero */
  .benagil-hero,
  .barao-hero {
      background-size: cover;
      background-position: center;
      height: 380px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 40px;
  }

  .benagil-promo-wrapper h1.hero-title,
  .barao-promo-wrapper h1.hero-title {
      font-size: 2.5rem;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.7);
      padding: 0 20px;
      font-weight: 700;
      margin: 0;
      line-height: 1.2;
  }

  /* Hook box */
  .benagil-promo-wrapper .hook-box,
  .barao-promo-wrapper .hook-box {
      background-color: var(--aht-bg-warm);
      border-left: 5px solid var(--aht-yellow);
      padding: 25px;
      font-size: 1.05rem;
      font-style: italic;
      margin-bottom: 40px;
      border-radius: 8px;
      color: #333;
      line-height: 1.6;
  }

  /* Tables */
  .benagil-promo-wrapper table,
  .barao-promo-wrapper table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin-bottom: 50px;
      border: 1px solid var(--aht-border-light);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--aht-shadow-light);
  }

  .benagil-promo-wrapper th {
      background-color: var(--aht-blue);
      color: #fff;
      text-align: left;
      padding: 15px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
  }

  .barao-promo-wrapper th {
      background-color: #f4f4f4;
      color: inherit;
      text-align: left;
      padding: 15px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
  }

  /* Neutral table header utility (grey instead of blue) */
  table.th-neutral th {
      background-color: #f4f4f4;
      color: inherit;
  }

  .benagil-promo-wrapper td,
  .barao-promo-wrapper td {
      border-top: 1px solid var(--aht-border-light);
      padding: 15px;
      background: #fff;
      vertical-align: middle;
  }

  .benagil-promo-wrapper tr:nth-child(even) td,
  .barao-promo-wrapper tr:nth-child(even) td {
      background: #f9f9f9;
  }

  /* Tags */
  .pro-tag { color: var(--aht-green); font-weight: bold; }
  .con-tag { color: var(--aht-red); font-weight: bold; }
  .tag-fast { color: var(--aht-green); font-weight: bold; font-size: 0.85rem; background: #e8f8f5; padding: 4px 8px; border-radius: 4px; }
  .tag-hotel { color: var(--aht-blue); font-weight: bold; font-size: 0.85rem; background: #eafaff; padding: 4px 8px; border-radius: 4px; }
  .tag-terminal { background: #e0f7fa; color: #006064; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
  .tag-shuttle { background: #fff3e0; color: #e65100; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }


  /* ===================================================================
     RANKING CARDS (shared by rental page + promo pages)
     =================================================================== */

  .ranking-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
  }

  .ranking-card {
      background: #fff;
      border: 1px solid var(--aht-border);
      border-radius: 12px;
      padding: 30px;
      box-shadow: var(--aht-shadow-card);
      position: relative;
      overflow: visible;
  }

  /* The Number Badge */
  .rank-number {
      position: absolute;
      top: -20px;
      left: -20px;
      background: var(--aht-yellow);
      color: var(--aht-text-dark);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.5rem;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
      z-index: 10;
  }
  .rank-number.green-bg { background: var(--aht-green); color: #fff; }
  .rank-number.yellow-bg { background: var(--aht-orange); color: #fff; }
  .rank-number.red-bg { background: var(--aht-red); color: #fff; }

  .ranking-card h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      margin-left: 25px; /* Space for badge */
      color: var(--aht-text-dark);
  }

  /* Blue heading override for promo pages */
  .benagil-promo-wrapper .ranking-card h3,
  .barao-promo-wrapper .ranking-card h3 {
      color: var(--aht-blue);
      font-size: 1.6rem;
      margin-bottom: 20px;
      margin-left: 20px;
  }

  .card-content-wrapper p {
      margin-bottom: 15px;
      color: var(--aht-text-muted);
      line-height: 1.6;
  }

  .card-content-wrapper {
      display: flex;
      flex-direction: column;
  }


  /* ===================================================================
     RENTALS
     =================================================================== */

  /* WRAPPER */
  .rental-promo-wrapper {
      box-sizing: border-box;
      color: var(--aht-text);
      background: #ffffff;
      max-width: 1000px;
      margin: 40px auto;
  }

  .rental-promo-wrapper * { box-sizing: border-box; }

  /* HEADINGS */
  .rental-promo-wrapper h1,
  .rental-promo-wrapper h2,
  .rental-promo-wrapper h3 {
      color: var(--aht-text-dark);
      margin-top: 0;
      line-height: 1.2;
  }

  .rental-promo-wrapper h2 {
      font-size: 1.8rem;
      border-bottom: 2px solid var(--aht-yellow);
      display: inline-block;
      margin-bottom: 25px;
      padding-bottom: 5px;
  }

  /* HERO SECTION */
  .rental-hero {
      background-size: cover;
      background-position: center;
      height: 350px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 40px;
      position: relative;
  }

  .rental-hero h1.hero-title {
      font-size: 2.2rem;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8);
      padding: 0 20px;
      font-weight: 700;
      margin: 0;
      max-width: 800px;
  }

  /* HOOK BOX */
  .rental-promo-wrapper .hook-box {
      background-color: var(--aht-bg-warm);
      border-left: 5px solid var(--aht-yellow);
      padding: 25px;
      font-size: 1.05rem;
      margin-bottom: 40px;
      border-radius: 8px;
      color: #333;
      line-height: 1.6;
  }

  /* TABLE STYLES */
  .rental-promo-wrapper table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin-bottom: 50px;
      border: 1px solid var(--aht-border-light);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--aht-shadow-light);
  }

  .rental-promo-wrapper th {
      background-color: var(--aht-blue);
      color: #fff;
      text-align: left;
      padding: 15px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
  }

  .rental-promo-wrapper td {
      border-top: 1px solid var(--aht-border-light);
      padding: 15px;
      vertical-align: middle;
  }

  /* Tier Badges in Table */
  .tier-badge {
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      color: #fff;
      font-size: 0.8rem;
  }
  .tier-badge.green { background: var(--aht-green); }
  .tier-badge.yellow { background: var(--aht-orange); }
  .tier-badge.red { background: var(--aht-red); }

  /* Pros/Cons styling */
  .rental-promo-wrapper ul { padding-left: 20px; margin-bottom: 20px; }
  .rental-promo-wrapper li { margin-bottom: 8px; }

  /* Alert Box for Red Tier */
  .alert-box {
      background: #fff5f5;
      border: 1px solid #feb2b2;
      color: #c53030;
      padding: 15px;
      border-radius: 8px;
      font-size: 0.9rem;
      margin-bottom: 20px;
  }

  /* Buttons */
  .card-action-area {
      margin-top: 20px;
      text-align: center;
  }
  .widget-btn {
      display: inline-block;
      background-color: var(--aht-blue);
      color: white;
      padding: 12px 25px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: bold;
      transition: background-color 0.3s ease;
  }
  .widget-btn:hover { background-color: var(--aht-blue-hover); }

  .widget-btn-outline {
      display: inline-block;
      background-color: transparent;
      border: 2px solid var(--aht-text-muted);
      color: var(--aht-text-muted);
      padding: 10px 25px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
  }
  .widget-btn-outline:hover { background-color: var(--aht-text-muted); color: #fff; }

  /* BOTTOM CTA */
  .car-rental-cta {
      background-color: #f0f7fa;
      border: 2px dashed var(--aht-blue);
      border-radius: 12px;
      padding: 30px;
      margin-top: 60px;
      text-align: center;
  }
  .car-rental-cta h2 {
      color: var(--aht-blue);
      margin-bottom: 10px;
  }
  .car-rental-btn {
      background-color: var(--aht-yellow);
      color: #333;
      font-weight: 800;
      padding: 15px 35px;
      border-radius: 50px;
      text-decoration: none;
      display: inline-block;
      margin-top: 15px;
      transition: transform 0.2s;
      font-size: 1.1rem;
  }
  .car-rental-btn:hover { transform: scale(1.05); }


  /* ===================================================================
     PROMO PAGE-SPECIFIC CLASSES
     =================================================================== */

  /* --- Widget placeholder (family_visiting) --- */
  .widget-placeholder {
      margin-top: 25px;
      padding: 20px;
      background: #fafafa;
      border: 1px dashed #ccc;
      border-radius: 8px;
      text-align: center;
      min-height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .widget-placeholder iframe,
  .widget-placeholder > div {
      width: 100% !important;
      max-width: 100% !important;
  }

  /* --- Hotel image (road_trip_algarve_ev) --- */
  .hotel-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 15px;
  }

  /* Affiliate Button */
  .btn-action {
      display: inline-block;
      background-color: var(--aht-blue);
      color: #ffffff !important;
      text-decoration: none;
      padding: 12px 25px;
      border-radius: 30px;
      font-weight: 700;
      font-size: 1rem;
      transition: background-color 0.3s ease;
      text-align: center;
      margin-top: 15px;
      width: 100%;
      box-shadow: 0 4px 6px rgba(0,174,239, 0.2);
  }
  .btn-action:hover { background-color: var(--aht-blue-hover); }

  .btn-subtitle {
      display: block;
      text-align: center;
      font-size: 0.8rem;
      color: #777;
      margin-top: 5px;
  }

  /* Widget Box */
  .widget-box {
      background-color: #f4f4f4;
      border: 2px dashed #ccc;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      margin: 30px 0;
  }

  /* --- Feature box (classy_algarve_bachelorette) --- */
  .feature-box {
      background: rgba(239, 205, 15, 0.10);
      border: 1px solid var(--aht-border);
      border-left: 5px solid var(--aht-yellow);
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
      display: flex;
      gap: 20px;
      align-items: center;
  }
  .feature-icon {
      font-size: 2rem;
      min-width: 60px;
      text-align: center;
  }

  /* Algarve CTA button */
  .algarve-btn {
      display: inline-block;
      background-color: var(--aht-yellow);
      color: var(--aht-text-dark) !important;
      padding: 12px 24px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      transition: background 0.3s ease;
      margin-top: 10px;
      box-shadow: 0 4px 10px rgba(239,205,15,0.35);
  }
  .algarve-btn:hover { background-color: var(--aht-yellow-hover); }

  .algarve-btn.secondary {
      background-color: #fff;
      border: 2px solid var(--aht-yellow);
      color: var(--aht-text-dark) !important;
      padding: 8px 16px;
      font-size: 0.85rem;
      box-shadow: none;
  }

  /* --- Options grid (benagil guide + posts) --- */
  .benagil-options-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 6px;
      row-gap: 0;
      overflow: visible;
      align-items: start;
  }

  .option-card {
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 20px;
      padding: 20px;
      box-shadow: var(--aht-shadow-light);
      transition: transform 0.2s ease;
      overflow: visible !important;
      display: grid;
      grid-template-rows: auto 1fr auto;
  }

  .option-card:hover {
      transform: translateY(-5px);
      border-color: var(--aht-blue);
  }

  .option-card h3 {
      color: var(--aht-blue);
      font-size: 1.3rem;
      margin-bottom: 15px;
      min-height: 50px;
  }

  .card-text-content {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }

  .widget-container {
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
      overflow: visible !important;
      text-align: center;
  }

  .widget-container > div,
  .widget-container iframe {
      width: 100% !important;
      max-width: 100% !important;
      max-height: none !important;
      overflow: visible !important;
      display: block;
  }

  /* Full-width widget button in promo contexts */
  .benagil-promo-wrapper .widget-btn,
  .barao-promo-wrapper .widget-btn {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 0.9rem;
      margin-top: auto;
  }

  /* --- Tips box (posts: itineraries, albufeira, missing_piece) --- */
  .benagil-tips-box {
      background-color: #f0f7fa;
      border: 1px solid #cce4f0;
      border-radius: 12px;
      padding: 25px;
      margin-top: 50px;
      margin-bottom: 50px;
  }
  .benagil-tips-box h2 {
      font-size: 1.5rem;
      color: var(--aht-blue);
      margin-bottom: 15px;
  }
  .benagil-tips-box .tip-item {
      margin-bottom: 15px;
      padding-left: 15px;
      border-left: 3px solid var(--aht-yellow);
  }
  .benagil-tips-box strong {
      color: #333;
      display: block;
      margin-bottom: 4px;
  }

  /* --- Barao-specific grid and cards (smart_base_barao) --- */
  .barao-options-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 20px;
      row-gap: 0;
      align-items: stretch;
  }

  .barao-promo-wrapper .option-card {
      padding: 0;
      overflow: hidden;
  }

  .card-image-header {
      height: 200px;
      background-size: cover;
      background-position: center;
      width: 100%;
  }

  .card-content-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
  }

  .card-rating {
      display: inline-block;
      background: #003580;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 15px;
  }

  /* --- Ranking hub (best_rental_car_companies) --- */
  .ranking-hub-wrapper {
      box-sizing: border-box;
      color: var(--aht-text);
      background: #ffffff;
      max-width: 1000px;
      margin: 40px auto;
  }
  .ranking-hub-wrapper * { box-sizing: border-box; }

  /* Hub Hero */
  .hub-hero {
      background-size: cover;
      background-position: center;
      padding: 60px 20px 80px 20px;
      border-radius: 16px;
      text-align: center;
      color: #fff;
      margin-bottom: 40px;
      box-shadow: var(--aht-shadow-light);
  }
  .hub-hero .hero-title {
      font-size: 2.2rem;
      color: #fff;
      margin-bottom: 10px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
      line-height: 1.2;
  }
  .hub-hero .hero-subtitle {
      font-size: 1.1rem;
      opacity: 0.95;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.5;
  }

  /* Winners Grid */
  .winners-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: -60px;
      padding: 0 20px;
      margin-bottom: 50px;
      position: relative;
      z-index: 10;
  }

  .winner-card {
      background: #fff;
      border-radius: 12px;
      padding: 25px 20px;
      text-align: center;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      position: relative;
      border: 1px solid var(--aht-border-light);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease;
  }
  .winner-card:hover { transform: translateY(-5px); }

  .winner-card.best-overall { border-top: 5px solid var(--aht-blue); }
  .winner-card.best-value { border-top: 5px solid var(--aht-green); }
  .winner-card.best-family { border-top: 5px solid var(--aht-yellow); }

  .badge-label {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .best-overall .badge-label { background: var(--aht-blue); }
  .best-value .badge-label { background: var(--aht-green); }
  .best-family .badge-label { background: var(--aht-yellow); color: #333; }

  .winner-card h3 {
      margin: 15px 0 10px;
      font-size: 1.2rem;
      font-weight: 700;
      color: #333;
  }
  .winner-desc {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 20px;
      flex-grow: 1;
      line-height: 1.5;
  }

  /* Hub Buttons */
  .hub-btn {
      display: block;
      padding: 12px 15px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      font-size: 0.9rem;
      transition: background 0.2s;
      text-align: center;
  }
  .hub-btn.primary { background: var(--aht-blue); color: #fff; }
  .hub-btn.primary:hover { background: var(--aht-blue-hover); }
  .hub-btn.secondary { background: #f4f4f4; color: #333; }
  .hub-btn.secondary:hover { background: var(--aht-border); }
  .hub-btn.warning-btn {
      background: var(--aht-yellow);
      color: #333;
      width: fit-content;
      margin-top: 10px;
      padding: 10px 20px;
  }
  .hub-btn.warning-btn:hover { background: var(--aht-yellow-hover); }

  /* Content Body & Table */
  .content-body { padding: 0 10px; }

  .content-body h2 {
      font-size: 1.8rem;
      border-bottom: 2px solid var(--aht-yellow);
      display: inline-block;
      margin-bottom: 25px;
      color: var(--aht-text-dark);
      padding-bottom: 5px;
  }
  .content-body p { line-height: 1.6; margin-bottom: 20px; }

  .comparison-table-wrapper {
      overflow-x: auto;
      margin-bottom: 40px;
      border-radius: 12px;
      box-shadow: var(--aht-shadow-card);
      border: 1px solid var(--aht-border-light);
  }
  .ranking-hub-wrapper table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      min-width: 600px;
  }
  .ranking-hub-wrapper th {
      background: #f8f9fa;
      text-align: left;
      padding: 15px;
      font-size: 0.85rem;
      text-transform: uppercase;
      color: var(--aht-text-muted);
      border-bottom: 2px solid var(--aht-border-light);
      font-weight: 700;
  }
  .ranking-hub-wrapper td {
      padding: 15px;
      border-bottom: 1px solid var(--aht-border-light);
      color: var(--aht-text);
      font-size: 0.95rem;
  }

  /* Review Blocks */
  .review-block {
      background: #fff;
      border: 1px solid var(--aht-border-light);
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 30px;
  }
  .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 10px;
  }
  .review-header h3 { margin: 0; font-size: 1.4rem; color: var(--aht-text-dark); }
  .review-score {
      background: #003580;
      color: #fff;
      padding: 5px 10px;
      border-radius: 6px;
      font-weight: bold;
      font-size: 0.9rem;
  }
  .review-score.warning { background: var(--aht-red); }
  .pros-cons-list { list-style: none; padding: 0; margin: 15px 0; }
  .pros-cons-list li { margin-bottom: 10px; font-size: 0.95rem; }

  .text-link {
      color: var(--aht-blue);
      font-weight: bold;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
  }
  .text-link:hover { border-bottom-color: var(--aht-blue); }

  .warning-block {
      border: 1px solid #feb2b2;
      background: #fff5f5;
  }


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

  @media (max-width: 768px) {
      /* Rental hero */
      .rental-hero h1.hero-title { font-size: 1.6rem; }

      /* Rental table transformation to cards */
      .rental-promo-wrapper thead { display: none; }
      .rental-promo-wrapper tr {
          display: block;
          margin-bottom: 20px;
          border: 1px solid #ccc;
          border-radius: 12px;
          padding: 10px;
      }
      .rental-promo-wrapper td {
          display: block;
          text-align: right;
          padding-left: 50%;
          position: relative;
          border-bottom: 1px solid #f0f0f0;
      }
      .rental-promo-wrapper td:last-child { border-bottom: none; }
      .rental-promo-wrapper td:before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          width: 45%;
          text-align: left;
          font-weight: bold;
          color: var(--aht-blue);
          text-transform: uppercase;
          font-size: 0.75rem;
      }

      /* Ranking cards mobile */
      .ranking-card h3 { margin-left: 15px; font-size: 1.3rem; }
      .rank-number { width: 40px; height: 40px; font-size: 1.2rem; top: -15px; left: -10px; }

      /* Promo hero */
      .benagil-promo-wrapper h1.hero-title,
      .barao-promo-wrapper h1.hero-title { font-size: 1.8rem; }

      /* Promo table transformation */
      .benagil-promo-wrapper thead,
      .barao-promo-wrapper thead { display: none; }
      .benagil-promo-wrapper tr,
      .barao-promo-wrapper tr {
          display: block;
          margin-bottom: 20px;
          border: 1px solid #ccc;
          border-radius: 8px;
          overflow: hidden;
      }
      .benagil-promo-wrapper td,
      .barao-promo-wrapper td {
          display: block;
          text-align: right;
          padding-left: 50%;
          position: relative;
          border-bottom: 1px solid var(--aht-border-light);
      }
      .benagil-promo-wrapper td:last-child,
      .barao-promo-wrapper td:last-child { border-bottom: none; }
      .benagil-promo-wrapper td:before,
      .barao-promo-wrapper td:before {
          content: attr(data-label);
          position: absolute;
          left: 15px;
          width: 45%;
          text-align: left;
          font-weight: bold;
          color: var(--aht-blue);
          text-transform: uppercase;
          font-size: 0.8rem;
          top: 15px;
      }

      /* Feature box stack */
      .feature-box { flex-direction: column; text-align: center; }

      /* Algarve button full width */
      .algarve-btn { width: 100%; }

      /* Ranking hub mobile */
      .winners-grid {
          grid-template-columns: 1fr;
          margin-top: 20px;
          gap: 30px;
      }
      .hub-hero { padding-bottom: 30px; }
      .hub-hero .hero-title { font-size: 1.6rem; }
      .review-header { flex-direction: column; align-items: flex-start; gap: 10px; }
      .review-score { align-self: flex-start; }
  }

  @media (max-width: 900px) {
      /* Options grid stacking */
      .benagil-options-grid,
      .barao-options-grid {
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: 20px;
      }

      .barao-options-grid {
          row-gap: 30px;
      }

      .option-card h3 {
          min-height: auto;
      }

      .card-text-content {
          height: auto;
          min-height: auto;
      }

      /* Barao hero mobile */
      .barao-promo-wrapper h1.hero-title {
          font-size: 1.6rem;
      }
  }


  /* ===================================================================
     FIND MY BEACH PAGE
     =================================================================== */

  /* --- Global hook-box (unscoped) --- */
  .hook-box {
      background-color: var(--aht-bg-warm);
      border-left: 5px solid var(--aht-yellow);
      padding: 20px 25px;
      font-size: 1.02rem;
      margin-bottom: 30px;
      border-radius: 8px;
      color: #333;
      line-height: 1.6;
  }

  /* --- Inline TOC --- */
  .fmb-toc {
      margin-bottom: 2rem;
      padding: 1rem 1.25rem;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
  }

  .fmb-toc-title {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.75rem;
      color: #6b7280;
      margin-right: 0.75rem;
  }

  .fmb-toc-links {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.5rem;
  }

  .fmb-toc-links a {
      display: inline-block;
      padding: 0.3rem 0.75rem;
      border-radius: 999px;
      text-decoration: none;
      color: #111827;
      border: 1px solid #e5e7eb;
      font-size: 0.88rem;
      font-weight: 500;
      transition: background 0.15s, border-color 0.15s;
  }

  .fmb-toc-links a:hover {
      background: #e5f2fb;
      border-color: #0ea5e9;
  }

  @media (max-width: 640px) {
      .fmb-toc-links {
          display: flex;
          flex-direction: column;
      }
      .fmb-toc-links a {
          text-align: center;
      }
  }

  /* --- Methodology pillar cards --- */
  .fmb-pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 2.5rem;
  }

  .fmb-pillar {
      background: #fff;
      border: 1px solid var(--aht-border);
      border-radius: var(--aht-radius);
      padding: 1.25rem;
      box-shadow: var(--aht-shadow-light);
  }

  .fmb-pillar-icon {
      font-size: 1.8rem;
      display: block;
      margin-bottom: 0.5rem;
  }

  .fmb-pillar h3 {
      font-size: 1rem;
      margin: 0 0 0.4rem;
      color: var(--aht-text-dark);
  }

  .fmb-pillar p {
      font-size: 0.9rem;
      color: var(--aht-text-muted);
      line-height: 1.55;
      margin: 0;
  }

  @media (max-width: 900px) {
      .fmb-pillars { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 520px) {
      .fmb-pillars { grid-template-columns: 1fr; }
  }

  /* --- Activity cards --- */
  .fmb-activities {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 2.5rem;
  }

  .fmb-activity-card {
      background: #fff;
      border: 1px solid var(--aht-border);
      border-radius: var(--aht-radius);
      padding: 1.5rem;
      box-shadow: var(--aht-shadow-light);
      display: flex;
      flex-direction: column;
  }

  .fmb-activity-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
  }

  .fmb-activity-icon {
      font-size: 1.8rem;
      display: block;
      margin-bottom: 0.4rem;
  }

  .fmb-activity-card h3 {
      font-size: 1.15rem;
      margin: 0 0 0.5rem;
      color: var(--aht-text-dark);
  }

  .fmb-activity-card p {
      font-size: 0.93rem;
      color: var(--aht-text-muted);
      line-height: 1.6;
      margin: 0 0 1rem;
  }

  .fmb-activity-cta {
      margin-top: auto;
      display: inline-block;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--aht-blue);
      text-decoration: none;
  }

  .fmb-activity-cta:hover {
      color: var(--aht-blue-hover);
      text-decoration: underline;
  }

  @media (max-width: 640px) {
      .fmb-activities { grid-template-columns: 1fr; }
  }

  /* --- Region sections --- */
  .fmb-region {
      margin-bottom: 2.5rem;
  }

  .fmb-region-title {
      font-size: 1.5rem;
      border-bottom: 2px solid var(--aht-yellow);
      display: inline-block;
      padding-bottom: 4px;
      margin-bottom: 12px;
      color: var(--aht-text-dark);
  }

  .fmb-region-desc {
      font-size: 0.95rem;
      color: var(--aht-text-muted);
      line-height: 1.6;
      margin-bottom: 1.25rem;
  }

  /* --- Beach profile cards --- */
  .fmb-beach-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .fmb-beach {
      border-left: 3px solid var(--aht-blue);
      padding: 0.75rem 1rem 0.75rem 1.1rem;
      background: #fff;
      border-radius: 0 8px 8px 0;
      box-shadow: var(--aht-shadow-light);
  }

  .fmb-beach h4 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
      color: var(--aht-text-dark);
  }

  .fmb-beach p {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.6;
      color: var(--aht-text-muted);
  }

  /* --- Inline label badges --- */
  .fmb-label {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 700;
      white-space: nowrap;
      margin-right: 2px;
  }

  .fmb-label.--best {
      background: #e8f8f5;
      color: var(--aht-green);
  }

  .fmb-label.--heads-up {
      background: #fff3e0;
      color: #e65100;
  }

  .fmb-label.--why {
      background: #eafaff;
      color: var(--aht-blue);
  }

/* Layer cards — insurance page */
.layer-card {
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--aht-blue);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    background: #fff;
}
.layer-card .layer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.layer-card .layer-number {
    background: var(--aht-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
}
.layer-card .layer-tag {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}
.layer-card h3 { margin: 0 0 8px; }
.layer-card ul { margin: 8px 0; padding-left: 0; list-style: none; }
.layer-card ul li { padding: 4px 0; }
.layer-card p:last-child { margin-bottom: 0; }