/* ============================================================================
 * Prescription assistance nudge.
 *
 * Shown on product pages that cannot be bought outright — prescription-only
 * items and ones needing a consultation — after the visitor has been on the page
 * long enough to have hit the wall. "Yes, Get Assistance" opens the existing
 * WhatsApp journey; nothing new is built behind it.
 *
 * A centred dialog over a dimmed page. It asks for an answer rather than waiting
 * in a corner to be noticed, which is the point of it — but because it arrives
 * unbidden it is easy to leave: the X, "Not now", Escape, or a click anywhere on
 * the backdrop all close it, and it remembers that it was closed.
 * ========================================================================== */

/* The overlay fills the viewport and centres the panel. Above the WhatsApp
   button (9990) so that does not float over the dialog, below the cart
   drawer (9999). */
.rxa {
    position: fixed;
    inset: 0;
    z-index: 9995;

    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;

    font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #0a033c;
}

.rxa.is-open { display: flex; }

.rxa__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 3, 60, .55);
    backdrop-filter: blur(2px);
    animation: rxa-fade .25s ease-out;
}

.rxa__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45);
    animation: rxa-in .3s cubic-bezier(.22, 1, .36, 1);
}

@keyframes rxa-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rxa-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rxa__backdrop,
    .rxa__panel { animation: none; }
}

.rxa__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: #f4f4f7;
    color: #0a033c;
    cursor: pointer;
    line-height: 1;
}
.rxa__close:hover { background: #e9e9f0; }
.rxa__close svg { width: 16px; height: 16px; }

/* Centred stack: the dialog reads top to bottom rather than as a line of text
   beside an icon, which is what the corner card was. */
.rxa__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 4px 24px 0;
}

.rxa__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #e8f5e2;
    color: #4f9e2f;
}
.rxa__icon svg { width: 28px; height: 28px; }

.rxa__title {
    margin: 0;
    font-family: "Figtree-SemiBold", "Figtree", sans-serif;
    font-size: 19px;
    line-height: 1.3;
}

.rxa__body {
    margin: 12px 0 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(10, 3, 60, .7);
}

/* Stacked, so the action being offered is the full width of the dialog and
   "Not now" sits plainly beneath it rather than competing alongside. */
.rxa__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.rxa__yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    background: #25D366;                 /* WhatsApp green — it says where the button goes */
    padding: 14px 20px;
    font-family: "Figtree-Bold", "Figtree", sans-serif;
    font-size: 13.5px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.rxa__yes:hover { background: #1fb855; color: #fff; transform: translateY(-1px); }
.rxa__yes svg { width: 16px; height: 16px; }

.rxa__no {
    border: 1px solid #ddddE6;
    border-radius: 999px;
    background: transparent;
    padding: 12px 18px;
    font-family: "Figtree-Medium", "Figtree", sans-serif;
    font-size: 13px;
    color: rgba(10, 3, 60, .65);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.rxa__no:hover { border-color: #0a033c; color: #0a033c; }

/* Holds the page still while the dialog is up, so scrolling the dialog does not
   scroll the product page behind it. */
body.rxa-open { overflow: hidden; }