/* =========================================================================
   Storefront blocks (2026-10)

   Loaded on every storefront page from layouts/master.blade.php, after
   kalasoon.css. Kept in its own file because the src and public copies of
   kalasoon.css have drifted apart; this one must be uploaded to BOTH
   themes/DefaultTheme/src/resources/assets/css/ and
   public/themes/defaultTheme/css/ (the browser reads the public one).

   1. FAQ accordion          partials/faq-accordion.blade.php   .ks-faq
   2. Pre-footer social band partials/social-cta.blade.php      .ks-social-cta
   3. Listing filters        products/partials/category-filters .ks-filter-*,
                                                                .ks-brand-filter

   All rules use logical properties (inline-start/end), so the same rules
   hold on the RTL and the LTR (English) storefront.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. FAQ accordion

   <details>/<summary>: opens without JavaScript and is keyboard operable.
   No outer frame of its own — the page supplies it (.dt-sn on posts,
   categories and brands; the card rule of .product-bottom-main > section on
   the product page).
   ------------------------------------------------------------------------- */

.ks-faq {
    display: block;

    /* The theme section helper `.dt-sl` is `width:100%; float:right`, so the
       related-products slider that precedes this block on the product page is
       a full-width float. A following in-flow block starts level with it, and
       .ks-faq-head / .ks-faq-list are flex containers, i.e. BFC roots, which
       may not overlap a float: Chrome shrinks them to the free inline space,
       which is zero, and the questions render one character per line.
       Clearing puts the block below the floats, where it gets its full width.
       Same failure mode as `main.main-content` in kalasoon.css. */
    clear: both;
}

.ks-faq.dt-sn {
    padding: 18px 16px;
}

.ks-faq-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ks-faq-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ebf6f8;
    color: #0097a7;
    font-size: 23px;
    line-height: 1;
}

.ks-faq-heading {
    min-width: 0;
}

.ks-faq-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
    color: #1f1f1f;
}

.ks-faq-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: #7a7a7a;
}

.ks-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ks-faq-item {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    transition: border-color 0.15s ease-in, box-shadow 0.15s ease-in;
}

.ks-faq-item[open] {
    border-color: #b2e5ec;
    box-shadow: 0 4px 14px rgba(0, 151, 167, 0.08);
}

/* Smooth open/close.

   `<details>` has no box of its own to animate: what grows and shrinks is
   the `::details-content` pseudo-element. Three things are needed for it to
   slide rather than snap.

   * Its height runs 0 -> `auto`, and a keyword is only interpolable where
     `interpolate-size: allow-keywords` is in effect. That property is
     inherited, so declaring it on the item covers the pseudo-element
     without touching the rest of the page.
   * The browser also flips `content-visibility` on the pseudo-element when
     the element closes. That is a discrete property, so it would hide the
     content at frame 0 and leave an empty box collapsing — unless the
     transition is told to hold the old value for the whole run, which is
     what `transition-behavior: allow-discrete` does.
   * `overflow: clip` keeps the answer inside the shrinking box instead of
     spilling over the question below it mid-animation.

   A browser that does not know `::details-content` drops these two rules as
   invalid and keeps today's instant open/close, which is the same fallback
   the reduced-motion block at the end of this section asks for. */

.ks-faq-item {
    interpolate-size: allow-keywords;
}

.ks-faq-item::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
        block-size 0.3s ease,
        opacity 0.2s ease,
        content-visibility 0.3s;
    transition-behavior: allow-discrete;
}

.ks-faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
}

.ks-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    color: #1f1f1f;
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-radius: 12px;
    outline: 0;
}

.ks-faq-q::-webkit-details-marker {
    display: none;
}

.ks-faq-q::marker {
    content: '';
}

.ks-faq-q:hover .ks-faq-q-text {
    color: #0097a7;
}

.ks-faq-q:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

.ks-faq-q-text {
    min-width: 0;
    overflow-wrap: anywhere;
    transition: color 0.15s ease-in;
}

.ks-faq-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f7;
    color: #0097a7;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
}

.ks-faq-item[open] .ks-faq-chevron {
    transform: rotate(180deg);
    background: #0097a7;
    color: #fff;
}

.ks-faq-a {
    padding: 0 16px 16px;
    font-size: 13.5px;
    line-height: 2.1;
    color: #4a4f55;
    overflow-wrap: anywhere;
}

/* Everything above is decoration; the accordion still opens and closes
   without any of it. */
@media (prefers-reduced-motion: reduce) {

    .ks-faq-item,
    .ks-faq-item::details-content,
    .ks-faq-q-text,
    .ks-faq-chevron {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .ks-faq.dt-sn {
        padding: 14px 12px;
    }

    .ks-faq-badge {
        width: 36px;
        height: 36px;
        font-size: 20px;
        border-radius: 10px;
    }

    .ks-faq-title {
        font-size: 15px;
    }

    .ks-faq-q {
        padding: 11px 12px;
        font-size: 13px;
    }

    .ks-faq-chevron {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }

    .ks-faq-a {
        padding: 0 12px 13px;
        font-size: 12.5px;
    }
}


/* -------------------------------------------------------------------------
   2. Pre-footer social band

   The wallet balance banner of the v2 panel (.kd2-balance in
   dashboard-v2.css) restated here: that file is only loaded on /panel and
   its variables only exist under .kd2. Keep the two in step.
   ------------------------------------------------------------------------- */

.ks-social-cta {
    margin-top: 24px;
}

.ks-social-cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 26px 28px;
    border-radius: 20px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #0783a6 0%, #05b8e8 100%);
    box-shadow: 0 8px 32px rgba(7, 131, 166, 0.28);
}

.ks-social-cta-card::before,
.ks-social-cta-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
}

.ks-social-cta-card::before {
    top: -40px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}

.ks-social-cta-card::after {
    bottom: -30px;
    inset-inline-end: 60px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
}

.ks-social-cta-body,
.ks-social-cta-links {
    position: relative;
    z-index: 1;
}

.ks-social-cta-body {
    flex: 1 1 320px;
    min-width: 0;
}

.ks-social-cta-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
}

.ks-social-cta-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.85);
}

.ks-social-cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-social-cta-links li {
    margin: 0;
}

.ks-social-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in, transform 0.15s ease-in;
}

.ks-social-cta-link i {
    font-size: 22px;
    line-height: 1;
}

.ks-social-cta-link svg {
    flex: 0 0 auto;
}

.ks-social-cta-link:hover,
.ks-social-cta-link:focus {
    background: rgba(255, 255, 255, 0.30);
    transform: translateY(-2px);
}

.ks-social-cta-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Names beside the icons only where five of them fit on one line next to
   the text; below that the links are icon squares (each still carries an
   aria-label and a title). */
@media (max-width: 1199.98px) {
    .ks-social-cta-name {
        display: none;
    }

    .ks-social-cta-link {
        width: 46px;
        padding: 0;
    }
}

/* Tablet and phone: text on top, icons centred underneath. */
@media (max-width: 767.98px) {
    .ks-social-cta-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 22px 20px;
        text-align: center;
    }

    .ks-social-cta-body {
        flex: 0 0 auto;
    }

    .ks-social-cta-title {
        font-size: 17px;
    }

    .ks-social-cta-sub {
        font-size: 12.5px;
    }

    .ks-social-cta-links {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .ks-social-cta {
        margin-top: 16px;
    }

    .ks-social-cta-card {
        border-radius: 16px;
        padding: 20px 16px;
    }

    .ks-social-cta-links {
        gap: 8px;
    }

    .ks-social-cta-link {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}


/* -------------------------------------------------------------------------
   3. Listing filters
   ------------------------------------------------------------------------- */

/* Phone/tablet toggle for the filter sidebar (d-lg-none in the markup). */
.ks-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin-bottom: 12px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(51, 73, 94, 0.06);
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ks-filter-toggle:focus {
    outline: 0;
}

.ks-filter-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

.ks-filter-toggle > .mdi:first-child {
    font-size: 20px;
    line-height: 1;
    color: var(--primary-color, #0097a7);
}

.ks-filter-toggle-count,
.ks-brand-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-color, #0097a7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.ks-brand-filter-count {
    min-width: 20px;
    height: 20px;
    margin-inline-start: 6px;
    font-size: 11px;
    vertical-align: middle;
}

.ks-filter-toggle-chevron {
    margin-inline-start: auto;
    font-size: 20px;
    line-height: 1;
    color: #7a7a7a;
    transition: transform 0.2s ease-in;
}

.ks-filter-toggle[aria-expanded="true"] .ks-filter-toggle-chevron {
    transform: rotate(180deg);
}

/* A long brand list scrolls inside its card instead of stretching the
   sticky sidebar past the viewport. */
.ks-brand-filter-list {
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
}

.ks-brand-filter-list .custom-control-label {
    overflow-wrap: anywhere;
}

/* Product count after a filter option, e.g. «باتری (24)». */
.ks-filter-option-count {
    margin-inline-start: 2px;
    font-size: 11.5px;
    color: #9aa0a6;
}