.specialOffersModal .modal-dialog {
    margin: 0.75rem auto;
}

.specialOffersModal__dialog {
    width: calc(100% - 1rem);
    max-width: 21.1875rem;
}

.specialOffersModal__content {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.28);
}

/* List + cards (option-2): same header — X in the corner, title centered on the line below */
.specialOffersModal__header {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0.5rem 0 0.75rem;
    text-align: center;
}

.specialOffersModal__title {
    margin: 0;
    padding: 2.125rem 2.5rem 0;
    color: #2e2e2e;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
}

.specialOffersModal__close {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: #2f2f2f;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.specialOffersModal__close svg {
    width: 1rem;
    height: 1rem;
}

/* Scroll only when 4+ card offers; 3 (or fewer) fit typical laptop without scrolling */
.specialOffersModal--cards.specialOffersModal--manyCards .specialOffersModal__content {
    max-height: min(90vh, 36rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.specialOffersModal--cards.specialOffersModal--manyCards .specialOffersModal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.specialOffersModal--cards.specialOffersModal--manyCards .specialOffersModal__footer {
    flex-shrink: 0;
}

.specialOffersModal__body {
    padding: 0 0.9375rem;
    min-height: 4rem;
}

.specialOffersModal__loading,
.specialOffersModal__empty,
.specialOffersModal__error {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0;
    text-align: center;
    color: #2e2e2e;
    font-size: 0.875rem;
    line-height: 1.4;
}

.specialOffersModal__error {
    color: #b32d2d;
}

.specialOffersModal__footer {
    padding: 1rem 0.9375rem 1rem;
}

.specialOffersModal__nextBtn {
    width: 100%;
    height: 33px;
    border: none;
    border-radius: 0.375rem;
    background: #FE7E00;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: 0.22s ease;
}

.specialOffersModal__nextBtn:disabled {
    background: #c5c5c5;
    color: #f3f3f3;
    cursor: not-allowed;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.specialOffersModal__nextBtn:not(:disabled):hover {
    background: #f07f00;
}

/* ---------------------------
   LIST VARIANT
---------------------------- */

.somListHero {
    overflow: hidden;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
}

.somListHero__img {
    width: 100%;
    height: 9.25rem;
    object-fit: cover;
    display: block;
}

.somListHeading {
    margin: 0 0 0.9375rem;
    color: #2e2e2e;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.somListOptions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.somListOption {
    position: relative;
    width: 100%;
    min-height: 51px;
    height: 51px;
    border: 0.0625rem solid #d7d7d7;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.9375rem 1rem;
    cursor: pointer;
    transition: 0.22s ease;
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    /* flex-start + modal dir: LTR = cluster left, RTL = cluster right (main-start) */
    justify-content: flex-start;
}

.somOasisRadio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.somListOption__iconPlaceholder {
    display: block;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 0.5rem;
}

.somListOption.is-active,
.somListOption:has(input[type="radio"]:checked) {
    border-color: #ff8a00;
    background: #fff1e3;
    box-shadow: 0 0 0 0.0625rem rgba(255, 138, 0, 0.16), 0 0.25rem 0.75rem rgba(255, 138, 0, 0.12);
}

.somListOption__icon {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    color: #ff8a00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.somListOption__icon svg {
    width: 1.75rem;;
    height: 1.75rem;;
}

.somListOption__text {
    color: #343434;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.specialOffersModal[dir="ltr"] .somListOption__text {
    text-align: left;
}

.specialOffersModal[dir="rtl"] .somListOption__text {
    text-align: right;
}

/* ---------------------------
   CARDS VARIANT
---------------------------- */

.somCardsList {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.specialOffersModal--cards .somCardsList {
    gap: 0.5rem;
}

.somCardOption {
    position: relative;
    display: block;
    width: 100%;
    /* Same width as selected (option-2) to avoid layout jump; only color changes */
    border: 3.5px solid transparent;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.22s ease;
    font: inherit;
    box-sizing: border-box;
}

.somCardOption.is-active,
.somCardOption:has(input[type="radio"]:checked) {
    border-color: #ff8a00;
    box-shadow: 0 0 0 0.0625rem rgba(255, 138, 0, 0.16);
}

.somCardOption__img {
    width: 100%;
    /* Compact for 3 offers on a laptop; 4+ offers get a scrollable body (see .specialOffersModal--manyCards) */
    height: 4.5rem;
    min-height: 4.5rem;
    object-fit: cover;
    display: block;
}

.somCardOption__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.34) 100%);
}

.somCardOption__content {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    text-align: left;
}

.somCardOption__title {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.somCardOption__title--large {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.somCardOption__subtitle {
       display: block;
    margin-top: 0.1875rem;
    color: #ffffff;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.15;
}

/* cards variant no next by default until selected */
.specialOffersModal__body[data-variant="cards"] + .specialOffersModal__footer {
    padding-top: 0.875rem;
}

/* list variant spacing */
.specialOffersModal__body[data-variant="list"] + .specialOffersModal__footer {
    padding-top: 1rem;
}

@media (max-width: 22rem) {
    .specialOffersModal__dialog {
        width: calc(100% - 0.75rem);
    }

    .somListHero__img {
        height: 8.75rem;
    }
}

.somListHero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
}

.somListHero__img {
    width: 100%;
    height: 9.25rem;
    object-fit: cover;
    display: block;
}

.somListHero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1rem 1rem 0.875rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.38) 100%);
}

.somListHero__titleOnImage {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    letter-spacing: -0.02em;
}

/* ========================= */
/* Image Overlay Layer */
/* ========================= */

.somImageWrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}


.somImageWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.somImageOverlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.75) 100%
);
    z-index: 1;
}


.somImageText {
    position: absolute;
    text-align: start;
    left: 1rem;
    bottom: 1rem;

    z-index: 2;

    color: #fff;
}

.somImageText__title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.somImageText__subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.95;
}
.specialOffersModal--list .somImageText--list {
    right: 1rem;
    left: auto;
}