/* ==========================================================================
   boudoir Frontend — Components
   Shared UI primitives: buttons, badges, alerts, pager, forms,
   promo card, age gate.
   ========================================================================== */

/* ======================
   Buttons — pill CTAs, 44px+ tap targets
   ====================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: var(--size-tap-target);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-full);
    font-family: var(--font-family-body);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
}

.btn--primary {
    background: var(--color-cta-bg);
    color: var(--color-cta-text);
}

.btn--primary:hover {
    background: var(--color-cta-bg-hover);
    color: var(--color-cta-text);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
}

.btn--ghost:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-accent);
}

/* ======================
   Alerts
   ====================== */

.alert {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    margin: var(--spacing-6) 0;
    border: 1px solid transparent;
}

.alert--error {
    background: var(--color-danger-subtle);
    border-color: var(--color-danger-border);
    color: var(--color-text-primary);
}

.alert--success {
    background: var(--color-success-subtle);
    border-color: var(--color-success-border);
    color: var(--color-text-primary);
}

/* ======================
   Pager
   ====================== */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    padding: var(--spacing-8) 0;
}

.pager__link {
    min-height: var(--size-tap-target);
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.pager__link:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-accent);
}

.pager__info {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ======================
   Forms (search input shared shape)
   ====================== */

.form-input {
    width: 100%;
    min-height: var(--size-tap-target);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text-primary);
}

.form-input::placeholder {
    color: var(--color-text-faint);
}

.form-input:focus {
    border-color: var(--color-border-hover);
    outline: none;
}

/* ======================
   Promo card (sponsored placements — dormant until promos exist)
   ====================== */

.promo-card {
    position: relative;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-bg-surface);
}

.promo-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-5);
    min-height: 100%;
    color: var(--color-text-primary);
}

.promo-card__label {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    font-size: var(--text-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-2);
}

.promo-card__title {
    font-family: var(--font-family-display);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-top: var(--spacing-4);
}

.promo-card__text {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.promo-card__cta {
    color: var(--color-text-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-top: auto;
}

.promo-card__image {
    width: 100%;
    border-radius: var(--radius-lg);
}

.promo-card__custom {
    display: block;
}

/* ======================
   Age gate — full-viewport modal, shown on first visit.
   Class names match views/partials/age-gate.php (markup kept from the
   scaffold, restyled to the boudoir token set).
   ====================== */

.age-gate {
    position: fixed;
    inset: 0;
    z-index: var(--z-age-gate);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    transition: opacity var(--transition-slow);
}

.age-gate__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay-age-gate);
}

.age-gate--fading {
    opacity: 0;
    pointer-events: none;
}

.age-gate__modal {
    position: relative;
    width: 100%;
    max-width: var(--content-max-width-modal);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-white-08);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-modal);
    padding: var(--spacing-8);
    text-align: center;
}

.age-gate__logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.age-gate__logo-svg {
    width: 44px;
    height: 55px;
}

.age-gate__title {
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.age-gate__subtitle {
    color: var(--color-text-accent);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: var(--spacing-1) 0 var(--spacing-4);
}

.age-gate__body {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-6);
}

.age-gate__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: center;
}

.age-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--size-button-height);
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
    text-decoration: none;
}

.age-gate__btn--enter {
    background: var(--color-cta-bg);
    color: var(--color-cta-text);
    border: none;
    font-size: var(--text-base);
}

.age-gate__btn--enter:hover {
    background: var(--color-cta-bg-hover);
}

.age-gate__btn--leave {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    min-height: var(--size-tap-target);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.age-gate__btn--leave:hover {
    color: var(--color-text-primary);
}

.age-gate__legal {
    margin-top: var(--spacing-5);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.age-gate__link {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.age-gate__link:hover {
    color: var(--color-text-accent);
}