/* =========================================================
   DJ SKALATA — BOOKING PAGE / DJ AGENCY STYLE
========================================================= */

.booking-page {
    width: 100%;
    padding: 0 clamp(20px, 4vw, 80px);
}

/* HERO */

.booking-hero {
    position: relative;
    max-width: 980px;
    padding: clamp(58px, 7vw, 112px) 0 clamp(30px, 4vw, 56px);
}

.booking-hero::before {
    content: "";
    position: absolute;
    inset: 12% auto auto 42%;
    width: min(620px, 70vw);
    height: min(620px, 70vw);
    background:
        radial-gradient(circle at 40% 40%, rgba(168,85,247,.24), transparent 44%),
        radial-gradient(circle at 70% 55%, rgba(255,62,181,.18), transparent 38%),
        radial-gradient(circle at 30% 70%, rgba(53,167,255,.14), transparent 36%);
    filter: blur(10px);
    pointer-events: none;
    z-index: -1;
}

.booking-hero .page-title {
    font-size: clamp(54px, 7.3vw, 112px);
    line-height: .88;
    letter-spacing: -4.5px;
    text-transform: uppercase;
}

.booking-hero .page-subtitle {
    margin-top: 14px;
    color: rgba(255,255,255,.78);
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.55;
}

/* ALERTS */

.alert-success,
.alert-error {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 16px;
    font-weight: 800;
    box-shadow: 0 22px 70px rgba(0,0,0,.34);
}

.alert-success {
    background: rgba(37,211,102,.13);
    border: 1px solid rgba(37,211,102,.35);
}

.alert-error {
    background: rgba(255,62,181,.13);
    border: 1px solid rgba(255,62,181,.35);
}

/* LAYOUT */

.booking-shell {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
    gap: 28px;
    align-items: start;
    padding-bottom: clamp(60px, 8vw, 110px);
}

/* CARDS */

.booking-card,
.booking-calendar-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
        radial-gradient(circle at top right, rgba(168,85,247,.18), transparent 40%),
        radial-gradient(circle at bottom left, rgba(53,167,255,.10), transparent 38%);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.booking-card::before,
.booking-calendar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 42%, rgba(255,255,255,.08) 50%, transparent 58%, transparent 100%);
    transform: translateX(-130%);
    transition: transform .85s ease;
    pointer-events: none;
}

.booking-card:hover::before,
.booking-calendar-card:hover::before {
    transform: translateX(130%);
}

.booking-card {
    padding: clamp(28px, 4vw, 52px);
}

.booking-calendar-card {
    position: sticky;
    top: 112px;
    padding: 24px;
}

/* FORM */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-group.full {
    grid-column: 1 / -1;
}

label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .25px;
}

.label-icon {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: var(--pink);
    background: rgba(255,62,181,.09);
    border: 1px solid rgba(255,62,181,.20);
    filter: drop-shadow(0 0 14px rgba(255,62,181,.28));
}

.label-icon svg,
.mini-icon svg,
.btn-icon svg {
    width: 18px;
    height: 18px;
}

input,
textarea,
select {
    width: 100%;
    padding: 15px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(2,3,10,.34);
    color: white;
    outline: none;
    transition: border .25s ease, background .25s ease, box-shadow .25s ease;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,.38);
}

textarea {
    min-height: 138px;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(168,85,247,.72);
    background: rgba(255,255,255,.07);
    box-shadow:
        0 0 0 4px rgba(168,85,247,.12),
        0 0 34px rgba(53,167,255,.10);
}

.form-submit {
    margin-top: 28px;
}

.form-submit .btn svg {
    transition: transform .2s ease;
}

.form-submit .btn:hover svg {
    transform: translateX(4px);
}

/* CALENDAR HEADER */

.booking-calendar-head {
    margin-bottom: 18px;
}

.calendar-eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--purple);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .9px;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(168,85,247,.55);
}

.booking-calendar-head h2 {
    margin: 0 0 8px;
    color: white;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.booking-calendar-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

#bookingCalendar {
    padding: 10px;
    border-radius: 18px;
    background: rgba(2,3,10,.56);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
}

/* FULLCALENDAR */

.fc,
.fc * {
    color: white !important;
    box-sizing: border-box;
}

.fc .fc-view-harness,
.fc .fc-daygrid,
.fc .fc-scrollgrid,
.fc table,
.fc thead,
.fc tbody,
.fc tr,
.fc td,
.fc th {
    background: transparent !important;
}

.fc-theme-standard .fc-scrollgrid {
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px;
    overflow: hidden;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: rgba(255,255,255,.08) !important;
}

.fc .fc-toolbar {
    margin-bottom: 12px !important;
}

.fc .fc-toolbar-title {
    color: white !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    letter-spacing: -.7px;
    text-transform: uppercase;
}

.fc .fc-button {
    padding: 7px 11px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    transition: .25s ease !important;
}

.fc .fc-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(168,85,247,.26), rgba(255,62,181,.20)) !important;
}

.fc .fc-col-header-cell {
    padding: 9px 0 !important;
    background: rgba(255,255,255,.055) !important;
}

.fc .fc-col-header-cell-cushion {
    color: rgba(255,255,255,.82) !important;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.fc .fc-daygrid-day {
    background: rgba(255,255,255,.02) !important;
    transition: .2s ease;
}

.fc .fc-daygrid-day:hover {
    background: rgba(168,85,247,.09) !important;
    cursor: pointer;
}

.fc .fc-daygrid-day-frame {
    min-height: 66px;
    padding: 4px;
}

.fc .fc-daygrid-day-number {
    color: rgba(255,255,255,.92) !important;
    padding: 7px !important;
    font-size: 12px;
    font-weight: 950;
}

.fc .fc-day-other {
    background: rgba(255,255,255,.012) !important;
}

.fc .fc-day-other .fc-daygrid-day-number {
    color: rgba(255,255,255,.32) !important;
}

.fc .fc-day-today {
    background: rgba(53,167,255,.12) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--blue) !important;
    text-shadow: 0 0 18px rgba(53,167,255,.45);
}

.fc-event.calendar-booked,
.calendar-booked {
    margin: 2px 5px !important;
    padding: 4px 7px !important;
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ef4444, var(--pink)) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    box-shadow: 0 8px 20px rgba(255,62,181,.22);
}

.fc-event-title,
.fc-event-time {
    color: white !important;
    font-weight: 950;
}

/* LEGEND */

.calendar-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calendar-legend i {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 999px;
}

.legend-free {
    background: rgba(53,167,255,.46);
}

.legend-booked {
    background: linear-gradient(135deg, #ef4444, var(--pink));
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .booking-shell {
        grid-template-columns: 1fr;
    }

    .booking-calendar-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .booking-calendar-card,
    .booking-card {
        padding: 20px;
        border-radius: 20px;
    }

    #bookingCalendar {
        padding: 8px;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .fc .fc-toolbar-title {
        font-size: 20px !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 58px;
    }
}

@media (max-width: 560px) {
    .booking-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-hero .page-title {
        font-size: clamp(42px, 14vw, 62px);
        letter-spacing: -2px;
    }
}