/* Astroprasun Success Number Calculator — Light Cream & Burgundy v1.3 */
/* Typography tuned to match Lucky Crystal Analyzer clarity & scale */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600;700&display=swap');

:root {
    --cream-bg:       #F5EDD8;
    --cream-card:     #FDFAF3;
    --cream-border:   #E8D9B8;
    --cream-input:    #FFFFFF;
    --burgundy:       #8B1A1A;
    --burgundy-dark:  #6B1010;
    --burgundy-light: #A52020;
    --burgundy-soft:  rgba(139,26,26,0.07);
    --text-primary:   #2C1810;
    --text-secondary: #6B3A2A;
    --text-muted:     #A07858;
    --text-hint:      #C4A882;
    --shadow-card:    rgba(44,24,16,0.09);
}

* { box-sizing: border-box; }

#astroprasun-calculator-wrap {
    font-family: 'Cormorant Garamond', Georgia, serif;
    background: var(--cream-bg);
    color: var(--text-primary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cream-border);
    max-width: 900px;
    margin: 0 auto;
}

/* ── HERO ─────────────────────────────────────────── */
.ap-calc-hero {
    position: relative;
    background: var(--cream-bg);
    padding: 56px 48px 44px;
    text-align: center;
    border-bottom: 1px solid var(--cream-border);
    overflow: hidden;
}

.ap-stars, .ap-mandala { display: none; }

.ap-calc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(139,26,26,0.05) 0%, transparent 65%);
    pointer-events: none;
}

.ap-badge {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--burgundy);
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid var(--cream-border);
    padding: 6px 20px;
    border-radius: 100px;
    background: var(--cream-card);
}

/* Matches Crystal Analyzer title scale exactly */
.ap-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    color: var(--burgundy);
    margin: 0 0 18px 0;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ap-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--text-secondary);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.8;
    font-style: italic;
    font-weight: 300;
}

/* ── FORM ─────────────────────────────────────────── */
.ap-form-section {
    padding: 44px 48px;
    background: var(--cream-bg);
}

.ap-form { max-width: 780px; margin: 0 auto; }

.ap-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-bottom: 30px;
}

@media (max-width: 640px) {
    .ap-form-grid { grid-template-columns: 1fr; }
    .ap-calc-hero { padding: 38px 24px 34px; }
    .ap-form-section { padding: 30px 20px; }
    .ap-results { padding: 30px 20px; }
}

.ap-field-group { display: flex; flex-direction: column; gap: 9px; }

.ap-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;              /* larger, matches Crystal Analyzer label size */
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-label-icon { display: none; }

.ap-label-hint {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

.ap-input {
    background: var(--cream-input);
    border: 1px solid var(--cream-border);
    border-radius: 6px;
    padding: 14px 18px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;              /* slightly larger input text */
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    -webkit-appearance: none;
}

.ap-input:focus {
    border-color: var(--burgundy-light);
    box-shadow: 0 0 0 3px rgba(139,26,26,0.1);
}

.ap-input::placeholder { color: var(--text-hint); font-style: italic; }

.ap-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 0.4;
}

.ap-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    border: none;
    border-radius: 6px;
    padding: 18px 40px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FDF6E3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(139,26,26,0.22);
}

.ap-submit-btn:hover {
    background: linear-gradient(135deg, var(--burgundy-light) 0%, var(--burgundy) 100%);
    box-shadow: 0 6px 20px rgba(139,26,26,0.32);
    transform: translateY(-1px);
}

.ap-submit-btn:active { transform: translateY(0); }
.ap-btn-icon { font-size: 18px; animation: none; }

/* ── LOADING ──────────────────────────────────────── */
.ap-loading {
    text-align: center;
    padding: 64px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 17px;
}

.ap-loader-orb {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--cream-border);
    border-top-color: var(--burgundy);
    animation: ap-spin 0.9s linear infinite;
    margin: 0 auto 18px;
}

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

/* ── RESULTS ──────────────────────────────────────── */
.ap-results { padding: 44px 48px; background: var(--cream-bg); }

.ap-results-header { text-align: center; margin-bottom: 40px; }

/* Name pill — exactly like Crystal Analyzer "✦ PRASUN DEY" badge */
.ap-results-name {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--burgundy);
    text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid var(--cream-border);
    padding: 5px 20px;
    border-radius: 100px;
    background: var(--cream-card);
}

.ap-results-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(16px, 2.2vw, 20px);
    color: var(--text-secondary);
    font-style: italic;
    font-weight: 300;
    display: block;
}

/* ── TRINITY CARDS — matching Crystal Analyzer number card size ── */
.ap-trinity-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

@media (max-width: 600px) { .ap-trinity-row { grid-template-columns: 1fr; } }

.ap-trinity-card {
    background: var(--cream-card);
    border: 1px solid var(--cream-border);
    border-radius: 10px;
    padding: 32px 16px 28px;
    text-align: center;
    box-shadow: 0 2px 14px var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ap-trinity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px var(--shadow-card);
}

/* Label above number — "MULANK", "LUCK NUMBER" etc */
.ap-trinity-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;              /* clearer, matches Crystal Analyzer label size */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-weight: 500;
}

/* The big number */
.ap-trinity-number {
    font-family: 'Cinzel', serif;
    font-size: 80px;              /* matches Crystal Analyzer's big numbers */
    font-weight: 700;
    color: var(--burgundy);
    line-height: 1;
    margin-bottom: 14px;
}

/* Archetype title below number */
.ap-trinity-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;              /* clearly readable italic */
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.5;
}

.ap-trinity-element {
    font-size: 14px;
    margin-top: 8px;
    color: var(--text-muted);
    font-family: 'Cormorant Garamond', serif;
}

/* ── LOTTERY BANNER ──────────────────────────────── */
.ap-lottery-banner {
    background: var(--cream-card);
    border: 1px solid var(--cream-border);
    border-radius: 10px;
    padding: 34px 28px;
    text-align: center;
    box-shadow: 0 2px 14px var(--shadow-card);
}

.ap-lottery-title {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 500;
}

.ap-lottery-numbers {
    font-family: 'Cinzel', serif;
    font-size: clamp(38px, 6vw, 58px);
    color: var(--burgundy);
    letter-spacing: 16px;
    margin-bottom: 16px;
    font-weight: 700;
}

.ap-lottery-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;              /* readable body text */
    color: var(--text-secondary);
    font-style: italic;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 300;
}

/* ── DIVIDER ─────────────────────────────────────── */
.ap-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 40px 0 30px;
    color: var(--text-muted);
    font-family: 'Cinzel', serif;
    font-size: 10px;              /* slightly larger divider text */
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.ap-divider::before,
.ap-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cream-border);
}

/* ── DETAIL SECTIONS ─────────────────────────────── */
.ap-detail-section {
    background: var(--cream-card);
    border: 1px solid var(--cream-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 14px var(--shadow-card);
    transition: box-shadow 0.2s;
}

.ap-detail-section:hover { box-shadow: 0 6px 24px var(--shadow-card); }

.ap-detail-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 26px 30px;
    background: linear-gradient(135deg, rgba(139,26,26,0.04) 0%, transparent 100%);
    border-bottom: 1px solid var(--cream-border);
}

.ap-detail-num-badge {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--cream-bg);
    border: 1.5px solid var(--cream-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--burgundy);
    flex-shrink: 0;
}

.ap-detail-meta { display: flex; flex-direction: column; gap: 4px; }

/* "MULANK — CORE NUMBER" type label */
.ap-detail-type-label {
    font-family: 'Cinzel', serif;
    font-size: 9.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

/* "The Pioneer — Born to Lead" */
.ap-detail-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(14px, 1.8vw, 18px);
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}

/* "Sun ☀️" planet line */
.ap-detail-element {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    color: var(--text-muted);
    font-style: italic;
}

.ap-detail-body { padding: 26px 30px; }

/* Keyword pills */
.ap-keywords-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.ap-keyword-pill {
    background: var(--burgundy-soft);
    border: 1px solid rgba(139,26,26,0.14);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: 13px;
    color: var(--burgundy);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.3px;
}

/* Main description paragraph */
.ap-desc-text {
    font-size: 16.5px;            /* clear, readable body */
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 22px;
    font-style: italic;
    font-weight: 300;
}

.ap-insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .ap-insights-grid { grid-template-columns: 1fr; }
    .ap-detail-header { grid-template-columns: 1fr; }
    .ap-detail-body { padding: 18px 20px; }
    .ap-detail-header { padding: 20px; }
}

.ap-insight-box {
    background: var(--cream-bg);
    border: 1px solid var(--cream-border);
    border-radius: 6px;
    padding: 15px 17px;
}

.ap-insight-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;               /* cleaner small label */
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
    font-weight: 500;
}

.ap-insight-text {
    font-size: 15px;              /* comfortable reading size */
    color: var(--text-primary);
    line-height: 1.65;
    font-family: 'Cormorant Garamond', serif;
}

.ap-insight-box.ap-power     { border-left: 2px solid var(--burgundy); }
.ap-insight-box.ap-shadow    { border-left: 2px solid #9A7200; }
.ap-insight-box.ap-success   { border-left: 2px solid #3A6B4A; }
.ap-insight-box.ap-caution   { border-left: 2px solid #8B6010; }
.ap-insight-box.ap-power-days{ border-left: 2px solid var(--burgundy-light); }

/* Reset button */
.ap-reset-btn {
    margin: 36px auto 0;
    background: transparent;
    border: 1px solid var(--cream-border);
    border-radius: 6px;
    padding: 12px 32px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    display: block;
    transition: all 0.2s;
}

.ap-reset-btn:hover { border-color: var(--burgundy); color: var(--burgundy); }

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes ap-fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ap-animate {
    opacity: 0;
    animation: ap-fadeUp 0.5s ease forwards;
}

.ap-animate:nth-child(1) { animation-delay: 0.05s; }
.ap-animate:nth-child(2) { animation-delay: 0.15s; }
.ap-animate:nth-child(3) { animation-delay: 0.25s; }
.ap-animate:nth-child(4) { animation-delay: 0.35s; }
.ap-animate:nth-child(5) { animation-delay: 0.45s; }
.ap-animate:nth-child(6) { animation-delay: 0.55s; }
.ap-animate:nth-child(7) { animation-delay: 0.65s; }