/* =========================================================
   ANWAR & SONS — CATEGORY ACCORDION
   Clean production CSS
========================================================= */

.anwar-cat-accordion,
.anwar-cat-accordion * {
    box-sizing: border-box;
}

.anwar-cat-accordion {
    --anwar-cat-columns: 2;
    --anwar-card-bg: #ffffff;
    --anwar-card-border: #dfe7f2;
    --anwar-card-active-border: #2f6ee5;
    --anwar-card-radius: 14px;
    --anwar-toggle-color: #2654b1;
    --anwar-toggle-bg: transparent;
    --anwar-toggle-hover-color: #2654b1;
    --anwar-toggle-hover-bg: #edf4ff;
    --anwar-category-image-size: 220px;

    width: 100%;
    padding: 72px 20px 0;
    overflow: visible;
}

.anwar-cat-accordion__inner {
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.anwar-cat-accordion__header {
    max-width: 820px;
    margin: 0 auto 38px;
    text-align: center;
}

.anwar-cat-accordion__eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.anwar-cat-accordion__title {
    margin: 0 0 10px;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.anwar-cat-accordion__description {
    max-width: 680px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   GRID
========================================================= */

.anwar-cat-accordion__grid {
    position: relative;
    display: grid;
    grid-template-columns:
        repeat(
            var(--anwar-cat-columns),
            minmax(0, 1fr)
        );
    align-items: start;
    overflow: visible;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.anwar-cat-card {
    position: relative;
    z-index: 1;

    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, 42%);
    grid-template-areas: "summary visual";
    column-gap: 18px;

    overflow: visible;

    border: 1px solid var(--anwar-card-border);
    border-radius: var(--anwar-card-radius);

    background: var(--anwar-card-bg);

    box-shadow:
        0 4px 18px
        rgba(24, 58, 112, .04);

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.anwar-cat-card:not(.is-open) {
    cursor: pointer;
}

.anwar-cat-card.is-open,
.anwar-cat-card:focus-within {
    z-index: 30;
}

.anwar-cat-card.is-open {
    border-color: var(--anwar-card-active-border);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    box-shadow:
        0 12px 32px
        rgba(24, 58, 112, .10);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.anwar-cat-card__summary {
    grid-area: summary;
    min-width: 0;
    padding-right: 40px;
}

.anwar-cat-card__icon {
    margin-bottom: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;
}

.anwar-cat-card__icon i {
    font-size: 23px;
}


/* =========================================================
   CATEGORY ICON SVG

   Custom uploaded SVG icons are rendered as an external
   <img> by the PHP widget.

   This is intentional so Elementor cannot force:
   fill: currentColor;
   stroke: currentColor;

   The SVG therefore displays exactly as it was uploaded.
========================================================= */

.anwar-cat-card__icon svg {
    width: 24px;
    height: 24px;
}


/* Uploaded SVG category icon */

.anwar-cat-card__icon-image {
    width: 24px;
    height: 24px;

    max-width: 100%;
    max-height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    /*
     * Do NOT add:
     *
     * fill
     * stroke
     * filter
     *
     * here.
     *
     * The actual SVG file controls its own appearance.
     */
}


/* =========================================================
   CATEGORY TITLE / DESCRIPTION
========================================================= */

.anwar-cat-card__title {
    margin: 0 0 7px;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.anwar-cat-card__description {
    max-width: 360px;
    margin: 0;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   CATEGORY PNG / IMAGE

   Keep the PNG away from the + / ^ control.
========================================================= */

.anwar-cat-card__visual {
    grid-area: visual;

    align-self: stretch;
    justify-self: stretch;

    width: 100% !important;
    min-width: 0;
    height: 100%;

    padding:
        16px
        78px
        16px
        12px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    pointer-events: none;
}

.anwar-cat-card__visual img {
    width: var(--anwar-category-image-size) !important;
    height: auto !important;

    max-width: 100%;
    max-height: 175px;

    display: block;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(
            0 10px 14px
            rgba(42, 75, 127, .10)
        );

    transition:
        transform .3s ease;
}

.anwar-cat-card.is-open
.anwar-cat-card__visual img {
    transform: scale(1.02);
}


/* =========================================================
   + / ^ TOGGLE
========================================================= */

.anwar-cat-card__toggle {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 40;

    width: 38px;
    height: 38px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 50% !important;

    background: var(--anwar-toggle-bg) !important;

    color: var(--anwar-toggle-color) !important;

    cursor: pointer;
    outline: none;

    box-shadow: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.anwar-cat-accordion
.anwar-cat-card__toggle:hover,
.anwar-cat-accordion
.anwar-cat-card__toggle:focus-visible {
    border-radius: 50%;

    background: var(--anwar-toggle-hover-bg) !important;

    color: var(--anwar-toggle-hover-color) !important;

    box-shadow:
        0 5px 14px
        rgba(38, 84, 177, .12);
}

.anwar-cat-accordion
.anwar-cat-card__toggle:active {
    background: var(--anwar-toggle-hover-bg) !important;
    color: var(--anwar-toggle-hover-color) !important;
    transform: scale(.95);
}

.anwar-cat-card__toggle span {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: inherit;

    transition:
        opacity .2s ease,
        transform .25s ease;
}

.anwar-cat-card__toggle svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.anwar-cat-card__toggle-chevron {
    opacity: 0;
    transform:
        translateY(3px)
        scale(.85);
}

.anwar-cat-card.is-open
.anwar-cat-card__toggle-plus {
    opacity: 0;
    transform:
        rotate(90deg)
        scale(.8);
}

.anwar-cat-card.is-open
.anwar-cat-card__toggle-chevron {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   ABSOLUTE EXPANSION PANEL
   Opening a card does not move the other cards.
========================================================= */

.anwar-cat-card__details {
    position: absolute;

    top: calc(100% - 1px);
    left: -1px;
    right: -1px;

    z-index: 25;

    max-height: 0;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    border: 1px solid transparent;
    border-top: 0;

    border-radius:
        0
        0
        var(--anwar-card-radius)
        var(--anwar-card-radius);

    background: var(--anwar-card-bg);

    box-shadow:
        0 18px 34px
        rgba(24, 58, 112, 0);

    transition:
        max-height .34s ease,
        opacity .22s ease,
        transform .3s ease,
        border-color .2s ease,
        box-shadow .25s ease,
        visibility 0s linear .34s;
}

.anwar-cat-card__details-inner {
    padding:
        14px
        var(--anwar-card-pad-right, 28px)
        var(--anwar-card-pad-bottom, 24px)
        var(--anwar-card-pad-left, 28px);
}

.anwar-cat-card.is-open
.anwar-cat-card__details {
    max-height: 620px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    border-color: var(--anwar-card-active-border);

    box-shadow:
        0 18px 34px
        rgba(24, 58, 112, .10);

    transition:
        max-height .38s ease,
        opacity .22s ease,
        transform .3s ease,
        border-color .2s ease,
        box-shadow .25s ease,
        visibility 0s;
}


/* =========================================================
   DESKTOP HOVER EXPANSION
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .anwar-cat-accordion--hover
    .anwar-cat-card:hover {
        z-index: 30;

        border-color: var(--anwar-card-active-border);

        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        box-shadow:
            0 12px 32px
            rgba(24, 58, 112, .10);

        transform: translateY(-2px);
    }

    .anwar-cat-accordion--hover
    .anwar-cat-card:hover
    .anwar-cat-card__details {
        max-height: 620px;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);

        border-color: var(--anwar-card-active-border);

        box-shadow:
            0 18px 34px
            rgba(24, 58, 112, .10);

        transition:
            max-height .38s ease,
            opacity .22s ease,
            transform .3s ease,
            border-color .2s ease,
            box-shadow .25s ease,
            visibility 0s;
    }

    .anwar-cat-accordion--hover
    .anwar-cat-card:hover
    .anwar-cat-card__toggle-plus {
        opacity: 0;
        transform:
            rotate(90deg)
            scale(.8);
    }

    .anwar-cat-accordion--hover
    .anwar-cat-card:hover
    .anwar-cat-card__toggle-chevron {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

    .anwar-cat-accordion--hover
    .anwar-cat-card:hover
    .anwar-cat-card__visual img {
        transform: scale(1.02);
    }

}


/* =========================================================
   SUBCATEGORY LINKS
========================================================= */

.anwar-cat-card__chips {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}

.anwar-cat-card__chip {
    min-height: 34px;

    padding: 7px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #cbdaf5;
    border-radius: 999px;

    color: #2654b1;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;

    text-align: center;
    text-decoration: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.anwar-cat-card__chip:hover {
    border-color: #2654b1;
    transform: translateY(-1px);
}

.anwar-cat-card__empty {
    color: #7b8798;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.anwar-cat-accordion__trust {
    position: relative;
    z-index: 0;

    margin-top: 30px;

    padding: 22px 28px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 24px;

    border-top: 1px solid #edf1f7;

    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f5f9ff 100%
        );
}

.anwar-cat-accordion__trust-item {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.anwar-cat-accordion__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #2654b1;
}

.anwar-cat-accordion__trust-icon i {
    font-size: 25px;
}

.anwar-cat-accordion__trust-icon svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.anwar-cat-accordion__trust-text {
    max-width: 190px;

    color: #405b86;

    font-size: 13px;
    line-height: 1.4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .anwar-cat-accordion {
        padding: 60px 16px 0;
    }

    .anwar-cat-card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(120px, 36%);

        column-gap: 12px;
    }

    .anwar-cat-card__title {
        font-size: 20px;
    }

    .anwar-cat-card__visual {
        width: 100% !important;
        padding-right: 64px;
        padding-left: 10px;
    }

    .anwar-cat-card__visual img {
        max-height: 150px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .anwar-cat-accordion {
        padding: 48px 12px 0;
    }

    .anwar-cat-accordion__header {
        margin-bottom: 26px;
    }

    .anwar-cat-accordion__eyebrow {
        font-size: 9px;
        letter-spacing: .18em;
    }

    .anwar-cat-accordion__title {
        font-size: 30px;
    }

    .anwar-cat-accordion__description {
        max-width: 340px;
        font-size: 14px;
        line-height: 1.45;
    }

    .anwar-cat-accordion__grid {
        gap: 10px;
    }

    .anwar-cat-card {
        --anwar-card-pad-right: 16px;
        --anwar-card-pad-bottom: 17px;
        --anwar-card-pad-left: 16px;

        grid-template-columns: 1fr;
        grid-template-areas: "summary";

        column-gap: 0;

        padding: 17px 16px !important;

        border-radius: 10px;
    }

    .anwar-cat-card__summary {
        padding-right: 38px;

        display: grid;

        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 13px;

        align-items: center;
    }

    .anwar-cat-card__icon {
        width: 46px !important;
        height: 46px !important;
        margin: 0;
    }

    .anwar-cat-card__icon i {
        font-size: 20px;
    }

    .anwar-cat-card__icon svg,
    .anwar-cat-card__icon-image {
        width: 21px;
        height: 21px;
    }

    .anwar-cat-card__title {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .anwar-cat-card__description {
        font-size: 11px;
        line-height: 1.35;
    }

    .anwar-cat-card__toggle {
        top: 15px;
        right: 11px;

        min-width: 32px;
        min-height: 32px;
    }

    .anwar-cat-card__toggle svg {
        width: 19px;
        height: 19px;
    }


    /* =========================================================
       MOBILE CATEGORY IMAGE

       OFF:
       Image is completely hidden.

       ON:
       Image appears only after the card is opened.
       It sits naturally below the icon/title/description row
       and uses the full available card width.
    ========================================================= */

    .anwar-cat-card__visual {
        display: none;
    }


    .anwar-cat-accordion--mobile-image
    .anwar-cat-card.is-open
    .anwar-cat-card__visual {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        grid-area: auto;
        grid-column: 1 / -1;

        width: 100% !important;
        height: auto;

        margin: 16px 0 0;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 1;

        overflow: hidden;

        pointer-events: none;
    }


    .anwar-cat-accordion--mobile-image
    .anwar-cat-card.is-open
    .anwar-cat-card__visual img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        margin: 0;

        display: block;

        object-fit: contain;
        object-position: center;

        transform: none !important;
    }

    .anwar-cat-card__details-inner {
        padding: 13px 16px 16px;
    }

    .anwar-cat-card__chips {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .anwar-cat-card__chip {
        min-height: 30px;

        padding: 6px 12px;

        font-size: 11px;
    }

    .anwar-cat-accordion__trust {
        margin-top: 28px;

        padding: 22px 14px;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .anwar-cat-accordion__trust-item {
        justify-content: flex-start;
        align-items: flex-start;

        width: 260px;
        max-width: 100%;

        margin: 0 auto;
    }

    .anwar-cat-accordion__trust-icon {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
        height: 30px;

        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
    }

    .anwar-cat-accordion__trust-text {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;

        padding-top: 1px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .anwar-cat-accordion__title {
        font-size: 27px;
    }

    .anwar-cat-card__summary {
        grid-template-columns:
            43px
            minmax(0, 1fr);

        gap: 11px;
    }

    .anwar-cat-card__icon {
        width: 43px !important;
        height: 43px !important;
    }

}