/*
 * Legal Consent Gate — pre-checkout consent modal (2026-10-05, legal-pages
 * rewrite). Shown once, right before a NEW paid subscription (plan or API
 * tariff) is sent to Paddle, so the user explicitly confirms:
 *   - they accept Terms of Use / Public Offer / Privacy Policy / Refund Policy
 *   - the subscription auto-renews unless cancelled
 *   - the digital service starts immediately after payment
 *   - (API only) using the API limit may affect refund eligibility
 *
 * Visually mirrors the existing .apik-modal pattern (api-control.css) so it
 * feels native across both the regular-plan checkout (/our-plans, /plan/active)
 * and the API-tariff cabinet (/api-control) without depending on that file.
 * Uses only site-wide tokens from variables.css (--color-main, --color-text,
 * --transition-main), loaded globally via partials/head.blade.php.
 *
 * 2026-10-05 fix (v2) — this one partial is reused on pages that sit on TWO
 * different base-CSS stacks with DIFFERENT root font-size conventions:
 *   - /our-plans (plans.blade.php, <x-base-head/> → global.css) sets
 *     `html { font-size: 62.5% }`, i.e. 1rem = 10px there.
 *   - /plan/active and /api-control (layouts.main, the cabinet "style.css"
 *     stack) keep the browser default, i.e. 1rem = 16px there.
 * The original version of this file used bare `rem` units, so on /our-plans
 * every size rendered at ~62.5% of what it looked like on the cabinet pages
 * — tiny, barely readable text (reported by the owner). Rewritten to use
 * fixed `px` everywhere so the modal looks IDENTICAL regardless of which
 * page's root font-size it happens to inherit, and sized a bit larger
 * overall per the same feedback.
 */

.legal-consent-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.legal-consent-modal[hidden] { display: none; }
.legal-consent-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 15, 35, .74); backdrop-filter: blur(3px); animation: legal-consent-fade .2s ease; }
@keyframes legal-consent-fade { from { opacity: 0; } to { opacity: 1; } }

.legal-consent-modal__card {
    position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: #ffffff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .65);
    border: 1px solid rgba(0, 0, 0, .06); padding: 32px 34px; animation: legal-consent-pop .24s cubic-bezier(.22, .61, .36, 1);
    font-size: 16px; /* explicit base so any em-based children below stay predictable too */
}
@keyframes legal-consent-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.legal-consent-modal__title { margin: 0 0 14px; font-size: 23px; font-weight: 800; line-height: 1.3; color: var(--color-text, #111827); }

.legal-consent-modal__notices { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legal-consent-modal__notice {
    display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.55;
    color: color-mix(in srgb, var(--color-text, #111827) 80%, transparent);
}
.legal-consent-modal__notice i { flex: 0 0 auto; font-size: 20px; margin-top: 1px; color: var(--color-main); }
.legal-consent-modal__notice--warn i { color: #d97706; }

.legal-consent-modal__check {
    display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; margin-bottom: 20px;
    border-radius: 13px; background: color-mix(in srgb, var(--color-main) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-main) 18%, transparent); cursor: pointer;
}
.legal-consent-modal__check input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-main); cursor: pointer; }
.legal-consent-modal__check span { font-size: 16px; line-height: 1.55; color: var(--color-text, #111827); }
.legal-consent-modal__check a { color: var(--color-main); font-weight: 600; text-decoration: underline; }
.legal-consent-modal__check a:hover { text-decoration: none; }

.legal-consent-modal__hint { font-size: 14px; color: #dc2626; margin: -16px 0 18px; display: none; }
.legal-consent-modal__hint.is-visible { display: block; }

.legal-consent-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.legal-consent-modal__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 22px;
    border-radius: 12px; font-size: 16px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap;
    transition: transform var(--transition-main, .15s) ease, box-shadow var(--transition-main, .15s) ease, filter .15s ease, opacity .15s ease;
}
.legal-consent-modal__btn--neutral { background: color-mix(in srgb, var(--color-text, #1c232f) 8%, transparent); color: var(--color-text, #1c232f); }
.legal-consent-modal__btn--neutral:hover { background: color-mix(in srgb, var(--color-text, #1c232f) 14%, transparent); }
.legal-consent-modal__btn--brand { background: var(--color-main); color: #fff; }
.legal-consent-modal__btn--brand:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.legal-consent-modal__btn--brand:disabled { opacity: .5; cursor: not-allowed; }

body.app-theme-dark .legal-consent-modal__card { background: #1b2130; border-color: rgba(255, 255, 255, .08); }
body.app-theme-dark .legal-consent-modal__title { color: #f3f4f6; }
body.app-theme-dark .legal-consent-modal__notice { color: #cbd2de; }
body.app-theme-dark .legal-consent-modal__check { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
body.app-theme-dark .legal-consent-modal__check span { color: #e5e7eb; }
body.app-theme-dark .legal-consent-modal__btn--neutral { background: rgba(255, 255, 255, .1); color: #e5e7eb; }

/* Mobile — full-width stacked buttons, tighter padding, no horizontal scroll. */
@media (max-width: 575.98px) {
    .legal-consent-modal { padding: 10px; align-items: flex-end; }
    .legal-consent-modal__card { max-width: none; width: 100%; padding: 22px 20px; max-height: calc(100vh - 20px); }
    .legal-consent-modal__title { font-size: 20px; }
    .legal-consent-modal__actions { flex-direction: column-reverse; }
    .legal-consent-modal__actions .legal-consent-modal__btn { width: 100%; }
}