/*
|--------------------------------------------------------------------------
| Pet Care Base
|--------------------------------------------------------------------------
*/

:root {
    --ohm-blue:#006DB0;
    --ohm-blue-2:#2FA8E8;
    --ohm-silver:#B7C0C7;
    --ohm-dark:#0B1B29;
    --ohm-white:#ffffff;

    --radius:8px;
}


* {
    box-sizing:border-box;
}


html,
body {
    min-height:100%;

    margin:0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color:var(--ohm-dark);

    background:#f6f9fb;
}


body {
    min-height:100vh;
}

/*
|--------------------------------------------------------------------------
| Stable Browser Scrollbar
|--------------------------------------------------------------------------
|
| Prevent the centered site layout from shifting horizontally when moving
| between pages that do and do not require a vertical scrollbar.
|--------------------------------------------------------------------------
*/

html {
    scrollbar-gutter: stable;
}

/*
|--------------------------------------------------------------------------
| Shared Buttons
|--------------------------------------------------------------------------
*/

.btn {
    display:inline-block;

    padding:8px 16px;

    border:none;
    border-radius:6px;

    font:inherit;
    font-weight:600;

    cursor:pointer;
    text-decoration:none;
}


.btn-primary {
    background:var(--ohm-blue);
    color:var(--ohm-white);
}


.btn-primary:hover {
    background:#005f99;
}


.btn-danger {
    background:#d32f2f;
    color:#fff;
}


.btn-danger:hover {
    background:#b71c1c;
}


.btn:disabled,
.btn.disabled {
    opacity:.5;
    cursor:not-allowed;
}

/*
|--------------------------------------------------------------------------
| Shared Message / Confirmation Modals
|--------------------------------------------------------------------------
*/

.site-modal.hidden {
    display:none;
}


.site-modal {
    position:fixed;
    inset:0;

    z-index:200000;

    display:flex;
    justify-content:center;
    align-items:center;
}


.site-modal-backdrop {
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.45);
}


.site-modal-content {
    position:relative;
    z-index:1;

    width:400px;
    max-width:calc(100vw - 32px);

    background:#fff;

    border-radius:12px;

    padding:20px 24px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);
}


.site-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:12px;
}


.site-modal-header h2 {
    margin:0;

    color:var(--ohm-blue);

    text-align:left;
}


.site-modal-close {
    padding:0;

    border:none;

    background:none;

    color:#666;

    font-size:1.6rem;

    cursor:pointer;
}


.site-modal-body {
    margin:20px 0;
}


.site-modal-footer {
    display:flex;
    justify-content:center;
    gap:12px;

    margin-top:20px;
}


#confirmModalBody {
    white-space:pre-wrap;
}

/*
|--------------------------------------------------------------------------
| Shared Editor Actions
|--------------------------------------------------------------------------
*/

.editor-buttons {
    display:flex;
    justify-content:flex-end;
    gap:12px;

    margin-top:24px;
}

/*
|--------------------------------------------------------------------------
| Shared Form Layout
|--------------------------------------------------------------------------
*/

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

    width:100%;
}


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


.form-grid label {
    display:block;

    margin-bottom:4px;

    font-weight:600;
}


.form-grid input,
.form-grid select,
.form-grid textarea {
    width:100%;

    padding:8px;

    border:1px solid #cfd8e3;
    border-radius:6px;

    font:inherit;
}


.form-grid .compact {
    width:140px;
    max-width:100%;
}


.form-grid select.compact,
.form-grid input.compact {
    width:160px;
}


.form-row {
    display:flex;
    gap:18px;

    align-items:flex-end;

    margin-bottom:16px;
}


.form-field {
    display:flex;
    flex-direction:column;
}


.form-field.compact {
    flex:0 0 auto;
}


.form-field.compact input,
.form-field.compact select {
    width:auto;

    min-width:140px;
}


.checkbox-field {
    display:flex;
    align-items:center;
    gap:10px;

    font-weight:600;
}


.checkbox-field input {
    width:auto;

    margin:0;
}


.checkbox-list {
    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:10px;
}


.checkbox-row {
    display:flex;
    align-items:center;

    gap:10px;
}


.checkbox-row input {
    width:auto;

    margin:0;
}


textarea {
    resize:vertical;
}





/*
|--------------------------------------------------------------------------
| Small Shared Utilities
|--------------------------------------------------------------------------
*/

.badge {
    display:inline-flex;

    align-items:center;

    padding:4px 8px;

    border-radius:999px;

    background:var(--ohm-white);

    color:var(--ohm-blue);

    font-size:.85rem;
    font-weight:700;
}

.petcare-app {
    display: flex;

    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    min-height: 100vh;
}


.petcare-sidebar {
    width: 240px;
    flex: 0 0 240px;

    background: white;
    border-right: 1px solid #d8dee5;

    padding: 24px;
}


.petcare-sidebar h2 {

    margin-top:0;

    color:var(--ohm-blue);

}


.petcare-sidebar h2 span {

    font-weight:400;

    font-size:1.1rem;

}


.petcare-sidebar nav {

    display:flex;

    flex-direction:column;

    gap:8px;

}


.petcare-sidebar a {

    padding:10px 14px;

    border-radius:8px;

    text-decoration:none;

    color:var(--ohm-dark);

    font-weight:600;

}


.petcare-sidebar a:hover {

    background:#eef6fb;

}


.petcare-sidebar a.active {

    background:var(--ohm-blue);

    color:white;

}


.petcare-main {
    flex: 1 1 auto;
    min-width: 0;

    padding: 32px;
}

.petcare-hero {

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:40px;

    margin:30px 0;

    align-items:start;

}


.petcare-profile-photo {

    display:flex;

    flex-direction:column;

    align-items:center;

}


.petcare-profile-photo > img:first-child {

    width:400px;

    height:400px;

    object-fit:cover;

    border-radius:16px;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

}

.petcare-reviews {

    display:flex;

    flex-direction:column;

    align-items:center;

}


.petcare-reviews .btn {

    margin-top:20px;

}

.petcare-reviews img{

    width:100%;

    height:auto;

    display:block;

}

.service-radius{

    width:400px;

    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

    transition:transform .15s ease;

}

.service-radius:hover{

    transform:scale(1.02);

}

.service-note{

    margin-top:8px;

    font-size:.9rem;

    color:#666;

}





.service-card {
    background:white;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}



.service-icon{

    flex:0 0 72px;

    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.9rem;

    background:#eef7fd;
    border-radius:16px;

    white-space:nowrap;
}

.service-card-select{
    display:flex;
    align-items:flex-start;

    width:100%;
    min-width:420px;

    padding:18px;

    border:2px solid #d8dee5;
    border-radius:12px;

    background:#fff;

    gap:18px;

    text-align:left;      /* add this */
    cursor:pointer;

    transition:.15s;
}

.service-card-info{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;   /* add this */
}

.service-card-info h3{
    margin:0;
    font-size:1.25rem;
}


.rate {

    color:#006DB0;

    font-size:1.2rem;

}

@media(max-width:900px){

    .petcare-hero {

        grid-template-columns:1fr;

        text-align:center;

    }


    .petcare-profile-photo > img:first-child {

        width:min(400px,100%);

        height:auto;

    }


    .petcare-reviews img {

        width:min(500px,100%);

    }

    #availabilityCalendar {
        grid-template-columns: 1fr;
    }

    .calendar-month {
        min-width: 0;
    }
}

/* =========================
   LOGIN
========================= */

.login-panel {

    max-width:450px;

    margin:40px 0;

}


.login-panel h1 {

    margin-bottom:24px;

}


.login-panel form {

    display:flex;

    flex-direction:column;

    gap:18px;

}


.login-panel .form-field {

    display:flex;

    flex-direction:column;

}


.login-panel .form-field label {

    font-weight:600;

    margin-bottom:6px;

}


.login-panel .form-field input {

    width:100%;

    max-width:400px;

    padding:10px 12px;

    border:1px solid #cfd8e3;

    border-radius:6px;

    font:inherit;

}


.login-panel .btn {

    align-self:flex-start;

    margin-top:6px;

}


.error-message {

    background:#fde8e8;

    border:1px solid #f5b5b5;

    color:#b71c1c;

    padding:12px;

    border-radius:8px;

    max-width:400px;

    margin-bottom:20px;

}

.success-message {

    background:#e8f5e9;

    border:1px solid #a5d6a7;

    color:#2e7d32;

    padding:12px;

    border-radius:8px;

    max-width:400px;

    margin-bottom:20px;

}

/* =========================
   CUSTOMER PROFILE EDITOR
========================= */

.customer-page-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin: 24px 0 20px;

}

.customer-page-header h2 {

    margin: 0;

}

.profile-editor {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pet-list-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}

.pet-list-header h2 {

    margin: 0;

}

/* ==============================
   Customer Pet Selector
============================== */

.pet-button-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: flex-start;

}


.pet-button {
    display:flex;
    align-items:center;
    gap:12px;

    width:max-content;
    min-width:180px;

    padding:10px 14px;

    background:white;
    border:2px solid #d8dee5;
    border-radius:8px;

    cursor:pointer;
    text-align:left;
    font-family:inherit;
}

.pet-button:hover {
    border-color: var(--ohm-blue);
}

.pet-button.selected {
    border-color: var(--ohm-blue);
    box-shadow:0 0 0 2px rgba(0,109,176,.15);
}

.pet-button:focus-visible {

    outline: 2px solid var(--ohm-blue);

}


.pet-button .pet-thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    overflow: hidden;
    border-radius: 8px;

    border: 1px solid #d7dee5;
    background: #f3f6f9;

    display: flex;
    align-items: center;
    justify-content: center;
}


.pet-button .pet-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.pet-button .pet-thumb-fallback {
    font-size: 10px;
    color: #777;
    text-align: center;
    padding: 4px;
}


.pet-button .pet-info {

    white-space: nowrap;

}


.pet-button .pet-name {

    font-weight: bold;

}


.pet-button .pet-meta {

    font-size: .85rem;

    color: #666;

}

.pet-editor-title {
    margin-top:0;
    margin-bottom:20px;

    font-size:1.2rem;
    font-weight:700;
    color:var(--ohm-blue);
}

.pet-photo-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 12px;
}


.pet-photo-message {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    max-width: 180px;
}


.pet-photo-overlay .btn {
    margin-top: auto;
}

.required {
    color:#c62828;
}

/*
|--------------------------------------------------------------------------
| Staff Onboarding Header
|--------------------------------------------------------------------------
*/

.staff-onboarding-header {
    margin-bottom: 28px;
}


.staff-onboarding-title {
    margin: 0 0 14px;

    font-size: 1.15rem;
    font-weight: 700;

    color: var(--ohm-dark);
}


.staff-onboarding-header .setup-progress {
    margin-bottom: 0;
}


.staff-onboarding-header #stepIndicator {
    margin-bottom: 4px;

    color: var(--ohm-blue);

    font-size: 0.85rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.staff-onboarding-step-description {
    margin: 0;

    color: #66727d;

    font-size: 0.95rem;
}






.dashboard-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}

.dashboard-subtitle {
    margin-top:-8px;
    color:#66727d;
}


.dashboard-section-header {
    margin-bottom:18px;
}

.dashboard-section-header h2 {
    margin-bottom:4px;
}

.dashboard-section-header p {
    margin:0;
    color:#66727d;
}

/*
|--------------------------------------------------------------------------
| Booking Detail Layout
|--------------------------------------------------------------------------
*/

.booking-details-grid {
    display:flex;
    gap:24px;
    align-items:flex-start;

    margin:18px 0;
}


.booking-column {
    flex:1;
    min-width:0;

    padding:16px;

    background:#fafbfc;

    border:1px solid #d8dee5;
    border-radius:8px;
}


.booking-column h3 {
    margin-top:0;
    margin-bottom:12px;
}


.booking-divider {
    width:1px;

    align-self:stretch;

    background:#d8dee5;
}

.booking-request-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}


.booking-request-card {
    display:flex;
    justify-content:space-between;
    gap:24px;

    background:white;

    border:1px solid #d8dee5;
    border-radius:12px;

    padding:20px;

    text-decoration:none;
    color:inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.booking-request-card:hover {
    border-color:var(--ohm-blue);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transform:translateY(-1px);
}


.booking-request-card-main {
    flex:1;
}


.booking-request-title-row {
    display:flex;
    justify-content:space-between;
    gap:15px;
}


.booking-request-service {
    font-size:1.15rem;
    font-weight:700;
    color:var(--ohm-dark);
}


.booking-request-number {
    margin-top:3px;
    font-size:.85rem;
    color:#75808a;
}


.booking-request-details {
    display:flex;
    flex-wrap:wrap;
    gap:24px;

    margin-top:18px;
}

.booking-request-details > div {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.booking-request-details strong {
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#79838c;
}



.booking-request-card-total {
    min-width:140px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
}


.booking-request-total-label {
    color:#75808a;
    font-size:.8rem;
}


.booking-request-total-value {
    font-size:1.4rem;
    font-weight:700;
}


.booking-request-view {
    margin-top:8px;
    color:var(--ohm-blue);
    font-weight:600;
    font-size:.9rem;
}


.booking-request-status {
    display:inline-flex;
    align-items:center;

    padding:5px 10px;
    border-radius:999px;

    font-size:.78rem;
    font-weight:700;

    text-transform:capitalize;

    background:#eef2f5;
    color:#53606a;
}

.booking-request-status-requested {
    background:#fff4d6;
    color:#755900;
}

.booking-request-status-confirmed {
    background:#e2f5e8;
    color:#236439;
}

.booking-request-status-cancelled {
    background:#fbe5e5;
    color:#8a3030;
}

.booking-request-status-completed {
    background:#e7eef7;
    color:#365b86;
}


.booking-request-empty,
.booking-request-loading,
.booking-request-error {
    background:white;
    border:1px solid #d8dee5;
    border-radius:12px;
    padding:30px;
    text-align:center;
    font-weight:500;
}


/*
|--------------------------------------------------------------------------
| Booking request viewer
|--------------------------------------------------------------------------
*/

.booking-request-view-toolbar {
    margin-bottom:18px;
}


.booking-request-document {
    max-width:900px;

    background:white;

    border:1px solid #d8dee5;
    border-radius:14px;

    padding:32px;

    box-shadow:0 4px 18px rgba(0,0,0,.05);
}


.booking-request-document-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;

    padding-bottom:24px;

    border-bottom:1px solid #e2e6ea;
}


.booking-request-eyebrow {
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;

    color:var(--ohm-blue);
}


.booking-request-document-header h1 {
    margin:4px 0;
}


.booking-request-document-number {
    color:#74808a;
}


.booking-request-detail-grid {
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:20px;

    padding:24px 0;
}


.booking-request-detail-grid > div {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.booking-request-document-section {
    padding:24px 0;
    border-top:1px solid #e2e6ea;
}

.booking-request-document-section h2 {
    margin-top:0;
}


.booking-request-schedule-range {
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
}


.schedule-endpoint {
    display:flex;
    flex-direction:column;
    gap:4px;

    padding:14px 18px;

    background:#f6f8fa;
    border-radius:10px;
}


.schedule-label {
    font-size:.75rem;
    font-weight:800;
    color:var(--ohm-blue);
}


.schedule-through {
    color:#75808a;
    font-style:italic;
}


.booking-request-occurrences {
    display:flex;
    flex-direction:column;
    gap:8px;
}


.booking-request-occurrence {
    display:flex;
    justify-content:space-between;
    gap:15px;

    padding:12px 14px;

    background:#f6f8fa;
    border-radius:8px;
}


.booking-request-addon-row,
.booking-request-charge-row {
    display:flex;
    justify-content:space-between;
    gap:20px;

    padding:12px 0;

    border-bottom:1px solid #edf0f2;
}


.charge-meta {
    margin-top:3px;
    color:#75808a;
    font-size:.85rem;
}


.booking-request-totals {
    width:min(100%,360px);
    margin-left:auto;
    margin-top:22px;
}


.booking-request-totals > div {
    display:flex;
    justify-content:space-between;
    gap:20px;

    padding:6px 0;
}


.booking-request-grand-total {
    margin-top:8px;
    padding-top:12px !important;

    border-top:2px solid #d8dee5;

    font-size:1.15rem;
}


.booking-request-document-footer {
    margin-top:12px;

    padding-top:20px;

    border-top:1px solid #e2e6ea;

    color:#75808a;
    font-size:.85rem;
}


@media (max-width:700px) {

    .dashboard-header {
        flex-direction:column;
    }

    .booking-request-card {
        flex-direction:column;
    }

    .booking-request-card-total {
        align-items:flex-start;
    }

    .booking-request-title-row {
        flex-direction:column;
    }

    .booking-request-document {
        padding:20px;
    }

}

.staff-booking-table {
    width: 100%;
    border-collapse: collapse;

    background: white;

    border: 1px solid #d8dee5;
    border-radius: 12px;
}


.staff-booking-table th,
.staff-booking-table td {
    padding: 12px 14px;
    text-align: left;

    border-bottom: 1px solid #edf0f2;
}


.staff-booking-table th {
    position: sticky;
    top: 0;

    background: #f6f8fa;

    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;

    z-index: 1;
}


.staff-booking-table-empty {
    text-align: center !important;
    color: #75808a;

    padding: 32px !important;
}


/*
|--------------------------------------------------------------------------
| Request editor
|--------------------------------------------------------------------------
*/

.booking-request-staff-editor {
    max-width: 900px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;

    margin-bottom: 20px;

    padding: 20px;

    background: white;

    border: 1px solid #d8dee5;
    border-radius: 12px;
}


.booking-request-staff-editor h2 {
    margin: 0 0 4px;
}


.booking-request-staff-editor p {
    margin: 0;
    color: #75808a;
}


.booking-request-staff-editor-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}


.booking-request-staff-editor-controls label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.booking-request-staff-editor-controls select {
    min-width: 210px;

    padding: 9px 10px;

    border: 1px solid #cfd6dd;
    border-radius: 7px;

    background: white;
}


@media (max-width: 700px) {

    .booking-request-staff-editor {
        flex-direction: column;
        align-items: stretch;
    }


    .booking-request-staff-editor-controls {
        flex-direction: column;
        align-items: stretch;
    }


    .booking-request-staff-editor-controls select {
        width: 100%;
    }

}

.staff-request-group {
    margin-bottom: 26px;
}


.staff-request-group:last-child {
    margin-bottom: 0;
}


.staff-request-group-header {
    margin-bottom: 10px;
    padding: 0 4px;

    font-size: 1rem;
    font-weight: 800;

    color: var(--ohm-blue);
}


.staff-request-group-title {
    font-size: .82rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;

    color: #5f6b75;
}


.staff-request-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 24px;

    padding: 0 7px;

    border-radius: 999px;

    background: #edf1f4;

    font-size: .75rem;
    font-weight: 700;

    color: #59636d;
}


.staff-request-group-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staff-request-group-requested
.staff-request-group-title {
    color: var(--ohm-blue);
}

/*
|--------------------------------------------------------------------------
| Staff Booking Request Editor
|--------------------------------------------------------------------------
*/

.staff-sitter-editor {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


.booking-staff-select {
    min-width: 220px;
    padding: 9px 12px;

    border: 1px solid #cfd8e3;
    border-radius: 8px;

    background: #fff;
    font: inherit;
}


.staff-request-actions {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 24px;
}


/*
| Push Save + Confirmation to the far right.
*/

.staff-request-actions
#cancelBookingRequest {
    margin-right: auto;
}


/*
| Give the primary actions a little breathing room.
*/

.staff-request-actions
#saveBookingRequestChanges,

.staff-request-actions
#sendBookingRequestConfirmation {
    padding-left: 18px;
    padding-right: 18px;
}


/*
| Disabled workflow actions.
*/

.staff-request-actions
button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Customer booking confirmation
|--------------------------------------------------------------------------
*/

.booking-request-confirmation-intro {
    margin-bottom: 24px;
}


.booking-request-confirmation-intro h1 {
    margin-bottom: 6px;
}


.booking-request-confirmation-intro p {
    margin: 0;
    color: #66727d;
}


.booking-request-confirmation-panel {
    margin-top: 30px;
    padding-top: 24px;

    border-top: 2px solid #e2e7eb;
}


.booking-request-confirmation-panel h2 {
    margin-top: 0;
}


.booking-confirmation-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 22px;
}


.booking-confirmation-actions
#cancelBookingRequest {
    margin-right: auto;
}


.booking-confirmation-actions
#confirmBookingRequest {
    padding-left: 22px;
    padding-right: 22px;
}

/*
|--------------------------------------------------------------------------
| Payment
|--------------------------------------------------------------------------
*/

.payment-page {
    max-width: 900px;
}


.payment-header {
    margin-bottom: 24px;
}


.payment-header h1 {
    margin-bottom: 6px;
}


.payment-header p {
    margin: 0;
    color: #66727d;
}


.payment-summary-card {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );

    gap: 20px;

    padding: 22px;

    margin-bottom: 28px;

    background: #fff;

    border: 1px solid #dde4ea;
    border-radius: 12px;
}


.payment-summary-label {
    margin-bottom: 4px;

    color: #6b7680;

    font-size: .84rem;
    font-weight: 600;
}


.payment-summary-total strong {
    font-size: 1.35rem;
}


.payment-method-section,
.payment-method-selected {
    padding: 24px;

    background: #fff;

    border: 1px solid #dde4ea;
    border-radius: 12px;
}


.payment-method-section h2,
.payment-method-selected h2 {
    margin-top: 0;
}


.payment-method-intro {
    color: #6b7680;
}


.payment-method-options {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}


.payment-method-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;

    width: 100%;

    padding: 18px;

    border: 1px solid #cfd8e3;
    border-radius: 10px;

    background: #fff;

    font: inherit;
    text-align: left;

    cursor: pointer;
}


.payment-method-option:hover {
    border-color: var(--ohm-blue);

    background: #f7fbfe;
}

.payment-method-option.selected {
    border-color: var(--ohm-blue);
    background: #eef7fd;

    box-shadow:
        0 0 0 3px
        rgba(0,109,176,.15);
}

.payment-method-option.selected:hover {
    border-color: var(--ohm-blue);
    background: #eef7fd;
}

.payment-method-option.selected strong {
    color: var(--ohm-blue);
}

.payment-method-option strong {
    font-size: 1rem;
}


.payment-method-option span {
    color: #6b7680;
    font-size: .85rem;
}


.payment-method-divider {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 22px 0;

    color: #84909a;
}



.payment-method-divider::before,
.payment-method-divider::after {
    content: "";

    height: 1px;
    flex: 1;

    background: #e0e5e9;
}


.payment-method-card {
    max-width: 100%;
}


@media (max-width: 700px) {

    .payment-method-options {
        grid-template-columns: 1fr;
    }

}

/*
|--------------------------------------------------------------------------
| Dashboard Show All
|--------------------------------------------------------------------------
*/

.dashboard-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}


.dashboard-section-title-row h2 {
    margin: 0;
}


.dashboard-show-all-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 0.9rem;
    font-weight: 400;

    color: #66727d;

    cursor: pointer;
}


.dashboard-show-all-small input {
    margin: 0;
}

/*
|--------------------------------------------------------------------------
| Operational Booking Editor
|--------------------------------------------------------------------------
*/

.booking-operational-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    gap: 20px;
}


.booking-operational-field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


/*
|--------------------------------------------------------------------------
| Booking Detail Labels / Values
|--------------------------------------------------------------------------
*/

.booking-operational-field .detail-label {
    display:block;

    margin-bottom:4px;

    font-weight:700;

    color:var(--ohm-dark);
}


.booking-operational-field .detail-value {
    display:block;

    font-weight:400;

    color:var(--ohm-dark);
}

.booking-operational-field input,
.booking-operational-field select,
.booking-operational-field textarea {
    width: 100%;

    padding: 9px 11px;

    border: 1px solid #cfd8e3;
    border-radius: 8px;

    background: white;

    font: inherit;
}


.booking-operational-field input:disabled,
.booking-operational-field select:disabled,
.booking-operational-field textarea:disabled {
    opacity: 1;

    color: inherit;

    background: #f5f7f9;

    cursor: default;
}


.booking-notes-field {
    margin-top: 20px;
}


.booking-operational-notice {
    margin-top: 10px;
    margin-bottom: 10px;
    
    padding: 12px 14px;

    border-radius: 8px;

    background: #f5f8fa;

    color: #596772;
}


.booking-operational-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.booking-operational-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 10px 0;

    border-bottom: 1px solid #e4e8eb;
}

.staff-attention-section {
    border-top: 3px solid #d9534f;
}

.staff-attention-request-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.staff-attention-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 14px;

    border: 1px solid #d8dee5;
    border-radius: 8px;

    background: white;

    color: inherit;
    text-decoration: none;
}

.staff-attention-request:hover {
    background: #f8fafc;
}

.staff-attention-request-urgent {
    border-left: 4px solid #d9534f;
}

.staff-attention-request-main {
    min-width: 0;
}

.staff-attention-request-service {
    font-weight: 700;
}

.staff-attention-request-meta {
    margin-top: 3px;
    font-size: 0.9rem;
    color: #667085;
}

.staff-attention-request-status {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;

    font-size: 0.9rem;
}

.staff-action-needed {
    color: #b42318;
    font-weight: 700;
}

.customer-request-status-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-request-customer-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
    padding-top: 20px;

    border-top: 1px solid #d8dee5;
}

.booking-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-cancel-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #d8dee5;
}

.petcare-page {
    width: 100%;
    margin: 0;
}

.petcare-page-busy {
    opacity: 0.65;
    cursor: wait;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.petcare-page-busy * {
    cursor: wait !important;
}

/*
|--------------------------------------------------------------------------
| Staff Profile
|--------------------------------------------------------------------------
*/

.staff-profile-page {
    max-width: 1000px;
}


.staff-profile-editor {
    display:flex;
    flex-direction:column;
    gap:24px;
}


.staff-profile-section {
    padding:24px;

    background:#fff;

    border:1px solid #d8dee5;
    border-radius:12px;
}


.staff-profile-section-header {
    margin-bottom:20px;
}


.staff-profile-section-header h2 {
    margin:0 0 5px;
}


.staff-profile-section-header p {
    margin:0;
    color:#66727d;
}


.staff-profile-field-grid {
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:18px 22px;
}


.staff-profile-field {
    display:flex;
    flex-direction:column;
    gap:6px;
}


.staff-profile-field > span {
    font-weight:600;
}


.staff-profile-field input,
.staff-profile-field select,
.staff-profile-field textarea {
    width:100%;

    box-sizing:border-box;

    padding:10px 12px;

    border:1px solid #cfd8e3;
    border-radius:8px;

    background:#fff;

    font:inherit;
}


.staff-profile-field textarea {
    resize:vertical;

    line-height:1.5;
}


.staff-profile-field small {
    color:#75808a;
}


.staff-profile-field-wide {
    grid-column:1 / -1;
}


.staff-profile-field-full {
    width:100%;

    margin-top:18px;
}


.staff-profile-years-field {
    max-width:220px;
}


.staff-profile-photo-editor {
    display:flex;
    align-items:center;
    gap:24px;
}


.staff-profile-primary-photo {
    display:flex;
    flex-direction:column;
    gap:8px;
}


.staff-profile-primary-photo-label {
    font-weight:700;
    color:#263746;
}


.staff-profile-photo-preview {
    width:160px;
    height:160px;

    flex:0 0 160px;

    overflow:hidden;

    border:1px solid #d8dee5;
    border-radius:16px;

    background:#eef3f6;
}


.staff-profile-photo-preview img {
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


.staff-profile-photo-fallback {
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2.5rem;
    font-weight:700;

    color:var(--ohm-blue);
}

/*
|--------------------------------------------------------------------------
| Respect photo preview hidden state
|--------------------------------------------------------------------------
*/

.staff-profile-photo-preview [hidden] {
    display:none !important;
}

.staff-profile-photo-controls {
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
}


.staff-profile-photo-help {
    margin:0;

    color:#75808a;
    font-size:.85rem;
}


.staff-profile-photo-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill,182px);
    gap:16px;
    margin-top:22px;
}


.staff-profile-photo-gallery:empty {
    display:none;
}


.staff-profile-photo-card {
    width:182px;
    min-width:0;
    min-height:244px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    padding:10px;
    border:1px solid #d8dee5;
    border-radius:12px;
    background:#fff;
}


.staff-profile-photo-card.is-primary {
    border-color:var(--ohm-blue);
    box-shadow:0 0 0 1px var(--ohm-blue);
}


.staff-profile-photo-card-image {
    position:relative;
    width:160px;
    height:160px;
    flex:0 0 160px;
    overflow:hidden;
    border-radius:10px;
    background:#eef3f6;
}


.staff-profile-photo-card-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


.staff-profile-photo-primary-badge {
    position:absolute;
    top:10px;
    left:10px;
    padding:5px 9px;
    border-radius:999px;
    background:var(--ohm-blue);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    line-height:1;
}


.staff-profile-photo-card-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:auto;
    padding-top:10px;
}


.staff-profile-photo-card-actions .btn {
    min-width:0;
    width:auto;
    flex:0 0 auto;
    padding:8px 10px;
    font-size:.85rem;
}


.staff-profile-actions {
    display:flex;
    justify-content:flex-end;

    padding-bottom:20px;
}


.staff-testimonial-editor {
    margin-top:24px;
}


.staff-testimonial-form {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:18px 22px;
    align-items:start;
}


.staff-testimonial-text-field {
    grid-column:2;
    grid-row:1 / span 3;
}


.staff-testimonial-form-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}


.staff-testimonial-list {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:22px;
}


.staff-testimonial-empty {
    padding:18px;
    border:1px dashed #cfd8e3;
    border-radius:10px;
    color:#66727d;
    text-align:center;
}


.staff-testimonial-card {
    padding:18px;
    border:1px solid #d8dee5;
    border-radius:10px;
    background:#f8fbfd;
}


.staff-testimonial-card-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}


.staff-testimonial-card-heading > div:first-child {
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    align-items:center;
}


.staff-testimonial-type,
.staff-public-profile-review-type {
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:#e7f4fc;
    color:var(--ohm-blue);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.035em;
    text-transform:uppercase;
}


.staff-testimonial-card time,
.staff-public-profile-review-heading time {
    color:#66727d;
    font-size:.85rem;
}


.staff-testimonial-card-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}


.staff-testimonial-card-actions .btn {
    width:auto;
    min-width:0;
    padding:7px 10px;
}


.staff-testimonial-card p {
    margin:14px 0 0;
    color:#3f4f5c;
    line-height:1.65;
}


.staff-testimonial-author,
.staff-public-profile-review-author {
    margin-top:10px;
    color:#526371;
    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| Public Staff Profile
|--------------------------------------------------------------------------
*/

.staff-profile-preview-button {
    flex:0 0 auto;
}


.staff-public-profile-page,
.staff-public-photos-page {
    max-width:1100px;
}


.staff-profile-preview-banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
    padding:14px 16px;
    border:1px solid #9bcbe8;
    border-radius:10px;
    background:#edf8ff;
}


.staff-profile-preview-banner > div {
    display:flex;
    flex-direction:column;
    gap:3px;
}


.staff-public-profile-back-row {
    margin-bottom:18px;
}


.staff-public-profile-hero {
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:34px;
    align-items:start;
    padding:30px;
    border:1px solid #d8dee5;
    border-radius:16px;
    background:#fff;
}


.staff-public-profile-photo-column {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}


.staff-public-profile-primary-photo {
    width:260px;
    height:260px;
    overflow:hidden;
    border:1px solid #d8dee5;
    border-radius:18px;
    background:#eef3f6;
}


.staff-public-profile-primary-photo img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


.staff-public-profile-photo-fallback {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ohm-blue);
    font-size:4rem;
    font-weight:700;
}


.staff-public-profile-more-photos {
    width:100%;
    max-width:260px;
    box-sizing:border-box;
    text-align:center;
}


.staff-public-profile-intro {
    min-width:0;
}


.staff-public-profile-services {
    margin-top:24px;
}


.staff-public-profile-services h2 {
    margin:0 0 12px;
    color:var(--ohm-blue);
    font-size:1.15rem;
}


.staff-public-profile-service-list {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:fit-content;
    max-width:100%;
}


.staff-public-profile-service {
    min-width:0;
    display:grid;
    grid-template-columns:auto 130px auto;
    column-gap:16px;
    row-gap:10px;
    justify-content:start;
    align-items:center;
    padding:12px;
    border:1px solid #d8e4ec;
    border-radius:10px;
    background:#f8fbfd;
}


.staff-public-profile-service-icon {
    font-size:1.35rem;
    line-height:1;
}


.staff-public-profile-service-name {
    min-width:0;
    color:#243746;
    font-weight:700;
}


.staff-public-profile-service-price {
    color:var(--ohm-blue);
    font-weight:700;
    text-align:right;
    white-space:nowrap;
}


.staff-public-profile-service-price small {
    display:block;
    margin-top:2px;
    color:#66727d;
    font-size:.72rem;
    font-weight:500;
}


.staff-public-profile-eyebrow {
    margin:0 0 6px;
    color:var(--ohm-blue);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}


.staff-public-profile-intro h1,
.staff-public-photos-header h1 {
    margin:0;
    color:var(--ohm-blue);
}


.staff-public-profile-headline {
    max-width:680px;
    margin:12px 0 0;
    color:#455767;
    font-size:1.25rem;
    line-height:1.45;
}


.staff-public-profile-facts {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}


.staff-public-profile-facts span {
    padding:7px 11px;
    border:1px solid #cfe2ee;
    border-radius:999px;
    background:#f5fbff;
    color:#29475b;
    font-size:.9rem;
    font-weight:600;
}


.staff-public-profile-book {
    display:inline-block;
    margin-top:22px;
}


.staff-public-profile-book:disabled {
    opacity:.72;
    cursor:default;
}


.staff-public-profile-content {
    display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(260px,.75fr);
    gap:22px;
    align-items:start;
    margin-top:22px;
}


.staff-public-profile-main,
.staff-public-profile-sidebar {
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
}


.staff-public-profile-sidebar {
    height:auto;
    min-height:0;
}


.staff-public-profile-reviews {
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
}


.staff-public-profile-section {
    padding:24px;
    border:1px solid #d8dee5;
    border-radius:14px;
    background:#fff;
}


.staff-public-profile-section h2 {
    margin:0 0 14px;
    color:#0b1b29;
}


.staff-public-profile-main .staff-public-profile-section h2,
.staff-public-profile-sidebar .staff-public-profile-section h2 {
    color:var(--ohm-blue);
}


.staff-public-profile-copy {
    color:#3f4f5c;
    line-height:1.7;
}


.staff-public-profile-review-summary {
    padding:16px;
    border-radius:10px;
    background:#f4f7f9;
}


.staff-public-profile-review-summary p {
    margin:6px 0 0;
    color:#66727d;
    line-height:1.5;
}


.staff-public-profile-review-list {
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:18px;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:8px;
    scrollbar-gutter:stable;
}


.staff-public-profile-review-card {
    padding:0 0 18px;
    border-bottom:1px solid #d8dee5;
}


.staff-public-profile-review-card[hidden] {
    display:none;
}


.staff-public-profile-review-card.is-last-visible {
    padding-bottom:0;
    border-bottom:0;
}


.staff-public-profile-review-heading {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:5px;
    align-items:baseline;
}


.staff-public-profile-review-type {
    display:inline;
    padding:0;
    border-radius:0;
    background:transparent;
    color:#0b1b29;
    font-size:inherit;
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
}


.staff-public-profile-review-heading time {
    color:#3f4f5c;
    font-size:inherit;
    font-weight:400;
}


.staff-public-profile-review-rating {
    display:flex;
    gap:2px;
    margin-top:9px;
    font-size:1.15rem;
    line-height:1;
}


.staff-public-profile-review-rating .is-filled {
    color:#e0a000;
}


.staff-public-profile-review-rating .is-empty {
    color:#9aa6af;
}


.staff-public-profile-review-copy {
    margin-top:12px;
    color:#3f4f5c;
    line-height:1.6;
}


.staff-public-profile-feedback-controls {
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid #d8dee5;
}


.staff-public-profile-feedback-control {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    color:#334957;
    font-size:.88rem;
    font-weight:600;
}


.staff-public-profile-feedback-break {
    flex:0 0 100%;
    width:0;
    height:0;
}


.staff-public-profile-feedback-control select {
    min-width:0;
    padding:6px 8px;
    border:1px solid #cfd8e3;
    border-radius:7px;
    background:#fff;
    color:#243746;
    font:inherit;
}


.staff-public-profile-feedback-check {
    cursor:pointer;
}


.staff-public-profile-feedback-check input {
    width:17px;
    height:17px;
    margin:0;
    accent-color:var(--ohm-blue);
}


.staff-public-profile-feedback-empty {
    margin:0;
    padding:14px;
    border-radius:9px;
    background:#f4f7f9;
    color:#66727d;
    text-align:center;
}


.staff-public-profile-area-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    padding-left:20px;
}


/*
|--------------------------------------------------------------------------
| Public Staff Photo Feed
|--------------------------------------------------------------------------
*/

.staff-public-photos-header {
    margin-bottom:20px;
}


.staff-public-photos-header > p:last-child {
    margin:8px 0 0;
    color:#66727d;
}


.staff-public-photo-feed {
    width:min(100%,624px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,300px));
    justify-content:center;
    gap:16px;
    margin:0 auto;
}


.staff-public-photo-item {
    width:100%;
    margin:0;
    padding:8px;
    box-sizing:border-box;
    border:1px solid #d8dee5;
    border-radius:14px;
    background:#fff;
}


.staff-public-photo-view {
    position:relative;
    width:100%;
    aspect-ratio:1;
    display:block;
    overflow:hidden;
    padding:0;
    border:0;
    border-radius:9px;
    background:#eef3f6;
    cursor:pointer;
}


.staff-public-photo-view:focus-visible {
    outline:3px solid rgba(0,109,176,.35);
    outline-offset:3px;
}


.staff-public-photo-view img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


.staff-public-photo-primary-badge {
    position:absolute;
    left:10px;
    bottom:10px;
    padding:5px 9px;
    border-radius:999px;
    background:var(--ohm-blue);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}


@media (max-width:480px) {

    .staff-public-photo-feed {
        gap:10px;
    }


    .staff-public-photo-item {
        padding:6px;
    }

}


@media (max-width:850px) {

    .staff-public-profile-hero {
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
    }


    .staff-public-profile-facts {
        justify-content:center;
    }


    .staff-public-profile-content {
        grid-template-columns:1fr;
        align-items:start;
    }


    .staff-public-profile-sidebar {
        width:100%;
        height:auto;
    }


    .staff-public-profile-reviews {
        display:block;
        overflow:visible;
    }


    .staff-public-profile-review-list {
        max-height:520px;
    }

}


@media (max-width:600px) {

    .staff-public-profile-review-list {
        max-height:60vh;
    }

    .staff-testimonial-form {
        grid-template-columns:1fr;
    }


    .staff-testimonial-text-field {
        grid-column:auto;
        grid-row:auto;
    }


    .staff-testimonial-card-heading {
        flex-direction:column;
    }

    .staff-profile-preview-banner {
        align-items:stretch;
        flex-direction:column;
    }


    .staff-profile-preview-banner .btn {
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }


    .staff-public-profile-hero {
        gap:22px;
        padding:18px;
    }


    .staff-public-profile-primary-photo {
        width:min(260px,100%);
        height:auto;
        aspect-ratio:1;
    }


    .staff-public-profile-section {
        padding:18px;
    }


    .staff-public-profile-service-list {
        grid-template-columns:1fr;
    }


    .staff-profile-preview-button {
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

}

/*
|--------------------------------------------------------------------------
| Staff Email Notification Preferences
|--------------------------------------------------------------------------
*/

.staff-email-preference-list {
    display:flex;
    flex-direction:column;

    gap:10px;
}


.staff-email-preference {
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:12px 14px;

    border:1px solid #d8dee5;
    border-radius:8px;

    background:#fff;

    cursor:pointer;
}


.staff-email-preference:hover {
    background:#f7f9fb;
}


.staff-email-preference input[type="checkbox"] {
    width:auto;
    margin:3px 0 0;

    flex:0 0 auto;
}


.staff-email-preference-content {
    display:flex;
    flex-direction:column;

    gap:3px;
}


.staff-email-preference-label {
    font-weight:600;
}


.staff-email-preference-required {
    display:inline-block;

    margin-left:7px;
    padding:2px 6px;

    border-radius:999px;

    background:#eef3f6;

    color:#75808a;

    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}


.staff-email-preference:has(
    input:disabled
) {
    cursor:default;

    background:#f7f9fb;
}


.staff-email-preference:has(
    input:disabled
) .staff-email-preference-label {
    color:#59636c;
}

/*
|--------------------------------------------------------------------------
| Staff Profile - Service Areas
|--------------------------------------------------------------------------
*/

.staff-service-area-list {
    display:flex;
    flex-direction:column;
    gap:18px;
}


.staff-service-area-card {
    display:flex;
    flex-direction:column;
    gap:14px;

    padding:16px 18px;

    border:1px solid #d8dee5;
    border-radius:10px;

    background:#fafcfd;
}


.staff-profile-toggle {
    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;
}


.staff-profile-toggle input {
    flex:0 0 auto;

    width:auto;
    margin:0;
}


.staff-service-area-heading {
    align-items:center;
}


.staff-service-area-name {
    display:flex;
    align-items:baseline;
    gap:8px;

    min-width:0;
}


.staff-service-area-name strong {
    font-size:1rem;
}


.staff-service-area-name small {
    color:#75808a;
    font-size:.84rem;
    font-weight:400;
}


.staff-service-radius-row {
    display:flex;
    align-items:center;
    gap:10px;

    padding-left:28px;
}


.staff-service-radius-label {
    font-weight:600;
}


.staff-service-radius-row input {
    width:100px;

    padding:8px 10px;

    border:1px solid #cfd8e3;
    border-radius:8px;

    background:#fff;

    font:inherit;
}


.staff-service-radius-unit {
    font-weight:400;
    color:var(--ohm-dark);
}


/*
|--------------------------------------------------------------------------
| Staff Profile - Weekly Availability
|--------------------------------------------------------------------------
*/

.staff-weekly-availability {
    display:grid;

    grid-template-columns:
        repeat(
            7,
            minmax(125px,1fr)
        );

    gap:10px;

    width:100%;

    overflow-x:auto;

    padding-bottom:6px;
}


.staff-availability-day-card {
    display:flex;
    flex-direction:column;
    gap:12px;

    min-width:125px;

    padding:14px 10px;

    border:1px solid #d8dee5;
    border-radius:10px;

    background:#fafcfd;
}


.staff-availability-day-name {
    justify-content:center;

    min-height:28px;

    font-weight:700;
}


.staff-availability-time-field {
    display:flex;
    flex-direction:column;
    gap:5px;
}


.staff-availability-time-field > span {
    font-size:.78rem;
    font-weight:600;

    color:#66727d;
}


.staff-availability-time-field input {
    width:100%;
    min-width:0;

    padding:8px 6px;

    border:1px solid #cfd8e3;
    border-radius:8px;

    background:#fff;

    font:inherit;
    font-size:.88rem;
}


.staff-availability-time-field input:disabled {
    background:#eef1f3;
    color:#929ba3;

    cursor:not-allowed;
}


/*
|--------------------------------------------------------------------------
| Staff Profile - Exceptions / Holidays
|--------------------------------------------------------------------------
*/

.staff-exception-list {
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-bottom:16px;
}


.staff-exception-card {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:12px 14px;

    border:1px solid #d8dee5;
    border-radius:10px;

    background:#fafcfd;
}


.staff-exception-card > div:first-child {
    min-width:0;
}


.staff-exception-card strong {
    display:block;

    font-size:.96rem;
}


.staff-exception-card .summary-meta {
    margin:3px 0 0;

    font-size:.82rem;
}


.staff-exception-actions {
    display:flex;
    align-items:center;

    gap:8px;

    flex:0 0 auto;
}


.staff-exception-actions .btn {
    white-space:nowrap;
}


/*
|--------------------------------------------------------------------------
| Staff Profile - Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:700px) {

    .staff-service-area-name {
        flex-wrap:wrap;
        row-gap:2px;
    }


    .staff-service-radius-row {
        padding-left:0;
    }


    /*
     * Keep the seven-day calendar horizontal.
     *
     * Scrolling is better here than stacking seven large
     * weekday controls vertically.
     */

    .staff-weekly-availability {
        grid-template-columns:
            repeat(
                7,
                125px
            );
    }


    .staff-exception-card {
        align-items:center;
    }


    .staff-exception-actions {
        flex-direction:column;
        align-items:stretch;
    }

}

@media (max-width:700px) {

    .staff-profile-field-grid {
        grid-template-columns:1fr;
    }


    .staff-profile-field-wide {
        grid-column:auto;
    }


    .staff-profile-photo-editor {
        flex-direction:column;
        align-items:flex-start;
    }


    .staff-profile-photo-card-actions {
        flex-direction:row;
        align-items:center;
    }


    .staff-profile-photo-card-actions .btn {
        width:auto;
    }

}


/*
|--------------------------------------------------------------------------
| Operational Booking Edit Layout
|--------------------------------------------------------------------------
*/

.booking-operational-edit-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.booking-operational-modifiers {
    grid-column:1 / -1;

    margin-top:4px;
}


.booking-operational-modifiers h3 {
    margin:0 0 12px;
}


@media (max-width:700px) {

    .booking-operational-edit-grid {
        grid-template-columns:1fr;
    }


    .booking-operational-modifiers {
        grid-column:auto;
    }

}

/*
|--------------------------------------------------------------------------
| Staff Booking Page
|--------------------------------------------------------------------------
*/

.booking-staff-page {
    max-width:1000px;
}

/*
|--------------------------------------------------------------------------
| Operational Booking Input Sizing
|--------------------------------------------------------------------------
*/

/*
| Date/time controls
|
| Give the native datetime-local control enough room for its browser
| calendar/time affordance without making it span the whole grid cell.
*/

.booking-operational-edit-grid
#bookingStartDatetime,

.booking-operational-edit-grid
#bookingEndDatetime {
    width:320px;
    max-width:100%;

    padding-right:75px;
}


/*
| Small selects
*/

.booking-operational-edit-grid
#bookingStaffId,

.booking-operational-edit-grid
#bookingStatus {
    width:max-content;
    min-width:0;
    max-width:100%;
}

/*
|--------------------------------------------------------------------------
| Staff Booking Definition Rows
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Staff Booking Editor Sections
|--------------------------------------------------------------------------
*/

.booking-editor-section {
    grid-column:1 / -1;

    padding:20px 0;

    border-top:1px solid #e3e8ec;
}


.booking-editor-section-header {
    margin-bottom:14px;
}

.booking-editor-section-help {
    margin-top:3px;

    color:#75808a;

    font-size:.85rem;
    line-height:1.4;
}


.booking-editor-option-label {
    display:flex;
    flex-direction:column;
    gap:4px;
}


.booking-editor-option-label strong {
    font-size:.95rem;
}


.booking-editor-option-help {
    color:#75808a;

    font-size:.8rem;
    line-height:1.35;
}


.booking-editor-option-content {
    min-width:0;
}


/*
|--------------------------------------------------------------------------
| Staff Booking Pets
|--------------------------------------------------------------------------
*/

.booking-editor-pets {
    display:flex;
    flex-wrap:wrap;

    gap:10px;
}


.booking-editor-pet {
    position:relative;

    display:flex;
    flex-direction:column;

    min-width:150px;

    padding:10px 14px;

    border:2px solid #d8dee5;
    border-radius:8px;

    background:#fff;

    cursor:pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}


.booking-editor-pet input {
    position:absolute;

    opacity:0;
    pointer-events:none;
}


.booking-editor-pet.selected {
    border-color:var(--ohm-blue);

    background:#eef7fd;

    box-shadow:
        0 0 0 2px
        rgba(0,109,176,.12);
}


.booking-editor-pet-name {
    font-weight:700;
}


.booking-editor-pet-meta {
    margin-top:2px;

    color:#66727d;

    font-size:.8rem;
}


.booking-editor-pet:has(input:disabled) {
    cursor:default;
}


/*
|--------------------------------------------------------------------------
| Booking Options
|--------------------------------------------------------------------------
*/

.booking-operational-modifiers {
    display:flex;
    flex-direction:column;

    gap:0;
}


.booking-operational-modifier {
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        max-content;

    align-items:center;

    gap:24px;

    padding:12px 0;

    border-bottom:1px solid #edf0f2;
}


.booking-operational-modifier:last-child {
    border-bottom:none;
}


.booking-option-details {
    min-width:0;
}


.booking-option-title {
    font-weight:600;
}


.booking-option-detail-lines {
    margin-top:4px;

    color:#75808a;

    font-size:.85rem;
    line-height:1.4;
}


.booking-option-control {
    display:flex;
    align-items:center;
    justify-content:flex-end;

    min-width:80px;
}


.booking-option-control input[type="number"] {
    width:75px;

    padding:7px 9px;

    text-align:center;
}


.booking-option-checkbox {
    display:flex;
    align-items:center;

    gap:7px;

    cursor:pointer;
}


.booking-option-checkbox input {
    width:auto;
    margin:0;
}


.booking-option-auto {
    color:#75808a;

    font-size:.85rem;
    font-style:italic;
}

/*
|--------------------------------------------------------------------------
| Staff Booking Page Actions
|--------------------------------------------------------------------------
*/

.booking-page-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-top:24px;
    padding-top:24px;

    border-top:1px solid #cfd8e3;
}


.booking-page-actions-danger {
    display:flex;
    align-items:center;
}


.booking-page-actions-primary {
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:12px;

    margin-left:auto;
}


.booking-page-edit-actions {
    display:flex;
    align-items:center;

    gap:12px;
}


.booking-page-edit-actions[hidden] {
    display:none;
}


@media (max-width:600px) {

    .booking-page-actions {
        align-items:stretch;
        flex-direction:column;
    }


    .booking-page-actions-primary {
        order:1;
        width:100%;
        margin-left:0;
        align-items:stretch;
        flex-direction:column;
    }


    .booking-page-actions-danger {
        order:2;
        width:100%;
        align-items:stretch;
        flex-direction:column;
    }


    .booking-page-edit-actions {
        width:100%;
        align-items:stretch;
        flex-direction:column;
    }


    .booking-page-actions .btn {
        width:100%;
        min-height:44px;
        margin:0;
    }

}

/*
|--------------------------------------------------------------------------
| Staff Booking Section Dividers
|--------------------------------------------------------------------------
*/

.booking-staff-page hr {
    height:0;

    margin:24px 0;

    border:0;
    border-top:1px solid #cfd8e3;
}


.booking-editor-section {
    grid-column:1 / -1;

    padding:24px 0;

    border-top:1px solid #cfd8e3;
}

.booking-operational-field > label,
.detail-label {
    font-weight:700;
}

.booking-page-header {
    margin-bottom:24px;
}


.booking-page-header h2 {
    margin:0;
    font-size:1.5rem;
    font-weight:700;
}


.booking-page-header .dashboard-subtitle {
    margin:4px 0 0;

    color:#75808a;
    font-size:.9rem;
}

/*
|--------------------------------------------------------------------------
| Respect Booking Option Visibility
|--------------------------------------------------------------------------
*/

.booking-operational-modifier[hidden] {
    display:none !important;
}


#bookingOptionsSection[hidden] {
    display:none !important;
}

/*
|--------------------------------------------------------------------------
| Booking Action Visibility
|--------------------------------------------------------------------------
*/

#editBooking[hidden],
#bookingEditActions[hidden] {
    display:none !important;
}

[hidden] {
    display:none !important;
}

/*
|--------------------------------------------------------------------------
| Booking Change Review
|--------------------------------------------------------------------------
*/

.booking-change-review {
    margin-top:18px;

    border-top:1px solid var(--booking-divider,#cfd8e3);
}


.booking-change-review-header,
.booking-change-review-row {
    display:grid;

    grid-template-columns:
        150px
        minmax(0,1fr)
        minmax(0,1fr);

    gap:24px;

    padding:14px 0;

    border-bottom:
        1px solid
        var(--booking-divider,#cfd8e3);
}


.booking-change-review-header {
    padding-top:10px;

    color:#75808a;
}


.booking-change-review-label {
    font-weight:700;
}


.booking-change-proposed-value {
    padding:8px 10px;

    background:#eef7fd;

    border-radius:7px;
}


.booking-change-option + .booking-change-option {
    margin-top:5px;
}


.booking-change-empty {
    color:#75808a;

    font-style:italic;
}


.booking-change-review-total {
    font-size:1.05rem;
}


@media (max-width:700px) {

    .booking-change-review-header {
        display:none;
    }


    .booking-change-review-row {
        grid-template-columns:1fr;

        gap:8px;
    }


    .booking-change-review-row > div::before {
        display:block;

        margin-bottom:3px;

        color:#75808a;

        font-size:.75rem;
        font-weight:700;

        text-transform:uppercase;
    }


    .booking-change-review-row > div:nth-child(2)::before {
        content:"Current";
    }


    .booking-change-review-row > div:nth-child(3)::before {
        content:"Proposed";
    }

}

/*
|--------------------------------------------------------------------------
| Booking Change Page
|--------------------------------------------------------------------------
*/

.booking-change-page {
    max-width:1000px;
}

/*
|--------------------------------------------------------------------------
| Changed Booking Rows
|--------------------------------------------------------------------------
*/

.booking-change-review-row-changed {
    position:relative;

    background:
        rgba(
            211,
            47,
            47,
            .035
        );
}


.booking-change-indicator {
    margin-left:4px;

    color:#d32f2f;

    font-size:1rem;
    font-weight:800;
}


.booking-change-review-row-changed
.booking-change-proposed-value {
    box-shadow:
        inset 3px 0 0
        #d32f2f;
}

.booking-staff-page
.booking-request-grand-total {
    display:flex;
    align-items:baseline;
    justify-content:flex-end;

    gap:14px;

    margin-top:14px;
    padding-top:14px;

    border-top:1px solid var(--booking-divider,#cfd8e3);

    text-align:right;
}


.booking-staff-page
.booking-request-grand-total span {
    font-weight:700;
}


.booking-staff-page
.booking-request-grand-total strong {
    min-width:90px;

    font-size:1.1rem;
    text-align:right;
}

/*
|--------------------------------------------------------------------------
| Booking Payment Summary
|--------------------------------------------------------------------------
*/

.booking-payment-summary {
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:24px;

    margin-top:6px;
}


.booking-payment-status {
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border-radius:999px;

    font-size:.78rem;
    font-weight:700;

    white-space:nowrap;
}


.booking-payment-status-pending {
    background:#fff4d6;
    color:#865f00;
}


.booking-payment-status-partial {
    background:#eef6fb;
    color:var(--ohm-blue);
}


.booking-payment-status-paid {
    background:#e8f6ec;
    color:#216a35;
}


.booking-payment-status-credit {
    background:#f4eefe;
    color:#6941a5;
}


.booking-payment-balance {
    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| Payment History
|--------------------------------------------------------------------------
*/

.booking-payment-history {
    margin-top:24px;
    padding-top:20px;

    border-top:
        1px solid
        var(--booking-divider,#cfd8e3);
}


.booking-payment-history h3 {
    margin:0 0 10px;

    font-size:.95rem;
}


.booking-payment-history-row {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:10px 0;

    border-bottom:1px solid #edf0f2;
}


.booking-payment-history-row:last-child {
    border-bottom:none;
}


.booking-payment-actions {
    display:flex;
    justify-content:flex-end;

    margin-top:22px;
}


@media (max-width:800px) {

    .booking-payment-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media (max-width:500px) {

    .booking-payment-summary {
        grid-template-columns:1fr;
    }

}

/*
|--------------------------------------------------------------------------
| Booking Payment Modal
|--------------------------------------------------------------------------
*/

.booking-payment-modal {
    position:fixed;
    inset:0;

    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;
}


.booking-payment-modal[hidden] {
    display:none !important;
}


.booking-payment-modal-backdrop {
    position:absolute;
    inset:0;

    background:rgba(11,27,41,.55);
}


.booking-payment-modal-dialog {
    position:relative;
    z-index:1;

    width:min(640px,100%);

    max-height:90vh;
    overflow:auto;

    padding:24px;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.22);
}


.booking-payment-modal-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}


.booking-payment-modal-header h2 {
    margin:0;
}


.booking-payment-modal-close {
    appearance:none;

    border:0;
    background:transparent;

    padding:0 4px;

    color:#68737d;

    font-size:1.8rem;
    line-height:1;

    cursor:pointer;
}


.booking-payment-modal-grid {
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:18px 24px;
}


.booking-payment-modal-notes {
    margin-top:18px;
}


.booking-payment-modal-context {
    margin-top:18px;

    padding:12px 14px;

    border-radius:8px;

    background:#f4f7f9;

    color:#596670;

    font-size:.9rem;
}


.booking-payment-modal-actions {
    display:flex;
    justify-content:flex-end;

    gap:12px;

    margin-top:22px;
    padding-top:18px;

    border-top:
        1px solid
        var(--booking-divider,#cfd8e3);
}


@media (max-width:600px) {

    .booking-payment-modal-grid {
        grid-template-columns:1fr;
    }

}

.customer-booking-page {
    max-width: 1000px;
}

.customer-booking-page .booking-request-grand-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    text-align: right;
}

/*
|--------------------------------------------------------------------------
| Customer Pets Page
|--------------------------------------------------------------------------
*/

.pets-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}


.pet-list-panel {
    width: 100%;
}


.pet-editor-panel {
    width: 100%;
    max-width: 900px;
}


/*
|--------------------------------------------------------------------------
| Pet Editor - Basic Info
|--------------------------------------------------------------------------
*/

.pet-basic-layout {
    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


.pet-photo-panel {
    position: relative;

    width: 220px;
    height: 220px;

    overflow: hidden;

    border: 1px solid #d8dee5;
    border-radius: 12px;

    background: #eef3f6;
}


.pet-photo-panel > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.pet-photo-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 12px;
}


.pet-photo-message {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    max-width: 180px;
}


.pet-photo-overlay .btn {
    margin-top: auto;
}


.pet-basic-fields {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px 22px;
}


.pet-basic-fields > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.pet-basic-fields label {
    font-weight: 600;
}


.pet-basic-fields input,
.pet-basic-fields select {
    width: 100%;

    padding: 8px;

    border: 1px solid #cfd8e3;
    border-radius: 6px;

    font: inherit;
}


/*
|--------------------------------------------------------------------------
| Pet Editor Sections
|--------------------------------------------------------------------------
*/

#petForm > section {
    margin-bottom: 28px;
}


#petForm > section h3 {
    margin-bottom: 16px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .pet-basic-layout {
        grid-template-columns: 1fr;
    }


    .pet-photo-panel {
        width: 220px;
        max-width: 100%;
    }


    .pet-basic-fields {
        grid-template-columns: 1fr;
    }

}

.customer-profile-page {
    max-width: 900px;
}

.staff-request-editor-page {
    max-width: 1000px;
}

/*
|--------------------------------------------------------------------------
| Authentication Pages
|--------------------------------------------------------------------------
*/

.petcare-auth-page {
    max-width: 600px;
}


.petcare-auth-card {
    width: 100%;
}


.petcare-form-error {
    margin-bottom: 20px;

    padding: 12px 14px;

    border: 1px solid #e0a3a3;
    border-radius: 8px;

    background: #fff3f3;

    color: #9f2626;

    font-weight: 600;
}


.petcare-auth-links {
    margin-top: 20px;

    display: flex;
    align-items: center;
    gap: 8px;

    font-size: .9rem;
}

.contact-honeypot {
    position:absolute;

    left:-10000px;

    width:1px;
    height:1px;

    overflow:hidden;
}

.calendar-day.calendar-range-unavailable {
    cursor:not-allowed;
}

.recurring-schedule-title {
    margin-top: 28px;
}

.recurring-schedule-day {
    font-weight: 400;
}

.staff-request-group
.booking-request-details > div:first-child {
    min-width: 0;
}

.staff-request-group
.booking-request-details > div:first-child span {
    display: block;

    max-width: 420px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.booking-request-schedule-detail {
    min-width: 0;
}

.booking-request-schedule-value {
    display: block;

    max-width: 420px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.detail-label-normal {
    font-weight: 400;
}

.booking-confirmation-requirement {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ohm-blue);
}


.booking-request-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;

    border: 1px solid #d8dee5;
    border-radius: 8px;

    font: inherit;
    line-height: 1.45;

    resize: vertical;
    box-sizing: border-box;
}

.booking-request-textarea:focus {
    outline: none;
    border-color: var(--ohm-blue);
}


/*
|--------------------------------------------------------------------------
| Staff Profile History
|--------------------------------------------------------------------------
*/

.staff-profile-history-item {
    display:none;
}


.staff-exception-list.show-history
    .staff-profile-history-item {

    display:flex;
}


/*
|--------------------------------------------------------------------------
| Staff Services
|--------------------------------------------------------------------------
*/

.staff-services-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}


.staff-service-row {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 14px;

    border: 1px solid #d8dee4;
    border-radius: 10px;

    background: #fff;

    text-align: left;

    cursor: pointer;
}


.staff-service-row:hover {
    border-color: var(--ohm-blue-2);
}


.staff-service-row.active {
    border-color: var(--ohm-blue);

    box-shadow:
        0 0 0 1px
        var(--ohm-blue);
}


.staff-service-row-main {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}


.staff-service-row-main strong,
.staff-service-row-main small {
    display: block;
}


.staff-service-row-main small {
    margin-top: 3px;

    color: #66727d;
}


.staff-service-row-icon {
    font-size: 1.5rem;
}


.staff-service-status {
    font-size: 0.78rem;
    font-weight: 700;
}


.staff-service-status.enabled {
    color: #2e7d32;
}


.staff-service-status.disabled {
    color: #8a949d;
}


.staff-services-editor {
    min-width: 0;
}


.staff-service-editor-form {
    padding: 20px;

    border: 1px solid #d8dee4;
    border-radius: 12px;

    background: #fff;
}


.staff-service-editor-header {
    margin-bottom: 20px;
}


.staff-service-editor-header h2 {
    margin: 0 0 5px;
}


.staff-service-settings {
    padding-bottom: 22px;

    border-bottom: 1px solid #e4e8ec;
}


.staff-service-price-grid {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(160px, 220px);
    gap: 18px;
    align-items: center;

    margin-top: 18px;
}


.staff-service-price-reference {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.staff-service-price-reference span {
    color: #66727d;

    font-size: 0.85rem;
}


.staff-service-modifiers {
    margin-top: 24px;
}


.staff-service-modifier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.staff-service-modifier-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;

    padding: 14px;

    border: 1px solid #e1e6ea;
    border-radius: 10px;

    background: #fafbfc;
}


.staff-service-modifier-info {
    min-width: 0;
}


.staff-service-modifier-price {
    display: grid;
    grid-template-columns: 90px 130px;
    gap: 14px;
    align-items: center;
}


.staff-services-onboarding-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 24px;
}


@media (max-width: 800px) {

    .staff-services-layout {
        grid-template-columns: 1fr;
    }


    .staff-service-price-grid {
        grid-template-columns: 1fr;
    }


    .staff-service-modifier-row {
        grid-template-columns: 1fr;
    }


    .staff-service-modifier-price {
        grid-template-columns: 1fr 1fr;
    }

}

.staff-services-suggestion-note {
    margin-bottom: 18px;
    padding: 12px 14px;

    border: 1px solid #d8dee4;
    border-radius: 10px;

    background: #f8fafb;

    color: #4f5b66;

    font-size: 0.9rem;
    line-height: 1.45;
}

.staff-services-suggestion-note strong {
    color: var(--ohm-dark);
}

.staff-services-suggestion-note a {
    color: var(--ohm-blue);
    font-weight: 600;
    text-decoration: none;
}

.staff-services-suggestion-note a:hover {
    text-decoration: underline;
}

.services-list .list-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-list .service-row {
    width: 100%;
    min-width: 280px;
}

.services-list .list-header {
    display: flex;
    align-items: center;
    gap: 14px;

    white-space: nowrap;
}

.services-list .list-header label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Admin Canonical Services
|--------------------------------------------------------------------------
*/

.services-layout {
    display: grid;
    grid-template-columns:
        max-content
        minmax(0, 1fr);

    gap: 24px;
    align-items: start;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Service List
|--------------------------------------------------------------------------
*/

.services-list {
    width: max-content;
    min-width: 300px;
}


.services-list .list-header {
    display: flex;
    flex-flow: row nowrap;

    align-items: center;
    justify-content: flex-start;

    gap: 14px;

    width: max-content;
    min-width: 100%;

    margin-bottom: 12px;

    white-space: nowrap;
}


.services-list .list-header .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}


.services-list .list-header label {
    display: inline-flex;
    flex: 0 0 auto;

    align-items: center;
    gap: 6px;

    margin: 0;

    white-space: nowrap;
}


.services-list .list-body {
    display: grid;
    grid-template-columns: 1fr;

    gap: 8px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Individual Service Rows
|--------------------------------------------------------------------------
*/

.services-list .service-row {
    display: block;

    width: 100%;
    min-width: 300px;

    padding: 12px 14px;

    text-align: left;

    white-space: normal;
}


.services-list .service-row .name {
    display: block;

    margin-bottom: 4px;

    font-weight: 700;
}


.services-list .service-row .meta {
    display: block;

    color: #66727d;

    font-size: 0.85rem;
}


/*
|--------------------------------------------------------------------------
| Editor
|--------------------------------------------------------------------------
*/

.services-editor {
    min-width: 0;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Public Authentication Header
|--------------------------------------------------------------------------
*/

.auth-header {
    width: 100%;

    padding: 20px 24px;

    box-sizing: border-box;

    background: #fff;

    border-bottom: 1px solid var(--ohm-silver);
}


.auth-brand {
    max-width: 1100px;

    margin: 0 auto;
}


.auth-brand-link {
    display: inline-flex;
    flex-direction: column;

    text-decoration: none;

    line-height: 1.05;
}


.auth-brand-title {
    color: var(--ohm-blue-2);

    font-size: 1.55rem;
    font-weight: 700;
}


.auth-brand-subtitle {
    margin-left: auto;

    color: var(--ohm-blue);

    font-size: 0.9rem;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Password Page
|--------------------------------------------------------------------------
*/

.password-page {
    min-height: calc(100vh - 90px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    box-sizing: border-box;

    padding: 60px 20px;
}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.password-card {
    width: 100%;
    max-width: 520px;

    box-sizing: border-box;

    padding: 36px;

    background: #fff;

    border: 1px solid var(--ohm-silver);
    border-radius: 12px;

    box-shadow:
        0 8px 24px rgba(11, 27, 41, 0.08);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.password-card-header {
    margin-bottom: 30px;

    text-align: center;
}


.password-card-header h1 {
    margin:
        0
        0
        12px;

    color: var(--ohm-dark);

    font-size: 2rem;
}


.password-card-header p {
    margin:
        8px
        0
        0;

    color: #52606b;

    line-height: 1.55;
}


.password-card-header strong {
    color: var(--ohm-dark);
}


/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

.password-form {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


.password-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.password-field label {
    width: 100%;

    color: var(--ohm-dark);

    font-weight: 600;

    text-align: left;
}


.password-field input {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid var(--ohm-silver);
    border-radius: 7px;

    background: #fff;

    color: var(--ohm-dark);

    font-size: 1rem;
}


.password-field input:focus {
    outline: none;

    border-color: var(--ohm-blue-2);

    box-shadow:
        0 0 0 3px rgba(47, 168, 232, 0.15);
}


/*
|--------------------------------------------------------------------------
| Submit Button
|--------------------------------------------------------------------------
*/

.password-submit {
    width: 100%;

    margin-top: 4px;

    padding: 13px 18px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .auth-header {
        padding: 16px 18px;
    }


    .password-page {
        padding: 32px 14px;
    }


    .password-card {
        padding: 28px 20px;
    }


    .password-card-header h1 {
        font-size: 1.65rem;
    }

}

/*
|--------------------------------------------------------------------------
| Chats
|--------------------------------------------------------------------------
|
| Shared customer / staff conversation layout.
|
| Staff-only controls such as filter tabs and lifecycle buttons remain
| staff-specific below.
|--------------------------------------------------------------------------
*/

.staff-chats,
.customer-chats {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);

    height: 650px;

    border: 1px solid #ddd;
    border-radius: 10px;

    overflow: hidden;

    background: #fff;
}


/*
|--------------------------------------------------------------------------
| Chat Sidebar
|--------------------------------------------------------------------------
*/

.staff-chats-sidebar,
.customer-chats-sidebar {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    border-right: 1px solid #ddd;
}


.staff-chats-sidebar-header,
.customer-chats-sidebar-header {
    padding: 12px;

    border-bottom: 1px solid #ddd;
}


/*
|--------------------------------------------------------------------------
| Staff Chat Filters
|--------------------------------------------------------------------------
|
| Customer chat intentionally has no Active / Closed / Archived tabs.
|--------------------------------------------------------------------------
*/

.staff-chats-filter-tabs {
    display: flex;
    gap: 6px;

    margin-bottom: 10px;
}


.staff-chat-filter {
    flex: 1;

    padding: 7px 8px;

    border: 1px solid #ccc;
    border-radius: 7px;

    background: transparent;

    cursor: pointer;
}


.staff-chat-filter:hover {
    background: #f7f7f7;
}


.staff-chat-filter.active {
    background: var(--ohm-blue);
    border-color: var(--ohm-blue);

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Chat Search
|--------------------------------------------------------------------------
*/

.staff-chats-search input,
.customer-chats-search input {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Thread List
|--------------------------------------------------------------------------
*/

.staff-chat-thread-list,
.customer-chat-thread-list {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}


/*
|--------------------------------------------------------------------------
| Thread Row
|--------------------------------------------------------------------------
*/

.staff-chat-thread-item,
.customer-chat-thread-item {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 100%;

    padding: 14px;

    border: 0;
    border-bottom: 1px solid #eee;

    background: transparent;

    color: inherit;
    font: inherit;

    text-align: left;

    cursor: pointer;
}


.staff-chat-thread-item:hover,
.customer-chat-thread-item:hover {
    background: #f7f7f7;
}


.staff-chat-thread-item.active,
.customer-chat-thread-item.active {
    background: #eef7fc;
}


.staff-chat-thread-name,
.customer-chat-thread-name {
    font-weight: 600;
}


.staff-chat-thread-meta,
.customer-chat-thread-meta {
    color: #666;

    font-size: 0.83rem;
}


.staff-chat-thread-preview,
.customer-chat-thread-preview {
    overflow: hidden;

    color: #777;

    font-size: 0.85rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/*
|--------------------------------------------------------------------------
| Conversation
|--------------------------------------------------------------------------
*/

.staff-chat-conversation,
.customer-chat-conversation {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;
}


/*
|--------------------------------------------------------------------------
| Conversation Header
|--------------------------------------------------------------------------
*/

.staff-chat-header,
.customer-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 72px;

    padding: 14px 18px;

    border-bottom: 1px solid #ddd;
}


.staff-chat-header-name,
.customer-chat-header-name {
    font-size: 1.05rem;
    font-weight: 600;
}


.staff-chat-header-meta,
.customer-chat-header-meta {
    margin-top: 3px;

    color: #777;

    font-size: 0.85rem;
}


/*
|--------------------------------------------------------------------------
| Messages
|--------------------------------------------------------------------------
*/

.staff-chat-messages,
.customer-chat-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;

    min-height: 0;

    padding: 18px;

    overflow-y: auto;
    overscroll-behavior: contain;
}


.staff-chat-message,
.customer-chat-message {
    max-width: 75%;
}


.staff-chat-message.mine,
.customer-chat-message.mine {
    align-self: flex-end;
}


.staff-chat-message.theirs,
.customer-chat-message.theirs {
    align-self: flex-start;
}


.staff-chat-message-text,
.customer-chat-message-text {
    padding: 10px 13px;

    border-radius: 14px;

    background: #eee;

    white-space: normal;
    overflow-wrap: anywhere;
}


.staff-chat-message.mine
.staff-chat-message-text,
.customer-chat-message.mine
.customer-chat-message-text {
    background: var(--ohm-blue-2);

    color: #fff;
}


.staff-chat-message-time,
.customer-chat-message-time {
    margin-top: 3px;
    padding: 0 4px;

    color: #888;

    font-size: 0.72rem;
}


.staff-chat-message.mine
.staff-chat-message-time,
.customer-chat-message.mine
.customer-chat-message-time {
    text-align: right;
}


/*
|--------------------------------------------------------------------------
| System Messages
|--------------------------------------------------------------------------
*/

.staff-chat-system-message,
.customer-chat-system-message {
    align-self: stretch;

    margin: 6px 0;
    padding: 12px 14px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #f8f8f8;

    text-align: center;
}


.staff-chat-system-title,
.customer-chat-system-title {
    font-weight: 600;
}


.staff-chat-system-action,
.customer-chat-system-action {
    display: inline-block;

    margin-top: 7px;
}


/*
|--------------------------------------------------------------------------
| Composer
|--------------------------------------------------------------------------
*/

.staff-chat-compose,
.customer-chat-compose {
    display: flex;
    align-items: stretch;
    gap: 8px;

    flex: 0 0 auto;

    padding: 12px;

    border-top: 1px solid #ddd;

    background: #fff;
}

/*
|--------------------------------------------------------------------------
| Composer Textarea
|--------------------------------------------------------------------------
*/

.staff-chat-compose textarea,
.customer-chat-compose textarea {
    flex: 1;

    min-width: 0;
    height: 42px;
    min-height: 42px;

    padding: 9px 12px;

    border: 1px solid #cfd8e3;
    border-radius: 6px;

    font: inherit;
    line-height: 22px;

    resize: none;
}



/*
|--------------------------------------------------------------------------
| Composer Buttons
|--------------------------------------------------------------------------
*/

.staff-chat-compose .btn,
.customer-chat-compose .btn,
.staff-chat-photo-button,
.customer-chat-photo-button {
    height: 42px;
    min-height: 42px;

    flex: 0 0 auto;
}


/*
|--------------------------------------------------------------------------
| Photo Button
|--------------------------------------------------------------------------
*/

.staff-chat-photo-button,
.customer-chat-photo-button {
    min-width: 42px;

    padding: 0;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: transparent;

    font-size: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
}


/*
|--------------------------------------------------------------------------
| Empty States
|--------------------------------------------------------------------------
*/

.staff-chat-empty,
.customer-chat-empty {
    padding: 20px;

    color: #777;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Staff Chat Header Actions
|--------------------------------------------------------------------------
*/

.staff-chat-header-actions {
    display: flex;
    gap: 8px;
}


.staff-chat-header-action {
    padding: 6px 10px;

    border: 1px solid #ccc;
    border-radius: 7px;

    background: transparent;

    cursor: pointer;
}


.staff-chat-header-action:hover {
    background: #f4f4f4;
}


/*
|--------------------------------------------------------------------------
| Unread Conversations
|--------------------------------------------------------------------------
*/

.staff-chat-thread-item.unread
.staff-chat-thread-name,
.customer-chat-thread-item.unread
.customer-chat-thread-name {
    font-weight: 700;
}


.staff-chat-unread-label,
.customer-chat-unread-label {
    font-size: 0.8rem;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Mobile Chats
|--------------------------------------------------------------------------
*/

@media (
    max-width: 750px
) {

    .staff-chats,
    .customer-chats {
        grid-template-columns: 1fr;

        height: auto;
    }


    .staff-chats-sidebar,
    .customer-chats-sidebar {
        max-height: 260px;

        border-right: 0;
        border-bottom: 1px solid #ddd;
    }


    .staff-chat-conversation,
    .customer-chat-conversation {
        height: min(600px, calc(100dvh - 180px));
        min-height: 360px;
    }


    .staff-chat-messages,
    .customer-chat-messages {
        min-height: 0;
    }

}
/*
|--------------------------------------------------------------------------
| Customer Recent Updates
|--------------------------------------------------------------------------
*/

.customer-recent-updates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


.customer-recent-update {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem;

    border: 1px solid var(--ohm-silver);
    border-radius: 0.75rem;
}


.customer-recent-update.dismissed {
    opacity: 0.6;
}


.customer-recent-update-main {
    min-width: 0;
}


.customer-recent-update-message {
    font-weight: 600;
}


.customer-recent-update-meta {
    margin-top: 0.3rem;

    font-size: 0.82rem;
    opacity: 0.7;
}


.customer-recent-update-dismissed {
    margin-left: 0.5rem;

    font-weight: 600;
}


.customer-recent-update-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.6rem;

    flex: 0 0 auto;
}


.customer-recent-update-link {
    white-space: nowrap;
}


.customer-recent-update-dismiss {
    align-self: flex-end;
    white-space: nowrap;
}


@media (max-width: 700px) {

    .customer-recent-update {
        align-items: flex-start;
        flex-direction: column;
    }


    .customer-recent-update-actions {
        width: 100%;
    }

}

/*
|--------------------------------------------------------------------------
| Live Visit
|--------------------------------------------------------------------------
*/

.visit-live-body {
    margin: 0;
    background: #f4f6f8;
    color: var(--ohm-dark);
}

.visit-live-shell {
    width: min(100%, 600px);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.visit-live-topbar {
    margin-bottom: 20px;
}

.visit-live-back {
    color: var(--ohm-blue);
    text-decoration: none;
    font-weight: 600;
}

.visit-live-header {
    margin-bottom: 20px;
}

.visit-live-header h1 {
    margin: 3px 0 8px;
}

.visit-live-eyebrow {
    color: var(--ohm-blue);
    font-weight: 700;
}

.visit-live-status {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #666;
}

.visit-live-status.is-in-progress {
    color: var(--ohm-blue);
}

.visit-live-card {
    background: #fff;
    border: 1px solid #dce2e7;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.visit-live-card h2 {
    margin-top: 0;
}

.visit-live-primary-button,
.visit-live-end-button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.visit-live-primary-button {
    background: var(--ohm-blue);
    color: #fff;
}

.visit-live-started {
    font-weight: 600;
}

.visit-live-pets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.visit-live-pet-card {
    margin-bottom: 0;
}

.visit-live-pet-name {
    color: var(--ohm-blue);
}

.visit-live-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f2;
}

.visit-live-counter-label {
    font-weight: 600;
}

.visit-live-counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.visit-live-counter-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #ccd4da;
    background: #fff;
    font-size: 1.25rem;
}

.visit-live-counter-value {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Desktop Report Pet Cards
|--------------------------------------------------------------------------
*/

@media (min-width: 769px) {

    #reportPets.visit-live-pets {
        grid-template-columns:
            repeat(auto-fit, minmax(220px, max-content));

        justify-content: start;
    }

}

.visit-live-notes {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #ccd4da;
    border-radius: 9px;
    padding: 10px;
    font: inherit;
}

.visit-report-photo-section {
    padding-top: 14px;
}

.visit-photo-heading-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.visit-photo-heading-title h2,
.visit-photo-heading-count {
    margin: 0;
}

.visit-photo-heading-count {
    line-height: 1.2;
}

.visit-live-pet-notes-label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
}

.visit-live-checklist-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
}

.visit-live-save-status {
    min-height: 20px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #68747d;
}

.visit-live-actions {
    padding: 8px 0 28px;
}

.visit-live-actions .btn {
    display: block;
    width: 100%;
    min-height: 48px;

    border-radius: 10px;

    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 520px) {

    .visit-live-shell {
        padding-left: 8px;
        padding-right: 8px;
    }

    .visit-live-pets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .visit-live-pet-card {
        min-width: 0;
        padding: 10px;
        border-radius: 10px;
    }

    .visit-live-pet-name {
        margin-bottom: 4px;
        font-size: 1.1rem;
        text-align: center;
    }

    .visit-live-counter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 6px 0;
    }

    .visit-live-counter-label {
        font-size: 0.82rem;
        line-height: 1.15;
        text-align: center;
    }

    .visit-live-counter-controls {
        justify-content: space-between;
        gap: 4px;
    }

    .visit-live-counter-button {
        width: 36px;
        height: 36px;
    }

    .visit-live-counter-value {
        min-width: 16px;
    }

    .visit-live-pet-card .visit-live-notes {
        min-width: 0;
        margin-top: 8px;
        padding: 8px;
        font-size: 16px;
    }

}

@media (max-width: 330px) {

    .visit-live-pets {
        grid-template-columns: 1fr;
    }

}

.visit-live-counter-button:not(:disabled) {
    cursor: pointer;
}

.visit-live-counter-button:not(:disabled):active {
    transform: scale(0.94);
}

.visit-live-save-status {
    transition: opacity 0.15s ease;
}

/*
|--------------------------------------------------------------------------
| Live Visit - Unavailable State
|--------------------------------------------------------------------------
*/

.visit-live-unavailable {
    text-align: center;
}

.visit-live-unavailable p {
    line-height: 1.5;
}

.visit-live-unavailable-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.visit-live-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 18px;

    border-radius: 9px;

    background: var(--ohm-blue);
    color: #fff;

    text-decoration: none;
    font-weight: 700;
}

.visit-live-link-button-secondary {
    background: #fff;
    color: var(--ohm-blue);
    border: 1px solid var(--ohm-blue);
}

/*
|--------------------------------------------------------------------------
| Staff Booking - Service Actions
|--------------------------------------------------------------------------
*/

.booking-service-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    margin-bottom: 24px;

    padding: 16px 18px;

    background: #fff;

    border: 1px solid #d8dee5;
    border-radius: 12px;
}


.booking-service-actions .btn {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
|--------------------------------------------------------------------------
| Staff Report - Unavailable State
|--------------------------------------------------------------------------
*/

.staff-report-unavailable {
    padding: 24px;

    background: #fff;

    border: 1px solid #d8dee5;
    border-radius: 12px;
}


.staff-report-unavailable h2 {
    margin-top: 0;
}


.staff-report-unavailable p {
    margin-bottom: 20px;

    color: #66727d;
}


.staff-report-unavailable-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Staff Report Layout
|--------------------------------------------------------------------------
*/

.staff-report-summary {
    margin-bottom: 24px;
}


.staff-report-booking-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;

    font-size: 0.92rem;
    color: #66727d;
}


.staff-report-meta-dot {
    color: #9aa5ae;
}


/*
|--------------------------------------------------------------------------
| Overall Notes
|--------------------------------------------------------------------------
*/

.staff-report-page #reportNotes {
    display: block;

    width: 100%;
    max-width: none;

    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Customer Visit Report
|--------------------------------------------------------------------------
*/

.customer-report-page {
    max-width: 900px;
}


/*
|--------------------------------------------------------------------------
| Overall Notes
|--------------------------------------------------------------------------
*/

.customer-report-note {
    line-height: 1.6;
    white-space: normal;
}


/*
|--------------------------------------------------------------------------
| Pet Cards
|--------------------------------------------------------------------------
*/

.customer-report-pets {
    display: grid;

    grid-template-columns:
        repeat(2, max-content);

    gap: 16px;

    justify-content: start;
    align-items: start;
}


.customer-report-pet-card {
    width: max-content;
    min-width: 220px;
    max-width: 100%;

    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Pet Activity
|--------------------------------------------------------------------------
*/

.customer-report-pet-status {
    display: grid;

    grid-template-columns:
        max-content
        42px;

    column-gap: 20px;
    row-gap: 0;

    width: max-content;
}


.customer-report-status-row {
    display: contents;
}


.customer-report-status-row > span,
.customer-report-status-row > strong {
    padding: 9px 0;

    border-bottom: 1px solid #edf0f2;
}


.customer-report-status-row > strong {
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Pet Notes
|--------------------------------------------------------------------------
*/

.customer-report-pet-notes {
    margin-top: 16px;

    line-height: 1.5;
}


.customer-report-pet-notes > strong {
    display: block;

    margin-bottom: 6px;
}


/*
|--------------------------------------------------------------------------
| Checklist
|--------------------------------------------------------------------------
*/

.customer-report-checklist {
    display: grid;

    gap: 8px;
}


.customer-report-checklist-item {
    display: flex;

    align-items: center;

    gap: 10px;
}


.customer-report-checkmark {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border: 1px solid #c8d0d6;
    border-radius: 50%;

    font-weight: 700;
}


.customer-report-checkmark.completed {
    border-color: var(--ohm-blue);
    color: var(--ohm-blue);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .customer-report-pets {
        grid-template-columns: 1fr;
    }


    .customer-report-pet-card {
        width: 100%;
        min-width: 0;
    }

}

/*
|--------------------------------------------------------------------------
| Sidebar Logo
|--------------------------------------------------------------------------
*/

.petcare-sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.petcare-sidebar-logo img {
    display: block;
    width: 192px;
    height: 192px;
    object-fit: contain;
}

.chat-date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #777;
    font-size: 0.8rem;
    font-weight: 600;
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d8dde2;
}

.chat-date-divider span {
    white-space: nowrap;
}


@media (max-width: 600px) {

    /*
    |--------------------------------------------------------------------------
    | Staff Booking Request Actions
    |--------------------------------------------------------------------------
    */

    .staff-request-actions {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;

        gap: 20px;
    }


    .staff-request-actions
    #sendBookingRequestConfirmation,

    .staff-request-actions
    #cancelBookingRequest,

    .staff-request-actions
    #saveBookingRequestChanges {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 180px;

        margin: 0;

        padding: 10px 18px;

        white-space: nowrap;
        text-align: center;
    }

}

/*
|--------------------------------------------------------------------------
| Booking Total Summary
|--------------------------------------------------------------------------
*/

.booking-total-section {
    margin:22px 0;
    padding:16px 0;

    border-top:2px solid #d8dee5;
    border-bottom:2px solid #d8dee5;
}

.booking-total-heading {
    width: 100%;
    margin: 0 0 12px;

    text-align: left;

    font-size: 1rem;
    font-weight: 700;
}


.booking-total-rows {
    width:min(100%,380px);
    margin-left:auto;

    display:grid;
    gap:8px;
}


.booking-total-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(90px,110px);

    align-items:baseline;
    column-gap:20px;
}


.booking-total-label {
    text-align:right;
}


.booking-total-value {
    min-width:90px;

    text-align:right;
    font-variant-numeric:tabular-nums;
}


.booking-total-row-final {
    margin-top:2px;

    font-size:1.08rem;
    font-weight:800;
}


/*
|--------------------------------------------------------------------------
| Booking Change Total
|--------------------------------------------------------------------------
*/

.booking-change-total-section {
    margin-bottom:0;
}


.booking-change-total-grid {
    display:grid;
    grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);

    gap:8px 24px;
    align-items:baseline;
}


.booking-change-total-column-heading {
    color:#75808a;

    font-size:.85rem;
    font-weight:700;
    text-align:right;
}


.booking-change-total-grid .booking-total-label {
    text-align:left;
}


.booking-change-total-grid .booking-total-value {
    justify-self:stretch;
    text-align:right;
}


.booking-change-total-grid .booking-change-proposed-value {
    padding:8px 10px;
}


@media (max-width:700px) {

    .booking-total-heading,
    .booking-total-rows {
        width:100%;
    }


    .booking-change-total-grid {
        grid-template-columns:minmax(90px,1fr) minmax(0,1fr) minmax(0,1fr);
        gap:8px 12px;
    }

}


/*
|--------------------------------------------------------------------------
| Final Booking Request Presentation Pass
|--------------------------------------------------------------------------
*/

/*
 * Staff booking-request editor section hierarchy.
 *
 * Booking Total uses the exact same heading treatment so it no longer
 * appears heavier than Service Area / Selected Service / Pet List / etc.
 */
.staff-request-editor-page .booking-summary-title,
.staff-request-editor-page .booking-total-heading {
    margin-bottom: 12px;

    color: #2c3e50;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}


/*
 * Customer booking-request confirmation.
 */
.booking-request-confirmation-page .booking-confirmation-title {
    color: var(--ohm-blue);
}


.booking-request-confirmation-page .booking-request-confirmation-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-top: -8px;
    margin-bottom: 10px;
}


/*
 * Consistent vertical rhythm for every major confirmation section.
 */
.booking-request-confirmation-page .dashboard-header {
    margin-bottom: 24px;
}


.booking-request-confirmation-page .dashboard-section {
    margin: 0 0 24px;
}


.booking-request-confirmation-page .dashboard-section-header {
    margin-bottom: 18px;
}


/*
 * Compact pet cards.
 *
 * Reuses the same square/photo crop convention as the existing Pets UI.
 */
.booking-confirmation-pet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    align-items: stretch;
}


.booking-confirmation-pet-card {
    display: flex;
    align-items: center;

    min-width: 190px;
    min-height: 72px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #d8dee5;
    border-radius: 8px;
}


.booking-confirmation-pet-photo {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    overflow: hidden;

    background: #f3f6f9;

    border-right: 1px solid #d8dee5;

    display: flex;
    align-items: center;
    justify-content: center;
}


.booking-confirmation-pet-photo img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: cover;
}


.booking-confirmation-pet-photo-fallback {
    padding: 6px;

    color: #777;

    font-size: .68rem;
    text-align: center;
}


.booking-confirmation-pet-name {
    display: flex;
    align-items: center;

    padding: 12px 14px;

    font-weight: 700;
}


@media (max-width: 600px) {

    .booking-confirmation-pet-card {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Staff Request Editor — Pet Profiles
|--------------------------------------------------------------------------
*/

/*
 * Same section-heading hierarchy used in the polished confirmation page.
 */
.staff-request-editor-page .booking-summary-title,
.staff-request-editor-page .booking-total-heading {
    margin-bottom: 12px;

    color: #2c3e50;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}


/*
 * Admin-style pet cards shown beneath the existing Pet List selector.
 */
.staff-request-pet-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    align-items: stretch;

    margin-top: 12px;
}


.staff-request-pet-card {
    display: flex;
    align-items: stretch;

    width: max-content;
    max-width: 100%;
    min-width: 220px;

    padding: 0;

    overflow: hidden;

    background: #fff;

    border: 2px solid #d8dee5;
    border-radius: 8px;

    color: inherit;

    cursor: pointer;
    text-align: left;
    font: inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.staff-request-pet-card:hover {
    border-color: var(--ohm-blue);

    box-shadow:
        0 0 0 2px rgba(0,109,176,.08);
}


.staff-request-pet-card:focus-visible {
    outline: 2px solid var(--ohm-blue);
    outline-offset: 2px;
}


.staff-request-pet-thumb {
    width: 72px;
    flex: 0 0 72px;

    min-height: 82px;

    overflow: hidden;

    background: #f3f6f9;

    border-right: 1px solid #d7dee5;

    display: flex;
    align-items: center;
    justify-content: center;
}


.staff-request-pet-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.staff-request-pet-thumb-fallback {
    padding: 6px;

    color: #777;

    font-size: .68rem;
    text-align: center;
}


.staff-request-pet-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 10px 13px;
}


.staff-request-pet-name {
    font-weight: 700;
}


.staff-request-pet-meta,
.staff-request-pet-detail {
    margin-top: 2px;

    color: #666;

    font-size: .85rem;
}


.staff-request-pet-open-hint {
    margin-top: 5px;

    color: var(--ohm-blue);

    font-size: .76rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Staff Pet Profile Modal
|--------------------------------------------------------------------------
*/

body.staff-pet-profile-open {
    overflow: hidden;
}


.staff-pet-profile-modal[hidden] {
    display: none;
}


.staff-pet-profile-modal {
    position: fixed;
    inset: 0;

    z-index: 5500;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


.staff-pet-profile-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.48);
}


.staff-pet-profile-dialog {
    position: relative;
    z-index: 1;

    width: min(900px, 100%);
    max-height: calc(100vh - 40px);

    overflow: auto;

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 14px 42px rgba(0,0,0,.28);
}


.staff-pet-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 24px;

    border-bottom: 1px solid #e2e6ea;
}


.staff-pet-profile-title {
    margin: 0;

    color: var(--ohm-blue);

    font-size: 1.35rem;
}


.staff-pet-profile-subtitle {
    margin-top: 4px;

    color: #66737d;

    font-size: .9rem;
}


.staff-pet-profile-close {
    flex: 0 0 auto;

    padding: 0 4px;

    border: 0;
    background: none;

    color: #66737d;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;
}


.staff-pet-profile-body {
    padding: 22px 24px;
}


.staff-pet-profile-hero {
    display: flex;
    align-items: stretch;
    gap: 18px;

    margin-bottom: 22px;
}


.staff-pet-profile-photo {
    width: 132px;
    height: 132px;
    flex: 0 0 132px;

    overflow: hidden;

    background: #f3f6f9;

    border: 1px solid #d7dee5;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.staff-pet-profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.staff-pet-profile-photo-fallback {
    padding: 8px;

    color: #777;

    font-size: .8rem;
    text-align: center;
}


.staff-pet-profile-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}


.staff-pet-profile-display-name {
    font-size: 1.3rem;
    font-weight: 800;
}


.staff-pet-profile-basics {
    margin-top: 5px;

    color: #66737d;
}


.staff-pet-profile-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 14px 18px;
}


.staff-pet-profile-field {
    min-width: 0;

    padding: 12px 14px;

    background: #f8fafb;

    border: 1px solid #e1e6ea;
    border-radius: 8px;
}


.staff-pet-profile-field.is-full {
    grid-column: 1 / -1;
}


.staff-pet-profile-field-label {
    margin-bottom: 4px;

    color: #66737d;

    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
}


.staff-pet-profile-field-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.staff-pet-profile-footer {
    display: flex;
    justify-content: flex-end;

    padding: 16px 24px;

    border-top: 1px solid #e2e6ea;
}


@media (max-width: 650px) {

    .staff-request-pet-card {
        width: 100%;
    }


    .staff-pet-profile-hero {
        align-items: flex-start;
    }


    .staff-pet-profile-photo {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }


    .staff-pet-profile-fields {
        grid-template-columns: 1fr;
    }


    .staff-pet-profile-field.is-full {
        grid-column: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Staff Pet Profile — Identity Header Refinement
|--------------------------------------------------------------------------
*/

/*
 * The duplicated modal title/subtitle is no longer part of the visual
 * hierarchy. Keep this strip only for the close control.
 */
.staff-pet-profile-header {
    justify-content: flex-end;

    padding: 10px 16px 0;

    border-bottom: 0;
}


.staff-pet-profile-header > div:first-child {
    display: none;
}


/*
 * The pet's name beside the photo is now the primary modal title.
 */
 .staff-pet-profile-display-name {
    color: var(--ohm-blue);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.staff-pet-profile-basics {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 6px 28px;

    margin-top: 10px;

    color: #495761;
}

.staff-pet-profile-basics-cell {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.staff-pet-profile-basics-label {
    font-weight: 700;
}

.staff-pet-profile-basics-cell.is-empty {
    visibility: hidden;
}


/*
|--------------------------------------------------------------------------
| Staff Pet Cards / Modal — Final Alignment Pass
|--------------------------------------------------------------------------
*/

/*
 * Request-editor pet thumbnails are square. Pet uploads are square, so keep
 * the rendered viewport square as well and crop only if ever necessary.
 */
.staff-request-pet-thumb {
    width: 82px;
    height: 82px;
    min-height: 82px;
    flex: 0 0 82px;

    align-self: center;
}


.staff-request-pet-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
 * At-a-glance modal summary:
 *
 *   Species: value     Breed: value
 *       Sex: value       Age: value      Weight: value
 *
 * Each summary cell gets its own label/value columns. The label column is
 * right-aligned so the colons — and therefore the values — align vertically.
 */
.staff-pet-profile-basics {
    display: grid;

    grid-template-columns:
        max-content
        max-content
        max-content;

    column-gap: 32px;
    row-gap: 6px;

    margin-top: 10px;

    color: #495761;
}


.staff-pet-profile-basics-cell {
    display: grid;

    grid-template-columns:
        70px
        max-content;

    column-gap: 6px;

    align-items: baseline;
}


.staff-pet-profile-basics-label {
    min-width: 70px;

    font-weight: 700;
    text-align: right;
}


.staff-pet-profile-basics-cell.is-empty {
    visibility: hidden;
}


@media (max-width: 650px) {

    .staff-pet-profile-basics {
        grid-template-columns: 1fr;
    }


    .staff-pet-profile-basics-cell.is-empty {
        display: none;
    }

}


/*
|--------------------------------------------------------------------------
| Staff Request Pet Card — Thumbnail Polish
|--------------------------------------------------------------------------
|
| Give the square pet thumbnail a little breathing room inside the clickable
| card and softly round the image edges to match the pet-profile modal.
|--------------------------------------------------------------------------
*/

.staff-request-pet-thumb {
    margin-left: 10px;

    border-right: 0;
    border-radius: 7px;
}


.staff-request-pet-thumb img {
    border-radius: 7px;
}


/*
|--------------------------------------------------------------------------
| Modifier control polish
|--------------------------------------------------------------------------
|
| Shared by customer booking.php and the staff booking-request editor.
| Append this block to css/petcare.css.
|
*/

/*
|--------------------------------------------------------------------------
| Shared modifier control rail
|--------------------------------------------------------------------------
|
| Shared by customer booking.php and the staff booking-request editor.
|
*/

.modifier-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    padding: 8px 0;
}

.modifier-control {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    min-width: 30px;
}

.modifier-control > input[type="checkbox"] {
    margin: 0;
}

.modifier-info {
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| OHM blue modifier buttons
|--------------------------------------------------------------------------
*/

.modifier-control-button {
    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--ohm-blue);
    color: #fff;

    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}

.modifier-control-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.modifier-control-button:active:not(:disabled) {
    transform: translateY(1px);
}

.modifier-control-button:focus-visible {
    outline: 2px solid var(--ohm-blue-2);
    outline-offset: 2px;
}

.modifier-control-button:disabled {
    opacity: 0.38;
    cursor: default;
}


/*
|--------------------------------------------------------------------------
| Quantity modifiers
|--------------------------------------------------------------------------
|
| Left control rail:
|
|     [+]
|     [−]
|
| Quantity now lives with the modifier details:
|
|     Puppy
|     # Puppy
|     0
|
*/

.modifier-quantity-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.modifier-quantity-display {
    display: flex;
    align-items: baseline;
    gap: 5px;

    margin-top: 6px;
}

.modifier-quantity-label {
    font-size: 0.9rem;
}

.modifier-quantity {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Price Adjustment
|--------------------------------------------------------------------------
|
| The checkbox remains in the shared modifier control rail. The sign toggle
| lives directly between the currency symbol and amount field so the control
| reads naturally as: $ [+] 5.00 or $ [−] 5.00.
|
*/

.modifier-amount-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 3px 7px;
    margin-top: 6px;
}

.modifier-amount-field,
.modifier-amount-scope {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modifier-currency-input {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.modifier-currency-symbol {
    flex: 0 0 auto;
    font-weight: 600;
}

.modifier-amount-sign {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;

    border-radius: 6px;

    font-size: 17px;
}

.modifier-amount-input {
    width: 64px;
    max-width: 64px;
    min-width: 0;
}

.modifier-amount-scope-select {
    width: 99px;
    max-width: 99px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .modifier-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 13px;
    }

    .modifier-amount-controls {
        gap: 3px 5px;
    }

}

.customer-booking-request-page
.booking-confirmation-title {
    margin-bottom: 15px;
}

/*
|--------------------------------------------------------------------------
| Customer Visit Report
|--------------------------------------------------------------------------
*/

.customer-report-title {
    color: var(--ohm-blue);
}


/*
|--------------------------------------------------------------------------
| Staff Requests Tabs
|--------------------------------------------------------------------------
*/

.staff-requests-page-title {
    color: var(--ohm-blue);
}

.staff-requests-panel {
    padding: 22px;
    background: #fff;
    border: 1px solid #d8dee5;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.staff-requests-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.staff-request-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}

.staff-request-tab {
    appearance: none;
    border: 0;
    border-right: 1px solid #cfd8e3;
    padding: 5px 14px;
    background: transparent;
    color: #66727d;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}

.staff-request-tab:first-child {
    padding-left: 0;
}

.staff-request-tab:last-child {
    border-right: 0;
}

.staff-request-tab:hover {
    color: var(--ohm-blue);
}

.staff-request-tab.active {
    color: var(--ohm-blue);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.staff-requests-show-all {
    flex: 0 0 auto;
}

.staff-request-tab-list {
    max-height:
        var(
            --staff-request-list-max-height,
            none
        );
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 8px;
    scrollbar-gutter: stable;
}

@media (max-width: 750px) {

    .staff-requests-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .staff-request-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .staff-request-tab {
        width: 100%;
        min-width: 0;
        padding: 10px 8px;
        border: 1px solid #cfd8e3;
        border-radius: 8px;
        line-height: 1.25;
        text-align: center;
    }

    .staff-request-tab:first-child {
        padding-left: 8px;
    }

    .staff-request-tab:last-child {
        grid-column: auto;
        border-right: 1px solid #cfd8e3;
    }

    .staff-request-tab.active {
        background: #eef6fb;
        text-decoration: none;
    }

    .staff-requests-show-all {
        align-self: flex-start;
    }

    .staff-requests-panel {
        padding: 16px;
    }


    #staffBookingSearchForm {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        width: 100%;
    }

    #staffBookingSearchForm > label {
        grid-column: 1 / -1;
    }

    #staffBookingSearchInput {
        width: 100%;
        min-width: 0;
    }

    #staffBookingSearchStatus,
    #staffBookingCustomerFilter {
        grid-column: 1 / -1;
    }

    #staffBookingSearchStatus:empty {
        display: none;
    }

    #staffBookingCustomerFilter {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 750px) {
    .petcare-main { padding: 16px; }
}

.staff-customer-header-meta {
    white-space: pre-line;
}

.customer-report-page .staff-report-booking-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/*
|--------------------------------------------------------------------------
| Shared Site Footer
|--------------------------------------------------------------------------
*/

.petcare-site-footer {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 24px 20px 28px;
    border-top: 1px solid #dfe5e9;
    background: #f6f9fb;
    color: #536270;
    text-align: center;
}

.petcare-site-footer p {
    margin: 7px 0 0;
}

.petcare-site-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.petcare-site-footer a {
    color: var(--ohm-blue);
    font-weight: 700;
    text-decoration: none;
}

.petcare-site-footer a:hover {
    text-decoration: underline;
}

.petcare-site-footer-company {
    font-size: .9rem;
}

.petcare-site-footer-copyright {
    font-size: .82rem;
}


/*
|--------------------------------------------------------------------------
| Privacy / Legal Pages
|--------------------------------------------------------------------------
*/

.petcare-legal-page {
    padding: 38px 20px 56px;
    background: #f6f9fb;
}

.petcare-legal-card {
    width: min(820px, 100%);
    margin: 0 auto;
    padding: 42px 48px;
    border: 1px solid #d8e0e6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(11, 27, 41, .07);
    color: #283946;
    line-height: 1.68;
}

.petcare-legal-heading {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8ec;
}

.petcare-legal-kicker {
    margin: 0 0 5px;
    color: var(--ohm-blue);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.petcare-legal-heading h1 {
    margin: 0;
    color: var(--ohm-dark);
    font-size: clamp(2rem, 5vw, 2.65rem);
    line-height: 1.15;
}

.petcare-legal-updated {
    margin: 10px 0 0;
    color: #687783;
    font-size: .9rem;
}

.petcare-legal-card section {
    margin-top: 30px;
}

.petcare-legal-card h2 {
    margin: 0 0 9px;
    color: var(--ohm-dark);
    font-size: 1.25rem;
    line-height: 1.3;
}

.petcare-legal-card p {
    margin: 0 0 14px;
}

.petcare-legal-card ul {
    margin: 10px 0 0;
    padding-left: 22px;
}

.petcare-legal-card li + li {
    margin-top: 7px;
}

.petcare-legal-card a {
    color: var(--ohm-blue);
    font-weight: 700;
}

@media (max-width: 600px) {
    .petcare-legal-page {
        padding: 20px 12px 36px;
    }

    .petcare-legal-card {
        padding: 28px 22px;
        border-radius: 10px;
    }
}


/*
|--------------------------------------------------------------------------
| Booking Card Primary Actions
|--------------------------------------------------------------------------
*/

.booking-card-with-action {
    position: relative;
}

.booking-card-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.booking-card-title-actions,
.booking-card-with-action .customer-request-status-wrap {
    position: relative;
    z-index: 2;
}

.booking-card-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.booking-card-action {
    position: relative;
    z-index: 3;
    white-space: nowrap;
}

@media (max-width: 650px) {
    .booking-card-title-actions,
    .booking-card-with-action .customer-request-status-wrap {
        align-items: flex-end;
    }

    .booking-card-action {
        padding: 7px 10px;
        font-size: .88rem;
    }
}

/*
|--------------------------------------------------------------------------
| Booking Card Primary Actions - Mobile Wrapping
|--------------------------------------------------------------------------
|
| On narrow booking cards, keep status/payment badges together on the
| first line when possible and move the primary booking action to its own
| line rather than allowing it to overflow the card.
|
*/

@media (max-width: 700px) {

    .booking-card-title-actions,
    .booking-card-with-action .customer-request-status-wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .booking-card-title-actions .booking-card-action,
    .booking-card-with-action .customer-request-status-wrap .booking-card-action {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /*
     * Give the action its own row on phone-sized cards. This keeps
     * Confirmed / Payment Pending together and prevents View Journal,
     * Start Visit, Resume Visit, etc. from extending past the card.
     */
    .booking-card-title-actions .booking-card-action,
    .booking-card-with-action .customer-request-status-wrap .booking-card-action {
        margin-left: 0;
    }

    @media (max-width: 520px) {
        .booking-card-title-actions .booking-card-action,
        .booking-card-with-action .customer-request-status-wrap .booking-card-action {
            flex-basis: 100%;
            width: fit-content;
        }
    }
}

/* Staff booking card alignment. */
.staff-bookings-page .booking-request-title-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.staff-bookings-page .booking-card-title-actions {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}
.staff-bookings-page .booking-card-action {
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
}
@media (max-width: 700px) {
    .staff-bookings-page .booking-card-title-actions {
        align-items: flex-start;
    }
}
@media (max-width: 520px) {
    .staff-bookings-page .booking-card-title-actions .booking-card-action {
        flex-basis: auto;
        width: fit-content;
    }
}

/*
 * Status/action wrapper rows sit above the stretched card link for layout.
 * Let blank space in those rows fall through to the card navigation while
 * preserving the actual buttons/links as independent controls.
 */
.booking-card-with-action .booking-card-title-actions,
.booking-card-with-action .booking-card-action-row {
    pointer-events: none;
}

.booking-card-with-action .booking-card-title-actions a,
.booking-card-with-action .booking-card-title-actions button,
.booking-card-with-action .booking-card-action-row a,
.booking-card-with-action .booking-card-action-row button {
    pointer-events: auto;
}

.staff-bookings-page .booking-request-card[data-booking-url] {
    cursor: pointer;
}

.petcare-legal-back {
    display: inline-block;
    margin-bottom: 22px;
}

/*
|--------------------------------------------------------------------------
| Staff Finances
|--------------------------------------------------------------------------
*/

.staff-finances-section {
    max-width: 760px;
}

.staff-finances-section > h2 {
    margin-top: 0;
}

.staff-finance-method {
    padding: 20px 0;
    border-top: 2px solid #b9c4cd;
}

.staff-finance-method:first-of-type {
    margin-top: 20px;
}

.staff-finance-enable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-weight: 700;
    cursor: pointer;
}

.staff-finance-enable-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
}

.staff-finance-field {
    margin-bottom: 16px;
}

.staff-finance-field:last-child {
    margin-bottom: 0;
}

.staff-finance-field > label {
    font-weight: 600;
}

.staff-finance-field input {
    min-height: 44px;
    font-size: 1rem;
}

#staff-payment-methods-form > .btn {
    margin-top: 4px;
}

@media (max-width: 600px) {
    .staff-finances-section {
        padding: 18px;
    }

    .staff-finance-method {
        padding: 18px 0;
    }

    .staff-finance-field input {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Shared Booking Modal
|--------------------------------------------------------------------------
*/

.booking-modal.hidden {
    display: none;
}

.booking-modal {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.booking-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .45);
}

.booking-modal-content {
    position: relative;
    z-index: 1;

    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;

    padding: 24px;

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .25);
}
/* --------------------------------------------------------------------------
   Staff Customer - compact payment history breakdown
   -------------------------------------------------------------------------- */
.customer-payment-card {
    padding: 12px 14px;
    border: 1px solid #d8dee5;
    border-radius: 10px;
    background: #fff;
}

.customer-payment-card + .customer-payment-card {
    margin-top: 10px;
}

.customer-payment-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.customer-payment-amount {
    flex: 0 0 auto;
    font-weight: 800;
    white-space: nowrap;
}

.customer-payment-breakdown {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #edf0f2;
}

.customer-payment-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
    line-height: 1.3;
}

.customer-payment-breakdown-row > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.customer-payment-breakdown-detail > span:first-child {
    padding-left: 14px;
    color: #66727d;
}

.customer-payment-note,
.customer-payment-refund-link {
    margin-top: 7px;
}

.customer-payment-card-actions {
    margin-top: 8px;
}

.customer-payment-refund-button {
    padding: 6px 11px;
    font-size: .88rem;
}


/*
|--------------------------------------------------------------------------
| In-Progress Booking Elapsed Time
|--------------------------------------------------------------------------
*/

.booking-card-elapsed {
    margin-top: 8px;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
}

.booking-card-elapsed.is-on-time {
    color: #2e7d32;
}

.booking-card-elapsed.is-nearing-end {
    color: #9a6700;
}

.booking-card-elapsed.is-over-time {
    color: #c62828;
}

/* Customer review */
.customer-review-page{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.customer-review-card{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
    border:1px solid #d8dee5;
    border-radius:14px;
    padding:28px;
    box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.customer-review-card h1{margin:0 0 18px;color:var(--ohm-blue)}
.customer-review-prompt{margin:0 0 22px;line-height:1.55}
.customer-review-rating-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.customer-review-rating-row select{width:80px}
.customer-review-stars,.customer-review-readonly-rating{color:var(--ohm-blue);font-size:1.55rem;letter-spacing:3px}
.customer-review-feedback-label{
    display:block;
    margin-bottom:6px;
    text-align:center;
}

.customer-review-textarea{
    width:100%;
    min-height:180px;
    padding:12px;
    border:1px solid #cfd8e3;
    border-radius:8px;
    font:inherit;
    line-height:1.45;
    text-align:left;
}

.customer-review-count{
    text-align:right;
    margin:5px 0 14px;
    color:#66727d;
    font-size:.85rem;
}
.customer-review-readonly-rating{margin:18px 0 12px}
.customer-review-readonly-text{white-space:normal;line-height:1.55;padding:16px;background:#f6f9fb;border-radius:10px}
.staff-customer-review-request{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.staff-customer-review-request[hidden]{display:none}
@media(max-width:600px){.customer-review-card{padding:20px}.customer-review-rating-row{align-items:flex-start}.staff-customer-review-request{align-items:flex-start}}

/* My Services: vertically center modifier details and pricing controls. */
.staff-service-modifier-row > .staff-service-modifier-info,
.staff-service-modifier-row > .staff-service-modifier-price {
    align-self: center;
}
.staff-service-modifier-price:has(> .staff-service-price-reference:only-child) {
    grid-template-columns: 90px;
}

/* My Services: keep service settings and modifier controls in a compact column. */
.staff-services-page .staff-service-editor-form {
    max-width: 680px;
}
.staff-services-page .staff-service-modifier-row {
    grid-template-columns: minmax(0, 1fr) 234px;
    column-gap: 20px;
}
.staff-services-page .staff-service-modifier-price {
    grid-template-columns: 90px 130px;
    gap: 14px;
}
@media (max-width: 600px) {
    .staff-services-page .staff-service-modifier-row {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}