/*
 * Inner Moxie public scheduler
 * IMC BRANDING AND DIRECT LINKS v7
 */

:root {
    --im-cream: #fbfaef;
    --im-sand: #f6e6b5;
    --im-sand-light: #fbf3d7;
    --im-blue: #aed7e8;
    --im-blue-deep: #70b5cf;
    --im-teal: #56a5b8;
    --im-teal-dark: #317f92;
    --im-gold: #e4c463;
    --im-ink: #40433f;
    --im-muted: #666a66;
    --im-white: #ffffff;
    --im-border: rgba(64, 67, 63, 0.16);
    --im-shadow:
        0 18px 50px rgba(31, 65, 74, 0.13);
    --im-radius: 18px;
}

html,
body {
    min-height: 100%;
    color: var(--im-ink);
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(174, 215, 232, 0.38),
            transparent 30rem
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(246, 230, 181, 0.45),
            transparent 34rem
        ),
        var(--im-cream) !important;
}

body {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

#book-appointment-wizard {
    width: min(calc(100% - 32px), 920px);
    margin: 28px auto;
    overflow: hidden;
    background: var(--im-white);
    border: 1px solid var(--im-border);
    border-radius: 24px;
    box-shadow: var(--im-shadow);
}

#book-appointment-wizard #header {
    padding: 22px 26px !important;
    color: #fffdf5 !important;
    background:
        linear-gradient(
            125deg,
            var(--im-teal-dark),
            var(--im-teal)
        ) !important;
}

#book-appointment-wizard #company-name,
#book-appointment-wizard #company-name * {
    color: #fffdf5 !important;
}

#book-appointment-wizard
.display-selected-service,
#book-appointment-wizard
.display-selected-provider,
#book-appointment-wizard
.display-booking-selection {
    color: rgba(255, 253, 245, 0.78) !important;
}

#book-appointment-wizard .book-step {
    width: 42px;
    height: 42px;
    margin-left: 8px;
    color: rgba(255, 253, 245, 0.9) !important;
    background: rgba(22, 92, 106, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px !important;
    line-height: 42px;
}

#book-appointment-wizard
.book-step.active-step {
    color: var(--im-teal-dark) !important;
    background: #fffdf5 !important;
    box-shadow:
        0 7px 18px rgba(22, 79, 91, 0.18);
}

#book-appointment-wizard .wizard-frame {
    padding: clamp(24px, 4vw, 46px) !important;
    background: rgba(255, 255, 255, 0.98);
}

#book-appointment-wizard .frame-container {
    min-height: 470px !important;
}

#book-appointment-wizard .frame-title,
#book-appointment-wizard h1,
#book-appointment-wizard h2,
#book-appointment-wizard h3 {
    color: #18788d !important;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

#book-appointment-wizard .frame-title {
    margin-bottom: 30px !important;
    font-size: clamp(2rem, 4vw, 2.55rem);
}

#book-appointment-wizard label {
    color: var(--im-ink);
    font-weight: 600;
}

#book-appointment-wizard
.form-control,
#book-appointment-wizard
.form-select {
    min-height: 50px;
    color: var(--im-ink);
    background: var(--im-white);
    border: 1px solid
        rgba(49, 127, 146, 0.24);
    border-radius: 14px;
    box-shadow:
        0 4px 14px rgba(31, 65, 74, 0.04);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

#book-appointment-wizard
.form-control:focus,
#book-appointment-wizard
.form-select:focus {
    border-color: var(--im-teal);
    box-shadow:
        0 0 0 4px
        rgba(86, 165, 184, 0.16);
}

#book-appointment-wizard
input[type="file"].form-control {
    padding: 7px;
}

#book-appointment-wizard
input[type="file"]::file-selector-button {
    margin: -1px 12px -1px -1px;
    padding: 10px 16px;
    color: var(--im-teal-dark);
    background: var(--im-sand-light);
    border: 0;
    border-radius: 10px;
    font-weight: 700;
}

#book-appointment-wizard
.form-check-input:checked {
    background-color: var(--im-teal);
    border-color: var(--im-teal);
}

#book-appointment-wizard .btn {
    min-height: 48px;
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 700;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

#book-appointment-wizard
.btn-dark,
#book-appointment-wizard
.btn-primary,
#book-appointment-wizard
.button-next {
    color: var(--im-white) !important;
    background: var(--im-teal) !important;
    border: 2px solid var(--im-teal) !important;
    box-shadow:
        0 9px 20px rgba(49, 127, 146, 0.18);
}

#book-appointment-wizard
.btn-dark:hover,
#book-appointment-wizard
.btn-primary:hover,
#book-appointment-wizard
.button-next:hover,
#book-appointment-wizard
.btn-dark:focus,
#book-appointment-wizard
.btn-primary:focus,
#book-appointment-wizard
.button-next:focus {
    color: var(--im-white) !important;
    background: var(--im-teal-dark) !important;
    border-color: var(--im-teal-dark) !important;
    transform: translateY(-1px);
}

#book-appointment-wizard
.btn-outline-secondary,
#book-appointment-wizard
.button-back {
    color: var(--im-teal-dark) !important;
    background: transparent !important;
    border: 2px solid var(--im-teal) !important;
}

#book-appointment-wizard
.btn-outline-secondary:hover,
#book-appointment-wizard
.button-back:hover {
    color: var(--im-white) !important;
    background: var(--im-teal-dark) !important;
    border-color: var(--im-teal-dark) !important;
}

#book-appointment-wizard
.imc-insurance-panel {
    padding: 22px !important;
    background:
        linear-gradient(
            145deg,
            var(--im-sand-light),
            rgba(251, 250, 239, 0.92)
        ) !important;
    border: 1px solid
        rgba(228, 196, 99, 0.58) !important;
    border-radius: var(--im-radius) !important;
    box-shadow:
        0 12px 30px rgba(105, 87, 38, 0.08);
}

#book-appointment-wizard
#available-hours
.available-hour {
    margin: 5px;
    padding: 9px 14px;
    color: var(--im-teal-dark);
    background: var(--im-sand-light);
    border: 1px solid
        rgba(49, 127, 146, 0.18);
    border-radius: 999px;
    font-weight: 700;
}

#book-appointment-wizard
#available-hours
.available-hour:hover {
    color: var(--im-white);
    background: var(--im-teal);
}

#book-appointment-wizard
#available-hours
.selected-hour {
    color: var(--im-white) !important;
    background: var(--im-teal-dark) !important;
    border-color: var(--im-teal-dark) !important;
}

#book-appointment-wizard
.ui-datepicker {
    width: 100%;
    padding: 14px;
    background: var(--im-white);
    border: 1px solid var(--im-border);
    border-radius: var(--im-radius);
    box-shadow:
        0 12px 32px rgba(31, 65, 74, 0.08);
}

#book-appointment-wizard
.ui-datepicker-header {
    color: var(--im-white);
    background: var(--im-teal) !important;
    border: 0;
    border-radius: 12px;
}

#book-appointment-wizard
.ui-datepicker td a {
    border-radius: 10px;
}

#book-appointment-wizard
.ui-datepicker
.ui-state-active,
#book-appointment-wizard
.ui-datepicker
.ui-state-highlight {
    color: var(--im-white) !important;
    background: var(--im-teal-dark) !important;
    border-color: var(--im-teal-dark) !important;
}

#book-appointment-wizard #footer {
    color: var(--im-muted);
    background: var(--im-cream);
    border-top: 1px solid var(--im-border);
}

#book-appointment-wizard #footer a {
    color: var(--im-teal-dark);
}

#imc-direct-loading {
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.imc-direct-loading-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    color: var(--im-teal-dark);
    background: var(--im-sand-light);
    border: 1px solid
        rgba(49, 127, 146, 0.18);
    border-radius: var(--im-radius);
    box-shadow:
        0 12px 32px rgba(31, 65, 74, 0.08);
}

.imc-direct-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid
        rgba(49, 127, 146, 0.2);
    border-top-color: var(--im-teal-dark);
    border-radius: 50%;
    animation:
        imc-direct-spin 700ms linear infinite;
}

html.imc-direct-pending
#book-appointment-wizard
.wizard-frame {
    display: none !important;
}

html.imc-direct-booking
#button-back-2 {
    display: none !important;
}

@keyframes imc-direct-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    #book-appointment-wizard {
        width: calc(100% - 16px);
        margin: 8px auto;
        border-radius: 18px;
    }

    #book-appointment-wizard #header {
        padding: 18px 16px !important;
    }

    #book-appointment-wizard .book-step {
        width: 36px;
        height: 36px;
        margin-left: 4px;
        line-height: 36px;
    }

    #book-appointment-wizard .wizard-frame {
        padding: 22px 16px !important;
    }

    #book-appointment-wizard .frame-title {
        font-size: 1.85rem;
    }

    #book-appointment-wizard
    .command-buttons {
        gap: 10px;
    }

    #book-appointment-wizard
    .command-buttons .btn {
        min-width: 0 !important;
        flex: 1;
    }
}


/* IMC MODERN ASSET AND FOOTER HOTFIX v8.1 */
#book-appointment-wizard .footer-powered-by,
#book-appointment-wizard .backend-link {
    display: none !important;
}

#book-appointment-wizard #frame-footer .footer-options {
    width: 100% !important;
    text-align: center !important;
}