/* ==========================================================================
   KINORA — sign-up and plan nudges (v0.0.479)

   Two shapes, one component. `--guest` is a strip along the bottom of the
   viewport; `--plan` is a block in the page's own flow. Neither covers the
   content, neither blocks scrolling, and neither returns for a month once
   dismissed — App\Support\Nudges checks the cookie before any of this is even
   rendered.

   The strip deliberately stops short of the full width and sits above the
   safe-area inset: on a phone it must not land on top of the home indicator or
   under a player's controls.
   ========================================================================== */

.kt-nudge {
    --nu-line: rgba(var(--kt-ink-rgb), 0.12);
    --nu-text: rgba(var(--kt-ink-rgb), 0.62);
    --nu-dim: rgba(var(--kt-ink-rgb), 0.44);
}

.kt-nudge[hidden] { display: none !important; }

.kt-nudge__mark svg { width: 18px; height: 18px; display: block; }
.kt-nudge__title { display: block; color: var(--kt-ink); font-size: 13.5px; font-weight: 750; }
.kt-nudge__text { margin: 5px 0 0; color: var(--nu-text); font-size: 12.5px; line-height: 1.6; }

.kt-nudge__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 11px;
    background: var(--kt-accent);
    color: var(--kt-on-accent);
    font-size: 12.5px;
    font-weight: 750;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease;
}

.kt-nudge__cta:hover { background: rgba(var(--kt-accent-rgb), 0.88); }

.kt-nudge__later {
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    color: var(--nu-dim);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease;
}

.kt-nudge__later:hover { color: var(--kt-ink); }

.kt-nudge__close {
    display: none;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--nu-dim);
    background: transparent;
    cursor: pointer;
}

.kt-nudge__close svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------- guest strip */

.kt-nudge--guest {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 16px;
    border: 1px solid var(--nu-line);
    border-radius: 16px;
    background: rgba(var(--kt-bg-rgb), 0.92);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.kt-nudge--guest.is-in { opacity: 1; transform: translateY(0); }

.kt-nudge--guest .kt-nudge__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    color: var(--kt-accent);
    background: rgba(var(--kt-accent-rgb), 0.12);
}

.kt-nudge--guest .kt-nudge__body { flex: 1 1 auto; min-width: 0; }
.kt-nudge--guest .kt-nudge__acts { display: flex; align-items: center; gap: 6px; flex: none; }

/* ------------------------------------------------------------- plan block  */

.kt-nudge--plan {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: clamp(20px, 3vw, 32px) 0;
    padding: 18px 20px;
    border: 1px solid rgba(var(--kt-accent-rgb), 0.22);
    border-radius: 16px;
    background: rgba(var(--kt-accent-rgb), 0.055);
}

.kt-nudge--plan .kt-nudge__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--kt-accent);
    background: rgba(var(--kt-accent-rgb), 0.14);
}

.kt-nudge--plan .kt-nudge__body { min-width: 0; }
.kt-nudge--plan .kt-nudge__acts { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- light theme */

.k-site[data-theme="light"] .kt-nudge--guest {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
}

.k-site[data-theme="light"] .kt-nudge { --nu-line: rgba(17, 17, 17, 0.12); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 720px) {
    /* The strip becomes a card: three columns of text and buttons at 360px is
       a row where nothing is readable and nothing is tappable. */
    .kt-nudge--guest {
        right: 12px;
        left: 12px;
        flex-wrap: wrap;
        padding: 14px;
    }

    .kt-nudge--guest .kt-nudge__body { flex: 1 1 100%; order: 2; }
    .kt-nudge--guest .kt-nudge__mark { order: 1; }
    .kt-nudge--guest .kt-nudge__acts { flex: 1 1 100%; order: 3; }
    .kt-nudge--guest .kt-nudge__cta { flex: 1 1 auto; }

    /* With the strip wrapped, the "not now" button would sit next to the CTA
       and get pressed by accident; the ✕ in the corner takes over. */
    .kt-nudge--guest .kt-nudge__later { display: none; }
    .kt-nudge--guest .kt-nudge__close { position: absolute; top: 8px; right: 8px; display: grid; }

    .kt-nudge--plan { grid-template-columns: 42px minmax(0, 1fr); row-gap: 14px; padding: 16px; }
    .kt-nudge--plan .kt-nudge__acts { grid-column: 1 / -1; }
    .kt-nudge--plan .kt-nudge__cta { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .kt-nudge--guest { transition-duration: 0.01ms; }
}