/* ===========================================================================
   Civil Judges Club — booking supplement.

   The public site is styled entirely by the club's own stylesheets under
   /club/css (main-new-ar.css / main-new-en.css and friends). This file adds
   ONLY the pieces the booking system needs that those stylesheets do not
   define: the availability calendar, the wizard step bar, inline notices and
   status pills. It borrows the club's own palette so it reads as one system.

   Palette taken from the club's stylesheets:
     #22413f  teal      (.services-select background, .room-list-card__label)
     #a08654  gold      (.room-list-card__price)
     #7D8B90  gray text (.room-list-card__text)
     #FAF6F0  soft band (.room-list-card__meta)
   =========================================================================== */

:root {
    --jc-teal: #22413f;
    --jc-teal-dark: #0b1c1b;
    --jc-deep: #044040;
    --jc-gold: #a08654;
    --jc-gold-dark: #8a7146;
    --jc-gray: #7d8b90;
    --jc-ink: #333333;
    --jc-white: #ffffff;
    --jc-band: #faf6f0;
    --jc-line: #e4e7e6;
    --jc-radius: 10px;
    --jc-shadow: 0 10px 40px rgba(0, 0, 0, .1);
    --jc-shadow-lg: 0 16px 48px rgba(0, 0, 0, .16);
}

/* NOTE — do not add `overflow-x: hidden` to <html> or <body> here.
   Doing so turns that element into the scroll container, which leaves
   document.documentElement.scrollTop pinned at 0. That silently breaks
   window.scrollTo, `$(document).scrollTop()` — so the club's sticky header
   never receives its `.scrolled` class — and the hero's scroll-down anchor.
   Anything that overflows sideways is clipped at the element that owns it
   (see `.jc-authored .jdc-table-wrap` below). */

/* ------------------------------------------------- small structural helpers
   The club's stylesheets give us .title / .title-o / .gray-box / .btn-header /
   .room-list-card / .box-category. These few rules are the glue around them. */

/* panel heading inside .gray-box / .services-select */
.jc-panel-head { border-bottom: 1px solid var(--jc-line); padding-bottom: 14px; margin-bottom: 20px; }
.jc-panel-head h3 { color: #383838; font-size: 25px; font-weight: 700; margin: 0; }
.jc-panel-head p { margin: 6px 0 0; font-size: 14px; color: var(--jc-gray); }
/* Link to the full booking rules (the /terms page), sitting under the window notice on step 1. */
.jc-rules-link { display: flex; align-items: baseline; gap: 6px; }
.jc-rules-link i { color: var(--jc-gold); }
.jc-rules-link a { color: var(--jc-teal); font-weight: 700; text-decoration: underline; }
.jc-rules-link a:hover, .jc-rules-link a:focus { color: var(--jc-gold); }
/* on the teal aside panel the heading has to read light */
.services-select .jc-panel-head { border-bottom-color: rgba(255, 255, 255, .25); }
.services-select .jc-panel-head h3,
.services-select .jc-panel-head p { color: #fff; }

/* facility-type tile: the club's .box-category sets the frame, this fills it */
.jc-tile { text-align: center; background: var(--jc-white); border: 1px solid var(--jc-line); height: auto; padding: 30px 16px; }
.jc-tile i { font-size: 32px; color: var(--jc-gold); display: block; margin-bottom: 14px; }
.jc-tile h4 { font-size: 17px; color: var(--jc-teal); margin: 0 0 6px; font-weight: 700; }
.jc-tile p { font-size: 14px; color: var(--jc-gray); margin: 0; }
.jc-tile a { color: inherit; text-decoration: none; }

/* full-width button (the club's .btn-header is inline-block by default) */
.jc-btn-block { display: block; width: 100%; }

/* The club's .btn-blue fills teal (#22413f) but carries a leftover purple border
   (#393b92) from an earlier revision of their stylesheet, which shows as a stray
   outline. Corrected here rather than by editing their CSS. */
.btn-blue { border-color: #22413f; }
.btn-blue:hover, .btn-blue:focus { background-color: #044040; border-color: #044040; color: #fff; }
/* the teal aside panel needs a light button on top of it */
.services-select .btn-header.btn-blue { background-color: #fff; border-color: #fff; color: #22413f; }

/* wide content scrolls inside itself, never the page */
.jc-scroll-x { overflow-x: auto; }

/* The club's .pic-welcome / .pic-welcome2 news tiles are sized as the column's own
   child (width:100%; height:415px), so they must not be wrapped in an anchor.
   This makes the whole tile clickable instead, without changing its box. */
.jc-cover-link { position: absolute; inset: 0; z-index: 2; }

/* The club's .news card leaves its image to `.img-responsive` (max-width:100%). That
   works on their page only because their own news.png happens to be 410x374 — wider
   than the column, so it scales down and fills it at a 0.91 ratio. Article images are
   any shape (the club's own are 295x434 portraits), which would render narrow and very
   tall. Pinning the image box to news.png's aspect and cropping reproduces exactly the
   proportion their card renders at, at every screen width. */
.news img {
    width: 100%;
    aspect-ratio: 410 / 374;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------------------- notices */

.jc-note {
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 22px;
    border: 1px solid transparent;
}
.jc-note i { margin-inline-end: 6px; }
.jc-note--info { background: #eef5f4; border-color: #cfe0dd; color: #1f4744; }
.jc-note--ok { background: #e9f7ef; border-color: #bfe4cf; color: #17603c; }
.jc-note--warn { background: #fdf6e3; border-color: #f0e0b3; color: #7a5b0d; }
.jc-note--error { background: #fdecec; border-color: #f3c9c9; color: #8f2020; }

/* ---------------------------------------------------------------- statuses */

.jc-status {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}
.jc-status--pending { background: #fdf6e3; color: #7a5b0d; }
.jc-status--confirmed { background: #e9f7ef; color: #17603c; }
.jc-status--cancelled { background: #eef0f1; color: #4a5457; }
.jc-status--rejected { background: #fdecec; color: #8f2020; }
.jc-status--completed { background: #eaf1fb; color: #1c4a86; }

/* ---------------------------------------------------------------- step bar */

.jc-steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
}
.jc-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--jc-gray);
    background: var(--jc-band);
    border: 1px solid var(--jc-line);
    padding: 9px 18px;
    border-radius: 100px;
}
.jc-steps li .n {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background: #fff;
    color: var(--jc-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid var(--jc-line);
}
.jc-steps li.is-active { color: #fff; background: var(--jc-teal); border-color: var(--jc-teal); }
.jc-steps li.is-active .n { background: var(--jc-gold); color: #fff; border-color: var(--jc-gold); }
.jc-steps li.is-done { color: var(--jc-teal); background: #fff; border-color: var(--jc-teal); }
.jc-steps li.is-done .n { background: var(--jc-teal); color: #fff; border-color: var(--jc-teal); }

/* -------------------------------------------------------------- calendar */

.jc-cal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.jc-cal__bar h4 { margin: 0; font-size: 18px; font-weight: 600; color: var(--jc-teal); }
.jc-cal__nav {
    border: 1px solid var(--jc-line);
    background: #fff;
    color: var(--jc-teal);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
}
.jc-cal__nav:hover { background: var(--jc-teal); color: #fff; }

.jc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jc-cal__dow {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--jc-gray);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 4px;
}
.jc-cal__day {
    border-radius: 6px;
    min-height: 64px;
    padding: 7px 6px;
    font-size: 14px;
    border: 1px solid transparent;
    position: relative;
}
.jc-cal__day .d { font-weight: 700; }
.jc-cal__day .s { font-size: 10.5px; line-height: 1.3; margin-top: 3px; opacity: .9; }
.jc-cal__day .wk { position: absolute; top: 6px; inset-inline-end: 7px; font-size: 8px; opacity: .6; }
.jc-cal__day.is-available { background: #e7f7ef; color: #128a52; border-color: #bfe4cf; }
.jc-cal__day.is-pending { background: #fff5e0; color: #a2700a; border-color: #f0e0b3; }
.jc-cal__day.is-booked { background: #fde8e8; color: #b02a2a; border-color: #f3c9c9; }
.jc-cal__day.is-closed { background: #e6e8ea; color: #41494f; border-color: #d5d9db; }
.jc-cal__day.is-outofwindow { background: #f6f7f8; color: #9aa3a8; border-color: #eceef0; }
.jc-cal__day.is-empty { background: transparent; border: none; min-height: 0; }

.jc-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 13px;
    color: #46565a;
}
.jc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.jc-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------ price table */

.jc-summary { width: 100%; border-collapse: collapse; font-size: 15px; }
.jc-summary th,
.jc-summary td { padding: 10px 4px; border-bottom: 1px solid var(--jc-line); text-align: start; }
.jc-summary th { color: var(--jc-gray); font-weight: 600; }
.jc-summary td.num { text-align: end; }
.jc-summary tr.total th,
.jc-summary tr.total td {
    border-top: 2px solid var(--jc-teal);
    border-bottom: none;
    font-weight: 700;
    font-size: 18px;
    color: var(--jc-teal);
    padding-top: 14px;
}

/* --------------------------------------------------------- fact chips */

.jc-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: var(--jc-band);
    border: 1px solid var(--jc-line);
    color: #46565a;
    padding: 5px 12px;
    border-radius: 100px;
}
.jc-fact i { color: var(--jc-gold); }

/* ------------------------------------------------------------ gallery */

.jc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.jc-gallery a {
    display: block;
    height: 180px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--jc-band) center / cover no-repeat;
    border: 1px solid var(--jc-line);
}
.jc-gallery a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }

.jc-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.jc-video {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--jc-line);
    background: #000;
    aspect-ratio: 16 / 9;
}
.jc-video iframe,
.jc-video video { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------- empty state */

.jc-empty {
    text-align: center;
    padding: 52px 20px;
    color: var(--jc-gray);
    background: var(--jc-band);
    border: 1px dashed var(--jc-line);
    border-radius: 6px;
}
.jc-empty i { font-size: 34px; display: block; margin-bottom: 12px; opacity: .55; }

/* ---------------------------------------------- authored CMS content */

/* The About / Contact bodies are authored in the editor and ship their own
   scoped CSS (#jdcAboutPage, .jdc2026-*). Render them as-is; these rules only
   keep them inside the layout. */
.jc-authored { max-width: 100%; }
.jc-authored img,
.jc-authored iframe,
.jc-authored video { max-width: 100%; height: auto; }
.jc-authored .jdc-table-wrap,
.jc-authored .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.jc-authored table:not(.jdc-table) { max-width: 100%; }

/* Tariff tables on the terms/rules page (Appendix 1 accommodation fees). Teal header, zebra rows,
   and a scroll wrapper so a wide table never breaks the page on a phone. */
.jc-authored .jc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 6px; }
.jc-authored h2.jc-tariff-heading { color: var(--jc-teal); font-size: 24px; font-weight: 800; margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--jc-gold); }
table.jc-tariff { width: 100%; border-collapse: collapse; background: #fff; font-size: 15.5px; }
table.jc-tariff thead th { background: var(--jc-teal); color: #fff; font-weight: 700; }
table.jc-tariff th, table.jc-tariff td { border: 1px solid var(--jc-line, #e4e4e4); padding: 10px 14px; text-align: start; }
table.jc-tariff tbody tr:nth-child(even) { background: var(--jc-mint, #cee4da); }
/* the price cells (every column after the first) read better centred */
table.jc-tariff td:not(:first-child), table.jc-tariff th:not(:first-child) { text-align: center; font-weight: 600; }

/* --------------------------------------------------------------- forms */

/* The club's stylesheets style .form-control; these are the labels and
   helper text around them. */
.jc-field { margin-bottom: 20px; }
.jc-field > label { display: block; font-size: 14px; font-weight: 600; color: var(--jc-teal); margin-bottom: 6px; }
.jc-field .req { color: #c0392b; }
.jc-field .hint { font-size: 13px; color: var(--jc-gray); margin-top: 5px; }
.jc-check { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; }
.jc-check input { margin-top: 4px; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 767px) {
    .jc-cal__day { min-height: 52px; font-size: 12.5px; }
    .jc-cal__day .s { display: none; }
    .jc-steps li { padding: 7px 13px; font-size: 12.5px; }
    .jc-summary { font-size: 14px; }
}

/* ---------------------------------------- locations grid, English caption */

/* `set1-ar.css` sizes the marley caption at 125px in 'Urdu Typesetting'. That
   is tuned for the Arabic city names ("عمّان" / "العقبة"), which fit the 345px
   card; the club's own set1.css — the never-wired English variant — drops the
   same heading to 18px instead. The existing site loads set1-ar.css on both
   masters, so "Amman" needs 517px in that box and gets cut off mid-word. Keep
   the display scale, but shrink it on the LTR side just far enough to fit. */
html[dir="ltr"] figure.effect-marley h2 { font-size: 80px; }

/* ------------------------------------------- location page, view-mode toolbar */

/* Area.aspx carries these three rules in an inline <style> block rather than in
   any stylesheet, so the greys and spacing are reproduced here to keep the toolbar
   identical without touching the old files. The legacy icon colour was a stray
   cyan (#2d9fc4) that matched nothing in the club palette, so the toggle is brought
   into brand teal/gold instead, and its active state — which the old page set as a
   class but never styled — is now a filled teal so the current view is obvious. */
.bg-filter {
    border-color: #f4f4f4;
    background-color: #f4f4f4;
    padding: 10px 20px;
}
.sort {
    display: inline-block;
}
.sort a {
    border: 1px #c8c8c8 solid;
    color: var(--jc-gray);
    padding: 5px 8px;
    margin-right: 15px;
    display: inline-block;
    font-size: 18px;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.sort a:hover,
.sort a:focus { color: var(--jc-teal); border-color: var(--jc-teal); }
.sort a.active-sort {
    color: #fff;
    background-color: var(--jc-teal);
    border-color: var(--jc-teal);
}

/* The grid/list flip hides cards with the `hidden` attribute. Bootstrap 3's
   `.col-*` rules do not declare `display`, so the UA sheet's `[hidden]` wins on
   its own — but state it outright so a future `display` rule cannot un-hide a
   card that is meant to be out of the current view. */
[data-jc-views] [hidden] { display: none !important; }

/* -------------------------------------- suite page, the gold booking box */

/* Chalet.aspx carries this rule in an inline <style> — a struck-through, greyed
   day for a night that cannot be requested — so it is reproduced verbatim. The
   old page never actually filled the array behind it; jc-suite-booking.js does. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    cursor: not-allowed;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    border-radius: 100% !important;
    position: relative !important;
    font-size: 0.875rem !important;
    line-height: 1.125rem !important;
    border: 1.5px solid #fff !important;
    color: #b0b0b0 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* The panel is gold and its labels are white, so the error lines need to read as
   warnings against it rather than as more body copy. */
.bg-navy .jc-range-error,
.bg-navy .jc-pax-error {
    background: rgba(0, 0, 0, .22);
    border-radius: 4px;
    padding: 7px 10px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* The three head-count boxes sit tight in .col-md-4 thirds; the club's .form-control
   is full width already, this only keeps the number spinners from squeezing the
   centred digits off-centre. */
.bg-navy .jc-pax { padding-left: 6px; padding-right: 6px; }

/* flatpickr renders its calendar in the document flow under the field. Two months
   side by side are wider than the 4-column panel, so let it break out of the
   column instead of being clipped, and keep it above the sticky header. */
.bg-navy .flatpickr-calendar { z-index: 1200; }

/* ------------------------------------------- breadcrumb under the fixed header */

/* `.header` is `position: fixed` and 155px tall, and the inner-page banner starts
   under it, so the breadcrumb inside `.caption-inner` lies beneath the header's
   layout boxes. Those boxes are invisible but still hit-testable, so every click
   aimed at a breadcrumb link lands on `.header > .container > .row` instead — the
   path is unreachable on the existing site for exactly this reason.

   The header bar and its two layout wrappers hold nothing of their own, so they
   are taken out of hit-testing and the columns — logo, search, menu — put back
   in. Nothing moves; the links underneath simply become reachable. */
.header,
.header > .container,
.header > .container > .row {
    pointer-events: none;
}
.header > .container > .row > div {
    pointer-events: auto;
}

/* Give the crumbs a hit area worth aiming at, and make it obvious which of them
   lead somewhere. */
.breadcrumb-style li a {
    display: inline-block;
    padding: 2px 0;
    text-decoration: none;
}
.breadcrumb-style li a:hover,
.breadcrumb-style li a:focus {
    text-decoration: underline;
}

/* --------------------------------------------------- article share buttons */

/* The existing site draws these with AddToAny's injected stylesheet; the sizes and
   colours below are measured off the live page so the native buttons are visually
   identical: a 32px rounded square per network, 2px of horizontal padding each
   (36px pitch), laid out left-to-right in both directions as AddToAny does. */
.jc-share {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    direction: ltr;
    margin: 24px 0;
}
.jc-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: opacity .15s ease-in-out;
}
.jc-share__btn:hover,
.jc-share__btn:focus {
    color: #fff;
    opacity: .82;
    text-decoration: none;
}
.jc-share__btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.jc-share__btn--facebook { background-color: #0866ff; }
.jc-share__btn--x        { background-color: #1a1a1a; }
.jc-share__btn--linkedin { background-color: #007bb5; }
.jc-share__btn--whatsapp { background-color: #12af0a; }
.jc-share__btn--email    { background-color: #888990; }

/* ============================================================ photo gallery */

/* The thumbnails. A gallery link may paint its thumb as a background image (the
   suite / location / facility strips do) or hold a real lazy-loaded <img> (the
   photo gallery page does) — both get the same frame, hover lift and caption. */
.jc-gallery a { position: relative; }
.jc-gallery a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.jc-gallery a:hover img,
.jc-gallery a:focus-visible img { transform: scale(1.06); }

/* A gold wash and the caption slide in over the photo on hover. */
.jc-gallery a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(34, 65, 63, .78) 0%, rgba(34, 65, 63, 0) 55%);
    opacity: 0;
    transition: opacity .3s ease;
}
.jc-gallery a:hover::after,
.jc-gallery a:focus-visible::after { opacity: 1; }

.jc-gallery__cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 14px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.jc-gallery a:hover .jc-gallery__cap,
.jc-gallery a:focus-visible .jc-gallery__cap { opacity: 1; transform: none; }

/* The zoom cue, so it is obvious a thumbnail opens something. */
.jc-gallery__zoom {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--jc-teal);
    font-size: 12px;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.jc-gallery a:hover .jc-gallery__zoom,
.jc-gallery a:focus-visible .jc-gallery__zoom { opacity: 1; transform: none; }

.jc-gallery a:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 2px; }

/* Album filter chips, built on the club's own .bg-filter bar. */
.jc-albums { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-albums button {
    border: 1px solid var(--jc-line);
    background: #fff;
    color: var(--jc-teal);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.jc-albums button:hover { border-color: var(--jc-gold); }
.jc-albums button.is-active {
    background: var(--jc-teal);
    border-color: var(--jc-teal);
    color: #fff;
}
.jc-gallery a[hidden] { display: none !important; }

/* ---------------------------------------------------------------- lightbox */

body.jc-lb-open { overflow: hidden; }

.jc-lb {
    position: fixed;
    inset: 0;
    /* Above EVERYTHING the club sheet raises: `.header.scrolled`, `.menu-left` and the search
       overlay all sit at 9999. At the old 4000 the lightbox was covered by the sticky header the
       moment the page was scrolled — which is always, since the gallery is far down the page —
       so the close button at top:18px sat underneath the header's menu button: measured
       unreachable, with elementFromPoint returning BUTTON.menu-button. Clicking to close opened
       the menu instead. */
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 28, 27, .94);
    animation: jc-lb-in .2s ease;
}
.jc-lb[hidden] { display: none; }
@keyframes jc-lb-in { from { opacity: 0; } to { opacity: 1; } }

.jc-lb__stage {
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.jc-lb__img {
    max-width: 92vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease;
}
.jc-lb__img.is-ready { opacity: 1; }

.jc-lb__bar {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    max-width: 92vw;
    color: #fff;
    text-align: center;
}
.jc-lb__caption { font-size: 15px; font-weight: 600; }
.jc-lb__count { font-size: 13px; color: var(--jc-gold); white-space: nowrap; }

.jc-lb__close,
.jc-lb__nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}
.jc-lb__close:hover,
.jc-lb__nav:hover { background: var(--jc-gold); }
.jc-lb__close:focus-visible,
.jc-lb__nav:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 3px; }
.jc-lb__nav[hidden],
.jc-lb__close[hidden] { display: none; }

/* The close control is the one button a viewer looks for first, so it does not stay at the
   arrows' 12% wash — it gets a solid seat and a ring so it reads over a bright photo too. */
.jc-lb__close {
    top: 18px;
    inset-inline-end: 18px;
    width: 46px;
    height: 46px;
    font-size: 28px;
    line-height: 1;
    background: rgba(16, 38, 36, .78);
    border: 1px solid rgba(255, 255, 255, .45);
}
.jc-lb__nav   { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 24px; }
.jc-lb__nav--prev { inset-inline-start: 18px; }
.jc-lb__nav--next { inset-inline-end: 18px; }

.jc-lb__spinner {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--jc-gold);
    border-radius: 50%;
    animation: jc-lb-spin .8s linear infinite;
}
.jc-lb__spinner[hidden] { display: none; }
@keyframes jc-lb-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
    /* On a phone the arrows would sit on top of the photo, so they move under it. */
    .jc-lb__nav { top: auto; bottom: 18px; margin-top: 0; width: 46px; height: 46px; }
    .jc-lb__nav--prev { inset-inline-start: 22px; }
    .jc-lb__nav--next { inset-inline-end: 22px; }
    .jc-lb__img { max-height: 64vh; }
    .jc-lb__bar { flex-direction: column; gap: 4px; align-items: center; }
    .jc-lb__close { top: 12px; inset-inline-end: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-lb,
    .jc-lb__img,
    .jc-gallery a img,
    .jc-gallery a::after,
    .jc-gallery__cap,
    .jc-gallery__zoom { animation: none !important; transition: none !important; }
    .jc-gallery a:hover img,
    .jc-gallery a:focus-visible img { transform: none; }
}

/* At one column the default 230px track leaves a single wide, short letterbox per
   row. Narrow the track so a phone gets two squarer tiles instead, and shrink the
   caption to match. (The suite strip sets its own track inline, so it is untouched.) */
@media (max-width: 600px) {
    .jc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .jc-gallery a { height: 140px; }
    .jc-gallery__cap { padding: 9px 10px; font-size: 12px; }
    .jc-gallery__zoom { width: 26px; height: 26px; font-size: 11px; top: 7px; inset-inline-end: 7px; }
}

/* ===================================== mobile: elastic off-canvas menu ===== */

/* The header menu is the codrops elastic overlay — a desktop layout (100px padding,
   360px floated columns, 28px links) that overflows a phone both horizontally (its
   columns run ~85px past the edge) and vertically (no scroll, so the lower links are
   unreachable). Reflow it into one scrollable column at phone widths, with the parent
   items sized as headings and their children indented beneath — the desktop overlay is
   untouched above 767px. */
@media (max-width: 767px) {
    .menu {
        padding: 72px 24px 44px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .icon-list {
        width: 100%;
        float: none;
        margin: 0 0 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #eee;
    }
    .icon-list:last-child { border-bottom: 0; margin-bottom: 0; }

    /* Parent item — the group heading. */
    .icon-list > a:first-child span { font-size: 20px; font-weight: 700; }

    /* Child items (a.menu-sub) — smaller, indented under their parent (RTL & LTR). */
    .icon-list a.menu-sub { padding: 3px 0; }
    .icon-list a.menu-sub span { font-size: 15px; font-weight: 400; }
    html[dir="rtl"] .icon-list a.menu-sub { padding-right: 16px; }
    html[dir="ltr"] .icon-list a.menu-sub { padding-left: 16px; }

    /* A generous, easy-to-hit close button clear of the top edge. */
    .close-button { top: .7em; left: .7em; width: 42px; height: 42px; }
    html[dir="rtl"] .close-button { left: auto; right: .7em; }

    /* The morph SVG edge is a desktop flourish; on a full-width phone overlay it just
       adds a seam, so drop it and let the white panel meet the edge. */
    .morph-shape { display: none; }
}

/* The overlay is fixed and full-screen, so while it is open the page behind must not
   scroll or peek through — the codrops sheet moves .content-wrap but does not lock it. */
body.show-menu { overflow: hidden; }

/* ============================================================ site search */

.jc-search-form { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.jc-search-form .form-control { flex: 1 1 260px; }
.jc-search-form .btn-header { flex: 0 0 auto; }

.jc-search-summary { font-size: 15px; color: var(--jc-gray); margin-bottom: 18px; }
.jc-search-summary strong { color: var(--jc-teal); }

.jc-hl { background: #fbeec2; color: inherit; padding: 0 2px; border-radius: 2px; }

.jc-results { list-style: none; margin: 0; padding: 0; }
.jc-result + .jc-result { margin-top: 12px; }
.jc-result__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--jc-line);
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.jc-result__link:hover,
.jc-result__link:focus-visible {
    border-color: var(--jc-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
    text-decoration: none;
    color: inherit;
}
.jc-result__thumb {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    border-radius: 6px;
    background: var(--jc-band) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jc-result__thumb--icon { color: var(--jc-gold); font-size: 26px; }
.jc-result__body { flex: 1 1 auto; min-width: 0; }
.jc-result__type {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--jc-gold);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
.jc-result__type i { margin-inline-end: 5px; }
.jc-result__title { display: block; font-size: 17px; font-weight: 700; color: var(--jc-teal); }
.jc-result__snippet {
    margin-top: 4px;
    font-size: 14px;
    color: var(--jc-gray);
    line-height: 1.6;
    /* two lines, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jc-result__go { flex: 0 0 auto; color: var(--jc-gray); font-size: 18px; }
.jc-result__link:hover .jc-result__go { color: var(--jc-gold); }

@media (max-width: 575px) {
    .jc-result__thumb { flex-basis: 56px; width: 56px; height: 56px; }
    .jc-result__go { display: none; }
    .jc-result__title { font-size: 15px; }
}

/* ===================================== link colours (kill Bootstrap blue) === */

/* Bootstrap 3 ships `a { color:#428bca }`. That blue is not in the club palette, and it
   leaks anywhere a component sets no colour of its own — most visibly the contact card's
   phone and e-mail on the gold panel. Replace the default site-wide with brand teal →
   gold on hover. Components that style their own links (buttons, the elastic menu,
   breadcrumbs, the teal top bar and footer) all use class selectors and keep their look. */
a { color: var(--jc-teal); }
a:hover,
a:focus { color: var(--jc-gold); }

/* The teal top bar sets .top a{color:#fff} but never a hover, and .top a is (0,1,1) —
   exactly the same weight as the a:hover above. Because this file loads last, the tie
   went to gold-on-teal (~3.1:1) for the phone, e-mail, language switch and every social
   icon. Keep them white, with a slight dim as the hover cue. Same tie for .copyright a. */
.top a:hover,
.top a:focus,
.copyright a:hover,
.copyright a:focus { color: rgba(255, 255, 255, .82); }

/* Studio credit after the rights notice: a quiet second clause on the same line, with a dot
   separator, and the Es.jo name picked out in the brand gold. */
.jc-credit { opacity: .92; }
.jc-credit::before { content: "•"; margin-inline: 8px; opacity: .55; }
.jc-credit a { font-weight: 700; color: var(--jc-gold); }
.jc-credit a:hover,
.jc-credit a:focus { color: #fff; }

/* Panels whose text is white must carry white links too — the contact vcard on the gold
   .bg-navy panel (the home contact band and every location's aside) and the booking box.
   Buttons are excluded: they paint their own background (.btn-white is a WHITE button with
   teal text), so forcing white here made the label invisible on the button. */
.bg-navy a:not(.btn-header):not([class*="btn-"]),
.bg-navy .vcard a,
.services-select a:not(.btn-header):not([class*="btn-"]) { color: #fff; }
.bg-navy a:not(.btn-header):not([class*="btn-"]):hover,
.bg-navy a:not(.btn-header):not([class*="btn-"]):focus,
.bg-navy .vcard a:hover,
.bg-navy .vcard a:focus,
.services-select a:not(.btn-header):not([class*="btn-"]):hover,
.services-select a:not(.btn-header):not([class*="btn-"]):focus { color: rgba(255, 255, 255, .82); }

/* Belt and braces: whatever panel it sits in, a white button keeps its teal label. */
.btn-white,
.bg-navy .btn-white,
.services-select .btn-white { color: var(--jc-teal); }

/* .btn-white INVERTS on hover in the club sheet (main-new-*.css: white text on teal
   background). The site-wide a:hover above is (0,1,1) — the same specificity as the
   club's .btn-white:hover — and this file loads last, so without an explicit rule here
   the label turns gold on that teal fill (~3.1:1). Restate the club's own white so the
   button stays readable; do NOT put a dark colour here, the background is teal. */
.btn-white:hover,
.btn-white:focus,
.bg-navy .btn-white:hover,
.bg-navy .btn-white:focus,
.services-select .btn-white:hover,
.services-select .btn-white:focus { color: #fff; }

/* ============================================ small-phone fixed-width fixes */

/* Two legacy blocks carry desktop-era fixed widths that main-new / responsive never
   overrode, so on a small phone they exceed the viewport and get clipped (the page
   itself never scrolls — an ancestor's overflow:hidden hides the spilled edge, which
   just means content is silently lost). Make them fluid below 480px. */
@media (max-width: 480px) {
    /* .hotels cards are a fixed 335px (+40px side margins) — wider than the screen,
       so in RTL the left edge of every card was cut off on suites / facilities / the
       facility list on a location page. The card image is width:100%, so it reflows. */
    .hotels ul li {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* The careers job-code box is a fixed 300px floated div that spilled the right edge. */
    .code_apply {
        width: auto;
        max-width: 100%;
        float: none;
        margin-right: 0;
    }
}

/* ------------------------------------- hero quick-search on tablet & phone */

/* The club's responsive sheet stacks the hero search columns to 100% at ≤991px but
   forgets to widen the component itself off desktop's `width:55%` — so the fields (and
   the location <select> in particular) are crammed into ~55% of the screen and spill
   out. Widen and centre the component, and make every field contain itself. */
@media (max-width: 991px) {
    .nd_travel_elementor_search_component {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .nd_travel_search_components_column {
        width: 100%;
        box-sizing: border-box;
    }
    .nd_travel_search_components_field,
    .nd_travel_elementor_search_component select,
    .nd_travel_elementor_search_component input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* On desktop the four columns share the row at a flat 25% each, which is too narrow for the
   location: its options carry the full club title ("نادي القضاة النظاميين — عمّان"), so the text
   clipped and the open dropdown spilled under the date field. Give the location a third of the row
   and take the difference off the two dates and the button — they hold a short date or one word and
   lose nothing. Guarded to ≥992px so the ≤991px stack above (every column 100%) is untouched. */
@media (min-width: 992px) {
    /* The whole component is only 55% of the viewport on desktop, which leaves the four fields
       cramped at the 992–1280px end — the location still clipped by a hair. Nudge it to 60%; it
       stays centred (left:0;right:0;margin:auto) and just gains a little breathing room. */
    .nd_travel_elementor_search_component { width: 60%; }

    .nd_travel_elementor_search_component .jc-hero-col--loc { width: 40%; }
    .nd_travel_elementor_search_component .jc-hero-col--date { width: 21%; }
    .nd_travel_elementor_search_component .jc-hero-col--go { width: 18%; }

    /* The column's default 35px/20px side padding eats ~55px. The width the location needs comes off
       the FAR side (padding-left here, the text's tail) — NOT the icon side: the map pin is pinned
       34px into the column's right edge (RTL start), so the right padding must stay wide enough to
       clear it, or the "الموقع" text prints on top of the icon. 38px right clears the 34px pin with a
       small gap; 12px left is the room reclaimed for the long option text. */
    .nd_travel_elementor_search_component .jc-hero-col--loc { padding-right: 38px; padding-left: 12px; }

    /* Fill the wider column so the select's own box, not just the text, uses the new room. */
    .jc-hero-loc-select { width: 100%; box-sizing: border-box; }
}

/* ================================ home "available suites" card (brief §5) === */

/* The club's .hotels card is a plain image + title + button. The brief wants the
   home Available-Suites cards to also carry location, capacity, price, an availability
   badge and two actions (View Details + Book Now), so these add those pieces onto the
   club's own card without changing it elsewhere. */
.jc-hcard__media { position: relative; }
.jc-hcard__badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.jc-hcard__badge.is-free { background: #1f8b4c; }
.jc-hcard__badge.is-booked { background: var(--jc-gray); }

.jc-hcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0 20px;
    margin-top: 6px;
    color: var(--jc-gray);
    font-size: 14px;
}
.jc-hcard__meta i { color: var(--jc-gold); margin-inline-end: 4px; }

.jc-hcard__price {
    padding: 8px 20px 0;
    color: var(--jc-gold);
    font-size: 20px;
    font-weight: 700;
}
.jc-hcard__price span { color: var(--jc-gray); font-size: 13px; font-weight: 400; }

/* Two actions side by side; they stack on the narrowest phones. */
.jc-hcard__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jc-hcard__actions .btn-header { flex: 1 1 auto; text-align: center; }

/* --------------------------------------------- about page extra sections */

/* The vision / mission / goals block appended to the About page. It reuses the club's
   .title-c section heading; these rules just give it breathing room and style the list. */
/* The imported about-us copy carries stray </div>s from the legacy master page, which
   close the layout's .container early — so this block renders full-bleed (measured 1265px
   of a 1280px viewport, identically on both languages) and the prose ran edge to edge.
   Rather than hand-balance scraped markup, give the block the container's own width. */
.jc-about-extra {
    margin-top: 34px;
    max-width: 1170px;
    margin-inline: auto;
    padding-inline: 15px;
}
.jc-about-extra .title-c { margin-top: 26px; }
.jc-about-extra ul { list-style: none; margin: 0; padding: 0; }
.jc-about-extra li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 12px;
    line-height: 1.9;
    color: var(--jc-ink);
}
.jc-about-extra li::before {
    content: "\f00c";           /* fa-check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    color: var(--jc-gold);
    font-size: 13px;
}

/* ------------------------------------------- inner-page banner with a photo */

/* `.caption-inner` is designed for the club's light calligraphic pattern: dark-teal breadcrumb
   text, `padding:60px 0`, `background-position: center top`. A suite/branch/facility photo in
   that band needs two corrections, applied only when the page supplies one (.has-photo):
     • the crop is centred in the markup — these photos are landscapes whose top third is sky,
       so `center top` on a ~166px band rendered a plain blue strip;
     • a light scrim sits over the photo so the dark-teal breadcrumb stays legible on any image,
       which keeps the club's own text colour instead of flipping it to white.
   A slightly taller band lets the photo read as a picture rather than a sliver. */
.caption-inner.has-photo {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
}
.caption-inner.has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .82), rgba(255, 255, 255, .68));
    pointer-events: none;
}
/* keep the breadcrumb above the scrim */
.caption-inner.has-photo > .container { position: relative; z-index: 1; width: 100%; }

@media (max-width: 767px) {
    .caption-inner.has-photo { min-height: 150px; }
}

/* --------------------------------- suite facts row (.room-list-card__meta) */

/* The club's meta row is `display:flex; gap:40px` — sized for the ONE item the legacy page
   showed (its other two were commented out). The suite page now carries up to four facts
   (capacity, weekend rate, additional-guest rate, breakfast rate), which that flex row squeezed
   until every label wrapped mid-phrase. Lay them out as an even grid instead: each fact gets a
   sensible minimum, they sit side by side, and they wrap to a tidy second row rather than
   crushing. Only the suite page's row is affected — the list cards keep their single fact. */
.room-list-card__meta {
    display: grid;
    /* 220px min => two columns in the ~650px card, i.e. a balanced 2x2 for four facts
       (a 165px min gave three columns and left a lone item on a second row), and it still
       opens to 3-4 columns if the container is ever wider. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 22px;
    align-items: start;
}

.room-list-card__meta li {
    gap: 12px;
    align-items: center;
    min-width: 0;                 /* lets the text column shrink instead of overflowing */
}

/* The icon must not shrink when the text is long. */
.room-list-card__meta__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 17px;
}

.room-list-card__meta__content { min-width: 0; }

/* Keep the value on one line (a price must never break), let the label wrap tidily under it. */
.room-list-card__meta__content .room-list-card__meta__title {
    white-space: nowrap;
    font-size: 15px;
}
.room-list-card__meta__content span {
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 991px) {
    /* Only tighten the padding here — keep the 220px track so four facts stay a balanced 2x2
       instead of collapsing to 3 + a lone item on the next row. */
    .room-list-card__meta { padding: 18px 20px; }
}
@media (max-width: 575px) {
    /* Two per row on a phone reads better than one very wide item. */
    .room-list-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 16px; }
    .room-list-card__meta__icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
    .room-list-card__meta__content .room-list-card__meta__title { font-size: 14px; }
    .room-list-card__meta__content span { font-size: 12px; }
}

/* ============================ desktop off-canvas menu: tidy grid + hierarchy */

/* The codrops menu lays its groups out as `float:left` blocks of a fixed 360px. That was fine for
   the 3–4 groups the original had, but the club's menu now has nine of uneven height, and floats
   pack them into a ragged staircase (a 200px-tall group pushes its neighbours down, so the rows
   stop lining up). It also renders parents and children at the SAME 28px, so the hierarchy is
   invisible — "عمّان" looked exactly like "مواقع النادي".

   Above the phone breakpoint (the ≤767px reflow handles small screens) lay the groups out as an
   even grid with aligned rows, and give parents/children a real type hierarchy. */
@media (min-width: 768px) {
    .menu {
        display: grid;
        /* Explicit column counts beat auto-fit here: the group count is known (nine), so fixing
           3 columns on a wide screen gives a balanced 3x3, and 2 on a tablet keeps it compact.
           auto-fit dropped to a single 9-row column at 768px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        align-items: start;
        gap: 30px 34px;
        padding: 92px 70px 60px;
        overflow-y: auto;                 /* a short window scrolls instead of clipping */
        -webkit-overflow-scrolling: touch;
    }

    .icon-list {
        width: auto;                      /* was a fixed 360px */
        float: none;
        min-width: 0;
    }

    /* Parent = section heading: larger, bolder, with a hairline rule under it. */
    .icon-list > a:first-child { padding-bottom: 8px; margin-bottom: 6px; }
    .icon-list > a:first-child span {
        font-size: 21px;
        font-weight: 700;
        color: var(--jc-teal);
        display: inline-block;
        border-bottom: 2px solid var(--jc-gold);
        padding-bottom: 5px;
    }

    /* Children = the section's links: smaller, lighter, indented under the heading. */
    .icon-list a.menu-sub { padding: 4px 0; }
    .icon-list a.menu-sub span {
        font-size: 15.5px;
        font-weight: 400;
        color: var(--jc-gray);
        text-transform: none;
        letter-spacing: 0;
    }
    .icon-list a.menu-sub:hover span,
    .icon-list a.menu-sub:focus span { color: var(--jc-gold); }
    html[dir="rtl"] .icon-list a.menu-sub { padding-right: 14px; }
    html[dir="ltr"] .icon-list a.menu-sub { padding-left: 14px; }

    /* The close button sits clear of the first column. */
    .close-button { top: 26px; }
    html[dir="rtl"] .close-button { left: auto; right: 30px; }
    html[dir="ltr"] .close-button { left: 30px; right: auto; }
}

/* Nine groups ÷ 3 columns = a balanced 3×3 once there is room for it. */
@media (min-width: 1200px) {
    .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The panel is a fixed full-height overlay, so its content must scroll rather than clip —
   `.menu` inherits height:100% from the club sheet, which alone would hide the overflow. */
@media (min-width: 768px) {
    .menu { max-height: 100%; box-sizing: border-box; }
}

/* ======================================= thumbnail fallback (no photo on file)

   Some facilities have no photograph yet (the club has none for the gym, sauna,
   billiards room, library, the two terraces, the Aqaba meeting room or the beach
   volleyball court). The card used to render <img> with no src at all, which browsers
   draw as a broken-image icon. The views now fall back to this block, which mirrors
   `.hotels ul li img` (230px tall, 10px radius) and shows the facility type's own
   Font Awesome glyph on the brand band colour. */
.jc-thumb-fallback {
    height: 230px;
    width: 100%;
    margin: auto;
    border-radius: 10px;
    background: var(--jc-band, #FAF6F0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jc-thumb-fallback i {
    font-size: 64px;
    line-height: 1;
    color: var(--jc-gold);
    opacity: .55;
}

/* On the facilities list the icon is no longer a stand-in for a missing photo — it IS the artwork
   for every card. So it gets the brand's mint ground, a full-strength teal glyph and a hairline
   frame, which reads as a deliberate icon set instead of a faded placeholder. */
.jc-thumb-icon {
    background: var(--jc-mint, #cee4da);
    border: 1px solid rgba(34, 65, 63, .10);
}
.jc-thumb-icon i {
    font-size: 72px;
    color: var(--jc-teal);
    opacity: 1;
}
.jc-media-link:hover .jc-thumb-icon i,
.jc-media-link:focus-visible .jc-thumb-icon i { color: var(--jc-gold); }
.jc-thumb-icon,
.jc-thumb-icon i { transition: color .2s ease, background-color .2s ease; }

@media (max-width: 480px) {
    .jc-thumb-icon i { font-size: 58px; }
}
@media (max-width: 480px) {
    .jc-thumb-fallback { height: 190px; }
    .jc-thumb-fallback i { font-size: 52px; }
}

/* ============================================ off-canvas menu — polish pass

   Three things the club asked for after seeing it live.

   1. THE STRAY "القائمة" / "إغلاق" LABEL.
      Both buttons carry their label as real text that the legacy sheet hides by painting it
      transparent (`color:#000` on .close-button, and the hamburger is drawn with ::before/
      ::after over an invisible string). Invisible text is still SELECTABLE, so a stray
      drag — or Ctrl+A — painted a blue selection block next to the burger where the word
      sits. Keeping the text is right for screen readers; making it unselectable removes the
      artefact without touching the markup. */
#open-button,
#close-button,
.menu-button,
.close-button {
    -webkit-user-select: none;
    user-select: none;
}

/* The hero wordmark showed the same blue block for the same reason. */
.slide-image #section01 h1,
.slide-image #section01 h1 img { -webkit-user-select: none; user-select: none; }

/* 2. A TIDIER OPEN PANEL.
      The nine groups have wildly different heights (a group with no children is 56px, the
      bookings group is 158px), and as bare text blocks on a plain white sheet the rows read
      as ragged — measured headings landed at y=92 / 246 / 435, i.e. uneven 154px and 189px
      steps. Giving each group a soft card makes the differing heights look deliberate and
      groups the sub-links with their heading. */
@media (min-width: 768px) {
    .menu { align-content: start; gap: 26px 30px; padding: 96px 64px 64px; }

    .icon-list {
        padding: 18px 22px 16px;
        border-radius: 14px;
        background: rgba(34, 65, 63, .035);
        border: 1px solid rgba(34, 65, 63, .09);
    }

    /* the group heading keeps its gold underline but now spans the card */
    .icon-list > a:first-child span { display: inline-block; padding-bottom: 6px; }

    /* sub-links: quieter, indented, and they no longer hug the heading */
    .icon-list a.menu-sub { padding-inline-start: 2px; }
    .icon-list a.menu-sub span { line-height: 2.1; }
    .icon-list a.menu-sub:hover span { color: var(--jc-gold); }
}

/* 3. A REAL CLOSE BUTTON.
      It was a 35px transparent box with two 2px black bars and the word "إغلاق" pushed out
      of view by text-indent — almost invisible on the white panel and easy to miss. Make it
      a solid teal disc with a white X, and hide the label properly instead of indenting it. */
.close-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jc-teal);
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(11, 28, 27, .28);
    transition: background-color .2s ease, transform .2s ease;
}
.close-button:hover,
.close-button:focus-visible {
    background: var(--jc-gold);
    transform: rotate(90deg);
}
.close-button:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 3px; }

/* the two bars become a white X, centred inside the disc */
.close-button::before,
.close-button::after {
    width: 2px;
    height: 18px;
    top: 50%;
    right: 50%;
    margin-top: -9px;
    margin-right: -1px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .close-button:hover, .close-button:focus-visible { transform: none; }
}

/* Cards in the same row must share a height, otherwise a row with a 3-link group leaves the
   single-link cards beside it floating short and the band looks broken. `align-content:start`
   above packs the rows; this stretches each card to its own row. */
@media (min-width: 768px) {
    .menu { align-items: stretch; }
    .icon-list { height: auto; display: flex; flex-direction: column; }
}

/* ================================= off-canvas menu → a stacked accordion (all widths)

   The client asked for a "normal" menu: the main categories listed one under another, and a
   category that HAS sub-links revealing them only when clicked — not the earlier grid that laid
   every group and every child out at once. So at EVERY width the grid/cards collapse to a single
   centred column, the sub-links start hidden, and the small script in _ClubLayout opens one group
   at a time (rotating the caret). `!important` throughout because the grid blocks above set the
   same properties per-breakpoint and would otherwise win inside `@media (min-width:768px)`. */
/* The elastic menu's `.menu` is a FULL-WIDTH white panel that covers the screen when open
   (menu_elastic.css: width:100%). Do NOT cap it — an earlier max-width:520px shrank the white sheet
   to a floating centred box with the dimmed page showing on both sides. Keep it full width; the
   readable single column is produced by centring the ROWS below, not by narrowing the panel. */
.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.icon-list {
    width: 100% !important;
    max-width: 520px !important;   /* the accordion column stays a readable width… */
    margin: 0 auto !important;     /* …centred inside the full-width white panel */
    float: none !important;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(34, 65, 63, .12) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.icon-list:last-child { border-bottom: 0 !important; }

/* the heading row: title on the start edge, caret on the far edge */
.icon-list > a:first-child {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 6px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}
.icon-list.has-sub > a.jc-acc-head { cursor: pointer; }
.icon-list > a:first-child span {
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--jc-teal) !important;
    border-bottom: 0 !important;       /* drop the gold underline the grid heading carried */
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* caret appears only on groups with children (the layout prints it there); rotates when open */
.jc-acc-caret {
    color: var(--jc-gold);
    font-size: 14px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}
.icon-list.is-open .jc-acc-caret { transform: rotate(180deg); }

/* sub-links collapsed by default, slide open when the group is opened */
.icon-list.has-sub a.menu-sub {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
}
.icon-list.has-sub.is-open a.menu-sub {
    max-height: 54px;
    opacity: 1;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.icon-list.has-sub.is-open a.menu-sub:last-of-type { margin-bottom: 12px; }

.icon-list a.menu-sub span {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--jc-gray) !important;
    line-height: 1.5 !important;
}
.icon-list a.menu-sub:hover span,
.icon-list a.menu-sub:focus span { color: var(--jc-gold) !important; }
html[dir="rtl"] .icon-list a.menu-sub { padding-right: 18px !important; padding-left: 0 !important; text-align: right; }
html[dir="ltr"] .icon-list a.menu-sub { padding-left: 18px !important; padding-right: 0 !important; text-align: left; }

/* ---------------------------------------------- card action row, centred

   The club sheet sets `.hotels-more { text-align: left }`, which pins the button to one edge
   of the card and reads as if it were floating loose. Centre it, and make the row a flex line
   so the facilities cards that carry TWO buttons (التفاصيل + احجز الآن) sit side by side with
   an even gap instead of stacking against the edge. */
.hotels-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.hotels-more a { margin: 5px 0 0; }

/* On a narrow phone two buttons side by side get cramped, so let them fill the row instead. */
@media (max-width: 420px) {
    .hotels-more a { flex: 1 1 100%; }
}

/* ------------------------------------------- .room-card-two — hide the description

   This card paints its content ABSOLUTELY over the photo with a transparent background
   (`.room-card-two__content { position:absolute; background:transparent }`), and the club
   sheet hid the description with a fixed `margin-bottom:-52px` inside an `overflow:hidden`
   box, sliding it in on hover.

   That trick only holds while the text is at most ~52px tall. Once ShortDescription was
   filled in for every suite (rebuilt from Description, up to 200 chars ≈ 3-4 lines), the
   overflow no longer covered it and the tail bled onto the photo as unreadable grey-on-image.

   The card already carries the name, the nightly price and the capacity, and the full
   description is shown properly on the suite page and in the list/grid cards that have a
   white text area — so drop it here rather than fight the overlay. */
.room-card-two__content__text__box { display: none; }

/* With the box gone the fixed negative margin and the hover slide have nothing to act on;
   neutralise them so no stale offset is left behind. */
.room-card-two__content__text,
.room-card-two:hover .room-card-two__content__text { margin-bottom: 0; }

/* ------------------------------------ page title inside the header band

   The title used to sit in a separate white strip under the band, which read as a second
   heading floating between the header and the content. It now lives with the breadcrumb inside
   .caption-inner, so the band carries the whole page identity: path, then title, then subtitle.

   The band is the club's own light calligraphy pattern, so the title takes the brand teal — and
   on the pages that supply a photo (.has-photo already lays a scrim over it) the same teal
   still reads against the lightened image. */
.jc-banner-title { margin-top: 10px; }

.jc-banner-title h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--jc-teal);
}

.jc-banner-title p {
    margin: 8px 0 0;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--jc-gray);
    max-width: 760px;
}

/* The band's own padding was tuned for a breadcrumb alone; give the taller content room. */
.caption-inner { padding-block: 46px; }

@media (max-width: 767px) {
    .jc-banner-title h1 { font-size: 25px; }
    .jc-banner-title p { font-size: 14.5px; }
    .caption-inner { padding-block: 34px; }
}

/* A photo banner is darker and busier than the pattern, so lift the text off it. */
.caption-inner.has-photo .jc-banner-title h1 { text-shadow: 0 1px 10px rgba(255, 255, 255, .85); }
.caption-inner.has-photo .jc-banner-title p { color: var(--jc-teal-dark); }

/* ==================================================== contact page

   Rebuilt from structured, admin-editable data instead of hand-written markup: the seeded body
   repeated the phone six times and the e-mail twice, and there was no map at all.
   Now: intro (Pages) → contact cards (Settings) → one card per branch (Locations) → form
   (Forms) → map (Settings → Contact.MapEmbed). */

.jc-contact-intro { margin-bottom: 34px; }
.jc-contact-heading { margin-top: 44px; }

/* --- the four "how to reach us" cards --- */
.jc-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 8px;
}

.jc-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.jc-contact-card:hover {
    border-color: rgba(160, 134, 84, .45);
    box-shadow: 0 10px 26px rgba(11, 28, 27, .08);
    transform: translateY(-2px);
}

.jc-contact-card__ic {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--jc-band);
    color: var(--jc-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.jc-contact-card h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--jc-gray);
}
.jc-contact-card a,
.jc-contact-card p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--jc-teal);
    line-height: 1.7;
    word-break: break-word;
}
.jc-contact-card a:hover { color: var(--jc-gold); }

/* --- one panel per branch --- */
.jc-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.jc-branch {
    background: var(--jc-band);
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
}
.jc-branch h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--jc-teal);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--jc-gold);
}
.jc-branch ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1 1 auto; }
.jc-branch li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--jc-ink);
}
.jc-branch li i {
    flex: 0 0 18px;
    margin-top: 5px;
    color: var(--jc-gold);
    font-size: 14px;
    text-align: center;
}
.jc-branch li a { color: var(--jc-teal); font-weight: 600; }
.jc-branch li a:hover { color: var(--jc-gold); }
/* Two actions per branch — «التفاصيل» (outline) and «الخريطة» (filled, with a map icon). They must
   read as one pair: same width, same height, same baseline. The global `.btn-header{align-self:center}`
   (added elsewhere to stop a different stretch) let the icon button settle ~8px lower than the plain
   one; `align-self: stretch` here pins both to the row's full height so their tops and bottoms line up,
   `flex: 1 1 0` gives them equal width, and the inner flex centres icon+text identically in each. */
.jc-branch__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.jc-branch__actions a.btn-header {
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.jc-contact-form { margin-top: 44px; }

/* --- the map --- */
.jc-map {
    border-radius: var(--jc-radius);
    overflow: hidden;
    border: 1px solid var(--jc-line);
    line-height: 0;
}
.jc-map iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}

@media (max-width: 575px) {
    .jc-contact-card { padding: 18px 16px; }
    .jc-branch { padding: 20px 18px; }
    /* stack them full-width on a phone — specificity matches the a.btn-header rule above so this wins */
    .jc-branch__actions a.btn-header { flex: 1 1 100%; text-align: center; }
    .jc-map iframe { height: 300px; }
}

/* ------------------------------- .room-card-two — make the white title readable

   The club sheet lays a scrim over the bottom of the photo, but it fades to GOLD
   (linear-gradient(rgba(40,62,70,0), #a08654 67%)). White on #a08654 is about 2.6:1, and
   higher up the card — where the gradient is still transparent — the white title sits straight
   on the photo, which on the Amman suites is bright sky and city. Measured: title is #fff,
   24px, weight 600, text-shadow NONE.

   Fade to the brand deep teal instead. Composited over even a pure-white photo that leaves
   the text on roughly #3c3c3c, i.e. ~9:1 — readable on every image the club uploads, and the
   gold identity stays where it is legible: the price and the accent numbers on the white box.
   The shadow is belt-and-braces for the top edge of the scrim. */
.room-card-two::after {
    /* Tuned by measurement, not by eye: the title's centre lands at 45% of the scrim's
       height, where the first attempt (.55 at 38%) left only alpha .62 and 4.90:1 over a
       white photo. Bringing the ramp forward puts ~.76 under the title. */
    background-image: linear-gradient(rgba(11, 28, 27, 0) 0%,
                                      rgba(11, 28, 27, .50) 22%,
                                      rgba(11, 28, 27, .90) 58%);
}

.room-card-two__content__title,
.room-card-two__content__title a {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.room-card-two__content__title a:hover { color: var(--jc-gold); }

/* The availability pill sits on the photo too, above the scrim. */
.room-card-two__feature { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }

/* -------------------------------- suite gallery strip, under the main photo

   The strip used to sit far below the facts card, so it read as a second, unrelated gallery and
   nothing told the visitor that clicking one swapped the photo. It now sits flush under the big
   image, and the thumbnail currently on show is outlined in gold. */
.jc-suite-strip {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 8px 0 0;
}

.jc-suite-strip .suite-thumb {
    height: 72px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: -2px;
    opacity: .72;
    transition: opacity .2s ease, outline-color .2s ease, transform .2s ease;
}
.jc-suite-strip .suite-thumb:hover { opacity: 1; transform: translateY(-2px); }

/* the one currently in the big frame */
.jc-suite-strip .suite-thumb.is-active {
    opacity: 1;
    outline-color: var(--jc-gold);
}
.jc-suite-strip .suite-thumb:focus-visible {
    outline-color: var(--jc-teal);
    outline-offset: 2px;
}

/* The strip reuses .jc-gallery, whose hover zoom and caption overlay belong to the photo
   gallery page, not to a thumbnail picker. */
.jc-suite-strip .suite-thumb::after,
.jc-suite-strip .suite-thumb::before { content: none; }

@media (max-width: 575px) {
    .jc-suite-strip { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .jc-suite-strip .suite-thumb { height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-suite-strip .suite-thumb:hover { transform: none; }
}

/* ------------------- band title: a real, visible page heading

   History, because this block has flipped twice and the reason matters. The <h1> was first
   visually hidden: the band showed the path, then the h1, then the page strapline, and the last
   crumb and the h1 always carried the identical words — the club objected to the echo, and the
   strapline was doing the visible work anyway.

   Both of those premises are gone. The strapline no longer prints in the band at all, so hiding
   the h1 left an inner page with a path and nothing else — no visible page title. And the echo is
   now solved at the source: the ACTIVE crumb is no longer rendered, so the path stops at the
   parent and the h1 alone names the page.

   So the heading is visible again, and it is the only place the page name appears in the band. */
.jc-banner-title h1 {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    border: 0;
}

/* With the heading out of the flow the band's own sentence carries the page, so give it the
   weight the h1 used to have. */
.jc-banner-title p {
    margin: 0;
    font-size: 17px;
    line-height: 1.9;
    color: var(--jc-teal);
    max-width: 860px;
}
.jc-banner-title { margin-top: 6px; }

@media (max-width: 767px) {
    .jc-banner-title p { font-size: 15px; }
}

/* ---------- category card heading: h3 with the club's own h1 styling

   _PageCard used an <h1> per card, so a category listing shipped four <h1>s. The page's real
   heading lives in the header band, so a card is now an <h3> — and it must look exactly as the
   club's `.box-category h1` did, so that rule is mirrored here. */
.box-category h3 {
    font-size: 15px !important;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 0;
    background-color: #fff;
    color: #222222;
    border-radius: 4px;
    padding: 20px 10px;
    text-align: center;
    position: absolute;
    width: 92%;
    bottom: 10px;
    transition: .3s;
}
/* The club sheet's hover for this card is the template's leftover purple (#393b92); use the
   brand teal, same as .btn-blue was corrected to. */
.box-category:hover h3 {
    background-color: var(--jc-teal);
    color: #fff !important;
}

/* ==========================================================================
   APPROVED PALETTE
   ==========================================================================
   The club fixed three colours:

     background   #cee4da
     text         #284745
     buttons      #284745

   `--jc-teal` was #22413f — visually the same family but not the approved
   value — so it is redefined here to #284745 and every rule already written
   against it lands on the palette. #cee4da joins as --jc-mint.

   The knock-on that had to be handled in the same pass: the side booking panel
   (.bg-navy) was DARK gold (#a08654) with white text. On a light mint panel
   every one of those whites becomes unreadable, so all of the panel's text,
   links, icons and headings are flipped to #284745 below, and its buttons go
   solid #284745 with white labels. Contrast measured after the change. */
:root {
    --jc-teal: #284745;        /* approved text + button colour */
    --jc-teal-dark: #16302e;   /* hover / pressed, derived from the above */
    --jc-deep: #284745;
    --jc-mint: #cee4da;        /* approved background */
}

/* ------------------------------------------------ the side booking panel */

.bg-navy {
    background-color: var(--jc-mint);
    color: var(--jc-teal);
}

/* the "احجز الآن" tab: was a dark teal flag pinned 40px from the edge — now
   centred over the panel, which is what the club asked for */
.bg-navy .title-whitecontent,
.title-whitecontent {
    background-color: var(--jc-teal);
    color: #fff;
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* every piece of text inside the panel — the light background makes white illegible */
.bg-navy,
.bg-navy p,
.bg-navy span,
.bg-navy div,
.bg-navy label,
.bg-navy strong,
.bg-navy .calls,
.bg-navy .services-select-text,
.bg-navy .services-select-headline,
.bg-navy .vcard,
.bg-navy .vcard div { color: var(--jc-teal); }

.bg-navy a:not(.btn-header):not([class*="btn-"]),
.bg-navy .vcard a { color: var(--jc-teal); font-weight: 600; }
.bg-navy a:not(.btn-header):not([class*="btn-"]):hover,
.bg-navy .vcard a:hover { color: var(--jc-teal-dark); }

.bg-navy .vcard i,
.bg-navy i { color: var(--jc-teal); }

.bg-navy hr { border-color: rgba(40, 71, 69, .22); }

/* buttons on the panel: solid approved colour, white label */
.bg-navy .btn-white,
.bg-navy .btn-header.btn-white,
.services-select .btn-header.btn-blue {
    background-color: var(--jc-teal);
    border-color: var(--jc-teal);
    color: #fff;
}
.bg-navy .btn-white:hover,
.bg-navy .btn-header.btn-white:hover,
.bg-navy .btn-white:focus {
    background-color: var(--jc-teal-dark);
    border-color: var(--jc-teal-dark);
    color: #fff;
}

/* the panel's own form fields sat on gold; on mint they need a real edge */
.bg-navy .form-control,
.bg-navy input,
.bg-navy select {
    border-color: rgba(40, 71, 69, .28);
    color: var(--jc-teal);
}

/* ------------------------------------------------------------- buttons */

.btn-blue,
.nd_travel_search_components_submit {
    background-color: var(--jc-teal) !important;
    border-color: var(--jc-teal) !important;
    color: #fff !important;
}
.btn-blue:hover, .btn-blue:focus {
    background-color: var(--jc-teal-dark) !important;
    border-color: var(--jc-teal-dark) !important;
    color: #fff !important;
}

/* .btn-more2 was a gold outline button */
.btn-more2 {
    color: var(--jc-teal) !important;
    border-color: var(--jc-teal) !important;
}
.btn-more2:hover, .btn-more2:focus {
    background-color: var(--jc-teal) !important;
    color: #fff !important;
}

/* ------------------------- remaining off-palette colours in the named areas

   Measured on /ar/ and /ar/suite/…: gold #a08654 on the price and the outline
   buttons, and the availability calendar's own green (#128a52 on #e7f7ef).
   The club named the home backgrounds, the suite page and the buttons, so
   those move onto the palette. The status colours in the calendar keep their
   MEANING (available / pending / booked / closed must stay distinguishable)
   but the "available" state now uses the approved mint instead of a green
   that belonged to no palette. */

/* suite + card prices and the club's gold text accents in these areas */
.room-list-card__price,
.room-card-two__content__number__price,
.jc-hcard__price,
.room-list-card__meta__title { color: var(--jc-teal); }

/* the club sheet's gold underline / accent bars inside these sections */
.jc-branch h3 { border-bottom-color: var(--jc-teal); }

/* availability calendar — "available" on the approved mint */
.jc-cal__day.is-available {
    background: var(--jc-mint);
    color: var(--jc-teal);
    border-color: rgba(40, 71, 69, .25);
}
.jc-cal__legend .is-available { background: var(--jc-mint); }

/* the facts band under a suite */
.room-list-card__meta { background: var(--jc-mint); }
.room-list-card__meta__icon { color: var(--jc-teal); }

/* home: the soft section bands.

   The club sheet paints these with a LAVENDER that is nowhere in the approved palette:
   `.content-inner2 { background: #ececf5 url(Graph1.png) right bottom }`. Graph1.png itself is
   harmless (sampled: 1055 of ~1600 pixels fully transparent, the rest a maroon watermark at
   alpha 8-15), so only the colour had to go.

   Default the wrapper to no colour, then opt the bands that should carry the approved mint in by
   class. Opt-IN rather than opt-out because section 09 is also a `.content-inner2` and holds the
   mint `.bg-navy` contact panel — tinting that wrapper would make the panel vanish into its own
   band. The page then alternates cleanly: locations white, about mint, news white, suites MINT,
   facilities white, gallery MINT, videos white, contact white with a mint panel.
   (#333 headings on #cee4da measure 9.47:1.) */
.content-inner2, .content-body { background-color: transparent; }
.content-inner2.jc-band-mint { background-color: var(--jc-mint); }

/* The news band's offset accent block was a PNG — bg-color2.png, a flat 446x481 rectangle of
   #E9E9F4, the same off-palette lavender. A two-stop gradient paints an identical flat block, so
   `background-size` reproduces the PNG's exact box while the club sheet's own
   `background-position` is left alone — it differs per language (85% in English, 200px in Arabic)
   and each language keeps its own placement. No recoloured binary to keep in sync. */
.news-all {
    background-image: linear-gradient(var(--jc-mint), var(--jc-mint));
    background-size: 446px 481px;
    background-repeat: no-repeat;
}

/* Every card carried `border: 1px #ececf5 solid` — the lavender again, on 6 cards on the home
   page, 23 on /suites and 22 on /facilities. A teal-tinted hairline reads at the same weight
   while staying inside the palette, and it holds up over both the white and the mint bands. */
.hotels ul li { border-color: rgba(40, 71, 69, .14); }

/* flatpickr ships a slate-blue ring on "today" (#959ea9) and a blue selected day (#569ff7).
   Neither is in the palette, and both sit right next to the mint booking panel.

   Every selector here is prefixed with `.flatpickr-calendar` on purpose: the suite page loads
   flatpickr.min.css from its `@section Styles`, i.e. AFTER this sheet, so a bare
   `.flatpickr-day.today` ties the vendor rule on specificity and loses on source order. The
   ancestor class buys a third class without resorting to !important. */
.flatpickr-calendar .flatpickr-day.today { border-color: var(--jc-teal); }
.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today:focus {
    border-color: var(--jc-teal);
    background: var(--jc-teal);
    color: #fff;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.endRange:focus {
    background: var(--jc-teal);
    border-color: var(--jc-teal);
    color: #fff;
}

/* The availability pill measured 4.32:1 — white on #1f8b4c at 12px, just under the 4.5 the size
   demands. Green stays (it is the semantic "available", not a brand colour); it only darkens
   enough to clear the bar, now 5.15:1. The booked pill on --jc-gray was already 5.32:1. */
.jc-hcard__badge.is-free { background: #1b7d44; }

/* `.title-white { color:#FFFFFF !important }` in the club sheet is the one white that survived
   the panel flip — measured 1.33:1 on the mint panel (the home contact band's address line).
   Only !important beats !important, so it is scoped to the panel and left alone elsewhere. */
.bg-navy .title-white,
.bg-navy .title-white span,
.bg-navy .title.title-white { color: var(--jc-teal) !important; }

/* ---------------------------- secondary text: readable on the new palette

   The club sheet's secondary grey is #7D8B90. Measured after the palette change it fails
   everywhere it matters: 3.52:1 on white, 3.12:1 on the #f1f1f1 panel and — worst — 2.64:1
   on the new mint band. Deepened to a teal-tinted grey that clears 4.5:1 on white, and
   anything sitting ON the mint uses the approved text colour outright. Hierarchy between a
   label and its value now comes from size and weight, not from a washed-out colour. */
:root { --jc-gray: #5c6f6d; }

.room-list-card__price__shift,
.jc-contact-card h4,
.jc-panel-head p,
.jc-tile p { color: var(--jc-gray); }

/* on the mint facts band and the calendar head, only the approved colour clears AA */
.room-list-card__meta .room-list-card__meta__content span,
.room-list-card__meta__content span,
.jc-cal__dow { color: var(--jc-teal); }
.jc-cal__dow { font-weight: 600; }

/* ============================================ home — "about the club" band

   Replaces the legacy .tab_container (a radio input driving a single tab whose label and
   heading said the same thing on an empty textured band). Two columns: the club's own words on
   one side, a photo on the other, all on the approved palette. */
.jc-about-band {
    background: var(--jc-mint);
    padding: 72px 0;
}

.jc-about-band__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.jc-about-band__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--jc-teal);
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--jc-teal);
}

.jc-about-band__text h2 {
    margin: 0 0 18px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jc-teal);
}

.jc-about-band__text p {
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 2;
    color: var(--jc-teal);
}

/* The outline button reads on mint as well as it does on white. Border stays at the club sheet's
   own 2px — my earlier 1px here made this the only button on the site 2px shorter than the rest
   (measured 40.45px against everything else's 42). */
.jc-about-band .btn-more2 {
    background-color: transparent;
    border: 2px solid var(--jc-teal);
}
.jc-about-band .btn-more2:hover { background-color: var(--jc-teal); color: #fff !important; }

.jc-about-band__media img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    border-radius: var(--jc-radius);
    box-shadow: 0 18px 44px rgba(40, 71, 69, .18);
}

@media (max-width: 991px) {
    .jc-about-band { padding: 48px 0; }
    .jc-about-band__grid { grid-template-columns: 1fr; gap: 28px; }
    .jc-about-band__media { order: -1; }
    .jc-about-band__media img { height: 240px; }
    .jc-about-band__text h2 { font-size: 26px; }
    .jc-about-band__text p { font-size: 15.5px; }
}

/* ================================================ home — news / events cards

   The legacy band alternated three card shapes by index: `.news` (photo on top, text on white)
   then `.pic-welcome` and `.pic-welcome2` (title and body printed straight onto the photo, in
   white). So the first box never matched the other two, the type scale jumped between them, and
   the overlay text was unreadable on the club's light photos.

   One card now: fixed-ratio photo, then title / body / link on white, one scale, one position,
   and equal heights across the row because the grid stretches and the body is a flex column. */
.jc-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    align-items: stretch;
}

.jc-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.jc-news-card:hover {
    transform: translateY(-3px);
    border-color: rgba(40, 71, 69, .28);
    box-shadow: 0 16px 38px rgba(40, 71, 69, .14);
}

.jc-news-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--jc-mint);
}
.jc-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.jc-news-card:hover .jc-news-card__media img { transform: scale(1.05); }

.jc-news-card__ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--jc-teal);
    opacity: .45;
}

/* the body is the flex child that grows, so the link sits on the same baseline in every card */
.jc-news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 22px 24px;
}
.jc-news-card__body h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
}
.jc-news-card__body h3 a { color: var(--jc-teal); }
.jc-news-card__body h3 a:hover { color: var(--jc-teal-dark); }

.jc-news-card__body p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--jc-gray);
    flex: 1 1 auto;
}
.jc-news-card__body .btn-more2 { align-self: flex-start; }

@media (max-width: 575px) {
    .jc-news-grid { gap: 20px; }
    .jc-news-card__body { padding: 18px; }
    .jc-news-card__body h3 { font-size: 17.5px; }
    .jc-news-card__body p { font-size: 14.5px; }
}

/* ------------------------------------------- clickable card thumbnails

   The card photo is the biggest target on a card, so it links to the same place the buttons
   below it do. The club sheet sizes these images with descendant selectors
   (`.hotels ul li img`, `.jc-hcard__media img`), so wrapping them in an anchor does not
   disturb the existing rules — this only adds the affordance. */
.jc-media-link {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}
.jc-media-link img,
.jc-media-link .jc-thumb-fallback {
    transition: transform .35s ease;
}
.jc-media-link:hover img,
.jc-media-link:focus-visible img { transform: scale(1.04); }

.jc-media-link:focus-visible {
    outline: 2px solid var(--jc-teal);
    outline-offset: 2px;
}

/* the availability badge on the home card sits above the new anchor */
.jc-hcard__media { position: relative; }
.jc-hcard__badge { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    .jc-media-link:hover img, .jc-media-link:focus-visible img { transform: none; }
}

/* ============================================================================
   ENGLISH READS LEFT-TO-RIGHT, AND THE CARD BUTTONS LOOK THE SAME IN BOTH

   1. The English vendor sheet (main-new-en.css) is a copy of the Arabic one, and most of
      its directional rules WERE mirrored when it was copied — `.top-right` and
      `.header-text` are text-align:left in the Arabic sheet and right in the English one,
      i.e. each hugs its own outer edge, which is correct.

      Two were missed, so English inherited Arabic alignment:

        .hotels ul li { text-align: right }   — identical in BOTH sheets

      That single rule right-aligned every card's name, description and price on the home
      page, /suites, /facilities and /location/*, measured at 6 / 23 / 22 / 16 elements per
      page, while the location+guests line stayed left — the mixed alignment in the report.

      The menu panel is the second: it is markup inside `.header-text`, so it inherited that
      column's edge-hugging alignment even though the open panel is a full-screen overlay,
      not a small column. Measured inside a 364px group card: English headings sat 280px
      from the card's left edge (hard right), and ARABIC sat 23px from the left (hard left)
      — both were pushed to the wrong side, so this fixes the Arabic menu too.

      `text-align: start` resolves per direction, so one rule serves both languages instead
      of a pair of html[dir=…] overrides that can drift apart the way the vendor sheets did.  */
.hotels ul li { text-align: start; }
.menu-wrap { text-align: start; }

/* 2. The two card actions were sized by their LABELS, not by the row: `flex: 1 1 auto` on a
      313px row with 40px of padding a side. Arabic totalled 147 + 10 + 156 = exactly 313 and
      fitted by luck; English needs 174 + 10 + ~160 = 344, overflowed, and `flex-wrap: wrap`
      dropped the second button onto its own line — the row measured 47px tall in Arabic and
      104px in English. Any longer Arabic label would have broken the same way.

      Size them from the row instead: `flex: 1 1 0` gives each exactly (313 - 10) / 2 = 151px
      in every language, and trimming the side padding leaves the longest label ("View
      Details", ~94px of text) 33px of slack. Selecting `:first-child:nth-last-child(2)` and
      its sibling applies this ONLY to rows that hold two buttons — the single-button rows on
      /suites and /facilities keep their intrinsic width and stay centred. */
.hotels-more > a:first-child:nth-last-child(2),
.hotels-more > a:first-child:nth-last-child(2) ~ a {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
    text-align: center;
}

/* A phone is too narrow for two side-by-side buttons, so there they fill the row — in both
   languages, so the pair still matches. Repeats the selector above because the older
   `.hotels-more a` rule is less specific and would otherwise lose to it. */
@media (max-width: 420px) {
    .hotels-more > a:first-child:nth-last-child(2),
    .hotels-more > a:first-child:nth-last-child(2) ~ a { flex: 1 1 100%; }
}

/* ------------------------------------------ footer contact: visibly clickable

   The footer's address, phone and e-mail were plain text — on a phone the number could not be
   dialled at all. They are anchors now, but the footer only styles `.footer ul li a`, so a
   `.vcard` link would fall through to the global anchor colour and read as body copy on the dark
   panel. White, with a faint permanent underline so it is obvious they DO something before
   anyone hovers, and a solid one on hover/focus. */
.footer .vcard a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .38);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.footer .vcard a:hover,
.footer .vcard a:focus-visible { color: #fff; text-decoration-color: #fff; }
.footer .vcard a:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 3px; }

/* A Latin phone number inside an Arabic (RTL) block: `dir="ltr"` keeps the digits in dialling
   order, and inline-block stops the leading "+" from being reordered to the far end. */
.footer .vcard a[dir="ltr"],
.vcard a[dir="ltr"],
.jc-contact-card a[dir="ltr"] { display: inline-block; }

/* On the mint panels a `.vcard` link is teal on mint and so is the surrounding text — only the
   font weight separated them, so nothing said "tap me". Give every contact link the same faint
   underline the footer now uses, solid on hover. Buttons are excluded: they already read as
   controls and an underline through a button label looks broken. */
.vcard a:not([class*="btn-"]),
.jc-contact-card a:not([class*="btn-"]),
.jc-branch ul a:not([class*="btn-"]) {
    text-decoration: underline;
    text-decoration-color: rgba(40, 71, 69, .35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.vcard a:not([class*="btn-"]):hover,
.vcard a:not([class*="btn-"]):focus-visible,
.jc-contact-card a:not([class*="btn-"]):hover,
.jc-contact-card a:not([class*="btn-"]):focus-visible,
.jc-branch ul a:not([class*="btn-"]):hover,
.jc-branch ul a:not([class*="btn-"]):focus-visible { text-decoration-color: currentColor; }

/* The footer sets its own (white) underline colour above; keep it from inheriting the teal one. */
.footer .vcard a { text-decoration-color: rgba(255, 255, 255, .38); }
.footer .vcard a:hover,
.footer .vcard a:focus-visible { text-decoration-color: #fff; }

/* ------------------------------------- filter-bar buttons must fit their column

   `.btn-header` carries `padding: 8px 40px` — fine for a button that sizes to its label, wrong
   inside a fixed Bootstrap column. On /suites the submit button had 159px of column and needed
   230 (147px of English label + 80 of padding), so the text ran outside the teal panel and the
   panel itself scrolled sideways. Widening the column fixed that instance; this keeps ANY label
   inside its box, in either language, at every width:

     • less side padding, since a full-width button does not need 40px to look balanced;
     • `min-width: 0` so the flex/grid parent can actually shrink it;
     • the label wraps instead of escaping if it still cannot fit — a two-line button is ugly,
       text over the edge is broken.

   The padding needs !important: the club sheet declares `padding: 8px 40px !important` on BOTH
   .btn-white and .btn-more2 (main-new-*.css), and only !important beats !important — the same trap
   as `.title-white`. Without it the 40px stayed and the label wrapped instead, giving a 65px-tall
   button in a row of 50px selects at every width from 992 to 1199. */
.services-select .btn-header,
.bg-filter .btn-header {
    padding-inline: 16px !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}


/* ============================================ one button height for the whole site

   `<a class="btn-header">` and `<button class="btn-header">` rendered at DIFFERENT heights —
   measured on booking step 2: «رجوع» 42px sitting next to «إرسال الرمز» 57px, with identical
   padding, border, font-size and line-height.

   It is not the buttons. Their action row is `display:flex` with the default `align-items:
   stretch`, and the two carry DIFFERENT vertical margins: the anchor 15px top and bottom, the
   button 15px top and 0 bottom (the club sheet zeroes `margin-bottom` on `.btn-blue`). The
   anchor''s bottom margin makes the flex line 72px tall, and the button — having no bottom margin
   to fill it with — stretches its own box to 57px to reach the same line. Ruled out by
   measurement: forcing line-height, font-family and even `padding-block:0` left it at 57; only
   pinning a height changed it, which is what pointed at stretch rather than at the box.

   So stop the stretching instead of fighting the box: `align-self: center` makes every
   `.btn-header` keep its natural height and sit centred on whatever line it lands in — one rule,
   no magic numbers, and it fixes any future pair with mismatched margins too. Measured after:
   both 42px, row height unchanged at 72px, so nothing else on the page moves. */
.btn-header { align-self: center; }

/* ================================================ phone: drop the top bar

   The top bar stacks into THREE rows on a phone (measured 86px tall at 375px against 46px on the
   desktop) and pushes the logo and the menu button below the fold before any content appears. It
   carries the phone, the e-mail, two social icons and the language switcher — all of which are
   reachable elsewhere: the phone and e-mail from the footer's contact block, the socials from the
   footer, and the language from the menu group below.

   Hidden with `display:none` rather than moved: nothing in it is unique to that bar. */
@media (max-width: 767.98px) {
    .top { display: none; }
}

/* The switcher the top bar used to hold, now inside the off-canvas menu. It exists in the markup
   at every width so nothing depends on a JS breakpoint, and is shown only where the bar is gone —
   the desktop keeps a single switcher, in the bar. */
/* !important because the accordion rule `.icon-list { display: flex !important }` also matches this
   (it is an .icon-list) and would otherwise force the in-menu language switcher visible on the desktop,
   where the top bar already carries one — the switcher then showed TWICE. */
.jc-menu-lang { display: none !important; }

@media (max-width: 767.98px) {
    .jc-menu-lang { display: flex !important; }
    .jc-menu-lang a.language { display: inline-flex; align-items: center; gap: 8px; }
    /* It is a language, not a section of the site: quieter than the group headings around it. */
    .jc-menu-lang a.language span { font-size: 18px; font-weight: 600; }
    .jc-menu-lang a.language i { color: var(--jc-gold); font-size: 16px; }
}

/* The .98 is not a typo. At a layout viewport of exactly 767 CSS px the browser resolves the media
   query against a FRACTIONAL width (767.x), so BOTH `max-width:767px` and `min-width:768px` come
   out false — measured: at 767 the bar reappeared and the in-menu switcher vanished, while 766 and
   768 were both correct. Half a pixel of slack closes that dead zone. */

/* ============================================== mobile header: logo and menu on one line

   The inner-page logo (`.img-responsive-logo2`) is a fixed 150px, and the legacy responsive sheet
   (responsive-*.css, ≤768) pushes the hamburger down with `margin: 60px 0 0 15px` so it centres
   against that tall logo. Measured on /ar/location/amman at 414px: the logo ran y=55→205 (150px)
   while the menu button sat at y=115 — the two read as stacked, not paired, and the 150px block
   shoved the page title far down.

   The client wants the logo pinned at the top, level with the menu, and the page title on its own
   line below. So on a phone: shrink the logo to a header-bar height, and drop the 60px offset the
   button no longer needs — a small top margin now CENTRES the ~26px button against the 56px logo so
   both sit on the same line. Inner pages only (`-logo2`); the home wordmark is untouched. */
@media (max-width: 767.98px) {
    /* The inner-page logo used to be forced down to 56px so it lined up with the hamburger. That
       made it half the size of the home wordmark (which renders ~121px from its natural aspect) and
       the club read the inner header as faint and unclear next to the home one. A taller logo
       brings it back to the home wordmark size (120px against home's 121px at 375px).

       The height is FIXED, not "auto". Auto sizes the logo from the column width, so the header grew
       with the viewport - 126px tall at 375, 134 at 390, 146 at 414 - and the single band-padding
       value below could not track it: at 414 the path slid 14px back under the logo and the
       hamburger fell off the logo centre line. A fixed height keeps the header the same height at
       every phone width, which is what makes one padding value correct everywhere. */
    .header .img-responsive-logo2 { height: 120px; }

    /* Centre the hamburger against whatever height the logo now has, so the two still read as one
       line rather than as a stacked pair. */
    .header .menu-button { margin-top: 46px; }
    /* On scroll the header becomes a compact sticky bar — shrink BOTH logos (home = -logo,
       inner = -logo2) to a small, clearly-reduced size so the bar reads as "minimised". */
    .header.scrolled .img-responsive-logo { height: 46px; }
    .header.scrolled .img-responsive-logo2 { height: 46px; }
    /* The legacy sheet yanks the scrolled menu button up with `top:-35px`, which on the short mobile
       sticky bar lifts it ABOVE the bar (y=32 vs the bar's top at y=50) so it vanishes on scroll.
       Cancel that offset and sit it inside the bar, level with the search icon. */
    .header.scrolled .menu-button { top: 0; margin-top: 15px; }

    /* The search icon (home header only) must sit on the SAME line as the hamburger. Measured glyph
       centres on prod mobile: hamburger y=114 (it aligns with the logo centre y=125), search y=83 —
       the search sat 31px HIGHER. Both glyphs are 25px tall, so matching centres means matching tops;
       search-img top 10px puts the glyph at y=70, and the hamburger glyph is at y=101, so +31px
       (top:41px) drops the search exactly onto the menu line. */
    .header .search-img { top: 41px; }
}

/* --------------------------------- the hero's scroll cue must clear the search panel

   `#section01 > a` is the club''s "scroll to the next section" chevron:
   `.demo a { position:absolute; bottom:20px; left:50%; transform:translate(0,-50%) }`, with the
   arrow image in a `span` pinned to the anchor''s TOP, above its 50px of padding. That -50%
   translate lifts the whole thing 25px higher than `bottom:20px` asks for.

   The quick-search panel floats over the same hero, and below the desktop layout its fields stack,
   so the panel grows down into the chevron. Measured overlaps: at 375px the panel''s «احجز الآن»
   ends at y=574 with the arrow at 560-584 (14px of overlap, the arrow sitting on the primary call
   to action), and the SAME 14px overlap at 768px.

   Dropping the translate — at every width, not inside a breakpoint — puts the anchor where
   `bottom:20px` actually places it and clears the panel everywhere: measured gaps of 11px at
   360/375/600/768 and 85px+ on the desktop, with the arrow still inside the hero. A breakpoint-
   scoped version fixed the phone and left 768-991 broken, which is why this is unconditional. */
#section01 > a {
    -webkit-transform: none;
    transform: none;
}

/* ======================================== vertical rhythm: headings and dead space

   Measured on /ar/suite/suite-no-123 at 375px, space above each section heading:
   «تقويم التوفّر» 30px, «من يستطيع حجز هذا الجناح» 80px, «الموقع» 60px, «أجنحة مشابهة» 160px.
   Five different values on one page, and the tightest one is the heading the client pointed at —
   `.title-c` has `padding-bottom:20px` and NO space above it at all, so whatever it follows decides
   its gap (here `.room-list-card`'s 30px bottom margin).

   Two fixes, both cause-level:

   1. `.content-inner` is `margin: 50px 0` on the desktop but the club's responsive sheet
      (responsive-*.css, the ≤767 block) blows it up to **140px top AND bottom**. That is the
      single source of the two worst holes on a phone: an empty 140px band between the page banner
      and the first content, and a 160px one before «أجنحة مشابهة». 44px keeps the sections
      separate without the void.

   2. Give the section headings their own space above instead of inheriting whatever sits over
      them. `:not(:first-child)` so a heading that OPENS a panel keeps sitting at its top edge —
      adding margin there would push it off its own box. */
@media (max-width: 767.98px) {
    .content-inner { margin: 44px 0; }
}

.title-c:not(:first-child),
.title-o:not(:first-child),
.title-inner:not(:first-child) { margin-top: 40px; }

/* The contact form's box already carries `margin-top: 44px` plus its own 20px of padding, so the
   heading that OPENS it does not need a top margin as well — measured 84px of empty space above «اتصل بنا»
   where every other heading on the page sits at 40. `:first-child` did not catch it because the
   box starts with a comment node in the rendered markup, so name the case explicitly. */
.jc-contact-form > .title-o:first-of-type { margin-top: 0; }

/* A heading that OPENS a padded panel must sit at the panel's padding edge. These are `<h3>`s, so
   Bootstrap's `h3 { margin-top: 20px }` applies, and a first-child margin does not collapse out
   through the panel's own `padding-top` — it stacks on it. Measured on the suite page:
   `.bg-navy` ends at y=2355, then `.gray-box` adds 10px of margin + 20px of padding, then the
   `<h3 class="title-o">` added 20 more, putting «من يستطيع حجز هذا الجناح» 80px below the panel
   above it while every other heading on the page sat at 40. Zeroing it leaves the panel's own
   padding to do the spacing — the same 30px the cards use. */
.gray-box > :first-child,
.bg-navy > :first-child,
.services-select > :first-child { margin-top: 0; }

/* ============================================== home: the club video band

   Full-bleed teal band, the player spanning the container inside it. The frame is locked to
   16/9 because the supplied file is 856x480 (1.783) — letting the element size itself from the
   video would leave a different gap on every browser before metadata loads, and `preload="none"`
   means metadata is not loaded at all until someone presses play.

   `object-fit: contain` rather than cover: this is a 480p source, so cropping it to fill a
   1265px-wide box would both blur it and cut the frame. Contained on a near-black mat it reads
   as a deliberate cinema strip at any width. */
.jc-videoband {
    /* This band is a <section>, and the legacy style.css carries `section { position: absolute }`
       (meant for the hero's #section01 overlay). Left alone it pulled this band out of flow, stretched
       it to the full page height and painted the whole home page teal over the content. Pin it back
       into normal flow — the class beats the bare `section` selector, so no !important needed. */
    position: relative;
    background: var(--jc-teal);
    padding: 56px 0;
}

/* The same legacy sheet also gives every `<section>` an absolutely-positioned `::after` (empty,
   invisible) that here covered the whole band and SWALLOWED every click — the play button and the
   video never received the tap, so the film would not start. It draws nothing, so let clicks fall
   through to the video and its play button underneath. */
.jc-videoband::after { pointer-events: none; }

.jc-videoband .title,
.jc-videoband .title-white { color: #fff; }

.jc-videoband__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 78vh;               /* a very wide window must not push the page below the fold */
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1c1b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.jc-videoband__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #0b1c1b;
}

/* The play affordance. With preload off the poster is all there is, and a bare poster gives no
   hint that it is a video — the browser draws no controls until the file starts loading. */
.jc-videoband__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--jc-teal);
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform .2s ease, background .2s ease;
}
.jc-videoband__play:hover,
.jc-videoband__play:focus-visible { background: #fff; transform: scale(1.06); }
.jc-videoband__play:focus-visible { outline: 3px solid var(--jc-gold); outline-offset: 4px; }
/* The icon is a triangle; nudge it off centre so it LOOKS centred in the circle. */
.jc-videoband__play i { margin-inline-start: 5px; }
.jc-videoband__frame.is-playing .jc-videoband__play { display: none; }

/* Before playback the visitor should see ONE play affordance — our centre overlay — and nothing
   else. A <video controls> with a poster otherwise draws the browser's own controls too: a big
   centre play button (which lands on top of ours → the reported "two play buttons") AND the bottom
   bar with its own play button. Hide the whole native control set until playback starts; the moment
   it does, `.is-playing` (set by jc-videoband.js) lets the native bar back for pause / seek /
   fullscreen, and our overlay is hidden by the rule above. `controls` stays on the element, and a
   <noscript> block in the view re-shows the native controls when scripting is off, so the video is
   still playable with no JS. */
.jc-videoband__frame:not(.is-playing) .jc-videoband__video::-webkit-media-controls { display: none; }

@media (max-width: 767.98px) {
    .jc-videoband { padding: 34px 0; }
    .jc-videoband__frame { border-radius: 10px; }
    .jc-videoband__play { width: 62px; height: 62px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-videoband__play:hover, .jc-videoband__play:focus-visible { transform: none; }
}

/* ================================================== news ticker

   Rendered only when the news category has published, titled pages — see the `if` in
   _ClubLayout. Nothing here needs an "empty" state because an empty strip never reaches the page.

   The marquee is CSS-only: the headline list is emitted twice and the track slides by exactly
   -50%, so the second copy is entering as the first leaves and the loop has no visible seam.
   Duration scales with nothing — a fixed 38s reads calmly at any list length; a length-derived
   speed made three headlines race and eight crawl. */
.jc-ticker {
    display: flex;
    align-items: stretch;
    background: var(--jc-mint);
    border-block: 1px solid rgba(40, 71, 69, .14);
    overflow: hidden;
}

.jc-ticker__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--jc-teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.jc-ticker__label i { color: var(--jc-gold); }

.jc-ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;                     /* without this the flex item refuses to shrink and the
                                         track pushes the page into a horizontal scroll */
    overflow: hidden;
    position: relative;
}

.jc-ticker__track {
    display: flex;
    width: max-content;
    animation: jc-ticker-run 38s linear infinite;
}
/* Reading a moving headline is hard enough; stop it while the visitor is on it. */
.jc-ticker:hover .jc-ticker__track,
.jc-ticker:focus-within .jc-ticker__track { animation-play-state: paused; }

.jc-ticker__list {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0 17px;
    list-style: none;
}
.jc-ticker__list li { margin: 0; white-space: nowrap; }
.jc-ticker__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: var(--jc-teal);
    font-size: 14.5px;
    font-weight: 600;
}
.jc-ticker__list a:hover,
.jc-ticker__list a:focus-visible { color: var(--jc-teal-dark); text-decoration: underline; }
.jc-ticker__list a i { font-size: 5px; color: var(--jc-gold); }

@keyframes jc-ticker-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* RTL: the track slides toward its own end, and that end is the other way round. */
html[dir="rtl"] .jc-ticker__track { animation-name: jc-ticker-run-rtl; }
@keyframes jc-ticker-run-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

/* Someone who asked the OS for less motion gets a plain scrollable strip instead of a marquee. */
@media (prefers-reduced-motion: reduce) {
    .jc-ticker__track { animation: none; width: auto; }
    .jc-ticker__viewport { overflow-x: auto; }
    .jc-ticker__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 767.98px) {
    .jc-ticker__label span { display: none; }   /* the megaphone alone carries it on a phone */
    .jc-ticker__label { padding: 10px 14px; }
    .jc-ticker__list { gap: 26px; }
}

/* ------------------------------------------------ member cancellation on "track my booking"

   Shown only while the club's two rules allow it (72h from submission, and never after the club
   confirms). Deliberately quiet: an outline button, not a red one — this is a normal action for a
   pending request, not a destructive last resort, and the confirm dialog already guards it. */
.jc-cancel-box {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(40, 71, 69, .14);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.jc-cancel-box label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--jc-gray);
}
.jc-cancel-field { flex: 1 1 240px; min-width: 0; }
.jc-cancel-field .form-control { width: 100%; }
.jc-cancel-btn { flex: 0 0 auto; }

/* Cancellation by OTP: the hint line takes a full row of the flex box, so it sits under the field
   instead of squeezing beside it; the resend control is a quiet text button under the box. */
.jc-cancel-hint {
    flex: 1 1 100%;
    order: 2;
    margin: 0;
    font-size: 13px;
    color: var(--jc-gray);
}
.jc-cancel-hint i { color: var(--jc-gold); margin-inline-end: 4px; }
.jc-cancel-box .jc-cancel-btn { order: 1; }
.jc-cancel-resend { margin-top: 8px; }
.jc-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--jc-teal);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.jc-link-btn:hover, .jc-link-btn:focus-visible { color: var(--jc-gold); }
.jc-link-btn i { margin-inline-end: 4px; }

@media (max-width: 575.98px) {
    .jc-cancel-box { flex-direction: column; align-items: stretch; }
    .jc-cancel-field { flex: 1 1 auto; }
    .jc-cancel-btn { width: 100%; }
}

/* The <video> fallback text — shown only when the browser can decode NEITHER source, which is
   precisely when it has to be readable. It inherited #333 onto the near-black mat: measured 1.3:1.
   White on #0b1c1b is 17.7:1. */
.jc-videoband__video { color: #fff; }

/* ------------------------------------------------ booking step 1: the multi-suite cart */
.jc-cart { margin-top: 18px; }
.jc-cart__list { display: flex; flex-direction: column; gap: 10px; }
.jc-cart__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--jc-line);
    border-radius: 10px;
    background: #fff;
}
.jc-cart__item__name { font-weight: 700; color: var(--jc-teal); }
.jc-cart__item__meta { font-size: 12.5px; color: var(--jc-gray); margin-top: 3px; }
.jc-cart__item__meta i { color: var(--jc-gold); }
.jc-cart__remove {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(192, 57, 43, .30);
    border-radius: 50%;
    background: #fff;
    color: #c0392b;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.jc-cart__remove:hover,
.jc-cart__remove:focus-visible { background: #c0392b; color: #fff; }
.jc-cart__remove:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 2px; }

/* ------------------------------------------------ publications: the list and the flipbook
   The list reuses the legacy `.hotels > ul > li` card, so only what is specific to a document
   is defined here: the cover drawn from page 1 of the PDF, the meta line, and the book itself. */
.jc-pubs .jc-pub-cover {
    height: 260px;
    background: var(--jc-band);
    border: 1px solid var(--jc-line);
    overflow: hidden;
    padding: 0;
}
.jc-pubs .jc-pub-cover i { font-size: 60px; color: var(--jc-teal); opacity: .35; }
/* Once page 1 is rasterised the box stops being a placeholder: the canvas fills it, top-aligned
   so the cover's title area is what shows rather than the middle of the page. */
.jc-pubs .jc-pub-cover.is-rendered {
    display: block;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--jc-line);
}
.jc-pubs .jc-pub-cover.is-rendered canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.jc-pub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 6px 0 10px;
    font-size: 12.5px;
    color: var(--jc-gray);
}
.jc-pub-meta i { color: var(--jc-gold); margin-inline-end: 4px; }

.jc-book {
    background: var(--jc-band);
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    padding: 14px;
    margin-bottom: 22px;
}
.jc-book:fullscreen { background: var(--jc-teal-dark); border: 0; border-radius: 0; padding: 24px; }
.jc-book:fullscreen .jc-book__stage { min-height: 70vh; }

.jc-book__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.jc-book__group { display: flex; align-items: center; gap: 8px; }
.jc-book__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--jc-line);
    border-radius: 8px;
    background: #fff;
    color: var(--jc-teal);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.jc-book__btn:hover:not(:disabled),
.jc-book__btn:focus-visible { background: var(--jc-teal); color: #fff; }
.jc-book__btn:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 2px; }
.jc-book__btn:disabled { opacity: .35; cursor: default; }
.jc-book__counter { font-size: 13px; color: var(--jc-gray); padding: 0 4px; }
.jc-book__counter b { color: var(--jc-teal); }

.jc-book__stage {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 420px;
    overflow: auto;
    /* The turning leaf is a 3D rotation, so the stage is the perspective origin. Without this the
       page would simply shrink instead of appearing to lift off the spine. */
    perspective: 2000px;
}
.jc-book__status {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    font-size: 14px;
    color: var(--jc-gray);
}
.jc-book__status.is-error { color: #c0392b; }

.jc-book__spread {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* Hidden until page 1 is drawn: an empty spread is two grey rectangles, which reads as a
       broken viewer rather than as a loading one. */
    visibility: hidden;
}
.jc-book__spread.is-ready { visibility: visible; }

.jc-book__leaf {
    position: relative;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
    cursor: pointer;
}
.jc-book__leaf.is-blank { background: transparent; box-shadow: none; cursor: default; }
/* The spine: a soft gradient where the two leaves meet, so the pair reads as one open book. */
.jc-book__leaf:first-child { border-radius: 4px 0 0 4px; }
.jc-book__leaf:last-of-type { border-radius: 0 4px 4px 0; }
.jc-book__spread::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 22px;
    margin-inline-start: -11px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .14) 45%,
                                rgba(0, 0, 0, .14) 55%, rgba(0, 0, 0, 0) 100%);
}
.jc-book__canvas { display: block; }

/* The turning leaf. It carries a pixel copy of the outgoing page and swings on the spine. */
.jc-book__turn {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}
.jc-book__turn.is-turning { opacity: 1; }
.jc-book__turn.from-right {
    transform-origin: left center;
    animation: jc-turn-right .5s ease-in forwards;
}
.jc-book__turn.from-left {
    transform-origin: right center;
    animation: jc-turn-left .5s ease-in forwards;
}
@keyframes jc-turn-right {
    from { transform: rotateY(0deg); opacity: 1; }
    to   { transform: rotateY(-105deg); opacity: .25; }
}
@keyframes jc-turn-left {
    from { transform: rotateY(0deg); opacity: 1; }
    to   { transform: rotateY(105deg); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
    .jc-book__turn { display: none; }
}

.jc-book__hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--jc-gray);
}



.jc-pub-body { margin: 6px 0 18px; line-height: 1.9; }
.jc-pub-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--jc-line);
    font-size: 13px;
    color: var(--jc-gray);
}
.jc-empty { padding: 40px 0; text-align: center; color: var(--jc-gray); }

@media (max-width: 767px) {
    .jc-book { padding: 10px; }
    .jc-book__stage { min-height: 300px; }
    .jc-book__toolbar { justify-content: center; }
}

/* ------------------------------------------------ home: the news band's heading row
   The "all news & announcements" link used to sit BELOW the cards in its own half-width column,
   which read as a fourth empty card and pushed the band taller for no reason. It now shares the
   heading line with the strapline and sits at the opposite end of it — `space-between` with
   logical properties, so it lands on the left in Arabic and on the right in English without a
   second rule. The legacy `.news-all-text` margin-bottom is kept. */
.news-all-text.jc-news-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.news-all-text.jc-news-head p { margin: 0; }
.news-all-text.jc-news-head .news-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease;
}
.news-all-text.jc-news-head .news-more:hover,
.news-all-text.jc-news-head .news-more:focus-visible { color: var(--jc-teal); }
.news-all-text.jc-news-head .news-more:focus-visible { outline: 2px solid var(--jc-gold); outline-offset: 3px; }
/* The legacy sheet gives `.news-more i` a bare `margin-right`, which in RTL puts the chevron's
   gap on the wrong side; the flex `gap` above handles the spacing for both directions. */
.news-all-text.jc-news-head .news-more i { margin: 0; color: var(--jc-gold); }

@media (max-width: 575.98px) {
    /* Too narrow for one line: stack, and keep the link aligned with the text above it. */
    .news-all-text.jc-news-head { display: block; }
    .news-all-text.jc-news-head .news-more { margin-top: 10px; }
}

/* ------------------------------------------------ booking wizard: the action row
   "Back" is an <a> and "Send the code" is a <button>, and the legacy sheet gives them different
   bottom margins — so on the wizard they came out different heights and sat at different vertical
   positions, the anchor riding higher than the button. `align-self: center` (further up this file)
   stopped the stretching but only aligned their CENTRES; a shorter anchor next to a taller button
   still reads as misaligned.

   These rows are always a pair of peers, so make them true peers: one stretch line, equal heights,
   and on a phone equal widths too, which is where the mismatch was most obvious. The `> .btn-header`
   specificity is what lets `stretch` win over the global `align-self: center`. */
.jc-wizard-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.jc-wizard-actions--md { margin-top: 14px; }
.jc-wizard-actions--lg { margin-top: 22px; }

.jc-wizard-actions > .btn-header {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
    line-height: 1.2;
}
/* The legacy `.btn-header i` margin lands on the wrong side in RTL; the flex gap above spaces the
   icon in both directions. */
.jc-wizard-actions > .btn-header i { margin: 0; }

@media (max-width: 575.98px) {
    /* One line, two buttons of identical size — the pair reads as a single control. */
    .jc-wizard-actions { flex-wrap: nowrap; }
    .jc-wizard-actions > .btn-header {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 12px;
        white-space: nowrap;
    }
}

/* ------------------------------------------------ phone: the band clears the fixed header

   `.header` is `position: fixed`, so the inner-page band (`.caption-inner`) starts at the top of
   the document and its own content sits UNDERNEATH the logo and the hamburger. Measured at 375px
   before this: the header occupied y 50→111 while the breadcrumb ran y 34→84, so the path was
   squeezed in beside the logo and the page title landed level with it — which is exactly what the
   club pointed at. (The header's wrappers already have `pointer-events: none` further up this file
   so the buried links stayed clickable; that fixed reachability, not the overlap.)

   The band now reserves room for the header, so the path and the <h1> begin BELOW the logo. The
   scrolled state does not need it: the header is a short sticky bar by then and the reader has
   already scrolled past the band. */
@media (max-width: 767.98px) {
    /* 182px = the header bottom edge (measured 176px at 375px) plus a little air, so the FIRST
       thing in the band — the path — starts below the logo rather than tucked under its lower
       corner. At 150px the path box still crossed the header by 26px. */
    .caption-inner { padding-top: 182px; padding-bottom: 26px; }

    /* With the band pushed down, the title is the first thing under the header — give it room to
       breathe and the size to read as the page's heading rather than as a caption. */
    .jc-banner-title { margin-top: 4px; }
    .jc-banner-title h1 { font-size: 23px; line-height: 1.5; }
    /* The path above it is supporting information now, not the page's name. */
    .breadcrumb-style { margin-bottom: 2px; padding: 0; font-size: 13.5px; }
}

/* The menu list reuses the publications cards; only the placeholder glyph differs. */
.jc-pubs .jc-pub-cover .fa-utensils { font-size: 54px; }