/* =============================================================================
   B2B hero slider
   -----------------------------------------------------------------------------
   The slider viewport reuses the .b2b-hero-ref__cards element, so all existing
   breakpoint rules in client-b2b.css / b2b-layout-unified.css (absolute
   position, width, height, transform: scale) keep applying untouched.

   Every slide is stacked into the same single grid cell (grid-area: 1 / -1) and
   re-declares its own internal grid, which means slide 1 keeps the original
   bento areas while slides 2 and 3 define their own layouts in the same space.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Viewport
   -------------------------------------------------------------------------- */

.b2b-page .b2b-hero-ref__cards.b2b-hero-slider {
    /* Collapse the inherited 4x2 bento to a single cell so each slide can declare
       its own internal grid. The existing breakpoint rules set these four
       properties with !important, so matching !important is required here.
       Position, width, height and transform are deliberately NOT touched — those
       keep coming from the existing breakpoints, which is what preserves the
       original placement and alignment. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    overflow: visible;
    touch-action: pan-y;

    /* Gap the slides re-apply internally, since it is zeroed on the viewport.
       Mirrors the gap each original breakpoint used (10px base, 16px elsewhere). */
    --b2b-slide-gap: 10px;
}

@media (min-width: 768px) {
    .b2b-page .b2b-hero-ref__cards.b2b-hero-slider {
        --b2b-slide-gap: 16px;
    }
}

/* -----------------------------------------------------------------------------
   2. Slides
   -------------------------------------------------------------------------- */

/* Slides share the single viewport cell. The controls and live region are also
   direct grid children — left unplaced they add implicit columns that squeeze
   the slides into a fraction of the width, so they are pinned to the same cell.
   Scoped to those two elements only: a blanket `> *` would override the named
   grid areas the cards inside each slide rely on. */
.b2b-page .b2b-hero-slider > .b2b-hero-slider__controls,
.b2b-page .b2b-hero-slider > .b2b-hero-slider__live {
    grid-area: 1 / 1;
}

.b2b-page .b2b-hero-slide {
    grid-area: 1 / 1;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    column-gap: var(--b2b-slide-gap, 16px);
    row-gap: var(--b2b-slide-gap, 16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(0.985);
    transition:
        opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 520ms;
    will-change: opacity, transform;
}

.b2b-page .b2b-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s, 0s, 0s;
    z-index: 2;
}

/* Inactive slides stay laid out (so their grid template resolves) but are taken
   out of the accessibility tree and pointer flow by JS via aria-hidden/inert.
   The `hidden` attribute is deliberately NOT used: `[hidden]` adds specificity
   that would beat the per-slide grid-template rules below and collapse them. */
.b2b-page .b2b-hero-slide[aria-hidden='true'] {
    pointer-events: none;
}

/* Directional entry: next moves forward, prev moves back. */
.b2b-page .b2b-hero-slider[data-direction='next'] .b2b-hero-slide:not(.is-active) {
    transform: translate3d(-2.5%, 14px, 0) scale(0.985);
}

.b2b-page .b2b-hero-slider[data-direction='prev'] .b2b-hero-slide:not(.is-active) {
    transform: translate3d(2.5%, 14px, 0) scale(0.985);
}

/* The original card entry animation must not replay on every slide change. */
.b2b-page .b2b-hero-slider .b2b-hero-ref__card {
    animation: none;
}

.b2b-page .b2b-hero-slide.is-active .b2b-hero-ref__card {
    animation: b2b-hero-ref-card 420ms cubic-bezier(0.42, 0, 0.58, 1) both;
}

/* -----------------------------------------------------------------------------
   3. Slide 1 : campaigns — restores the original bento grid
   -------------------------------------------------------------------------- */

.b2b-page .b2b-hero-slide--campaigns {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'shield stats plane target' 'progress stats marketing marketing' !important;
}

/* -----------------------------------------------------------------------------
   4. Slides 2 and 3 reuse bento-1's grid areas verbatim
   -------------------------------------------------------------------------- */

.b2b-page .b2b-hero-slide--coupons,
.b2b-page .b2b-hero-slide--loyalty {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'shield stats plane target' 'progress stats marketing marketing' !important;
}

/* -----------------------------------------------------------------------------
   5. World tiles — ONE shell for every card on slides 2 and 3.

   Slides 2 and 3 are full-bleed photographic sets, unlike bento-1 where each
   card had its own art direction. Mixing per-card treatments there produced
   four different caption styles side by side, so every tile here shares:
     - the same dark bottom scrim,
     - the same white caption at the same size and position,
     - the same optional KPI block at the top.
   -------------------------------------------------------------------------- */

.b2b-page .b2b-world-tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border-radius: 16px;
    isolation: isolate;
}

/* A single ground tone behind every photograph. Stated with !important because
   b2b-layout-unified.css forces its own background on --shield and --target. */
.b2b-page .b2b-hero-slider .b2b-hero-ref__card.b2b-world-tile {
    background: #0b1b2b !important;
}

/* Artwork fills the tile edge to edge. !important is required because
   b2b-layout-unified.css sizes `--shield img` as a centred cutout
   (`top:40% !important; width:60% !important`) for the original bento, which
   would otherwise leave this tile's photo floating above a bare strip. */
.b2b-page .b2b-hero-slider .b2b-world-tile__bg {
    position: absolute !important;
    /* Longhands, not the `inset` shorthand: the competing rule sets `top`
       directly, and a shorthand at equal specificity does not reliably beat an
       !important longhand. */
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* `--shield img` is also centred with translate(-50%, -50%) for the
       original bento; without this the photo stays shifted up and left. */
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
}

/* The rewards showcase is a tall scene; bias the crop toward the products. */
.b2b-page .b2b-hero-slider .b2b-world-tile__bg--rewards {
    object-position: 50% 72%;
}

/* One scrim for all tiles: dark at the bottom where the caption sits, clear at
   the top so the artwork reads. A second, lighter wash from the top keeps the
   KPI legible on the two tiles that carry one. */
.b2b-page .b2b-world-tile::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
    background: linear-gradient(0deg, rgba(6, 20, 34, 0.92) 0%, rgba(6, 20, 34, 0.62) 22%, rgba(6, 20, 34, 0) 52%);
    pointer-events: none;
}

.b2b-page .b2b-world-tile--kpi::before {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: 44%;
    content: '';
    background: linear-gradient(180deg, rgba(6, 20, 34, 0.82) 0%, rgba(6, 20, 34, 0.34) 52%, rgba(6, 20, 34, 0) 100%);
    pointer-events: none;
}

/* ---- Captions: one treatment, overriding bento-1's four ------------------ */

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__card-caption {
    inset-inline: 16px;
    inset-block-end: 16px;
    z-index: 3;
    max-width: none;
    padding: 0;
    border-radius: 0;
    color: #fff;
    font-size: clamp(13px, 1.15vw, 17px);
    font-weight: 800;
    line-height: 1.3;
    text-align: start;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* ---- KPI block: same position and scale on every tile that has one ------- */

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title {
    position: absolute;
    inset-block-start: 18px;
    inset-inline: 16px;
    inset-block-end: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: start;
    transform: none;
}

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title strong {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(26px, 2.6vw, 42px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title span {
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(10px, 0.86vw, 13px);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* The orbs belong to bento-1's dark card and muddy a photographic tile. */
.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-orb {
    display: none;
}

/* ---- Copy block: title + supporting line, same rhythm as the caption ----- */

.b2b-page .b2b-world-tile__copy {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 16px 16px;
}

.b2b-page .b2b-world-tile__copy strong {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(14px, 1.3vw, 19px);
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.b2b-page .b2b-world-tile__copy span {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(10px, 0.88vw, 13px);
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ---- Figure block: a big number over the same bottom scrim --------------- */

.b2b-page .b2b-world-tile__figure {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
}

.b2b-page .b2b-world-tile__figure strong {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.b2b-page .b2b-world-tile__figure span {
    margin-top: 7px;
    color: #fff;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.b2b-page .b2b-world-tile__figure small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(9px, 0.76vw, 11px);
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------
   8. Content hierarchy for coupons and loyalty
   -------------------------------------------------------------------------- */

/* Each image keeps its original art untouched. These rules only give the
   supplied message a reliable reading area at every bento size. */
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='rtl'] {
    direction: rtl;
}

.b2b-page .b2b-hero-slider .b2b-world-tile[dir='ltr'] {
    direction: ltr;
}

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__card-caption {
    position: absolute !important;
    inset-inline: 14px !important;
    inset-block-end: 14px !important;
    z-index: 3;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 !important;
    padding: 8px 10px 7px !important;
    overflow-wrap: anywhere;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(5, 18, 31, 0.78), rgba(5, 18, 31, 0.38));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    font-size: clamp(11px, 1vw, 15px) !important;
    font-weight: 800;
    line-height: 1.45;
    text-align: start !important;
    text-shadow: none;
    backdrop-filter: blur(7px);
}

/* The wide card deliberately leaves space for the product scene. */
.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__card-caption--marketing {
    max-width: min(68%, 440px) !important;
}

/* KPI cards: number first, explanation second, and the outcome in a separate
   lower panel. This prevents the two messages from competing visually. */
.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title {
    inset-block-start: 14px !important;
    inset-inline: 14px !important;
    display: inline-flex;
    width: max-content;
    max-width: calc(100% - 28px);
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    background: rgba(5, 18, 31, 0.44);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.13);
    backdrop-filter: blur(7px);
}

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title strong {
    font-size: clamp(24px, 2.35vw, 38px) !important;
    white-space: nowrap;
}

.b2b-page .b2b-hero-slider .b2b-world-tile .b2b-hero-ref__stats-title span {
    max-width: 150px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(9px, 0.76vw, 12px) !important;
    font-weight: 700;
    line-height: 1.35;
}

/* The title-and-description card uses a single, compact bottom panel. */
.b2b-page .b2b-hero-slider .b2b-world-tile__copy,
.b2b-page .b2b-hero-slider .b2b-world-tile__figure {
    inset-inline: 14px !important;
    inset-block-end: 14px !important;
    width: auto !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(5, 18, 31, 0.82), rgba(5, 18, 31, 0.44));
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(7px);
}

.b2b-page .b2b-hero-slider .b2b-world-tile__copy strong {
    font-size: clamp(12px, 1.08vw, 16px) !important;
    line-height: 1.3;
}

.b2b-page .b2b-hero-slider .b2b-world-tile__copy span {
    font-size: clamp(9px, 0.76vw, 12px) !important;
    line-height: 1.45;
}

.b2b-page .b2b-hero-slider .b2b-world-tile__figure strong {
    font-size: clamp(25px, 2.45vw, 40px) !important;
    white-space: nowrap;
}

.b2b-page .b2b-hero-slider .b2b-world-tile__figure span {
    margin-top: 4px;
    font-size: clamp(10px, 0.82vw, 13px) !important;
    line-height: 1.3;
}

.b2b-page .b2b-hero-slider .b2b-world-tile__figure small {
    font-size: clamp(8px, 0.66vw, 10px) !important;
    line-height: 1.4;
}

.b2b-page .b2b-hero-slider .b2b-world-tile[dir='rtl'] .b2b-hero-ref__card-caption,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='rtl'] .b2b-hero-ref__stats-title,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='rtl'] .b2b-world-tile__copy,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='rtl'] .b2b-world-tile__figure {
    text-align: right !important;
}

.b2b-page .b2b-hero-slider .b2b-world-tile[dir='ltr'] .b2b-hero-ref__card-caption,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='ltr'] .b2b-hero-ref__stats-title,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='ltr'] .b2b-world-tile__copy,
.b2b-page .b2b-hero-slider .b2b-world-tile[dir='ltr'] .b2b-world-tile__figure {
    text-align: left !important;
}


/* -----------------------------------------------------------------------------
   9. Controls
   -------------------------------------------------------------------------- */

.b2b-page .b2b-hero-slider__controls {
    position: absolute;
    inset-block-end: -46px;
    inset-inline-start: 50%;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateX(-50%);
}

[dir='rtl'] .b2b-page .b2b-hero-slider__controls {
    transform: translateX(50%);
}

.b2b-page .b2b-hero-slider__arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(18, 74, 120, 0.16);
    border-radius: 50%;
    color: #124a78;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(9, 40, 70, 0.12);
    cursor: pointer;
    transition:
        transform 200ms ease,
        background 200ms ease,
        color 200ms ease;
}

.b2b-page .b2b-hero-slider__arrow svg {
    width: 17px;
    height: 17px;
}

[dir='rtl'] .b2b-page .b2b-hero-slider__arrow svg {
    transform: scaleX(-1);
}

.b2b-page .b2b-hero-slider__arrow:hover {
    color: #fff;
    background: linear-gradient(135deg, #1668a8, #37c2d6);
    transform: translateY(-1px);
}

.b2b-page .b2b-hero-slider__arrow:focus-visible {
    outline: 2px solid #1668a8;
    outline-offset: 2px;
}

.b2b-page .b2b-hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-page .b2b-hero-slider__dot {
    position: relative;
    overflow: hidden;
    width: 26px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 74, 120, 0.18);
    cursor: pointer;
    transition:
        width 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background 240ms ease;
}

.b2b-page .b2b-hero-slider__dot:hover {
    background: rgba(18, 74, 120, 0.32);
}

.b2b-page .b2b-hero-slider__dot:focus-visible {
    outline: 2px solid #1668a8;
    outline-offset: 3px;
}

.b2b-page .b2b-hero-slider__dot.is-active {
    width: 52px;
    background: rgba(18, 74, 120, 0.18);
}

.b2b-page .b2b-hero-slider__dot-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #1668a8, #37c2d6);
}

[dir='rtl'] .b2b-page .b2b-hero-slider__dot-fill {
    background: linear-gradient(270deg, #1668a8, #37c2d6);
}

/* Progress fill runs only while autoplay is actually running. */
.b2b-page .b2b-hero-slider__dot.is-active .b2b-hero-slider__dot-fill {
    width: 100%;
    transition: width var(--b2b-slider-interval, 6000ms) linear;
}

.b2b-page .b2b-hero-slider__dot.is-active .b2b-hero-slider__dot-fill.is-reset {
    width: 0;
    transition: none;
}

/* Autoplay paused or disabled: show a solid fill instead of a running bar. */
.b2b-page .b2b-hero-slider.is-paused .b2b-hero-slider__dot.is-active .b2b-hero-slider__dot-fill,
.b2b-page .b2b-hero-slider:not([data-autoplay='on']) .b2b-hero-slider__dot.is-active .b2b-hero-slider__dot-fill {
    width: 100%;
    transition: none;
}

.b2b-page .b2b-hero-slider__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   10. Tablet / mobile — the viewport collapses to a single column at <=829px,
       so slides 2 and 3 restack to match the existing 3-row footprint.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .b2b-page .b2b-hero-slider__controls {
        inset-block-end: -40px;
        gap: 10px;
    }

    .b2b-page .b2b-hero-slider__arrow {
        width: 30px;
        height: 30px;
    }
}

/* Below 768px the original bento collapses to one stacked column; at and
   above it the 4-column grid returns (scaled), so the stacked overrides must
   stop at 767px — not 829px, which was clipping the tablet layout. */
@media (max-width: 767px) {
    /* The viewport is a single stacked column here. The original mobile bento
       used explicit row heights (496 / 240 / 240) AND gave the cards matching
       fixed heights, so the slide has to reproduce those exact rows — an even
       `repeat(3, 1fr)` leaves every card overflowing its own row. */
    .b2b-page .b2b-hero-slide {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 496px 240px 240px !important;
    }

    /* Cards fill whatever row they land in rather than carrying the fixed
       heights client-b2b.css sets for the non-slider bento. */
    .b2b-page .b2b-hero-slider .b2b-hero-ref__card {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* All three slides share bento-1's areas, so one rule covers them. The
       existing mobile bento only shows stats / plane / progress; the cards
       outside that footprint are hidden by the original stylesheet's
       `--shield, --target, --marketing { display: none }` rule, which the
       world tiles inherit because they reuse those very classes. */
    .b2b-page .b2b-hero-slide--campaigns,
    .b2b-page .b2b-hero-slide--coupons,
    .b2b-page .b2b-hero-slide--loyalty {
        grid-template-areas: 'stats' 'plane' 'progress' !important;
    }

    /* The stats card is 496px tall here, so its top wash needs to cover less
       of the card for the KPI to still sit on a dark band. */
    .b2b-page .b2b-world-tile--kpi::before {
        height: 150px;
    }

    /* The stacked cards are taller, so the scrim can start lower. */
    .b2b-page .b2b-world-tile::after {
        background: linear-gradient(0deg, rgba(6, 20, 34, 0.92) 0%, rgba(6, 20, 34, 0.6) 16%, rgba(6, 20, 34, 0) 40%);
    }
}

@media (max-width: 767px) {
    .b2b-page .b2b-hero-slider__controls {
        inset-block-end: -36px;
    }

    .b2b-page .b2b-hero-slider__dot {
        width: 22px;
    }

    .b2b-page .b2b-hero-slider__dot.is-active {
        width: 42px;
    }
}

/* -----------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .b2b-page .b2b-hero-slide {
        transition: opacity 1ms linear, visibility 0s linear 1ms;
        transform: none !important;
    }

    .b2b-page .b2b-hero-slide.is-active .b2b-hero-ref__card {
        animation: none;
    }

    .b2b-page .b2b-hero-slider__dot,
    .b2b-page .b2b-hero-slider__dot-fill,
    .b2b-page .b2b-hero-slider__arrow {
        transition: none !important;
    }
}