/* =========================================================
   CALQUBE INDIA
   MARRIAGE EXPENSE CALCULATOR
   PREMIUM WEDDING PLANNER UI
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700;800&display=swap');


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
    --wine-950: #240510;
    --wine-900: #2d0616;
    --wine-800: #3a091b;
    --wine-700: #4d0d27;
    --wine-600: #621537;
    --wine-500: #7a2448;

    --gold-900: #8d6429;
    --gold-800: #a47735;
    --gold-700: #bd914d;
    --gold-600: #d0ab67;
    --gold-500: #e3c88c;
    --gold-300: #f2dfb5;

    --cream: #fffaf5;
    --cream-dark: #f7eee4;
    --cream-soft: #fcf6ef;

    --white: #ffffff;

    --text: #2f2930;
    --text-soft: #716a73;
    --text-muted: #938b94;

    --border: #e6ddd5;
    --border-soft: #efe8e1;

    --success: #4b946c;

    --shadow-sm:
        0 7px 22px rgba(54, 22, 34, 0.045);

    --shadow-md:
        0 16px 40px rgba(54, 22, 34, 0.075);

    --shadow-lg:
        0 28px 65px rgba(44, 4, 19, 0.20);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #fffefd 0%,
            #fcf7f0 100%
        );

    color: var(--text);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.marriage-container {
    width:
        min(1180px, calc(100% - 48px));

    margin:
        0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.marriage-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(255,255,255,0.95);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid var(--border-soft);
}

.header-inner {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   LOGO
========================================================= */

.marriage-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.marriage-logo-box {
    position: relative;

    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        rgba(224,193,133,0.30);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--wine-800),
            var(--wine-600)
        );

    color: var(--gold-300);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    font-weight: 700;

    box-shadow:
        0 7px 20px
        rgba(56,9,27,0.15);

    overflow: hidden;
}

.marriage-logo-box::after {
    content: "";

    position: absolute;

    width: 55px;
    height: 2px;

    top: 18px;
    left: -70px;

    background:
        rgba(255,255,255,0.35);

    transform: rotate(-35deg);

    animation:
        logoSweep
        5s
        ease-in-out
        infinite;
}

@keyframes logoSweep {
    0%,
    68% {
        left: -70px;
    }

    86%,
    100% {
        left: 60px;
    }
}

.marriage-logo strong {
    display: block;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    color:
        #322b31;

    font-size:
        21px;

    line-height:
        0.9;

    font-weight:
        700;

    letter-spacing:
        0.015em;
}

.marriage-logo span {
    display: block;

    margin-top: 4px;

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.06em;
}

.back-home {
    min-height: 35px;

    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background:
        white;

    color:
        #625b64;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        .22s ease;
}

.back-home:hover {
    color:
        var(--wine-700);

    border-color:
        var(--gold-600);

    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   HERO
========================================================= */

.marriage-hero {
    position: relative;

    min-height: -25px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #260610;
}


/* =========================================================
   DYNAMIC WEDDING HERO IMAGE
========================================================= */

.hero-photo {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-position: center 15%;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;

    transition: opacity .7s ease-in-out;

    will-change: opacity;
}

.hero-photo-a {
    background-image: url("./assets/Wedding-hero.jpg");
    opacity: 1;
}

.hero-photo-b {
    background-image: url("./assets/Wedding-hero.jpg");
    opacity: 0;
}


.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(34,4,15,0.96) 0%,
            rgba(46,6,20,0.86) 28%,
            rgba(56,9,25,0.62) 52%,
            rgba(61,11,28,0.30) 74%,
            rgba(61,11,28,0.08) 100%
        );
}


/* soft gold atmosphere */

.marriage-hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -210px;
    top: -240px;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232,204,150,0.17),
            transparent 70%
        );

    animation:
        heroGlow
        8s
        ease-in-out
        infinite alternate;
}

@keyframes heroGlow {
    from {
        transform:
            translate(0,0)
            scale(.92);
    }

    to {
        transform:
            translate(-20px,18px)
            scale(1.08);
    }
}


/* curved lower edge */

.marriage-hero::after {
    content: "";

    position: absolute;

    left: -3%;
    right: -3%;
    bottom: -48px;

    height: 92px;

    z-index: 5;

    border-radius:
        50% 50% 0 0;

    background:
        var(--cream);

    border-top:
        3px solid
        rgba(204,167,96,0.90);
}


/* =========================================================
   HERO INNER
========================================================= */

.hero-inner {
    position: relative;
    z-index: 6;

    padding:
        88px 0
        105px;

    animation:
        heroIn
        .8s
        ease-out
        both;
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform:
            translateY(18px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 29px;

    padding: 0 11px;

    border:
        1px solid
        rgba(233,211,166,0.40);

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.075);

    color:
        #eddcac;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .10em;
}

.hero-inner h1 {
    max-width: 790px;

    margin:
        20px 0 14px;

    color:
        #fffdfb;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(52px,6vw,78px);

    line-height:
        .93;

    font-weight:
        600;

    letter-spacing:
        -.035em;
}

.hero-inner h1 span {
    background:
        linear-gradient(
            90deg,
            #f1deae,
            #c79c57,
            #f1deae
        );

    background-size:
        220% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        goldText
        6s
        linear
        infinite;
}

@keyframes goldText {
    0% {
        background-position: 220% center;
    }

    100% {
        background-position: -220% center;
    }
}

.hero-inner p {
    max-width: 610px;

    margin: 0;

    color:
        rgba(255,255,255,0.83);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.hero-button {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 45px;

    margin-top: 23px;

    padding: 0 17px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #f0dda9,
            #d0aa61
        );

    color:
        #381021;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 13px 31px
        rgba(0,0,0,0.20);

    transition:
        .22s ease;
}

.hero-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 19px 40px
        rgba(0,0,0,0.25);
}

.hero-button::after {
    content: "";

    position:
        absolute;

    top: -30%;
    left: -90px;

    width: 65px;
    height: 160%;

    transform:
        rotate(20deg);

    background:
        rgba(255,255,255,0.28);

    animation:
        buttonShine
        4.5s
        ease-in-out
        infinite;
}

@keyframes buttonShine {
    0%,
    55% {
        left: -90px;
    }

    75%,
    100% {
        left: 125%;
    }
}


/* =========================================================
   HERO BENEFITS
========================================================= */

.hero-benefits {
    display: flex;
    align-items: center;

    gap: 26px;

    margin-top: 25px;
}

.hero-benefit {
    display: flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,0.78);

    font-size:
        10px;

    font-weight:
        600;
}

.benefit-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(229,207,160,0.38);

    border-radius:
        50%;

    color:
        #e5cb91;

    font-size:
        13px;

    background:
        rgba(255,255,255,0.06);
}


/* =========================================================
   FLOATING SYMBOLS
========================================================= */

.wedding-symbol {
    position: absolute;
    z-index: 9;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(232,209,167,0.27);

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.07);

    backdrop-filter:
        blur(8px);

    font-size:
        16px;

    animation:
        floatingSymbol
        5.5s
        ease-in-out
        infinite;
}

.symbol-ring {
    right: 13%;
    top: 17%;
}

.symbol-flower {
    right: 29%;
    top: 51%;

    animation-delay:
        -1.2s;
}

.symbol-heart {
    right: 10%;
    bottom: 18%;

    animation-delay:
        -2.5s;
}

.symbol-sparkle {
    right: 38%;
    top: 27%;

    animation-delay:
        -3.7s;
}

@keyframes floatingSymbol {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(4deg);
    }
}


/* =========================================================
   INTRO
========================================================= */

.marriage-intro {
    position: relative;
    z-index: 30;

    margin-top: -10px;

    padding-bottom: 15px;
}

.intro-card {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        var(--shadow-md);
}

.intro-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #e6dbc9;

    border-radius:
        10px;

    background:
        #fff8e8;

    font-size:
        16px;
}

.intro-card h3 {
    margin: 0 0 3px;

    color:
        #3b3138;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.1;

    font-weight:
        700;
}

.intro-card p {
    margin: 0;

    color:
        var(--text-soft);

    font-size:
        10px;

    line-height:
        1.55;
}


/* =========================================================
   CALCULATOR AREA
========================================================= */

#marriage-calculator {
    padding:
        20px 0 30px;
}


/* IMPORTANT:
   Proper two-column desktop layout
*/

.calculator-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.58fr)
        minmax(345px, .90fr);

    gap:
        22px;

    align-items:
        start;
}


/* =========================================================
   LEFT INPUT PANEL
========================================================= */

.marriage-input-card {
    min-width: 0;

    padding:
        27px;

    border:
        1px solid
        var(--border);

    border-radius:
        19px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   EACH CALCULATOR SECTION
========================================================= */

.calculator-section {
    position: relative;

    padding-bottom: 21px;

    margin-bottom: 21px;

    border-bottom:
        1px solid
        var(--border-light);
}

.calculator-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}


/* =========================================================
   SECTION TITLE ROW
========================================================= */

.reference-section-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
}

.reference-number {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #c9a15c;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff7e4,
            #f4dfae
        );

    color:
        #9b6f2f;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        inset 0 0 0 3px
        rgba(207,171,99,0.10);
}


/* title */

.section-title {
    margin: 0;

    color:
        var(--wine-800);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        700;

    white-space:
        nowrap;
}


/* little gold line */

.section-rule {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 7px;
}

.section-rule::before,
.section-rule::after {
    content: "";

    width: 34px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c6a05e
        );
}

.section-rule::after {
    transform:
        rotate(180deg);
}

.section-rule span {
    color:
        var(--gold-700);

    font-size:
        9px;

    line-height:
        1;
}


/* =========================================================
   SECTION 1 INPUT BOX
========================================================= */

.top-input-box {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,.82fr)
        minmax(180px,1.05fr);

    gap:
        13px;

    padding:
        13px;

    border:
        1px solid
        #ebe0d7;

    border-radius:
        12px;

    background:
        #fffdfa;
}


/* =========================================================
   FIELDS
========================================================= */

.field-group {
    min-width:
        0;
}

.field-label {
    min-height:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        6px;

    color:
        #564d55;

    font-size:
        10px;

    font-weight:
        700;
}

.field-label > span {
    font-size:
        12px;

    line-height:
        1;
}

.field-value {
    margin-left:
        auto;

    color:
        var(--wine-500);

    font-size:
        11px;

    font-weight:
        800;
}


/* =========================================================
   INPUTS
========================================================= */

input[type="number"],
select {
    width:
        100%;

    height:
        40px;

    min-height:
        40px;

    padding:
        0 10px;

    border:
        1px solid
        #ded6ce;

    border-radius:
        8px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #3a343c;

    font-size:
        10px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

input[type="number"]:hover,
select:hover {
    border-color:
        #ccb27c;
}

input[type="number"]:focus,
select:focus {
    border-color:
        var(--gold-700);

    box-shadow:
        0 0 0 3px
        rgba(189,145,77,.09);
}


/* =========================================================
   GUEST SLIDER
========================================================= */

input[type="range"] {
    width:
        100%;

    height:
        5px;

    margin:
        5px 0 0;

    accent-color:
        var(--gold-700);

    cursor:
        pointer;
}

.range-labels {
    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        4px;

    color:
        #a29ba2;

    font-size:
        8px;
}


/* =========================================================
   BUDGET OPTIONS
========================================================= */

.budget-options {
    display:
        grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        10px;
}

.budget-option {
    position:
        relative;

    min-width:
        0;

    min-height:
        84px;

    padding:
        11px;

    overflow:
        hidden;

    border:
        1px solid
        #e5ddd5;

    border-radius:
        12px;

    background:
        #fffefd;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        .22s ease;
}

.budget-option::before {
    content:
        "";

    position:
        absolute;

    width:
        65px;

    height:
        65px;

    right:
        -32px;

    bottom:
        -32px;

    border-radius:
        50%;

    background:
        rgba(196,151,75,.07);

    transition:
        .3s ease;
}

.budget-option:hover {
    transform:
        translateY(-2px);

    border-color:
        #d1b274;

    box-shadow:
        0 9px 20px
        rgba(62,34,41,.06);
}

.budget-option:hover::before {
    transform:
        scale(1.5);
}

.budget-option.active {
    border-color:
        #bb8d49;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #fff0d2
        );

    box-shadow:
        0 10px 25px
        rgba(180,133,56,.10);
}

.budget-card-icon {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        21px;
}

.budget-option strong {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        2px;

    color:
        #3e363d;

    font-size:
        10px;

    font-weight:
        800;
}

.budget-option small {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    color:
        #968f97;

    font-size:
        8px;

    line-height:
        1.3;
}


/* =========================================================
   FUNCTION HEADER
========================================================= */

.function-heading-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}

.function-count {
    flex:
        0 0 auto;

    padding:
        5px 9px;

    border:
        1px solid
        #e6d9c5;

    border-radius:
        999px;

    background:
        #fffaf0;

    color:
        #916d3d;

    font-size:
        8px;

    font-weight:
        800;

    white-space:
        nowrap;
}


/* =========================================================
   FUNCTION GRID
========================================================= */

.function-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        9px;

    margin-top:
        10px;
}


/* =========================================================
   FUNCTION CARD
========================================================= */

.function-option {
    position:
        relative;

    min-width:
        0;

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px;

    overflow:
        hidden;

    border:
        1px solid
        #e3dad2;

    border-radius:
        12px;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        transform .20s ease,
        border-color .20s ease,
        background .20s ease,
        box-shadow .20s ease;
}

.function-option::after {
    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        70px;

    right:
        -35px;

    top:
        -35px;

    border-radius:
        50%;

    background:
        rgba(194,150,77,.05);

    transition:
        .3s ease;
}

.function-option:hover {
    transform:
        translateY(-2px);

    border-color:
        #d0b171;

    box-shadow:
        0 9px 22px
        rgba(60,34,42,.065);
}

.function-option:hover::after {
    transform:
        scale(1.55);
}


/* hide checkbox */

.function-option input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


/* icon */

.function-icon {
    position:
        relative;

    z-index:
        2;

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #eaddcb;

    border-radius:
        10px;

    background:
        #faf3e7;

    font-size:
        16px;

    transition:
        .22s ease;
}


/* event name */

.function-name {
    position:
        relative;

    z-index:
        2;

    flex:
        1;

    min-width:
        0;

    color:
        #433c44;

    font-size:
        10px;

    line-height:
        1.25;

    font-weight:
        700;
}


/* check */

.function-check {
    position:
        relative;

    z-index:
        2;

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #d8d0c8;

    border-radius:
        50%;

    background:
        white;

    color:
        transparent;

    font-size:
        9px;

    font-weight:
        900;

    transition:
        .20s ease;
}


/* =========================================================
   SELECTED FUNCTION
========================================================= */

.function-option:has(
    input:checked
) {
    border-color:
        #bc8f4a;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #fff0d1
        );

    box-shadow:
        0 9px 23px
        rgba(180,134,58,.09);
}

.function-option:has(
    input:checked
)::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        10px;

    bottom:
        10px;

    width:
        3px;

    border-radius:
        0 5px 5px 0;

    background:
        #bd914c;
}

.function-option:has(
    input:checked
)
.function-icon {
    border-color:
        #d1ae70;

    background:
        #f1dfb9;

    transform:
        scale(1.04);
}

.function-option:has(
    input:checked
)
.function-name {
    color:
        #4b321e;
}

.function-option:has(
    input:checked
)
.function-check {
    border-color:
        #b88b47;

    background:
        #b88b47;

    color:
        white;

    box-shadow:
        0 4px 9px
        rgba(165,115,43,.18);

    animation:
        checkBounce
        .25s
        ease-out;
}

@keyframes checkBounce {

    0% {
        transform:
            scale(.65);
    }

    70% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }
}


/* =========================================================
   ADD CUSTOM FUNCTION
========================================================= */

.custom-function-btn {
    min-height:
        32px;

    margin-top:
        9px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed
        #c9ad76;

    border-radius:
        8px;

    background:
        #fffaf1;

    color:
        #75572f;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}

.custom-function-btn:hover {
    background:
        #fff1d7;

    border-color:
        #b68a47;

    transform:
        translateY(-1px);
}


/* =========================================================
   FULL FIELD
========================================================= */

.full-field {
    width:
        100%;
}


/* =========================================================
   PREFERENCES
========================================================= */

.preferences-grid {
    margin-bottom:
        14px;
}


/* =========================================================
   ACCOMMODATION
========================================================= */

.accommodation-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;

    margin-top:
        3px;

    margin-bottom:
        15px;
}


/* =========================================================
   OPTIONAL LABEL
========================================================= */

.optional-label {
    display:
        inline-block;

    margin-left:
        5px;

    color:
        var(--gold-800);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    vertical-align:
        middle;
}


/* =========================================================
   ADVANCED OPTIONS
========================================================= */

.advanced-options {

    padding:
        14px;

    margin:
        4px 0 16px;

    border:
        1px solid
        #e9dfd4;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffdf9,
            #fff9f3
        );
}

.advanced-title {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        12px;

    color:
        #564d55;

    font-size:
        10px;

    font-weight:
        800;
}

.mini-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #625a63;

    font-size:
        9px;

    font-weight:
        700;
}

.field-hint {

    display:
        block;

    margin-top:
        4px;

    color:
        #9d959d;

    font-size:
        8px;

    line-height:
        1.4;
}


/* =========================================================
   PLANNING NOTE
========================================================= */

.planning-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    padding:
        11px 12px;

    border:
        1px solid
        #e9dfd4;

    border-radius:
        10px;

    background:
        #fffaf3;

    color:
        #7c757e;

    font-size:
        9px;

    line-height:
        1.55;
}

.planning-note p {
    margin:
        0;
}


/* =========================================================
   RESULT PANEL
========================================================= */

.marriage-result-card {

    position:
        sticky;

    top:
        84px;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        28px;

    border:
        1px solid
        rgba(218,187,133,.40);

    border-radius:
        20px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #330817,
            #4b0e27 48%,
            #681738 100%
        );

    box-shadow:
        var(--shadow-lg);
}


/* glow */

.marriage-result-card::before {

    content:
        "";

    position:
        absolute;

    width:
        290px;

    height:
        290px;

    right:
        -145px;

    top:
        -145px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(237,213,166,.15),
            transparent 70%
        );

    animation:
        resultGlow
        7s
        ease-in-out
        infinite
        alternate;
}

@keyframes resultGlow {

    from {
        transform:
            scale(.88);
    }

    to {
        transform:
            scale(1.12);
    }
}


/* =========================================================
   RESULT ORNAMENT
========================================================= */

.result-ornament {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-bottom:
        7px;

    color:
        var(--gold-400);
}

.result-ornament i {
    width:
        35px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(231,204,151,.65)
        );
}

.result-ornament i:last-child {
    transform:
        rotate(180deg);
}

.result-ornament-small {
    margin:
        14px 0 16px;
}


/* =========================================================
   RESULT TITLE
========================================================= */

.result-title {

    position:
        relative;

    z-index:
        3;

    text-align:
        center;

    color:
        #efd9a4;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1;
}


/* =========================================================
   RESULT TOTAL
========================================================= */

.result-total {

    position:
        relative;

    z-index:
        3;

    margin:
        12px 0 3px;

    color:
        #f0d7a0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        48px;

    line-height:
        .95;

    font-weight:
        600;

    letter-spacing:
        -.025em;

    text-align:
        center;

    transition:
        transform .2s ease;
}

.result-total.value-changing {
    animation:
        numberPop
        .32s
        ease-out;
}

@keyframes numberPop {

    0% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.035);
    }

    100% {
        transform:
            scale(1);
    }
}


/* amount in words */

.result-words {

    position:
        relative;

    z-index:
        3;

    min-height:
        18px;

    color:
        rgba(255,255,255,.78);

    font-size:
        9px;

    line-height:
        1.4;

    text-align:
        center;
}


/* =========================================================
   LIVE ESTIMATE
========================================================= */

.live-estimate {

    position:
        relative;

    z-index:
        3;

    width:
        max-content;

    margin:
        11px auto 0;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(75,170,113,.30);

    border-radius:
        999px;

    background:
        rgba(53,152,91,.10);

    color:
        #b9e7ca;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .06em;
}

.live-dot {
    color:
        #62c089;

    margin-right:
        3px;
}


/* =========================================================
   RESULT SECTION TITLE
========================================================= */

.result-section-title {

    position:
        relative;

    z-index:
        3;

    margin-bottom:
        5px;

    color:
        #e7c986;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        15px;

    font-weight:
        700;
}


/* =========================================================
   RESULT EXPENSE ROWS
========================================================= */

.expense-list {

    position:
        relative;

    z-index:
        3;
}

.expense-row {

    min-height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-bottom:
        1px dashed
        rgba(255,255,255,.10);

    transition:
        .18s ease;
}

.expense-row:hover {
    padding:
        0 3px;

    background:
        rgba(255,255,255,.02);
}

.expense-row span {

    color:
        rgba(255,255,255,.69);

    font-size:
        9px;
}

.expense-row strong {

    color:
        rgba(255,255,255,.96);

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   RESULT TOTAL
========================================================= */

.result-total-row {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        8px;

    padding:
        13px 0
        0;

    border-top:
        1px solid
        rgba(232,205,157,.24);

    color:
        #efd6a1;

    font-size:
        10px;

    font-weight:
        800;
}

.result-total-row strong {

    color:
        #f2dba7;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        600;
}


/* =========================================================
   RESULT MESSAGE
========================================================= */

.result-message {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        20px;

    padding:
        12px;

    border:
        1px solid
        rgba(227,199,145,.22);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.04);
}

.result-message-icon {

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(229,204,154,.28);

    border-radius:
        50%;

    color:
        #e3c98b;

    font-size:
        13px;
}

.result-message strong {

    display:
        block;

    color:
        #edd6a0;

    font-size:
        10px;

    margin-bottom:
        2px;
}

.result-message p {

    margin:
        0;

    color:
        rgba(255,255,255,.62);

    font-size:
        8px;

    line-height:
        1.5;
}


/* =========================================================
   RESULT DECORATION
========================================================= */

.result-decoration {

    position:
        relative;

    z-index:
        2;

    margin-top:
        22px;

    text-align:
        center;

    color:
        rgba(235,210,164,.28);

    font-family:
        Georgia,
        serif;

    font-size:
        26px;

    letter-spacing:
        8px;
}

.result-decoration span {
    color:
        rgba(235,210,164,.46);

    font-size:
        30px;
}


/* =========================================================
   SAVINGS SECTION
========================================================= */

.savings-section {

    margin-top:
        46px;

    padding:
        17px 0
        35px;
}


.savings-wrapper {

    display:
        grid;

    grid-template-columns:
        minmax(240px, .95fr)
        minmax(330px, 1.35fr)
        minmax(250px, .85fr);

    min-height:
        230px;

    overflow:
        hidden;

    border:
        1px solid
        #e4d3b1;

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        var(--shadow-md);
}


/* =========================================================
   SAVINGS IMAGE
========================================================= */

.savings-image {

    position:
        relative;

    min-height:
        230px;

    background:
        url("./assets/wedding-hero.jpg")
        center 62% /
        cover
        no-repeat;
}

.savings-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(43,6,19,.18),
            rgba(43,6,19,.50)
        );
}

.savings-image-overlay {

    position:
        absolute;

    left:
        18px;

    bottom:
        17px;

    z-index:
        2;

    color:
        white;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.30);
}

.savings-image-overlay span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #e7cd93;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .10em;
}

.savings-image-overlay strong {

    display:
        block;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        22px;

    line-height:
        .95;

    font-weight:
        700;
}


/* =========================================================
   SAVINGS CONTENT
========================================================= */

.savings-content {

    padding:
        25px 24px;
}

.savings-title {

    margin-bottom:
        17px;
}

.savings-subtitle {

    max-width:
        390px;

    margin:
        5px 0 0;

    color:
        var(--text-soft);

    font-size:
        9px;

    line-height:
        1.5;
}

.savings-form-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-bottom:
        12px;
}

.savings-extra {

    display:
        grid;

    grid-template-columns:
        150px 1fr;

    gap:
        16px;

    align-items:
        end;
}


/* progress */

.mini-progress-title {

    margin-bottom:
        6px;

    color:
        #776f77;

    font-size:
        8px;

    font-weight:
        700;
}

.mini-progress {

    height:
        5px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #eee8e1;
}

.mini-progress-fill {

    width:
        55%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #a77735,
            #d5b36d
        );

    transition:
        width .3s ease;
}


/* =========================================================
   MONTHLY SAVING CARD
========================================================= */

.monthly-saving-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        230px;

    padding:
        25px 22px;

    background:
        linear-gradient(
            145deg,
            #400a20,
            #691638
        );

    color:
        white;

    text-align:
        center;
}


.monthly-saving-card::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -90px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(236,213,165,.11),
            transparent 70%
        );
}


.saving-card-label {

    position:
        relative;

    z-index:
        2;

    color:
        #dfc78f;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;
}


.monthly-saving-card strong {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin:
        7px 0 2px;

    color:
        #f0d8a3;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        37px;

    line-height:
        1;

    font-weight:
        600;
}

.saving-card-subtitle {

    position:
        relative;

    z-index:
        2;

    color:
        rgba(255,255,255,.61);

    font-size:
        9px;
}


/* =========================================================
   SAVING SVG GRAPH
========================================================= */

.saving-chart {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        75px;

    margin-top:
        18px;
}

.saving-chart svg {

    width:
        100%;

    height:
        100%;
}

.saving-chart path.chart-fill {

    fill:
        rgba(229,201,140,.10);
}

.saving-chart path.chart-line {

    stroke:
        #d7b775;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        drop-shadow(
            0 2px 4px
            rgba(210,172,102,.15)
        );
}


/* =========================================================
   FOOTER
========================================================= */

.marriage-footer {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #280512,
            #3b091c
        );

    color:
        white;

    border-top:
        1px solid
        rgba(210,171,102,.24);
}


.marriage-footer::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 16% 50%,
            rgba(229,200,141,.05),
            transparent 26%
        ),
        radial-gradient(
            circle at 84% 50%,
            rgba(229,200,141,.05),
            transparent 26%
        );
}


.footer-inner {

    position:
        relative;

    z-index:
        2;

    min-height:
        120px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:
        20px;

    align-items:
        center;
}


/* quote */

.footer-quote {

    padding-right:
        25px;

    border-right:
        1px solid
        rgba(226,199,145,.22);

    color:
        rgba(255,255,255,.80);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        15px;

    line-height:
        1.25;
}

.footer-quote > span {

    color:
        #dfc482;

    font-size:
        24px;
}


/* center brand */

.footer-brand {

    text-align:
        center;
}

.footer-brand strong {

    display:
        block;

    color:
        #e5ca8d;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        21px;

    font-weight:
        700;
}

.footer-brand p {

    margin:
        4px 0 10px;

    color:
        rgba(255,255,255,.57);

    font-size:
        8px;
}

.footer-socials {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}

.footer-socials span {

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(225,199,145,.27);

    border-radius:
        50%;

    color:
        #d9bd7e;

    font-size:
        9px;
}


/* disclaimer */

.footer-disclaimer {

    padding-left:
        25px;

    border-left:
        1px solid
        rgba(226,199,145,.22);
}

.footer-disclaimer strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #e4c98b;

    font-size:
        9px;
}

.footer-disclaimer p {

    max-width:
        240px;

    margin:
        0;

    color:
        rgba(255,255,255,.56);

    font-size:
        8px;

    line-height:
        1.5;
}


/* =========================================================
   DESKTOP REFINEMENT
========================================================= */

@media (min-width: 1100px) {

    .calculator-grid {
        grid-template-columns:
            minmax(0, 1.58fr)
            minmax(360px, .90fr);
    }

    .marriage-input-card {
        padding:
            29px;
    }

    .top-input-box {
        grid-template-columns:
            1fr .82fr 1.08fr;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .calculator-grid {
        grid-template-columns:
            1fr;
    }

    .marriage-result-card {
        position:
            relative;

        top:
            auto;
    }

    .top-input-box {
        grid-template-columns:
            1fr 1fr;
    }

    .savings-wrapper {
        grid-template-columns:
            1fr 1fr;
    }

    .savings-image {
        min-height:
            250px;
    }

    .monthly-saving-card {
        grid-column:
            span 2;
    }

    .footer-inner {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-disclaimer {
        border-left:
            none;

        padding-left:
            0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 430px) {

    .marriage-container {
        width:
            calc(100% - 28px);
    }


    /* header */

    .header-inner {
        min-height:
            62px;
    }

    .marriage-logo-box {
        width:
            35px;

        height:
            35px;
    }

    .marriage-logo strong {
        font-size:
            18px;
    }

    .marriage-logo span {
        display:
            none;
    }

    .back-home {
        min-height:
            32px;

        padding:
            0 9px;

        font-size:
            8px;
    }


    /* hero */

    .marriage-hero {
        min-height:
            350px;
    }

    .hero-inner {
        padding:
            67px 0
            82px;
    }

    .hero-inner h1 {
        max-width:
            500px;

        font-size:
            44px;
    }

    .hero-inner p {
        font-size:
            13px;
    }

    .wedding-symbol {
        display:
            none;
    }

    .hero-benefits {
        gap:
            13px;

        flex-wrap:
            wrap;
    }

    .hero-benefit {
        font-size:
            9px;
    }


    /* intro */

    .intro-card {
        align-items:
            flex-start;

        padding:
            13px;
    }

    .intro-card h3 {
        font-size:
            16px;
    }


    /* calculator */

    #marriage-calculator {
        padding-top:
            14px;
    }

    .marriage-input-card {
        padding:
            18px;
    }

    .reference-section-heading {
        align-items:
            flex-start;
    }

    .reference-number {
        width:
            28px;

        height:
            28px;

        flex-basis:
            28px;
    }

    .section-title {
        font-size:
            19px;

        white-space:
            normal;
    }


    /* top fields */

    .top-input-box {
        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    /* budget */

    .budget-options {
        grid-template-columns:
            1fr 1fr;
    }


    /* functions */

    .function-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .function-option {
        min-height:
            66px;
    }


    /* accommodation */

    .accommodation-row {
        grid-template-columns:
            1fr 1fr;
    }


    /* preferences */

    .savings-form-grid {
        grid-template-columns:
            1fr;
    }

    .savings-extra {
        grid-template-columns:
            1fr;
    }


    /* savings */

    .savings-wrapper {
        grid-template-columns:
            1fr;
    }

    .savings-image {
        min-height:
            230px;
    }

    .monthly-saving-card {
        grid-column:
            auto;

        min-height:
            220px;
    }


    /* footer */

    .footer-inner {
        grid-template-columns:
            1fr;

        padding:
            24px 0;
    }

    .footer-quote {
        padding:
            0 0 18px;

        border-right:
            none;

        border-bottom:
            1px solid
            rgba(226,199,145,.22);
    }

    .footer-disclaimer {
        text-align:
            center;
    }

    .footer-disclaimer p {
        margin:
            0 auto;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .marriage-container {
        width:
            calc(100% - 22px);
    }

    .marriage-hero {
        min-height:
            470px;
    }

    .hero-inner {
        padding:
            60px 0
            75px;
    }

    .hero-badge {
        font-size:
            7px;
    }

    .hero-inner h1 {
        font-size:
            38px;
    }

    .hero-inner p {
        font-size:
            12px;
    }

    .budget-options {
        grid-template-columns:
            1fr;
    }

    .function-grid {
        grid-template-columns:
            1fr;
    }

    .accommodation-row {
        grid-template-columns:
            1fr;
    }

    .result-total {
        font-size:
            39px;
    }

    .expense-row span,
    .expense-row strong {
        font-size:
            9px;
    }

}


/* =========================================================
   MOBILE HERO IMAGE FRAMING
   Keeps the couple's faces visible on narrow screens.
   Desktop/tablet image positioning is unchanged.
========================================================= */

@media (max-width: 900px) {
    .hero-photo {
        background-size: auto 100%;
        background-position: 78% 18%;
    }
}

@media (max-width: 430px) {
    .hero-photo {
        background-size: auto 100%;
        background-position: 82% 16%;
    }
}