/* =========================================================
   CouponsHaven — Shared Offer Details Popup
   Used by Homepage, Best Offers, and Store pages.
   ========================================================= */

:root {
    --offer-popup-ink: #172033;
    --offer-popup-muted: #667085;
    --offer-popup-border: #e5eaf0;
    --offer-popup-surface: #f8fafc;
    --offer-popup-orange: #f97316;
    --offer-popup-orange-dark: #c2410c;
    --offer-popup-blue: #2563eb;
    --offer-popup-blue-dark: #1d4ed8;
}

/* Modal shell */
.offer-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.offer-modal.is-open {
    display: block;
}

.offer-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
}

.offer-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(800px, calc(100% - 36px));
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.offer-modal-close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e7ebf0;
    border-radius: 50%;
    background: #f8fafc;
    color: #344054;
    font: inherit;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.offer-modal-close:hover {
    transform: rotate(90deg);
    border-color: #d0d5dd;
    background: #eef2f6;
}

.offer-modal-content {
    min-width: 0;
    padding: 30px;
    color: var(--offer-popup-ink);
}

.offer-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--offer-popup-muted);
    font-size: 15px;
}

.offer-popup-error {
    padding: 28px 12px;
    color: #b42318;
    text-align: center;
}

.offer-popup-error p {
    margin: 0;
}

body.offer-modal-open {
    overflow: hidden;
}

/* Store identity */
.offer-popup-store {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    margin: 0 48px 18px 0;
}

.offer-popup-store-logo {
    display: flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 1px solid var(--offer-popup-border);
    border-radius: 15px;
    background: #fff;
}

.offer-popup-store-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.offer-popup-store-placeholder {
    color: #475467;
    font-size: 23px;
    font-weight: 800;
}

.offer-popup-store-label {
    display: block;
    margin-bottom: 4px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.offer-popup-store-name {
    overflow-wrap: anywhere;
    color: var(--offer-popup-ink);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
}

/* Type badge, discount, and offer title */
.offer-popup-offer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0 0 10px;
}

.offer-popup-type {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.2;
}

.offer-popup-type.coupon {
    border-color: #fed7aa;
    background: #fff7ed;
    color: var(--offer-popup-orange-dark);
}

.offer-popup-type.deal {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.offer-popup-discount {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    background: #fff7ed;
    color: var(--offer-popup-orange-dark);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.offer-popup-title {
    margin: 0 34px 18px 0;
    color: #101828;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* Main content layout. Newer Homepage and Store markup uses body/details/actions.
   Best Offers currently has legacy direct children, which remain supported below. */
.offer-popup-body {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(245px, .88fr);
    align-items: start;
    gap: 22px;
    min-width: 0;
}

.offer-popup-details,
.offer-popup-actions {
    min-width: 0;
}

.offer-popup-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.offer-popup-description {
    margin: 0 0 15px;
    color: #475467;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.offer-popup-expiry {
    margin: 0 0 15px;
    padding: 10px 12px;
    border: 1px solid #e9eef5;
    border-radius: 10px;
    background: var(--offer-popup-surface);
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

/* Offer conditions and restrictions */
.offer-popup-conditions {
    min-width: 0;
    margin: 0 0 15px;
    padding: 15px;
    border: 1px solid var(--offer-popup-border);
    border-radius: 13px;
    background: #fbfcfe;
}

.offer-popup-conditions-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.offer-popup-condition-column,
.offer-popup-exclusion-column {
    min-width: 0;
}

.offer-popup-conditions-title {
    margin: 0 0 10px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.offer-popup-condition-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-popup-condition-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    color: #475467;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.offer-popup-condition-check {
    display: inline-grid;
    flex: 0 0 17px;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 900;
}

.offer-popup-exclusions {
    min-width: 0;
}

.offer-popup-exclusions-label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.offer-popup-exclusions-text {
    min-width: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Coupon code */
.offer-popup-code-wrap {
    min-width: 0;
    margin: 0 0 2px;
    padding: 14px;
    border: 1px dashed #fdba74;
    border-radius: 13px;
    background: #fffaf5;
}

.offer-popup-code-label {
    display: block;
    margin: 0 0 9px;
    color: #9a3412;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.offer-popup-code-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.offer-popup-code {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff;
    color: #9a3412;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    user-select: text;
}

.offer-popup-copy {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid var(--offer-popup-orange);
    border-radius: 9px;
    background: var(--offer-popup-orange);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.offer-popup-copy:hover {
    border-color: var(--offer-popup-orange-dark);
    background: var(--offer-popup-orange-dark);
}

.offer-popup-copy:active,
.offer-popup-action:active {
    transform: translateY(1px);
}

.offer-popup-copy.is-copied {
    border-color: #15803d;
    background: #15803d;
}

.offer-popup-copy.copy-failed {
    border-color: #b42318;
    background: #b42318;
}

.offer-popup-copy .offer-copy-icon {
    display: inline-flex;
    margin-right: 5px;
}

/* Store / deal CTA. Coupon and deal colors are selected from popup content. */
.offer-popup-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 47px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--offer-popup-blue);
    border-radius: 11px;
    background: var(--offer-popup-blue);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.offer-modal-dialog:has(.offer-popup-code-wrap) .offer-popup-action {
    border-color: var(--offer-popup-orange);
    background: var(--offer-popup-orange);
}

.offer-modal-dialog:has(.offer-popup-code-wrap) .offer-popup-action:hover {
    border-color: var(--offer-popup-orange-dark);
    background: var(--offer-popup-orange-dark);
    box-shadow: 0 7px 16px rgba(249, 115, 22, .2);
}

.offer-modal-dialog:not(:has(.offer-popup-code-wrap)) .offer-popup-action:hover {
    border-color: var(--offer-popup-blue-dark);
    background: var(--offer-popup-blue-dark);
    box-shadow: 0 7px 16px rgba(37, 99, 235, .2);
}

.offer-popup-note {
    margin: 16px 0 0;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

/* Code feedback component used by Homepage and Store pages */
.offer-code-feedback {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    background: #f9fafb;
}

.offer-code-feedback-question {
    margin: 0 0 10px;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.offer-code-feedback-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.offer-code-feedback-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.offer-code-feedback-button:hover:not(:disabled) {
    border-color: #fb923c;
    background: #fff7ed;
    color: #9a3412;
}

.offer-code-feedback-button:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.offer-code-feedback-status {
    margin: 9px 0 0;
    color: var(--offer-popup-muted);
    font-size: 11px;
    line-height: 1.5;
}

.offer-code-feedback-status:empty {
    display: none;
}

/* Keyboard focus */
.offer-modal-close:focus-visible,
.offer-popup-copy:focus-visible,
.offer-popup-action:focus-visible,
.offer-code-feedback-button:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .35);
    outline-offset: 3px;
}

/* Legacy Best Offers markup renders popup elements directly in modal-content.
   Keep that version clean and aligned while the other pages use body/details/actions. */
.offer-modal-content > .offer-popup-store,
.offer-modal-content > .offer-popup-offer-meta,
.offer-modal-content > .offer-popup-title,
.offer-modal-content > .offer-popup-description,
.offer-modal-content > .offer-popup-expiry,
.offer-modal-content > .offer-popup-conditions,
.offer-modal-content > .offer-popup-code-wrap,
.offer-modal-content > .offer-popup-action,
.offer-modal-content > .offer-popup-note {
    max-width: 100%;
}

.offer-modal-content > .offer-popup-description {
    margin-bottom: 15px;
}

.offer-modal-content > .offer-popup-conditions {
    margin-top: 4px;
}

.offer-modal-content > .offer-popup-code-wrap {
    margin-top: 8px;
}

.offer-modal-content > .offer-popup-action {
    margin-top: 10px;
}

/* Responsive layout */
@media (max-width: 680px) {
    .offer-modal-dialog {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 17px;
    }

    .offer-modal-content {
        padding: 23px 18px 20px;
    }

    .offer-modal-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    .offer-popup-store {
        gap: 10px;
        margin-right: 38px;
        margin-bottom: 15px;
    }

    .offer-popup-store-logo {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .offer-popup-store-name {
        font-size: 16px;
    }

    .offer-popup-title {
        margin-bottom: 15px;
        font-size: 22px;
    }

    .offer-popup-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .offer-popup-actions {
        gap: 10px;
    }

    .offer-popup-conditions-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .offer-popup-conditions {
        padding: 13px;
    }

    .offer-popup-code-wrap {
        padding: 12px;
    }

    .offer-popup-code-row {
        gap: 7px;
    }

    .offer-popup-code {
        font-size: 13px;
    }

    .offer-popup-copy {
        min-width: 70px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .offer-popup-note {
        margin-top: 13px;
    }
}

@media (max-width: 380px) {
    .offer-modal-content {
        padding: 20px 14px 17px;
    }

    .offer-popup-code-row {
        flex-direction: column;
    }

    .offer-popup-copy {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offer-modal-close,
    .offer-popup-copy,
    .offer-popup-action,
    .offer-code-feedback-button {
        transition: none;
    }
}

/* Critical positioning safeguard: keep the shared popup inside the viewport
   even if a page stylesheet defines conflicting modal/dialog rules. */
.offer-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
}

.offer-modal.is-open {
    display: block !important;
}

.offer-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.offer-modal .offer-modal-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(800px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.offer-modal .offer-modal-content {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.offer-modal .offer-modal-content * {
    max-width: 100%;
    box-sizing: border-box;
}


/* Coupon copy success state */
.offer-popup-copy.is-copied,
.offer-popup-copy.is-copied:hover,
.offer-popup-copy.is-copied:focus {
    background: #16a34a !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}


@media (max-width: 680px) {
    .offer-modal .offer-modal-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}


/* =========================================================
   Shared popup layout refinements
   ========================================================= */
.offer-popup-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 17px;
}
.offer-popup-heading-row .offer-popup-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.offer-popup-heading-row .offer-popup-expiry {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 2px 30px 0 0;
    padding: 6px 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    white-space: nowrap;
}
.offer-popup-more-info {
    margin: 0 0 14px;
}
.offer-popup-section-title {
    margin: 0 0 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}
.offer-popup-description {
    margin: 0;
}
.offer-popup-info-box {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--offer-popup-border);
    border-radius: 12px;
    background: #fbfcfe;
}
.offer-popup-conditions-title,
.offer-popup-exclusions-label {
    margin: 0 0 10px;
}
.offer-popup-condition-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 10px;
}
.offer-popup-exclusions-text {
    margin: 0;
}
@media (max-width: 680px) {
    .offer-popup-heading-row {
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 14px;
    }
    .offer-popup-heading-row .offer-popup-title {
        flex-basis: 100%;
    }
    .offer-popup-heading-row .offer-popup-expiry {
        margin: 0;
    }
    .offer-popup-condition-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Long description and restrictions: compact by default, expandable on demand. */
.offer-popup-more-info {
    margin: 0 0 18px;
}
.offer-popup-section-title,
.offer-popup-conditions-title,
.offer-popup-exclusions-label {
    margin-bottom: 10px;
    line-height: 1.45;
}
.offer-popup-description,
.offer-popup-exclusions-text {
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.offer-popup-info-box {
    margin-bottom: 16px;
    padding: 15px;
}
.offer-popup-conditions-title,
.offer-popup-exclusions-label {
    font-size: 13px;
}
.offer-popup-expandable {
    min-width: 0;
}
.offer-popup-expandable [data-expandable-text].is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.offer-popup-read-more {
    display: inline-flex;
    align-items: center;
    margin: 7px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.offer-popup-read-more:hover {
    color: #1d4ed8;
    text-decoration: underline;
}
.offer-popup-read-more:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 3px;
    border-radius: 3px;
}
.offer-popup-actions {
    gap: 16px;
}
.offer-code-feedback {
    padding: 15px;
}
@media (max-width: 680px) {
    .offer-popup-more-info { margin-bottom: 15px; }
    .offer-popup-info-box { margin-bottom: 13px; padding: 13px; }
    .offer-popup-actions { gap: 12px; }
}

/* Compact three-line preview to keep Offer Conditions visible sooner. */
.offer-popup-more-info {
    margin-bottom: 12px;
}
.offer-popup-section-title,
.offer-popup-conditions-title,
.offer-popup-exclusions-label {
    margin-bottom: 7px;
}
.offer-popup-info-box {
    margin-bottom: 12px;
    padding: 13px;
}
.offer-popup-read-more {
    margin-top: 5px;
}
@media (max-width: 680px) {
    .offer-popup-more-info { margin-bottom: 11px; }
    .offer-popup-info-box { margin-bottom: 11px; padding: 12px; }
}