/*
 * HaloClean Carousel
 *
 * Variables are namespaced --hcc-* and scoped to .hc-carousel. The site's booking
 * plugin already owns --hc-* on :root (--hc-radius, --hc-brand and friends), so a
 * shared prefix here would silently inherit its values.
 *
 * Slides are stacked in one grid cell rather than laid out in a translating track.
 * That keeps the frame a fixed size (no layout shift as slides change), makes the
 * fade effect trivial, and sidesteps the RTL sign-flip bugs a translated track
 * invites on this site's Arabic pages.
 */

.hc-carousel {
    --hcc-ratio: 3 / 2;
    --hcc-radius: 10px;
    --hcc-speed: 600ms;
    /* Inline-axis sign for the slide effect. Declared HERE, on the root, because
       the script overrides it with an inline style: a slide that declared its own
       --hcc-dir would beat the inherited value and RTL would never flip. */
    --hcc-dir: 1;
    --hcc-ease: cubic-bezier(.4, 0, .2, 1);
    --hcc-brand: #001837;
    --hcc-accent: #fba311;
    --hcc-chrome: rgba(255, 255, 255, .92);
    --hcc-shadow: 0 6px 24px rgba(0, 24, 55, .16);

    position: relative;
    width: 100%;
    margin-inline: 0;
}

.hc-carousel *,
.hc-carousel *::before,
.hc-carousel *::after {
    box-sizing: border-box;
}

/* ── Frame ──────────────────────────────────────────────────────────────── */

.hc-carousel__viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--hcc-radius);
    background: #eef1f5;
    box-shadow: var(--hcc-shadow);
}

.hc-carousel__track {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Every slide occupies the same cell, so the frame is sized by the tallest and
   never reflows mid-rotation. */
.hc-carousel__slide {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Deliberately over-specific (0,3,0). Page builders routinely emit per-widget
   rules like `.elementor-element-abc123 img { width: 74% }` which are (0,1,1) and
   would otherwise win here, collapsing the slide inside its own frame. */
.hc-carousel .hc-carousel__slide .hc-carousel__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--hcc-ratio);
    object-fit: cover;
    object-position: center;
}

/* ratio="auto" resolves to `aspect-ratio: auto`, i.e. each image keeps its own
   intrinsic shape and nothing is cropped. */

.hc-carousel__caption {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: #56606e;
    text-align: center;
}

/* ── Transitions ────────────────────────────────────────────────────────── */

.hc-carousel__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hcc-speed) var(--hcc-ease),
                visibility 0s linear var(--hcc-speed);
}

.hc-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--hcc-speed) var(--hcc-ease),
                visibility 0s;
}

/* The slide effect adds a horizontal offset on top of the fade. --hcc-dir is
   written by the script (1 for LTR, -1 for RTL) so travel always reads
   "forwards" in the page's own reading direction. */
.hc-carousel--slide .hc-carousel__slide {
    transform: translateX(calc(var(--hcc-dir) * var(--hcc-offset, 0%)));
    transition: opacity var(--hcc-speed) var(--hcc-ease),
                transform var(--hcc-speed) var(--hcc-ease),
                visibility 0s linear var(--hcc-speed);
}

.hc-carousel--slide .hc-carousel__slide.is-active {
    --hcc-offset: 0%;
    transition: opacity var(--hcc-speed) var(--hcc-ease),
                transform var(--hcc-speed) var(--hcc-ease),
                visibility 0s;
}

.hc-carousel--slide .hc-carousel__slide.is-leaving { --hcc-offset: -18%; }
.hc-carousel--slide .hc-carousel__slide.is-entering { --hcc-offset: 18%; }
.hc-carousel--slide.is-reversing .hc-carousel__slide.is-leaving { --hcc-offset: 18%; }
.hc-carousel--slide.is-reversing .hc-carousel__slide.is-entering { --hcc-offset: -18%; }

/* Slide one carries .is-active from the server, so the correct single slide is
   painted before the script runs - no flash of the stacked set. */
.hc-carousel--static .hc-carousel__slide {
    opacity: 1;
    visibility: visible;
}

/* ── Controls: neutralising the host theme ─────────────────────────────────
 *
 * This component is dropped into pages whose theme and page builder both style
 * bare <button> elements. On this site something at (0,1,1) - one class plus the
 * element - paints every button with Elementor's global primary colour, which is
 * how the arrows and dots first shipped as blue blobs.
 *
 * Every control rule below therefore qualifies the class with `button`, giving
 * (0,2,1) and beating any single-class-plus-element theme rule outright. No
 * !important is needed, and the proof is empirical: the .is-active dot at (0,2,0)
 * already won, so nothing in the cascade here is flagged important.
 */

.hc-carousel button.hc-carousel__arrow,
.hc-carousel button.hc-carousel__dot,
.hc-carousel button.hc-carousel__toggle {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    font: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */

.hc-carousel button.hc-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;

    border-radius: 50%;
    background: var(--hcc-chrome);
    color: var(--hcc-brand);

    opacity: .85;
    box-shadow: 0 2px 10px rgba(0, 24, 55, .22);
    transition: opacity .2s var(--hcc-ease),
                background-color .2s var(--hcc-ease),
                transform .2s var(--hcc-ease);
}

.hc-carousel button.hc-carousel__arrow:hover,
.hc-carousel button.hc-carousel__arrow:focus-visible {
    opacity: 1;
    background: #fff;
    color: var(--hcc-brand);
}

.hc-carousel button.hc-carousel__arrow:focus-visible {
    outline: 3px solid var(--hcc-accent);
    outline-offset: 2px;
}

.hc-carousel button.hc-carousel__arrow[disabled] {
    opacity: .3;
    cursor: default;
}

/* Logical insets so the arrows swap sides automatically on the Arabic pages. */
.hc-carousel button.hc-carousel__arrow--prev { inset-inline-start: 10px; }
.hc-carousel button.hc-carousel__arrow--next { inset-inline-end: 10px; }

/* The chevrons are drawn LTR; mirror them, not the buttons, in RTL. */
[dir="rtl"] .hc-carousel__chevron { transform: scaleX(-1); }

.hc-carousel__chevron {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* ── Dots + pause ───────────────────────────────────────────────────────── */

.hc-carousel__controls {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 12px 12px;

    /* These are bright interiors - white dots on a white bathroom wall would be
       invisible without a scrim. */
    background: linear-gradient(to top, rgba(0, 24, 55, .45), rgba(0, 24, 55, 0));
    pointer-events: none;
}

.hc-carousel__controls > * { pointer-events: auto; }

.hc-carousel__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* The shadow is what keeps an inactive dot readable when the slide behind it is
   near-white, which for this kind of interior photography is most of them. */
.hc-carousel button.hc-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 1px 3px rgba(0, 24, 55, .5);
    transition: width .25s var(--hcc-ease), background-color .25s var(--hcc-ease);
}

.hc-carousel button.hc-carousel__dot:hover { background: rgba(255, 255, 255, .85); }

.hc-carousel button.hc-carousel__dot.is-active {
    width: 22px;
    background: #fff;
}

.hc-carousel button.hc-carousel__dot:focus-visible {
    outline: 3px solid var(--hcc-accent);
    outline-offset: 3px;
}

.hc-carousel button.hc-carousel__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: background-color .25s var(--hcc-ease);
}

.hc-carousel button.hc-carousel__toggle:hover { background: rgba(255, 255, 255, .85); }

.hc-carousel button.hc-carousel__toggle:focus-visible {
    outline: 3px solid var(--hcc-accent);
    outline-offset: 3px;
}

/* Pause glyph: two bars. Swapped for a single triangle when paused. */
.hc-carousel__toggle-icon {
    width: 8px;
    height: 9px;
    border-inline: 3px solid var(--hcc-brand);
}

.hc-carousel.is-paused .hc-carousel__toggle-icon {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-inline-start: 8px solid var(--hcc-brand);
    border-inline-end: 0;
    margin-inline-start: 3px;
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .hc-carousel__arrow { width: 32px; height: 32px; }
    .hc-carousel__chevron { width: 17px; height: 17px; }
    .hc-carousel__controls { padding: 22px 10px 10px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* The script also stops autoplay under this query; this covers the manual
   transitions that remain. */
@media (prefers-reduced-motion: reduce) {
    .hc-carousel__slide,
    .hc-carousel--slide .hc-carousel__slide {
        transition: opacity 1ms linear, visibility 0s;
        transform: none;
    }

    .hc-carousel__arrow,
    .hc-carousel__dot,
    .hc-carousel__toggle {
        transition: none;
    }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
    .hc-carousel__arrow,
    .hc-carousel__controls { display: none; }

    .hc-carousel__slide { display: none; }
    .hc-carousel__slide.is-active { display: block; opacity: 1; visibility: visible; }
}