/* ========================================
   TamRank PRO beta waitlist — /pro/ (PRE-LAUNCH ONLY)

   Two surfaces, one form: the popup that comes up once per visitor, and the
   inline block between the pricing band and "Not ready for PRO". Everything
   here uses the tokens from variables.css and the .tr-btn from global.css, so
   the block reads as part of the page rather than as a bolted-on widget.

   Removable on PRO launch day together with inc/pro-beta-waitlist.php.
   ======================================== */


/* ========================================
   The shared form
   ======================================== */

.pro-beta-form {
    margin: 0;
}

.pro-beta-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tr-space-3);
    align-items: center;
}

/* The placeholder carries the same information and the row would not survive
   a second line on mobile. Screen readers still get the label. */
.pro-beta-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pro-beta-form__input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 13px var(--tr-space-4);
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-base);
    color: var(--tr-color-slate-900);
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-slate-300);
    border-radius: var(--tr-radius-md);
    transition: border-color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
}

.pro-beta-form__input::placeholder {
    color: var(--tr-color-slate-400);
}

.pro-beta-form__input:focus {
    outline: none;
    border-color: var(--tr-color-primary);
    box-shadow: var(--tr-shadow-focus);
}

.pro-beta-form__submit {
    flex: 0 0 auto;
}

/* The spam trap must reach the handler empty. Off screen rather than
   display:none, which some bots skip. */
.pro-beta-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pro-beta-form__msg {
    margin: var(--tr-space-3) 0 0;
    font-size: var(--tr-text-sm);
    line-height: var(--tr-leading-normal);
    color: var(--tr-color-slate-600);
}

.pro-beta-form__msg:empty {
    display: none;
}

.pro-beta-form__msg--error {
    color: var(--tr-color-error-hover);
}

.pro-beta-form__msg--ok {
    color: var(--tr-color-primary-hover);
    font-weight: var(--tr-font-medium);
}

.pro-beta-form--done .pro-beta-form__msg {
    margin-top: 0;
    font-size: var(--tr-text-base);
}

.pro-beta-form__note {
    margin: var(--tr-space-3) 0 0;
    font-size: var(--tr-text-xs);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-color-slate-500);
}

.pro-beta-form__note a {
    color: var(--tr-color-slate-600);
    text-decoration: underline;
}

.pro-beta-form__notice {
    margin: 0 0 var(--tr-space-3);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
}

.pro-beta-form--off {
    opacity: 0.55;
}


/* ========================================
   Inline block

   Sits between the pricing band and "Not ready for PRO", on the white section
   background, so it reads as a step in the page rather than an interruption.
   ======================================== */

.pro-page .pro-beta-inline {
    background: var(--tr-color-white);
    padding-bottom: var(--tr-spacing-section);
}

.pro-beta-inline__card {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--tr-space-10);
    background: var(--tr-color-base);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-xl);
    text-align: center;
}

.pro-beta-inline__kicker {
    display: inline-block;
    margin-bottom: var(--tr-space-3);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-primary-hover);
}

.pro-beta-inline__title {
    margin: 0 0 var(--tr-space-3);
    font-size: var(--tr-text-3xl);
    font-weight: var(--tr-font-extrabold);
    line-height: var(--tr-leading-tight);
    letter-spacing: -0.02em;
    color: var(--tr-color-slate-900);
}

.pro-beta-inline__lead {
    margin: 0 auto var(--tr-space-6);
    max-width: 46ch;
    font-size: var(--tr-text-lg);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-color-slate-600);
}

.pro-beta-inline .pro-beta-form__row {
    max-width: 460px;
    margin: 0 auto;
}

.pro-beta-inline .pro-beta-form__msg,
.pro-beta-inline .pro-beta-form__note {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   Confirmation banner

   Where Brevo drops the visitor after the double opt-in click.
   ======================================== */

.pro-beta-confirmed {
    background: var(--tr-color-primary-light);
    border-bottom: 1px solid rgba(16, 185, 129, 0.35);
}

.pro-beta-confirmed__inner {
    display: flex;
    gap: var(--tr-space-3);
    align-items: center;
    justify-content: center;
    padding: var(--tr-space-4) var(--tr-space-5);
    font-size: var(--tr-text-base);
    color: #065f46;
    text-align: center;
}

.pro-beta-confirmed__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--tr-color-primary-hover);
}

.pro-beta-confirmed__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ========================================
   Popup

   Anchored bottom right rather than laid over the page: no scrim, no scroll
   lock, so the page stays readable and usable behind it. That is also why the
   dialog is not aria-modal and why focus is moved in but not trapped.
   ======================================== */

.pro-beta-popup {
    position: fixed;
    z-index: 900;
    right: var(--tr-space-6);
    bottom: var(--tr-space-6);
    width: 380px;
    max-width: calc(100vw - var(--tr-space-8));
}

.pro-beta-popup[hidden] {
    display: none;
}

.pro-beta-popup__dialog {
    position: relative;
    padding: var(--tr-space-6);
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-xl);
    box-shadow: var(--tr-shadow-xl);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.pro-beta-popup.is-open .pro-beta-popup__dialog {
    opacity: 1;
    transform: translateY(0);
}

.pro-beta-popup__close {
    position: absolute;
    top: var(--tr-space-2);
    right: var(--tr-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--tr-color-slate-500);
    background: transparent;
    border: 0;
    border-radius: var(--tr-radius-md);
    cursor: pointer;
    transition: color var(--tr-transition-fast), background var(--tr-transition-fast);
}

.pro-beta-popup__close:hover {
    color: var(--tr-color-slate-900);
    background: var(--tr-color-slate-100);
}

.pro-beta-popup__close:focus-visible {
    outline: none;
    box-shadow: var(--tr-shadow-focus);
}

.pro-beta-popup__close svg {
    width: 18px;
    height: 18px;
    display: block;
}

.pro-beta-popup__kicker {
    display: block;
    margin-bottom: var(--tr-space-2);
    padding-right: 40px;
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-primary-hover);
}

.pro-beta-popup__title {
    margin: 0 0 var(--tr-space-2);
    padding-right: 40px;
    font-size: var(--tr-text-xl);
    font-weight: var(--tr-font-extrabold);
    line-height: var(--tr-leading-tight);
    letter-spacing: -0.01em;
    color: var(--tr-color-slate-900);
}

.pro-beta-popup__lead {
    margin: 0 0 var(--tr-space-5);
    font-size: var(--tr-text-base);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-color-slate-600);
}

.pro-beta-popup .pro-beta-form__row {
    flex-direction: column;
    align-items: stretch;
}

/* The row's flex-basis of 200px is a width in the side by side layout and
   would become a height here. Field and button stack at their own height. */
.pro-beta-popup .pro-beta-form__input {
    flex: 0 0 auto;
}

.pro-beta-popup .pro-beta-form__submit {
    justify-content: center;
    width: 100%;
}


/* ========================================
   Mobile

   A full width sheet on the bottom edge. Still no scrim: the page behind it
   stays scrollable, and the 44px close button is inside the sheet, so the
   viewport can never be blocked by something the visitor cannot dismiss.
   ======================================== */

@media (max-width: 640px) {
    .pro-beta-popup {
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: none;
    }

    .pro-beta-popup__dialog {
        padding: var(--tr-space-5);
        padding-bottom: calc(var(--tr-space-5) + env(safe-area-inset-bottom, 0px));
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: var(--tr-radius-xl) var(--tr-radius-xl) 0 0;
    }

    .pro-beta-inline__card {
        padding: var(--tr-space-6);
    }

    .pro-beta-inline__title {
        font-size: var(--tr-text-2xl);
    }

    .pro-beta-inline__lead {
        font-size: var(--tr-text-base);
    }
}


@media (prefers-reduced-motion: reduce) {
    .pro-beta-popup__dialog {
        transition: none;
        transform: none;
    }
}