/**
 * "Try with AI" modal.
 *
 * Scoped entirely under .sarno-tryon so nothing here can reach the Elementor
 * product page around it, and the button that opens it keeps the theme's own
 * styling — this file never touches it.
 *
 * Buttons are NOT styled here: every CTA also carries Elementor's
 * `custom-button`, so they inherit the site's own button design and follow it
 * when it changes. The only exception is the disabled state, which Elementor
 * has no styling for.
 *
 * Accents come from --sarno-accent, declared once on .sarno-tryon below.
 * Note the rest of the plugin still uses WooCommerce's default purple
 * (#96588a, 16 occurrences across checkout, account and measurements) — this
 * dialog is the first to move, so the two differ until those are updated too.
 */

.sarno-tryon {
    /* Single source for the accent. Everything below references these, so
       re-skinning the dialog is a two-line edit rather than a find-and-replace. */
    --sarno-accent: #980013;
    --sarno-accent-dark: #6d000e;
    --sarno-accent-tint: #fdf0f1;

    position: fixed;
    inset: 0;
    z-index: 100000;
}

.sarno-tryon[hidden] { display: none; }

.sarno-tryon__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 20, 24, .6);
}

/* Sits high on the page rather than dead-centre, matching .try-ai__box. */
.sarno-tryon__panel {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -20%);
    z-index: 10;
    width: 100%;
    max-width: 550px;
    /* Not in the original rule, but `overflow: auto` needs a ceiling to scroll
       against — without one a long step just runs off the bottom of the screen
       and the action button becomes unreachable. */
    max-height: 76vh;
    overflow: auto;
    padding: 30px 20px 20px;
    background-color: #fff;
    border: 1px solid #0e5259;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

/* ---------------------------------------------------------------- header */

/* The panel carries the padding now, so the header only needs its rule. */
.sarno-tryon__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ececec;
}

.sarno-tryon__head h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #2c2c2c;
}

/* Pinned to the box corner rather than sitting in the header row, so it stays
   put regardless of how long the title wraps. */
.sarno-tryon__close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Still 36px of hit area — the glyph is small, and a close control needs a
       comfortable target even though nothing is drawn behind it. */
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s;
}

/* No fill behind the glyph: the icon itself darkens instead. */
.sarno-tryon__close:hover { color: var(--sarno-accent); }

/* Keyboard users still need to see where they are, so focus draws an outline
   rather than the filled shape that was here before. */
.sarno-tryon__close:focus-visible {
    outline: 2px solid var(--sarno-accent);
    outline-offset: 2px;
}

/* The X is drawn, not fonted or imported: two 2px bars crossed at 45 degrees.
   Font Awesome was unavailable and an inline SVG also came through blank, so
   this removes the last external dependency — if the stylesheet loads at all,
   the glyph is there. The bars are pseudo-elements, so screen readers see
   nothing but the button's aria-label. */
.sarno-tryon__close::before,
.sarno-tryon__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.sarno-tryon__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sarno-tryon__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------------------ body */

.sarno-tryon__body {
    font-size: 1.0625rem;   /* 17px — the dialog is read once, quickly */
    line-height: 1.7;
    color: #2d2d2d;
}

/* !important because a step-specific rule further down sets its own `display`
   at the same specificity and would otherwise win on source order alone —
   [data-step="working"] did exactly that, leaving the spinner on screen for
   every step. A visibility utility has to outrank layout, not race it. */
.sarno-tryon__step[hidden] { display: none !important; }
.sarno-tryon__step > p:first-child { margin-top: 0; }

/* Was #6b6b6b at .92rem — under 4.5:1 on white at that size. Darker and
   larger so the privacy line and photo limits are actually legible. */
.sarno-tryon__muted { color: #565656; font-size: 1rem; }

.sarno-tryon__tips {
    margin: 16px 0 20px;
    padding-left: 22px;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Generous spacing: this is a checklist to work through, not prose to skim. */
.sarno-tryon__tips li {
    padding-left: 4px;
}

.sarno-tryon__tips li::marker { color: var(--sarno-accent); }

/* ----------------------------------------------------------------- terms */

.sarno-tryon__agree {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    cursor: pointer;
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* Larger than the browser default: this is the one control standing between a
   customer and uploading a photograph of themselves. */
.sarno-tryon__agree input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--sarno-accent);
}

/* --------------------------------------------------------------- buttons */

.sarno-tryon__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

/* Appearance comes from Elementor's `custom-button`, which every CTA also
   carries — nothing here sets colour, padding, radius or type, so the dialog's
   buttons stay identical to the rest of the site and follow it when it changes.
   Only the disabled state is ours, because Elementor has no styling for it. */

/* Scoped through .sarno-tryon so it outranks the theme's own button rules;
   without the extra class this would lose to `custom-button` and a locked
   button would look clickable. */
.sarno-tryon .sarno-tryon__cta:disabled,
.sarno-tryon .sarno-tryon__cta[disabled] {
    opacity: .45;
    cursor: not-allowed;
    /* Kills any hover/active transform the theme applies, so the control reads
       as inert rather than merely faded. */
    pointer-events: none;
    filter: grayscale(100%);
}

.sarno-tryon__link {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #565656;
    font-size: 1rem;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.sarno-tryon__link:hover { color: var(--sarno-accent); }

/* Full-width primary on the intro step, where it is the only action. */
.sarno-tryon__step[data-step="intro"] .sarno-tryon__cta { width: 100%; }

/* Stacks the label onto two lines. Sizing stays in `em` so it scales with
   whatever type Elementor's `custom-button` sets, rather than pinning a size
   this file would then have to keep in sync. */
.sarno-tryon__cta-line {
    display: block;
    line-height: 1.35;
}

.sarno-tryon__cta-sub {
    font-size: .85em;
    font-weight: 400;
    opacity: .9;
}

/* ------------------------------------------------------------- drop zone */

.sarno-tryon__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    padding: 24px;
    border: 2px dashed #d8d2d3;
    border-radius: 10px;
    background: #faf8f8;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.sarno-tryon__drop:hover,
.sarno-tryon__drop:focus-visible,
.sarno-tryon__drop.is-dragover {
    border-color: var(--sarno-accent);
    background: var(--sarno-accent-tint);
    outline: none;
}

.sarno-tryon__drop svg {
    width: 40px;
    height: 40px;
    fill: var(--sarno-accent);
    margin-bottom: 4px;
}

.sarno-tryon__drop p { margin: 0; }

/* ---------------------------------------------------------------- frames */

.sarno-tryon__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    max-height: 60vh;
    background: #f6f4f4;
    border-radius: 10px;
    overflow: hidden;
}

.sarno-tryon__frame img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
    object-fit: contain;
}

/* --------------------------------------------------------------- working */

.sarno-tryon__step[data-step="working"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 50px 0;
    text-align: center;
}

.sarno-tryon__spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e6e6e6;
    border-top-color: var(--sarno-accent);
    border-radius: 50%;
    animation: sarno-tryon-spin 1s linear infinite;
}

@keyframes sarno-tryon-spin { to { transform: rotate(360deg); } }

/* A spinner is decorative; for anyone who asked for less motion the wait is
   still conveyed by the aria-live text beside it. */
@media (prefers-reduced-motion: reduce) {
    .sarno-tryon__spinner { animation-duration: 3s; }
}

.sarno-tryon__error {
    margin: 0;
    padding: 14px 16px;
    background: #fdecec;
    border-radius: 8px;
    color: #a32020;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 600px) {
    .sarno-tryon__panel {
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border: 0;
        border-radius: 0;
        padding: 56px 18px 18px;   /* room for the pinned close button */
    }

    /* Stacked and reversed so the primary action sits lowest — nearest the
       thumb, and last in the reading order. */
    .sarno-tryon__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .sarno-tryon__actions .sarno-tryon__cta { width: 100%; }
}