/* HubSpot-inspired public Meetings polish.
   Keep this as an override layer so the core booking script stays untouched. */

.publicMeetingBody {
    --hubspot-page: #f5f8fb;
    --hubspot-card: #ffffff;
    --hubspot-text: #213343;
    --hubspot-muted: #516f90;
    --hubspot-border: #dbe4ed;
    --hubspot-soft: #f6f9fc;
    --flare-navy: #060d2f;
    background:
        radial-gradient(circle at top left, rgba(206, 170, 73, .16), transparent 28rem),
        var(--hubspot-page);
    color: var(--hubspot-text);
}

.publicMeetingBody .meetingShell {
    max-width: 1120px;
    margin: 42px auto;
    padding: 0 24px 72px;
}

.publicMeetingBody .meetingPage {
    grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
    background: var(--hubspot-card);
    border: 1px solid var(--hubspot-border);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(33, 51, 67, .14);
}

.publicMeetingBody .meetingPanelDark {
    background: linear-gradient(165deg, #050b2a 0%, #08123b 58%, #0b1749 100%);
    border-right: 1px solid rgba(255, 255, 255, .1);
    padding: 38px 32px;
}

.publicMeetingBody .meetingPanelLight {
    background: #fff;
    color: var(--hubspot-text);
    padding: 34px 34px 36px;
}

.publicMeetingBody .meetingLightTitle {
    color: var(--hubspot-text);
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 18px;
}

.publicMeetingBody .meetingSection {
    margin: 22px 0;
}

.publicMeetingBody .meetingSectionTitle {
    color: var(--hubspot-muted);
    font-size: 12px;
}

.publicMeetingBody .tinyMuted {
    color: var(--hubspot-muted);
}

.publicMeetingBody .bookingSummaryCard {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    border-radius: 12px;
}

.publicMeetingBody .bookingSummaryRow {
    padding: 10px 14px;
    border-bottom-color: rgba(255, 255, 255, .1);
}

.publicMeetingBody .bookingSummaryLabel {
    color: rgba(255, 255, 255, .68);
}

.publicMeetingBody .bookingSummaryValue {
    color: #fff;
}

.publicMeetingBody .calendarWidget {
    background: var(--hubspot-soft);
    border: 1px solid var(--hubspot-border);
    border-radius: 14px;
    padding: 14px;
}

.publicMeetingBody .calMonthLabel {
    color: var(--hubspot-text);
    font-size: 14px;
}

.publicMeetingBody .calNavBtn {
    border-color: var(--hubspot-border);
    color: var(--hubspot-muted);
    background: #fff;
}

.publicMeetingBody .calDayHead {
    color: var(--hubspot-muted);
}

.publicMeetingBody .calCell {
    border-radius: 999px;
    min-height: 32px;
}

.publicMeetingBody .calAvail {
    background: #fff;
    border: 1px solid transparent;
    color: var(--hubspot-text);
    box-shadow: inset 0 0 0 1px rgba(81, 111, 144, .08);
}

.publicMeetingBody .calAvail:hover {
    background: #fff7df;
    border-color: rgba(206, 170, 73, .35);
}

.publicMeetingBody .calSelected {
    background: var(--gold);
    color: #111827;
    box-shadow: 0 6px 14px rgba(206, 170, 73, .28);
}

.publicMeetingBody .slotList {
    border: 1px solid var(--hubspot-border);
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    max-height: 360px;
}

.publicMeetingBody .slotBtn {
    color: var(--hubspot-text);
    background: #fff;
    border: 1px solid var(--hubspot-border);
    border-radius: 10px;
    padding: 13px 14px;
}

.publicMeetingBody .slotBtn:hover {
    border-color: rgba(206, 170, 73, .55);
    background: #fffaf0;
}

.publicMeetingBody .slotBtn.active {
    border-color: var(--gold);
    background: #fff5d8;
    color: #3a2b06;
    box-shadow: inset 0 0 0 1px rgba(206, 170, 73, .55);
}

.publicMeetingBody .meetingField label {
    color: var(--hubspot-muted);
}

.publicMeetingBody .meetingField input {
    background: #fff;
    color: var(--hubspot-text);
    border-color: var(--hubspot-border);
    border-radius: 10px;
    padding: 12px 13px;
}

.publicMeetingBody .meetingField input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(206, 170, 73, .16);
}

.publicMeetingBody .btn {
    border-radius: 999px;
    padding: 12px 22px;
}

.publicMeetingBody .btn.primary {
    background: var(--gold);
    color: #0b0904;
}

.publicMeetingBody .btn.ghost {
    color: var(--hubspot-text);
    border-color: var(--hubspot-border);
}

.publicMeetingBody .meetingNotice {
    background: #fff4f1;
    color: #a83b2d;
    border-color: #ffd6cc;
}

.publicMeetingBody .meetingNoticeLoading {
    background: #eefaf4;
    color: #216e4e;
    border-color: #c8eedc;
}

.publicMeetingBody .bookingSuccess {
    background: #edf8f3;
    border-color: #c8eedc;
    color: var(--hubspot-text);
}

.publicMeetingBody .bookingSummaryLine {
    color: var(--hubspot-text);
}

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

    .publicMeetingBody .meetingPanelDark {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
}

@media (max-width: 760px) {
    .publicMeetingBody .meetingShell {
        margin: 18px auto;
        padding: 0 12px 44px;
    }

    .publicMeetingBody .meetingPanelDark,
    .publicMeetingBody .meetingPanelLight {
        padding: 26px 20px;
    }
}