:root {
    --black: #000000;
    --white: #ffffff;
    --dark-gray: #111111;
    --border: #222222;
    --font-head: 'Archivo Black', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: 'Inter', sans-serif; }

.container { padding: 80px 20px; max-width: 1000px; margin: auto; }
.section-title { font-family: var(--font-head); font-size: 2rem; margin-bottom: 40px; border-left: 5px solid var(--white); padding-left: 15px; }

/* Hero */
.hero { height: 100vh; display: flex; flex-direction: column; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('hero-bg.webp') center/cover; }
nav { padding: 30px; text-align: center; }
.logo { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 2px; }
.hero-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
h1 { font-family: var(--font-head); font-size: 3.5rem; line-height: 0.9; margin-bottom: 20px; }
.price-tag { font-size: 1.5rem; font-weight: bold; margin-bottom: 30px; }

/* Buttons */
.btn-main { background: var(--white); color: var(--black); padding: 20px 40px; text-decoration: none; font-family: var(--font-head); margin-bottom: 10px; width: 280px; text-align: center; }
.btn-sub { border: 2px solid var(--white); color: var(--white); padding: 18px 40px; text-decoration: none; font-family: var(--font-head); width: 280px; text-align: center; }

/* Services */
.service-list .item { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 1.2rem; font-weight: bold; }

/* Bento Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.grid-item { background: var(--dark-gray); height: 200px; background-size: cover; background-position: center; border-radius: 4px; }
.grid-item.tall { grid-row: span 2; height: 415px; }
.grid-item.wide { grid-column: span 2; }

/* Booking Form */
.booking-form { display: flex; flex-direction: column; gap: 15px; }
.booking-form input, .booking-form select { background: var(--dark-gray); border: 1px solid var(--border); padding: 15px; color: white; font-size: 1rem; border-radius: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-submit { background: var(--white); color: var(--black); border: none; padding: 20px; font-family: var(--font-head); cursor: pointer; }

/* Mobile Sticky */
.mobile-cta { position: fixed; bottom: 20px; width: 90%; left: 5%; z-index: 1000; }
.btn-primary { display: block; background: white; color: black; text-align: center; padding: 20px; font-family: var(--font-head); text-decoration: none; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

footer { padding: 60px 20px; text-align: center; font-size: 0.8rem; color: #555; border-top: 1px solid var(--border); }
/* Modal Overlay Background */
.modal-overlay {
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.9); 
    z-index: 2000; 
    justify-content: center; 
    align-items: center;
}

/* Modal Box */
.modal-content {
    background: var(--dark-gray);
    width: 95%;
    max-width: 800px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.close-modal {
    font-size: 2rem;
    cursor: pointer;
    color: var(--white);
}

/* Calendly-Style Grid */
.calendly-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile default: stacked */
    gap: 30px;
}

@media (min-width: 768px) {
    .calendly-grid { grid-template-columns: 1fr 1fr; } /* Desktop: side-by-side */
}

/* Time Panel Styles */
.date-header {
    font-family: var(--font-head);
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.time-slots-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto; /* Lets them scroll through times */
    padding-right: 10px;
}

.time-btn {
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-btn:hover, .time-btn.selected {
    background: var(--white);
    color: var(--black);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    padding: 15px;
    font-family: var(--font-head);
    width: 100%;
    cursor: pointer;
    font-size: 1.1rem;
}
/* Unify Inputs and Textarea */
.booking-form input[type="text"], 
.booking-form input[type="email"], 
.booking-form input[type="tel"], 
.booking-form textarea { 
    background: var(--dark-gray); 
    border: 1px solid var(--border); 
    padding: 15px; 
    color: var(--white); 
    font-size: 1rem; 
    border-radius: 4px; 
    width: 100%;
    font-family: var(--font-main); /* Forces textarea to use your custom font */
    box-sizing: border-box; /* Keeps them the exact same width */
}

/* Specific Textarea tweak */
.booking-form textarea {
    resize: vertical; /* Lets them drag it taller, but prevents it from breaking the layout horizontally */
    min-height: 100px; /* Gives it a good starting size */
}

/* White glow when they tap to type */
.booking-form input:focus, 
.booking-form textarea:focus {
    outline: none;
    border-color: var(--white);
}
/* Modal Mobile Fixes */
.modal-content {
    background: var(--dark-gray);
    width: 95%;
    max-width: 800px;
    max-height: 90vh; /* Prevents the modal from going off the top/bottom of the screen */
    overflow-y: auto; /* Adds a scrollbar inside the modal if the phone screen is short */
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

/* Force Flatpickr to fit the modal */
.flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100%;
    box-shadow: none !important; /* Removes default shadow */
    background: transparent !important; /* Matches your dark mode */
    border: none !important;
}

/* Fix the days row to stretch properly */
.flatpickr-innerContainer, 
.flatpickr-rContainer, 
.dayContainer, 
.flatpickr-days {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Make the calendar text white for dark mode */
.flatpickr-day { color: var(--white); }
.flatpickr-day.selected { background: var(--white) !important; color: var(--black) !important; border-color: var(--white) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--white) !important; }
/* Fix the Instagram Link */
.socials a {
    color: var(--white); /* Changes it from blue to crisp white */
    text-decoration: none; /* Gets rid of the ugly underline */
    font-family: var(--font-head); /* Uses your bold Archivo Black font */
    font-size: 1.2rem;
    display: inline-block;
    margin-top: 20px; /* Pushes it down a bit from the address */
    letter-spacing: 1px;
}

/* Optional: Make it glow slightly when tapped/hovered */
.socials a:hover {
    color: #cccccc;
}
footer { 
    padding: 60px 20px; 
    padding-bottom: 120px; /* This is the magic fix */
    text-align: center; 
    font-size: 0.8rem; 
    color: #555; 
    border-top: 1px solid var(--border); 
}
/* =========================================
   FLATPICKR ALIGNMENT FIX (7-COLUMN GRID)
   ========================================= */

/* 1. Force the Sun-Sat header to stretch perfectly */
.flatpickr-weekdays {
    display: flex !important;
    width: 100% !important;
}
.flatpickr-weekdaycontainer {
    display: flex !important;
    width: 100% !important;
}
span.flatpickr-weekday {
    flex: 1 !important; /* Forces every day word to take up exactly equal space */
    text-align: center !important;
}

/* 2. Force the numbers grid to match the header exactly */
.flatpickr-days, .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* 3. Make every single number take up exactly 1/7th of the row (14.28%) */
.flatpickr-day {
    flex-basis: 14.285% !important; 
    max-width: 14.285% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* =========================================
   FLATPICKR CALENDAR OVERRIDES (THE FIX)
   ========================================= */

/* 1. Hide the ugly white input box completely */
#inline-date-picker {
    display: none !important;
}

/* 2. Strip out Flatpickr's default blue/grey backgrounds */
.flatpickr-calendar, 
.flatpickr-months, 
.flatpickr-month, 
.flatpickr-weekdays, 
.flatpickr-weekdaycontainer, 
span.flatpickr-weekday {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--white) !important;
}

/* 3. Make the next/prev month arrows white */
.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    fill: var(--white) !important;
}

/* 4. Fix the hover state for the arrows */
.flatpickr-months .flatpickr-prev-month:hover svg, 
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #cccccc !important;
}

/* 5. Clean up the selected day circle */
.flatpickr-day.selected {
    background: var(--white) !important;
    color: var(--black) !important;
    border-color: var(--white) !important;
    font-weight: bold;
}

/* =========================================
   CUSTOM SCROLLBAR FOR TIME SLOTS
   ========================================= */
.time-slots-container::-webkit-scrollbar {
    width: 6px;
}
.time-slots-container::-webkit-scrollbar-track {
    background: var(--black); 
    border-radius: 4px;
}
.time-slots-container::-webkit-scrollbar-thumb {
    background: var(--white); 
    border-radius: 4px;
}

/* Buttons */
.hero-btns {
    display: flex;
    flex-direction: column; /* Stacks the buttons vertically on top of each other */
    align-items: center; /* Keeps them perfectly centered */
    gap: 15px; /* Adds a clean 15px space between them */
    width: 100%;
}

.btn-main { 
    display: block; /* Forces it to behave like a block/box */
    background: var(--white); 
    color: var(--black); 
    padding: 20px 40px; 
    text-decoration: none; 
    font-family: var(--font-head); 
    width: 100%; 
    max-width: 280px; 
    text-align: center; 
}

.btn-sub { 
    display: block;
    border: 2px solid var(--white); 
    color: var(--white); 
    padding: 18px 40px; 
    text-decoration: none; 
    font-family: var(--font-head); 
    width: 100%; 
    max-width: 280px; 
    text-align: center; 
}