/*==================================================
    GUIDED CELEBRATION BUILDER
    Design System 1.0

    Section 1: Foundation

    Purpose:
    Builder-specific styles only.
    These styles are isolated from the
    remainder of the Chateau website.

    Version: 1.0
==================================================*/



/*==================================================
    1. BUILDER VARIABLES
==================================================*/

:root {

    /* Builder Colors */

    --builder-surface:#ffffff;

    --builder-background:#fafafa;

    --builder-border:#E4E4E4;

    --builder-border-light:#EFEFEF;

    --builder-text:#333333;

    --builder-text-light:#777777;

    --builder-accent:#5A5148;

    --builder-accent-soft:#F5FBFC;


    /* Builder Spacing */

    --builder-space-xs:.5rem;

    --builder-space-sm:1rem;

    --builder-space-md:1.5rem;

    --builder-space-lg:2rem;

    --builder-space-xl:3rem;


    /* Builder Radius */

    --builder-radius:14px;


    /* Builder Shadow */

    --builder-shadow:
    0 8px 24px rgba(0,0,0,.05);

}


/*==================================================
    2. MAIN BUILDER LAYOUT
==================================================*/


.planner-layout{

    display:grid;

    grid-template-columns:2.2fr 1fr;

    gap:var(--builder-space-xl);

    align-items:start;

}



/*==================================================
    3. PLANNER AREA
==================================================*/


.planner{

    min-width:0;

}



/* Main Builder Card */

.planner-card{

    background:var(--builder-surface);

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

    border-radius:var(--builder-radius);

    padding:var(--builder-space-lg);

    box-shadow:var(--builder-shadow);

}



/*==================================================
    4. SUMMARY PANEL
==================================================*/


.planner-summary{

    position:sticky;

    top:120px;

}



.summary-card{

    background:var(--builder-surface);

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

    border-radius:var(--builder-radius);

    padding:var(--builder-space-lg);

    box-shadow:var(--builder-shadow);

}


/*==================================================
    QUICK COMPARISON MATRIX
==================================================*/


.table-wrap{

    width:100%;

    margin:var(--builder-space-md) 0;

    overflow-x:auto;

}



/*--------------------------------
    Table
--------------------------------*/

.table-wrap table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    background:#fff;

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

    border-radius:var(--builder-radius);

    overflow:hidden;

}



/*--------------------------------
    Header
--------------------------------*/

.table-wrap thead{

    background:#F7F7F5;

}



.table-wrap th{

    padding:1rem;

    text-align:center;

    font-weight:600;

    color:var(--builder-text);

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

}



/* First column */

.table-wrap th:first-child{

    text-align:left;

    width:32%;

}



/*--------------------------------
    Body
--------------------------------*/

.table-wrap td{

    padding:1rem;

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

    vertical-align:middle;

}



/* Feature column */

.table-wrap td:first-child{

    font-weight:500;

    color:var(--builder-text);

}



/* Package columns */

.table-wrap td:not(:first-child){

    text-align:center;

}



/*--------------------------------
    Zebra Striping
--------------------------------*/

.table-wrap tbody tr:nth-child(even){

    background:#FCFCFB;

}



/*--------------------------------
    Hover
--------------------------------*/

.table-wrap tbody tr:hover{

    background:#F8F8F6;

}



/*--------------------------------
    Check Marks
--------------------------------*/

.table-wrap .check{

    font-weight:700;

    color:#4A4A4A;

}


/*==================================================
    BYO ADD-ON CARDS

    Used for:
    Build Your Own Celebration selections

==================================================*/


.byo-addon-card{

    background: var(--builder-surface);

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

    border-radius: var(--builder-radius);

    padding: var(--builder-space-lg);

    cursor: pointer;

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

}

/*==================================================
    BYO CHECKBOX CARDS

    Custom checkbox behavior
==================================================*/


.byo-addon-card{

    position:relative;

    display:block;

}



/* Hide browser checkbox */

.byo-addon-card input[type="checkbox"]{

    position:absolute;

    opacity:0;

    pointer-events:none;

}



/* Custom check indicator */

.byo-addon-card::after{

    content:"";

    position:absolute;

    top:1.25rem;

    right:1.25rem;

    width:22px;

    height:22px;

    border:2px solid #CFCFCF;

    border-radius:50%;

    background:#fff;

}



/* Selected card */

.byo-addon-card:has(input[type="checkbox"]:checked){

    border-color:#5A5148;

    background: var(--surface-accent-light);

    box-shadow:

        0 0 0 2px rgba(90,81,72,.12);

}



/* Selected check circle */

.byo-addon-card:has(input[type="checkbox"]:checked)::after{

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    background:#5A5148;

    border-color:#5A5148;

    color:#fff;

    font-size:.85rem;

    font-weight:700;

}

/* Hover State */

.byo-addon-card:hover{

    border-color:#B8B8B8;

    transform:translateY(-2px);

}



/* Selected State */

.byo-addon-card.active{

    border-color:#5A5148;

    background:#F8F7F4;

    box-shadow:

        0 0 0 2px rgba(90,81,72,.12);

}



/* Heading */

.byo-addon-card h3{

    margin:0 0 .75rem;

    font-size:1.25rem;

    font-weight:600;

    line-height:1.3;

    color:var(--builder-text);

}



/* Description */

.byo-addon-card p{

    margin:0;

    color:var(--builder-text-light);

    line-height:1.6;

}



/* Price / Supporting Text */

.byo-addon-card .price{

    display:block;

    margin-top:.75rem;

    font-weight:600;

    color:var(--text);

}

/*--------------------------------
    Responsive
--------------------------------*/

@media (max-width:768px){

    .table-wrap{

        overflow-x:auto;

    }

    .table-wrap table{

        min-width:700px;

    }

}

.table-wrap{

    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

    padding-bottom:.5rem;

}

.table-scroll-hint{

    display:none;

}

@media (max-width:768px){

    .table-scroll-hint{

        display:block;

        margin-bottom:.75rem;

        text-align:center;

        font-size:.85rem;

        color:#666;

    }

}

/*==================================================
    5. BUILDER STEP FOUNDATION
==================================================*/


.builder-step{

    width:100%;

}



.builder-step + .builder-step{

    margin-top:var(--builder-space-xl);

}



/*==================================================
    6. STEP HEADER
==================================================*/


.step-header{

    margin-bottom:var(--builder-space-lg);

}



.step-label{

    display:inline-block;

    margin-bottom:var(--builder-space-sm);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--builder-accent);

}



.step-header h2{

    margin:0 0 var(--builder-space-sm);

    color:var(--builder-text);

}



.step-header p{

    margin:0;

    color:var(--builder-text-light);

    max-width:42rem;

}

/*==================================================
    DESIGN SYSTEM 1.0

    Section 2: Cards + Selection Components

    Purpose:
    Reusable selection cards used throughout
    the Guided Celebration Builder.

==================================================*/



/*==================================================
    1. CARD FOUNDATION
==================================================*/


.card{

    background:var(--builder-surface);

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

    border-radius:var(--builder-radius);

    padding:var(--builder-space-lg);

    box-shadow:var(--builder-shadow);

}





.card p{

    color:var(--builder-text-light);

}



/*==================================================
    2. PLANNING OPTIONS GRID
==================================================*/


}

.planning-options{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--builder-space-md);

}


@media(min-width:768px){

    .planning-options{

        grid-template-columns:repeat(2,1fr);

    }

}


/*==================================================
    5. CARD BADGES
==================================================*/

.card-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.85rem;

    background: #E7D7A8;      /* Soft champagne */
    color: #333;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    border-radius: 999px;
}


/*==================================================
    6. CARD LISTS
==================================================*/


.card ul{

    padding-left:1.2rem;

}



.card li{

    margin-bottom:.5rem;

}



/*==================================================
    7. SELECTION INDICATOR
==================================================*/


.selection-indicator{

    margin-top:var(--builder-space-md);

    font-size:.85rem;

    font-weight:600;

    color:var(--builder-accent);

}



/*==================================================
    8. PACKAGE CARD SUPPORT
==================================================*/


.package-card{
    height:100%;

}

.package-card--featured{
    border-color:var(--builder-accent);

}

.selection-card{

    background:var(--builder-surface);

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

    border-radius:var(--builder-radius);

    padding:var(--builder-space-lg);

    cursor:pointer;

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

}

.selection-card:hover{

    border-color:#B8B8B8;

    transform:translateY(-2px);

}



/* ------------------------------
   Left Planner
------------------------------ */








.summary-card{

    background:#fff;

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

    border-radius:14px;

    padding:2rem;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}


.summary-card h3{

    margin-top:0;

}


/* ------------------------------
   Summary Rows
------------------------------ */

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.85rem 0;

    border-bottom:1px solid #EFEFEF;

}


.summary-item:last-of-type{

    border-bottom:none;

}


.summary-item span{

    color:var(--builder-text-light);

}


.summary-item strong{

    font-weight:600;

}


/* ------------------------------
   Investment
------------------------------ */

.result-label{

    margin-top:2rem;

    margin-bottom:.25rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.80rem;

    color:var(--builder-text-light);

}


/* ------------------------------
   Benefits
------------------------------ */

.builder-benefits{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;

}


.builder-benefit{

    background:var(--builder-surface);

    border-radius:999px;

    padding:.6rem 1rem;

    font-size:.95rem;

}

.planning-grid{

    display:grid;
    gap:24px;
    margin-top:2rem;

}

@media(min-width:768px){

    .planning-grid{

        grid-template-columns:1fr 1fr;

    }

}



.planning-tag{

    display:inline-block;
    margin-top:18px;
    font-size:.8rem;
    font-weight:600;
    color:#499FAF;

}


/* ===============================
   BUILD 3.0
================================ */

.guest-selection{
    margin:40px 0;
}

.guest-display{
    text-align:center;
    margin-bottom:20px;
}

.guest-display span{
    display:block;
    font-size:3rem;
    font-weight:700;
    color:var(--accent);
    line-height:1;
}

.guest-display small{
    font-size:.95rem;
    color:#777;
}

#guestSlider{
    width:100%;
}

.slider-labels{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:.9rem;
    color:#888;
}

/* Planning */

.planning-style{
    margin-top:50px;
}

.planning-style h3{
    text-align:center;
    margin-bottom:20px;
}

/*==================================================
    BUILD 3.0
    Planning Style Selection Cards

    Matches Package Selection card behavior
==================================================*/






/*--------------------------------
   Planning Selection Card
--------------------------------*/


/*==========================================
   Reset Planning Card Button
==========================================*/

.planning-card{

    appearance:none;
    -webkit-appearance:none;

    font:inherit;

    color:inherit;

    text-align:left;

    background:var(--builder-surface);

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

    border-radius:var(--builder-radius);

    width:100%;

    padding:var(--builder-space-lg);

    cursor:pointer;

}
.card h3,
.planning-card h3{

    margin:0 0 .75rem;

    font-size:1.35rem;

    font-weight:600;

    line-height:1.3;

    color:var(--builder-text);

}
.card p,
.planning-card p{

    margin:0;

    color:var(--builder-text-light);

    line-height:1.6;

}

/* Hover */

.planning-card:hover{

    border-color:#B8B8B8;

    transform:translateY(-2px);

}


/*--------------------------------
   Recommended Badge
--------------------------------*/


.planning-card .badge{

    align-self:flex-start;

    margin-bottom:1rem;

}


 .button {
    display: inline-block;
    padding: 12px 18px;
    margin: 5px;
    border: 1px solid #222;
    text-decoration: none;
    color: #222;
    font-size: 14px;
}

.button:hover {
    background: #222;
    color: #fff;
}



/* ------------------------------
   Mobile
------------------------------ */

@media (max-width:900px){

    .planner-layout{

        grid-template-columns:1fr;

    }

    .planner-summary{

        position:static;

    }

}

/*==================================================
    UNIVERSAL CARD ACTIVE STATE
==================================================*/

.card.active,
.planning-card.active,
.selection-card.active{

    border-color:#5A5148;

    box-shadow:
        0 0 0 2px rgba(90,81,72,.12);

}