/*
    Daman storefront footer.

    Loaded as plain CSS from the footer view, NOT through the SCSS pipeline: the Flex base theme
    excludes module/page stylesheets from its compile, and a page-level import there would either be
    dropped or, worse, take the whole theme.css down with it. Theme colours are read through custom
    properties that _footer.scss already defines from theme.config, so the dark treatment follows
    `footer-bg` / `inverse-footer` rather than hardcoding a second source of truth.

    RTL: logical properties only (margin-inline, padding-inline, border-inline). This footer is read
    right-to-left by most of its audience — a single `left`/`right` here lands the strip on the wrong
    side in Hebrew and Arabic.
*/

/* ---------- Density ----------------------------------------------------------------
   The stock footer is airy. The reference is dense: tighter rows, smaller type, more per screen.
   Scoped to #footer so nothing here leaks into the page. */

#footer .footer-main {
    padding-block: 2.25rem 1.5rem;
}

#footer .footer-title {
    font-size: .95rem;
    font-weight: 700;
    margin-block-end: .85rem;
    letter-spacing: .01em;
}

#footer .cms-menu-linklist li > a {
    display: block;
    padding-block: .3rem;
    font-size: .85rem;
    line-height: 1.45;
    opacity: .78;
    transition: opacity .12s ease;
}

#footer .cms-menu-linklist li > a:hover {
    opacity: 1;
    text-decoration: none;
}

/* ---------- Centred block rows (social, payment, trust) -----------------------------
   The reference centres these under the columns rather than hanging them off one side, which also
   happens to be the only arrangement that reads identically in LTR and RTL. */

.daman-fblock {
    text-align: center;
    padding-block: 1.25rem;
    border-block-start: 1px solid rgba(255, 255, 255, .08);
}

.daman-fblock-title {
    font-size: .85rem;
    font-weight: 700;
    margin-block-end: .75rem;
    opacity: .9;
}

/* ---------- Payment strip -----------------------------------------------------------
   Two shapes share one row: a real brand image once the shop drops the official artwork into
   Themes/Daman/images/payment (see the README there), and a text chip until then. The chip is not a
   placeholder to be tolerated — it is a legible fallback, so a shop that never adds artwork still
   ships an honest, tidy "we accept" row instead of a line of broken images. */

.daman-pay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.daman-pay-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sized by height so each brand keeps its own aspect ratio — card marks are not square and
       forcing a box would squash them. */
    block-size: 30px;
    min-inline-size: 46px;
    padding-inline: .5rem;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.daman-pay-item img {
    block-size: 20px;
    inline-size: auto;
    max-inline-size: 100%;
    display: block;
}

/* The fallback chip. Latin, upper-case, tabular — a card brand is a wordmark, and it should not be
   re-shaped by the surrounding RTL paragraph direction. */
.daman-pay-item > span {
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1f2330;
    white-space: nowrap;
}

/* ---------- App install block --------------------------------------------------------
   The perk bullets get their tick from CSS, not from a ✓ typed into the text. A tick written into
   the content is a neutral character: dropped at the start of an English line inside an RTL page, the
   bidi algorithm resolves it to the END of the line — which is exactly how "Order updates ✓" appeared
   with the tick on the wrong side. As a ::before on a list item it is a separate box, laid out by the
   element's own direction, so it stays at the reading start in Hebrew, Arabic and English alike. */

.daman-app-perks li {
    position: relative;
    padding-inline-start: 1.25rem;
    padding-block: .15rem;
    opacity: .8;
}

.daman-app-perks li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    inset-inline-start: 0;
    font-weight: 700;
    opacity: .9;
}

/* ---------- Social row --------------------------------------------------------------- */

#footer .footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
}

#footer .footer-social .btn-social {
    inline-size: 40px;
    block-size: 40px;
    font-size: 1.05rem;
    opacity: .85;
    transition: opacity .12s ease, transform .12s ease;
}

#footer .footer-social .btn-social:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* ---------- Bottom bar ---------------------------------------------------------------- */

#footer .footer-bottom {
    font-size: .78rem;
    opacity: .7;
}

/* ---------- Mobile ---------------------------------------------------------------------
   The stock accordion (nav-collapsible / nav-toggler) already does what the reference does on a
   phone, so this only dresses it: a full-width tappable heading with a chevron that flips on open,
   and a hairline between sections. No JS — Bootstrap's collapse is already wired. */

@media (max-width: 767.98px) {
    #footer .footer-main {
        padding-block: .5rem;
    }

    #footer .footer-links {
        border-block-end: 1px solid rgba(255, 255, 255, .08);
    }

    #footer .footer-title.nav-toggler {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: .95rem;
        margin-block-end: 0;
        cursor: pointer;
        /* 44px minimum touch target — the heading IS the control on a phone. */
        min-block-size: 44px;
    }

    #footer .footer-title.nav-toggler::after {
        content: "";
        inline-size: .5rem;
        block-size: .5rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        /* Points down when collapsed; the [aria-expanded] rule below flips it. Rotation is
           direction-agnostic, so this needs no RTL variant. */
        transform: rotate(45deg) translateY(-25%);
        transition: transform .18s ease;
        opacity: .65;
        flex: 0 0 auto;
    }

    #footer .footer-title.nav-toggler[aria-expanded="true"]::after {
        transform: rotate(-135deg) translateY(-25%);
    }

    #footer .cms-menu-linklist {
        padding-block-end: .5rem;
    }

    #footer .cms-menu-linklist li > a {
        padding-block: .55rem;
    }
}

/* ============================================================
   Owner-editable footer (builder renderer) — density
   The band used Bootstrap's row/col with fixed col-lg-3 widths. Once the
   footer carries five sections (three link columns + app install +
   newsletter) that is 15 of 12 grid units, so the newsletter wrapped onto
   a row of its own and left a half-empty band above it. An auto-fitting
   grid takes as many columns as there are sections, evenly, whatever the
   owner switches on.
   ============================================================ */
#footer .fxr-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 1.75rem;
    align-items: start;               /* stops a short column stretching to the tallest */
}

#footer .fxr-col { min-width: 0; }

/* Tighter overall: the band was 2.25rem/1.5rem tall before its content even
   started, on a footer that is mostly short link lists. */
#footer .fxr-cols + *,
#footer .footer-main { padding-block: 1.5rem 1rem; }

#footer .fxr-col .footer-title { margin-block-end: .55rem; }
#footer .fxr-col .footer-link-list li { padding-block: .12rem; }

/* Middle bands (social, payments) sat on 1.25rem of padding each plus their
   own heading margin, which read as two large empty stripes. */
#footer .daman-fblock { padding-block: .9rem; }
#footer .daman-fblock-title { margin-block-end: .5rem; }

@media (max-width: 767.98px) {
    #footer .fxr-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Collapsible headings own their spacing on mobile — the grid gap would
       double it and push the accordion rows apart. */
    #footer .footer-main { padding-block: .25rem; }
}

/* A section that needs more than an equal share. The newsletter is a form, not a
   list of links: at one grid track its input-group wraps and the send button
   drops under the field. Two tracks restores the width the stock col-lg-3 gave
   it, without going back to fixed Bootstrap columns. */
#footer .fxr-col-wide { grid-column: span 2; }

/* Below the wrap point every section is full width anyway, so the span would
   only create an empty second track. */
@media (max-width: 767.98px) {
    #footer .fxr-col-wide { grid-column: auto; }
}

/* Keep the field and its button on one line even when the track is tight —
   input-group is flex, so the pill addon must not be allowed to wrap. */
#footer .footer-newsletter .input-group { flex-wrap: nowrap; }
#footer .footer-newsletter .input-group > input { min-width: 0; }

/* App-install artwork: a bare button wrapper, so the image reads as the control
   it is without inheriting button chrome. */
#footer .footer-app-img {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-block;
    max-width: 100%;
}

#footer .footer-app-img img { max-width: 100%; height: auto; display: block; border-radius: 10px; }
#footer .footer-app-img:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }