/*==================================================
    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;

    --surface-accent-light:#777777;

    --surface-accent-dark:#5A5148;

    --surface-accent-dark-soft:#F5FBFC;
    
    --surface-accent-dark: rgba(95, 120, 100, 0.55);
  --surface-accent-light: rgba(95, 120, 100, 0.35);


    /* 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%;
    
    -webkit-overflow-scrolling:touch;

    padding-bottom:.5rem;

    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

    Selectable checkbox cards used throughout
    the Build Your Own Celebration experience.
==================================================*/

.byo-addon-card{

    position:relative;
    display:block;

    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;

}


/*--------------------------------
    Hide Native Checkbox
--------------------------------*/

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

    position:absolute;

    opacity:0;

    pointer-events:none;

}


/*--------------------------------
    Selection 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;

}


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

.byo-addon-card:hover{

    transform: translateY(-2px);
    border-color: var(--accent-dark);
    background: var(--surface-accent-light);

}


/*--------------------------------
    Selected
--------------------------------*/

.byo-addon-card:has(input[type="checkbox"]:checked),
    transform: translateY(-2px);
    border-color: var(--accent-dark);
    background: var(--surface-accent-light);

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

}


/* Selected Indicator */

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

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-color:var(--surface-accent-dark);

    color:#fff;

    font-size:.85rem;

    font-weight:700;

}


/*--------------------------------
    Typography
--------------------------------*/

.byo-addon-card h3{

    margin:0 0 .75rem;

    font-size:1.25rem;

    font-weight:600;

    line-height:1.3;

    color:var(--builder-text);

}


.byo-addon-card p{

    margin:0;

    line-height:1.6;

    color:var(--text);

}


.byo-addon-card .price{

    display:block;

    margin-top:.75rem;

    font-weight:600;

    color:var(--builder-text);

}

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

@media (max-width:768px){

    .table-wrap{

        overflow-x:auto;

    }

    .table-wrap table{

        min-width:700px;

    }

}

.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(--surface-accent-dark);

}



.step-header h2{

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

    color:var(--builder-text);

}



.step-header p{

    margin:0;

    color:var(--surface-accent-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(--surface-accent-light);

}


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

.card-badge {
    
    position:absolute;

    top:0px;

    right:28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 1rem;
    padding: 0.35rem 0.85rem;

    background: rgba(231, 215, 168, 1.0);      /* Soft champagne */

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

    border-radius: 999px;
    
    color:var(--text);

    white-space:nowrap;
    
    transform:translateY(-50%);

    box-shadow:
        0 4px 10px rgba(54,58,56,.15);
}


/*==================================================
    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(--surface-accent-dark);

}
.package-badge{

    display:inline-flex;

    align-items:center;

    padding:.2rem .65rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

    background:var(--surface-accent);

    color:#fff;

    white-space:nowrap;

}



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

.package-grid{

    display:grid;

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

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

    align-items:stretch;

}

/*==================================================
    PACKAGE CARD
==================================================*/

.package-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

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

    background:var(--builder-surface);

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

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

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

    cursor:pointer;

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

}

/*--------------------------------
    Hide Native Radio
--------------------------------*/

.package-card input[type="radio"]{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

@media (max-width:900px){

    .package-grid{

        grid-template-columns:1fr;

    }

}


.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 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(--surface-accent-light);

}


.summary-item strong{

    font-weight:600;

}


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

.result-label{

    margin-top:2rem;

    margin-bottom:.25rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.85rem;

    color:var(--surface-accent-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(--surface-accent-light);

    line-height:1.6;

}

/* Hover */

.planning-card:hover{

    border-color: #B8B8B8;
    transition: transform .25s ease;
    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;

    }

}

/* =====================================================
   GUEST COUNT
===================================================== */

.guest-count {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.guest-count-display {
    margin-bottom: var(--space-3);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

#guestCountSlider {
    display: block;
    width: 100%;
}

.guest-count-slider input[type="range"] {
  display: block;
  width: 100%;
  margin: 0;
}

/* =====================================================
   DAY SELECTION
===================================================== */

.day-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.day-options button {
  width: 100%;
}

.day-option {
  width: 100%;
  padding: 0.6rem 0.75rem;
}

.planning-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 768px) {
    .planning-options {
        grid-template-columns: 1fr;
    }
}

.builder-button {
  font-family: Montserrat, sans-serif;  /*needed due to override */
  padding: 0.6rem 0.75rem;
  gap: var(--space-3);
    }

.celebration-card--featured
.celebration-card__content {

    position:relative;

}


/*==================================================
    CELEBRATION GRID
==================================================*/

.celebration-grid{
    display:grid;
    gap:2rem;
}

.celebration-grid--2{
    grid-template-columns:repeat(2,1fr);
}

.celebration-grid--3{
    grid-template-columns:repeat(3,1fr);
}

.celebration-grid--4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:900px){

    .celebration-grid--3{

        grid-template-columns:1fr;

    }

}
   /*Hide the radio*/  
.celebration-card{

    display:block;

    position:relative;

    cursor:pointer;

}

.celebration-card__content{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:2rem;

    background:#fff;

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

    border-radius:16px;

    transition:.25s;

}

.celebration-card input{

    position:absolute;

    opacity:0;

}
.celebration-card__title{

    margin:0;

    font-size:1.45rem;

    text-align:center;

}
.celebration-card__price{

    display:block;
    
    text-align: center;

    margin-top:1rem;

    font-size:1.1rem;

    font-weight:700;

    color:var(--surface-accent-dark);

}
.celebration-card__description{

    margin:1.5rem 0 0;

    text-align:left;

    line-height:1.6;

}

/*==================================================
    Celebration Card Badge
==================================================*/

.celebration-card__badge{

    position:absolute;

    top:-14px;
    left:50%;
    transform:translateX(-50%);

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

    padding:.45rem 1rem;

    background:#E7D7A8;

    color:var(--builder-text);

    font-size:.72rem;
    font-weight:700;

    letter-spacing:.05em;
    text-transform:uppercase;

    white-space:nowrap;

    border-radius:999px;

    box-shadow:
        0 4px 10px rgba(0,0,0,.10);

    z-index:2;

}

.celebration-card:has(input:checked) .celebration-card__content{

    border-color:var(--surface-accent-dark);

    background:#F8F7F4;

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

}.celebration-card:hover
.celebration-card__content{

    transform:translateY(-3px);

}
.celebration-card--featured .celebration-card__content{

    border-color:var(--surface-accent-dark);

}
/*==================================================
    Featured Tables
==================================================*/

.celebration-grid--featured{

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}

.celebration-card--featured .celebration-card__content{

    border-width:2px;

    border-color:var(--surface-accent-dark);

}
.builder-intro{

    max-width:42rem;

    margin:0 auto 2rem;

    text-align:left;

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

    line-height:1.6;

}
/*==================================================
    Statement Pieces Grid
==================================================*/

.celebration-grid--statement{

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

}

@media (max-width:900px){

    .celebration-grid--statement{

        grid-template-columns:1fr;

    }

}

.review-card{

    background:#fff;

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

    border-radius:18px;

    padding:2.5rem;

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

}
.review-section-title{

    margin:2rem 0 .75rem;

    font-size:1rem;

    font-weight:700;

    color:var(--surface-accent-dark);

}
.review-row{

    display:flex;

    justify-content:space-between;

    padding:.9rem 0;

    border-bottom:1px solid #EFEFEF;

}
.review-total{

    margin-top:2rem;

    text-align:center;

}

.review-total-price{

    font-size:3rem;

    font-weight:700;

    color:var(--surface-accent-dark);

}
.celebration-grid--services{

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

}.celebration-grid--2{

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

}

.package-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--builder-space-lg);
}

@media (max-width:768px){

    .celebration-grid--2{

        grid-template-columns:1fr;

    }

}
.personalize-groups{

    display:flex;
    flex-direction:column;
    gap:var(--builder-space-xl);

}
.option-group h3{

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

}
.option-group{

    display:flex;
    flex-direction:column;
    gap:var(--builder-space-md);

}