/*
    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;
    }
}