/* ============================================================
   Owrite Parenting Tools — UI v2
   Style: owrite.id × BusinessInsider × NYTimes editorial
   Font:  Crimson Pro (headings) + DM Sans (UI/body)
   Dark:  Responds to site dark mode + prefers-color-scheme
   ============================================================ */

/* ── CSS Variables: Light mode ─────────────────────────────── */
.opt-wrap {
    /* Backgrounds */
    --bg:          #F5F3EE;
    --surface:     #FFFFFF;
    --surface-2:   #F0EDE7;
    --surface-3:   #E8E4DC;

    /* Text */
    --text:        #0D0D0B;
    --text-2:      #2A2A28;
    --muted:       #6B6860;
    --muted-2:     #9A9690;

    /* Border */
    --border:      #DDD9D0;
    --border-2:    #C8C4BB;

    /* Brand */
    --brand:       #E8C417;   /* owrite yellow */
    --brand-dark:  #C9A810;

    /* Tool: Ovulation */
    --red:         #D4372A;
    --red-2:       #B82E23;
    --red-pale:    #FBF0EF;
    --red-border:  rgba(212,55,42,.18);

    /* Tool: Due Date */
    --purple:      #6B29C7;
    --purple-2:    #5920A8;
    --purple-pale: #F1EAFB;
    --purple-border: rgba(107,41,199,.18);

    /* Supporting */
    --green:       #1A6B3A;
    --green-pale:  #EBF5F0;
    --blue:        #1A3A6B;
    --blue-pale:   #EBF0F7;
    --teal:        #0D7B7B;
    --teal-pale:   #E6F4F4;

    /* Typography */
    --serif:       'Crimson Pro', 'Georgia', serif;
    --sans:        'DM Sans', system-ui, -apple-system, sans-serif;

    /* Radius */
    --r:   5px;
    --rl:  10px;
    --rxl: 16px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:  0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

    /* Transition */
    --t: .2s ease;

    box-sizing: border-box;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    padding: 56px 20px 88px;
    max-width: 100%;
    transition: background var(--t), color var(--t);
}

.opt-wrap *, .opt-wrap *::before, .opt-wrap *::after {
    box-sizing: inherit;
}

/* ── Dark mode: All common WordPress/Elementor patterns ─────── */
/* Elementor built-in dark mode */
body.e-dark-mode .opt-wrap,
/* Generic patterns */
body.dark-mode .opt-wrap,
body.dark .opt-wrap,
html.dark .opt-wrap,
html.dark-mode .opt-wrap,
/* Data attributes */
body[data-theme="dark"] .opt-wrap,
html[data-theme="dark"] .opt-wrap,
[data-bs-theme="dark"] .opt-wrap,
/* OS preference fallback */
@media (prefers-color-scheme: dark) {
    /* handled below */
}

/* Shared dark mode values — applied via a mixin-like approach */
.opt-wrap[data-dm="1"],
body.e-dark-mode .opt-wrap,
body.dark-mode .opt-wrap,
body.dark .opt-wrap,
html.dark .opt-wrap,
html.dark-mode .opt-wrap,
body[data-theme="dark"] .opt-wrap,
html[data-theme="dark"] .opt-wrap,
[data-bs-theme="dark"] .opt-wrap {
    --bg:          #111110;
    --surface:     #1C1C1A;
    --surface-2:   #252522;
    --surface-3:   #2E2E2B;
    --text:        #F0EFE8;
    --text-2:      #D8D6CE;
    --muted:       #9A9890;
    --muted-2:     #6E6C64;
    --border:      #2E2E2A;
    --border-2:    #3E3E3A;
    --brand:       #E8C417;
    --brand-dark:  #FFD93D;
    --red:         #E8493C;
    --red-2:       #FF5A4D;
    --red-pale:    rgba(232,73,60,.12);
    --red-border:  rgba(232,73,60,.25);
    --purple:      #9B59E8;
    --purple-2:    #B278FF;
    --purple-pale: rgba(155,89,232,.12);
    --purple-border: rgba(155,89,232,.25);
    --green:       #3DB86A;
    --green-pale:  rgba(61,184,106,.1);
    --blue:        #5B8FD4;
    --blue-pale:   rgba(91,143,212,.1);
    --teal:        #2AB5B5;
    --teal-pale:   rgba(42,181,181,.1);
    --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,.35);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
    .opt-wrap:not([data-dm="0"]) {
        --bg:          #111110;
        --surface:     #1C1C1A;
        --surface-2:   #252522;
        --surface-3:   #2E2E2B;
        --text:        #F0EFE8;
        --text-2:      #D8D6CE;
        --muted:       #9A9890;
        --muted-2:     #6E6C64;
        --border:      #2E2E2A;
        --border-2:    #3E3E3A;
        --brand:       #E8C417;
        --red:         #E8493C;
        --red-pale:    rgba(232,73,60,.12);
        --red-border:  rgba(232,73,60,.25);
        --purple:      #9B59E8;
        --purple-pale: rgba(155,89,232,.12);
        --purple-border: rgba(155,89,232,.25);
        --green:       #3DB86A;
        --green-pale:  rgba(61,184,106,.1);
        --blue:        #5B8FD4;
        --blue-pale:   rgba(91,143,212,.1);
        --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
        --shadow-md:   0 4px 16px rgba(0,0,0,.35);
    }
}

/* ── Header ────────────────────────────────────────────────── */
.opt-header {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.opt-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-2);
    background: var(--brand);
    padding: 5px 12px;
    border-radius: 2px;
    margin-bottom: 24px;
}

.opt-title {
    font-family: var(--serif);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 0 0 18px;
}

.opt-subtitle {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Thin editorial rule ──────────────────────────────────── */
.opt-header::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--red);
    margin: 24px auto 0;
}

/* ── Tool Switcher ─────────────────────────────────────────── */
.opt-switcher-wrap {
    max-width: 620px;
    margin: 0 auto 32px;
}

.opt-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    padding: 7px;
    box-shadow: var(--shadow-md);
    transition: background var(--t), border-color var(--t);
}

.opt-switch {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: all var(--t);
    text-align: left;
    font-family: var(--sans);
    position: relative;
}

.opt-switch:hover:not(.active) {
    background: var(--surface-2);
    border-color: var(--border);
}

.opt-switch.active {
    background: var(--text);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.opt-switch-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.opt-switch-label { display: flex; flex-direction: column; gap: 3px; }

.opt-switch-label strong {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
    display: block;
    line-height: 1;
}

.opt-switch-label small {
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    display: block;
}

.opt-switch.active .opt-switch-label strong,
.opt-switch.active .opt-switch-label small { color: rgba(255,255,255,.9); }

/* ── Panel ─────────────────────────────────────────────────── */
.opt-panel { max-width: 620px; margin: 0 auto; }

/* ── Card ──────────────────────────────────────────────────── */
.opt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 36px 40px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

.opt-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.opt-card--red::before    { background: var(--red); }
.opt-card--purple::before { background: var(--purple); }

@media (max-width: 580px) { .opt-card { padding: 24px 20px; } }

/* Card header */
.opt-card-header { margin-bottom: 28px; }

.opt-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 12px;
    border: 1px solid;
}
.opt-card-badge--red    { background: var(--red-pale);    color: var(--red);    border-color: var(--red-border); }
.opt-card-badge--purple { background: var(--purple-pale); color: var(--purple); border-color: var(--purple-border); }

.opt-card-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.opt-card-desc {
    font-size: 14px;
    color: var(--muted);
    font-weight: 300;
    margin: 0;
    line-height: 1.6;
}

/* ── Form elements ─────────────────────────────────────────── */
.opt-tool-body { display: flex; flex-direction: column; gap: 24px; }

.opt-field { display: flex; flex-direction: column; gap: 8px; }

.opt-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    transition: color var(--t);
}

.opt-cycle-val {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: var(--red);
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--t);
}

.opt-hint {
    font-size: 12px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.5;
    transition: color var(--t);
}

/* Date input */
.opt-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 13px 15px;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--text);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.opt-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(212,55,42,.12);
    background: var(--surface);
}
.opt-input::-webkit-calendar-picker-indicator {
    filter: invert(0);
    opacity: .5;
    cursor: pointer;
}
body.e-dark-mode .opt-input::-webkit-calendar-picker-indicator,
body.dark-mode .opt-input::-webkit-calendar-picker-indicator,
body.dark .opt-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Slider */
.opt-slider-wrap { display: flex; align-items: center; gap: 12px; }
.opt-slider-edge { font-size: 12px; color: var(--muted); min-width: 22px; text-align: center; }

.opt-slider {
    -webkit-appearance: none;
    flex: 1; height: 4px;
    background: var(--border-2);
    border-radius: 2px;
    outline: none;
    transition: background var(--t);
}
.opt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--red);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1.5px var(--red), 0 2px 8px rgba(212,55,42,.3);
    cursor: pointer; transition: transform .15s;
}
.opt-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.opt-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--red); border: 3px solid var(--surface);
    box-shadow: 0 0 0 1.5px var(--red); cursor: pointer;
}

/* Info pill */
.opt-info-pill {
    background: var(--purple-pale);
    border: 1px solid var(--purple-border);
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--purple);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.5;
    transition: background var(--t), color var(--t);
}
.opt-info-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Buttons */
.opt-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 20px;
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--text);
    border: none; border-radius: var(--r);
    cursor: pointer; transition: background var(--t), transform .1s;
    margin-top: 4px;
}
.opt-btn:hover { background: var(--text-2); }
.opt-btn:active { transform: scale(.98); }
.opt-btn--purple { background: var(--purple); }
.opt-btn--purple:hover { background: var(--purple-2); }
.opt-btn-arrow { font-size: 16px; transition: transform .2s; }
.opt-btn:hover .opt-btn-arrow { transform: translateX(5px); }

/* ── Error ─────────────────────────────────────────────────── */
.opt-error {
    max-width: 620px; margin: 10px auto 0;
    padding: 11px 15px;
    background: var(--red-pale);
    border: 1px solid var(--red-border);
    border-left: 3px solid var(--red);
    border-radius: var(--r);
    font-size: 13px; color: var(--red);
    transition: background var(--t), color var(--t);
}

/* ── Results ───────────────────────────────────────────────── */
.opt-results {
    max-width: 620px; margin: 24px auto 0;
    animation: opt-in .4s ease;
}
@keyframes opt-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* Grid */
.opt-results-grid { display: grid; gap: 12px; margin-bottom: 14px; }
.opt-results-grid--3 { grid-template-columns: repeat(3,1fr); }
.opt-results-grid--2 { grid-template-columns: repeat(2,1fr); }
@media(max-width:540px){
    .opt-results-grid--3,
    .opt-results-grid--2 { grid-template-columns: 1fr; }
}

/* Result cards */
.opt-rcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 22px 18px; text-align: center;
    position: relative; overflow: hidden;
    transition: all var(--t);
    box-shadow: var(--shadow-sm);
}
.opt-rcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.opt-rcard::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; }

.opt-rcard--red     { background:var(--red-pale);    border-color:var(--red-border);    } .opt-rcard--red::before    { background:var(--red); }
.opt-rcard--green   { background:var(--green-pale);  border-color:rgba(26,107,58,.18);  } .opt-rcard--green::before  { background:var(--green); }
.opt-rcard--blue    { background:var(--blue-pale);   border-color:rgba(26,58,107,.18);  } .opt-rcard--blue::before   { background:var(--blue); }
.opt-rcard--purple  { background:var(--purple-pale); border-color:var(--purple-border); } .opt-rcard--purple::before { background:var(--purple); }
.opt-rcard--teal    { background:var(--teal-pale);   border-color:rgba(13,123,123,.18); } .opt-rcard--teal::before   { background:var(--teal); }
.opt-rcard--featured{ grid-column: 1/-1; }
@media(min-width:541px){ .opt-rcard--featured{ grid-column: auto; } }

.opt-ricon { font-size: 20px; margin-bottom: 9px; line-height: 1; }
.opt-rlabel {
    font-family: var(--sans);
    font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
    transition: color var(--t);
}
.opt-rdate {
    font-family: var(--serif);
    font-size: 17px; font-weight: 700; line-height: 1.25;
    color: var(--text); margin-bottom: 5px;
    letter-spacing: -.01em;
    transition: color var(--t);
}
.opt-rdate--lg { font-size: 21px; }
.opt-rnote { font-size: 11px; color: var(--muted); font-weight: 300; transition: color var(--t); }

/* ── Calendar ──────────────────────────────────────────────── */
.opt-cal-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--rl); padding: 22px 24px; margin-bottom: 14px;
    transition: background var(--t), border-color var(--t);
    box-shadow: var(--shadow-sm);
}
.opt-cal-title {
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.opt-cal-title::before {
    content: ''; display: inline-block; width: 20px; height: 2px; background: var(--red);
}
.opt-cal { display: flex; flex-wrap: wrap; gap: 5px; }

.opt-day {
    width: 33px; height: 33px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-family: var(--sans); font-size: 12px;
    color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border);
    transition: all .12s; cursor: default; font-weight: 400;
}
.opt-day:hover { transform: scale(1.1); z-index: 1; }

.opt-day--period {
    background: rgba(155,89,232,.1); border-color: rgba(155,89,232,.25);
    color: var(--purple);
}
.opt-day--fertile {
    background: var(--green-pale); border-color: rgba(26,107,58,.25);
    color: var(--green); font-weight: 500;
}
.opt-day--ov {
    background: var(--red); border-color: var(--red);
    color: #fff; font-weight: 700;
    box-shadow: 0 2px 10px rgba(212,55,42,.4);
}
.opt-day--next {
    background: var(--blue-pale); border-color: rgba(26,58,107,.25);
    color: var(--blue);
}

.opt-legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
    transition: border-color var(--t);
}
.opt-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-family: var(--sans); }
.opt-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Progress bar (Due Date) ───────────────────────────────── */
.opt-progress-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--rl); padding: 22px 24px; margin-bottom: 14px;
    transition: background var(--t), border-color var(--t);
    box-shadow: var(--shadow-sm);
}
.opt-progress-title {
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.opt-progress-title::before {
    content: ''; display: inline-block; width: 20px; height: 2px; background: var(--purple);
}

.opt-tri-track { display: grid; grid-template-columns: 3fr 3.75fr 3.25fr; gap: 6px; margin-bottom: 12px; }
.opt-tri {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r); padding: 9px 11px;
    transition: background var(--t), border-color var(--t);
}
.opt-tri--1 { border-top: 2px solid var(--purple); }
.opt-tri--2 { border-top: 2px solid var(--green); }
.opt-tri--3 { border-top: 2px solid var(--blue); }
.opt-tri-label { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.opt-tri-range { font-size: 10px; color: var(--muted); font-weight: 300; }

.opt-progress-bar-wrap {
    position: relative; height: 10px;
    background: var(--surface-3); border-radius: 5px;
    transition: background var(--t);
}
.opt-progress-bar {
    height: 100%; border-radius: 5px;
    background: linear-gradient(to right, var(--purple), var(--blue));
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.opt-progress-marker {
    position: absolute; top: -5px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: left .6s cubic-bezier(.4,0,.2,1);
}
.opt-marker-pip {
    width: 20px; height: 20px; background: var(--surface);
    border: 2.5px solid var(--text); border-radius: 50%;
    box-shadow: var(--shadow-sm); transition: background var(--t), border-color var(--t);
}
.opt-marker-label {
    font-family: var(--sans); font-size: 10px; font-weight: 700;
    color: var(--surface); white-space: nowrap;
    background: var(--text); padding: 2px 7px; border-radius: 3px;
    transition: background var(--t), color var(--t);
}

/* ── Milestone ─────────────────────────────────────────────── */
.opt-milestone-wrap, .opt-timeline-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--rl); padding: 20px 22px; margin-bottom: 14px;
    transition: background var(--t), border-color var(--t);
    box-shadow: var(--shadow-sm);
}
.opt-milestone-title, .opt-timeline-title {
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    transition: color var(--t);
}
.opt-milestone-title::before { content:''; display:inline-block; width:20px; height:2px; background:var(--purple); }
.opt-timeline-title::before  { content:''; display:inline-block; width:20px; height:2px; background:var(--green); }
.opt-milestone-card { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.55; }

.opt-timeline { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-ms-chip {
    padding: 5px 11px; border-radius: 20px;
    font-family: var(--sans); font-size: 11px; font-weight: 400;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--muted); transition: all var(--t);
}
.opt-ms-chip--done    { background: var(--green-pale); border-color: rgba(26,107,58,.25); color: var(--green); font-weight: 500; }
.opt-ms-chip--current { background: var(--purple-pale); border-color: var(--purple-border); color: var(--purple); font-weight: 700; }

/* ── Email box ─────────────────────────────────────────────── */
.opt-email-box {
    background: var(--surface); border: 1.5px solid var(--text);
    border-radius: var(--rl); padding: 26px 30px; margin-top: 14px;
    position: relative; overflow: hidden;
    transition: background var(--t), border-color var(--t);
    box-shadow: var(--shadow-md);
}
.opt-email-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--text); transition: background var(--t);
}

.opt-email-inner { display: flex; flex-direction: column; gap: 16px; }
.opt-email-copy { display: flex; align-items: flex-start; gap: 14px; }
.opt-email-icon { font-size: 26px; opacity: .7; flex-shrink: 0; line-height: 1; }
.opt-email-title {
    font-family: var(--serif); font-size: 19px; font-weight: 700;
    color: var(--text); margin-bottom: 4px; letter-spacing: -.01em;
    transition: color var(--t);
}
.opt-email-sub { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.55; }

.opt-email-form { display: flex; gap: 8px; }

.opt-email-input {
    flex: 1; padding: 11px 14px;
    font-family: var(--sans); font-size: 15px;
    color: var(--text); background: var(--surface-2);
    border: 1.5px solid var(--border); border-radius: var(--r);
    outline: none; transition: all var(--t); min-width: 0;
}
.opt-email-input:focus {
    border-color: var(--text); background: var(--surface);
    box-shadow: 0 0 0 3px rgba(13,13,11,.08);
}
.opt-email-input:disabled { opacity: .5; cursor: not-allowed; }
.opt-email-input::placeholder { color: var(--muted-2); }

.opt-email-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 22px; font-family: var(--sans); font-size: 11px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--red);
    border: none; border-radius: var(--r);
    cursor: pointer; transition: background var(--t), transform .1s;
    white-space: nowrap; outline: none; flex-shrink: 0;
}
.opt-email-btn:hover:not(:disabled) { background: var(--red-2); }
.opt-email-btn:active:not(:disabled) { transform: scale(.97); }
.opt-email-btn:disabled { opacity: .6; cursor: not-allowed; }

.opt-spinner {
    display: inline-block; width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: opt-spin .7s linear infinite;
}
@keyframes opt-spin { to { transform: rotate(360deg); } }

.opt-email-success {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    color: var(--green); padding: 4px 0;
}
.opt-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; background: var(--green);
    color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.opt-email-err {
    font-family: var(--sans); font-size: 13px; color: var(--red);
    padding: 9px 13px; background: var(--red-pale); border-radius: var(--r);
    border: 1px solid var(--red-border); transition: background var(--t);
}
.opt-email-consent {
    font-family: var(--sans); font-size: 11px; color: var(--muted-2);
    line-height: 1.6; margin: 0; transition: color var(--t);
}

@media(max-width:460px){
    .opt-email-box { padding: 20px 18px; }
    .opt-email-form { flex-direction: column; }
    .opt-email-btn { width: 100%; justify-content: center; }
}

/* ── Disclaimer ────────────────────────────────────────────── */
.opt-disclaimer {
    max-width: 620px; margin: 18px auto 0;
    font-family: var(--sans); font-size: 12px; line-height: 1.7;
    color: var(--muted); background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-2);
    border-radius: var(--r); padding: 12px 16px;
    transition: all var(--t);
}
.opt-disclaimer strong { color: var(--text); font-weight: 600; }

/* ── Standalone ────────────────────────────────────────────── */
.opt-wrap--standalone .opt-panel { display: block !important; }

/* ── Utility ───────────────────────────────────────────────── */
[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   TEAL — Baby Name Tool
   ═══════════════════════════════════════════════════════════ */
.opt-wrap {
    --teal:          #0891B2;
    --teal-2:        #0670A0;
    --teal-pale:     #E0F7FA;
    --teal-border:   rgba(8,145,178,.18);
}
body.e-dark-mode .opt-wrap,
body.dark-mode .opt-wrap,
body.dark .opt-wrap,
html.dark .opt-wrap,
body[data-theme="dark"] .opt-wrap,
html[data-theme="dark"] .opt-wrap,
.opt-wrap[data-dm="1"] {
    --teal:          #22D3EE;
    --teal-2:        #38BDF8;
    --teal-pale:     rgba(8,145,178,.13);
    --teal-border:   rgba(34,211,238,.25);
}
@media(prefers-color-scheme:dark) {
    .opt-wrap:not([data-dm="0"]) {
        --teal:      #22D3EE;
        --teal-pale: rgba(8,145,178,.13);
        --teal-border: rgba(34,211,238,.25);
    }
}

/* ── 3-column switcher ── */
.opt-switcher { grid-template-columns: repeat(3,1fr); }
@media(max-width:500px) { .opt-switcher { grid-template-columns: 1fr; gap:5px; } }

/* ── Teal variants ── */
.opt-card--teal::before         { background: var(--teal); }
.opt-card-badge--teal           { background: var(--teal-pale); color: var(--teal); border-color: var(--teal-border); }
.opt-btn--teal                  { background: var(--teal); }
.opt-btn--teal:hover            { background: var(--teal-2); }

/* ── Baby Name Results (above filters) ── */
#opt-bn-results { display:block !important; margin-top:20px; }

/* ── Search bar ── */
.opt-bn-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.opt-bn-search-icon {
    position: absolute;
    left: 14px;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}
.opt-bn-input {
    width: 100%;
    padding: 14px 44px;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--text);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    outline: none;
    transition: all var(--t);
    appearance: none;
}
.opt-bn-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8,145,178,.12);
    background: var(--surface);
}
.opt-bn-input::placeholder { color: var(--muted-2); }
.opt-bn-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    padding: 5px;
    border-radius: 50%;
    transition: all var(--t);
    font-family: var(--sans);
    line-height: 1;
}
.opt-bn-clear:hover { color: var(--text); background: var(--surface-3); }

/* Actions */
.opt-bn-actions { display:flex; gap:10px; }

/* ── Status bar ── */
.opt-bn-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 0 12px;
    transition: color var(--t);
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.opt-bn-status-icon { font-size: 14px; }

/* ── Loading ── */
.opt-bn-loading {
    grid-column: 1/-1;
    text-align: center;
    padding: 32px;
    color: var(--muted);
    font-size: 14px;
}

/* ── Name grid ── */
.opt-bn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
    gap: 10px;
    min-height: 80px;
}
@media(max-width:380px) { .opt-bn-grid { grid-template-columns: 1fr 1fr; } }

/* ── Name card ── */
.opt-bn-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 16px 15px 13px;
    cursor: default;
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.opt-bn-card:hover {
    border-color: var(--teal);
    box-shadow: 0 4px 16px rgba(8,145,178,.12);
    transform: translateY(-2px);
}
.opt-bn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: var(--teal);
    opacity: 0;
    transition: opacity var(--t);
}
.opt-bn-card:hover::before { opacity: 1; }

.opt-bn-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 8px;
    transition: color var(--t);
}
.opt-bn-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.opt-bn-gender {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
}
.opt-bn-gender--L { color: #3B82F6; }
.opt-bn-gender--P { color: #EC4899; }
.opt-bn-gender--U { color: var(--purple); }

.opt-bn-origin-badge {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--surface-3);
    color: var(--muted);
    transition: all var(--t);
}
.opt-bn-card:hover .opt-bn-origin-badge {
    background: var(--teal-pale);
    color: var(--teal);
}

.opt-bn-meaning {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    font-weight: 300;
    transition: color var(--t);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.opt-bn-popular {
    position: absolute;
    top: 9px; right: 10px;
    font-size: 11px;
    opacity: .45;
}

/* ── Pagination ── */
.opt-bn-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 4px;
}
.opt-bn-pgbtn {
    padding: 7px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t);
}
.opt-bn-pgbtn:hover:not(:disabled) {
    border-color: var(--teal);
    color: var(--teal);
}
.opt-bn-pgbtn:disabled { opacity: .35; cursor: not-allowed; }
.opt-bn-pginfo { font-size: 12px; color: var(--muted); font-family: var(--sans); }

/* ── Filter section (below results) ── */
.opt-bn-filter-section {
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background var(--t), border-color var(--t);
}
.opt-bn-filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 2px;
}

/* Smaller label for filters inside filter section */
.opt-label--sm {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 2px;
}

/* ── Filter pills ── */
.opt-bn-pills {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.opt-bn-pills::-webkit-scrollbar { display:none; }
.opt-bn-pills--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
}
.opt-bn-pill {
    padding: 5px 13px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--surface-2);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t);
    white-space: nowrap;
    flex-shrink: 0;
}
.opt-bn-pill:hover:not(.active) {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--teal-pale);
}
.opt-bn-pill.active {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    font-weight: 600;
}

/* ── Empty state ── */
.opt-bn-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--muted);
}
.opt-bn-empty-icon  { font-size: 32px; margin-bottom: 10px; opacity: .4; }
.opt-bn-empty-title { font-family: var(--serif); font-size: 17px; color: var(--text); margin-bottom: 5px; }
.opt-bn-empty-sub   { font-size: 13px; font-weight: 300; line-height: 1.6; }