/* ============================================================
   Mobile Number Numerology Calculator
   Tarot-themed UI — tarotwithlavanya.com aesthetic
   ============================================================ */

/* ── Tokens ─────────────────────────────── */
:root {
    --mnn-teal:        #4b7878;
    --mnn-teal-dark:   #37595a;
    --mnn-gold:        #F9C74F;
    --mnn-gold-dark:   #e0a800;
    --mnn-cream:       #fcfcf4;
    --mnn-cream-alt:   #f5f0e6;
    --mnn-purple:      #3a1d6e;
    --mnn-purple-soft: #5c3d99;
    --mnn-rose:        #d4a5a5;
    --mnn-rose-light:  #e8cece;
    --mnn-text:        #2c2c2c;
    --mnn-text-muted:  #6b6b6b;
    --mnn-white:       #ffffff;
    --mnn-green:       #3a9e6e;
    --mnn-yellow:      #d4a017;
    --mnn-red:         #c0392b;
    --mnn-radius:      14px;
    --mnn-radius-sm:   8px;
    --mnn-shadow:      0 8px 32px rgba(75, 120, 120, .12);
    --mnn-shadow-lg:   0 16px 48px rgba(58, 29, 110, .10);
    --mnn-glass-bg:    rgba(252, 252, 244, .72);
    --mnn-glass-blur:  16px;
    --mnn-font:        "Georgia", "Palatino Linotype", "Book Antiqua", serif;
    --mnn-font-sans:   "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ── Accessibility helper ────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Wrapper ────────────────────────────── */
.mnn-wrap {
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: var(--mnn-font);
    color: var(--mnn-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.mnn-wrap *, .mnn-wrap *::before, .mnn-wrap *::after {
    box-sizing: border-box;
}

/* ── Hero / Header ──────────────────────── */
.mnn-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    position: relative;
}
.mnn-celestial-ring {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--mnn-teal);
    animation: mnn-spin 90s linear infinite;
}
.mnn-mandala { width: 220px; height: 220px; }
@keyframes mnn-spin { to { transform: rotate(360deg); } }

.mnn-title {
    font-family: var(--mnn-font);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    color: var(--mnn-teal-dark);
    margin: 0 0 .35rem;
    position: relative;
    letter-spacing: .02em;
}
.mnn-subtitle {
    font-family: var(--mnn-font-sans);
    font-size: .95rem;
    color: var(--mnn-text-muted);
    margin: 0;
    position: relative;
}

/* ── Form ────────────────────────────────── */
.mnn-form {
    background: var(--mnn-glass-bg);
    backdrop-filter: blur(var(--mnn-glass-blur));
    -webkit-backdrop-filter: blur(var(--mnn-glass-blur));
    border: 1px solid rgba(75, 120, 120, .15);
    border-radius: var(--mnn-radius);
    padding: 2rem 1.75rem;
    box-shadow: var(--mnn-shadow);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.mnn-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--mnn-teal-dark);
    margin-bottom: .4rem;
    letter-spacing: .03em;
}
.mnn-req { color: var(--mnn-gold-dark); }
.mnn-opt { font-weight: 400; font-size: .8rem; color: var(--mnn-text-muted); }
.mnn-hint {
    display: block;
    font-family: var(--mnn-font-sans);
    font-size: .75rem;
    color: var(--mnn-text-muted);
    margin-top: .3rem;
}

/* Input row (country code + number) */
.mnn-input-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.mnn-cc-wrap { flex: 0 0 auto; }
.mnn-cc-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--mnn-font-sans);
    font-size: .9rem;
    padding: .7rem .7rem .7rem .6rem;
    border: 1.5px solid rgba(75, 120, 120, .25);
    border-radius: var(--mnn-radius-sm);
    background: var(--mnn-cream);
    color: var(--mnn-text);
    cursor: pointer;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b7878'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 1.8rem;
}
.mnn-cc-select:focus {
    outline: none;
    border-color: var(--mnn-gold);
    box-shadow: 0 0 0 3px rgba(249, 199, 79, .25);
}

/* Text inputs */
.mnn-input {
    width: 100%;
    font-family: var(--mnn-font-sans);
    font-size: 1rem;
    padding: .7rem 1rem;
    border: 1.5px solid rgba(75, 120, 120, .25);
    border-radius: var(--mnn-radius-sm);
    background: var(--mnn-cream);
    color: var(--mnn-text);
    transition: border-color .25s, box-shadow .25s;
}
.mnn-input::placeholder { color: #b0aaaa; }
.mnn-input:focus {
    outline: none;
    border-color: var(--mnn-gold);
    box-shadow: 0 0 0 3px rgba(249, 199, 79, .25), inset 0 0 8px rgba(249, 199, 79, .08);
}
.mnn-input--tel {
    flex: 1 1 0;
    letter-spacing: .22em;
    font-size: 1.15rem;
    font-weight: 600;
}

/* DOB row */
.mnn-dob-row {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.mnn-dob-part { flex: 1; }
.mnn-dob-part--year { flex: 1.6; }
.mnn-dob-sep {
    font-size: 1.1rem;
    color: var(--mnn-text-muted);
    flex: 0 0 auto;
    padding: 0 .15rem;
}
.mnn-input--dob {
    text-align: center;
    letter-spacing: .15em;
    font-weight: 600;
}

/* Error */
.mnn-error {
    font-family: var(--mnn-font-sans);
    font-size: .82rem;
    color: var(--mnn-red);
    min-height: 1.2em;
    margin-top: .2rem;
}

/* ── Buttons ────────────────────────────── */
.mnn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--mnn-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--mnn-teal-dark);
    background: linear-gradient(135deg, var(--mnn-gold) 0%, var(--mnn-gold-dark) 100%);
    border: none;
    border-radius: 50px;
    padding: .85rem 2.2rem;
    cursor: pointer;
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 4px 18px rgba(249, 199, 79, .35);
    width: 100%;
}
.mnn-btn:hover, .mnn-btn:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 6px 26px rgba(249, 199, 79, .5);
}
.mnn-btn:active { transform: scale(.98); }
.mnn-btn-star { font-size: 1.15em; }

.mnn-btn--cta {
    width: auto;
    font-size: .95rem;
    padding: .75rem 1.8rem;
    text-decoration: none;
}

.mnn-reset-btn {
    display: block;
    margin: 1.5rem auto 0;
    font-family: var(--mnn-font-sans);
    font-size: .88rem;
    color: var(--mnn-teal);
    background: transparent;
    border: 1.5px solid var(--mnn-teal);
    border-radius: 50px;
    padding: .55rem 1.6rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.mnn-reset-btn:hover {
    background: var(--mnn-teal);
    color: var(--mnn-cream);
}

/* ── Results ─────────────────────────────── */
.mnn-results {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mnn-results[hidden] { display: none; }

/* Fade-in animation helper */
.mnn-fade { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.mnn-fade.mnn-show { opacity: 1; transform: translateY(0); }

/* ── Destiny Number Hero ─────────────────── */
.mnn-result-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.8rem;
    position: relative;
}
.mnn-destiny-ring {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--mnn-gold);
    animation: mnn-spin 60s linear infinite reverse;
}
.mnn-destiny-svg { width: 150px; height: 150px; }

.mnn-destiny-number {
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--mnn-teal-dark);
    line-height: 1;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 12px rgba(75, 120, 120, .12);
}
.mnn-destiny-label {
    font-size: .85rem;
    font-family: var(--mnn-font-sans);
    color: var(--mnn-text-muted);
    margin: .5rem 0 0;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.mnn-total-sum {
    font-family: var(--mnn-font-sans);
    font-size: .82rem;
    color: var(--mnn-text-muted);
    margin: .25rem 0 0;
}

/* ── Card base ───────────────────────────── */
.mnn-card {
    background: var(--mnn-glass-bg);
    backdrop-filter: blur(var(--mnn-glass-blur));
    -webkit-backdrop-filter: blur(var(--mnn-glass-blur));
    border: 1px solid rgba(75, 120, 120, .12);
    border-radius: var(--mnn-radius);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--mnn-shadow);
}
.mnn-card-title {
    font-family: var(--mnn-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mnn-teal-dark);
    margin: 0 0 .8rem;
    letter-spacing: .02em;
}

/* ── Lucky Score ─────────────────────────── */
.mnn-card--score { text-align: center; }
.mnn-score-stars {
    display: flex;
    justify-content: center;
    gap: .3rem;
    font-size: 1.5rem;
    margin-bottom: .3rem;
}
.mnn-star { color: #ddd; transition: color .3s; }
.mnn-star--filled { color: var(--mnn-gold); text-shadow: 0 0 6px rgba(249, 199, 79, .5); }
.mnn-star--half { 
    background: linear-gradient(90deg, var(--mnn-gold) 50%, #ddd 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mnn-score-label {
    font-family: var(--mnn-font-sans);
    font-size: .85rem;
    color: var(--mnn-text-muted);
    margin: 0;
}

/* ── Digit Grid ──────────────────────────── */
.mnn-digit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
}
.mnn-digit-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: .5rem .4rem .4rem;
    border-radius: var(--mnn-radius-sm);
    background: var(--mnn-cream-alt);
    border: 1.5px solid rgba(75, 120, 120, .12);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mnn-digit-pill--lucky {
    border-color: var(--mnn-gold);
    box-shadow: 0 0 10px rgba(249, 199, 79, .25);
}
.mnn-digit-pill--challenge {
    border-color: var(--mnn-rose);
}
.mnn-digit-pos {
    font-family: var(--mnn-font-sans);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mnn-text-muted);
}
.mnn-digit-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mnn-teal-dark);
    line-height: 1.2;
}

/* ── Halves ───────────────────────────────── */
.mnn-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mnn-card--half { text-align: center; position: relative; }
.mnn-half-arrow {
    font-size: 1.4rem;
    color: var(--mnn-gold);
    display: block;
    margin-bottom: .15rem;
}
.mnn-half-desc {
    font-family: var(--mnn-font-sans);
    font-size: .78rem;
    color: var(--mnn-text-muted);
    margin: 0 0 .5rem;
}
.mnn-half-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mnn-teal-dark);
}
.mnn-card--incoming { border-left: 3px solid var(--mnn-purple-soft); }
.mnn-card--outgoing { border-right: 3px solid var(--mnn-gold); }

/* ── Digit Frequency ─────────────────────── */
.mnn-freq-chart {
    display: flex;
    gap: .4rem;
    align-items: flex-end;
    justify-content: center;
    height: 80px;
    margin-bottom: .8rem;
    padding: 0 .5rem;
}
.mnn-freq-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 46px;
    gap: .2rem;
}
.mnn-freq-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height .5s ease;
    min-height: 2px;
}
.mnn-freq-fill--dominant { background: var(--mnn-gold); box-shadow: 0 0 8px rgba(249, 199, 79, .4); }
.mnn-freq-fill--normal { background: var(--mnn-teal); opacity: .55; }
.mnn-freq-fill--missing { background: #e0ddd5; }
.mnn-freq-digit {
    font-family: var(--mnn-font-sans);
    font-size: .7rem;
    color: var(--mnn-text-muted);
    font-weight: 600;
}
.mnn-freq-count {
    font-family: var(--mnn-font-sans);
    font-size: .65rem;
    color: var(--mnn-text-muted);
}

.mnn-freq-insights {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.mnn-freq-tag {
    font-family: var(--mnn-font-sans);
    font-size: .82rem;
    padding: .45rem .8rem;
    border-radius: var(--mnn-radius-sm);
    line-height: 1.4;
}
.mnn-freq-tag--dominant {
    background: rgba(249, 199, 79, .12);
    border-left: 3px solid var(--mnn-gold);
    color: var(--mnn-text);
}
.mnn-freq-tag--missing {
    background: rgba(212, 165, 165, .12);
    border-left: 3px solid var(--mnn-rose);
    color: var(--mnn-text);
}

/* ── Lucky Attributes ────────────────────── */
.mnn-attrs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.mnn-attr-item {
    text-align: center;
    padding: .6rem .4rem;
    border-radius: var(--mnn-radius-sm);
    background: var(--mnn-cream-alt);
}
.mnn-attr-icon {
    font-size: 1.3rem;
    display: block;
    margin-bottom: .15rem;
}
.mnn-attr-label {
    font-family: var(--mnn-font-sans);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mnn-text-muted);
    display: block;
}
.mnn-attr-value {
    font-family: var(--mnn-font);
    font-size: .88rem;
    font-weight: 600;
    color: var(--mnn-teal-dark);
    display: block;
    margin-top: .1rem;
}

/* ── Compatibility ───────────────────────── */
.mnn-compat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: .7rem;
}
.mnn-compat-num { text-align: center; }
.mnn-compat-val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--mnn-teal-dark);
    display: block;
    line-height: 1;
}
.mnn-compat-lbl {
    font-family: var(--mnn-font-sans);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mnn-text-muted);
}
.mnn-compat-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .85rem;
    border-radius: 50px;
    font-family: var(--mnn-font-sans);
    font-size: .82rem;
    font-weight: 600;
}
.mnn-compat-badge--harmonious { background: rgba(58, 158, 110, .12); color: var(--mnn-green); border: 1px solid var(--mnn-green); }
.mnn-compat-badge--neutral    { background: rgba(212, 160, 23, .12); color: var(--mnn-yellow); border: 1px solid var(--mnn-yellow); }
.mnn-compat-badge--misaligned { background: rgba(192, 57, 43, .10); color: var(--mnn-red); border: 1px solid var(--mnn-red); }

.mnn-compat-text {
    font-family: var(--mnn-font-sans);
    font-size: .85rem;
    color: var(--mnn-text);
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* ── Interpretation ──────────────────────── */
.mnn-interp-sections {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.mnn-interp-block {
    padding: .6rem 0;
    border-bottom: 1px solid rgba(75, 120, 120, .08);
}
.mnn-interp-block:last-child { border-bottom: none; }
.mnn-interp-label {
    font-family: var(--mnn-font-sans);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mnn-teal);
    margin: 0 0 .25rem;
    font-weight: 600;
}
.mnn-interp-text {
    font-size: .9rem;
    margin: 0;
    color: var(--mnn-text);
    line-height: 1.55;
}

/* ── CTA ─────────────────────────────────── */
.mnn-cta {
    text-align: center;
    padding: 2rem 1.2rem;
    background: linear-gradient(135deg, rgba(58, 29, 110, .05) 0%, rgba(75, 120, 120, .06) 100%);
    border-radius: var(--mnn-radius);
    border: 1px dashed rgba(75, 120, 120, .2);
}
.mnn-cta-text {
    font-family: var(--mnn-font);
    font-size: 1rem;
    color: var(--mnn-teal-dark);
    margin: 0 0 1rem;
}

/* ── Responsive ──────────────────────────── */

/* Tablet & below */
@media (max-width: 768px) {
    .mnn-wrap { padding: 0 .75rem; }
    .mnn-form { padding: 1.4rem 1.2rem; }
    .mnn-attrs-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}

/* Mobile */
@media (max-width: 480px) {
    .mnn-hero { padding: 2rem .5rem 1rem; }
    .mnn-mandala { width: 160px; height: 160px; }
    .mnn-title { font-size: 1.4rem; }
    .mnn-form { padding: 1.2rem 1rem; gap: 1.2rem; }
    .mnn-input-row { flex-direction: column; gap: .5rem; }
    .mnn-cc-select { width: 100%; }
    .mnn-halves { grid-template-columns: 1fr; }
    .mnn-digit-grid { gap: .4rem; }
    .mnn-digit-pill { min-width: 42px; }
    .mnn-attrs-grid { grid-template-columns: repeat(3, 1fr); }
    .mnn-compat-row { gap: .7rem; }
    .mnn-compat-val { font-size: 1.4rem; }
    .mnn-destiny-number { font-size: 2.8rem; }
    .mnn-btn { font-size: .95rem; padding: .75rem 1.6rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .mnn-celestial-ring, .mnn-destiny-ring { animation: none; }
    .mnn-fade { transition: none; }
    .mnn-btn { transition: none; }
}