/* ==========================================================================
   Car insurance flow
   --------------------------------------------------------------------------
   One stylesheet for both languages. Every directional rule uses CSS logical
   properties (inline-start / inline-end), so the Arabic RTL layout mirrors
   from the same source instead of needing an overriding RTL sheet.

   Colours are taken from the live site palette in assets/css/styles.css
   (#1778bc primary, #1263ab hover, #002a5c navy, #272c49 ink) so the pages
   read as part of sib-eg.com rather than a bolt-on.
   ========================================================================== */

.ci {
    --ci-primary: #1778bc;
    --ci-primary-dark: #1263ab;
    --ci-navy: #002a5c;
    --ci-ink: #272c49;
    --ci-muted: #707073;
    --ci-faint: #8b97a2;
    --ci-line: #dde1e6;
    --ci-line-soft: #eef2f6;
    --ci-surface: #f6f9fc;
    --ci-tint: #eff3fc;
    --ci-error: #c8102e;
    --ci-error-bg: #fdecee;
    --ci-success: #1a7a5e;
    --ci-success-bg: #e7f4ef;
    --ci-warn: #8a5b10;
    --ci-warn-bg: #fdf4e6;
    --ci-radius: 10px;
    --ci-radius-lg: 14px;
    --ci-shadow: 0 2px 10px rgba(0, 42, 92, .06);
    --ci-shadow-lg: 0 10px 30px rgba(0, 42, 92, .1);

    color: var(--ci-ink);
    background: #fff;
    padding-bottom: 64px;
}

.ci *,
.ci *::before,
.ci *::after {
    box-sizing: border-box;
}

/* Screen-reader-only text, scoped so it never collides with the theme. */
.ci-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.ci-hero {
    background: linear-gradient(135deg, var(--ci-navy) 0%, var(--ci-primary-dark) 100%);
    color: #fff;
    padding: 56px 0 40px;
}

.ci-hero h1 {
    color: #fff;
    font-size: 2.25rem;
    line-height: 1.25;
    margin: 0 0 12px;
}

.ci-hero p {
    color: rgba(255, 255, 255, .88);
    max-width: 680px;
    margin: 0;
    font-size: 1.05rem;
}

.ci-hero .ci-trustline {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
}

.ci-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
}

.ci-breadcrumb a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.ci-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Stepper ------------------------------------------------------------- */

.ci-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.ci-step {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ci-radius);
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    font-size: .875rem;
    color: var(--ci-muted);
    min-height: 48px;
}

.ci-step-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ci-line);
    font-weight: 700;
    font-size: .8125rem;
    color: var(--ci-muted);
}

.ci-step.is-current {
    background: var(--ci-tint);
    border-color: var(--ci-primary);
    color: var(--ci-navy);
    font-weight: 600;
}

.ci-step.is-current .ci-step-num {
    background: var(--ci-primary);
    border-color: var(--ci-primary);
    color: #fff;
}

.ci-step.is-done .ci-step-num {
    background: var(--ci-success);
    border-color: var(--ci-success);
    color: #fff;
}

/* --- Layout -------------------------------------------------------------- */

.ci-body {
    padding: 40px 0 0;
}

.ci-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.ci-aside {
    position: sticky;
    top: 24px;
}

@media (max-width: 991px) {
    .ci-grid {
        grid-template-columns: 1fr;
    }

    .ci-aside {
        position: static;
        order: -1;
    }
}

.ci-card {
    background: #fff;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow);
    padding: 24px;
    margin-bottom: 20px;
}

.ci-card > h2,
.ci-card-title {
    font-size: 1.25rem;
    color: var(--ci-navy);
    margin: 0 0 4px;
}

.ci-card-sub {
    color: var(--ci-muted);
    font-size: .9rem;
    margin: 0 0 18px;
}

/* --- Tabs (car details / customer details) ------------------------------- */

.ci-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius-lg);
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.ci-tab {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--ci-radius);
    background: transparent;
    color: var(--ci-muted);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ci-tab:hover {
    color: var(--ci-navy);
}

.ci-tab[aria-selected="true"] {
    background: var(--ci-primary);
    color: #fff;
    box-shadow: var(--ci-shadow);
}

.ci-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    font-size: .75rem;
}

.ci-tab[aria-selected="false"] .ci-tab-badge {
    background: #fff;
    border: 1px solid var(--ci-line);
}

.ci-tab.has-error {
    color: var(--ci-error);
}

.ci-tabpanel[hidden] {
    display: none;
}

/* --- Progress bar -------------------------------------------------------- */

.ci-progress {
    margin-bottom: 20px;
}

.ci-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--ci-muted);
    margin-bottom: 6px;
}

.ci-progress-track {
    height: 6px;
    border-radius: 99px;
    background: var(--ci-line-soft);
    overflow: hidden;
}

.ci-progress-fill {
    height: 100%;
    background: var(--ci-primary);
    border-radius: 99px;
    transition: width .25s ease;
}

/* --- Forms --------------------------------------------------------------- */

.ci-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ci-field.is-full {
    grid-column: 1 / -1;
}

@media (max-width: 575px) {
    .ci-fields {
        grid-template-columns: 1fr;
    }
}

.ci-field label,
.ci-legend {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: var(--ci-navy);
    margin-bottom: 6px;
}

.ci-optional {
    font-weight: 400;
    color: var(--ci-faint);
    font-size: .8125rem;
}

.ci-field input[type="text"],
.ci-field input[type="email"],
.ci-field input[type="tel"],
.ci-field input[type="number"],
.ci-field input[type="date"],
.ci-field textarea,
.ci-field select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius);
    background: #fff;
    color: var(--ci-ink);
    font: inherit;
    font-size: .95rem;
}

.ci-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23707073' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-inline-end: 38px;
}

[dir="rtl"] .ci-field select {
    background-position: left 14px center;
}

.ci-field textarea {
    display: block;
    min-height: 110px;
    resize: vertical;
}

.ci-field input:focus,
.ci-field textarea:focus,
.ci-field select:focus {
    outline: 2px solid var(--ci-primary);
    outline-offset: 1px;
    border-color: var(--ci-primary);
}

.ci-field input::placeholder {
    color: var(--ci-faint);
}

.ci-hint {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--ci-muted);
}

/* Amounts, card numbers and references stay LTR inside an RTL page. */
.ci-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.ci-input-affix {
    position: relative;
    display: flex;
    align-items: center;
}

/* The amount input carries .ci-ltr, so it is LTR whatever the page direction
   and its reserved space always lands on the right. The affix is pinned to the
   same physical edge - a logical inset would follow the page instead and end up
   over the number in one language or the other. */
.ci-input-affix input {
    padding-right: 60px;
}

.ci-input-affix .ci-affix {
    position: absolute;
    right: 14px;
    color: var(--ci-muted);
    font-size: .875rem;
    pointer-events: none;
}

/* Validation */

.ci-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: var(--ci-error);
    font-size: .8125rem;
}

.ci-error:empty {
    display: none;
}

.ci-error::before {
    content: "!";
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--ci-error);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.ci-field input.input-validation-error,
.ci-field select.input-validation-error {
    border-color: var(--ci-error);
    background: var(--ci-error-bg);
}

.ci-summary-error {
    border: 1px solid var(--ci-error);
    background: var(--ci-error-bg);
    color: var(--ci-error);
    border-radius: var(--ci-radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: .9rem;
}

.ci-summary-error ul {
    margin: 6px 0 0;
    padding-inline-start: 20px;
}

/* --- Choice cards (condition, usage, callback, payment method) ----------- */

.ci-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.ci-choice {
    position: relative;
    display: block;
}

.ci-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ci-choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius);
    background: #fff;
    color: var(--ci-ink);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    text-align: center;
}

.ci-choice input:checked + span {
    border-color: var(--ci-primary);
    background: var(--ci-tint);
    color: var(--ci-navy);
    box-shadow: inset 0 0 0 1px var(--ci-primary);
}

.ci-choice input:focus-visible + span {
    outline: 2px solid var(--ci-primary);
    outline-offset: 2px;
}

/* --- Checkboxes ---------------------------------------------------------- */

.ci-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: .9rem;
    color: var(--ci-ink);
    cursor: pointer;
}

.ci-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--ci-primary);
}

/* --- Buttons ------------------------------------------------------------- */

.ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: var(--ci-radius);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ci-btn-primary {
    background: var(--ci-primary);
    color: #fff;
}

.ci-btn-primary:hover,
.ci-btn-primary:focus {
    background: var(--ci-primary-dark);
    color: #fff;
    text-decoration: none;
}

.ci-btn-secondary {
    background: #fff;
    color: var(--ci-navy);
    border-color: var(--ci-line);
}

.ci-btn-secondary:hover,
.ci-btn-secondary:focus {
    border-color: var(--ci-primary);
    color: var(--ci-primary-dark);
    text-decoration: none;
}

.ci-btn-block {
    width: 100%;
}

.ci-btn[disabled],
.ci-btn.is-busy {
    opacity: .7;
    pointer-events: none;
}

.ci-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.ci-actions .ci-btn {
    flex: 1 1 200px;
}

/* --- Program cards ------------------------------------------------------- */

.ci-programs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.ci-program {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow);
    overflow: hidden;
}

.ci-program.is-selected {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 2px rgba(23, 120, 188, .25), var(--ci-shadow-lg);
}

.ci-program-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ci-line-soft);
}

.ci-program-logo {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--ci-surface);
}

.ci-program-insurer {
    font-weight: 700;
    color: var(--ci-navy);
    font-size: 1rem;
    margin: 0;
}

.ci-program-name {
    color: var(--ci-muted);
    font-size: .85rem;
    margin: 2px 0 0;
}

.ci-ribbon {
    margin-inline-start: auto;
    flex: none;
    background: var(--ci-success-bg);
    color: var(--ci-success);
    border-radius: 99px;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 700;
}

/* Index2: the Gold / Silver / Bronze medal from the program row, at the end of the header. */
.ci-program-tier {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-inline-start: auto;
}

.ci-program-tier + .ci-ribbon,
.ci-program-tier + .ci-dialog-close {
    margin-inline-start: 0;
}

.ci-program-body {
    padding: 18px 20px;
    flex: 1;
}

.ci-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ci-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ci-navy);
    line-height: 1.1;
}

.ci-price-unit {
    color: var(--ci-muted);
    font-size: .875rem;
}

/* The program's premium rate, beside the price it produces. */
.ci-price-rate {
    background: var(--ci-tint);
    color: var(--ci-navy);
    border-radius: 99px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 700;
}

.ci-price-monthly {
    color: var(--ci-muted);
    font-size: .85rem;
    margin: 6px 0 0;
}

.ci-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
}

.ci-chip {
    background: var(--ci-tint);
    color: var(--ci-navy);
    border-radius: 99px;
    padding: 5px 11px;
    font-size: .75rem;
    font-weight: 600;
}

.ci-benefits {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 8px;
}

.ci-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .875rem;
    color: var(--ci-ink);
}

.ci-benefits li::before {
    content: "\2713";
    flex: none;
    color: var(--ci-success);
    font-weight: 700;
}

.ci-benefits li.is-excluded::before {
    content: "\2715";
    color: var(--ci-error);
}

.ci-benefit-value {
    color: var(--ci-muted);
    margin-inline-start: auto;
    text-align: end;
}

.ci-program-foot {
    padding: 0 20px 20px;
    display: grid;
    gap: 10px;
}

.ci-link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ci-primary);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    text-decoration: underline;
}

/* --- Empty state --------------------------------------------------------- */

.ci-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--ci-line);
    border-radius: var(--ci-radius-lg);
    background: var(--ci-surface);
}

.ci-empty h2 {
    font-size: 1.25rem;
    color: var(--ci-navy);
    margin: 0 0 8px;
}

.ci-empty p {
    color: var(--ci-muted);
    max-width: 520px;
    margin: 0 auto 20px;
}

/* --- Summary panel ------------------------------------------------------- */

.ci-summary {
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius-lg);
    padding: 20px;
}

.ci-summary h2 {
    font-size: 1.05rem;
    color: var(--ci-navy);
    margin: 0 0 14px;
}

.ci-summary-car {
    font-weight: 700;
    color: var(--ci-navy);
    margin: 0;
}

.ci-summary-meta {
    color: var(--ci-muted);
    font-size: .85rem;
    margin: 2px 0 14px;
}

.ci-rows {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--ci-line);
}

.ci-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .875rem;
}

.ci-row dt {
    color: var(--ci-muted);
    font-weight: 400;
    margin: 0;
}

.ci-row dd {
    color: var(--ci-ink);
    font-weight: 600;
    margin: 0;
    text-align: end;
}

.ci-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 14px;
    border-top: 2px solid var(--ci-navy);
    font-weight: 700;
    color: var(--ci-navy);
}

.ci-total .ci-total-amount {
    font-size: 1.35rem;
}

/* --- Trust strip --------------------------------------------------------- */

.ci-trust {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 10px;
}

.ci-trust li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .8125rem;
    color: var(--ci-muted);
}

.ci-trust li i {
    color: var(--ci-primary);
    margin-top: 3px;
}

/* --- Login gate ---------------------------------------------------------- */

.ci-gate {
    border: 1px solid var(--ci-primary);
    background: var(--ci-tint);
    border-radius: var(--ci-radius-lg);
    padding: 28px;
    margin-bottom: 20px;
}

.ci-gate h2 {
    font-size: 1.25rem;
    color: var(--ci-navy);
    margin: 0 0 8px;
}

.ci-gate p {
    color: var(--ci-ink);
    margin: 0 0 20px;
    max-width: 560px;
}

.ci-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ci-gate-actions .ci-btn {
    flex: 1 1 220px;
}

.ci-reference {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px dashed var(--ci-primary);
    border-radius: var(--ci-radius);
    padding: 10px 16px;
    margin-top: 20px;
    font-weight: 700;
    color: var(--ci-navy);
    letter-spacing: .04em;
}

/* --- Method list --------------------------------------------------------- */

.ci-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.ci-method {
    position: relative;
}

.ci-method input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ci-method span {
    display: block;
    padding: 16px;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius);
    background: #fff;
    cursor: pointer;
    height: 100%;
}

.ci-method strong {
    display: block;
    color: var(--ci-navy);
    font-size: .95rem;
}

.ci-method small {
    display: block;
    color: var(--ci-muted);
    font-size: .8125rem;
    margin-top: 4px;
}

.ci-method input:checked + span {
    border-color: var(--ci-primary);
    background: var(--ci-tint);
    box-shadow: inset 0 0 0 1px var(--ci-primary);
}

.ci-method input:focus-visible + span {
    outline: 2px solid var(--ci-primary);
    outline-offset: 2px;
}

.ci-method-panel[hidden] {
    display: none;
}

/* --- Notices ------------------------------------------------------------- */

.ci-note {
    border-radius: var(--ci-radius);
    padding: 14px 16px;
    font-size: .875rem;
    margin-bottom: 18px;
}

.ci-note-info {
    background: var(--ci-tint);
    color: var(--ci-navy);
}

.ci-note-warn {
    background: var(--ci-warn-bg);
    color: var(--ci-warn);
}

.ci-note-success {
    background: var(--ci-success-bg);
    color: var(--ci-success);
}

/* --- Details dialog ------------------------------------------------------ */

.ci-dialog {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 42, 92, .55);
}

.ci-dialog[hidden] {
    display: none;
}

.ci-dialog-panel {
    background: #fff;
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-lg);
    width: min(640px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 26px;
}

.ci-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.ci-dialog-head h2 {
    font-size: 1.2rem;
    color: var(--ci-navy);
    margin: 0;
}

.ci-dialog-close {
    margin-inline-start: auto;
    border: 0;
    background: var(--ci-surface);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.ci-detail-table th,
.ci-detail-table td {
    text-align: start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ci-line-soft);
    vertical-align: top;
}

.ci-detail-table th {
    color: var(--ci-navy);
    font-weight: 600;
    width: 45%;
}

.ci-detail-table td {
    color: var(--ci-muted);
}

/* --- Success ------------------------------------------------------------- */

.ci-success-head {
    text-align: center;
    padding: 44px 20px 24px;
}

.ci-success-mark {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--ci-success-bg);
    color: var(--ci-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 16px;
}

/* The confirmation mark tracks the real payment status - it must not read as success while
   the gateway callback is still outstanding. Shape and text carry the meaning too, so the
   state is not signalled by colour alone. */
.ci-success-mark.is-pending {
    background: var(--ci-warn-bg);
    color: var(--ci-warn);
}

.ci-success-mark.is-declined {
    background: var(--ci-error-bg);
    color: var(--ci-error);
}

.ci-success-head h1 {
    font-size: 1.85rem;
    color: var(--ci-navy);
    margin: 0 0 8px;
}

.ci-success-head p {
    color: var(--ci-muted);
    margin: 0;
}

.ci-code {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ci-navy);
    background: var(--ci-surface);
    border: 1px dashed var(--ci-primary);
    border-radius: var(--ci-radius);
    padding: 14px 20px;
    display: inline-block;
}

.ci-steps-list {
    list-style: none;
    counter-reset: ci-next;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.ci-steps-list li {
    counter-increment: ci-next;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--ci-ink);
}

.ci-steps-list li::before {
    content: counter(ci-next);
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ci-tint);
    color: var(--ci-navy);
    font-weight: 700;
    font-size: .8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- FAQ ----------------------------------------------------------------- */

.ci-faq {
    margin-top: 44px;
}

.ci-faq h2 {
    font-size: 1.5rem;
    color: var(--ci-navy);
    margin: 0 0 18px;
}

.ci-faq details {
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-radius);
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #fff;
}

.ci-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ci-navy);
    list-style: none;
}

.ci-faq summary::-webkit-details-marker {
    display: none;
}

.ci-faq summary::after {
    content: "+";
    float: inline-end;
    color: var(--ci-primary);
    font-weight: 700;
}

.ci-faq details[open] summary::after {
    content: "\2212";
}

.ci-faq p {
    margin: 10px 0 0;
    color: var(--ci-muted);
    font-size: .9rem;
}

/* --- Scenario 3: document cards ------------------------------------------ */

.ci-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

.ci-docs .ci-card {
    margin-bottom: 0;
}

.ci-doc.is-complete {
    border-color: var(--ci-success);
}

.ci-doc-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.ci-doc-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.ci-doc-heading .ci-card-sub {
    margin: 0;
}

.ci-doc-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ci-tint);
    color: var(--ci-primary);
    font-size: 1.1rem;
}

.ci-doc.is-complete .ci-doc-icon {
    background: var(--ci-success-bg);
    color: var(--ci-success);
}

.ci-badge {
    flex: none;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--ci-line);
    background: var(--ci-surface);
    color: var(--ci-muted);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ci-badge.is-warn {
    background: var(--ci-warn-bg);
    border-color: transparent;
    color: var(--ci-warn);
}

.ci-badge.is-success {
    background: var(--ci-success-bg);
    border-color: transparent;
    color: var(--ci-success);
}

.ci-badge.is-info {
    background: var(--ci-tint);
    border-color: transparent;
    color: var(--ci-navy);
}

.ci-note[hidden] {
    display: none;
}

.ci-doc-files {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 8px;
}

.ci-doc-files li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-radius);
    background: var(--ci-surface);
    font-size: .875rem;
}

.ci-doc-files li > i {
    color: var(--ci-primary);
}

.ci-doc-name {
    flex: 1 1 140px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--ci-ink);
}

.ci-doc-meta {
    color: var(--ci-muted);
    font-size: .8125rem;
}

.ci-doc-delete {
    display: inline;
    margin: 0;
}

.ci-link-button.is-danger {
    color: var(--ci-error);
}

.ci-doc-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ci-doc-drop {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--ci-primary);
    border-radius: var(--ci-radius);
    background: var(--ci-tint);
    color: var(--ci-navy);
    font-size: .875rem;
    cursor: pointer;
}

.ci-doc-drop span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The real input covers the whole drop zone, so a click or tap anywhere opens the picker. */
.ci-doc-drop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ci-doc-drop:focus-within {
    outline: 2px solid var(--ci-primary);
    outline-offset: 2px;
}

/* While the chosen file is posting, the drop zone stops taking a second pick. */
.ci-doc-upload.is-busy .ci-doc-drop {
    opacity: .6;
    pointer-events: none;
    cursor: default;
}

.ci-doc .ci-hint {
    display: block;
    margin: 10px 0 0;
}

/* --- Scenario 3: My profile ---------------------------------------------- */

.ci-section-title {
    font-size: 1.35rem;
    color: var(--ci-navy);
    margin: 0 0 16px;
}

/* The title with the "Refresh status" button at the other end. */
.ci-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ci-section-head .ci-section-title {
    margin: 0;
}

.ci-request-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.ci-request-car {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ci-navy);
    margin: 0 0 2px;
}

.ci-request-ref {
    font-size: .8125rem;
    color: var(--ci-muted);
    letter-spacing: .04em;
}

.ci-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--ci-line);
}

.ci-request-files {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ci-line);
}

.ci-request-files h3 {
    font-size: 1rem;
    color: var(--ci-navy);
    margin: 0 0 6px;
}

.ci-request-files h4 {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ci-muted);
    margin: 12px 0 6px;
}

.ci-request-files .ci-doc-files {
    margin-bottom: 0;
}

.ci-summary .ci-btn-block {
    margin-top: 14px;
}

/* --- Claims: My profile -------------------------------------------------- */

/* One claim under "My claims"; a line between it and the next. */
.ci-claim + .ci-claim {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--ci-line);
}

.ci-claim-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}

/* The description as the customer typed it, line breaks included. */
.ci-claim-text {
    margin: 8px 0 0;
    font-size: .9rem;
    color: var(--ci-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* The Add claim popup: wide enough for its three document cards side by side. */
.ci-dialog-panel.is-wide {
    width: min(1040px, 100%);
}

.ci-claim-docs {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    margin: 20px 0;
}

/* A card's file list is empty until files are chosen. */
.ci-doc-files:empty {
    display: none;
}

.ci-claim-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Sticky mobile CTA --------------------------------------------------- */

@media (max-width: 767px) {
    .ci-sticky {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: #fff;
        border-top: 1px solid var(--ci-line);
        padding: 12px 0;
        margin-top: 16px;
    }

    .ci-hero h1 {
        font-size: 1.6rem;
    }

    .ci-card {
        padding: 18px;
    }
}

@media print {
    .ci-hero,
    .ci-actions,
    .ci-faq,
    .ci-steps {
        display: none !important;
    }
}

/* The theme's plugins.css carries a bare `header { position: relative; z-index: 99999 }`
   for the site navbar. A program card's head is a <header> too, so it inherited that
   stacking and painted its logo and insurer name straight over the open details dialog.
   The card head needs no stacking of its own, so it is put back on the default. */
.ci .ci-program-head {
    position: static;
    z-index: auto;
}

/* --- Program comparison (Programs3) --------------------------------------
   Scoped to .ci-compare: the scenario 1 Programs page loads the same sheet and
   must keep its original card and dialog design. Directional values stay
   logical so the Arabic layout mirrors without an RTL override.
   ------------------------------------------------------------------------- */

/* Benefits a program does not offer stay readable but recede behind the ones
   it does, so a card still scans as an offer rather than a list of refusals. */
.ci-compare .ci-benefits li.is-excluded {
    color: var(--ci-faint);
}

.ci-compare .ci-benefits li.is-excluded .ci-benefit-value {
    color: var(--ci-faint);
}

/* --- Details dialog ------------------------------------------------------- */

.ci-compare .ci-dialog {
    /* Above the theme's fixed site header, which also sits at 99999. */
    z-index: 100000;
    background: rgba(0, 42, 92, .62);
    backdrop-filter: blur(2px);
}

/* The panel is the tinted backdrop the white sections sit on; its own padding
   moves into the sections so the sticky head can span the full width. */
.ci-compare .ci-dialog-panel {
    background: var(--ci-surface);
    padding: 0;
    width: min(680px, 100%);
}

.ci-compare .ci-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    margin: 0;
    padding: 20px 26px;
    background: linear-gradient(180deg, var(--ci-tint), #fff);
    border-bottom: 1px solid var(--ci-line);
    border-start-start-radius: var(--ci-radius-lg);
    border-start-end-radius: var(--ci-radius-lg);
}

.ci-compare .ci-dialog-logo {
    flex: none;
    width: 46px;
    height: 46px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-radius);
    padding: 5px;
}

.ci-compare .ci-dialog-section {
    background: #fff;
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
    margin: 16px;
    padding: 18px 20px;
}

.ci-compare .ci-dialog-summary {
    margin: 0 0 16px;
    color: var(--ci-muted);
    font-size: .9rem;
}

.ci-compare .ci-dialog-title {
    margin: 0 0 10px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ci-navy);
}

/* --- Benefit rows --------------------------------------------------------- */

.ci-compare .ci-detail-table th {
    width: auto;
    color: var(--ci-navy);
}

.ci-compare .ci-detail-table td:last-child {
    width: 38%;
}

.ci-compare .ci-detail-table tr:last-child th,
.ci-compare .ci-detail-table tr:last-child td {
    border-bottom: 0;
}

/* The tick / cross column: same row order on every program, so the marks are
   what the customer compares down the list. */
.ci-compare .ci-detail-status {
    width: 34px;
    padding-inline-end: 0;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.ci-compare .ci-detail-status.is-yes {
    color: var(--ci-success);
}

.ci-compare .ci-detail-status.is-no {
    color: var(--ci-error);
}

.ci-compare .ci-detail-table tr.is-excluded th,
.ci-compare .ci-detail-table tr.is-excluded td {
    background: var(--ci-line-soft);
    color: var(--ci-muted);
}

.ci-compare .ci-detail-table tr.is-excluded th {
    font-weight: 500;
}

/* --- Price footer --------------------------------------------------------- */

.ci-compare .ci-dialog-foot {
    background: linear-gradient(180deg, #fff, var(--ci-tint));
    margin-bottom: 20px;
}

.ci-compare .ci-dialog-foot .ci-rows {
    border-top: 0;
    padding-top: 0;
}

@media (max-width: 640px) {
    .ci-compare .ci-dialog-head {
        padding: 16px;
    }

    .ci-compare .ci-dialog-section {
        margin: 12px;
        padding: 14px;
    }
}