/*
 * Jotifi redesign theme for JotifiWebUI billing/account pages.
 *
 * Uses the website's palette and the app's white-page logo on dark surfaces.
 * Scoped to the .rd-scope wrapper so it never bleeds into the legacy
 * AuthLayout / MainLayout pages, which keep app.css styling.
 *
 * Shared portal presentation only; purchase and authentication behavior stays in the pages.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------- */
.rd-scope {
    /* Surfaces */
    --rd-bg: #FAFAFA;
    --rd-bg2: #F1F5F9;
    --rd-panel: #FFFFFF;

    /* Ink ramp */
    --rd-ink: #0F172A;
    --rd-ink2: #334155;
    --rd-ink3: #64748B;
    --rd-ink4: #64748B;

    /* Hairlines */
    --rd-line: #E2E8F0;
    --rd-line2: #EEF2F6;

    /* Accent */
    --rd-accent: #4F46E5;
    --rd-accent-soft: #EEF0FF;
    --rd-accent-ink: #FFFFFF;

    /* Status tones */
    --rd-ok-bg: #DCFCE7;
    --rd-ok-fg: #065F46;
    --rd-warn-bg: #FEF3C7;
    --rd-warn-fg: #92660A;
    --rd-danger-bg: #FEE2E2;
    --rd-danger-fg: #E11D48;

    /* Elevation (ported 1:1 from Flutter --shadow-card / --shadow-hover light) */
    --rd-shadow-card: 0 1px 0 rgba(11, 11, 12, .04), 0 1px 2px rgba(11, 11, 12, .04);
    --rd-shadow-hover: 0 6px 18px -8px rgba(11, 11, 12, .18), 0 2px 4px rgba(11, 11, 12, .06);

    /* Shape */
    --rd-radius-sm: 6px;
    --rd-radius-btn: 12px;
    --rd-radius-input: 12px;
    --rd-radius-card: 22px;
    --rd-radius-menu: 12px;

    /* Fonts */
    --rd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rd-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="dark"] .rd-scope,
.rd-scope[data-theme="dark"] {
    --rd-bg: #0B1120;
    --rd-bg2: #111B2C;
    --rd-panel: #131E30;

    --rd-ink: #F5F5F4;
    --rd-ink2: #D4D4D2;
    --rd-ink3: #A8B5C8;
    --rd-ink4: #94A3B8;

    --rd-line: #334155;
    --rd-line2: #253248;

    --rd-accent: #4F46E5;
    --rd-accent-soft: #1E1F3D;
    --rd-accent-ink: #FFFFFF;

    --rd-ok-bg: rgba(16, 185, 129, .16);
    --rd-ok-fg: #4ADE80;
    --rd-warn-bg: rgba(245, 158, 11, .16);
    --rd-warn-fg: #FBBF24;
    --rd-danger-bg: rgba(225, 29, 72, .20);
    --rd-danger-fg: #FB7185;

    --rd-shadow-card: 0 1px 0 rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --rd-shadow-hover: 0 8px 20px -8px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .4);
}

/* ----------------------------------------------------------------------------
 * Base surface + typography
 * ------------------------------------------------------------------------- */
.rd-scope {
    font-family: var(--rd-font-body);
    color: var(--rd-ink);
    background: var(--rd-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

.rd-scope *,
.rd-scope *::before,
.rd-scope *::after {
    box-sizing: border-box;
}

.rd-mono {
    font-family: var(--rd-font-mono);
    font-feature-settings: 'tnum' 1;
}

.rd-muted {
    color: var(--rd-ink3);
}

.rd-faint {
    color: var(--rd-ink4);
}

/* ----------------------------------------------------------------------------
 * App shell (RedesignLayout)
 * ------------------------------------------------------------------------- */
.rd-shell {
    min-height: 100vh;
    background: radial-gradient(ellipse 720px 400px at 50% 0, rgba(79, 70, 229, .10), transparent),
        radial-gradient(rgba(100, 116, 139, .10) .7px, transparent .7px) 0 0 / 24px 24px, var(--rd-bg);
    display: flex;
    flex-direction: column;
}

.rd-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--rd-bg) 88%, transparent);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--rd-line);
}

.rd-topbar-inner {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 20px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--rd-ink);
}

.rd-brand img {
    height: 40px;
    width: auto;
    display: block;
}

.rd-brand-name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.rd-main {
    flex: 1;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.rd-footer {
    border-top: 1px solid var(--rd-line);
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--rd-ink4);
}

/* ----------------------------------------------------------------------------
 * Theme toggle
 * ------------------------------------------------------------------------- */
.rd-theme-toggle {
    appearance: none;
    border: 1px solid var(--rd-line);
    background: var(--rd-panel);
    color: var(--rd-ink2);
    width: 34px;
    height: 34px;
    border-radius: var(--rd-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rd-theme-toggle:hover {
    background: var(--rd-bg2);
    color: var(--rd-ink);
}

.rd-theme-toggle svg {
    width: 17px;
    height: 17px;
}

.rd-theme-toggle .rd-icon-moon {
    display: none;
}

[data-theme="dark"] .rd-theme-toggle .rd-icon-sun {
    display: none;
}

[data-theme="dark"] .rd-theme-toggle .rd-icon-moon {
    display: inline;
}

/* ----------------------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------------------- */
.rd-header {
    margin-bottom: 32px;
}

.rd-header h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--rd-ink);
}

.rd-header p {
    margin: 0;
    font-size: 17px;
    color: var(--rd-ink3);
}

.rd-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* ----------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */
.rd-card {
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    padding: 24px;
}

.rd-card + .rd-card {
    margin-top: 16px;
}

.rd-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-ink3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}

/* ----------------------------------------------------------------------------
 * Rows (label/value pairs)
 * ------------------------------------------------------------------------- */
.rd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rd-line2);
}

.rd-row:first-child {
    padding-top: 0;
}

.rd-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rd-row-label {
    font-size: 13px;
    color: var(--rd-ink3);
}

.rd-row-value {
    font-size: 14px;
    color: var(--rd-ink);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* ----------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.rd-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--rd-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 0 16px;
    min-height: 44px;
    border-radius: var(--rd-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.rd-btn:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
}

.rd-btn[disabled],
.rd-btn.rd-btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.rd-btn-block {
    width: 100%;
}

.rd-btn-lg {
    height: 44px;
    font-size: 15px;
    padding: 0 20px;
}

/* primary = accent fill / white text */
.rd-btn-primary {
    background: linear-gradient(110deg, #4F46E5, #2563EB 50%, #087F76);
    color: var(--rd-accent-ink);
    border-color: transparent;
    box-shadow: 0 8px 20px -12px rgba(79, 70, 229, .65);
}

.rd-btn-primary:hover {
    background: color-mix(in srgb, var(--rd-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--rd-accent) 88%, #000);
}

/* secondary = panel surface + 1px line border */
.rd-btn-secondary {
    background: var(--rd-panel);
    color: var(--rd-ink);
    border-color: var(--rd-line);
}

.rd-btn-secondary:hover {
    background: var(--rd-bg2);
    border-color: var(--rd-ink4);
}

/* ghost = text only */
.rd-btn-ghost {
    background: transparent;
    color: var(--rd-ink2);
    border-color: transparent;
}

.rd-btn-ghost:hover {
    background: var(--rd-bg2);
    color: var(--rd-ink);
}

/* store buttons (App Store / Google Play / Microsoft Store) */
.rd-btn-store {
    background: var(--rd-ink);
    color: var(--rd-bg);
    border-color: var(--rd-ink);
}

.rd-btn-store:hover {
    background: var(--rd-ink2);
    border-color: var(--rd-ink2);
}

.rd-btn-store svg {
    width: 18px;
    height: 18px;
}

/* ----------------------------------------------------------------------------
 * Pills / badges
 * ------------------------------------------------------------------------- */
.rd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--rd-bg2);
    color: var(--rd-ink2);
    border: 1px solid var(--rd-line);
}

.rd-pill-accent {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    border-color: transparent;
}

.rd-pill-ok {
    background: var(--rd-ok-bg);
    color: var(--rd-ok-fg);
    border-color: transparent;
}

.rd-pill-warn {
    background: var(--rd-warn-bg);
    color: var(--rd-warn-fg);
    border-color: transparent;
}

.rd-pill-danger {
    background: var(--rd-danger-bg);
    color: var(--rd-danger-fg);
    border-color: transparent;
}

.rd-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

/* ----------------------------------------------------------------------------
 * Plan cards (pricing)
 * ------------------------------------------------------------------------- */
.rd-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.rd-plan-card {
    position: relative;
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.rd-plan-card.rd-plan-featured {
    border-color: var(--rd-accent);
    box-shadow: var(--rd-shadow-hover);
}

.rd-plan-badge {
    position: absolute;
    top: -10px;
    right: 16px;
}

.rd-plan-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--rd-ink);
    margin: 0 0 4px;
}

.rd-plan-tagline {
    font-size: 13px;
    color: var(--rd-ink3);
    margin: 0 0 16px;
}

.rd-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.rd-plan-amount {
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rd-ink);
}

.rd-plan-period {
    font-size: 13px;
    color: var(--rd-ink3);
}

.rd-plan-subprice {
    font-size: 12px;
    color: var(--rd-ink4);
    margin-bottom: 18px;
}

.rd-plan-features {
    list-style: none;
    margin: 20px 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.rd-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--rd-ink2);
}

.rd-plan-features li svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--rd-accent);
}

/* ----------------------------------------------------------------------------
 * Notice / disclosure blocks
 * ------------------------------------------------------------------------- */
.rd-notice {
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-input);
    background: var(--rd-bg2);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--rd-ink3);
    line-height: 1.55;
}

.rd-notice strong {
    color: var(--rd-ink2);
    font-weight: 600;
}

.rd-notice-warn {
    background: var(--rd-warn-bg);
    border-color: transparent;
    color: var(--rd-warn-fg);
}

.rd-notice-warn strong {
    color: var(--rd-warn-fg);
}

.rd-notice-danger {
    background: var(--rd-danger-bg);
    border-color: transparent;
    color: var(--rd-danger-fg);
}

/* ----------------------------------------------------------------------------
 * Status / result hero (success / cancel pages)
 * ------------------------------------------------------------------------- */
.rd-hero {
    text-align: center;
    padding: 8px 0 4px;
}

.rd-hero-icon {
    width: 56px;
    height: 80px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.rd-hero-icon svg {
    width: 28px;
    height: 28px;
}

.rd-hero-icon.rd-ok {
    background: var(--rd-ok-bg);
    color: var(--rd-ok-fg);
}

.rd-hero-icon.rd-warn {
    background: var(--rd-warn-bg);
    color: var(--rd-warn-fg);
}

.rd-hero-icon.rd-neutral {
    background: var(--rd-bg2);
    color: var(--rd-ink3);
}

.rd-hero h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--rd-ink);
}

.rd-hero p {
    margin: 0 auto;
    max-width: 420px;
    font-size: 14px;
    color: var(--rd-ink3);
}

/* ----------------------------------------------------------------------------
 * Utility helpers
 * ------------------------------------------------------------------------- */
.rd-stack {
    display: flex;
    flex-direction: column;
}

.rd-gap-8 { gap: 8px; }
.rd-gap-12 { gap: 12px; }
.rd-gap-16 { gap: 16px; }
.rd-gap-24 { gap: 24px; }

.rd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.rd-actions-center {
    justify-content: center;
}

.rd-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--rd-line);
    border-top-color: var(--rd-accent);
    border-radius: 999px;
    animation: rd-spin 0.7s linear infinite;
}

.rd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 0;
    color: var(--rd-ink3);
    font-size: 14px;
}

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

.rd-link {
    color: var(--rd-accent);
    text-decoration: none;
    font-weight: 500;
}

.rd-link:hover {
    text-decoration: underline;
}

.rd-text-sm {
    font-size: 13px;
}

.rd-mt-16 { margin-top: 16px; }
.rd-mt-24 { margin-top: 24px; }
.rd-mb-0 { margin-bottom: 0; }

/* Account pages share the website brand without adding marketing links to account details. */
.rd-topbar-actions { display: flex; align-items: center; gap: 24px; }
.rd-portal-label { font-size: 14px; color: var(--rd-ink3); }
.rd-brand .rd-brand-dark { display: none; }
.rd-brand-dark {
    align-items: center;
    gap: 4px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}
[data-theme="dark"] .rd-brand .rd-brand-light { display: none; }
[data-theme="dark"] .rd-brand .rd-brand-dark { display: inline-flex; }
[data-theme="dark"] .rd-pill-accent,
[data-theme="dark"] .rd-link,
[data-theme="dark"] .rd-plan-features li svg { color: #A5B4FC; }
.rd-signin { max-width: 460px; margin: 0 auto; }
.rd-input {
    width: 100%; min-height: 48px; padding: 0 14px;
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius-input);
    background: var(--rd-panel); color: var(--rd-ink); font: inherit;
}
.rd-input:focus-visible, .rd-brand:focus-visible, .rd-theme-toggle:focus-visible {
    outline: 2px solid var(--rd-accent); outline-offset: 3px;
}
.rd-row > div { min-width: 0; }
.rd-mono { overflow-wrap: anywhere; }
.rd-plan-price { flex-wrap: wrap; }
.rd-plan-featured {
    background: linear-gradient(var(--rd-panel), var(--rd-panel)) padding-box,
        linear-gradient(135deg, #4F46E5, #2563EB, #14B8A6) border-box;
}
.rd-plan-card.rd-plan-featured { border-color: transparent; }
@media (max-width: 600px) {
    .rd-main { padding: 32px 16px 48px; }
    .rd-topbar-inner { height: 68px; padding: 0 16px; }
    .rd-portal-label { display: none; }
    .rd-plan-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rd-card, .rd-plan-card { padding: 22px; }
    .rd-row { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
    .rd-row-value { text-align: left; }
    .rd-header-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-btn, .rd-theme-toggle { transition: none; }
    .rd-spinner { animation-duration: 2s; }
}