:root {
    /* Grid Column Widths */
    --col-1-width: 380px;
    --col-2-width: 580px;
    --col-3-width: 440px;
    --total-width: calc(var(--col-1-width) + var(--col-2-width) + var(--col-3-width));
    
    /* Page Specific Animation */
    --animation-duration: 0.7s;
    --animation-timing: cubic-bezier(0.645, 0.045, 0.355, 1);

    /* Local Utilities */
    --local-border-color: rgba(255, 255, 255, 0.15);
    --local-text-disabled: #404040;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

html, html.lenis {
    height: auto;
    cursor:none !important;
    width: 100%;
    overflow-x: hidden;
}

input, textarea{all:unset;}

input::placeholder,
textarea::placeholder {
  /* REPLACED: Small */
  font-size: var(--fs-sm) !important;
}

::selection {
    background-color: transparent;
    color: inherit;
}
::-moz-selection {
    background-color: transparent;
    color: inherit;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-text-secondary); /* Updated */
    color: var(--color-text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 1rem;
    overflow: visible;
    width: 100%;
    max-width: 100vw;
}

.booking-viewport {
    max-width: 100%;
    overflow: visible;
    margin: auto;
    display: flex;
    justify-content:center;
}

.grid-wrapper {
    display: grid;
    width: 90vw;
    height: 100%;
    grid-template-columns: var(--col-1-width) var(--col-2-width) var(--col-3-width);
    transform: translateX(calc(var(--col-3-width) / 2));
    transition: transform var(--animation-duration) var(--animation-timing), 
                grid-template-columns 0.6s ease;
}

.booking-viewport.form-visible .grid-wrapper {
    transform: translateX(0);
}

/* Desktop Success Layout */
.grid-wrapper.success-layout {
    grid-template-columns: var(--col-1-width) calc(var(--col-2-width) + var(--col-3-width)) !important;
    transform: translateX(0); 
}

/* --- Column Styles --- */
.info-pane, .middle-pane-wrapper, .form-pane, .booking-success-message {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 2.5rem;
    overflow-y: visible; 
    transition: opacity 0.4s ease;
}

.info-pane { justify-content: space-between; }
.other-content{ display:flex; flex-direction:column; gap:15px; }

.info-pane .company-name { 
    font-size: var(--fs-h6);
    color: var(--color-text-muted);
    font-weight: 500;
    /* letter-spacing: 1px; */
    font-family: var(--font-serif);
    /* text-transform: uppercase; */
    margin: 0;
    font-style: italic;
}

.info-pane .event-title { 
    font-family: var(--font-primary); 
    /* REPLACED: H3 */
    font-size: var(--fs-h3);
    font-weight: 500; margin: -0.5rem 0 0 0; color: var(--color-text-primary); line-height: 1.1; letter-spacing: -0.02em; 
}

.event-detail { 
    display: flex; align-items: flex-start; gap: 5px; color: var(--color-text-muted); font-weight: 500; 
    /* REPLACED: Small */
    font-size: var(--fs-sm);
}
.event-detail svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.info-pane .description { 
    line-height: 1.4;
    font-size: var(--fs-body);
    font-weight: 400;
    margin: 0;

}
.info-pane .telegram-info {
    line-height: 1.2; color: var(--color-text-muted); 
    /* REPLACED: Small */
    font-size: var(--fs-sm);
    font-weight: 200;
}

.middle-pane-wrapper { justify-content: space-between;}

.calendar-pane { display: flex; flex-direction: column; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.month-display { 
    font-weight: 500; 
    /* REPLACED: H5 */
    font-size: var(--fs-h5);
    letter-spacing: -0.01em; font-family: var(--font-serif);
}
.nav-buttons button { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; transition: opacity 0.3s, pointer-events 0.3s; color: var(--color-text-primary); }
.nav-buttons button:hover:not(.disabled-nav) { background-color: rgba(255,255,255,0.1); }
.nav-buttons button svg { width: 20px; height: 20px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; text-align: center; font-size: var(--fs-sm);}
.calendar-grid.dates { grid-template-rows: repeat(auto-fit, 40px); }
.calendar-grid .weekday { 
    font-weight: 600; color: var(--color-text-muted); 
    /* REPLACED: Small (scaled down slightly in layout if needed, but var used) */
    font-size: var(--fs-sm);
    padding-bottom: 0.7rem; align-self: center; text-transform: uppercase; letter-spacing: 0.5px; 
}

.calendar-grid .date-cell { 
    position: relative; display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; margin: 0 auto; border-radius: 50%; cursor: pointer; font-weight: 500; 
    /* REPLACED: Small */
    font-size: var(--fs-sm);
    border: 1.5px solid transparent; background: transparent; color: var(--color-text-primary); overflow: hidden; transition: color 0.4s ease, transform 0.3s ease, border-color 0.3s ease; will-change: transform; 
}
.date-cell::before { content: ''; position: absolute; top: var(--liquid-y, 50%); left: var(--liquid-x, 50%); width: 0; height: 0; background: var(--color-text-primary); border-radius: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }
.date-cell:not(.disabled):hover { color: var(--color-text-secondary); border-color: transparent; transform: scale(1.08); }
.date-cell:not(.disabled):hover::before { width: 90px; height: 90px; transform: translate(-50%, -50%) scale(1); }
.date-cell.disabled { color: var(--local-text-disabled); cursor: not-allowed; pointer-events: none;opacity: 0.4; }
.date-cell.selected { color: var(--color-text-secondary); font-weight: 700; border-color: var(--color-text-primary); }
.date-cell.selected::before { width: 90px; height: 90px; transform: translate(-50%, -50%) scale(1); }

.time-selector-pane h3 { 
    /* REPLACED: H5 */
    font-size: var(--fs-h5);
    margin-bottom: 20px;
    font-weight: 500; font-family: var(--font-serif); letter-spacing: -0.01em;
}
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 0.6rem; }

.time-slot { 
    position: relative; padding: 0.7rem 0.9rem; border: 1.5px solid var(--color-text-primary); border-radius: var(--border-radius-pill); cursor: pointer; text-align: center; font-weight: 500; 
    /* REPLACED: Small */
    font-size: 16px;
    background: transparent; color: var(--color-text-primary); overflow: hidden; transition: color 0.4s ease, transform 0.3s ease; 
}
.time-slot::before { content: ''; position: absolute; top: var(--liquid-y, 50%); left: var(--liquid-x, 50%); width: 0; height: 0; background: var(--color-text-primary); border-radius: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.time-slot:hover:not(.disabled) { color: var(--color-text-secondary); border-color: transparent; transform: scale(1.05); }
.time-slot:hover:not(.disabled):before { width: 350px; height: 350px; transform: translate(-50%, -50%) scale(1); }
.time-slot.selected {color: var(--color-text-secondary); border-color: var(--color-text-primary); background: var(--color-text-primary); font-weight: 700; }
.time-slot.selected::before { width: 350px; height: 350px; transform: translate(-50%, -50%) scale(1); }

/* Form Styles */
/* MODIFIED: GRID SYSTEM FOR 50/50 SPLIT ON DESKTOP */
.the-form { 
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.split-blocks{
    display:flex;
    gap:15px;
}
.form-pane { opacity: 0; transition: opacity 0.4s ease 0.35s; justify-content: space-between; }
.booking-viewport.form-visible .form-pane { opacity: 1; }
.form-pane h2 { 
    /* REPLACED: H5 */
    font-size: var(--fs-h5);
    font-weight: 500; font-family: var(--font-serif); margin-bottom: 0.5rem; 
}
.form-pane .form-group { display: flex; flex-direction: column; gap: 0.3rem; flex:1;}
.form-pane .form-group label { 
    /* REPLACED: H6 */
    font-size: var(--fs-h6);
    margin-bottom: 2px; font-family: var(--font-serif); font-weight: 500; color: var(--color-text-primary);
}
.form-pane .form-group label .required { color: var(--color-accent); }

/* INPUT & TEXTAREA STYLING */
.form-pane .form-group input:not([type="range"]), 
.form-pane .form-group textarea {   
    all:unset;
    width: 100%;
    padding: 2px;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    color: var(--color-text-primary);
    border-bottom: 1px solid #3535356b; /* Updated */
    transition: border-bottom-color 0.3s ease;
}

/* SELECT DROPDOWN STYLING (MATCHES INPUTS) */
.form-pane .form-group select {
    all:unset;
    cursor:none !important;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #3535356b;
    padding: 6px 2px;
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;

    transition: border-bottom-color 0.3s ease;
}

.form-pane .form-group textarea {
    min-height: 55px;
    resize: vertical;
    font-size: var(--fs-sm);
    margin-top: 10px;
    width: 100%;
    padding: 8px 4px;
    border-bottom: 1px solid #3535356b; /* Updated */
    transition: border-bottom-color 0.3s ease;
    background-color: transparent;
    color: var(--color-text-primary);
}

.form-pane .form-group input:not([type="range"]):focus, 
.form-pane .form-group textarea:focus,
.form-pane .form-group select:focus { 
    outline: none; 
    box-shadow: none; 
    border-bottom-color: var(--color-text-primary); 
}

textarea#notes {
    resize: none;         /* Disables the drag handle */
    min-height: 60px;    /* Sets a fixed, comfortable height */
}

/* 2. Custom Slider Styling */
.slider-group {
    position: relative;
    width: 100%;
    padding: 10px 0; /* Space for the thumb */
}

/* The Container for the Visual Line and Dots */
.slider-track-visuals {
    position: absolute;
    top: 22.5px; /* Vertically aligns with the input track */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 0;
    pointer-events: none; /* Let clicks pass through to the input */
}

/* The Horizontal Line */
.slider-track-visuals::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #e0e0e0; /* Light Grey Track */
    z-index: -1;
}

/* The Individual Dots */
.track-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* The Actual Input Range (made transparent) */
input[type=range] {
    -webkit-appearance: none; /* Remove default styling */
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 2;
    margin: 0;
    cursor: pointer;
}

/* The Draggable Handle (Thumb) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #FC4625; /* Your Theme Orange */
    border: 4px solid #ffffff; /* White ring */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    margin-top: -11px; /* Center thumb on the line */
    transition: transform 0.1s ease;
}
/* --- SLIDER STYLING --- */
.slider-group { margin-top: 10px; }
.slider-labels { 
    margin-top: 8px; 
    /* REPLACED: Small */
    font-size: var(--fs-sm);
    color: var(--color-text-muted); position: relative; height: 20px; 
}

/* UPDATED SLIDER LABELS FOR 6 ITEMS ($2k - Beyond) */
.slider-labels span { transition: color 0.3s ease, font-weight 0.3s ease; font-family:var(--font-serif); white-space: nowrap; position: absolute; top: 0; }
.slider-labels span:nth-child(1) { left: 0%; transform: translateX(0%); } 
.slider-labels span:nth-child(2) { left: 20%; transform: translateX(-50%); } 
.slider-labels span:nth-child(3) { left: 40%; transform: translateX(-50%); } 
.slider-labels span:nth-child(4) { left: 60%; transform: translateX(-50%); } 
.slider-labels span:nth-child(5) { left: 80%; transform: translateX(-50%); } 
.slider-labels span:nth-child(6) { left: 100%; transform: translateX(-100%); } /* Added 6th item */

.slider-labels span.active { color: var(--color-text-primary); font-weight: 500; }

input[type=range] {     -webkit-appearance: none;
appearance: none;
width: 100%;
background: #00000030;
cursor: pointer;
border-bottom: none;
padding: 0;
border-radius: 500px; }
input[type=range]:focus, input[type=range]:focus-visible { outline: none; box-shadow: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: var(--local-border-color); border-radius: 4px; }
input[type=range]::-moz-range-track { width: 100%; height: 4px; background: var(--local-border-color); border-radius: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--color-accent); margin-top: -7px; transition: transform 0.2s ease; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type=range]::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: var(--color-accent); border: none; transition: transform 0.2s ease; }
input[type=range]:active::-moz-range-thumb { transform: scale(1.2); }


.form-footer-main{ display: flex;gap:10px; margin-top:10px;}
.form-footer-other{ 
    /* REPLACED: Small */
    font-size: var(--fs-sm);
}
.form-footer-other a{ all:unset; }

/* --- SUCCESS MESSAGE STYLES --- */
.booking-success-message {
    grid-column: 2 / span 2; 
    display: none; 
    justify-content: center; 
    align-items: center;    
    text-align: center;
    padding: 2.5rem;
    opacity: 0;
    transition: opacity 0.6s ease;
    height: 100%; 
}
.no-rotate{
    
}
.no-rotate:hover svg{
    transform: rotate(0deg) !important;}
.booking-success-message.visible {
    display: flex;
    opacity: 1;
}

.success-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px; 
}

.success-icon { width: 60px; height: 60px; margin-bottom: 20px; color: var(--color-accent); }
.success-icon svg { fill: currentColor; }
.success-message h2 { 
    /* REPLACED: H4 */
    font-size: var(--fs-h4);
    font-family: var(--font-primary); margin-bottom: 10px; font-weight: 700; 
}
.success-message p { 
    /* REPLACED: Body */
    font-size: var(--fs-body);
    line-height: 1.5; color: var(--color-text-muted); margin-bottom: 30px; max-width: 450px; 
}

/* Cursor change logic */
body.is-loading .custom-cursor .cursor-icon path { fill: var(--color-text-secondary) !important; }

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;  /* Chrome/Safari/Edge */
  margin: 0;
}
/* Media Queries */
@media (max-width: 1400px) {
    .booking-viewport { width: 100%; }
    .grid-wrapper { grid-template-columns: 1fr 1.5fr 1.2fr; }
    .grid-wrapper.success-layout { 
        grid-template-columns: var(--col-1-width) auto !important;
    }
}

@media (max-width: 1200px) {
    html, html.lenis {
        height: auto !important;
        overflow-x: hidden !important;
    }
    
    body { 
        height: auto; 
        overflow: auto; 
        overflow-x: hidden;
        align-items: flex-start; 
        padding: 0;
        width: 100vw;
        max-width: 100vw;
    }
    
    .booking-viewport { 
        height: auto; 
        max-height: none; 
        width: 100vw;
        max-width: 100vw;
        border-radius: 0; 
        box-shadow: none; 
        margin-top: 0; 
    }
    
    .grid-wrapper { 
        display: block; 
        transform: none !important; 
    }
    
    .info-pane, .middle-pane-wrapper, .form-pane { height: auto; border: none; border-top: 1px solid var(--local-border-color); overflow-y: visible; padding: 2.5rem; }
    .info-pane { border-top: none; }
    
    /* MODIFIED: Revert to stack on mobile/tablet */
    .the-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-pane { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top: none; transition: max-height 0.6s var(--animation-timing), opacity 0.4s ease-in-out, padding 0.6s var(--animation-timing), border-color 0.1s linear 0.2s; }
    .booking-viewport.form-visible .form-pane { opacity: 1; max-height: 1000px; padding-top: 2.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--local-border-color); }

    .booking-success-message {
        grid-column: 1 / span 1; 
        height: auto;
        border-top: 1px solid var(--local-border-color);
        padding: 2.5rem;
    }

    .grid-wrapper.success-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 797px) {
    .info-pane, .middle-pane-wrapper, .form-pane, .booking-success-message {         padding-left: 20px;
    padding-right: 20px;}
    .booking-viewport.form-visible .form-pane {         gap: 20px;
        padding: 2rem 0;}
    .split-blocks{
    display:flex;
    flex-direction:column;
    gap:15px;
}
    /* Removed hardcoded event-title font-size; handled by fluid var */
    
    .time-slots {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    .time-slot {
        position: relative;
        width: max-content;
        padding: 0.7rem 1.4rem;
        border: 0.5px solid var(--color-text-primary);
    }
    .time-selector-pane h3 {
        margin-bottom:10px;
    }
}

.nav-buttons button.disabled-nav { opacity: 0.5; pointer-events: none; cursor: default; }