/* ================================================================
   MARRIAGE-PLANNER.CSS  —  Premium Marriage Budget Planner
   Palette: soft rose-mauve — elegant, calm, culturally warm
   ================================================================ */

/* ══════════════════════════════════════════════════════════════════
   ACCENT PALETTE
══════════════════════════════════════════════════════════════════ */
:root {
    --mp-accent:        #be185d;
    --mp-accent-2:      #e11d48;
    --mp-accent-light:  rgba(190, 24, 93, .08);
    --mp-accent-border: rgba(190, 24, 93, .20);
    --mp-glow:          rgba(225, 29, 72, .22);
    --mp-gradient:      linear-gradient(135deg, #be185d, #f43f5e);
    --mp-soft-bg:       linear-gradient(135deg, rgba(190,24,93,.05), rgba(244,63,94,.03));
    --mp-section-a:     rgba(190, 24, 93, .06);   /* Wedding Essentials */
    --mp-section-b:     rgba(234, 88, 12, .06);   /* Personal Items  */
    --mp-section-c:     rgba(37, 99, 235, .05);   /* Household Setup */
    --mp-section-d:     rgba(100, 116, 139, .06); /* Optional */
}

/* ══════════════════════════════════════════════════════════════════
   GUIDANCE QUOTE BANNER
══════════════════════════════════════════════════════════════════ */
.mp-quote-banner {
    max-width: 760px;
    margin: 0 auto 2rem;
    background: var(--mp-soft-bg);
    border: 1.5px solid var(--mp-accent-border);
    border-radius: var(--radius-xl);
    padding: 1.6rem 2rem;
    text-align: center;
}

.mp-quote-icon {
    font-size: 1.7rem;
    display: block;
    margin-bottom: .55rem;
}

.mp-quote-text {
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--text);
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 .45rem;
}

.mp-quote-source {
    font-size: .79rem;
    color: var(--mp-accent);
    font-weight: 600;
    letter-spacing: .04em;
}

/* ── Guidance tip list ── */
.mp-guidance-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .8rem;
    max-width: 760px;
    margin: 1.2rem auto 0;
    text-align: left;
}

.mp-guidance-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: var(--card-bg);
    border: 1px solid var(--mp-accent-border);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    font-size: .85rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.mp-guidance-item-icon { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

/* ══════════════════════════════════════════════════════════════════
   CATEGORY INPUT GRID  (2-column on desktop)
══════════════════════════════════════════════════════════════════ */
.mp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    max-width: 920px;
    margin: 0 auto 1.4rem;
}

@media (max-width: 640px) {
    .mp-grid { grid-template-columns: 1fr; }
}

/* full-width card spanning both columns */
.mp-card--wide {
    grid-column: 1 / -1;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   INPUT CARDS
══════════════════════════════════════════════════════════════════ */
.mp-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.7rem 1.6rem;
    position: relative;
    overflow: hidden;
}

/* coloured left-edge stripe per section */
.mp-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.mp-card--essentials { background: linear-gradient(135deg, var(--mp-section-a), var(--card-bg)); }
.mp-card--essentials::before  { background: var(--mp-gradient); }

.mp-card--personal   { background: linear-gradient(135deg, var(--mp-section-b), var(--card-bg)); }
.mp-card--personal::before    { background: linear-gradient(180deg, #ea580c, #fb923c); }

.mp-card--household  { background: linear-gradient(135deg, var(--mp-section-c), var(--card-bg)); }
.mp-card--household::before   { background: linear-gradient(180deg, #2563eb, #60a5fa); }

.mp-card--optional   { background: linear-gradient(135deg, var(--mp-section-d), var(--card-bg)); }
.mp-card--optional::before    { background: linear-gradient(180deg, #64748b, #94a3b8); }

.mp-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.3rem;
}

.mp-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.mp-card--essentials .mp-card-icon { background: var(--mp-gradient);                         box-shadow: 0 3px 8px var(--mp-glow); }
.mp-card--personal   .mp-card-icon { background: linear-gradient(135deg,#ea580c,#fb923c);    box-shadow: 0 3px 8px rgba(234,88,12,.25); }
.mp-card--household  .mp-card-icon { background: linear-gradient(135deg,#2563eb,#60a5fa);    box-shadow: 0 3px 8px rgba(37,99,235,.22); }
.mp-card--optional   .mp-card-icon { background: linear-gradient(135deg,#64748b,#94a3b8);    box-shadow: 0 3px 8px rgba(100,116,139,.22); }

.mp-card-title {
    font-size: .97rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

/* ── Fields ── */
.mp-field { margin-bottom: .95rem; }
.mp-field:last-child { margin-bottom: 0; }

.mp-label {
    display: block;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: .38rem;
}

.mp-label-sub {
    font-size: .74rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: .25rem;
}

.mp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mp-currency-prefix {
    position: absolute;
    left: .95rem;
    font-size: .89rem;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

.mp-number-input {
    width: 100%;
    padding: .76rem 1rem .76rem 2.5rem;
    font-size: .95rem;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.mp-number-input:focus {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 3.5px var(--mp-accent-light);
}

/* ══════════════════════════════════════════════════════════════════
   CALCULATE BUTTON + VALIDATION
══════════════════════════════════════════════════════════════════ */
.mp-btn-wrap {
    text-align: center;
    margin: .4rem 0 2rem;
}

.btn-calc-mp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 2.8rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: var(--mp-gradient);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 18px var(--mp-glow);
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    letter-spacing: .02em;
    min-width: 240px;
}

.btn-calc-mp:hover:not(:disabled) {
    opacity: .91;
    transform: translateY(-2px);
    box-shadow: 0 7px 24px var(--mp-glow);
}

.btn-calc-mp:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 3px 10px var(--mp-glow);
}

.btn-calc-mp:disabled { opacity: .72; cursor: not-allowed; }

.mp-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mpSpin .65s linear infinite;
    flex-shrink: 0;
}

@keyframes mpSpin { to { transform: rotate(360deg); } }

.mp-validation-msg {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(239,68,68,.07);
    border: 1.5px solid rgba(239,68,68,.22);
    color: #dc2626;
    font-size: .87rem;
    font-weight: 600;
    border-radius: var(--radius);
    padding: .55rem 1.1rem;
    margin-bottom: .9rem;
}

.mp-validation-msg::before { content: '⚠️'; flex-shrink: 0; }

.mp-validation--animate { animation: mpShake .36s ease; }

@keyframes mpShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

/* ══════════════════════════════════════════════════════════════════
   RESULT CARD
══════════════════════════════════════════════════════════════════ */
.mp-result-card {
    max-width: 920px;
    margin: 0 auto 1.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2rem 1.8rem;
}

.mp-fade-in {
    animation: mpFadeUp .38s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes mpFadeUp {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.mp-result--stale {
    opacity: .6;
    transition: opacity .2s ease;
}

/* ── Hero total ── */
.mp-result-hero {
    text-align: center;
    padding: 1.6rem 1rem;
    background: var(--mp-soft-bg);
    border: 1.5px solid var(--mp-accent-border);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}

.mp-result-hero-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--mp-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .5rem;
}

.mp-result-hero-amount {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    background: var(--mp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    display: block;
}

/* ── Smart insight badge ── */
.mp-insight {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.55;
}

.mp-insight--low {
    background: rgba(16,185,129,.09);
    border: 1.5px solid rgba(16,185,129,.22);
    color: #065f46;
}

.mp-insight--moderate {
    background: rgba(37,99,235,.07);
    border: 1.5px solid rgba(37,99,235,.18);
    color: #1e3a8a;
}

.mp-insight--high {
    background: rgba(245,158,11,.09);
    border: 1.5px solid rgba(245,158,11,.22);
    color: #92400e;
}

.mp-insight-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .08rem; }

/* ── Category breakdown table ── */
.mp-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .8rem;
    margin-bottom: 1.4rem;
}

.mp-breakdown-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
}

.mp-breakdown-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .25rem;
}

.mp-breakdown-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.mp-breakdown-value--zero { color: var(--text-muted); }

/* ── Progress bar strip ── */
.mp-budget-bar-wrap {
    margin-bottom: 1.4rem;
}

.mp-budget-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .4rem;
}

.mp-budget-bar-track {
    height: 10px;
    background: var(--border);
    border-radius: 50px;
    overflow: hidden;
}

.mp-budget-bar-fill {
    height: 100%;
    border-radius: 50px;
    transition: width .6s cubic-bezier(.22,.68,0,1.2), background .4s ease;
}

.mp-budget-bar-fill--low      { background: linear-gradient(90deg, #10b981, #34d399); }
.mp-budget-bar-fill--moderate { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.mp-budget-bar-fill--high     { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* ── Disclaimer ── */
.mp-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: var(--mp-accent-light);
    border: 1px solid var(--mp-accent-border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    font-size: .83rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin-bottom: 1.2rem;
}

.mp-disclaimer-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: .05rem; }

/* ── Reset button ── */
.btn-mp-reset {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: .5rem 1.2rem;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-mp-reset:hover {
    border-color: var(--mp-accent);
    color: var(--mp-accent);
}

/* ══════════════════════════════════════════════════════════════════
   ACTION BUTTONS  (Copy / Download)
══════════════════════════════════════════════════════════════════ */
.mp-actions-wrap {
    max-width: 920px;
    margin: 0 auto 1.8rem;
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-mp-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.6rem;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--transition);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text-soft);
}

.btn-mp-action:hover:not(:disabled) {
    border-color: var(--mp-accent);
    color: var(--mp-accent);
    box-shadow: 0 2px 10px var(--mp-glow);
}

.btn-mp-action:disabled { opacity: .45; cursor: not-allowed; }

.btn-mp-action--primary {
    background: var(--mp-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 12px var(--mp-glow);
}

.btn-mp-action--primary:hover:not(:disabled) {
    opacity: .91;
    color: #fff;
    box-shadow: 0 5px 18px var(--mp-glow);
}

.mp-copy-toast {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mp-accent);
    opacity: 0;
    transition: opacity .25s ease;
    margin-left: .4rem;
}

.mp-copy-toast.visible { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   SEO ARTICLE
══════════════════════════════════════════════════════════════════ */
.mp-seo-section {
    max-width: 920px;
    margin: 2rem auto 0;
    padding: 2rem 1.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.mp-seo-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 .6rem;
}

.mp-seo-section h2:first-child { margin-top: 0; }

.mp-seo-section p,
.mp-seo-section li {
    font-size: .93rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.mp-seo-section ul {
    padding-left: 1.3rem;
    margin: .5rem 0 1rem;
}

.mp-seo-section li { margin-bottom: .35rem; }

/* ══════════════════════════════════════════════════════════════════
   "ALSO LIKE" NAV
══════════════════════════════════════════════════════════════════ */
.mp-also-like {
    max-width: 920px;
    margin: 1.6rem auto 0;
    text-align: center;
}

.mp-also-like h3 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 1rem;
}

.mp-also-like-grid {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mp-also-like-card {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: all var(--transition);
}

.mp-also-like-card:hover {
    border-color: var(--mp-accent);
    color: var(--mp-accent);
    box-shadow: 0 2px 10px var(--mp-glow);
}