.container { max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 16px; }
#booking { padding: 28px 0; }
#booking h1 { margin: 0 0 16px; font-family: 'GROBOLD', Arial, sans-serif; color: var(--accent); }
#booking form { background: #fff; border: 1px solid rgba(15,23,42,0.04); padding: 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,0.03); }
#booking fieldset { border: none; margin: 0 0 12px; padding: 0; }
#booking legend { font-weight: 700; margin-bottom: 8px; }
#booking label { display: block; margin: 8px 0 4px; font-size: 14px; color: var(--muted); }
#booking input[type="text"], #booking input[type="email"], #booking input[type="tel"], #booking input[type="number"], #booking input[type="date"], #booking select, #booking textarea {
    width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #e6e9ee; font-size: 15px;
}
#booking .smsOptIn-checkbox { margin-left: 8%; }
#booking .smsOptIn-checkbox input[type="checkbox"] { width: 15px; height: 15px;}
#booking .checkboxes { display: flex; gap: 12px; margin: 8px 0; }
#booking .form-actions { display:flex; gap: 10px; margin-top: 12px; }
#booking button { padding: 10px 14px; border-radius: 6px; border: none; cursor: pointer; }
#booking button[type="submit"] { background: var(--accent); color: #fff; }
#booking button[type="reset"] { background: #f3f4f6; color: #111827; }

@media (min-width: 720px) {
    /* two-column layout for larger screens */
    #booking form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    #booking form fieldset { grid-column: span 2; }
    #booking .form-actions { grid-column: span 2; justify-content: start; }
    /*#grand-total-box { position: sticky; top: 8px; width: auto; margin: 8px 0; float: none; }*/
    /* On larger screens make the calendar-events area take the full width of the form */
    #calendar-events { grid-column: 1 / -1; }
    /* ensure the calendar-events-list container stretches across columns */
    #calendar-events-list > div { grid-column: 1 / -1; }
}

/* On smaller screens, make Client (Owner) Information fieldset stretch across columns */
@media (max-width: 720px) {
    #booking form fieldset:first-of-type {
        grid-column: 1 / -1;
        width: 100%;
        display: block;
    }
}

/* Make the small consent text span the full form width so it's less narrow */
#booking form small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.9rem;
    /* span both columns when the form is in grid layout */
    grid-column: 1 / -1;
    width: 100%;
}

/* Grand total sticky box */
#grand-total-box {
    position: sticky;
    top: 12px;
    float: right;
    right: 16px;
    width: 200px;
    background: linear-gradient(180deg,#fff,#fbfbff);
    border: 1px solid rgba(15,23,42,0.06);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.06);
    text-align: center;
    z-index: 30;
}
#booking .custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.08);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    font-size: 15px;
    color: #111827;
    margin-top: 2px;
}
#booking .custom-dropdown .dropdown-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f3f4f6;
}
#booking .custom-dropdown .dropdown-option:last-child {
    border-bottom: none;
}
#booking .custom-dropdown .dropdown-option:hover, #booking .custom-dropdown .dropdown-option:focus {
    background: linear-gradient(90deg,#e0e7ff,#f1f5f9);
    color: #1e3a8a;
    outline: none;
}
/* End custom breed dropdown styles */
#grand-total-box .grand-total-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
#grand-total-box #grand-total-amount { font-size: 22px; font-weight: 800; color:  #111827; }
#grand-total-amount { display: inline-flex; gap: 8px; align-items: center; }
#grand-total-amount .grand-original {
    text-decoration: line-through;
    color: #b91c1c;
    font-size: 1rem;
    opacity: 0.8;
}
#grand-total-amount .grand-discounted {
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(90deg,#e0e7ff,#f1f5f9);
    border-radius: 999px;
    padding: 4px 12px;
    border: 1px solid #c7d2fe;
    color: #1e3a8a;
}
#grand-total-discount-label {
    font-size: 1rem;
    color: #13883e;
    font-weight: 600;
    margin-top: 4px;
    margin-left: 2px;
    letter-spacing: 0.5px;
}

/* Schedule Availability styles */
#calendar-events { margin-top: 12px; }
#calendar-events h3 { margin: 0 0 8px; font-size: 18px; }
#calendar-events-list { font-size: 15px; color: #111827; }

/* The container that holds the slot cards (injected by JS as a grid) */
#calendar-events-list > div { margin-top: 8px; }

/* Slot cards (labels that wrap the radio inputs) */
#calendar-events-list label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6e9ee;
    background: #fff;
    transition: box-shadow 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
}

#calendar-events-list label:hover {
    box-shadow: 0 6px 18px rgba(2,6,23,0.06);
    transform: translateY(-2px);
}

/* Radio input appearance tweaks inside label */
#calendar-events-list input[type="radio"] { accent-color: var(--accent); width: 1.05em; height: 1.05em; }

/* Checked/selected state */
#calendar-events-list input[type="radio"]:checked + strong,
#calendar-events-list input[type="radio"]:checked ~ strong,
#calendar-events-list input[type="radio"]:checked + div,
#calendar-events-list input[type="radio"]:checked ~ div,
#calendar-events-list label:has(input[type="radio"]:checked) {
    border-color: rgba(99,102,241,0.18);
    background: linear-gradient(180deg, #ffffff, #fbfbff);
}

/* Layout grid injected by JS uses columns; provide a responsive auto-fit grid instead */
#calendar-events-list > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

/* Make each label take full width and the content align nicely */
#calendar-events-list label { width: 100%; }

/* Small screens: single column and slightly larger touch targets */
@media (max-width: 520px) {
    #calendar-events-list > div { grid-template-columns: 1fr; }
    #calendar-events-list label { padding: 14px; font-size: 15px; }
    .packages { grid-template-columns: 1fr; }
}

/* Accessibility: focus ring for keyboard users */
#calendar-events-list label:focus-within {
    outline: 3px solid rgba(99,102,241,0.18);
    outline-offset: 2px;
}

/* Details/summary styling for grouped days */
#calendar-events details {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

#calendar-events summary {
    list-style: none;
    display: block;
    padding: 8px 10px;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #f7f9fc;
    cursor: pointer;
}

/* When summary is focused or hovered */
#calendar-events summary:focus, #calendar-events summary:hover {
    box-shadow: 0 4px 12px rgba(2,6,23,0.04);
}

/* Custom disclosure arrow on summary */
#calendar-events summary {
    position: relative;
}
#calendar-events summary::-webkit-details-marker { display: none; }
#calendar-events summary::marker { content: none; }

#calendar-events summary::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--muted);
}

/* Flip arrow when details is open */
#calendar-events details[open] > summary::after {
    content: "▴";
}

/* Make slot labels inside details match the card style we already defined */
#calendar-events details div label {
    border: 1px solid #e6e9ee;
    background: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    display: block;
}

/* Slight indent for the slots area */
#calendar-events details div { padding: 8px 6px 0 6px; }

/* Packages card grid */
.packages {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr; /* keep packages stacked in a single column */
}

.packages label {
    display: block;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e6e9ee;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
}

.packages label:hover { box-shadow: 0 8px 20px rgba(2,6,23,0.06); transform: translateY(-2px); }

.packages input[type="radio"] { accent-color: var(--accent); margin-right: 8px; }

.packages label strong { display: inline-block; margin-right: 8px; }

/* Price badge */
.packages .package-price {
    float: right;
    background: linear-gradient(180deg,#fafafa,#f1f5f9);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    color: #111827;
    border: 1px solid rgba(15,23,42,0.04);
}

/* Feature list inside package card */
.packages label ul { margin: 8px 0 0 18px; color: #444; font-size: 0.95rem; }

/* Checked package state */
.packages input[type="radio"]:checked + strong,
.packages input[type="radio"]:checked ~ .package-price,
.packages label:has(input[type="radio"]:checked) {
    border-color: rgba(99,102,241,0.18);
    background: linear-gradient(180deg,#ffffff,#fbfbff);
}