/* ==========================================================
   IBS Template Components — Tab Button
   Single source of truth for .ibs-tabs / .ibs-tab styles.
   Tokens from app.css (:root).
   ========================================================== */

/* --- Container --- */
.ibs-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--n20, var(--n20));
    border-radius: 12px;
    width: 100%;
}

/* --- Tab button --- */
.ibs-tab {
    flex: 1;
    position: relative;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    color: var(--n700, var(--n700));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    /* --- Hover --- */
    .ibs-tab:hover:not(.ibs-tab--active):not(.ibs-tab--disabled) {
        color: var(--n800, var(--n800));
        background: var(--n30, var(--n30));
    }

/* --- Active --- */
.ibs-tab--active {
    background: var(--n0, #fff);
    color: var(--brand-blue, var(--brand-primary));
    box-shadow: var(--shadow-sm);
}

/* --- Disabled --- */
.ibs-tab--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Focus visible (keyboard) --- */
.ibs-tab:focus-visible {
    outline: 2px solid var(--brand-blue, var(--brand-primary));
    outline-offset: 2px;
}

/* --- RTL support --- */
/* dir="rtl" on the document already handles tab direction */

/* --- Responsive (mobile) --- */
@media (max-width: 480px) {
    .ibs-tab {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-tabs {
    background: color-mix(in srgb, var(--dark-surface, var(--dark-surface)) 80%, var(--bg) 8%);
}

[data-theme="dark"] .ibs-tab {
    color: var(--n700, var(--n700));
}

    [data-theme="dark"] .ibs-tab:hover:not(.ibs-tab--active):not(.ibs-tab--disabled) {
        color: var(--n800, var(--n800));
        background: color-mix(in srgb, var(--dark-surface, var(--dark-surface)) 70%, var(--bg) 12%);
    }

[data-theme="dark"] .ibs-tab--active {
    background: var(--n40, var(--n40));
    color: var(--brand-primary-lighter);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================
   IBS Template Components — Input (Outlined)
   Scoped under .ibs-input so styles only apply to IbsInput.
   Tokens from app.css (:root).
   ========================================================== */

/* --- Design tokens + state vars --- */
.ibs-input .mud-input.mud-input-outlined {
    --wf-radius: 8px;
    --wf-border-default: var(--n40, var(--n40));
    --wf-border-hover: var(--n80, var(--n80));
    --wf-border-focus: var(--brand-primary-border, var(--brand-green-light));
    --wf-text: var(--n900, var(--n900));
    --wf-placeholder: var(--n300, var(--text-muted));
    --wf-label: var(--n700, var(--n700));
    --wf-danger: var(--error);
    --wf-current-border: var(--wf-border-default);
    --wf-current-shadow: none;
}

    /* --- Hover --- */
    .ibs-input .mud-input.mud-input-outlined:hover {
        --wf-current-border: var(--wf-border-hover);
    }

    /* --- Focus --- */
    .ibs-input .mud-input.mud-input-outlined:focus-within {
        --wf-current-border: var(--wf-border-focus);
        --wf-current-shadow: none;
    }

    /* --- Outlined border --- */
    .ibs-input .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: var(--wf-radius);
        border-width: 1px !important;
        border-color: var(--wf-current-border) !important;
        box-shadow: var(--wf-current-shadow);
    }

/* --- Label --- */
.ibs-input .mud-input-label-outlined.mud-input-label-inputcontrol {
    color: var(--wf-label) !important;
    font-weight: 600;
    font-size: 0.82rem;
}

.ibs-input .mud-input.mud-input-outlined .mud-input-outlined-border legend {
    font-size: 0.72rem;
}

.ibs-input .mud-input.mud-input-outlined:focus-within ~ .mud-input-label-outlined {
    color: var(--wf-border-focus) !important;
}

/* --- Error state ---
   Specificity is bumped so this beats the default-state border rule.
   --error is referenced directly because the helper-text + label are
   siblings of .mud-input, so --wf-danger does not cascade to them. */
.ibs-input .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--error) !important;
    border-width: 2px !important;
}

.ibs-input .mud-input-label.mud-input-error,
.ibs-input .mud-input-helper-text.mud-input-error {
    color: var(--error) !important;
}

/* --- Input text + placeholder --- */
.ibs-input .mud-input.mud-input-outlined input {
    color: var(--wf-text);
}

    .ibs-input .mud-input.mud-input-outlined input::placeholder {
        color: var(--wf-placeholder);
        opacity: 1;
    }

/* --- Input root height --- */
.ibs-input .mud-input.mud-input-outlined .mud-input-root-outlined {
     padding: 22px 22px !important;
}

/* --- Disabled --- */
.ibs-input--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Native Date Picker (IbsInputDateTime) --- */
.ibs-date {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Reserve space equivalent to MudTextField counter row for height consistency */
    padding-bottom: 22px;
}

.ibs-date__label {
    position: absolute;
    top: -6px;
    left: 14px;
    padding: 0 4px;
    background: var(--n0, #fff);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--n700, var(--n700));
    z-index: 1;
}

[dir="rtl"] .ibs-date__label {
    left: auto;
    right: 14px;
}

/* Visible border wrapper */
.ibs-date__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 22px;
    border: 1px solid var(--n40, var(--n40));
    border-radius: 8px;
    background: var(--n0, #fff);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.ibs-date__field:hover {
    border-color: var(--n80, var(--n80));
}

.ibs-date:focus-within .ibs-date__field {
    border-color: var(--brand-primary-border, var(--brand-green-light));
    border-width: 2px;
    padding: 21px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary-border, var(--brand-green-light)) 12%, transparent);
}

.ibs-date:focus-within .ibs-date__label {
    color: var(--brand-primary-border, var(--brand-green-light));
}

/* Formatted date text — font-size + line-height match MudTextField input for equal height */
.ibs-date__text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4375;
    color: var(--n900, var(--n900));
    font-family: inherit;
    pointer-events: none;
}

.ibs-date__text--placeholder {
    color: var(--n400, var(--n400));
}

/* Calendar icon */
.ibs-date__icon {
    flex-shrink: 0;
    color: var(--n500, var(--n500));
    pointer-events: none;
}

/* Hidden native date input — covers full area for click + calendar */
.ibs-date__native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}

/* Stretch calendar picker indicator to cover entire area (Chrome/Edge) */
.ibs-date__native::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Error state */
.ibs-date--error .ibs-date__field {
    border-color: var(--error, #ef4444);
}

.ibs-date--error .ibs-date__label {
    color: var(--error, #ef4444);
}

.ibs-date__error {
    font-size: 0.78rem;
    color: var(--error, #ef4444);
    margin: 4px 14px 0;
}

/* Disabled */
.ibs-input--disabled .ibs-date__field {
    opacity: 0.5;
    cursor: not-allowed;
}

.ibs-input--disabled .ibs-date__native {
    cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .ibs-date__field {
    border-color: var(--n600, var(--n600));
    background: var(--dark-surface, var(--dark-surface));
}

[data-theme="dark"] .ibs-date__text {
    color: var(--n800, var(--n800));
}

[data-theme="dark"] .ibs-date__text--placeholder {
    color: var(--n500, var(--n500));
}

[data-theme="dark"] .ibs-date__label {
    color: var(--n700, var(--n700));
    background: var(--dark-surface, var(--dark-surface));
}

[data-theme="dark"] .ibs-date__field:hover {
    border-color: var(--n500, var(--n500));
}

[data-theme="dark"] .ibs-date__icon {
    color: var(--n400, var(--n400));
}

/* --- Prefix / Suffix layout --- */
.ibs-input {
    display: flex;
}

    .ibs-input .mud-input-control {
        flex: 1;
        min-width: 0;
    }

/* --- Email: layout stays RTL, only input text is LTR --- */
.ibs-input--email input {
    direction: ltr;
    text-align: left;
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-input .mud-input.mud-input-outlined {
    --wf-border-default: var(--n600, var(--n600));
    --wf-border-hover: var(--n500, var(--n500));
    --wf-text: var(--n800, var(--n800));
    --wf-placeholder: var(--n400, var(--n400));
    --wf-label: var(--n700, var(--n700));
}

/* ==========================================================
   IBS Template Components — Dropdown List (Searchable)
   Scoped under .ibs-ddl so styles only apply to IbsDropdownList.
   Tokens from app.css (:root).
   ========================================================== */
.ibs-ddl {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.ibs-ddl__label {
    position: absolute;
    top: -6px;
    inset-inline-start: 14px;
    background: var(--n0, #fff);
    padding: 0 6px;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--n700, var(--n700));
    z-index: 1;
}

/* --- Trigger button --- */
/* The keyboard's current option. Focus stays on the trigger (combobox pattern), so the option
   itself never receives :focus — without a visible marker an arrow-key user cannot see where they
   are in the list. */
.ibs-ddl__opt--focused {
    background: var(--brand-primary-bg, rgba(24, 201, 47, 0.12));
    outline: 2px solid var(--brand-primary, #18c92f);
    outline-offset: -2px;
}

/* Give the trigger itself a ring too — the sweep found no indicator on any of these controls. */
.ibs-ddl__trigger:focus-visible {
    outline: 2px solid var(--brand-primary, #18c92f);
    outline-offset: 2px;
}

.ibs-ddl__trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    padding: 10px 20px;
    border: 1px solid var(--n40, var(--n40));
    border-radius: 8px;
    cursor: pointer;
    background: var(--n0, #fff);
    font: inherit;
    color: var(--n900, var(--n900));
    text-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .ibs-ddl__trigger:hover {
        border-color: var(--n80, var(--n80));
    }

.ibs-ddl--open .ibs-ddl__trigger {
    border-color: var(--brand-primary, var(--brand-primary-border));
    box-shadow: var(--shadow-lg);
}

/* --- Value / placeholder --- */
.ibs-ddl__value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ibs-ddl__value--placeholder {
    color: var(--n300, var(--text-muted));
}

.ibs-ddl__flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* --- Disabled --- */
.ibs-ddl--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Arrow icon --- */
.ibs-ddl__arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--n400, var(--n400));
}

.ibs-ddl--open .ibs-ddl__arrow {
    transform: rotate(180deg);
}

/* --- Click-outside overlay --- */
.ibs-ddl__overlay {
    position: fixed;
    inset: 0;
    z-index: 509;
}

/* --- Menu --- */
.ibs-ddl__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--n0, #fff);
    border: 0.5px solid var(--n30, var(--n30));
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 510;
    max-height: 240px;
    overflow-y: auto;
}

.ibs-ddl__error {
    color: var(--error, #dc2626);
    font-size: 0.78rem;
    margin: 4px 4px 0;
}

/* --- Search --- */
.ibs-ddl__search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--n40, var(--n40));
    position: sticky;
    top: 0;
    background: var(--n0, #fff);
    border-radius: 8px 8px 0 0;
}

.ibs-ddl__search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--n700, var(--n700));
    background: transparent;
}

    .ibs-ddl__search-input::placeholder {
        color: var(--n300, var(--text-muted));
    }

/* --- Options --- */
.ibs-ddl__option {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--n700, var(--n700));
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ibs-ddl__option:hover {
        background: var(--n20, var(--n20));
    }

.ibs-ddl__option--active {
    background: var(--brand-blue);
    color: var(--n0);
    font-weight: 500;
}

    .ibs-ddl__option--active:hover {
        background: var(--brand-blue-hover);
    }

/* --- Multi-select options --- */
.ibs-ddl__multi-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s ease;
}

    .ibs-ddl__multi-opt:hover {
        background: var(--n20, var(--n20));
    }

.ibs-ddl__multi-opt--active {
    color: var(--brand-primary);
}

.ibs-ddl__check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--n60, var(--n60));
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ibs-ddl__check--checked {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--n0);
}

/* --- RTL --- */
/* .ibs-ddl__label uses inset-inline-start, no RTL override needed */
/* .ibs-ddl__trigger uses text-align: start, no RTL override needed */
/* .ibs-ddl__option inherits text direction from document */

/* --- Dark mode --- */

/* ==========================================================
   IBS Template Components — Input AutoComplete
   Scoped under .ibs-input.ibs-ac
   ========================================================== */
.ibs-input.ibs-ac {
    position: relative;
}

/* --- Click-outside overlay --- */
.ibs-ac__overlay {
    position: fixed;
    inset: 0;
    z-index: 19;
}

/* --- Suggestion menu --- */
.ibs-ac__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--n0, #fff);
    border: 0.5px solid var(--n30, var(--n30));
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
}

/* --- Option row --- */
.ibs-ac__option {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--n700, var(--n700));
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ibs-ac__option:hover {
        background: var(--n20, var(--n20));
    }

/* --- RTL --- */
/* .ibs-ac__option inherits text direction from document */

/* --- Dark mode --- */
[data-theme="dark"] .ibs-ac__menu {
    background: var(--dark-surface, var(--dark-surface));
    border-color: var(--n600, var(--n600));
}

[data-theme="dark"] .ibs-ac__option {
    color: var(--n200, var(--n200));
}

    [data-theme="dark"] .ibs-ac__option:hover {
        background: color-mix(in srgb, var(--dark-surface, var(--dark-surface)) 70%, var(--bg) 12%);
    }

/* ==========================================================
   IbsBirthYearMonth
   ========================================================== */
.ibs-birth-ym {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ibs-birth-ym__hint {
    font-size: 0.8rem;
    color: var(--n400, var(--n400));
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-birth-ym__hint {
    color: var(--n500, var(--n500));
}

/* ==========================================================
   IbsBoolean — Yes/No toggle (wraps IbsButtonCollections)
   ========================================================== */

/* --- Field wrapper --- */
.ibs-bool-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reserve space equivalent to MudTextField counter row for height consistency */
    padding-bottom: 22px;
}

.ibs-bool--full {
    width: 100%;
}

.ibs-bool--full .ibs-tabs {
    width: 100%;
}

/* --- Shared field label --- */
.ibs-field__label {
    font-weight: 400;
    font-size: 16px;
    color: var(--n800, var(--n800));
    margin-bottom: 8px;
}

/* --- Reveal content --- */
.ibs-bool__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

    .ibs-bool__reveal > * {
        overflow: hidden;
    }

.ibs-bool__reveal--visible {
    grid-template-rows: 1fr;
}

    .ibs-bool__reveal--visible > * {
        overflow: visible;
    }

/* --- Dark mode --- */

/* ==========================================================
   IbsCard — Content card with accent border
   ========================================================== */
.card {
    background: var(--n0, #fff);
    border: 1px solid var(--n30, var(--n30));
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 27px 24px;
    max-width: 100%;
    overflow: visible;
    transition: box-shadow 0.2s ease;
    margin-top: 16px;
}

.card-accent {
    border-top: 3px solid var(--page-accent);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: start;
}

/* --- Responsive: 768px --- */
@media (max-width: 768px) {
    .card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .card-body {
        gap: 16px;
    }
}

/* --- RTL: text-align: start in base rule handles both directions --- */

/* --- Dark mode --- */
[data-theme="dark"] .card,
[data-theme="dark"] .card-accent {
    background: var(--n10, var(--n10));
    border-color: var(--n30, var(--n30));
}

[data-theme="dark"] .card-accent {
    border-color: var(--border);
}

[data-theme="dark"] .card {
    box-shadow: var(--shadow-md);
}

/* ==========================================================
   IbsCheckBox — Checkbox (bare + card variants)
   ========================================================== */
.ibs-chk {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    margin-top: 16px;
    user-select: none;
    text-align: start;
}

.ibs-chk__header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ibs-chk__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    padding-top: 0;
}

    .ibs-chk__content > * {
        overflow: hidden;
    }

.ibs-chk__content--visible {
    grid-template-rows: 1fr;
    padding-top: 12px;
}

    .ibs-chk__content--visible > * {
        overflow: visible;
    }

.ibs-chk--card {
    padding: 23px 20px;
    background: var(--n0, #fff);
    border: 1px solid var(--n30, var(--n30));
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

    .ibs-chk--card:hover {
        border-color: var(--n80, var(--n80));
        box-shadow: var(--shadow-sm);
    }

    .ibs-chk--card.ibs-chk--checked {
        border-color: var(--brand-primary, var(--success));
        box-shadow: var(--shadow-md);
    }

/* The real checkbox. Visually hidden but still focusable and still hit-testable — display:none or
   visibility:hidden would take it out of the tab order again, which is the bug this replaced. It
   sits over the drawn box so a pointer lands on the input itself. */
.ibs-chk__native {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ibs-chk__header {
    cursor: pointer;
}

/* A visible focus ring for keyboard users — the sweep found no indicator anywhere on these
   controls. :focus-visible so a mouse click does not leave a ring behind. */
.ibs-chk__native:focus-visible + .ibs-chk__box {
    outline: 2px solid var(--brand-primary, #18c92f);
    outline-offset: 2px;
}

.ibs-chk--disabled .ibs-chk__native,
.ibs-chk--disabled .ibs-chk__header {
    cursor: not-allowed;
}

.ibs-chk__box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid var(--n80, var(--n80));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ibs-chk__box--checked {
    background: var(--brand-primary-bg, var(--success));
    border-color: var(--brand-primary, var(--success));
    border: none;
    box-shadow: var(--shadow-md);
}

.ibs-chk__label {
    font-weight: 500;
    font-size: 16px;
    color: var(--n800, var(--n800));
}

.ibs-chk__note {
    font-weight: 400;
    font-size: 14px;
    color: var(--n400, var(--n400));
}

.ibs-chk--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- RTL: text-align: start in base rule handles both directions --- */

/* --- Mobile --- */
@media (max-width: 480px) {
    .ibs-chk--card {
        flex-wrap: wrap;
        padding: 16px 14px;
        gap: 8px;
        border-radius: 14px;
    }

    .ibs-chk__label {
        font-size: 14px;
        font-weight: 600;
    }

    .ibs-chk__note {
        font-size: 12px;
        flex-basis: 100%;
        padding-inline-start: 32px;
        line-height: 1.4;
    }
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-chk--card {
    background: var(--dark-surface, var(--dark-surface));
    border-color: var(--n600, var(--n600));
}

    [data-theme="dark"] .ibs-chk--card:hover {
        border-color: var(--n500, var(--n500));
    }

[data-theme="dark"] .ibs-chk__box {
    border-color: var(--n500, var(--n500));
}

[data-theme="dark"] .ibs-chk__label {
    color: var(--n800, var(--n800));
}

[data-theme="dark"] .ibs-chk__note {
    color: var(--n700, var(--n700));
}

/* ==========================================================
   IbsInputNumber — Number stepper (+/-)
   ========================================================== */
.ibs-stepper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.ibs-stepper__label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--n700, var(--n700));
}

.ibs-stepper__control {
    display: flex;
    align-items: center;
    border: 1px solid var(--n200, var(--n200));
    border-radius: 12px;
    background: var(--n0, #fff);
    overflow: hidden;
    height: 48px;
}

.ibs-stepper__btn {
    width: 44px;
    height: 100%;
    border: none;
    background: var(--page-accent);
    font-size: 18px;
    font-weight: 600;
    color: var(--n0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    user-select: none;
}

    .ibs-stepper__btn:hover:not(.ibs-stepper__btn--disabled) {
        background: color-mix(in srgb, var(--page-accent) 85%, var(--n900));
    }

    .ibs-stepper__btn:active:not(.ibs-stepper__btn--disabled) {
        background: color-mix(in srgb, var(--page-accent) 75%, var(--n900));
    }

.ibs-stepper__btn--dec {
    border-inline-end: 1px solid var(--n200, var(--n200));
}

.ibs-stepper__btn--inc {
    border-inline-start: 1px solid var(--n200, var(--n200));
}

.ibs-stepper__btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ibs-stepper__value {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--n800, var(--n800));
    user-select: none;
}

.ibs-stepper--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- RTL --- */
/* Stepper uses logical border properties + native RTL flex, no overrides needed */

/* --- Dark mode --- */
[data-theme="dark"] .ibs-stepper__label {
    color: var(--n200, var(--n200));
}

[data-theme="dark"] .ibs-stepper__control {
    background: var(--dark-surface, var(--dark-surface));
    border-color: var(--n600, var(--n600));
}

[data-theme="dark"] .ibs-stepper__btn {
    background: color-mix(in srgb, var(--page-accent) 80%, var(--dark-surface));
    color: var(--n0);
}

    [data-theme="dark"] .ibs-stepper__btn:hover:not(.ibs-stepper__btn--disabled) {
        background: color-mix(in srgb, var(--page-accent) 20%, var(--dark-surface));
        color: var(--brand-primary-lighter);
    }

[data-theme="dark"] .ibs-stepper__btn--dec {
    border-color: var(--n600, var(--n600));
}

[data-theme="dark"] .ibs-stepper__btn--inc {
    border-color: var(--n600, var(--n600));
}

[data-theme="dark"] .ibs-stepper__value {
    color: var(--n100, var(--n100));
}

/* ==========================================================
   IbsPageBanner — Page banner with icon, title, description, step
   ========================================================== */
.page-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 14%, var(--n0, #fff)) 0%, color-mix(in srgb, var(--page-accent) 6%, var(--n0, #fff)) 100%);
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
    text-align: start;
}

    .page-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.06;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

.banner-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--page-gradient, linear-gradient(135deg, var(--brand-primary), var(--brand-primary-lighter)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

    .banner-icon img {
        width: 28px;
        height: 28px;
        filter: brightness(10);
    }

.banner-text {
    flex: 1;
}

    .banner-text h1 {
        font-weight: 600;
        font-size: 26px;
        color: var(--n900, var(--n900));
        line-height: 1.3;
        margin: 0;
    }

    .banner-text p {
        font-weight: 400;
        font-size: 14px;
        color: var(--n400, var(--n400));
        margin-top: 4px;
        margin-bottom: 0;
    }

.banner-step {
    font-weight: 500;
    font-size: 13px;
    color: var(--page-accent);
    background: var(--surface), 0.08);
    padding: 6px 14px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Responsive: 1200px --- */
@media (max-width: 1200px) {
    .page-banner {
        flex-wrap: wrap;
    }

    .banner-step {
        order: -1;
        width: 100%;
    }
}

/* --- Responsive: 768px --- */
@media (max-width: 768px) {
    .page-banner {
        padding: 18px 16px;
        border-radius: 14px;
        gap: 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .banner-icon img {
        width: 44px;
        height: 44px;
    }

    .banner-text h1 {
        font-size: 20px;
    }

    .banner-text p {
        font-size: 13px;
    }

    .banner-step {
        font-size: 12px;
        order: 0;
        width: auto;
    }
}

/* --- Responsive: 480px --- */
@media (max-width: 480px) {
    .page-banner {
        padding: 14px 12px;
    }

    .banner-text h1 {
        font-size: 16px;
        line-height: 22px;
    }

    .banner-text p {
        font-size: 12px;
        line-height: 18px;
    }
}

/* --- RTL: text-align: start in base rule handles both directions ---*/

/* --- Dark mode --- */
[data-theme="dark"] .page-banner {
    background: var(--surface);
    border-color: var(--border);
}

    [data-theme="dark"] .page-banner h1 {
        color: var(--n800, var(--n800));
    }

    [data-theme="dark"] .page-banner p {
        color: var(--n400, var(--n400));
    }

/* ==========================================================
   IbsSectionTitle — Sub-section heading (smaller)
   ========================================================== */
.ibs-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    text-align: start;
}

.ibs-section__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-blue-bg), var(--brand-blue-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-blue, var(--brand-primary));
}

.ibs-section__icon img {
    width: 16px;
    height: 16px;
    filter: brightness(10);
}

.ibs-section__num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-blue-bg), var(--brand-blue-bg));
    color: var(--brand-blue, var(--brand-primary));
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ibs-section__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ibs-section__text {
    font-weight: 600;
    font-size: 15px;
    color: var(--n800, var(--n800));
}

.ibs-section__sub {
    font-weight: 400;
    font-size: 13px;
    color: var(--n400, var(--n400));
}

/* --- RTL: text-align: start in base rule handles both directions --- */

/* --- Dark mode --- */
[data-theme="dark"] .ibs-section__icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 15%, transparent), var(--surface));
}

[data-theme="dark"] .ibs-section__num {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 15%, transparent), var(--surface));
}

[data-theme="dark"] .ibs-section__text {
    color: var(--n100, var(--n100));
}

[data-theme="dark"] .ibs-section__sub {
    color: var(--n400, var(--n400));
}

/* ==========================================================
   IbsButton — Action button variants
   ========================================================== */
.ibs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    padding: 14px 52px;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    border-radius: 99px;
    user-select: none;
    box-shadow: var(--shadow-md);
}

    .ibs-btn:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
    }

    .ibs-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.ibs-btn--primary {
    background: var(--brand-green-gradient);
    color: var(--n0);
    box-shadow: var(--shadow-lg);
}

    .ibs-btn--primary:hover:not(:disabled) {
        background: var(--brand-green-gradient-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

.ibs-btn--secondary {
    background: transparent;
    color: var(--n700);
    border-color: var(--n40);
}

    .ibs-btn--secondary:hover:not(:disabled) {
        background: var(--n10);
        border-color: var(--n80);
    }

.ibs-btn--outline {
    background: transparent;
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

    .ibs-btn--outline:hover:not(:disabled) {
        background: color-mix(in srgb, var(--brand-blue) 6%, transparent);
    }

.ibs-btn--green {
    background: var(--brand-green-gradient);
    color: var(--n0);
    box-shadow: var(--shadow-lg);
}

    .ibs-btn--green:hover:not(:disabled) {
        background: var(--brand-green-gradient-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

.ibs-btn--sm {
    height: auto;
    padding: 10px 20px;
    font-size: 14px;
}

.ibs-btn--full {
    width: 100%;
}

.ibs-btn--capped {
    max-width: 400px;
    width: 100%;
}

.ibs-btn__icon {
    display: flex;
    align-items: center;
}

[dir="rtl"] .ibs-btn__icon {
    transform: scaleX(-1);
}

.ibs-btn__spinner {
    display: flex;
    align-items: center;
    animation: ibs-spin 0.7s linear infinite;
}

@keyframes ibs-spin {
    to { transform: rotate(360deg); }
}

.ibs-btn-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
    justify-content: space-between;
}

/* --- Mobile --- */
@media (max-width: 480px) {
    .ibs-btn {
        height: auto;
        padding: 12px 16px;
        font-size: 15px;
    }

    .ibs-btn-row {
        flex-direction: column;
        gap: 10px;
    }

        .ibs-btn-row .ibs-btn {
            width: 100%;
        }
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-btn--primary {
    background: var(--brand-green-gradient);
    color: var(--n0);
}

    [data-theme="dark"] .ibs-btn--primary:hover:not(:disabled) {
        background: var(--brand-green-gradient-hover);
        transform: translateY(-1px);
    }

[data-theme="dark"] .ibs-btn--green:hover:not(:disabled) {
    background: var(--brand-green-gradient-hover);
    transform: translateY(-1px);
}

[data-theme="dark"] .ibs-btn--secondary {
    color: var(--n700);
    border-color: var(--n600);
}

    [data-theme="dark"] .ibs-btn--secondary:hover:not(:disabled) {
        background: color-mix(in srgb, var(--dark-surface) 70%, var(--n0) 12%);
        border-color: var(--n500);
    }

[data-theme="dark"] .ibs-btn--outline {
    color: var(--brand-primary-lighter);
    border-color: var(--brand-primary-lighter);
}

    [data-theme="dark"] .ibs-btn--outline:hover:not(:disabled) {
        background: color-mix(in srgb, var(--brand-primary-lighter) 8%, transparent);
    }

[data-theme="dark"] .ibs-btn--green {
    background: var(--brand-green-gradient);
    color: var(--n0);
}
.ibs-btn--nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

/* ==========================================================
   IbsSlider — Range slider with value display and labels
   ========================================================== */

/* --- Field wrapper --- */
.ibs-slider-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

/* --- Slider container --- */
.ibs-slider {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

/* --- Range input --- */
.ibs-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 99px;
    --slider-pct: 50%;
    background: linear-gradient(to right, var(--page-accent) var(--slider-pct), var(--n30) var(--slider-pct));
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ibs-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--page-accent);
    border: 3.5px solid var(--n0);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-green) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--brand-green) 18%, transparent);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

    .ibs-slider__input::-webkit-slider-thumb:hover {
        box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-green) 30%, transparent), 0 6px 18px color-mix(in srgb, var(--brand-green) 28%, transparent);
        transform: scale(1.08);
    }

    .ibs-slider__input::-webkit-slider-thumb:active {
        transform: scale(0.96);
    }

.ibs-slider__input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--page-accent);
    border: 3.5px solid var(--n0);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-green) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--brand-green) 18%, transparent);
    cursor: pointer;
}

.ibs-slider__input::-moz-range-track {
    height: 8px;
    border-radius: 99px;
    background: var(--n30);
}

/* --- No-track modifier --- */
.ibs-slider__input--no-track {
    background: transparent !important;
}

    .ibs-slider__input--no-track::-moz-range-track {
        background: transparent;
    }

/* --- Value display --- */
.ibs-slider__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--page-accent);
    margin-bottom: 4px;
}

/* --- Labels row --- */
.ibs-slider__labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--n400);
    font-weight: 500;
    padding: 0 4px;
}

/* --- Responsive: drawer context --- */
.drawer-body .ibs-slider__labels {
    font-size: 11px;
}

/* --- RTL: mirror slider direction --- */
[dir="rtl"] .ibs-slider__input {
    direction: rtl;
    background: linear-gradient(to left, var(--page-accent) var(--slider-pct), var(--n30) var(--slider-pct));
}

[dir="rtl"] .ibs-slider__labels {
    direction: rtl;
}

/* ==========================================================
   IBS Template Components — Collapse Section
   Scoped under .ibs-collapse
   ========================================================== */
.ibs-collapse {
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: fadeInUp 0.4s ease both;
}

.ibs-collapse--hidden {
    display: none;
}

.ibs-collapse__header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ibs-collapse__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.ibs-collapse__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ibs-collapse__title {
    font-weight: 500;
    font-size: 24px;
    color: var(--n900);
    line-height: 1.3;
}

.ibs-collapse__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--n0);
    border: 1px solid var(--n30);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    font-weight: 400;
    font-size: 14px;
    color: var(--n700);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ibs-collapse__toggle:hover {
        background: var(--n10);
    }

.ibs-collapse__chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.ibs-collapse__toggle--collapsed .ibs-collapse__chevron {
    transform: rotate(180deg);
}

.ibs-collapse__body {
    max-height: 2000px;
    overflow: visible;
    transition: max-height 0.4s ease;
}

.ibs-collapse__body--collapsed {
    max-height: 0;
    overflow: hidden;
}

/* --- Dark mode --- */
[data-theme="dark"] .ibs-collapse__title {
    color: var(--n700, var(--n700));
}

[data-theme="dark"] .ibs-collapse__toggle {
    background: var(--n40, var(--n40));
    border-color: var(--n600, var(--n600));
    color: var(--n800, var(--n800));
}

    [data-theme="dark"] .ibs-collapse__toggle:hover {
        background: var(--n30, var(--n30));
    }

/* --- RTL --- */
[dir="rtl"] .ibs-collapse__toggle img {
    transform: none;
}

/* ==========================================================
   OFFER CARD — exact copy from design app.css
   Only change: every selector scoped under .ibs-offer
   ========================================================== */
.ibs-offer .offer-card {
  background: var(--n0);
  border: 0.5px solid var(--n30);
  border-radius: 16px;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, border-top-color 0.3s ease;
  overflow: hidden;
  min-height: 420px;
}

.ibs-offer .offer-card:hover:not(.expanded) {
  transform: translateY(-4px);
  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.08);
}

.ibs-offer .offer-company {
  font-weight: 500;
  font-size: 16px;
  color: var(--n800);
}

.ibs-offer .offer-type {
  font-weight: 400;
  font-size: 14px;
  color: var(--n400);
}

.ibs-offer .offer-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ibs-offer .price-amount {
  font-weight: 700;
  font-size: 24px;
  color: var(--n900);
}

.ibs-offer .price-period {
  font-weight: 400;
  font-size: 14px;
  color: var(--n400);
}

/* ---- Pricing details breakdown on card ---- */
.ibs-offer .offer-pricing-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--n10, #f8f9fa);
  border-radius: 8px;
  font-size: 13px;
}

.ibs-offer .pricing-row {
  display: flex;
  justify-content: space-between;
  color: var(--n600);
}

.ibs-offer .pricing-row.discount {
  color: var(--page-accent);
}

.ibs-offer .pricing-row.total {
  font-weight: 700;
  color: var(--n900);
  border-top: 1px solid var(--n100);
  padding-top: 6px;
  margin-top: 2px;
}

.ibs-offer .pricing-row.pricing-row-start span:first-child {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ibs-offer .pricing-icon {
  flex-shrink: 0;
}

.ibs-offer .pricing-endurance-value {
  font-weight: 600;
  color: var(--n800);
}

.ibs-offer .deductible-select {
  padding: 4px 8px;
  border: 1px solid var(--n200);
  border-radius: 6px;
  background: var(--n0);
  font-size: 13px;
  font-weight: 600;
  color: var(--n800);
  cursor: pointer;
}

.ibs-offer .deductible-select:focus {
  outline: 2px solid var(--page-accent);
  outline-offset: 1px;
}

/* ==========================================================
   33. ENHANCED OFFER CARDS (Step 3)
   ========================================================== */
.ibs-offer .offer-card {
  position: relative;
  border-top: 3px solid transparent;
}

.ibs-offer .offer-card:hover {
  border-top-color: var(--page-accent);
}

.ibs-offer .offer-recommended {
  border-color: color-mix(in srgb, var(--page-accent) 30%, transparent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--page-accent) 8%, transparent);
}

.ibs-offer .offer-ribbon {
  position: absolute;
  top: 16px;
  right: 0;
  background: var(--page-gradient, linear-gradient(135deg, #0D9488, #2DD4BF));
  color: var(--n0);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 14px 4px 12px;
  border-radius: 6px 0 0 6px;
  z-index: 1;
}

.ibs-offer .offer-ribbon::after {
  display: none;
}

/* Skeleton Loading Cards */

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.ibs-offer .offer-logo-wrap {
  flex-shrink: 0;
}

.ibs-offer .offer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ibs-offer .offer-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.ibs-offer .star {
  font-size: 14px;
  color: var(--n30);
}

.ibs-offer .star.filled {
  color: #FBBF24;
}

.ibs-offer .rating-count {
  font-weight: 400;
  font-size: 12px;
  color: var(--n400);
  margin-left: 4px;
}

.ibs-offer .offer-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  position: relative;
  max-height: 56px;
  overflow: hidden;
}

/* Show all features when card is expanded */
.ibs-offer .offer-card.expanded .offer-features {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  max-height: none;
}

.ibs-offer .feature-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 13px;
  color: var(--n700);
  white-space: nowrap;
  flex-shrink: 0;
}

.ibs-offer .btn-full {
  width: 100%;
}

/* Offer type label (sub-line like "Enads Takaful") */
.ibs-offer .offer-type-label {
  font-weight: 400;
  font-size: 13px;
  color: var(--n300);
}

/* ----------------------------------------------------------
   OFFER CARD EXPAND-TO-RIGHT
   ---------------------------------------------------------- */

/* Inner wrapper: horizontal layout for main + details */
.ibs-offer .offer-card-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  width: 100%;
  flex: 1;
}

/* Main content area: takes fixed width matching original card */
.ibs-offer .offer-card-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 100%;
  min-width: 0;
  transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Push the Select button to the card bottom always */
.ibs-offer .offer-card-main > .btn-full {
  margin-top: auto;
}

/* Hidden details panel — fully collapsed by default */
.ibs-offer .offer-card-details {
  display: none;
  align-items: stretch;
  gap: 24px;
  overflow: hidden;
  opacity: 0;
  min-width: 0;
}

/* ---- Details Left: description + add-ons ---- */

.ibs-offer .details-coverage-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--n900);
}

.ibs-offer .details-coverage-badge svg {
  flex-shrink: 0;
}

.ibs-offer .details-description {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--n400);
  margin: 0;
  white-space: normal;
}

.ibs-offer .details-addons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.ibs-offer .details-addons-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--n800);
}

.ibs-offer .addon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.ibs-offer .addon-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--n40);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: var(--n0);
}

.ibs-offer .addon-check:checked {
  background: var(--page-accent);
  border-color: var(--page-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.ibs-offer .addon-name {
  font-weight: 400;
  font-size: 13px;
  color: var(--n700);
}

.ibs-offer .addon-price {
  background: var(--page-accent);
  color: var(--n0);
  font-weight: 600;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
  margin-inline-start: auto;
}

/* ---- Details Right: pricing card ---- */

.ibs-offer .details-pricing-card {
  background: var(--n10);
  border: 1px solid var(--n30);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ibs-offer .pricing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ibs-offer .pricing-label {
  font-weight: 400;
  font-size: 13px;
  color: var(--n400);
}

.ibs-offer .pricing-info-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;
  color: var(--page-accent);
  cursor: pointer;
}

.ibs-offer .pricing-amount {
  font-weight: 700;
  font-size: 28px;
  color: var(--n900);
  letter-spacing: -0.5px;
}

.ibs-offer .pricing-endurance {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ibs-offer .pricing-endurance-label {
  font-weight: 400;
  font-size: 13px;
  color: var(--n400);
}

.ibs-offer .pricing-select-wrap {
  position: relative;
}

.ibs-offer .pricing-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--n30);
  border-radius: 10px;
  background: var(--n0);
  font-size: 13px;
  font-weight: 400;
  color: var(--n700);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23505F79' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.ibs-offer .btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: var(--brand-green-gradient);
  color: var(--n0);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-top: 4px;
}

.ibs-offer .btn-buy-now:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ---- Offer Timer ---- */
.ibs-offer .offer-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #EF4444;
}

.ibs-offer .offer-timer svg {
  flex-shrink: 0;
}

.ibs-offer .timer-text {
  font-variant-numeric: tabular-nums;
}

/* ---- Terms & Conditions Button ---- */
.ibs-offer .offer-tandc-btn {
  background: none;
  border: none;
  color: var(--n400);
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  text-align: center;
  transition: color 0.2s ease;
}

.ibs-offer .offer-tandc-btn:hover {
  color: var(--page-accent);
}

/* ---- Expand / Collapse toggle ---- */

.ibs-offer .offer-toggle-icon {
  transition: transform 0.3s ease;
}

.ibs-offer .offer-card.expanded .offer-toggle-icon {
  transform: rotate(180deg);
}

/* ---- Compare Mode ---- */
.ibs-offer .offer-card .compare-check {
  display: none;
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--n200);
  background: var(--n0);
  z-index: 5;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ibs-offer .offers-grid.compare-mode .offer-card {
  position: relative;
}

.ibs-offer .offers-grid.compare-mode .compare-check {
  display: flex;
}

.ibs-offer .offer-card.compare-selected .compare-check {
  background: var(--page-accent);
  border-color: var(--page-accent);
}

.ibs-offer .offer-card.compare-selected .compare-check::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--n0);
  border-bottom: 2px solid var(--n0);
  transform: rotate(-45deg) translateY(-1px);
}

.ibs-offer .offer-card.compare-selected {
  border-color: var(--page-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent) 12%, transparent), 0 12px 16px rgba(0,0,0,0.04);
}

/* ---- EXPANDED STATE ---- */
.ibs-offer .offer-card.expanded {
  grid-column: 1 / -1;
  transform: none;
  border-top-color: var(--page-accent);
  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.08);
  animation: expandGlow 0.5s ease;
}

@keyframes expandGlow {
  0% { box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04); }
  50% { box-shadow: 0 24px 48px rgba(0, 128, 90, 0.12); }
  100% { box-shadow: 0 20px 32px rgba(0, 0, 0, 0.08); }
}

.ibs-offer .offer-card.expanded .offer-card-main {
  flex: 0 0 280px;
}

.ibs-offer .offer-card.expanded .offer-card-details {
  display: flex;
  flex: 1 1 auto;
  opacity: 1;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--n30);
  margin-inline-start: 24px;
}

.ibs-offer .offer-card.expanded:hover {
  transform: none;
}

/* Hide the original "Select This Offer" button when expanded */
.ibs-offer .offer-card.expanded .offer-card-main .btn-full {
  display: none;
}

/* ---- Responsive (max-width: 1200px) ---- */
@media (max-width: 1200px) {
  .ibs-offer .offer-card.expanded .offer-card-main {
    flex: 0 0 240px;
  }

  }

/* ---- Responsive (max-width: 768px) ---- */
@media (max-width: 768px) {
  .ibs-offer .offers-grid,
  .ibs-offer .offers-grid.has-expanded {
    grid-template-columns: 1fr;
  }

  .ibs-offer .offer-card.expanded .offer-card-inner {
    flex-direction: column;
  }

  .ibs-offer .offer-card.expanded .offer-card-main {
    flex: 0 0 auto;
  }

  .ibs-offer .offer-card.expanded .offer-card-details {
    flex: 0 0 auto;
    flex-direction: column;
    border-inline-start: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--n30);
    padding-top: 16px;
    margin-top: 16px;
    gap: 16px;
  }

  .ibs-offer .details-pricing-card {
    border: none;
    background: var(--n10);
    border-radius: 12px;
  }
}

/* ---- RTL ---- */
[dir="rtl"] .ibs-offer .offer-ribbon {
  right: auto;
  left: -8px;
  border-radius: 0 6px 6px 0;
}

[dir="rtl"] .ibs-offer .btn-buy-now svg {
  transform: scaleX(-1);
}

/* Offer card compare check position */
[dir="rtl"] .ibs-offer .compare-check {
  right: auto;
  left: 12px;
}

/* ---- Pricing Details Drawer ---- */
.pricing-drawer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pricing-drawer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--n30);
}

.pricing-drawer-logo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
}

.pricing-drawer-company {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pricing-drawer-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--n900);
}

.pricing-drawer-type {
  font-weight: 400;
  font-size: 13px;
  color: var(--n400);
}

.pricing-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-drawer-section-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--n800);
  margin: 0 0 4px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n30);
}

.pricing-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--n600);
  padding: 4px 0;
}

.pricing-drawer-row.discount {
  color: var(--page-accent);
}

.pricing-drawer-row.loading {
  color: var(--n500);
}

.pricing-drawer-row.subtotal {
  font-weight: 600;
  color: var(--n800);
  border-top: 1px dashed var(--n100);
  padding-top: 8px;
  margin-top: 4px;
}

.pricing-drawer-row.total {
  font-weight: 700;
  font-size: 16px;
  color: var(--n900);
  border-top: 2px solid var(--n200);
  padding-top: 10px;
  margin-top: 4px;
}

.pricing-drawer-row span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: end;
}