:root {
    --color-monash-blue: #006dae;
    --color-monash-blue-dark: #005a91;
    --color-monash-blue-focus: rgba(0, 109, 174, 0.25);

    /* Override the CakePHP theme tokens used by the existing templates. */
    --color-cakephp-red: var(--color-monash-blue);
    --color-cakephp-blue: var(--color-monash-blue);
    --color-links: var(--color-monash-blue);
    --color-links-active: var(--color-monash-blue-dark);

    /* Keep Bootstrap helpers aligned with the same theme colour. */
    --bs-primary: var(--color-monash-blue);
    --bs-primary-rgb: 0, 109, 174;
    --bs-link-color: var(--color-monash-blue);
    --bs-link-color-rgb: 0, 109, 174;
    --bs-link-hover-color: var(--color-monash-blue-dark);
}

a {
    color: var(--color-monash-blue);
}

a:hover,
a:focus,
a:active {
    color: var(--color-monash-blue-dark);
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    background-color: var(--color-monash-blue);
    border-color: var(--color-monash-blue);
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type='button']:hover,
input[type='button']:focus,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='submit']:hover,
input[type='submit']:focus {
    background-color: var(--color-monash-blue-dark);
    border-color: var(--color-monash-blue-dark);
}

.btn-primary {
    --bs-btn-bg: var(--color-monash-blue);
    --bs-btn-border-color: var(--color-monash-blue);
    --bs-btn-hover-bg: var(--color-monash-blue-dark);
    --bs-btn-hover-border-color: var(--color-monash-blue-dark);
    --bs-btn-active-bg: var(--color-monash-blue-dark);
    --bs-btn-active-border-color: var(--color-monash-blue-dark);
    --bs-btn-disabled-bg: var(--color-monash-blue);
    --bs-btn-disabled-border-color: var(--color-monash-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-monash-blue);
    --bs-btn-border-color: var(--color-monash-blue);
    --bs-btn-hover-bg: var(--color-monash-blue);
    --bs-btn-hover-border-color: var(--color-monash-blue);
    --bs-btn-active-bg: var(--color-monash-blue-dark);
    --bs-btn-active-border-color: var(--color-monash-blue-dark);
    --bs-btn-disabled-color: var(--color-monash-blue);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-monash-blue);
    box-shadow: 0 0 0 0.25rem var(--color-monash-blue-focus);
}

.top-nav {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.top-nav-title a {
    font-size: 3.1rem;
    line-height: 1.1;
}

.top-nav-links .nav-login {
    margin: 0;
    min-width: 8rem;
}

.top-nav-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.top-nav-links form,
.top-nav-links .nav-workspace,
.top-nav-links .nav-logout {
    margin: 0;
}

.nav-user-name {
    color: #334155;
    font-size: 1.75rem;
    font-weight: 700;
}

.top-nav-links .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.6rem;
    margin: 0;
    padding: 1rem 1.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.top-nav-links .nav-logout,
.top-nav-links .nav-logout:visited,
.top-nav-links .nav-logout:hover,
.top-nav-links .nav-logout:focus {
    color: #ffffff !important;
}

.top-nav-links .nav-logout {
    background: var(--color-monash-blue-dark);
    border-color: var(--color-monash-blue-dark);
}

.top-nav-links .nav-contact,
.top-nav-links .nav-contact:visited,
.top-nav-links .nav-workspace,
.top-nav-links .nav-workspace:visited {
    color: var(--color-monash-blue) !important;
}

.top-nav-links .nav-contact:hover,
.top-nav-links .nav-contact:focus,
.top-nav-links .nav-workspace:hover,
.top-nav-links .nav-workspace:focus {
    color: #ffffff !important;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    max-width: 108rem;
    margin: 3rem auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e9f3;
    border-radius: 1.2rem;
    box-shadow: 0 1.8rem 5rem rgba(15, 50, 71, 0.1);
}

.auth-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 58rem;
    padding: 6rem 5rem;
    color: #ffffff;
    background: linear-gradient(145deg, var(--color-monash-blue-dark), var(--color-monash-blue));
}

.auth-intro h1,
.auth-intro p {
    color: #ffffff;
}

.auth-intro h1 {
    margin-bottom: 2rem;
}

.auth-intro > p:not(.auth-kicker) {
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.7rem;
}

.auth-kicker {
    margin-bottom: 1.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.auth-intro-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.auth-intro-points span::before {
    content: '\2713';
    display: inline-grid;
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 1rem;
    place-items: center;
    color: var(--color-monash-blue-dark);
    background: #ffffff;
    border-radius: 50%;
    font-weight: 700;
}

.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem;
}

.auth-form-heading {
    margin-bottom: 2.4rem;
}

.auth-form-heading .section-eyebrow {
    font-size: 1.6rem;
}

.auth-form-heading h2 {
    margin-bottom: 0.8rem;
}

.auth-form label {
    margin-bottom: 0.7rem;
    color: #1e293b;
    font-weight: 700;
}

.auth-form input {
    height: 5.2rem;
    margin-bottom: 2rem;
    border-color: #b9cbd6;
    border-radius: 0.6rem;
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 11rem;
}

.password-toggle {
    position: absolute;
    right: 1.2rem;
    bottom: 3.15rem;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--color-monash-blue);
    background: transparent;
    border: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--color-monash-blue-dark);
    background: transparent;
}

.auth-form-support {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: -0.6rem 0 2rem;
    color: var(--color-monash-blue);
    font-size: 1.45rem;
    font-weight: 600;
}

.auth-form-support small {
    color: #64748b;
    font-weight: 400;
}

.auth-captcha {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2rem;
}

.auth-submit {
    width: 100%;
    height: 5rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.auth-help-text {
    margin: 2rem 0 0;
    color: #64748b;
    font-size: 1.3rem;
    text-align: center;
}

.role-home {
    padding: 4rem 0 6rem;
}

.role-home-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 4rem;
    background: linear-gradient(135deg, #f0f8fc 0%, #ffffff 75%);
    border: 1px solid #d8e9f3;
    border-radius: 1rem;
}

.role-home-header > div:first-child {
    max-width: 68rem;
}

.role-account-card {
    display: flex;
    flex-direction: column;
    min-width: 24rem;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #d8e9f3;
    border-radius: 0.8rem;
}

.role-account-card span,
.role-account-card small {
    color: #64748b;
}

.role-preview-card {
    border-top: 0.4rem solid var(--color-monash-blue);
}

.role-preview-card h2 {
    font-size: 2rem;
}

.role-preview-status {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    color: var(--color-monash-blue-dark);
    background: #e8f4fa;
    border-radius: 99rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.dashboard-simple {
    max-width: 96rem;
    margin: 4rem auto 6rem;
}

.dashboard-simple-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 0.3rem solid var(--color-monash-blue);
}

.dashboard-simple-header > div:first-child {
    max-width: 64rem;
}

.dashboard-simple-header h1 {
    margin-bottom: 1rem;
}

.dashboard-user-summary {
    display: flex;
    flex: 0 0 23rem;
    flex-direction: column;
    padding: 1.5rem;
    background: #f3f7fa;
    border: 1px solid #d7e2e8;
}

.dashboard-user-summary span,
.dashboard-user-summary small {
    color: #5f6f79;
}

.dashboard-booking-action {
    margin-top: 1.5rem;
    white-space: normal;
    text-align: center;
    background: var(--color-monash-blue);
    color: #fff;
    padding: 0.9rem 1.2rem;
    border-radius: 0.4rem;
}

.client-booking-panel { max-width: 110rem; margin: 0 auto; }
.client-booking-panel .booking-planner { margin-top: 2rem; }

@media (max-width: 600px) {
    .client-booking-panel .booking-planner-heading { display: block; }
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin-top: 2.5rem;
}

.dashboard-stat-card {
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #d7e2e8;
}

.dashboard-stat-card span {
    color: #52616b;
    font-weight: 600;
}

.dashboard-stat-card strong {
    margin-top: auto;
    color: #102a3a;
    font-size: 2.5rem;
    line-height: 1.15;
}

.dashboard-modules {
    margin-top: 3rem;
}

.dashboard-modules h2 {
    margin-bottom: 0.5rem;
}

.dashboard-module-list {
    margin: 2rem 0 0;
    border-top: 1px solid #d7e2e8;
}

.dashboard-module-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 1.4rem 0;
    border-bottom: 1px solid #d7e2e8;
    list-style: none;
}

.dashboard-module-list small {
    color: #64748b;
}

.hero-section {
    padding: 5rem 4rem;
    background: linear-gradient(135deg, #f0f8fc 0%, #ffffff 70%);
    border: 1px solid #d8e9f3;
    border-radius: 0.8rem;
}

.hero-content {
    max-width: 76rem;
}

.hero-eyebrow,
.section-eyebrow {
    margin-bottom: 0.8rem;
    color: var(--color-monash-blue);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-section h1 {
    max-width: 70rem;
    margin-bottom: 1.6rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.hero-actions .hero-contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5.2rem;
    padding: 1.2rem 2.6rem;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.hero-support-text {
    color: #606c76;
    font-size: 1.4rem;
}

.section-heading {
    max-width: 68rem;
}

.feature-card,
.testimonial-card {
    border-color: #dfe4e8;
}

.feature-card {
    border-top: 0.4rem solid var(--color-monash-blue);
}

.feature-card .card-body,
.testimonial-card .card-body {
    padding: 2.4rem;
}

.feature-number {
    display: inline-block;
    margin-bottom: 1.6rem;
    color: var(--color-monash-blue);
    font-size: 1.4rem;
    font-weight: 700;
}

.dashboard-primary-action {
    margin-top: 1.2rem;
    padding: 1rem 1.8rem;
    font-size: 1.45rem;
    font-weight: 700;
}

.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    max-width: 112rem;
    margin: 3rem auto 6rem;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e9f3;
    border-radius: 1.2rem;
    box-shadow: 0 1.8rem 5rem rgba(15, 50, 71, 0.1);
}

.contact-intro {
    padding: 5rem 4rem;
    color: #ffffff;
    background: linear-gradient(145deg, var(--color-monash-blue-dark), var(--color-monash-blue));
}

.contact-intro h1,
.contact-intro p,
.contact-intro .section-eyebrow {
    color: #ffffff;
}

.contact-intro > p:not(.section-eyebrow) {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.65rem;
}

.contact-intro-points {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 3rem;
}

.contact-intro-points span {
    font-weight: 600;
}

.contact-intro-points span::before {
    content: '\2713';
    display: inline-grid;
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 1rem;
    place-items: center;
    color: var(--color-monash-blue-dark);
    background: #ffffff;
    border-radius: 50%;
    font-weight: 700;
}

.contact-privacy-note {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 1.35rem !important;
}

.contact-form-panel {
    padding: 5rem;
}

.contact-form-heading {
    margin-bottom: 2.2rem;
}

.contact-form label,
.manager-response-form label {
    margin-bottom: 0.6rem;
    color: #1e293b;
    font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.manager-response-form textarea {
    margin-bottom: 1.8rem;
    border-color: #b9cbd6;
    border-radius: 0.6rem;
}

.booking-sms-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem 1.5rem;
    align-items: center;
    margin: 0 0 2rem;
    padding: 1.5rem;
    background: #f4f9fc;
    border: 1px solid #c8dce7;
    border-radius: 0.7rem;
}

.booking-sms-demo h3,
.booking-sms-demo p {
    margin: 0;
}

.booking-sms-demo h3 {
    font-size: 1.7rem;
}

.booking-sms-demo > div p {
    margin-top: 0.4rem;
    color: #526b78;
    font-size: 1.3rem;
}

.contact-form .booking-sms-demo button {
    height: auto;
    margin: 0;
    padding: 0.8rem 1.2rem;
    text-transform: none;
}

#booking-sms-demo-status {
    grid-column: 1 / -1;
    min-height: 1.6rem;
    color: #526b78;
    font-size: 1.3rem;
    font-weight: 700;
}

.contact-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.form-error-summary {
    margin-bottom: 2rem;
    padding: 1.5rem 1.8rem;
    color: #7f1d1d;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-left: 0.4rem solid #be123c;
    border-radius: 0.6rem;
}

.form-error-summary ul {
    margin: 0.8rem 0 0 2rem;
}

.form-error-summary li {
    margin-bottom: 0.3rem;
}

.contact-captcha {
    margin: 0.4rem 0 2rem;
}

.contact-field-error,
.error-message {
    color: #b42318;
    font-size: 1.35rem;
}

.contact-submit,
.manager-response-submit {
    width: 100%;
    min-height: 5rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.manager-enquiries,
.manager-enquiry-detail {
    max-width: 116rem;
    margin: 3rem auto 6rem;
}

.manager-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 2.4rem;
    padding: 3rem;
    background: linear-gradient(135deg, #f0f8fc 0%, #ffffff 75%);
    border: 1px solid #d8e9f3;
    border-radius: 1rem;
}

.manager-page-header h1 {
    margin-bottom: 0.8rem;
}

.manager-page-header .btn,
.manager-review-link,
.communication-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.2rem;
    margin: 0;
    padding: 0.8rem 1.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: none;
}

.manager-table-card,
.manager-detail-card,
.manager-response-card,
.communication-history {
    background: #ffffff;
    border: 1px solid #d7e2e8;
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 2.5rem rgba(15, 50, 71, 0.06);
}

.manager-table-card {
    overflow: hidden;
}

.manager-enquiry-table {
    margin: 0;
}

.manager-enquiry-table th,
.manager-enquiry-table td {
    padding: 1.5rem;
    vertical-align: middle;
}

.manager-enquiry-table th {
    color: #334155;
    background: #f6f9fb;
    white-space: nowrap;
}

.enquiry-status,
.delivery-status {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 99rem;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.enquiry-status--submitted,
.enquiry-status--pending,
.delivery-status--pending {
    color: #854d0e;
    background: #fef9c3;
}

.enquiry-status--responded,
.delivery-status--sent {
    color: #166534;
    background: #dcfce7;
}

.delivery-status--failed {
    color: #991b1b;
    background: #fee2e2;
}

.manager-pagination {
    padding: 1.5rem 2rem;
    border-top: 1px solid #d7e2e8;
}

.manager-pagination .pagination {
    margin-bottom: 0.8rem;
}

.manager-pagination p,
.manager-empty-state {
    margin: 0;
    color: #64748b;
}

.appointment-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(18rem, 1fr));
    gap: 1.4rem;
    align-items: end;
    margin: 2rem 0;
    padding: 1.8rem;
    background: #f6f9fb;
    border: 1px solid #d7e2e8;
    border-radius: 0.8rem;
}

.appointment-filter-form .input,
.appointment-filter-form select,
.appointment-filter-form input,
.appointment-filter-actions .btn {
    margin-bottom: 0;
}

.appointment-filter-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.contact-form-choice-help,
.contact-captcha-help {
    color: #526b78;
    font-size: 1.3rem;
}

@media (max-width: 900px) {
    .appointment-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.manager-empty-state {
    padding: 2.5rem !important;
    text-align: center;
}

.manager-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(32rem, 0.8fr);
    gap: 2.4rem;
}

.manager-detail-card,
.manager-response-card,
.communication-history {
    padding: 2.6rem;
}

.manager-card-heading,
.communication-item-heading,
.communication-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.enquiry-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 2rem 0;
}

.enquiry-metadata div {
    padding: 1.3rem;
    background: #f6f9fb;
    border-radius: 0.5rem;
}

.enquiry-metadata dt {
    color: #64748b;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.enquiry-metadata dd {
    margin: 0.4rem 0 0;
    overflow-wrap: anywhere;
}

.enquiry-message {
    padding-top: 2rem;
    border-top: 1px solid #d7e2e8;
    overflow-wrap: anywhere;
}

.enquiry-message h3 {
    font-size: 1.8rem;
}

.communication-history {
    margin-top: 2.4rem;
}

.communication-history-heading {
    margin-bottom: 2rem;
}

.communication-list {
    margin: 0;
    padding: 0;
}

.communication-item {
    margin: 0 0 1.5rem;
    padding: 2rem;
    border: 1px solid #d7e2e8;
    border-left: 0.4rem solid var(--color-monash-blue);
    border-radius: 0.6rem;
    list-style: none;
}

.communication-item:last-child {
    margin-bottom: 0;
}

.communication-item-heading div,
.communication-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.5rem;
}

.communication-item-heading span,
.communication-meta {
    color: #64748b;
    font-size: 1.3rem;
}

.communication-message {
    margin: 1.6rem 0;
    padding: 1.5rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.communication-message p {
    margin-bottom: 0;
}

.communication-retry {
    margin-left: auto;
}

@media (max-width: 576px) {
    .hero-section {
        padding: 3.2rem 2rem;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .top-nav {
        align-items: flex-start;
    }

    .top-nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav-user-name {
        width: 100%;
        text-align: right;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        margin-top: 1rem;
    }

    .auth-intro {
        min-height: auto;
        padding: 3.2rem 2.4rem;
    }

    .auth-form-panel {
        padding: 3.2rem 2.4rem;
    }

    .role-home-header {
        flex-direction: column;
        padding: 3rem 2rem;
    }

    .role-account-card {
        width: 100%;
        min-width: 0;
    }

    .dashboard-simple {
        margin-top: 1rem;
    }

    .dashboard-simple-header {
        flex-direction: column;
        gap: 2rem;
    }

    .dashboard-user-summary {
        width: 100%;
        flex-basis: auto;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .contact-shell,
    .manager-detail-grid,
    .contact-name-grid,
    .enquiry-metadata {
        grid-template-columns: 1fr;
    }

    .contact-shell {
        margin-top: 1rem;
    }

    .contact-intro,
    .contact-form-panel,
    .manager-detail-card,
    .manager-response-card,
    .communication-history {
        padding: 2.5rem 2rem;
    }

    .manager-page-header,
    .manager-card-heading,
    .communication-item-heading,
    .communication-meta {
        flex-direction: column;
    }

    .manager-page-header .btn,
    .manager-review-link,
    .communication-retry {
        width: 100%;
    }

    .communication-retry {
        margin-left: 0;
    }
}

@media (min-width: 577px) and (max-width: 900px) {
    .dashboard-simple-header {
        gap: 2rem;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .contact-shell,
    .manager-detail-grid {
        grid-template-columns: 1fr;
    }

    .contact-form input:not([type='checkbox']),
    .contact-form select,
    .contact-form textarea,
    .manager-response-form textarea {
        margin-bottom: 1.8rem;
        border-color: #b9cbd6;
        border-radius: 0.6rem;
    }

    .contact-form input[type='time'],
    .contact-form input[type='date'] {
        display: block;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.6rem 1rem;
        margin-bottom: 1.8rem;
        border: 1px solid #b9cbd6;
        border-radius: 0.6rem;
        box-sizing: border-box;
    }

    .contact-form .input label {
        display: block;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .booking-sms-demo {
        grid-template-columns: 1fr;
    }

    #booking-sms-demo-status {
        grid-column: 1;
    }
}

/* Booking calendar: availability comes from remaining server-provided slots. */
.booking-calendar {
    max-width: 36rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.4rem;
    margin: 0.6rem 0 1.8rem;
    background: #fff;
    border: 1px solid #d6e3eb;
    border-radius: 1rem;
    box-shadow: 0 5px 18px rgb(26 64 87 / 8%);
}
.booking-calendar[hidden] { display: none; }
.booking-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.booking-calendar-header strong { font-size: 1.6rem; }
.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}
.booking-calendar-weekday {
    text-align: center;
    color: #627783;
    font-size: 1.2rem;
    padding: 0.5rem 0;
}
.contact-form .booking-calendar button {
    height: auto;
    min-height: 3.6rem;
    padding: 0.4rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 600;
}
.booking-calendar .calendar-available { background: #e7f3eb; color: #286440; }
.booking-calendar .calendar-unavailable { background: #fbecec; color: #995050; }
.contact-form .booking-calendar button:disabled { opacity: 1; cursor: not-allowed; }
.contact-form .booking-calendar button.calendar-available:hover { background: #d2e9dc; }
.contact-form .booking-calendar button[aria-pressed="true"] {
    border: 2px solid #0073ad;
    box-shadow: inset 0 0 0 1px #fff;
}
.contact-form .booking-calendar button:focus-visible {
    outline: 2px solid #0073ad;
    outline-offset: 2px;
}
.contact-form .booking-calendar-header button {
    background: #f1f6f9;
    color: #23607e;
    width: 3.6rem;
    font-size: 2rem;
}
.contact-form .booking-calendar-header button:disabled { color: #a1adb4; }
.booking-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.2rem 0 0.8rem;
    font-size: 1.15rem;
}
.booking-calendar-legend span { border-radius: 0.4rem; padding: 0.3rem 0.6rem; }
.contact-form .booking-calendar-close { background: transparent; color: #006ba5; }
#appointment-date[readonly] { cursor: pointer; background: #fff; }
.contact-form .booking-time-grid button {
    height: auto;
    margin: 0;
    padding: 0.8rem 1.2rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.4rem;
    border: 1px solid #c5d9e5;
    border-radius: 0.6rem;
    background: #fff;
    color: #006ca5;
}
.contact-form .booking-time-grid button[aria-pressed="true"] {
    background: #0073ad;
    color: #fff;
    border-color: #0073ad;
}
.contact-form .booking-time-grid button:hover { border-color: #0073ad; }
.booking-guide { color: #506875; margin-bottom: 1.5rem; }
.slot-date-filter { display: flex; align-items: end; gap: 1.5rem; margin: 2rem 0; }
.slot-date-filter .input { margin: 0; }
.slot-date-filter input, .slot-date-filter button { margin-bottom: 0; }
.slot-management-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1.6rem; }
.slot-management-card { display: flex; flex-direction: column; align-items: start; gap: 1.2rem; padding: 2rem; border: 1px solid #d6e3eb; border-radius: 0.8rem; background: #fff; }
.slot-management-card form, .slot-management-card button { margin: 0; }
.slot-management-card small { color: #647783; }
.slot-state { font-size: 1.3rem; padding: 0.3rem 0.8rem; border-radius: 0.5rem; }
.slot-state-open { color: #286440; background: #e7f3eb; }
.slot-state-closed { color: #995050; background: #fbecec; }
.booking-time-panel { margin: 0 0 1.8rem; }
.booking-time-panel > strong { display: block; margin-bottom: 0.8rem; }
.booking-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.booking-selection {
    border-left: 3px solid #0073ad;
    background: #f1f8fc;
    padding: 1.2rem;
    border-radius: 0 0.6rem 0.6rem 0;
    color: #325669;
}
.booking-planner { margin: 1.8rem 0; }
.booking-planner-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.booking-planner-heading h3, .booking-results-heading h4 { margin-bottom: 0.4rem; }
.booking-planner-heading p { max-width: 30rem; color: #536b78; }
.booking-choice-panel { padding: 1.6rem 0; border-top: 1px solid #e1e9ee; }
.booking-choice-panel > h4 { margin-bottom: 0.3rem; }
.booking-choice-panel > p { color: #617581; margin-bottom: 1rem; }
.booking-therapist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.contact-form .booking-therapist-grid button {
    height: auto;
    margin: 0;
    padding: 1.2rem;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    border: 1px solid #c9dbe5;
    border-radius: 0.7rem;
    color: #31566a;
    background: #fff;
}
.booking-therapist-grid button span, .booking-therapist-grid button small { display: block; }
.booking-therapist-grid button span { font-weight: 700; font-size: 1.5rem; }
.booking-therapist-grid button small { margin-top: 0.3rem; color: #687b85; font-weight: 400; }
.contact-form .booking-therapist-grid button[aria-pressed="true"] {
    color: #fff;
    background: #0073ad;
    border-color: #0073ad;
}
.booking-therapist-grid button[aria-pressed="true"] small { color: #e8f5fb; }
.contact-form .booking-date-trigger {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 1rem 1.2rem;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    color: #006ca5;
    background: #f4f9fc;
    border: 1px solid #bcd4e1;
    border-radius: 0.7rem;
}
.booking-calendar .calendar-selected,
.booking-calendar-legend .calendar-selected { color: #fff; background: #0073ad; }
.booking-results { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 2px solid #d4e4ec; }
.booking-results-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.booking-results-heading span { color: #59717e; font-size: 1.3rem; }
.booking-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.contact-form .booking-result-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    margin: 0;
    padding: 1.2rem;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    color: #294e62;
    background: #fff;
    border: 1px solid #ccdce5;
    border-radius: 0.7rem;
}
.booking-result-card span { color: #0073ad; font-weight: 700; }
.booking-result-card small { color: #647984; }
.contact-form .booking-result-card[aria-pressed="true"] {
    border-color: #0073ad;
    background: #eef8fc;
    box-shadow: inset 0 0 0 1px #0073ad;
}
.booking-empty-result { grid-column: 1 / -1; padding: 1.4rem; color: #5a707c; background: #f5f8fa; border-radius: 0.7rem; }

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-self: flex-end;
}
.filter-actions .btn-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 1rem;
}