:root {
    --navy: #0b1f4a;
    --navy-dark: #071633;
    --white: #ffffff;
    --text-muted: #6b7280;
    --border: #d1d5db;
    --primary: #e30613;
    --primary-hover: #c70511;
    --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
}

body.page-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--white);
    background: var(--navy) url("/images/background.png") center top / cover no-repeat fixed;
}

/* ============================================================
   Language picker (6-option select replaces the old EN | FR pipe)
   ============================================================ */
.language-bar {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem 0;
}

.language-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
}

.language-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.language-select {
    background: transparent;
    color: var(--white);
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    appearance: auto;
}

.language-select option {
    color: #111827;
    background: #ffffff;
}

.language-submit {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

[dir="rtl"] .language-bar {
    justify-content: flex-start;
}

.main-content {
    padding: 1rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================================
   Landing page
   ============================================================ */
.landing-page {
    text-align: center;
}

.landing-hero {
    max-width: 980px;
    margin: 0.5rem auto 2.5rem;
}

.landing-hero-headline {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    font-weight: 700;
}

.landing-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.5;
    margin: 0 auto 1.25rem;
    font-weight: 500;
    max-width: 820px;
}

.landing-instruction {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 820px;
    opacity: 0.92;
}

.categories-heading {
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
    margin-bottom: 3rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.08) center / 55% no-repeat;
}

.icon-prioritise-customer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.icon-growth { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z'/%3E%3C/svg%3E"); }
.icon-collaboration { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.icon-innovation { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E"); }
.icon-tomorrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); }

.category-title {
    font-size: 1rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.75rem;
}

.category-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    opacity: 0.92;
}

.btn-card-cta {
    margin-top: auto;
    align-self: center;
    min-width: 220px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.btn-large {
    min-width: 280px;
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

/* ============================================================
   Form layout
   ============================================================ */
.form-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
    flex-wrap: wrap;
}

.btn-back-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-back-inline:hover,
.btn-back-inline:focus {
    background: rgba(0, 0, 0, 0.25);
    border-color: var(--white);
}

[dir="rtl"] .btn-back-inline span[aria-hidden="true"] {
    transform: scaleX(-1);
}

.form-page-title {
    text-align: center;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    margin: 0;
    flex: 1 1 auto;
}

.form-intro {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0.25rem 0 1.5rem;
    text-align: center;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.form-section-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1.25rem;
}

.field-prompt {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #111827;
    font-style: italic;
}

.form-card,
.thank-you-card,
.error-card {
    background: var(--white);
    color: #111827;
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.form-card label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.field-help {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.field-eyebrow {
    display: block;
    margin: 1.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-row {
    margin-bottom: 1.25rem;
}

.form-row.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Three-column grid used inside team-leader rows where each row captures
   First name / Surname / Business Unit autocomplete. Mirrors .two-col but with
   a third column for the BU input. Stacks on mobile via the responsive rule
   further down. */
.form-row.three-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Flex layout for nominee rows: each row contains First / Surname (always
   visible) plus an optional BU autocomplete column shown only in team mode.
   Using flex instead of a fixed-column grid means the BU column simply takes
   no space when it is hidden via [data-team-only] in individual mode. */
.nominee-row-fields {
    display: flex;
    gap: 1.25rem;
    flex: 1;
    min-width: 0;
}

.nominee-row-fields > .nominee-row-name,
.nominee-row-fields > .nominee-row-bu {
    flex: 1 1 0;
    min-width: 0;
}

/* Column-header strip rendered above team-leader and nominee repeating rows in
   team mode only. Mirrors the outer flex+3-col-grid layout of `.repeating-row`
   (3-col grid for the inputs + a fixed-width spacer the size of `.btn-row-remove`)
   so the three titles line up vertically with the three inputs below. Hidden on
   mobile because each row collapses to a stack and the per-input labels take over. */
.row-column-headers {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.row-column-headers-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.row-column-headers .col-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}

.row-column-headers-spacer {
    flex-shrink: 0;
    width: 44px;
}

/* Per-input label on each team-leader / team-member repeating row. At desktop
   the column-header strip (.row-column-headers) is the visible source of truth,
   so each per-input label is visually hidden (kept in DOM for screen readers).
   At mobile (≤900px) the strip disappears and the row stacks vertically — the
   per-input labels then become visible above each stacked input. */
.row-input-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-control {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    color: #111827;
    background: var(--white);
}

.form-control:focus {
    outline: 2px solid rgba(227, 6, 19, 0.35);
    border-color: var(--primary);
}

.textarea-large {
    resize: vertical;
    min-height: 180px;
}

.char-counter {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
}

.char-counter.near-limit {
    color: #b45309;
    font-weight: 600;
}

[dir="rtl"] .char-counter {
    text-align: left;
}

.form-actions,
.thank-you-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.form-actions .btn-primary {
    min-width: 140px;
}

.field-error,
.alert-error {
    color: #b91c1c;
    font-size: 0.88rem;
}

.field-error {
    display: block;
    margin-top: 0.35rem;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

/* ============================================================
   Toggle pill (Individual / Team)
   ============================================================ */
.toggle-pill {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.toggle-option.active {
    background: var(--primary);
    color: var(--white);
}

.toggle-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-option input[type="radio"]:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================================
   Repeating rows (BU autocomplete + nominee names)
   ============================================================ */
.repeating-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.repeating-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.repeating-row > .autocomplete-wrapper,
.repeating-row > .form-row {
    flex: 1;
}

.btn-row-remove {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    /* 44px is the recommended minimum tap target for touch devices. */
    width: 44px;
    height: 44px;
    margin-top: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
}

.btn-row-remove:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Reserve the 44px remove-button slot even when the JS hides the button on a
   single-row block (it sets `removeBtn.hidden = true`, which by default applies
   `display:none` via the UA stylesheet). Without this rule the three input
   columns shift horizontally as soon as a second row appears. The width here
   matches `.row-column-headers-spacer` so the column-header strip above stays
   vertically aligned with the input columns in every state.

   This rule auto-scopes away from the individual nominee row: that row's remove
   button carries `data-team-only`, so `showHideTeamElements()` sets an inline
   `style="display:none"` on it whose specificity beats this class+attr rule. */
.btn-row-remove[hidden] {
    display: inline-block;
    visibility: hidden;
}

.btn-add-row {
    margin-top: 0.5rem;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    color: var(--primary);
    cursor: pointer;
}

.btn-add-row:hover {
    background: rgba(227, 6, 19, 0.08);
    border-color: var(--primary);
}

.btn-add-row:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Autocomplete
   ============================================================ */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-results li {
    padding: 0.65rem 1rem;
    cursor: pointer;
    color: #111827;
}

.autocomplete-results li:hover,
.autocomplete-results li.active {
    background: #f3f4f6;
}

.autocomplete-results .no-results {
    cursor: default;
    color: var(--text-muted);
}

/* ============================================================
   Thank-you / error / window-state cards
   ============================================================ */
.thank-you-page,
.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.thank-you-card,
.error-card {
    max-width: 640px;
    width: 100%;
    text-align: center;
}

.thank-you-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.thank-you-subheadline {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0.5rem auto 1.25rem;
    line-height: 1.4;
}

.thank-you-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 60ch;
    margin: 0 auto 1rem;
}

.prelaunch-subheadline {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0.5rem auto 1.25rem;
    line-height: 1.4;
}

.prelaunch-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 60ch;
    margin: 0 auto;
}

.closed-subline {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0.75rem auto 0;
    line-height: 1.5;
}

.thank-you-actions {
    justify-content: center;
    flex-wrap: wrap;
}

.window-date {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    color: #111827;
}

.window-date strong {
    margin-right: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

[dir="rtl"] .window-date strong {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================================
   RTL adjustments (Arabic)
   ============================================================ */
[dir="rtl"] .form-actions {
    flex-direction: row-reverse;
}

/* In RTL the natural flex `row` flow already places the last DOM child
   (the remove button) on the visual left — i.e. the trailing edge for
   right-to-left readers. We therefore do NOT override .repeating-row's
   flex-direction here; row-reverse would double-flip and put the button
   back on the visual right, which contradicts standard RTL UX. */

[dir="rtl"] .toggle-pill {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-add-row {
    text-align: right;
}

/* ============================================================
   Responsive — tablet and below
   ============================================================ */
@media (max-width: 900px) {
    .main-content {
        padding: 0.75rem 1rem 2.5rem;
    }

    .category-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .form-row.two-col,
    .form-row.three-col,
    .nominee-row {
        grid-template-columns: 1fr;
    }

    /* Stack the nominee-row flex columns vertically on tablet/phone so each
       input gets the full width. */
    .nominee-row-fields {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Hide the column-header strip on mobile — each stacked input keeps its own
       placeholder / aria-label so the titles would just add visual noise. */
    .row-column-headers {
        display: none;
    }

    /* Reveal each per-input label above its stacked input on mobile. The
       column-header strip is hidden at this breakpoint so the per-input labels
       become the visible source of truth. */
    .row-input-label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0 0 0.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted);
        line-height: 1.2;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn,
    .thank-you-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .btn-card-cta {
        width: 100%;
        min-width: 0;
    }

    /* The Submit button has min-width: 140px which fights flex-wrap on small screens. */
    .form-actions .btn-primary {
        min-width: 0;
    }
}

/* ============================================================
   Responsive — phones (≤600px)
   ============================================================ */
@media (max-width: 600px) {
    body.page-body {
        /* Switch from fixed cover to scroll on phones — fixed backgrounds
           cause jank in iOS Safari and burn battery. */
        background-attachment: scroll;
    }

    .language-bar {
        padding: 0.75rem 0.75rem 0;
    }

    .main-content {
        padding: 0.5rem 0.875rem 2rem;
    }

    .form-card,
    .thank-you-card,
    .error-card {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .form-page-title {
        margin: 0.75rem 0 1.25rem;
        flex: 1 1 100%;
        text-align: left;
    }

    .form-page-header {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .form-intro {
        text-align: left;
        font-size: 0.95rem;
    }

    .landing-hero {
        margin: 0.5rem auto 1.5rem;
    }

    .landing-hero-headline {
        margin-bottom: 0.75rem;
    }

    .landing-hero-sub,
    .landing-instruction {
        margin-bottom: 0.75rem;
    }

    .categories-heading {
        margin-bottom: 1.25rem;
    }

    .category-icon {
        width: 88px;
        height: 88px;
    }

    .btn-large {
        /* The 280px min-width overflows narrow phones. */
        min-width: 0;
        width: 100%;
        padding: 0.9rem 1.25rem;
    }

    .toggle-pill {
        display: flex;
        width: 100%;
    }

    .toggle-option {
        flex: 1 1 0;
        justify-content: center;
        padding: 0.75rem 0.75rem;
    }

    /* Repeating rows (BU + nominee) — keep input above and × below-right
       on phones so the input gets the full width and the tap target stays
       large enough. */
    .repeating-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .btn-row-remove {
        align-self: flex-end;
        margin-top: 0;
    }

    /* On mobile the row stacks vertically, so reserving the 44px slot for a
       hidden remove button just leaves an empty gap at the end of the column.
       Let the button collapse normally when hidden. */
    .btn-row-remove[hidden] {
        display: none;
    }

    /* Mobile (rows stack to a column): `align-self: flex-end` on the remove
       button already follows the cross-axis direction — `flex-end` resolves
       to the visual left in RTL automatically — so no explicit override is
       needed. The `flex-direction: column` rule above already applies to
       every row regardless of direction. */

    /* Tighten the language picker so it never wraps off screen. */
    .language-picker {
        padding: 0.3rem 0.7rem;
        gap: 0.35rem;
    }

    .language-label {
        display: none;
    }
}

/* ============================================================
   Wireframe layout (desktop) — only nudge cards 4 + 5 on wider screens.
   ============================================================ */
@media (min-width: 901px) {
    .category-grid .category-card:nth-child(4) {
        grid-column: 1 / span 1;
        transform: translateX(50%);
    }

    .category-grid .category-card:nth-child(5) {
        grid-column: 3 / span 1;
        transform: translateX(-50%);
    }

    [dir="rtl"] .category-grid .category-card:nth-child(4) {
        transform: translateX(-50%);
    }

    [dir="rtl"] .category-grid .category-card:nth-child(5) {
        transform: translateX(50%);
    }
}