/* ════════════════════════════════════════════════════════════════════
    AWESTRUCK — Experience Card v2
    Drop-in replacement for css/card.css
    Single HTML structure · CSS-only responsive (desktop / tablet / mobile)
    ════════════════════════════════════════════════════════════════════ */

  :root {
    --yellow: #FFD153;
    --blue: #1e3df1;
    --blue-deep: #0a26d6;
    --hot: #ff3b6e;
    --purple: #9333ea;
    --green: #2bc26a;
    --cyan: #06b6d4;
    --ink: #0a0a0a;
    --gray: #5e5e5e;
    --line: #e8e6e0;
    --display: 'Bricolage Grotesque', sans-serif;
    --sharp: 'Space Grotesk', sans-serif;
    --body: 'DM Sans', sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  /* ════════════════════ CARD SHELL ════════════════════ */
  .c {
    position: relative;
    font-family: var(--display);
    background: var(--ink);   /* changed: black so no white flash between sections */
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* visible card border (locked) */
    border: 1.5px solid rgba(0, 0, 0, 0.35);
    /* no Y movement on hover — only shadow + image zoom (locked) */
    transition: box-shadow 0.35s;
    isolation: isolate;
    contain: layout style;
    transform: translateZ(0);
    /* FIX: lets a vertical swipe on the card scroll the page instead of
       getting "caught" by the card's own tap target — main cause of the
       stuck/laggy mobile scroll */
    touch-action: pan-y;
  }

  .c {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  @media (hover: hover) and (pointer: fine) {
    .c:hover {
      box-shadow: 0 18px 36px rgba(147, 51, 234, 0.18), 0 6px 16px rgba(0, 0, 0, 0.08);
    }
  }

  /* Conic gradient halo — REMOVED */

  /* ════════════════════ IMAGE ════════════════════ */
  .c .img {
    position: relative;
    aspect-ratio: 1/1;
    /* keeps all cards identical height */
    overflow: hidden;
    background: #222;
  }

.c .img > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
  }

@media (hover: hover) and (pointer: fine) {
  .c:hover .img > a > img {
    transform: scale(1.08);
  }
}

  .c .img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
  }
  .c .img > a > img {
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ════════════════════ HOVER IMAGE PREVIEW DOTS ════════════════════
   Sits inside .meta-bottom, directly below the "ALL AVAILABLE DAYS"
   avail pill — NOT absolutely positioned anymore, just flows in the
   same flex column as .rating / .avail.
   ════════════════════════════════════════════════════════════════ */
 .c .card-img-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 6;
    margin-top: 2px;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
  }
  .c .card-img-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .c .card-img-dot.active {
    background: #fff;
    transform: scale(1.3);
  }

  /* ════════════════════ POPUP HERO — PREV/NEXT ARROWS ════════════════════
     Manual scroll controls for the #experienceModal image carousel
     (Swiper's `navigation` option in home.js already targets these
     class names — they just needed to exist in the markup + be styled).
     ════════════════════════════════════════════════════════════════ */
  .ep-hero-prev,
  .ep-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .ep-hero-prev:hover,
  .ep-hero-next:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.08);
  }
  .ep-hero-prev { left: 12px; }
  .ep-hero-next { right: 12px; }
  .ep-hero-prev.swiper-button-disabled,
  .ep-hero-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
  }
  @media (max-width: 767px) {
    .ep-hero-prev, .ep-hero-next {
      width: 30px;
      height: 30px;
      font-size: 18px;
    }
  }

  /* ════════════════════ TRENDING RIBBON ════════════════════
    CSS-only .trending ribbon removed — badge images are rendered
    via renderHighlightBadges() in home.js (highlight-badge-container)
    ════════════════════════════════════════════════════════ */
  /* ── Base badge text override for .c cards (all breakpoints) ──
   style.css sets font-size: 0.883vw (too small) and width: 6vw (truncates text)
   These overrides ensure Trending/Must-Try text is always readable in new cards ── */
/* .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
  font-size: clamp(12px, 0.95vw, 16px) !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
  white-space: nowrap !important;
}
.c .highlight-badge-container .highlight-badge-text img {
  width: clamp(13px, 1.1vw, 18px) !important;
  height: clamp(13px, 1.1vw, 18px) !important;
} */

  /* ════════════════════ LOCATION PILL ════════════════════ */
  .c .loc {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(255,255,255,0.95);
    color: black;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    font-family: var(--sharp);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  .c .loc svg {
    width: 9px;
    height: 9px;
    color: black;
  }

  /* ════════════════════ RATING + AVAILABILITY (bottom strip) ════════════════════ */
  /* Rating stacked above availability — both left-aligned, avail wraps freely */
  .c .meta-bottom {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .c .rating {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    backdrop-filter: blur(8px);
    padding: 4px 9px;
    border-radius: 999px;
    font-family: var(--sharp) !important;
    font-weight: 800;
    font-size: 11.5px;
    /* same as original — preserved */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    animation: rating-halo 3.6s ease-in-out infinite;
    animation-play-state: paused;
  }

  .c:hover .rating { animation-play-state: running; }

  @keyframes rating-halo {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(255, 209, 83, 0);
    }

    50% {
      box-shadow: 0 0 0 4px rgba(255, 209, 83, 0.18);
    }
  }

  .c .rating .s {
    color: var(--yellow);
    font-size: 10px;
    display: inline-block;
    animation: star-twinkle 2.4s ease-in-out infinite;
    animation-play-state: paused;
    transform-origin: center;
  }

  .c:hover .rating .s { animation-play-state: running; }

  @keyframes star-twinkle {

    0%,
    100% {
      transform: scale(1) rotate(0);
      filter: drop-shadow(0 0 0 rgba(255, 209, 83, 0));
    }

    50% {
      transform: scale(1.18) rotate(15deg);
      filter: drop-shadow(0 0 4px rgba(255, 209, 83, 0.6));
    }
  }

  .c .avail {
    background: rgba(0, 0, 0, 0.7);
    color: #7CEFAA;
    backdrop-filter: blur(8px);
    padding: 5px 10px 4px 8px;
    border-radius: 999px;
    font-family: var(--sharp);
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* vertical layout: take full available width, wrap text freely */
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
  }

  .c .avail::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #7CEFAA;
    border-radius: 50%;
    flex-shrink: 0;
    animation: live-blink 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px #7CEFAA;
  }

  @keyframes live-blink {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.3;
      transform: scale(0.65);
    }
  }

  /* avail-label — wraps freely, no clipping */
  .c .avail-label {
    display: block;
    white-space: normal;
    font-family: var(--sharp) !important;
  }

  /* ════════════════════ ACTION STACK — heart + share, mid-right ════════════════════ */
  /* ★ Both icons are now vertically stacked at the middle-right edge of the image */
  .c .card-actions {
    position: absolute;
    top: 38%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Heart */
  .c .heart {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s, background 0.2s;
    padding: 0;
  }

  .c .heart:hover {
    transform: scale(1.12);
    background: rgba(255, 255, 255, 0.32);
  }

  .c .heart svg {
    width: 15px;
    height: 15px;
  }

  .c .heart.on {
    background: var(--hot);
    border-color: var(--hot);
  }

  .c .heart.on svg {
    fill: #fff;
  }

  .c .heart:active {
    transform: scale(0.88);
  }

  /* Share button (conic ring + dark center) */
  .c .share-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .c .share-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    flex: none;
    background: conic-gradient(from 0deg, #ff3b6e, #FFD153, #1e3df1, #9333ea, #ff3b6e);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(56, 59, 241, 0.35);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .c .share-btn::after {
    content: '';
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 0;
  }

  .c .share-btn svg {
    width: 15px;
    height: 15px;
    position: relative;
    z-index: 1;
  }

  .c .share-btn:hover {
    transform: scale(1.12) rotate(15deg);
    box-shadow: 0 6px 18px rgba(147, 51, 234, 0.45);
  }

  /* Share menu — opens horizontally to the LEFT of the icon */
  .c .share-menu {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translate(8px, -50%) scale(0.92);
    z-index: 10;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    white-space: nowrap;
    min-width: 148px;
  }

  .c .share-wrap.open .share-menu {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    pointer-events: auto;
  }

  .c .share-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sharp);
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.15s;
  }

  .c .share-menu a:hover {
    background: #f4efe7;
  }

  .c .share-menu a svg {
    width: 14px;
    height: 14px;
  }

  .c .share-menu a.wa svg {
    color: #25D366;
  }

  .c .share-menu a.tw svg {
    color: #000;
  }

  .c .share-menu a.li svg {
    color: #0A66C2;
  }

  .c .share-menu a.fb svg {
    color: #1877F2;
  }

  /* ════════════════════ TITLE PATCH — BLACK, FIXED HEIGHT ════════════════════ */
  .c .body {
    background: #000;
    color: #fff;
    padding: 0;
    margin: 0;
    height: 62px;
    /* identical patch height for 1- and 2-line titles */
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }

  .c .title {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
    padding: 6px 14px;
    color: #fff;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s;
  }

  .c .title a {
    color: inherit;
    text-decoration: none;
  }

  .c:hover .title {
    color: var(--yellow);
  }

  /* ════════════════════ CTA BAR — 5fr / 7fr split ════════════════════ */
  /* ★ Book Now is wider; price block has tighter padding so prices read large */
  .c .cta-bar {
    display: grid;
    grid-template-columns: minmax(125px, 5fr) minmax(0, 7fr);
    background: var(--blue);
    color: #fff;
    position: relative;
    overflow: hidden;
    margin: 0;
    /* Pin a min-height so an empty .price-foot (no-discount card) doesn't collapse the bar */
    min-height: 68px;
  }

  .c .cta-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 50%, rgba(255, 209, 83, 0.2), transparent 60%);
  }

  .c .price-block {
    padding: 11px 12px 11px 16px;
    border-right: 1px dashed rgba(255, 255, 255, 0.22);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    /* .price-foot's children (.pold, .save-inline) are flex-shrink:0, so at
       narrow widths where they don't fit, they were overflowing past this
       column's own padding and visually bleeding onto the "View Details"
       button next to it instead of clipping. Only .cta-bar (the whole bar)
       had overflow:hidden, which wasn't enough — everything up to that
       outer edge stayed visible. Clipping here keeps the badge inside its
       own column, using the existing 12px right padding as the gap. */
    overflow: hidden;
  }

  .c .pnow {
    font-family: var(--display) !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    display: block;
    white-space: nowrap;
  }

  .c .price-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .c .pold {
    font-family: var(--sharp) !important;
    font-size: 10.5px;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.95;
    text-decoration: line-through;
    text-decoration-color: #ff3b6e;
    text-decoration-thickness: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
  }

  .c .save-inline {
    display: inline-block;
    background: var(--yellow);
    color: var(--ink);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--sharp) !important;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(255, 209, 83, 0.4);
    animation: save-blink 1.8s ease-in-out infinite;
    animation-play-state: paused;
  }

  .c:hover .save-inline { animation-play-state: running; }

  @keyframes save-blink {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }

  .c .book {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    background: linear-gradient(135deg, #FFD153 0%, #ffb000 100%);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    line-height: 1.05;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* ★ FIX: keep "BOOK NOW" on ONE line — never wrap */
    white-space: nowrap;
    /* anchor-as-button reset (since .book is now an <a>) */
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.15s, filter 0.2s;
  }

  .c .book::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: shine 3.6s ease-in-out infinite;
    animation-play-state: paused;
    pointer-events: none;
  }

  .c:hover .book::before { animation-play-state: running; }

  @keyframes shine {

    0%,
    75% {
      left: -100%;
    }

    100% {
      left: 200%;
    }
  }

  .c .book .a {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(.5, -0.3, .3, 1.4);
  }

  .c .book:hover {
    filter: brightness(1.08);
  }

  .c .book:hover .a {
    transform: translateX(5px);
  }

  .c .book:active {
    transform: scale(0.97);
  }

  /* Optional "popping" + confetti from your existing card.js */
  .c .book.popping {
    animation: bp 0.55s cubic-bezier(.4, 0, .2, 1);
  }

  @keyframes bp {
    0% {
      transform: scale(1);
    }

    20% {
      transform: scale(0.92);
    }

    50% {
      transform: scale(1.08);
    }

    100% {
      transform: scale(1);
    }
  }

  .c .confetti {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 12px;
    z-index: 50;
    animation: fly 0.9s cubic-bezier(.3, 0, .4, 1) forwards;
  }

  @keyframes fly {
    0% {
      transform: translate(0, 0) rotate(0);
      opacity: 1;
    }

    100% {
      transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4);
      opacity: 0;
    }
  }

  /* Locked overlay (if used) — preserved */
  .c .lock-veil {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(30, 61, 241, 0.85), rgba(10, 10, 10, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: #fff;
    opacity: 0;
  }

  .c .img.locked .lock-veil {
    display: none;
  }

  .c .lock-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c .lock-icon svg {
    width: 24px;
    height: 24px;
  }

  .c .lock-label {
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  .c .lock-sub {
    font-family: var(--sharp);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }

  /* ════════════════════ RESPONSIVE — TABLET + MOBILE ════════════════════ */
  /* Single HTML, three breakpoints */


  /* ────── 1550 + 1280 — pricing scales BEFORE the existing 1024 break ────── */
  @media (max-width: 1550px) {
    .c .pnow { font-size: 21px; }
    .c .pold { font-size: 10px; }
    .c .save-inline { font-size: 9px; padding: 2px 2px; }
    .c .book { font-size: 17px; padding: 11px 12px; }
  }

  @media (max-width: 1280px) {
    .c .pnow { font-size: 20px; }
    .c .pold { font-size: 9.5px; }
    .c .save-inline { font-size: 8.5px; padding: 1px 5px; }
    .c .cta-bar { grid-template-columns: minmax(110px, 4fr) minmax(0, 8fr); }
    .c .book { font-size: 17px; padding: 14px 30px; letter-spacing: 0.02em; gap: 6px; }
  }

  @media (max-width: 1024px) {
    .c .title {
      font-size: 16px;
    }

    .c .body {
      height: 58px;
    }

    .c .pnow {
      font-size: 22px;
    }

    .c .book {
      font-size: 17px;
      padding: 11px 14px;
    }

    .c .cta-bar {
      min-height: 64px;
    }
  }

  @media (max-width: 768px) {

    .c .heart,
    .c .share-btn {
      width: 50px;
      height: 50px;
    }

    .c .heart svg,
    .c .share-btn svg {
      width: 14px;
      height: 14px;
    }

    .c .card-actions {
      gap: 8px;
      right: 10px;
    }

    .c .loc {
      font-size: 10px;
      padding: 5px 10px 5px 8px;
    }

    .c .meta-bottom {
      bottom: 8px;
      left: 10px;
      right: 10px;
      gap: 4px;
    }

    .c .rating {
      font-size: 12px;
      padding: 4px 9px;
    }

    .c .avail {
      font-size: 10px;
      padding: 4px 10px 4px 8px;
      white-space: normal;
    }

    .c .body {
      height: 60px;
    }

    .c .title {
      font-size: 16px;
      padding: 6px 14px;
    }

    .c .price-block {
      padding: 10px 10px 10px 14px;
    }

    .c .pnow {
      font-size: 22px;
    }

    .c .pold {
      font-size: 11px;
      white-space: nowrap;
    }

    .c .save-inline {
      font-size: 9.5px;
      padding: 2px 5px;
      white-space: nowrap;
    }

    .c .book {
      font-size: 16px;
      padding: 10px 12px;
      gap: 6px;
    }

    .c .book .a {
      font-size: 20px;
    }

    .c .cta-bar {
      min-height: 62px;
    }
  }

  @media (max-width: 480px) {

    .c { border-radius: 14px; }

    .c .heart,
    .c .share-btn {
      width: 50px;
      height: 50px;
    }

    .c .card-actions {
      gap: 7px;
      right: 8px;
    }

  .c .share-menu {
      right: 42px;
      min-width: 130px;
      max-width: calc(100vw - 90px);
    }

    .c .loc {
      font-size: 10px;
    }

    .c .rating {
      font-size: 14px;
    }

    .c .avail {
      font-size: clamp(8px, 2.2vw, 10px);
      white-space: normal;
    }

    .c .body {
      height: 60px;
    }

    .c .title {
      font-size: 15px;
      padding: 6px 14px;
      line-height: 1.2;
    }

    .c .price-block {
      padding: 8px 6px 8px 12px;
      gap: 3px;
    }

    .c .pnow {
      font-size: 21px;
    }

    .c .pold {
      font-size: 10px;
      white-space: nowrap;
    }

    .c .save-inline {
      font-size: 8.5px;
      padding: 2px 5px;
      white-space: nowrap;
    }

    .c .book {
      font-size: 15px;
      padding: 10px 8px;
    }

    .c .book .a {
      font-size: 19px;
    }

    .c .cta-bar {
      grid-template-columns: minmax(130px, 5.5fr) minmax(0, 5.5fr);
      min-height: 58px;
    }
    .c .price-foot { justify-content: center;}
  }
  @media (max-width: 380px) {
  .c .title { font-size: 14px; padding: 5px 12px; }
  .c .pnow { font-size: 19px; }
  .c .pold { font-size: 10px; }
  .c .save-inline { font-size: 8.5px; padding: 2px 4px; }
  .c .book { font-size: 14px; padding: 8px 10px; }
  .c .heart, .c .share-btn { width: 42px; height: 42px; }
  .c .card-actions { right: 6px; gap: 6px; }
  .c .rating { font-size: 12px; padding: 3px 7px; }
  .c .avail { font-size: 8px; }
  .c .price-block { padding: 6px 6px 6px 10px; gap: 2px; }
}

  /* ════════════════════ CARD-ZONE LINKS ════════════════════
    Specific zones (image, loc, meta-bottom, title, price-block)
    are <a> tags so they open the modal — reset all link styling  */
  .c a.card-zone-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  /* .body is now an <a> — keep block display + same layout */
  .c a.body {
    display: flex;
    align-items: center;
  }

  /* .price-block is now an <a> — keep column flex layout */
  .c a.price-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* .loc is now an <a> — keep pill styles (already absolute-positioned) */
  .c a.loc {
    display: inline-flex;
  }

  /* .meta-bottom is now an <a> — keep flex row */
  .c a.meta-bottom {
    display: flex;
  }

  @media (prefers-reduced-motion: reduce) {

    .c,
    .c *,
    .c::before,
    .c::after,
    .c *::before,
    .c *::after {
      animation-duration: 0.01ms !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════
    OVERRIDE: style.scss adds padding:10px + border-radius:20px to
    .package-modern .package-image img on tablet/mobile — this
    creates the "card inside a card" outer shell effect.
    These rules kill it for our new .c card design.
    ════════════════════════════════════════════════════════════════ */
  .c .img img {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Also kill any package-modern wrapper padding/background that bleeds in on mobile */
  @media (max-width: 1024px) {
    .package-modern.c {
      padding: 0 !important;
      background: var(--ink) !important;
    }
  }
  @media (max-width: 768px) {
    /* Disable heavy hover animations on touch devices; keep opacity/color transitions */
    .package-modern.transition-inner-all .c::before {
      display: none !important;
    }
    .package-modern.transition-inner-all .c .rating .s,
    .package-modern.transition-inner-all .c .save-inline,
    .package-modern.transition-inner-all .c .book::before {
      animation: none !important;
    }
  }

  @media (max-width: 480px) {
      .c .pnow {
      font-size: clamp(16px, 4.5vw, 22px) !important;
    }
  .c .pold {
    font-size: clamp(12px, 3.5vw, 16px) !important;
  }
  .c .title {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }

    .c .book {
      font-size: clamp(12px, 3.5vw, 16px) !important;
    }
      #show-chat-exps .c .pnow{
    text-align:center !important;
  }
  }

  @media (min-width: 481px) and (max-width: 1024px) {
    .c .img {
      aspect-ratio: 4/3;
    }

    .c .body {
      height: 54px;
    }

    .c .title {
      font-size: 20px !important;
      padding: 5px 12px;
    }

    .c .pnow {
      font-size: 20px !important;
    }

    .c .pold {
      font-size: 14px !important;
    }

    .c .save-inline {
      font-size: 9px !important;
    }

    .c .book {
      font-size: 20px !important;
      padding: 10px 10px;
    }

    .c .cta-bar {
      min-height: 56px;
    }
    .c .price-foot{
      justify-content: center;
    }
    .c .avail-label {
      font-size: 14px !important;
    }
    .c a.loc {
      font-size: 14px !important;
    }
    .c .rating{
      font-size: 13px !important;
    }
  }

@media (max-width: 768px) {
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container:not(:has(.green-badge)) {
    top: -18px !important;
    left: -18px !important;
  }

  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img:first-child {
    width: clamp(132px, 38vw, 156px) !important;
    height: clamp(124px, 35vw, 146px) !important;
  }

  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: clamp(13px, 3.8vw, 16px) !important;
  }

  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img {
    width: clamp(18px, 5vw, 19px) !important;
    height: clamp(18px, 5vw, 22px) !important;
  }

  .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 90px !important;
    height: auto !important;
  }
    .c .highlight-badge-container:has(.green-badge) span.rotate-0 {
    font-size: 12px !important;
  }
    .c .highlight-badge-container:has(.green-badge) .highlight-badge-text img {
    width: 12px !important;
    height: 12px !important;
  }

}
@media (min-width: 769px) and (max-width: 1024px) {
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container:not(:has(.green-badge)) {
    top: -14px !important;
    left: -14px !important;
  }

  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img:first-child {
    width: 23vw !important;
    height: 20vw !important;
  }



  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: clamp(15px, 2vw, 19px) !important;
  }

  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img {
    width: clamp(20px, 2.6vw, 26px) !important;
    height: clamp(20px, 2.6vw, 26px) !important;
  }

  .c .highlight-badge-container:not(:has(.green-badge)) {
    top: -4px;
    left: -3px;
  }

  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 20.103vw !important;
    height: 17.025vw !important;
    margin-left: -3px !important;
  }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text{
    margin-top: 0px !important;
  }
  .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1){
    margin-left: 0px !important;
  }
      .c .heart,
    .c .share-btn {
      width: 50px;
      height: 50px;
    }
}

@media (min-width: 769px) {
  .bot-cards .c .card-actions{
    top: 45%;
  }
}


@media (min-width: 769px) and (max-width: 1024px) {

  /* Fix Book Now being cut */
  .bot-cards .c .book {
    font-size: 12px;
    padding: 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fix cta-bar ratio — give price more room */
  .bot-cards .c .cta-bar {
    grid-template-columns: minmax(120px, 5.5fr) minmax(80px, 4.5fr);
  }

  /* Fix first card height inconsistency — align all cards to top */
  .bot-cards .blog-grid {
    align-items: start;
  }

  .bot-cards .blog-grid .col-lg-4 {
    display: flex;
    flex-direction: column;
  }
    .bot-cards .c .img {
    aspect-ratio: 4/5;   /* taller image */
  }

  .bot-cards .c {
    height: 100%;
  }
  #show-chat-exps.new-design-exp .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img{
    height: 14px !important;
    width: 14px !important;
  }
  #show-chat-exps.new-design-exp .highlight-badge-container:has(.green-badge) .highlight-badge-text img{
    height: 14px !important;
    width: 14px !important;
  }
  #show-chat-exps.new-design-exp .highlight-badge-container:has(.green-badge) span{
    font-size: 2vw !important;
    margin-top: 5px;
  }
  .bot-cards .c .pnow{
    font-size: 20px !important;
    text-align:center !important;
  }
  #show-chat-exps .c .pnow{
    text-align:center !important;
  }
}

.bot-cards .c a.card-zone-link{
  color:#000 !important;
}
#show-chat-exps .c .book {
    color: #000 !important;
  }
.c a.loc{
  color:black !important;
}
.c .heart {
  display: none !important;
}

#my-chat .bot-cards .c .card-actions {
  top: 45%;
}

#my-chat .bot-cards .c .share-wrap {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

#my-chat .bot-cards .c .share-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  max-width: 42px;
  flex: 0 0 42px;
}

#my-chat .bot-cards .c .share-btn::after {
  inset: 2px;
}

#my-chat .bot-cards .c .share-btn svg {
  width: 13px;
  height: 13px;
}

#my-chat .bot-cards .c .share-menu {
  right: 38px;
  min-width: 136px;
}

#my-chat .bot-cards .c .share-menu a {
  font-size: 11px;
}

#my-chat .bot-cards .c .loc {
  font-size: 9px;
  padding: 4px 8px 4px 7px;
}

#my-chat .bot-cards .c .meta-bottom {
  gap: 4px;
}

#my-chat .bot-cards .c .rating {
  font-size: 10px;
  padding: 3px 8px;
}

#my-chat .bot-cards .c .rating .s {
  font-size: 9px;
}

#my-chat .bot-cards .c .avail {
  font-size: 8px;
  padding: 4px 8px 3px 7px;
  gap: 4px;
}

#my-chat .bot-cards .c .cta-bar {
  grid-template-columns: minmax(104px, 4.4fr) minmax(0, 7.6fr);
  min-height: 60px;
}

#my-chat .bot-cards .c .price-block {
  padding: 8px 8px 8px 10px;
}

#my-chat .bot-cards .c .pnow {
  font-size: 18px;
}

#my-chat .bot-cards .c .price-foot {
  gap: 4px;
  margin-top: 4px;
}

#my-chat .bot-cards .c .pold {
  font-size: 9px;
}

#my-chat .bot-cards .c .save-inline {
  font-size: 8px;
  padding: 2px 5px;
}

#my-chat .bot-cards .c .book {
  font-size: 12px;
  padding: 8px 8px;
  gap: 4px;
}

#my-chat .bot-cards .c .book .a {
  font-size: 15px;
}

#my-chat .bot-cards .c .title {
  font-size: 15px;
  padding: 6px 10px;
}

@media (max-width: 480px) {
  #my-chat .bot-cards .c .body {
    height: 68px !important;
  }
  #my-chat .bot-cards .c .title {
    font-size: 17.5px !important;
    line-height: 1.2 !important;
    padding: 6px 10px !important;
  }
}
/* The general (min-width:481px)/(max-width:1024px) rules for .pold and
   .save-inline use !important and were overriding the smaller #my-chat
   sizes above at this exact width — that's what blew up the old-price
   and SAVE badge and made them overlap in the narrow chat card. Re-assert
   the compact chat sizing here (also !important) so it actually wins,
   and let price-foot wrap as a safety net so it can never overlap again. */
@media (min-width: 481px) and (max-width: 1024px) {
  #my-chat .bot-cards .c .price-foot {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  #my-chat .bot-cards .c .pold {
    font-size: 9px !important;
  }

  #my-chat .bot-cards .c .save-inline {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }

  #my-chat .bot-cards .c .pnow {
    font-size: 18px !important;
  }
}

@media (min-width: 1000px) and (max-width: 1030px) {
  #experiences.new-design-exp {
    --bs-columns: 2 !important;
  }

  #experiences.new-design-exp > .col {
    flex: 0 0 calc(100% / 2) !important;
    max-width: calc(100% / 2) !important;
    width: calc(100% / 2) !important;
  }
}

/* Hide trust strip on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  #experienceModal .aw-section--contact.reach-section .trust-strip--sidebar {
    display: none !important;
  }
}


/* ================== */


/* ======== large screen */
@media (min-width: 1000px) and (max-width: 1024px) {
        .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text
      {
          white-space: nowrap;
          /* margin-top: 5px; */
          margin-left: 23px !important;
          font-size: 10px;
      }
        body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
      font-size: clamp(15px, 2vw, 9.5px) !important;
    }
    .c .pold {
        font-size: 12px !important;
    }
        .c .save-inline {
        font-size: 10px !important;
        margin-right: 5px;
    }
        body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img {
        width: clamp(18px, 2.6vw, 22px) !important;
        height: clamp(18px, 2.6vw, 22px) !important;
    }
}


@media (min-width: 1024px) {

}

/* laptop (1024-1440 sab cover) */
@media (min-width: 1025px) and (max-width: 1440px) {
    /* .c .pold {
        font-size: 12px;
    } */
    .price-block{
      padding: 10px;
    }
}

/* desktop */
@media (min-width: 1441px) and (max-width: 1920px) {
.c .pold {
        font-size: 13.5px;
    }
 }


@media (min-width: 1921px){


}

/* NAYA — YE DAALNA HAI */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Unified position — style.css mein margin-left:8px badge shift karta tha */
  .c .highlight-badge-container:not(:has(.green-badge)),
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container:not(:has(.green-badge)) {
    top: -10px !important;
    left: -10px !important;
  }

  /* Badge image size — style.css ka 18.103vw/19.025vw override.
     Cards 2-column hain at 1024px, each ~480px wide.
     clamp(120px, 13.5vw, 145px) at 1024px = 138px — proportional */
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img:first-child,
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: clamp(120px, 13.5vw, 145px) !important;
    height: clamp(108px, 12vw, 130px) !important;
    margin-left: 0px !important;
  }

  /* Badge text: fix width truncation + centering */
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: clamp(11px, 1.3vw, 13px) !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
    margin-top: 0px !important;
    white-space: nowrap !important;
    margin-left: 0px !important;
    left: 1% !important;
  }

  /* Fire icon inside text */
  body:not(.listing-page) #experiences.new-design-exp .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img,
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text img {
    width: clamp(14px, 1.6vw, 17px) !important;
    height: clamp(14px, 1.6vw, 17px) !important;
  }

  /* Green badge margin reset */
  .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    margin-left: 0px !important;
  }

  .c .heart,
  .c .share-btn {
    width: 50px;
    height: 50px;
  }
}

/* YE REMOVE KARNA HAI — file ke bilkul end mein hai */
@media (min-width: 769px) and (max-width: 1024px) {
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    white-space: nowrap;
    margin-left: 20px !important;   /* <-- YAHI tha root cause */
    font-size: 10px;
    left: 5% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SIMILAR + DISCOVER MORE SECTION — Badge fix
   769px to 1024px — higher specificity selectors to override
   style.css 18.103vw rule on these specific containers
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Yellow badge (Trending / Luxury) image — all 4 containers */
  #similar-experiences-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img,
  #discover-more-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img,
  #popup-similar-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img,
  #popup-discover-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img,
  #popup-similar-container .highlight-badge-container .highlight-badge-img:not(.green-badge) > img,
  #popup-discover-more-container .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 100px !important;
    height: 90px !important;
    margin-left: 0px !important;
  }

  /* Yellow badge text */
  #similar-experiences-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  #discover-more-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  #popup-similar-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  #popup-discover-container .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  #popup-similar-container .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text,
  #popup-discover-more-container .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: 11px !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
    white-space: nowrap !important;
    margin-left: 0px !important;
  }

  /* Fire icon */
  #similar-experiences-container .c .highlight-badge-container .highlight-badge-text img,
  #discover-more-container .c .highlight-badge-container .highlight-badge-text img,
  #popup-similar-container .c .highlight-badge-container .highlight-badge-text img,
  #popup-discover-container .c .highlight-badge-container .highlight-badge-text img,
  #popup-similar-container .highlight-badge-container .highlight-badge-text img,
  #popup-discover-more-container .highlight-badge-container .highlight-badge-text img {
    width: 11px !important;
    height: 11px !important;
  }

  /* Badge container position */
  #similar-experiences-container .c .highlight-badge-container,
  #discover-more-container .c .highlight-badge-container,
  #popup-similar-container .c .highlight-badge-container,
  #popup-discover-container .c .highlight-badge-container,
  #popup-similar-container .highlight-badge-container,
  #popup-discover-more-container .highlight-badge-container {
    top: -8px !important;
    left: -4px !important;
  }

  /* Green badge (Must Have / Must Try) */
  #similar-experiences-container .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1),
  #discover-more-container .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1),
  #popup-similar-container .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1),
  #popup-discover-container .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1),
  #popup-similar-container .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1),
  #popup-discover-more-container .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 80px !important;
    height: auto !important;
    margin-left: 0px !important;
  }

}

/* ══ LARGE SCREEN SCALING — card.css ══ */

@media (min-width: 1440px) {
  .c .title { font-size: 20px; }
  .c .pnow { font-size: 26px; }
  .c .pold { font-size: 13px; }
  .c .save-inline { font-size: 10px; }
  .c .book { font-size: 20px; }
  .c .loc { font-size: 12px; padding: 6px 12px 6px 10px; }
  .c .rating { font-size: 13px; }
  .c .avail { font-size: 11px; }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 150px !important; height: 134px !important;
  }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: 14px !important; width: fit-content !important;
  }
  .c .highlight-badge-container .highlight-badge-text img { width: 15px !important; height: 15px !important; }
  .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 110px !important; height: auto !important;
  }
  .c .highlight-badge-container:has(.green-badge) span.rotate-0 { font-size: 12px !important; }
  .highlight-badge-container span {
    position: absolute;
    top: 43%;
  }

}

/* @media (min-width: 1920px) {
  .c .title { font-size: 24px; }
  .c .pnow { font-size: 30px; }
  .c .pold { font-size: 15px; }
  .c .save-inline { font-size: 13px; padding: 3px 8px; }
  .c .book { font-size: 22px; }
  .c .loc { font-size: 14px; padding: 7px 14px 7px 11px; }
  .c .rating { font-size: 15px; padding: 6px 14px; }
  .c .avail { font-size: 12px; }
  .c .body { height: 72px; }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 170px !important; height: 152px !important;
  }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: 16px !important; width: fit-content !important;
  }
  .c .highlight-badge-container .highlight-badge-text img { width: 17px !important; height: 17px !important; }
  .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 125px !important; height: auto !important;
  }
  .c .highlight-badge-container:has(.green-badge) span.rotate-0 { font-size: 13px !important; }
}

@media (min-width: 2560px) {
  .c .title { font-size: 30px; line-height: 1.2; }
  .c .body { height: 88px; }
  .c .pnow { font-size: 38px; }
  .c .pold { font-size: 18px; }
  .c .save-inline { font-size: 15px; padding: 4px 10px; }
  .c .book { font-size: 28px; padding: 18px 20px; }
  .c .cta-bar { min-height: 90px; }
  .c .loc { font-size: 17px; padding: 9px 18px 9px 14px; }
  .c .rating { font-size: 18px; padding: 7px 16px; }
  .c .avail { font-size: 15px; }
  .c .heart, .c .share-btn { width: 70px; height: 70px; }
  .c .heart svg, .c .share-btn svg { width: 22px; height: 22px; }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 220px !important; height: 196px !important;
  }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: 20px !important; width: fit-content !important;
  }
  .c .highlight-badge-container .highlight-badge-text img { width: 22px !important; height: 22px !important; }
  .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 160px !important; height: auto !important;
  }
  .c .highlight-badge-container:has(.green-badge) span.rotate-0 { font-size: 16px !important; }
}

@media (min-width: 3840px) {
  .c .title { font-size: 42px; line-height: 1.2; }
  .c .body { height: 120px; }
  .c .pnow { font-size: 52px; }
  .c .pold { font-size: 24px; }
  .c .save-inline { font-size: 20px; padding: 5px 14px; }
  .c .book { font-size: 38px; padding: 24px 28px; }
  .c .cta-bar { min-height: 120px; }
  .c .loc { font-size: 22px; padding: 12px 24px 12px 18px; }
  .c .rating { font-size: 24px; padding: 10px 20px; }
  .c .avail { font-size: 20px; }
  .c .heart, .c .share-btn { width: 90px; height: 90px; }
  .c .heart svg, .c .share-btn svg { width: 30px; height: 30px; }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) > img {
    width: 300px !important; height: 268px !important;
  }
  .c .highlight-badge-container .highlight-badge-img:not(.green-badge) .highlight-badge-text {
    font-size: 28px !important; width: fit-content !important;
  }
  .c .highlight-badge-container .highlight-badge-text img { width: 30px !important; height: 30px !important; }
  .c .highlight-badge-container:has(.green-badge) .highlight-badge-img > img:nth-child(1) {
    width: 220px !important; height: auto !important;
  }
  .c .highlight-badge-container:has(.green-badge) span.rotate-0 { font-size: 22px !important; }
} */

@media (min-width: 2560px) {
        .c .pnow {
        font-size: 35px;
    }
    .c .pold {
        font-size: 20px;
    }
        .c .save-inline {
        font-size: 15px;
    }
    .c .loc{
      font-size: 14px;
    }
}

@media (min-width: 3200px) {
        .c .pnow {
        /* font-size: 38px; */
    }
    .c .pold {
        font-size: 23px;
    }
        .c .save-inline {
        font-size: 18px;
    }
    .c .loc{
      font-size: 16px;
    }
    .new-design-exp span{
      font-size: 15px;
    }
    .c .title{
      font-size: 28px !important;
    }
    .c .book{
      font-size: 23px;
      /* z-index: 0; */
    }
    .new-design-exp span {
      font-size: 18px;
    }

}

/* ══════════════════════════════════════════════════════════════
   MOBILE SCROLL-PERFORMANCE FIX
   .loc / .rating / .avail / .heart all use backdrop-filter blur,
   and every one of them repeats on EVERY card in the grid. Repainting
   that many blurred layers on every scroll frame is what was making
   mobile scrolling feel stuck/laggy. Dropping the blur only on mobile
   (backgrounds are already dark/opaque enough to stay readable).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .c .loc,
  .c .rating,
  .c .avail,
  .c .heart {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* smaller footprint on phones */
  .c { border-radius: 12px; }
  .c .heart, .c .share-btn { width: 42px; height: 42px; }
  .c .heart svg, .c .share-btn svg { width: 13px; height: 13px; }
  .c .loc { font-size: 9px; padding: 4px 8px 4px 7px; }
  .c .rating { font-size: 11px; padding: 3px 8px; }
  .c .avail { font-size: 9px; padding: 3px 8px 3px 7px; }
  .c .title { font-size: 14px; padding: 5px 12px; }
  .c .pnow { font-size: 19px; }
  .c .book { font-size: 14px; padding: 8px 10px; }
}

#experiences.new-design-exp.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#experiences.new-design-exp > .col {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

@media (min-width: 1440px) {
  #my-chat .bot-cards .c .avail,
  #my-chat .bot-cards .c .avail-label {
    font-size: 9px !important;
  }
}