/* ================================================================
   IslamicBanking.css — EG Bank Islamic Banking Page
   ================================================================ */

/* ── Spacing tokens ── */
:root {
    --ib-header-px: 32px;
    --ib-body-px: 32px;
    --ib-section-py: 20px;
    --ib-color-primary: #003B70;
    --ib-color-secondary: #00C4B3;
    --ib-color-grey: #6A7282;
    --ib-color-bg: #EBF0F4;
    --ib-color-border: #EBEBEB;
    --ib-radius-card: 16px;
    --ib-radius-icon: 14px;
}

/* ================================================================
   RESET global main > section padding for IB page
   ================================================================ */
.ib-hero,
.ib-subnav,
.ib-section,
.ib-committee-section {
    padding: 0;
}

/* ================================================================
   HERO
   ================================================================ */
.ib-hero {
    position: relative;
    min-height: 563px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.ib-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ib-hero__content {
    padding: 0 32px;
    max-width: 583px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ib-hero__accent {
    color: #00C4B3;
}

.ib-hero__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.ib-hero__subtitle {
    font-family: 'Co Headline', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

/* ================================================================
   STICKY SUB-NAV
   ================================================================ */
.ib-subnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--ib-color-border);
}

.ib-subnav__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 32px;
    gap: 24px;
    height: 64px;
    justify-content: space-between;
}

.ib-subnav__item {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.16;
    color: var(--ib-color-primary);
    text-decoration: none;
    padding: 0 0 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    text-transform: capitalize;
}

    .ib-subnav__item.active,
    .ib-subnav__item:hover {
        color: var(--ib-color-secondary);
        border-bottom-color: var(--ib-color-secondary);
    }

/* ================================================================
   SECTION SHARED
   ================================================================ */
.ib-section {
    background: #fff;
}

/* Section header: title area + images, padded 40px */
.ib-section-header {
    padding: 0px 0px 0px 0px;
}

.ib-section-header__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
   /* margin-bottom: 32px;*/
}

.ib-section-header__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Badge */
.ib-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(0, 196, 179, 0.08);
    border-radius: 300px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--ib-color-secondary);
}

.ib-badge__dot {
    width: 4px;
    height: 4px;
    background: var(--ib-color-secondary);
    border-radius: 50%;
    flex-shrink: 0;
    display: none !important;
}

/* Section title */
.ib-section-title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.16;
    color: var(--ib-color-primary);
    margin: 0;
    text-transform: capitalize;
}

.ib-section-desc {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ib-color-grey);
    max-width: 530px;
    margin: 0;
}

/* ================================================================
   ASSETS IMAGES
   ================================================================ */
.ib-assets-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: 645px;
}

.ib-assets-images__main {
    flex: 2;
    height: 100%;
    border-radius: var(--ib-radius-card);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 59, 112, 0.3);
}

    .ib-assets-images__main::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 59, 112, 0.3);
        border-radius: var(--ib-radius-card);
    }

.ib-assets-images__side {
    flex: 1;
    height: 100%;
    border-radius: var(--ib-radius-card);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 59, 112, 0.16);
}

    .ib-assets-images__side::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 59, 112, 0.16);
        border-radius: var(--ib-radius-card);
    }

/* ================================================================
   SECTION BODY (inner content, 24px padding)
   ================================================================ */
/*.ib-section-body {
    padding: 0 var(--ib-body-px) var(--ib-section-py);
}*/

/* ================================================================
   INNER PRODUCT TABS (Assets section)
   ================================================================ */
.ib-product-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 0;
    border: 1px solid var(--ib-color-border);
    border-radius: var(--ib-radius-card);
    background: #fff;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .ib-product-tabs::-webkit-scrollbar {
        display: none;
    }

.ib-product-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ib-radius-card);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ib-color-primary);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

    .ib-product-tab.active {
        border-radius:8px;
        background: var(--ib-color-secondary);
        color: #fff;
    }

.ib-product-tab__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Recolor img icons to match tab state */
.ib-product-tab img.ib-product-tab__icon {
    filter: brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1200%) hue-rotate(195deg) brightness(95%);
}

.ib-product-tab.active img.ib-product-tab__icon {
    filter: brightness(0) invert(1);
}

/* ================================================================
   PRODUCT PANELS
   ================================================================ */
.ib-product-panel {
    display: none;
}

    .ib-product-panel.active {
        display: block;
    }

/* Auto Murabaha: two side-by-side cards */
.ib-auto-cards {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 16px;
}

    .ib-auto-cards .ib-product-card {
        flex: 1;
    }

/* Single-card wrap */
.ib-single-card-wrap {
    margin-bottom: 16px;
}

/* ================================================================
   PRODUCT CARD
   ================================================================ */
.ib-product-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--ib-color-border);
    border-radius: var(--ib-radius-card);
    background: #fff;
}

.ib-product-card--full {
    width: 100%;
}

/* Card header row */
.ib-product-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ib-product-card__icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-color-secondary);
    border-radius: var(--ib-radius-icon);
}

.ib-product-card__titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ib-product-card__name {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    color: var(--ib-color-primary);
    margin: 0;
}

.ib-product-card__subtitle {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ib-color-secondary);
    margin: 0;
}

/* Shari'a-Compliant badge */
.ib-sharia-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 196, 179, 0.08);
    border-radius: 400px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ib-color-secondary);
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

/* ================================================================
   KEY BENEFITS
   ================================================================ */
.ib-benefits-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ib-color-primary);
    margin: 0 0 16px;
}

    .ib-benefits-title svg {
        flex-shrink: 0;
    }

.ib-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .ib-benefits-list li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        font-family: 'Co Headline', sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.3;
        color: var(--ib-color-grey);
    }

.ib-benefits-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-color-secondary);
    border-radius: 50%;
    margin-top: 1px;

}

/* ================================================================
   ELIGIBILITY CRITERIA BOX
   ================================================================ */
.ib-eligibility {
    padding: 24px;
    background: var(--ib-color-bg);
    border-radius: var(--ib-radius-card);
   /* margin-bottom: 16px;*/
}

.ib-eligibility__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

    .ib-eligibility__header h4 {
        font-family: 'Co Headline', sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 1.3;
        color: var(--ib-color-primary);
        margin: 0;
    }

.ib-eligibility__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ib-eligibility__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ib-color-grey);
}

    .ib-eligibility__item svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

/* ================================================================
   SHARI'A COMPLIANT NOTE BAR
   ================================================================ */
.ib-sharia-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    gap: 8px;
    background: var(--ib-color-bg);
    border: 1px solid rgba(0, 59, 112, 0.08);
    border-radius: var(--ib-radius-card);
    text-align: center;
}

.ib-sharia-note__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ib-color-primary);
    margin: 0;
}

.ib-sharia-note__text {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-grey);
    margin: 0;
}

/* ================================================================
   DESCRIPTION BOX (Secured Islamic Finance)
   ================================================================ */
.ib-desc-box {
    padding: 24px;
    background: var(--ib-color-bg);
    border-radius: var(--ib-radius-card);
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-grey);
    margin-bottom: 16px;
}

/* ================================================================
   SECURED PRODUCTS MINI-CARDS (3-across)
   ================================================================ */
.ib-secured-products {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 16px;
}

.ib-secured-product {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: rgba(0, 196, 179, 0.08);
    border-radius: var(--ib-radius-card);
}

.ib-secured-product__icon {
    flex-shrink: 0;
}

.ib-secured-product__name {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-primary);
    margin: 0 0 8px;
}

.ib-secured-product__desc {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-grey);
    margin: 0;
}

/* ================================================================
   LIABILITIES SECTION
   ================================================================ */
.ib-section--liabilities {
    background: #fff;
}

    /* Liabilities section header: stack vertically (image below title/desc) */
    .ib-section--liabilities .ib-section-header {
        display: flex;
        flex-direction: column;
        padding: 0px 0px 0px;
        gap: 32px;
    }

    .ib-section--liabilities .ib-section-header__inner {
        width: 100%;
        margin-bottom: 0;
    }

/* Full-width image with overlay */
.ib-liabilities-image {
    width: 100%;
    height: 645px;
    border-radius: var(--ib-radius-card);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 59, 112, 0.3);
}

    .ib-liabilities-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 59, 112, 0.3);
    }

/* Liabilities stacked cards */
.ib-liabilities-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.ib-product-card--liability {
    flex: 0 0 100%;
}

/* Twin side-by-side layout (Investment + ESTITHMAR) */
.ib-product-card--twin {
    flex: 0 0 calc(50% - 8px);
}

/* Table */
.ib-table-wrap {
    margin-bottom: 16px;
    overflow-x: auto;
}

.ib-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

    .ib-table thead tr {
        background: var(--ib-color-primary);
    }

    .ib-table thead th {
        padding: 9px 16px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
    }

    .ib-table tbody tr {
        background: #F9FAFB;
    }

    .ib-table tbody td {
        padding: 9px 16px;
        color: var(--ib-color-primary);
        font-weight: 700;
        border-bottom: 1px solid var(--ib-color-border);
        text-align: center;
        vertical-align: middle;
    }

/* Diamond table: left-align first column */
.ib-table--diamond th:first-child,
.ib-table--diamond td:first-child {
    text-align: left;
    padding-left: 88px;
}

/* Footnote */
.ib-footnote {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-grey);
    margin: 0;
}

/* ================================================================
   SHARI'A SUPERVISORY COMMITTEE
   ================================================================ */
.ib-committee-section {
    background: #fff;
}

.ib-committee {
    padding: 20px 32px;
    background: linear-gradient(180deg, #003B70 0%, #105593 33.96%, #0B579B 57.82%, #0E5799 81.68%);
    border-radius: var(--ib-radius-card);
    position: relative;
    overflow: hidden;
}

.ib-committee__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.ib-committee__icon {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    flex-shrink: 0;
}

.ib-committee-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 300px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    color: #fff;
    width: fit-content;
}

.ib-committee__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 56px;
    color: #fff;
    margin: 0;
}

.ib-committee__desc {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}

/* Members */
.ib-members__heading {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    color: #fff;
    margin: 0 0 16px;
}

.ib-member-cards {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.ib-member-card {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ib-radius-card);
    backdrop-filter: blur(0.3px);
}

.ib-member-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ib-member-card__name {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-secondary);
    margin: 0;
}

/* Heavier than the bio beneath it, as in both Figma frames */
.ib-member-card__role {
    font-family: 'Co Headline', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}

/* Smaller and dimmer than the role above it, so the three lines read as
   name → role → detail rather than three equal lines */
.ib-member-card__bio {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ================================================================
   MEMBER PHOTO
   ================================================================ */
.ib-member-card__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ================================================================
   MULTI-CARD GRID (isMultiCard panel)
   ================================================================ */
.ib-multi-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ib-product-card--sub {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--ib-color-border);
    border-radius: var(--ib-radius-card);
}

    /* In sub-product cards the badge sits below the title row, left-aligned */
    .ib-product-card--sub .ib-sharia-badge {
        margin-left: 0;
        max-width: fit-content;
    }

.ib-product-card__top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.ib-product-card__titles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ib-product-card__subtitle--accent {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--ib-color-secondary);
    margin: 0;
}

.ib-general-documents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--ib-color-bg);
    border: 1px solid rgba(0, 59, 112, 0.08);
    border-radius: var(--ib-radius-card);
    text-align: center;
}

.ib-general-documents__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ib-color-primary);
    margin: 0;
}

.ib-general-documents__text {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ib-color-grey);
    margin: 0;
}

/* ================================================================
   RESPONSIVE — MOBILE (≤ 900px)
   ================================================================ */
@media (max-width: 900px) {
    :root {
        --ib-header-px: 16px;
        --ib-body-px: 16px;
        --ib-section-py: 24px;
    }

    /* Hero (ib-hero is commented out in CSHTML — handled by Hero_Section / rtl.css) */
    .ib-hero {
        min-height: 320px;
        align-items: flex-end;
        padding-bottom: 32px;
    }

    .ib-hero__content {
        max-width: 100%;
        padding: 0 16px;
    }

    .ib-hero__title {
        font-size: 24px;
    }

    .ib-hero__subtitle {
        font-size: 16px;
    }

    /* ── Sub-nav: active label + circle-arrow (Figma mobile) ── */
    .ib-subnav__inner {
        height: 64px;
        padding: 0 16px;
        justify-content: space-between;
        overflow-x: visible; /* no horizontal scroll on mobile */
        gap: 0;
    }

    /* Hide all items; only the active one stays visible */
    .ib-subnav__item {
        display: none;
    }

        .ib-subnav__item.active {
            display: flex;
            color: var(--ib-color-secondary);
            border-bottom: none; /* remove underline on mobile */
            padding: 0;
            font-size: 16px;
        }

    /* Teal circle-arrow button — pure CSS, no extra HTML */
    .ib-subnav__inner::after {
        content: '';
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: 1px solid #E8E8E8;
        border-radius: 50%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' stroke='%2300C4B3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 7px no-repeat;
    }

    /* ── Section header: centred on mobile ─────────────────── */
    .ib-section-header {
        padding: 0px;
    }

    .ib-section-header__inner {
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;
    }

    .ib-section-header__text {
        align-items: center;
    }

    .ib-badge {
        align-self: center;
    }

    .ib-section-title {
        font-size: 24px;
        text-align: center;
    }

    .ib-section-desc {
        text-align: center;
        max-width: 100%;
    }

    /* ── Assets images: stack vertically ───────────────────── */
    .ib-assets-images {
        flex-direction: column;
        height: auto;
        padding: 0 16px;
        gap: 16px;
    }

    .ib-assets-images__main {
        height: 354px;
    }
    /* Figma: 354px */
    .ib-assets-images__side {
        height: 520px;
    }
    /* Figma: 520px */

    /* ── Product tabs: 2 × 2 grid ──────────────────────────── */
    .ib-product-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
        padding: 8px;
    }

    .ib-product-tab {
        flex: 0 0 calc(30% - 4px); /* 2 per row, 8px gap → each ≈ 50% - 4px */
        font-size: 12px;
        padding: 8px;
        gap: 8px;
        white-space: normal;
        text-align: center;
        flex-direction: column; /* icon above label on mobile */
    }

    .ib-product-tab__icon {
        width: 16px;
        height: 16px;
    }

    /* ── Auto cards: stack vertically ──────────────────────── */
    .ib-auto-cards {
        flex-direction: column;
    }

    /* ── Secured products: stack vertically ────────────────── */
    .ib-secured-products {
        flex-direction: column;
    }

    /* ── Liability twin: full width ────────────────────────── */
    .ib-product-card--twin {
        flex: 0 0 100%;
    }

    /* ── Liabilities section ────────────────────────────────── */
    .ib-liabilities-image {
        height: 354px;
    }
    /* Figma: 354px (was 280px) */

    /* Liabilities header: centred on mobile (mirrors assets) */
    .ib-section--liabilities .ib-section-header {
        align-items: center;
        padding:0px;
    }
    .ib-section-header__inner{
        gap:0px;
    }
        .ib-section-header__inner{
            margin-bottom:0px;
        }
        /* ── Shari'a Committee ──────────────────────────────────── */
        /* Keep internal padding at 40px 32px (matches Figma mobile) */
        /* Only add outer breathing room */
        .ib-committee-section {
            padding: 0 16px;
        }

    .ib-committee__title {
        font-size: 24px;
        line-height: 1.3;
    }

    .ib-member-cards {
        flex-direction: column;
    }

    /* Member card: row layout on mobile (photo left, text right) */
    .ib-member-card {
        flex-direction: row;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }

    .ib-member-card__photo {
        flex-shrink: 0;
    }

    /* ── Table ──────────────────────────────────────────────── */
    .ib-table-wrap {
        overflow-x: auto;
    }

    /* Shrink table font on very small screens */
    .ib-table {
        font-size: 11px;
    }

        .ib-table thead th,
        .ib-table tbody td {
            padding: 6px 8px;
        }

    /* ── Multi-card grid: single column ────────────────────── */
    .ib-multi-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   RTL OVERRIDES  (Arabic — dir="rtl")
   ================================================================ */

/*
 * NOTE: dir="rtl" is set per-section in the CSHTML (not on <html>).
 * Inherited `direction: rtl` automatically:
 *   - Flows flex-row items RIGHT → LEFT  (first child at right, last at left)
 *   - Right-aligns text without explicit `text-align`
 *
 * Overrides below handle cases where automatic RTL behaviour is NOT enough:
 *   1. flex-direction: row-reverse — needed for icon/dot items where the
 *      RTL natural flow puts them on the wrong side vs Figma
 *   2. margin swaps — physical margin-left/right don't auto-flip
 *   3. Explicit text-align: right — for safety against any upstream LTR override
 */

/* ── Sharia badge: push to far LEFT in RTL ──────────────────────
   direction:rtl flex + margin-left:auto would push badge RIGHT;
   swap to margin-right:auto so it is pressed against the left wall. */
/*[dir="rtl"] .ib-sharia-badge {
    margin-left: 0;
    margin-right: auto;
}
*/
/* Sub-product card badge: sits below title, no auto-push needed */
[dir="rtl"] .ib-product-card--sub .ib-sharia-badge {
    margin-right: 0;
}

/* ── Diamond table first column ─────────────────────────────── */
[dir="rtl"] .ib-table--diamond th:first-child,
[dir="rtl"] .ib-table--diamond td:first-child {
    text-align: right;
    padding-right: 24px;
    padding-left: 16px;
}

/* ── Explicit text-align: right for every IB text element ──────
   Even though direction:rtl auto-aligns most text, be explicit
   to guard against any upstream stylesheet setting text-align:left. */
[dir="rtl"] .ib-subnav__item,
[dir="rtl"] .ib-section-title,
[dir="rtl"] .ib-section-desc,
[dir="rtl"] .ib-product-card__title,
[dir="rtl"] .ib-product-card__subtitle,
[dir="rtl"] .ib-product-card__subtitle--accent,
[dir="rtl"] .ib-benefits-list li,
[dir="rtl"] .ib-eligibility__header h4,
[dir="rtl"] .ib-secured-product__name,
[dir="rtl"] .ib-secured-product__desc,
[dir="rtl"] .ib-desc-box,
[dir="rtl"] .ib-footnote,
[dir="rtl"] .ib-committee__title,
[dir="rtl"] .ib-committee__desc,
[dir="rtl"] .ib-members__heading,
[dir="rtl"] .ib-member-card__name,
[dir="rtl"] .ib-member-card__role,
[dir="rtl"] .ib-member-card__bio {
    text-align: right;
}



@media (max-width: 900px) {
    [dir="rtl"] .ib-product-card__subtitle {
        text-align: start;
    }
    .ib-committee__header {
         align-items: center; 
    }
    .ib-committee-badge {
        display: inline-flex;
        align-items: center;
        margin:auto;
    }
    .ib-committee__titles {
        align-items: end;
    }
        [dir="rtl"] .ib-committee__title,
        [dir="rtl"] .ib-committee__desc,
        [dir="rtl"] .ib-members__heading,
        [dir="rtl"] .ib-member-card__name,
        [dir="rtl"] .ib-member-card__role,
        [dir="rtl"] .ib-member-card__bio {
            text-align: center;
        }
    [dir="rtl"] .ib-committee__titles {
        align-items: center;
    }
        .ib-assets-images__main {
            width: 100%;
            height: 350px;
        }

        .ib-assets-images__side {
            width: 100%;
            height: 350px;
        }

        .ib-assets-images {
            padding: 0px !important;
            height: 700px;
        }

        .ib-product-card__header {
            align-items: start;
            flex-direction: column;
        }

        .ib-product-card__titles {
            text-align: center;
        }

        .ib-sharia-badge {
            margin: auto;
        }

        .ib-product-card__top {
            flex-direction: column;
        }

        .ib-product-card--sub .ib-sharia-badge {
            margin-left: auto;
        }

        .ib-liabilities-body {
            display: block;
        }

        .ib-product-card__name {
            text-align: start;
        }

        .ib-product-card__subtitle {
            text-align: start;
        }

        .ib-sharia-badge {
            margin-right: auto;
            margin-left: 0px;
        }
        /* .ib-section-body {
        padding: 0px 0px 10px 0px;
    }*/
        .ib-committee {
            padding: 40px 15px;
        }
        /* .ib-committee-badge is no longer rendered — see IslamicBanking.cshtml */

        .ib-committee__title {
            margin-bottom: 16px; /* one gap under a title, site-wide */
        }

        .ib-section-body {
            padding: 0px !important;
        }

        .ib-committee-section {
            padding: 0px !important;
        }

        .ib-member-card {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px;
            gap: 16px;
        }

        .ib-table--diamond th:first-child, .ib-table--diamond td:first-child {
            padding-left: 10px;
        }

        .ib-product-card--sub {
            /*  margin: 0px 15px;*/

            gap: 24px;
        }

        .ib-product-tabs {
            margin: 0px 0px 15px 0px;
        }
        /* .ib-product-card {
        margin: 0px 15px 15px 15px;
    }
    .ib-product-card {
        margin: 0px 15px;
    }*/
        /* .ib-product-card--liability {
        margin: 0px 15px 15px 15px ;
    }*/
        /*.ib-section-body {*/
        /*  display: flex;
    
        flex-direction: column;*/
        /*margin: 15px;
        gap: 15px;
    }*/

        .ib-auto-cards {
            margin: 15px 0px;
            flex-direction: column;
        }

        .ib-product-card--liability {
            margin: 15px 0px;
        }

        .ib-benefits-list li {
            font-size: 14px;
        }

        .ib-sharia-note {
            margin: 0px 0px;
        }

        .ib-general-documents {
            padding: 16px 15px;
            margin: 0px 15px;
        }

        .ib-member-card__bio {
            font-weight: 300;
            font-size: 14px;
        }
        /*.ib-product-panel.active {
        display: unset;
        margin: 0px 15px;
    }
    .ib-product-panel {
        display: unset;
        margin: 0px 15px;
    }*/
    }
/* ============================================================
   ASSETS — image strip, one tile per product tab
   Replaces the old main+side pair. Equal tiles across the row, scrolling
   sideways on small screens rather than shrinking to slivers.
   ============================================================ */
.ib-assets-images {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 16px;
    /* The old two-image block was a fixed-height flex row (645px, 700px ≥1200px);
       the tiles size themselves now, so those are cleared here. */
    height: auto;
    padding: 0;
}

.ib-assets-images__tile {
    min-height: 200px;
    border-radius: 16px;
    background-color: #EEF3F7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .ib-assets-images {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ib-assets-images__tile {
        min-height: 160px;
    }
}

@media (max-width: 575.98px) {
    .ib-assets-images {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   LIABILITIES — two cards per row, photo on top, collapsible groups
   ============================================================ */
.ib-liab-grid {
    /* .ib-liabilities-body is a wrap-flex row, so the grid has to claim the width */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* A lone card on the last row sits centred rather than stranded left */
    .ib-liab-grid > .ib-liab-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        margin-inline: auto;
    }

.ib-liab-card {
    height:100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ib-liab-card__media {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    background-color: #EEF3F7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ib-liab-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.ib-liab-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ib-liab-card__name {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #003B70;
}

.ib-liab-card__sharia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Co Headline', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #00C4B3;
}

/* ── Collapsible group ── */
.ib-liab-collapse {
    border-radius: 11px;
    overflow: hidden;
}

.ib-liab-collapse__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: #F0F0F0;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #003B70;
    text-align: start;
    transition: background-color 300ms ease-in-out;
}

    .ib-liab-collapse__trigger:hover {
        background: #F1F4F7;
    }

    .ib-liab-collapse__trigger:focus-visible {
        outline: 2px solid #00C4B3;
        outline-offset: -2px;
    }

.ib-liab-collapse__label {
    flex: 1;
    min-width: 0;
}

.ib-liab-collapse__chevron {
    flex-shrink: 0;
    width: 16px;
    font-size: 12px;
    color: #003B70;
    transition: transform 300ms ease-in-out;
}

.ib-liab-collapse--open .ib-liab-collapse__chevron {
    transform: rotate(180deg);
}

.ib-liab-collapse__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 10px;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.ib-liab-collapse--open .ib-liab-collapse__body {
    max-height: 1600px;
    opacity: 1;
    padding: 12px 4px 4px;
}

/* Lists inside a card body sit tighter than the full-width asset cards */
.ib-liab-card .ib-benefits-list,
.ib-liab-card .ib-eligibility__items {
    margin: 0;
}

.ib-liab-card .ib-footnote {
    margin: 4px 0 0;
}

/* ── Redemption boxes ──
   One box per period instead of a table. auto-fit so two or four periods lay out
   as well as the three in the design, wrapping instead of squeezing. */
.ib-redemption-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.ib-redemption-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 16px;
    border-radius: 12px;
    background: #E9F7F6;
}

.ib-redemption-box__label {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: #6A7282;
}

.ib-redemption-box__value {
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #003B70;
}

/* Short rule between the two pairs, as drawn */
.ib-redemption-box__rule {
    width: 100%;
    height: 2px;
    margin: 10px 0px;
    background: #00C4B3;
}

/* ── Mobile carousel — same pattern as .accounts-carousel on the Accounts
   page (accounts.css), restated here under the ib- prefix rather than
   linking accounts.css, which carries a global reset (*, body, h1-h6, img)
   that would repaint the header and footer. The markup opts in with the
   same accounts-card/data-accounts-carousel* hooks and reuses accounts.js's
   AccountsCarouselManager unchanged — see IslamicBanking.cshtml. ── */
.accounts-carousel {
    position: relative;
}

.accounts-carousel__controls {
    display: none;
}

.accounts-carousel__nav {
    border: 0;
    background: transparent;
    color: #003B70;
    border-radius: 0;
    padding: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .accounts-carousel__nav svg {
        display: block;
        width: 24px;
        height: 24px;
    }

    [dir="rtl"] .accounts-carousel__nav svg {
        transform: scaleX(-1);
        transform-origin: center;
    }

    .accounts-carousel__nav .accounts-carousel__nav-bg {
        fill: rgba(0, 59, 112, 1);
    }

    .accounts-carousel__nav:disabled {
        cursor: not-allowed;
    }

    .accounts-carousel__nav:disabled .accounts-carousel__nav-bg {
        fill: rgba(221, 221, 221, 1);
    }

@media (max-width: 991.98px) {
    .ib-liab-grid {
        grid-template-columns: 1fr;
    }

        .ib-liab-grid > .ib-liab-card:last-child:nth-child(odd) {
            width: auto;
        }

    /* Once wrapped in .accounts-carousel with data-accounts-carousel-track,
       the grid becomes a one-card-per-view horizontal scroller instead of a
       vertical stack — the nth-child(odd) centering above no longer applies
       since every card, including a lone last one, is already 100% wide. */
    .accounts-carousel .ib-liab-grid[data-accounts-carousel-track] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

        .accounts-carousel .ib-liab-grid[data-accounts-carousel-track]::-webkit-scrollbar {
            display: none;
        }

        .accounts-carousel .ib-liab-grid[data-accounts-carousel-track] > .ib-liab-card {
            scroll-snap-align: start;
            width: auto;
        }

    .accounts-carousel__controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
    }
}

@media (max-width: 575.98px) {
    .ib-liab-card__media {
        height: 160px;
    }

    .ib-liab-card__content {
        padding: 16px;
    }

    .ib-liab-card__name {
        font-size: 18px;
    }
}

/* ============================================================
   ASSETS — image + tab in one box, each tab under its picture
   Replaces the separate .ib-assets-images strip and .ib-product-tabs bar.
   ============================================================ */
.ib-product-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--ib-color-border);
    border-radius: var(--ib-radius-card);
    background: #fff;
}

.ib-product-nav__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ib-product-nav__img {
    position: relative;
    height: 160px;
    border-radius: 12px;
    background-color: #EEF3F7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

    /* Teal wash over the photo, as drawn */
    .ib-product-nav__img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 196, 179, 0.35);
    }

/* The button fills its column and wraps rather than overflowing on long names */
.ib-product-nav .ib-product-tab {
    width: 100%;
    white-space: normal;
    text-align: center;
}

@media (max-width: 991.98px) {
}

.ib-committee__titles {
 /*   align-items: center;*/
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.ib-committee__titles {
    align-items: start;
}
.ib-committee__desc{
    text-align:start;
}
.ib-committee__title {
    text-align: center;
    margin-bottom: 20px;
}

.ib-product-card--sub .ib-sharia-badge {
    margin-left: 0px !important;
}

.ib-product-card__icon-wrap {
    margin-right: auto;
}

.ib-committee__desc, .ib-members__heading, .ib-member-card {
    text-align: start;
}

.ib-product-card__subtitle--accent, .ib-product-card__top {
    text-align: start;
}



.ib-committee__icon {
    padding: 16px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    flex-shrink: 0;
}

.ib-member-card {
    gap: 8px;
}
    .ib-product-nav {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.ib-product-nav__img {
    height: 200px;
}


@media (max-width: 768px) {
    .ib-product-nav {
        grid-template-columns: 1fr;
    }
    .ib-product-nav-two {
        grid-template-columns: 1fr 1fr;
    }
}
/**/
/* ================================================================
   SHARI'A COMMITTEE — mobile
   The mobile Figma frame centres the whole block: icon, title, description,
   the Committee Members heading and the text inside every member card. Desktop
   stays left-aligned, as in the web frame, so this lives here rather than in
   the base rules.
   ================================================================ */
@media (max-width: 900px) {
    .ib-committee__header {
        align-items: center;
        text-align: center;
    }

    .ib-committee__titles {
        text-align: center;
    }
    .ib-committee__desc, .ib-members__heading, .ib-member-card {
        text-align: center;
    }
    .ib-members__heading {
        text-align: center;
    }

    /* Cards are already stacked at this width; centre their contents. The rule
       above them sets align-items:flex-start for the photo layout, so this has
       to come after it. */
    .ib-member-card {
        align-items: center;
        text-align: center;
    }

    .ib-member-card__info {
        align-items: center;
    }
}

/* ============================================================
   APPLY NOW FORM
   Independent copy of the Cards/Accounts apply-form design under the
   ib-apply__ prefix — not linked to accounts.css/cards.css, so editing one
   page's form never affects another.
   ============================================================ */
.ib-apply {
    padding: 30px 30px;
    background-color: #003B70;
    background-image: url("/assets/NewFolder/FormBg.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto;
}

.ib-apply__inner {
    max-width: 972px;
    margin-inline: auto;
}

.ib-apply__title {
    margin: 0 0 32px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    color: #FFFFFF;
    text-align: center;
}

.ib-apply__alert {
    margin-bottom: 24px;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: 'Co Headline', sans-serif;
    font-size: 15px;
    text-align: center;
}

.ib-apply__alert--success {
    background: rgba(139, 220, 100, 0.15);
    border: 1px solid #8BDC64;
    color: #FFFFFF;
}

.ib-apply__alert--error {
    background: rgba(220, 100, 100, 0.15);
    border: 1px solid #E06060;
    color: #FFFFFF;
}

.ib-apply__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ib-apply__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ib-apply__field,
.ib-apply__select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ib-apply__input,
.ib-apply__select,
.ib-apply__textarea {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #003B70;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
}

.ib-apply__textarea {
    height: 120px;
    padding: 16px 20px;
    resize: vertical;
}

.ib-apply__input::placeholder,
.ib-apply__textarea::placeholder {
    color: #7A8CA3;
}

.ib-apply__select:invalid,
.ib-apply__select:has(option[value=""]:checked) {
    color: #7A8CA3;
}

.ib-apply__select option {
    color: #003B70;
}

.ib-apply__radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.ib-apply__radio-label {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    white-space: nowrap;
}

.ib-apply__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.ib-apply__radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
}

    .ib-apply__radio-option input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: #00C4B3;
        cursor: pointer;
    }

.ib-apply__recaptcha-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ib-apply__recaptcha-error {
    color: #FF8A8A;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
}

.ib-apply__submit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ib-apply__submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 40px;
    border: 0;
    border-radius: 999px;
    background: #7BDC4F;
    color: #FFFFFF;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s;
}

    .ib-apply__submit-btn:hover {
        opacity: .88;
    }

.ib-apply__hint {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
}

.ib-apply .text-danger {
    color: #FF8A8A;
    font-family: 'Co Headline', sans-serif;
    font-size: 13px;
}

@media (max-width: 768px) {
    .ib-apply {
        padding: 30px 20px;
        background-size: contain;
    }

    .ib-apply__title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .ib-apply__row {
        grid-template-columns: 1fr;
    }
}