/*
 * PAWS IN STRIDE — PORTAL STYLESHEET
 * Conservative cleanup of portal.css.
 * Cascade order, page scopes, media queries, and intentional fallback values are preserved.
 */

/* ========================================
   RESET / GLOBAL
======================================== */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    color: #111;
    font-family: Arial,Helvetica,sans-serif;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    width: 100%;
    padding: 14px;
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

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

.login-container {
    width: 90%;
    max-width: 420px;
    margin: 100px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
}

.login-container h1 {
    margin: 0 0 5px;
}

.login-container h2 {
    margin: 0 0 25px;
    font-size: 20px;
}

.login-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.login-container input {
    width: 100%;
    margin: 8px 0 20px;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

#login-message {
    margin-bottom: 0;
    text-align: center;
}

/* ========================================
   LOGIN SIGNUP PROMPT
======================================== */

.login-signup-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    color: #74848f;
    font-size: 13px;
}

.login-signup-prompt a {
    color: #1f7bc2;
    font-weight: 800;
    text-decoration: none;
    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

.login-signup-prompt a:hover {
    color: #2890df;
    text-decoration: none;
}

.login-signup-prompt a:active {
    opacity: 0.75;
}

/* ========================================
   DASHBOARD
======================================== */

.dashboard-container {
    width: 90%;
    max-width: 800px;
    margin: 50px auto;
}

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

.dashboard-header h1 {
    margin: 0 0 6px;
}

.dashboard-header h2 {
    margin: 0;
    font-size: 24px;
}

/* ========================================
   PUSH NOTIFICATIONS
======================================== */

.push-notification-card {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px 20px;
    background: linear-gradient(135deg,rgba(71,206,230,0.10),rgba(40,144,223,0.06));
    border: 1px solid rgba(40,144,223,0.16);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(24,70,95,0.06);
}

/* ========================================
   PUSH NOTIFICATION ICON
======================================== */

.push-notification-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 14px;
    font-size: 21px;
    box-shadow: 0 4px 12px rgba(24,70,95,0.08);
}

/* ========================================
   PUSH NOTIFICATION COPY
======================================== */

.push-notification-copy {
    flex: 1;
    min-width: 0;
}

.push-notification-copy h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #243746;
}

.push-notification-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #667784;
}

/* ========================================
   PUSH NOTIFICATION BUTTON
======================================== */

.enable-push-notifications-button {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 0;
    border-radius: 11px;
    background: #f5ab40;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease,transform 0.2s ease;
}

.enable-push-notifications-button:hover {
    background: #ef602c;
}

.enable-push-notifications-button:active {
    transform: scale(0.98);
}

.enable-push-notifications-button:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ========================================
   PUSH NOTIFICATION STATUS
======================================== */

.push-notification-status {
    display: none;
    flex: 0 0 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #53616d;
}

/* ========================================
   PUSH NOTIFICATIONS - MOBILE
======================================== */

@media (max-width:700px) {
    .push-notification-card {
        flex-wrap: wrap;
        padding: 16px;
    }

    .push-notification-copy {
        flex: 1 1 calc(100% - 60px);
    }

    .enable-push-notifications-button {
        width: 100%;
    }

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

    .payment-summary-card {
        position: static;
    }
}

/* ========================================
   GENERAL SECTIONS
======================================== */

section {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
}

section h3 {
    margin-top: 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-header h3 {
    margin: 0;
}

/* ========================================
   BUTTONS
======================================== */

.primary-button {
    width: auto;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.primary-button:hover {
    opacity: 0.9;
}

.primary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.secondary-button {
    width: auto;
    padding: 12px 18px;
    background: #fff;
    color: #111;
    border: 1px solid #111;
    border-radius: 8px;
    font-weight: 600;
}

.secondary-button:hover {
    background: #f7f7f7;
}

.close-button {
    width: auto;
    padding: 0 8px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
}

#logout-button,
#admin-logout-button {
    background: #fff;
    color: #111;
    border: 1px solid #aaa;
    border-radius: 8px;
}

#logout-button:hover,
#admin-logout-button:hover {
    border-color: #111;
}

/* ========================================
   BOOKING
======================================== */

.booking-section {
    border: 2px solid #111;
}

.booking-section form {
    margin-top: 20px;
}

.booking-section label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.booking-section input,
.booking-section select {
    width: 100%;
    margin-bottom: 18px;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.booking-help {
    margin: -5px 0 12px;
    color: #666;
    font-size: 14px;
}


/* ========================================
   DESKTOP REQUEST SERVICE FORM CONTROLS
======================================== */

@media (min-width:701px) {

    .client-portal-page .booking-section label {
        margin-bottom: 7px;

        color: #183447;

        font-size: 13px;
        font-weight: 800;

        line-height: 1.3;
    }


    .client-portal-page .booking-section input,
    .client-portal-page .booking-section select {
        min-height: 48px;

        margin-bottom: 18px;
        padding: 11px 13px;

        background: #ffffff;
        color: #263d4c;

        border: 1px solid #c8dce8;
        border-radius: 11px;

        box-shadow: none;

        font-size: 14px;
        font-weight: 600;

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


    .client-portal-page .booking-section input:focus,
    .client-portal-page .booking-section select:focus {
        outline: none;

        background: #ffffff;

        border-color: #1f9aeb;

        box-shadow:
            0 0 0 3px rgba(31,154,235,0.10);
    }


    .client-portal-page .booking-help {
        margin: -5px 0 14px;

        color: #6b7785;

        font-size: 12px;
        font-weight: 500;

        line-height: 1.45;
    }

}

.booking-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    font-size: 18px;
}

.booking-price-details {
    margin: -5px 0 18px;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

#booking-submit-button {
    width: 100%;
}

#booking-message {
    margin: 15px 0 0;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   BOOKING FIELD VALIDATION
======================================== */

.booking-section input.booking-field-error,
.booking-section select.booking-field-error {
    border-color: #dc3545 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.14) !important;
}

/* ========================================
   BOOKING VISIT TIME WINDOWS
======================================== */

.booking-time-windows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.booking-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.booking-section .booking-time-row .booking-time-select {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* ========================================
   REMOVE VISIT TIME
======================================== */

.booking-section .remove-booking-time-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #ffffff;
    color: #788794;
    border: 1px solid #c8dce8;
    border-radius: 11px;
    box-shadow: none;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease,color 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}

.booking-section .remove-booking-time-button:hover {
    background: #fff5f4;
    color: #c0392b;
    border-color: #e6b9b4;
}

.booking-section .remove-booking-time-button:active {
    transform: scale(0.96);
}

/* ========================================
   ADD ANOTHER VISIT TIME
======================================== */

.booking-section .add-booking-time-button {
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 10px 14px;
    background: #f4f9fc;
    color: #1f7bc2;
    border: 1px solid #c8dce8;
    border-radius: 11px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease,color 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}

.booking-section .add-booking-time-button span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.booking-section .add-booking-time-button:hover:not(:disabled) {
    background: #eaf5fb;
    color: #176aa9;
    border-color: #9fc7dd;
}

.booking-section .add-booking-time-button:active:not(:disabled) {
    transform: scale(0.985);
}

.booking-section .add-booking-time-button:disabled {
    background: #f3f5f6;
    color: #9ba7af;
    border-color: #dde4e8;
    cursor: not-allowed;
    opacity: 0.72;
}

/* ========================================
   MULTI-TIME HELPER
======================================== */

.booking-section .booking-time-help {
    margin: 6px 2px 18px;
    padding: 0;
    background: transparent;
    color: #6b7785;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

/* ========================================
   MULTI-TIME HELPER — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .booking-section .booking-time-help {
        margin: 6px 2px 20px;
        padding: 0;
        background: transparent;
        color: #6b7785;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
    }
}

/* ========================================
   BOOKING FIELD VALIDATION FOCUS
======================================== */

.booking-section input.booking-field-error:focus,
.booking-section select.booking-field-error:focus {
    border-color: #dc3545 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.20) !important;
}

/* ========================================
   REQUEST SERVICE FORM CONTROLS — MOBILE
======================================== */

@media (max-width:700px) {

    body.mobile-app-screen-services
    .booking-section
    #booking-form > label,

    body.mobile-app-screen-services
    .booking-section
    #service-option-wrapper > label,

    body.mobile-app-screen-services
    .booking-section
    #time-window-wrapper > label {

        margin: 0 0 7px;
        color: #183447;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
    }


    /* ========================================
       ALL REQUEST SERVICE DROPDOWNS
    ======================================== */

    body.mobile-app-screen-services
    .booking-section
    #booking-form
    select {

        min-height: 48px;
        padding: 11px 13px;
        background: #ffffff;
        color: #263d4c;
        border: 1px solid #c8dce8;
        border-radius: 11px;
        box-shadow: none;
        font-size: 14px;
        font-weight: 600;
    }


    body.mobile-app-screen-services
    .booking-section
    #booking-form
    select:focus {

        outline: none;
        border-color: #1f9aeb;
        box-shadow: 0 0 0 3px rgba(31,154,235,0.10);
    }

}

/* ========================================
   ADDITIONAL PETS
======================================== */

.additional-pets-wrapper {
    margin-bottom: 18px;
}

.additional-pets-list {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.additional-pet-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 13px 14px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.additional-pet-option:last-child {
    border-bottom: none;
}

.additional-pet-option:hover {
    background: #fafafa;
}

.additional-pet-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.additional-pet-main input {
    width: 18px !important;
    height: 18px;
    margin: 0 !important;
}

.additional-pet-fee {
    color: #666;
    font-size: 13px;
    font-weight: 600;
}

.additional-pets-help {
    margin: 8px 2px 0;
    color: #666;
    font-size: 13px;
}

/* ========================================
   ADDITIONAL PETS — MOBILE REDESIGN
======================================== */

@media (max-width:700px) {

    body.mobile-app-screen-services
    .additional-pets-wrapper {
        margin-bottom: 20px;
    }


    body.mobile-app-screen-services
    .additional-pets-wrapper > label {
        margin: 0 0 7px;
        color: #183447;
        font-size: 13px;
        font-weight: 800;
    }


    body.mobile-app-screen-services
    .additional-pets-list {
        background: #f4f9fc;
        border: 1px solid #d3e4ed;
        border-radius: 11px;
        box-shadow: none;
    }


    body.mobile-app-screen-services
    .additional-pet-option {
        min-height: 48px;
        padding: 11px 13px;
        background: transparent;
        border-bottom: 1px solid #dce9f0;
    }


    body.mobile-app-screen-services
    .additional-pet-option:hover {
        background: #edf6fb;
    }


    body.mobile-app-screen-services
    .additional-pet-main {
        color: #263d4c;
        font-size: 14px;
        font-weight: 700;
    }


    body.mobile-app-screen-services
    .additional-pet-main input {
        width: 20px !important;
        height: 20px;
        accent-color: #1f9aeb;
    }


    body.mobile-app-screen-services
    .additional-pet-fee {
        color: #567487;
        font-size: 11px;
        font-weight: 800;
    }


    body.mobile-app-screen-services
    .additional-pets-help {
        margin: 7px 2px 0;
        color: #6b7785;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
    }

}


/* ========================================
   REPEAT LAST WEEK BOOKING
======================================== */

.client-portal-page
.repeat-last-week-booking {
    margin: 16px 0 20px;
}


.client-portal-page
.repeat-last-week-booking-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;
    min-height: 46px;

    padding: 11px 16px;

    appearance: none;

    background: #eef7fd;
    color: #1f7bc2;

    border: 1px solid #9ed2f2;
    border-radius: 11px;

    box-shadow: none;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.client-portal-page
.repeat-last-week-booking-button:hover:not(:disabled) {
    background: #e4f3fc;
    color: #176aa9;

    border-color: #75bce7;

    box-shadow:
        0 4px 12px rgba(31,123,194,0.10);
}


.client-portal-page
.repeat-last-week-booking-button:active:not(:disabled) {
    transform: scale(0.985);
}


.client-portal-page
.repeat-last-week-booking-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}


/* ========================================
   REPEAT LAST WEEK — DISABLED
======================================== */

.client-portal-page
.repeat-last-week-booking-button:disabled {
    background: #f3f6f8;
    color: #93a3ae;

    border-color: #d6e1e7;

    box-shadow: none;

    cursor: not-allowed;
    opacity: 1;
}


/* ========================================
   REPEAT LAST WEEK MESSAGE
======================================== */

.client-portal-page
.repeat-last-week-booking-message {
    margin: 7px 2px 0;

    color: #667784;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}


/* ========================================
   REPEAT LAST WEEK — MOBILE
======================================== */

@media (max-width:700px) {

    body.mobile-app-screen-services
    .repeat-last-week-booking {
        margin: 15px 0 20px;
    }


    body.mobile-app-screen-services
    .repeat-last-week-booking-button {
        min-height: 48px;

        padding: 12px 15px;

        font-size: 13px;
    }

}
/* ========================================
   BOARDING
======================================== */

.boarding-policy {
    margin-bottom: 18px;
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.boarding-policy p {
    margin: 8px 0 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* ========================================
   SELECTED DATES
======================================== */

#selected-dates-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

/* ========================================
   SELECTED DATES HEADER
======================================== */

.selected-dates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.selected-dates-header strong {
    font-size: 14px;
    font-weight: 800;
}

#selected-date-count {
    color: #1f7bc2;
    font-size: 12px;
    font-weight: 800;
}

/* ========================================
   SELECTED DATE GROUP
======================================== */

.booking-section .selected-date-group {
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0;
    background: rgba(255,255,255,0.90);
    border: 1px solid #d7e5ed;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(35,93,125,0.045);
}

.booking-section .selected-date-group:last-child {
    margin-bottom: 0;
}

/* ========================================
   SELECTED DATE GROUP HEADER
======================================== */

.booking-section .selected-date-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 12px 14px;
    color: #183447;
    background: linear-gradient(135deg,#ffffff 0%,#f5fbfd 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease;
}

.booking-section .selected-date-group-header:hover {
    background: linear-gradient(135deg,#fbfdfe 0%,#edf8fc 100%);
}

/* ========================================
   SELECTED DATE HEADER COPY
======================================== */

.selected-date-group-header-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ========================================
   SELECTED DATE TITLE
======================================== */

.selected-date-group-title {
    color: #183447;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

/* ========================================
   SELECTED DATE META
======================================== */

.selected-date-group-meta {
    color: #6b7c89;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

/* ========================================
   SELECTED DATE ARROW
======================================== */

.selected-date-group-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #2890df;
    font-size: 11px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.selected-date-group-arrow-open {
    transform: rotate(180deg);
}

/* ========================================
   SELECTED DATE GROUP CONTENT
======================================== */

.selected-date-group-content {
    padding: 4px 12px 10px;
    background: #ffffff;
    border-top: 1px solid #e2edf3;
}

.selected-date-group-content[hidden] {
    display: none;
}

/* ========================================
   SELECTED VISIT ROW
======================================== */

.selected-date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 10px 2px;
    border-top: 1px solid #edf2f5;

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

.selected-date-group-content .selected-date-item:first-child {
    border-top: 0;
}

/* ========================================
   SELECTED VISIT SUMMARY
======================================== */

.selected-visit-summary {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* ========================================
   SELECTED VISIT CARD
======================================== */

.selected-date-item {
    position: relative;
    overflow: hidden;

    align-items: center;

    gap: 18px;

    margin: 9px 0;

    padding:
        15px
        16px
        15px
        22px;

    background:
        linear-gradient(
            145deg,
            #fbfdfe 0%,
            #f6fafc 100%
        );

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

    box-shadow:
        0 3px 10px rgba(24,52,71,0.045);
}


/* ========================================
   SELECTED VISIT GRADIENT BAR
======================================== */

.selected-date-item::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            #1f9aeb 0%,
            #47cee6 100%
        );
}


.selected-date-group-content
.selected-date-item:first-child {
    border-top:
        1px solid #d8e6ed;
}


/* ========================================
   PET CHIPS
======================================== */

.selected-visit-pet-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


.selected-visit-pet-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    background: #eef7fd;
    color: #245b78;

    border: 1px solid #b9dcf1;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}


.selected-visit-pet-chip-missing {
    color: #6b7785;
}


/* ========================================
   SERVICE LINE
======================================== */

.selected-visit-service-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 5px;

    color: #183447;

    line-height: 1.3;
}


.selected-visit-service-name {
    color: #183447;

    font-size: 15px;
    font-weight: 850;
}


.selected-visit-service-separator {
    color: #9aabb5;

    font-size: 14px;
    font-weight: 700;
}


.selected-visit-service-option {
    color: #405b6c;

    font-size: 14px;
    font-weight: 700;
}


/* ========================================
   SELECTED VISIT TIME
======================================== */

.selected-visit-time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.selected-visit-time {
    color: #1f7bc2;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}


/* ========================================
   MOBILE SELECTED VISIT SUMMARY
======================================== */

@media (max-width:700px) {

    body.mobile-app-screen-services
    .selected-date-item {
        gap: 12px;

        margin: 8px 0;

        padding:
            13px
            12px
            13px
            19px;

        border-radius: 11px;
    }


    body.mobile-app-screen-services
    .selected-date-item::before {
        width: 5px;
    }


    body.mobile-app-screen-services
    .selected-visit-summary {
        gap: 7px;
    }


    body.mobile-app-screen-services
    .selected-visit-pet-chip {
        padding: 4px 9px;

        font-size: 11px;
    }


    body.mobile-app-screen-services
    .selected-visit-service-name {
        font-size: 14px;
    }


    body.mobile-app-screen-services
    .selected-visit-service-option {
        font-size: 13px;
    }


    body.mobile-app-screen-services
    .selected-visit-time {
        font-size: 12px;
    }

}

/* ========================================
   MOBILE SELECTED VISIT SUMMARY
======================================== */

@media (max-width:700px) {

    body.mobile-app-screen-services
    .selected-date-item {
        gap: 12px;

        margin: 8px 0;
        padding: 13px 12px;

        border-radius: 11px;
    }


    body.mobile-app-screen-services
    .selected-visit-summary {
        gap: 7px;
    }


    body.mobile-app-screen-services
    .selected-visit-pet-chip {
        padding: 4px 9px;

        font-size: 11px;
    }


    body.mobile-app-screen-services
    .selected-visit-service-name {
        font-size: 14px;
    }


    body.mobile-app-screen-services
    .selected-visit-service-option {
        font-size: 13px;
    }


    body.mobile-app-screen-services
    .selected-visit-time {
        font-size: 12px;
    }

}

/* ========================================
   DESKTOP SELECTED VISIT POLISH
======================================== */

@media (min-width:701px) {

    /* ========================================
       VISIT CARD
    ======================================== */

    .client-portal-page
    .selected-date-item {
        display: flex;
        align-items: center;

        gap: 20px;

        min-height: 68px;

        padding:
            14px
            18px
            14px
            24px;
    }


   /* ========================================
      VISIT CONTENT — HORIZONTAL
   ======================================== */
   
   .client-portal-page
   .selected-visit-summary {
       min-width: 0;
       flex: 1;
   
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: flex-start;
   
       gap: clamp(
           18px,
           2vw,
           30px
       );
   }


    /* ========================================
       PETS
    ======================================== */

    .client-portal-page
    .selected-visit-pet-chips {
        flex: 0 1 auto;

        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 7px;

        max-width: 190px;
    }


    .client-portal-page
    .selected-visit-pet-chip {
        padding:
            6px
            12px;

        font-size:
            clamp(
                12px,
                1vw,
                14px
            );

        font-weight: 800;
    }


    /* ========================================
       SERVICE
    ======================================== */

    .client-portal-page
    .selected-visit-service-line {
        flex: 0 0 auto;

        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;

        gap: 7px;

        white-space: nowrap;
    }


    .client-portal-page
    .selected-visit-service-name {
        font-size:
            clamp(
                17px,
                1.45vw,
                20px
            );

        font-weight: 850;
    }


    .client-portal-page
    .selected-visit-service-separator {
        font-size:
            clamp(
                15px,
                1.2vw,
                17px
            );
    }


    .client-portal-page
    .selected-visit-service-option {
        font-size:
            clamp(
                15px,
                1.2vw,
                17px
            );

        font-weight: 750;
    }


    /* ========================================
       TIME
    ======================================== */

    .client-portal-page
    .selected-visit-time-row {
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        gap: 8px;

        white-space: nowrap;
    }


    .client-portal-page
    .selected-visit-time {
        color: #1f7bc2;

        font-size:
            clamp(
                14px,
                1.2vw,
                17px
            );

        font-weight: 800;
        line-height: 1.35;
    }


    /* ========================================
       REMOVE
    ======================================== */

    .client-portal-page
    .remove-date-button {
        flex: 0 0 auto;

        min-height: 38px;

        margin-left: auto;

        padding:
            8px
            13px;

        border-radius: 9px;

        font-size: 12px;
        font-weight: 800;
    }

}

/* ========================================
   SELECTED VISIT CAPACITY CONFLICT
======================================== */

.selected-date-item-conflict {
    margin: 6px 0;
    padding: 10px;
    background: #fff8f8;
    border: 1px solid #dc3545;
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.07);
}

.selected-date-group-conflict {
    border-color: #e3a8ad;
}

.selected-date-group-conflict .selected-date-group-header {
    background: #fffafa;
}

.selected-date-item-conflict .selected-visit-date {
    color: #b02a37;
}

.selected-visit-time-conflict {
    color: #b02a37;
}

/* ========================================
   UNAVAILABLE BADGE
======================================== */

.selected-visit-unavailable {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    background: #dc3545;
    color: #ffffff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ========================================
   REMOVE SELECTED VISIT
======================================== */

.remove-date-button {
    width: auto;
    flex-shrink: 0;
    padding: 6px 10px;
    background: #ffffff;
    color: #1f7bc2;
    border: 1px solid #c8dce8;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.remove-date-button:hover {
    background: #f4f9fc;
    color: #176aa9;
    border-color: #9fc7dd;
}

.selected-date-item-conflict .remove-date-button {
    background: #ffffff;
    color: #b02a37;
    border-color: #dc3545;
}

.selected-date-item-conflict .remove-date-button:hover {
    background: #fff1f1;
    border-color: #b02a37;
}

/* ========================================
   EMPTY SELECTED VISITS
======================================== */

.empty-dates-message {
    margin: 0;
    color: #777;
    font-size: 13px;
}

/* ========================================
   CALENDARS
======================================== */

.booking-calendar,
.upcoming-calendar {
    padding: 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
}

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

.calendar-header,
.upcoming-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.calendar-header strong,
.upcoming-calendar-header strong {
    font-size: 18px;
}

.calendar-nav-button {
    width: 42px;
    height: 42px;
    padding: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 28px;
    line-height: 1;
}

.calendar-nav-button:hover {
    border-color: #111;
}

.calendar-weekdays,
.calendar-grid,
.upcoming-calendar-weekdays,
.upcoming-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 6px;
}

.calendar-weekdays,
.upcoming-calendar-weekdays {
    margin-bottom: 6px;
}

.calendar-weekdays span,
.upcoming-calendar-weekdays span {
    padding: 4px 0;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.calendar-empty-day,
.upcoming-calendar-empty {
    aspect-ratio: 1/1;
}

/* ========================================
   BOOKING CALENDAR DAY
======================================== */

.calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0;
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* ========================================
   DAY NUMBER
======================================== */

.calendar-day-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ========================================
   CALENDAR HOVER
======================================== */

.calendar-day:hover:not(:disabled) {
    border-color: #111;
}

/* ========================================
   SELECTED DATE
======================================== */

.calendar-day-selected {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* ========================================
   TODAY
======================================== */

.calendar-day-today:not(.calendar-day-selected) {
    border: 2px solid #111;
}

/* ========================================
   PAST DATE
======================================== */

.calendar-day-past {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ========================================
   HOLIDAY DATE
======================================== */

.calendar-day-holiday {
    position: relative;
}

/* ========================================
   HOLIDAY STAR
======================================== */

.calendar-holiday-star {
    position: absolute;
    top: 4px;
    right: 5px;
    z-index: 2;
    color: #f5ab40;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

/* ========================================
   HOLIDAY STAR ON SELECTED DATE
======================================== */

.calendar-day-selected .calendar-holiday-star {
    color: #f5ab40;
}

/* ========================================
   HOLIDAY DATE HOVER
======================================== */

.calendar-day-holiday:hover:not(:disabled) {
    border-color: #f5ab40;
}

/* ========================================
   HOLIDAY DATE TOOLTIP CURSOR
======================================== */

.calendar-day-holiday:not(:disabled) {
    cursor: pointer;
}

/* ========================================
   HOUSEHOLD SECTION
======================================== */

.household-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.household-section-header h3 {
    margin: 0 0 4px;
}

.household-section-help {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.household-edit-button {
    flex-shrink: 0;
}

/* ========================================
   HOUSEHOLD PROFILE
======================================== */

.household-profile-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.client-profile-avatar {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    overflow: hidden;
    background: #111;
    border-radius: 50%;
}

.client-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-profile-initials {
    width: 100%;
    height: 100%;

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

    color: #ffffff;

    font-size: 28px;
    font-weight: 700;
}

.household-profile-summary {
    min-width: 0;
}

.household-profile-summary h4 {
    margin: 0 0 6px;
    font-size: 22px;
}

.household-profile-summary p {
    margin: 3px 0;
    color: #555;
    font-size: 14px;
}


/* ========================================
   DESKTOP HOUSEHOLD PROFILE POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .household-profile-top {
        gap: 20px;

        padding: 18px;

        background: linear-gradient(
            145deg,
            #fbfdfe 0%,
            #f6fafc 100%
        );

        border: 1px solid #dbe7ed;
        border-radius: 16px;
    }


    .client-portal-page .household-profile-summary h4 {
        margin: 0 0 7px;

        color: #183447;

        font-size: 22px;
        font-weight: 800;

        letter-spacing: -0.02em;
        line-height: 1.2;
    }


    .client-portal-page .household-profile-summary p {
        margin: 4px 0;

        color: #6b7785;

        font-size: 13px;
        font-weight: 500;

        line-height: 1.45;
    }

}

/* ========================================
   HOUSEHOLD FIELD VALIDATION
======================================== */

.household-form-field input.household-field-error,
.household-form-field select.household-field-error,
.household-form-field textarea.household-field-error {
    border-color: #dc3545 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.14) !important;
}

.household-form-field input.household-field-error:focus,
.household-form-field select.household-field-error:focus,
.household-form-field textarea.household-field-error:focus {
    border-color: #dc3545 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.20) !important;
}

/* ========================================
   HOUSEHOLD DETAILS
======================================== */

.household-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.household-detail-card {
    min-width: 0;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
}

.household-detail-card-full {
    grid-column: 1/-1;
}

.household-detail-label {
    display: block;
    margin-bottom: 8px;
    color: #777;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.household-detail-value {
    color: #222;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.household-notes-value {
    white-space: normal;
}

/* ========================================
   PROPERTY ACCESS
======================================== */

.access-detail-card {
    background: #f7f7f7;
}

/* ========================================
   PROPERTY ACCESS COLLAPSE TOGGLE
======================================== */

.detail-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.detail-collapse-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-collapse-toggle .household-detail-label {
    margin-bottom: 0;
}

.detail-collapse-status {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.detail-collapse-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #666;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.2s ease,color 0.2s ease;
}

.detail-collapse-toggle[aria-expanded="true"] .detail-collapse-chevron {
    transform: rotate(-90deg);
}

.detail-collapse-toggle:hover .detail-collapse-chevron {
    color: #111;
}

/* ========================================
   PROPERTY ACCESS COLLAPSE CONTENT
======================================== */

.detail-collapse-content {
    margin-top: 14px;
    padding-top: 4px;
    border-top: 1px solid #e5e5e5;
}

.detail-collapse-content[hidden] {
    display: none;
}

/* ========================================
   PROPERTY ACCESS DETAILS
======================================== */

.access-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.access-detail-item {
    padding: 12px 0;
    border-top: 1px solid #e5e5e5;
}

.access-detail-item:nth-child(1),
.access-detail-item:nth-child(2) {
    border-top: none;
}

.access-detail-item span {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.access-detail-item strong {
    display: block;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ========================================
   HOUSEHOLD EDIT FORM
======================================== */

.household-form-panel {
    margin-bottom: 20px;
    padding: 20px;
    background: #fafafa;
    border: 2px solid #111;
    border-radius: 14px;
}

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

.household-form-header h4 {
    margin: 0 0 4px;
    font-size: 20px;
}

.household-form-header p {
    margin: 0;
    color: #666;
    font-size: 13px;
}

.household-form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #ddd;
}

.household-form-section h5 {
    margin: 0 0 16px;
    font-size: 16px;
}

.household-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.household-form-field {
    margin-bottom: 18px;
}

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

.household-form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.household-form-field input,
.household-form-field select,
.household-form-field textarea {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.household-form-field textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.45;
}

.household-form-field input:disabled {
    background: #eee;
    color: #666;
    cursor: not-allowed;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 12px;
}

.access-form-heading p {
    margin: -10px 0 16px;
    color: #666;
    font-size: 13px;
}

.household-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

#household-form-message {
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   CLIENT PROFILE PHOTO EDITOR
======================================== */

.client-photo-editor {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
}

.client-photo-preview-wrapper {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
    background: #111;
    border-radius: 50%;
}

.client-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-photo-preview-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}

.client-photo-controls {
    flex: 1;
}

.client-photo-upload-button {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 11px 16px;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.client-photo-help {
    margin: 8px 0 0;
    color: #777;
    font-size: 12px;
}

/* ========================================
   ACCOUNT SECURITY
======================================== */

.account-security-detail-card {
    background: #f7f7f7;
}

/* ========================================
   ACCOUNT SECURITY FORM
======================================== */

.account-security-form-heading {
    margin-bottom: 18px;
}

.account-security-form-heading h4 {
    margin: 0 0 5px;
    color: #222;
    font-size: 16px;
    font-weight: 700;
}

.account-security-form-heading p {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

.change-password-form {
    padding-top: 10px;
}

.change-password-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.change-password-field {
    min-width: 0;
}

.change-password-field label {
    display: block;
    margin-bottom: 6px;
    color: #222;
    font-size: 13px;
    font-weight: 600;
}

.change-password-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #222;
    font-family: inherit;
    font-size: 16px;
}

.change-password-field input:focus {
    outline: none;
    border-color: var(--pis-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.12);
}

.change-password-field input.change-password-field-error {
    border-color: #dc3545;
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.12);
}

.change-password-requirements {
    margin-top: 9px;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

.change-password-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.change-password-message {
    min-height: 0;
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.change-password-message:empty {
    display: none;
}

.change-password-message.is-success {
    color: #198754;
}

.change-password-message.is-error {
    color: #dc3545;
}

/* ========================================
   ACCOUNT SECURITY - MOBILE
======================================== */

@media (max-width:700px) {
    .change-password-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .change-password-actions {
        display: block;
    }

    .change-password-actions .primary-button {
        width: 100%;
    }
}

/* ========================================
   PET SECTION
======================================== */

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

.pets-section-header h3 {
    margin: 0 0 4px;
}

.pets-section-help {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.pet-add-button {
    flex-shrink: 0;
}

/* ========================================
   PET PROFILE
======================================== */

.pet-profile-card {
    margin-top: 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 14px;
}

.pet-profile-top {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
}

.pet-profile-photo {
    width: 92px;
    height: 92px;
    object-fit: cover;
    background: #f5f5f5;
    border: 1px solid #dddddd;
    border-radius: 50%;
}

.pet-profile-summary {
    min-width: 0;
}

.pet-profile-summary h4 {
    margin: 0 0 5px;
    font-size: 22px;
}

.pet-profile-subtitle {
    margin: 0 0 7px;
    color: #555555;
}

.pet-profile-subtitle span {
    margin: 0 5px;
    color: #aaaaaa;
}

.pet-profile-birthday {
    margin: 0;
    color: #666666;
    font-size: 14px;
}


/* ========================================
   DESKTOP PET PROFILE SUMMARY
======================================== */

@media (min-width:701px) {

    .client-portal-page .pet-profile-summary h4 {
        margin: 0 0 6px;

        color: #183447;

        font-size: 22px;
        font-weight: 800;

        letter-spacing: -0.02em;
        line-height: 1.2;
    }


    .client-portal-page .pet-profile-subtitle {
        margin: 0 0 7px;

        color: #526875;

        font-size: 13px;
        font-weight: 650;

        line-height: 1.4;
    }


    .client-portal-page .pet-profile-subtitle span {
        margin: 0 6px;
        color: #a6b6bf;
    }


    .client-portal-page .pet-profile-birthday {
        color: #7a8993;

        font-size: 12px;
        font-weight: 600;

        line-height: 1.4;
    }

}

.edit-pet-button {
    width: auto;
    min-height: 42px;
    padding: 10px 15px;

    background: #f4f9fc;
    color: #1f7bc2;

    border: 1px solid #c8dce8;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.edit-pet-button:hover {
    background: #eaf5fb;
    color: #176aa9;
    border-color: #9fc7dd;
}

.edit-pet-button:active {
    transform: scale(0.985);
}

/* ========================================
   PET PROFILE DETAILS
======================================== */

.pet-profile-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e8eef2;
}

.pet-detail-block {
    min-width: 0;
    padding: 13px 14px;
    background: #ffffff;
    border: 1px solid #dbe7ed;
    border-radius: 12px;
}

.pet-detail-label {
    display: block;
    margin-bottom: 6px;
    color: #1f7bc2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pet-detail-block p {
    margin: 0;
    color: #4b5963;
    font-size: 13px;
    line-height: 1.45;
}
/* ========================================
   PET PROFILE DETAILS — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-pets .pet-profile-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.mobile-app-screen-pets .pet-detail-block {
        padding: 12px 13px;
        border-radius: 11px;
    }
}

/* ========================================
   NO PETS
======================================== */

.no-pets-state {
    padding: 30px 15px;
    border: 1px dashed #ccc;
    border-radius: 12px;
    text-align: center;
}

.no-pets-avatar {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 14px;
    object-fit: cover;
    border-radius: 50%;
}

.no-pets-state strong {
    display: block;
    font-size: 17px;
}

.no-pets-state p {
    margin-bottom: 0;
    color: #666;
}

/* ========================================
   PET FORM
======================================== */

.pet-form-panel {
    margin-bottom: 20px;
    padding: 20px;
    background: #fafafa;
    border: 2px solid #111;
    border-radius: 14px;
}


.pet-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}


.pet-form-header h4 {
    margin: 0;
    font-size: 20px;
}


.pet-photo-editor {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}


.pet-photo-preview {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    object-fit: cover;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
}


.pet-photo-controls {
    flex: 1;
}


.pet-photo-upload-button {
    display: inline-block;
    width: auto;
}


.pet-photo-help {
    margin: 8px 0 0;
    color: #777;
    font-size: 12px;
}


.pet-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}


.pet-form-field {
    min-width: 0;
    margin-bottom: 18px;
}


.pet-form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}


.pet-form-field input,
.pet-form-field select,
.pet-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}


.pet-form-field textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.45;
}


/* ========================================
   PET BIRTHDAY DATE FIELD
======================================== */

#pet-birthday {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    text-align: left;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
}


#pet-birthday::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}


#pet-birthday::-webkit-datetime-edit {
    padding: 0;
    text-align: left;
}
/* ========================================
   PET FORM ACTIONS
======================================== */

.pet-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.pet-form-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ========================================
   PET FORM ACTIONS — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-pets .pet-form-actions {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        margin-top: 10px;
    }

    body.mobile-app-screen-pets .pet-form-actions-right {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    body.mobile-app-screen-pets .pet-form-actions button {
        width: 100%;
        min-height: 46px;
        padding: 11px 16px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* ========================================
       SAVE / ADD PET
    ======================================== */

    body.mobile-app-screen-pets .pet-form-actions .primary-button {
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        color: #ffffff;
        border: 0;
        border-radius: 11px;
        box-shadow: 0 5px 14px rgba(239,96,44,0.18);
    }

    body.mobile-app-screen-pets .pet-form-actions .primary-button:hover {
        opacity: 1;
        transform: none;
    }

    body.mobile-app-screen-pets .pet-form-actions .primary-button:active {
        transform: scale(0.985);
    }

    /* ========================================
       CANCEL
    ======================================== */

    body.mobile-app-screen-pets .pet-form-actions .secondary-button {
        background: #ffffff;
        color: #1f7bc2;
        border: 1px solid #c8dce8;
        border-radius: 11px;
        box-shadow: none;
    }

    body.mobile-app-screen-pets .pet-form-actions .secondary-button:hover {
        background: #f4f9fc;
        color: #176aa9;
        border-color: #9fc7dd;
    }

    body.mobile-app-screen-pets .pet-form-actions .secondary-button:active {
        transform: scale(0.985);
    }
}

/* ========================================
   REMOVE PET BUTTON
======================================== */

.pet-remove-button {
    width: auto;
    padding: 11px 16px;
    background: #fff;
    color: #b42318;
    border: 1px solid #d92d20;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}

.pet-remove-button:hover {
    background: #fff1f0;
    border-color: #b42318;
}

.pet-remove-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================
   PET FORM MESSAGE
======================================== */

#pet-form-message {
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   UPCOMING SERVICES
======================================== */

.upcoming-services-header h3 {
    margin-bottom: 4px;
}

.upcoming-calendar-help {
    margin: 0 0 18px;
    color: #666;
    font-size: 14px;
}

.upcoming-calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0;
    background: #fff;
    color: #111;
    border: 1px solid #e2e2e2;
    border-radius: 9px;
}

.upcoming-calendar-day:hover {
    border-color: #111;
}

.upcoming-day-number {
    font-size: 14px;
    font-weight: 600;
}

.upcoming-calendar-booked {
    border-color: #999;
}

.upcoming-calendar-today:not(.upcoming-calendar-selected) {
    border: 2px solid #111;
}

.upcoming-calendar-selected {
    background: #111;
    color: #fff;
    border-color: #111;
}

.upcoming-service-count {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #111;
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.upcoming-calendar-selected .upcoming-service-count {
    background: #fff;
    color: #111;
}

/* ========================================
   SERVICES TAB — MOBILE REDESIGN
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .upcoming-services-section {
        position: relative;
        overflow: visible;
        margin-bottom: 24px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.mobile-app-screen-services .upcoming-services-section::before {
        display: none;
    }

    body.mobile-app-screen-services .upcoming-services-header {
        padding: 0 2px 14px;
    }

    body.mobile-app-screen-services .upcoming-services-header h3 {
        margin: 0 0 5px;
        color: #183447;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    body.mobile-app-screen-services .upcoming-calendar-help {
        margin: 0;
        color: #6b7785;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
    }

    body.mobile-app-screen-services .upcoming-calendar {
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 18px 14px 14px;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 7px 18px rgba(24,52,71,0.07);
    }

    body.mobile-app-screen-services .upcoming-calendar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
    }

    body.mobile-app-screen-services .upcoming-calendar-header {
        margin-bottom: 13px;
    }

    body.mobile-app-screen-services .upcoming-calendar-header strong {
        color: #183447;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    body.mobile-app-screen-services .upcoming-calendar .calendar-nav-button {
        width: 34px;
        height: 34px;
        padding: 0;
        background: #f4f8fb;
        color: #1f7bc2;
        border: 1px solid #d9e7ef;
        border-radius: 10px;
        box-shadow: none;
        font-size: 22px;
        font-weight: 700;
    }

    body.mobile-app-screen-services .upcoming-calendar-weekdays {
        margin-bottom: 5px;
    }

    body.mobile-app-screen-services .upcoming-calendar-weekdays span {
        padding: 3px 0;
        color: #82909a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    body.mobile-app-screen-services .upcoming-calendar-grid {
        gap: 5px;
    }

    body.mobile-app-screen-services .upcoming-calendar-day {
        background: #ffffff;
        color: #263d4c;
        border: 1px solid #e6ecef;
        border-radius: 10px;
        box-shadow: none;
    }

    body.mobile-app-screen-services .upcoming-calendar-day:active {
        transform: scale(0.96);
    }

    body.mobile-app-screen-services .upcoming-day-number {
        font-size: 12px;
        font-weight: 700;
    }

    body.mobile-app-screen-services .upcoming-calendar-booked {
        background: #eef7fd;
        border: 1px solid #9ed2f2;
        color: #1f7bc2;
    }

    body.mobile-app-screen-services .upcoming-calendar-day:has(.upcoming-service-count-completed):not(.upcoming-calendar-selected) {
        background: #eef9f1;
        border: 1px solid #8fd19e;
        color: #21863f;
    }

    body.mobile-app-screen-services .upcoming-calendar-day:has(.upcoming-service-count-completed):not(.upcoming-calendar-selected) .upcoming-service-count {
        background: #22a447;
        color: #ffffff;
        border-color: #ffffff;
    }

    body.mobile-app-screen-services .upcoming-calendar-today:not(.upcoming-calendar-selected):not(:has(.upcoming-service-count-completed)) {
        background: #ffffff;
        border: 2px solid #1f9aeb;
        color: #1f7bc2;
    }

    body.mobile-app-screen-services
    .upcoming-calendar-selected {
   
       background:
           linear-gradient(
               145deg,
               #f5ab40 0%,
               #eb872c 100%
           );
   
       color:
           #ffffff;
   
       border-color:
           transparent;
   
       box-shadow:
           0
           4px
           10px
           rgba(
               201,
               111,
               25,
               0.23
           );
   
   }
   
   
   /* ========================================
      SELECTED SCHEDULED DAY
   ======================================== */
   
   body.mobile-app-screen-services
   .upcoming-calendar-booked.upcoming-calendar-selected:not(
       .upcoming-calendar-completed
   ) {
   
       background:
           linear-gradient(
               145deg,
               #2890df 0%,
               #1768aa 100%
           );
   
       color:
           #ffffff;
   
       border-color:
           transparent;
   
       box-shadow:
           0
           4px
           10px
           rgba(
               31,
               123,
               194,
               0.24
           );
   
   }
   
   
   /* ========================================
      SELECTED COMPLETED DAY
   ======================================== */
   
   body.mobile-app-screen-services
   .upcoming-calendar-completed.upcoming-calendar-selected {
   
       background:
           linear-gradient(
               145deg,
               #22a447 0%,
               #168a3a 100%
           );
   
       color:
           #ffffff;
   
       border-color:
           transparent;
   
       box-shadow:
           0
           4px
           10px
           rgba(
               22,
               138,
               58,
               0.24
           );
   
   }
   
   
   /* ========================================
      UPCOMING SERVICE COUNT
   ======================================== */
   
    body.mobile-app-screen-services
    .upcoming-service-count {
   
       top:
           3px;
   
       right:
           3px;
   
       min-width:
           15px;
   
       height:
           15px;
   
       padding:
           0
           4px;
   
       background:
           #1f9aeb;
   
       color:
           #ffffff;
   
       border:
           2px solid
           #ffffff;
   
       font-size:
           8px;
   
       font-weight:
           800;
   
   }
   
   
   /* ========================================
      SELECTED ACTIVE COUNT
   ======================================== */
   
    body.mobile-app-screen-services
    .upcoming-calendar-selected
    .upcoming-service-count {
   
       background:
           #ffffff;
   
       color:
           #d87519;
   
       border-color:
           #ffffff;
   
   }
   
   
   /* ========================================
      SELECTED COMPLETED COUNT
   ======================================== */
   
    body.mobile-app-screen-services
    .upcoming-calendar-completed.upcoming-calendar-selected
    .upcoming-service-count {
   
       background:
           #ffffff;
   
       color:
           #168a3a;
   
       border-color:
           #ffffff;
   
      }
   
   }

/* ========================================
   UPCOMING SERVICE DETAILS
======================================== */

@media (min-width:701px) {

    .selected-upcoming-day {
        margin-top: 20px;
        padding: 18px;

        background: #f8fbfd;

        border: 1px solid #d6e4eb;
        border-radius: 16px;
    }


    .selected-upcoming-header {
        margin: 0 2px 14px;
    }


    .selected-upcoming-header strong {
        color: #183447;

        font-size: 18px;
        font-weight: 800;

        letter-spacing: -0.015em;
    }


    .empty-upcoming-message {
        margin: 0 2px;

        color: #6b7785;

        font-size: 13px;
        line-height: 1.5;
    }


    /* ========================================
       SERVICE CARD
    ======================================== */

    .upcoming-service-card {
        position: relative;

        overflow: hidden;

        margin-top: 12px;
        padding: 21px 18px 17px;

        background: #ffffff;

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

        box-shadow:
            0 6px 18px rgba(24,52,71,0.06);

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


    .upcoming-service-card::before {
        content: "";

        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        height: 4px;

        background: linear-gradient(
            90deg,
            #f5ab40 0%,
            #ef602c 100%
        );
    }


    .upcoming-service-card-completed::before {
        background: linear-gradient(
            90deg,
            #22a447 0%,
            #168a3a 100%
        );
    }


    .upcoming-service-card:first-child {
        margin-top: 0;
    }


    .upcoming-service-card:hover {
        border-color: #c7dae4;

        box-shadow:
            0 9px 24px rgba(24,52,71,0.09);

        transform: translateY(-1px);
    }


    /* ========================================
       SERVICE CARD HEADER
    ======================================== */

    .upcoming-service-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;

        margin-bottom: 14px;
    }


    .upcoming-service-card-header strong {
        color: #183447;

        font-size: 16px;
        font-weight: 800;
    }


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

        padding: 5px 9px;

        background: #eef7fd;
        color: #1f7bc2;

        border-radius: 999px;

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.025em;

        white-space: nowrap;
    }


    .upcoming-service-card-completed .service-status {
        background: #eef9f1;
        color: #21863f;
    }


    /* ========================================
       PET ROW
    ======================================== */

    .upcoming-service-pets {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;

        margin: 16px 0 0;
        padding: 10px 1px;

        border-bottom: 1px solid #e8eef2;
    }


    .upcoming-service-pets-label {
        margin: 0;

        color: #82909a;

        font-size: 11px;
        font-weight: 700;

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


    .service-pet-chips {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;

        gap: 6px;

        margin-left: auto;
    }


    .service-pet-chip {
        display: inline-flex;
        align-items: center;

        padding: 6px 10px;

        background: #eef7fd;
        color: #245b78;

        border-radius: 999px;

        font-size: 12px;
        font-weight: 800;
    }


    .service-pet-chip-missing {
        color: #6b7785;
        font-weight: 700;
    }


    /* ========================================
       SERVICE DATA ROWS
    ======================================== */

    .upcoming-service-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 18px;

        min-height: 40px;

        margin: 0;
        padding: 10px 1px;

        color: #183447;

        font-size: 13px;
        line-height: 1.35;
    }


    .upcoming-service-row + .upcoming-service-row {
        border-top: 1px solid #edf1f3;
    }


    .upcoming-service-row span {
        flex: 0 0 auto;

        color: #82909a;

        font-size: 11px;
        font-weight: 700;

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


    .upcoming-service-row strong {
        min-width: 0;

        color: #183447;

        font-size: 13px;
        font-weight: 800;

        text-align: right;
    }

}

/* ========================================
   UPCOMING SERVICE DETAILS — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .selected-upcoming-day {
        margin-top: 22px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    body.mobile-app-screen-services .selected-upcoming-header {
        margin: 0 2px 12px;
    }

    body.mobile-app-screen-services .selected-upcoming-header strong {
        display: block;
        color: #183447;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    body.mobile-app-screen-services .empty-upcoming-message {
        margin: 0 2px;
        color: #6b7785;
        font-size: 13px;
        line-height: 1.45;
    }

    body.mobile-app-screen-services .upcoming-service-card {
        position: relative;
        overflow: hidden;
        margin-top: 12px;
        padding: 20px 16px 16px;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 7px 18px rgba(24,52,71,0.07);
    }

    body.mobile-app-screen-services .upcoming-service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
    }

    body.mobile-app-screen-services .upcoming-service-card-completed::before {
        background: linear-gradient(90deg,#22a447 0%,#168a3a 100%);
    }

    body.mobile-app-screen-services .upcoming-service-card:first-child {
        margin-top: 0;
    }

    body.mobile-app-screen-services .upcoming-service-card-header {
        margin-bottom: 14px;
    }

    body.mobile-app-screen-services .upcoming-service-card-header strong {
        color: #183447;
        font-size: 16px;
        font-weight: 800;
    }

    body.mobile-app-screen-services .service-status {
        padding: 5px 9px;
        background: #eef7fd;
        color: #1f7bc2;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    /* ========================================
       PET ROW
    ======================================== */

    body.mobile-app-screen-services .upcoming-service-pets {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 39px;
        margin: 18px 0 0;
        padding: 9px 1px;
        border-bottom: 1px solid #e8eef2;
    }

    body.mobile-app-screen-services .upcoming-service-pets-label {
        margin: 0;
        color: #82909a;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    body.mobile-app-screen-services .service-pet-chips {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
    }

    body.mobile-app-screen-services .service-pet-chip {
        padding: 6px 10px;
        background: #eef7fd;
        color: #245b78;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
    }

    body.mobile-app-screen-services .service-pet-chip-missing {
        color: #6b7785;
        font-weight: 700;
    }

    /* ========================================
       SERVICE DATA ROWS
    ======================================== */

    body.mobile-app-screen-services .upcoming-service-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 39px;
        margin: 0;
        padding: 9px 1px;
        color: #183447;
        font-size: 13px;
        line-height: 1.35;
    }

    body.mobile-app-screen-services .upcoming-service-row+.upcoming-service-row {
        border-top: 1px solid #edf1f3;
    }

    body.mobile-app-screen-services .upcoming-service-row span {
        flex: 0 0 auto;
        color: #82909a;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    body.mobile-app-screen-services .upcoming-service-row strong {
        min-width: 0;
        color: #183447;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
        text-align: right;
    }
}

/* ========================================
   CLIENT CANCELLATION ACTION
======================================== */

.upcoming-service-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8eef2;
}

.client-cancel-service-button {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: #fff7f6;
    color: #b42318;
    border: 1px solid #efb5af;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}

.client-cancel-service-button:hover {
    background: #fff0ee;
    border-color: #d92d20;
}

.client-cancel-service-button:active {
    transform: scale(0.985);
}

/* ========================================
   LOCK PAGE WHILE MODAL IS OPEN
======================================== */

body.client-modal-open {
    overflow: hidden;
}

/* ========================================
   CLIENT CANCELLATION MODAL BACKDROP
======================================== */

.client-cancellation-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12,24,32,0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ========================================
   CLIENT CANCELLATION DIALOG
======================================== */

.client-cancellation-dialog {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(40,144,223,0.16);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(19,44,58,0.24);
}

/* ========================================
   CANCELLATION HEADER
======================================== */

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

.client-cancellation-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #d92d20;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.client-cancellation-header h3 {
    margin: 0;
    color: #243746;
    font-size: 22px;
    font-weight: 800;
}

/* ========================================
   CANCELLATION CLOSE BUTTON
======================================== */

.client-cancellation-close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f7;
    color: #53616d;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.client-cancellation-close:hover {
    background: #e9edef;
    color: #111111;
}

/* ========================================
   CANCELLATION SERVICE SUMMARY
======================================== */

.client-cancellation-service {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 18px;
    padding: 16px;
    background: #f7fafc;
    border: 1px solid #e1e9ee;
    border-radius: 12px;
}

.client-cancellation-service strong {
    color: #243746;
    font-size: 15px;
    font-weight: 800;
}

.client-cancellation-service span {
    color: #667784;
    font-size: 13px;
    line-height: 1.4;
}

/* ========================================
   CANCELLATION POLICY
======================================== */

.client-cancellation-policy {
    margin-bottom: 18px;
    padding: 16px;
    background: #fffaf2;
    border: 1px solid #f1d7a9;
    border-radius: 12px;
}

.client-cancellation-policy strong {
    display: block;
    margin-bottom: 8px;
    color: #6f4d12;
    font-size: 14px;
    font-weight: 800;
}

.client-cancellation-policy p {
    margin: 8px 0 0;
    color: #65583f;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   CANCELLATION PRICE
======================================== */

.client-cancellation-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.client-cancellation-price span {
    color: #667784;
    font-size: 13px;
}

.client-cancellation-price strong {
    color: #243746;
    font-size: 16px;
    font-weight: 800;
}

/* ========================================
   CANCELLATION NOTE
======================================== */

.client-cancellation-note {
    margin: 14px 0 0;
    color: #667784;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   CANCELLATION ACTIONS
======================================== */

.client-cancellation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.client-cancellation-actions .secondary-button {
    flex: 1;
    width: auto;
    border-color: #c8d1d6;
    color: #243746;
}

.client-cancellation-confirm {
    flex: 1;
    width: auto;
    padding: 12px 18px;
    background: #d92d20;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease,transform 0.2s ease;
}

.client-cancellation-confirm:hover {
    background: #b42318;
}

.client-cancellation-confirm:active {
    transform: scale(0.98);
}

.client-cancellation-confirm:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================
   CANCELLATION MODAL - MOBILE
======================================== */

@media (max-width:600px) {
    .client-cancellation-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .client-cancellation-dialog {
        max-width: none;
        max-height: calc(100vh - 24px);
        padding: 20px;
        border-radius: 18px 18px 14px 14px;
    }

    .client-cancellation-header h3 {
        font-size: 20px;
    }

    .client-cancellation-actions {
        flex-direction: column-reverse;
    }

    .client-cancellation-actions .secondary-button,
    .client-cancellation-confirm {
        width: 100%;
    }
}

/* ========================================
   REMOVE PET MODAL
======================================== */

.remove-pet-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12,24,32,0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ========================================
   REMOVE PET DIALOG
======================================== */

.remove-pet-dialog {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(40,144,223,0.16);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(19,44,58,0.24);
}

/* ========================================
   REMOVE PET HEADER
======================================== */

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

.remove-pet-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #d92d20;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.remove-pet-header h3 {
    margin: 0;
    color: #243746;
    font-size: 22px;
    font-weight: 800;
}

/* ========================================
   REMOVE PET CLOSE BUTTON
======================================== */

.remove-pet-close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f7;
    color: #53616d;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.remove-pet-close:hover {
    background: #e9edef;
    color: #111111;
}

/* ========================================
   REMOVE PET SUMMARY
======================================== */

.remove-pet-summary {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 18px;
    padding: 16px;
    background: #f7fafc;
    border: 1px solid #e1e9ee;
    border-radius: 12px;
}

.remove-pet-summary strong {
    color: #243746;
    font-size: 15px;
    font-weight: 800;
}

.remove-pet-summary span {
    color: #667784;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   REMOVE PET WARNING
======================================== */

.remove-pet-warning {
    margin-bottom: 18px;
    padding: 16px;
    background: #fff7f6;
    border: 1px solid #f2c7c3;
    border-radius: 12px;
}

.remove-pet-warning strong {
    display: block;
    margin-bottom: 8px;
    color: #8f241b;
    font-size: 14px;
    font-weight: 800;
}

.remove-pet-warning p {
    margin: 8px 0 0;
    color: #674943;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   REMOVE PET NOTE
======================================== */

.remove-pet-note {
    margin: 14px 0 0;
    color: #667784;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   REMOVE PET ACTIONS
======================================== */

.remove-pet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.remove-pet-actions .secondary-button {
    flex: 1;
    width: auto;
    border-color: #c8d1d6;
    color: #243746;
}

.remove-pet-confirm {
    flex: 1;
    width: auto;
    padding: 12px 18px;
    background: #d92d20;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease,transform 0.2s ease;
}

.remove-pet-confirm:hover {
    background: #b42318;
}

.remove-pet-confirm:active {
    transform: scale(0.98);
}

.remove-pet-confirm:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================
   REMOVE PET MODAL - MOBILE
======================================== */

@media (max-width:600px) {
    .remove-pet-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .remove-pet-dialog {
        max-width: none;
        max-height: calc(100vh - 24px);
        padding: 20px;
        border-radius: 18px 18px 14px 14px;
    }

    .remove-pet-header h3 {
        font-size: 20px;
    }

    .remove-pet-actions {
        flex-direction: column-reverse;
    }

    .remove-pet-actions .secondary-button,
    .remove-pet-confirm {
        width: 100%;
    }
}

/* ========================================
   CLIENT VISIT PROGRESS
======================================== */

.upcoming-service-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease,background 0.2s ease,box-shadow 0.2s ease;
}

/* ========================================
   CLIENT VISIT IN PROGRESS
======================================== */

.upcoming-service-card-in-progress {
    background: #fff;
    border-color: #d9b65f;
    box-shadow: 0 0 0 1px rgba(217,182,95,0.12);
}

/* ========================================
   CLIENT VISIT COMPLETED
======================================== */

.upcoming-service-card-completed {
    background: #fcfffd;
    border-color: #a9d7b7;
}

/* ========================================
   CLIENT TOP-RIGHT PROGRESS ICON
======================================== */

.client-visit-progress-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

/* ACTIVE */

.client-visit-progress-active {
    background: #fff8e6;
    color: #9a6b00;
    border: 1px solid #e5c76e;
}

/* COMPLETE */

.client-visit-progress-complete {
    background: #e9f8ee;
    color: #18843d;
    border: 1px solid #a9d7b7;
}

/* ========================================
   KEEP HEADER CLEAR OF ICON
======================================== */

.upcoming-service-card-in-progress .upcoming-service-card-header,
.upcoming-service-card-completed .upcoming-service-card-header {
    padding-right: 38px;
}

/* ========================================
   ACTIVE STATUS PILL
======================================== */

.upcoming-service-card-in-progress .service-status {
    background: #fff4d6;
    color: #815b00;
}

/* ========================================
   COMPLETED STATUS PILL
======================================== */

.upcoming-service-card-completed .service-status {
    background: #e9f8ee;
    color: #18783a;
}

/* ========================================
   CLIENT PROGRESS FOOTER
======================================== */

.client-visit-progress {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.client-visit-progress-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.client-visit-progress-heading strong {
    font-size: 14px;
    line-height: 1.35;
}

.client-visit-progress p {
    margin: 0;
    color: #555;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   LIVE VISIT FOOTER
======================================== */

.client-visit-progress-live {
    margin-right: -16px;
    margin-bottom: -16px;
    margin-left: -16px;
    padding: 15px 16px 16px;
    background: linear-gradient(135deg,#fffaf0 0%,#fff6df 100%);
    border-top: 1px solid #ead69a;
}

.client-visit-progress-live .client-visit-progress-heading {
    margin-bottom: 6px;
}

.client-visit-progress-live .client-visit-progress-heading strong {
    color: #8a6100;
    font-size: 14px;
    font-weight: 800;
}

.client-visit-progress-live p {
    color: #6f6450;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* ========================================
   LIVE DOT
======================================== */

.client-visit-live-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: #d39a00;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(211,154,0,0.12);
}

/* ========================================
   FINISHED VISIT FOOTER
======================================== */

.client-visit-progress-finished {
    margin-right: -16px;
    margin-bottom: -16px;
    margin-left: -16px;
    padding: 15px 16px 16px;
    background: linear-gradient(135deg,#f4fbf6 0%,#ecf8ef 100%);
    border-top: 1px solid #cce8d4;
}

.client-visit-progress-finished .client-visit-progress-heading {
    margin-bottom: 6px;
}

.client-visit-progress-finished .client-visit-progress-heading strong {
    color: #18843d;
    font-size: 14px;
    font-weight: 800;
}

.client-visit-progress-finished p {
    color: #5d6f63;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* ========================================
   INLINE COMPLETE CHECK
======================================== */

.client-visit-inline-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: #18843d;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

/* ========================================
   LOADING
======================================== */

#loading,
#admin-loading {
    padding: 10px 0;
}

/* ========================================
   ADMIN DASHBOARD
======================================== */

.admin-dashboard-container {
    max-width: 980px;
}

.admin-dashboard-header {
    align-items: center;
}

.admin-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-title-row h2 {
    margin: 0;
}

.admin-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.admin-header-logout {
    flex-shrink: 0;
}

/* ========================================
   ADMIN PROFILE
======================================== */

#admin-profile-message {
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   ADMIN CALENDAR HEADER
======================================== */

.admin-calendar-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.admin-calendar-section-heading h3 {
    margin: 0 0 4px;
}

.admin-calendar-section-heading p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.45;
}

.admin-calendar-summary {
    min-width: 130px;
    padding: 11px 14px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: right;
}

.admin-calendar-summary strong {
    display: block;
    font-size: 22px;
}

.admin-calendar-summary span {
    color: #666;
    font-size: 11px;
}

/* ========================================
   ADMIN CALENDAR
======================================== */

.admin-service-calendar {
    margin-bottom: 18px;
}

.admin-calendar-day {
    min-height: 54px;
}

/* ========================================
   ADMIN SELECTED DAY
======================================== */

.admin-selected-day {
    padding: 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.admin-selected-day-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.admin-selected-day-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-selected-day-heading h4 {
    margin: 0;
    font-size: 19px;
}

.admin-selected-count {
    flex-shrink: 0;
    padding: 6px 10px;
    background: #f1f1f1;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* ========================================
   ADMIN SERVICE CARDS
======================================== */

.admin-service-card {
    margin-top: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.admin-service-card:first-child {
    margin-top: 0;
}

.admin-service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}

.admin-service-time {
    margin-bottom: 5px;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-service-top h5 {
    margin: 0;
    font-size: 17px;
}

.admin-service-statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-payment-status {
    background: #fff;
    border: 1px solid #ddd;
}

.admin-service-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto;
    gap: 22px;
    padding-top: 14px;
}

.admin-service-detail {
    min-width: 0;
}

.admin-service-detail>span {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-service-detail strong {
    display: block;
    font-size: 14px;
    line-height: 1.45;
}

.admin-service-detail small {
    display: block;
    margin-top: 3px;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.admin-service-pet-chips {
    gap: 5px;
}

/* ========================================
   ADMIN CLIENT ADDRESS / GOOGLE MAPS
======================================== */

.admin-client-address {
    display: inline-block;
    max-width: 100%;
    margin-top: 7px;
    color: #444;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-color: #aaa;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.admin-client-address:hover {
    color: #000;
    text-decoration-color: #000;
}

/* ========================================
   ADMIN VISIT CHECK-IN / PROGRESS
======================================== */

.admin-service-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}

/* ========================================
   VISIT IN PROGRESS
======================================== */

.admin-service-card-in-progress {
    border-color: #d9b65f;
    box-shadow: 0 0 0 1px rgba(217,182,95,0.12);
}

/* ========================================
   COMPLETED VISIT
======================================== */

.admin-service-card-completed {
    border-color: #a9d7b7;
    background: #fcfffd;
}

/* ========================================
   TOP-RIGHT VISIT STATUS ICON
======================================== */

.admin-visit-progress-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

/* CHECKED IN / ACTIVE */

.admin-visit-progress-active {
    background: #fff8e6;
    color: #9a6b00;
    border: 1px solid #e5c76e;
}

/* COMPLETED */

.admin-visit-progress-complete {
    background: #e9f8ee;
    color: #18843d;
    border: 1px solid #a9d7b7;
}

/*
 * Leave room for the status icon
 * so it doesn't overlap the status pills.
 */

.admin-service-card-in-progress .admin-service-statuses,
.admin-service-card-completed .admin-service-statuses {
    padding-right: 36px;
}

/* ========================================
   BOTTOM VISIT PROGRESS AREA
======================================== */

.admin-visit-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* ========================================
   VISIT PROGRESS TEXT
======================================== */

.admin-visit-progress-copy {
    min-width: 0;
    flex: 1;
}

.admin-visit-progress-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-visit-progress-copy span {
    display: block;
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

/* ========================================
   READY / NOT STARTED
======================================== */

.admin-visit-progress-ready .admin-visit-progress-copy strong {
    color: #333;
}

/* ========================================
   LIVE / CHECKED IN
======================================== */

.admin-visit-progress-live {
    margin-right: -16px;
    margin-bottom: -16px;
    margin-left: -16px;
    padding: 16px;
    background: #fffaf0;
    border-top: 1px solid #ead69a;
}

.admin-visit-progress-live .admin-visit-progress-copy strong {
    color: #8a6100;
}

/* ========================================
   COMPLETED
======================================== */

.admin-visit-progress-finished {
    margin-right: -16px;
    margin-bottom: -16px;
    margin-left: -16px;
    padding: 16px;
    background: #f4fbf6;
    border-top: 1px solid #cce8d4;
}

.admin-visit-progress-finished .admin-visit-progress-copy strong {
    color: #18843d;
}

/* ========================================
   CHECK-IN / FINISH BUTTON
======================================== */

.admin-visit-action-button {
    width: auto;
    min-width: 145px;
    flex-shrink: 0;
    padding: 12px 18px;
}

/* CHECK IN */

.admin-check-in-button {
    background: #111;
    color: #fff;
}

/* FINISH */

.admin-finish-visit-button {
    background: #18843d;
    color: #fff;
}

.admin-finish-visit-button:hover {
    opacity: 0.9;
}

/* ========================================
   REOPEN VISIT BUTTON
======================================== */

.admin-reopen-visit-button {
    width: auto;
    flex-shrink: 0;
    padding: 9px 13px;
    background: transparent;
    color: #555;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.admin-reopen-visit-button:hover {
    background: #fff;
    color: #111;
    border-color: #777;
}

/* ========================================
   DISABLED VISIT BUTTONS
======================================== */

.admin-visit-action-button:disabled,
.admin-reopen-visit-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* ========================================
   IN-PROGRESS STATUS PILL
======================================== */

.admin-service-card-in-progress .admin-service-statuses .service-status:first-child {
    background: #fff4d6;
    color: #815b00;
}

/* ========================================
   COMPLETED STATUS PILL
======================================== */

.admin-service-card-completed .admin-service-statuses .service-status:first-child {
    background: #e9f8ee;
    color: #18783a;
}

/* ========================================
   ADMIN VISIT REPORT
======================================== */

.admin-completed-visit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-visit-report-button {
    width: auto;
    padding: 10px 14px;
    background: #18843d;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.admin-visit-report-button:hover {
    opacity: 0.9;
}

.admin-visit-report-mount:empty {
    display: none;
}

.admin-visit-report-mount {
    margin-top: 14px;
}

.admin-visit-report-form {
    padding: 20px;
    background: #fafafa;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* ========================================
   ADMIN VISIT REPORT HEADER
======================================== */

.admin-visit-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e1e1e1;
}

.admin-visit-report-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.admin-visit-report-header h5 {
    margin: 0 0 4px;
    font-size: 19px;
}

.admin-visit-report-header p {
    margin: 0;
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

.admin-visit-report-close {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    transition: background 0.18s ease;
}

.admin-visit-report-close:hover {
    background: #eeeeee;
}

/* ========================================
   ADMIN VISIT REPORT SECTIONS
======================================== */

.admin-visit-report-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e4e4e4;
}

.admin-visit-report-section:first-of-type {
    border-top: none;
}

.admin-visit-report-label {
    display: block;
    margin-bottom: 9px;
    color: #555;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-visit-report-help {
    margin: -3px 0 10px;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

/* ========================================
   ADMIN VISIT CARE GRID
======================================== */

.admin-visit-pet-care-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ========================================
   ADMIN PET CARE CARD
======================================== */

.admin-visit-pet-care-card {
    overflow: hidden;

    padding: 15px;

    background:
        linear-gradient(
            145deg,
            #fbfdfe 0%,
            #f6fafc 100%
        );

    border: 1px solid #d8e6ed;
    border-radius: 13px;

    box-shadow:
        0 3px 10px rgba(24,52,71,0.045);
}


/* ========================================
   ADMIN PET CARE HEADER
======================================== */

.admin-visit-pet-care-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid #e2edf3;
}


.admin-visit-pet-care-header strong {
    color: #183447;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.2;
}


.admin-visit-pet-care-header span {
    color: #1f7bc2;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
    line-height: 1.2;

    text-transform: uppercase;
}


/* ========================================
   ADMIN CARE OPTIONS
======================================== */

.admin-visit-care-grid {
    display: grid;

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

    gap: 8px;
}


.admin-visit-care-option {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 46px;

    padding: 10px 12px;

    background: #ffffff;
    color: #263d4c;

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

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.admin-visit-care-option:hover {
    background: #f4f9fc;

    border-color: #b6d5e5;
}


.admin-visit-care-option:active {
    transform: scale(0.985);
}


/* ========================================
   ADMIN CARE CHECKBOX
======================================== */

.admin-visit-care-option input {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    margin: 0;

    accent-color: #22a447;

    cursor: pointer;
}


/* ========================================
   ADMIN CARE OPTION — CHECKED
======================================== */

.admin-visit-care-option:has(input:checked) {
    background: #eef9f1;
    color: #168a3a;

    border-color: #8fd19e;

    box-shadow:
        0 2px 8px rgba(34,164,71,0.08);
}

/* ========================================
   ADMIN VISIT NOTES
======================================== */

.admin-visit-report-notes {
    width: 100%;
    min-height: 110px;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

/* ========================================
   ADMIN VISIT PHOTO UPLOAD
======================================== */

.admin-visit-media-upload-button {
    display: inline-block;
    width: auto;
    padding: 10px 14px;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.admin-route-upload-button {
    background: #fff;
    color: #111;
    border: 1px solid #111;
}

.admin-visit-existing-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-visit-media-preview {
    width: 92px;
    height: 92px;
    overflow: hidden;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 9px;
}

.admin-visit-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   AUTOMATIC WALK SUMMARY
======================================== */

.admin-walk-summary-section {
    position: relative;
}

.admin-walk-summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-walk-summary-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(24,70,95,0.06);
}

/* ========================================
   WALK SUMMARY STATS
======================================== */

.admin-walk-summary-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    background: linear-gradient(135deg,rgba(40,144,223,0.08),rgba(71,206,230,0.06));
    border-bottom: 1px solid #e2e8ec;
}

.admin-walk-summary-stat {
    min-width: 0;
    padding: 16px 14px;
    text-align: center;
    border-right: 1px solid #e2e8ec;
}

.admin-walk-summary-stat:last-child {
    border-right: none;
}

.admin-walk-summary-stat-label {
    display: block;
    margin-bottom: 5px;
    color: #71808b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-walk-summary-stat strong {
    display: block;
    color: #243746;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   WALK ROUTE MAP
======================================== */

.admin-walk-route-map {
    position: relative;
    width: 100%;
    height: 340px;
    background: #edf1f3;
}

.admin-walk-route-map-loading,
.admin-walk-route-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 24px;
    color: #596b78;
    text-align: center;
}

.admin-walk-route-map-loading strong,
.admin-walk-route-map-empty strong {
    color: #243746;
    font-size: 15px;
    font-weight: 800;
}

.admin-walk-route-map-loading span,
.admin-walk-route-map-empty span {
    max-width: 360px;
    font-size: 12px;
    line-height: 1.45;
}

/* ========================================
   WALK SUMMARY BRANDING
======================================== */

.admin-walk-summary-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    background: #ffffff;
    border-top: 1px solid #e6eaed;
    color: #7b8993;
    font-size: 11px;
    font-weight: 600;
}

/* ========================================
   WALK SUMMARY EMPTY STATE
======================================== */

.admin-walk-summary-empty {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    background: #f6f8f9;
    border: 1px dashed #cbd3d8;
    border-radius: 12px;
}

.admin-walk-summary-empty strong {
    color: #344a59;
    font-size: 13px;
}

.admin-walk-summary-empty span {
    color: #71808b;
    font-size: 12px;
    line-height: 1.45;
}

/* ========================================
   ADMIN WALK SUMMARY MOBILE
======================================== */

@media (max-width:700px) {
    .admin-walk-summary-stats {
        grid-template-columns: 1fr 1fr;
    }

    .admin-walk-summary-stat:nth-child(2) {
        border-right: none;
    }

    .admin-walk-summary-stat:nth-child(1),
    .admin-walk-summary-stat:nth-child(2) {
        border-bottom: 1px solid #e2e8ec;
    }

    .admin-walk-summary-stat:nth-child(3) {
        border-right: 1px solid #e2e8ec;
    }

    .admin-walk-route-map {
        height: 280px;
    }
}

/* ========================================
   ADMIN SAVED MEDIA DELETE
======================================== */

.admin-visit-saved-media {
    position: relative;
}

.admin-visit-media-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    background: rgba(0,0,0,0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0,0,0,0.25);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease,transform 0.18s ease,opacity 0.18s ease;
}

.admin-visit-media-delete:hover {
    background: #b42318;
    transform: scale(1.08);
}

.admin-visit-media-delete:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.admin-visit-media-delete:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.admin-visit-route-preview {
    max-width: 300px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.admin-visit-route-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.admin-visit-media-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #777;
    font-size: 11px;
}

.admin-visit-pending-media,
.admin-visit-pending-route {
    margin-top: 10px;
}

.admin-pending-media-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 12px;
}

.admin-pending-media-remove {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 19px;
}

.admin-visit-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #ddd;
}

.admin-visit-report-message {
    color: #18843d;
    font-size: 12px;
    font-weight: 700;
}

.admin-save-visit-report-button {
    flex-shrink: 0;
}

.admin-visit-report-loading,
.admin-visit-report-error {
    padding: 16px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #666;
    font-size: 13px;
}

/* ========================================
   CLIENT VISIT REPORT
======================================== */

.client-visit-report-actions {
    display: flex;
    justify-content: stretch;
    margin-top: 14px;
}

.client-view-visit-report-button {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    background: linear-gradient(135deg,#22a447 0%,#18843d 100%);
    color: #ffffff;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 6px 14px rgba(24,132,61,0.16);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease;
}

.client-view-visit-report-button:hover {
    box-shadow: 0 8px 18px rgba(24,132,61,0.20);
}

.client-view-visit-report-button:active {
    transform: scale(0.985);
}

.client-visit-report-mount:empty {
    display: none;
}

.client-visit-report-mount {
    margin-top: 14px;
}

.client-visit-report {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cce8d4;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24,70,95,0.06);
}

.client-visit-report-header {
    padding: 18px;
    background: linear-gradient(135deg,#f4fbf6 0%,#edf8f1 100%);
    border-bottom: 1px solid #cce8d4;
}

.client-visit-report-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #18843d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-visit-report-header h5 {
    margin: 0 0 4px;
    color: #183447;
    font-size: 18px;
    font-weight: 800;
}

.client-visit-report-header p {
    margin: 0;
    color: #667784;
    font-size: 12px;
    line-height: 1.45;
}

.client-visit-report-section {
    padding: 18px;
    border-top: 1px solid #e7efea;
}

.client-visit-report-section:first-of-type {
    border-top: 0;
}

.client-visit-report-label {
    display: block;
    margin-bottom: 11px;
    color: #667784;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ========================================
   CLIENT VISIT REPORT CARE
======================================== */

.client-visit-report-pet-care-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ========================================
   INDIVIDUAL PET CARE CARD
======================================== */

.client-visit-report-pet-care-card {
    overflow: hidden;
    padding: 15px;

    background:
        linear-gradient(
            145deg,
            #fbfdfe 0%,
            #f6fafc 100%
        );

    border: 1px solid #d8e6ed;
    border-radius: 13px;

    box-shadow:
        0 3px 10px rgba(24,52,71,0.045);
}


/* ========================================
   PET CARE HEADER
======================================== */

.client-visit-report-pet-care-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid #e2edf3;
}


.client-visit-report-pet-care-header strong {
    color: #183447;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.2;
}


.client-visit-report-pet-care-header span {
    color: #1f7bc2;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
    line-height: 1.2;

    text-transform: uppercase;
}


/* ========================================
   PET CARE ITEMS
======================================== */

.client-visit-report-care-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.client-visit-report-care-item {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    background: #eef9f1;
    color: #244b31;

    border: 1px solid #b9dec3;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
}


.client-visit-report-care-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 17px;
    height: 17px;

    background: #22a447;
    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;
}

/* ========================================
   CLIENT VISIT REPORT NOTES
======================================== */

.client-visit-report-notes {
    margin: 0;
    padding: 13px 14px;
    background: #fafafa;
    color: #333;
    border: 1px solid #e2e2e2;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.6;
}

.client-visit-report-muted {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   CLIENT VISIT REPORT PHOTOS
======================================== */

.client-visit-report-photo-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
}

.client-visit-report-photo-button {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 10px;
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: border-color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
}

.client-visit-report-photo-button:hover {
    border-color: #aaa;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.client-visit-report-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.client-visit-report-photo-button:hover .client-visit-report-photo {
    transform: scale(1.02);
}

/* ========================================
   CLIENT WALK SUMMARY
======================================== */

.client-walk-summary-card {
    overflow: hidden;
    background: #f8fbfd;
    border: 1px solid #dbe8ef;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(24,70,95,0.05);
}

/* ========================================
   CLIENT WALK SUMMARY HEADING
======================================== */

.client-walk-summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg,rgba(40,144,223,0.08),rgba(71,206,230,0.05));
    border-bottom: 1px solid #dbe8ef;
}

.client-walk-summary-heading strong {
    display: block;
    margin-bottom: 3px;
    color: #243746;
    font-size: 15px;
    font-weight: 800;
}

.client-walk-summary-heading span {
    display: block;
    color: #667784;
    font-size: 11px;
    line-height: 1.45;
}

/* ========================================
   CLIENT WALK SUMMARY STATS
======================================== */

.client-walk-summary-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    padding: 14px;
}

.client-walk-summary-stat {
    min-width: 0;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #e2ebf0;
    border-radius: 10px;
    text-align: center;
}

.client-walk-summary-stat-label {
    display: block;
    margin-bottom: 5px;
    color: #7a8994;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.client-walk-summary-stat strong {
    display: block;
    color: #243746;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ========================================
   CLIENT WALK ROUTE MAP
======================================== */

.client-walk-route-map {
    width: calc(100% - 28px);
    height: 340px;
    margin: 0 14px 14px;
    overflow: hidden;
    background: #eef3f5;
    border: 1px solid #d7e2e8;
    border-radius: 12px;
}

.client-walk-route-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 0 14px 14px;
    padding: 18px;
    background: #fff;
    color: #77858f;
    border: 1px dashed #cbd8de;
    border-radius: 12px;
    font-size: 12px;
    text-align: center;
}

/* ========================================
   CLIENT WALK SUMMARY BRANDING
======================================== */

.client-walk-summary-branding {
    padding: 0 16px 15px;
    color: #667784;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

/* ========================================
   CLIENT WALK SUMMARY EMPTY
======================================== */

.client-walk-summary-empty {
    padding: 16px;
    background: #fafafa;
    color: #777;
    border: 1px dashed #d5d5d5;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   CLIENT VISIT REPORT STATES
======================================== */

.client-visit-report-loading,
.client-visit-report-empty,
.client-visit-report-error {
    padding: 16px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #666;
    font-size: 13px;
}

.client-visit-report-empty strong {
    display: block;
    margin-bottom: 5px;
    color: #111;
}

.client-visit-report-empty p {
    margin: 0;
}

/* ========================================
   CLIENT WALK SUMMARY - MOBILE
======================================== */

@media (max-width:700px) {
    .client-visit-report-section {
        padding: 15px;
    }

    .client-walk-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        padding: 12px;
    }

    .client-walk-summary-stat {
        padding: 11px 8px;
    }

    .client-walk-route-map {
        width: calc(100% - 24px);
        height: 280px;
        margin: 0 12px 12px;
    }

    .client-walk-route-empty {
        margin: 0 12px 12px;
    }

    .client-walk-summary-branding {
        padding: 0 14px 14px;
        text-align: left;
    }

    .client-visit-report-photo-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ========================================
   CLIENT VISIT REPORT - DESKTOP LAYOUT
======================================== */

@media (min-width:701px) {
    /* ========================================
       FULL-WIDTH DESKTOP REPORT MOUNT
    ======================================== */

    .client-desktop-visit-report-mount {
        width: 100%;
        margin-top: 22px;
    }

    .client-desktop-visit-report-mount:empty {
        display: none;
    }

    /* ========================================
       REPORT SHELL
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report {
        display: grid;
        grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
        overflow: hidden;
        border-radius: 18px;
        box-shadow: 0 14px 38px rgba(24,70,95,0.09);
    }

    /* ========================================
       REPORT HEADER
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-header {
        grid-column: 1/-1;
        grid-row: 1;
        padding: 22px 24px;
    }

    .client-desktop-visit-report-mount .client-visit-report-header h5 {
        font-size: 24px;
    }

    .client-desktop-visit-report-mount .client-visit-report-header p {
        font-size: 13px;
    }

    /* ========================================
       LEFT COLUMN
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-section:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        padding: 22px 24px;
        border-right: 1px solid #e3ebef;
    }

    /* ========================================
       LEFT COLUMN
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-section:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        padding: 22px 24px;
        border-right: 1px solid #e3ebef;
    }

    /* ========================================
       LEFT COLUMN
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-section:nth-child(4) {
        grid-column: 1;
        grid-row: 4;
        min-width: 0;
        padding: 22px 24px;
        border-right: 1px solid #e3ebef;
    }

    /* ========================================
       RIGHT COLUMN
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-section:nth-child(5) {
        grid-column: 2;
        grid-row: 2/5;
        min-width: 0;
        padding: 22px;
        border-top: none;
        display: flex;
        align-items: stretch;
    }

    .client-desktop-visit-report-mount .client-visit-report-section:nth-child(5) .client-walk-summary-card {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /* ========================================
       WALK SUMMARY HEADER
    ======================================== */

    .client-desktop-visit-report-mount .client-walk-summary-heading {
        padding: 18px 20px 16px;
    }

    .client-desktop-visit-report-mount .client-walk-summary-heading strong {
        font-size: 17px;
    }

    .client-desktop-visit-report-mount .client-walk-summary-heading span {
        font-size: 12px;
    }

    /* ========================================
       WALK STATS
    ======================================== */

    .client-desktop-visit-report-mount .client-walk-summary-stats {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 10px;
        padding: 16px;
    }

    .client-desktop-visit-report-mount .client-walk-summary-stat {
        padding: 14px 10px;
    }

    .client-desktop-visit-report-mount .client-walk-summary-stat strong {
        font-size: 14px;
    }

    /* ========================================
       LARGE DESKTOP ROUTE MAP
    ======================================== */

    .client-desktop-visit-report-mount .client-walk-route-map {
        width: calc(100% - 32px);
        height: 420px;
        flex: 1;
        min-height: 360px;
        margin: 0 16px 16px;
    }

    .client-desktop-visit-report-mount .client-walk-route-empty {
        min-height: 280px;
        margin: 0 16px 16px;
    }

    /* ========================================
       BRANDING
    ======================================== */

    .client-desktop-visit-report-mount .client-walk-summary-branding {
        padding: 0 18px 18px;
    }

    /* ========================================
       PHOTOS
    ======================================== */

    .client-desktop-visit-report-mount .client-visit-report-photo-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ========================================
   CLIENT VISIT REPORT LIGHTBOX
======================================== */

body.client-report-lightbox-open {
    overflow: hidden;
}

.client-report-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.client-report-lightbox-visible {
    opacity: 1;
}

.client-report-lightbox-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: min(100%,1100px);
    max-height: calc(100vh - 56px);
    background: #111;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    transform: scale(0.97);
    transition: transform 0.18s ease;
}

.client-report-lightbox-visible .client-report-lightbox-frame {
    transform: scale(1);
}

.client-report-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 56px);
    object-fit: contain;
    border-radius: 14px;
}

.client-report-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(0,0,0,0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease,transform 0.2s ease;
}

.client-report-lightbox-close:hover {
    background: #000;
    transform: scale(1.06);
}

.client-report-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width:600px) {
    .client-report-lightbox {
        padding: 12px;
    }

    .client-report-lightbox-frame {
        max-width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 10px;
    }

    .client-report-lightbox-image {
        max-height: calc(100vh - 24px);
        border-radius: 10px;
    }

    .client-report-lightbox-close {
        top: 9px;
        right: 9px;
        width: 36px;
        height: 36px;
        font-size: 25px;
    }
}

/* ========================================
   CLIENT DESKTOP DASHBOARD LAYOUT
======================================== */

.client-dashboard-container {
    max-width: 1240px;
}

.client-dashboard-grid {
    display: block;
}

.client-dashboard-column {
    min-width: 0;
}

@media (min-width:1100px) {
    .client-dashboard-container {
        width: 94%;
    }

    .client-dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr);
        align-items: start;
        gap: 28px;
    }

    .client-dashboard-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .client-dashboard-column>section {
        margin-bottom: 0;
    }

    .client-dashboard-column-left {
        min-width: 0;
    }

    .client-dashboard-column-right {
        min-width: 0;
    }

    .client-dashboard-column-right .upcoming-services-section {
        width: 100%;
    }

    #logout-button {
        margin-top: 20px;
    }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width:600px) {
    .dashboard-container {
        width: 92%;
        margin: 25px auto;
    }

    .dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-header .primary-button {
        width: 100%;
    }

    section {
        padding: 18px;
    }

    .login-container {
        margin: 50px auto;
    }

    /* ========================================
       HOUSEHOLD — MOBILE
    ======================================== */

    .household-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .household-edit-button {
        width: 100%;
    }

    .household-profile-top {
        align-items: center;
    }

    .client-profile-avatar {
        width: 74px;
        height: 74px;
    }

    .client-profile-initials {
        font-size: 23px;
    }

    .household-profile-summary h4 {
        font-size: 20px;
    }

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

    .household-detail-card-full {
        grid-column: auto;
    }

    .access-detail-grid {
        grid-template-columns: 1fr;
    }

    .access-detail-item:nth-child(2) {
        border-top: 1px solid #e5e5e5;
    }

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

    .household-form-field-full {
        grid-column: auto;
    }

    .client-photo-editor {
        flex-direction: column;
        text-align: center;
    }

    /* ========================================
       PROFILE FORM ACTIONS
    ======================================== */

    .household-form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    .household-form-actions button {
        width: 100%;
        min-height: 46px;
        padding: 11px 16px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* ========================================
       SAVE PROFILE
    ======================================== */

    .household-form-actions .primary-button {
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        color: #ffffff;
        border: 0;
        border-radius: 11px;
        box-shadow: 0 5px 14px rgba(239,96,44,0.18);
    }

    .household-form-actions .primary-button:active {
        transform: scale(0.985);
    }

    /* ========================================
       CANCEL PROFILE EDIT
    ======================================== */

    .household-form-actions .secondary-button {
        background: #ffffff;
        color: #1f7bc2;
        border: 1px solid #c8dce8;
        border-radius: 11px;
        box-shadow: none;
    }

    .household-form-actions .secondary-button:hover {
        background: #f4f9fc;
        color: #176aa9;
        border-color: #9fc7dd;
    }

    .household-form-actions .secondary-button:active {
        transform: scale(0.985);
    }

    /* ========================================
       PETS TAB — MOBILE REDESIGN
    ======================================== */

    body.mobile-app-screen-pets #pets-section {
        position: relative;
        overflow: visible;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.mobile-app-screen-pets #pets-section::before {
        display: none;
    }

    /* ========================================
       PETS HEADING
    ======================================== */

    body.mobile-app-screen-pets .pets-section-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0 2px 14px;
    }

    body.mobile-app-screen-pets .pets-section-header h3 {
        margin: 0 0 5px;
        color: #183447;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    body.mobile-app-screen-pets .pets-section-help {
        margin: 0 0 14px;
        color: #6b7785;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
    }

    /* ========================================
       ADD PET BUTTON
    ======================================== */

    body.mobile-app-screen-pets .pet-add-button {
        width: 100%;
        min-height: 50px;
        padding: 10px 16px;
        background: #f5ab40;
        color: #ffffff;
        border: 0;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(111,69,12,0.18);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

/* ========================================
   PET PROFILE CARD
======================================== */

body.mobile-app-screen-pets
.pet-profile-card {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0
        0
        16px;

    padding:
        22px
        16px
        18px;

    background:
        #ffffff;

    border:
        1px solid
        #d6e4eb;

    border-radius:
        18px;

    box-shadow:
        0
        7px
        18px
        rgba(
            24,
            52,
            71,
            0.07
        );

}


body.mobile-app-screen-pets
.pet-profile-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #f5ab40 0%,
            #ef602c 100%
        );

}
    /* ========================================
       PET PROFILE LAYOUT
    ======================================== */

    body.mobile-app-screen-pets .pet-profile-top {
        grid-template-columns: 74px minmax(0,1fr);
        gap: 14px;
    }

    body.mobile-app-screen-pets .pet-profile-photo {
        width: 74px;
        height: 74px;
    }

    body.mobile-app-screen-pets .pet-profile-summary h4 {
        font-size: 20px;
    }

    body.mobile-app-screen-pets .edit-pet-button {
        grid-column: 1/-1;
        width: 100%;
    }

    body.mobile-app-screen-pets .pet-profile-details {
        grid-template-columns: 1fr;
    }

    body.mobile-app-screen-pets .pet-photo-editor {
        flex-direction: column;
        text-align: center;
    }

    body.mobile-app-screen-pets .pet-form-grid {
        grid-template-columns: 1fr;
    }

    body.mobile-app-screen-pets .pet-form-actions {
        flex-direction: column-reverse;
    }

    body.mobile-app-screen-pets .pet-form-actions button {
        width: 100%;
    }

    /* BOOKING */

    .additional-pet-option {
        padding: 12px;
    }

    .additional-pet-fee {
        font-size: 12px;
    }

    /* CALENDARS */

    .booking-calendar,
    .upcoming-calendar {
        padding: 12px;
    }

    .calendar-weekdays,
    .calendar-grid,
    .upcoming-calendar-weekdays,
    .upcoming-calendar-grid {
        gap: 4px;
    }

    .calendar-day {
        border-radius: 6px;
        font-size: 13px;
    }

    .calendar-header strong,
    .upcoming-calendar-header strong {
        font-size: 16px;
    }

    .upcoming-calendar-day {
        border-radius: 7px;
    }

    .upcoming-day-number {
        font-size: 13px;
    }

    .upcoming-service-count {
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }

    /* UPCOMING SERVICE DETAILS */

    .upcoming-service-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    /* ADMIN */

    .admin-dashboard-header {
        align-items: stretch;
    }

    .admin-header-logout {
        width: 100%;
    }

    .admin-calendar-section-heading {
        flex-direction: column;
    }

    .admin-calendar-summary {
        width: 100%;
        text-align: left;
    }

    .admin-selected-day-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-service-top {
        flex-direction: column;
    }

    .admin-service-statuses {
        justify-content: flex-start;
    }

    .admin-service-main-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .admin-client-address {
        display: block;
        margin-top: 6px;
    }

    /* VISIT CHECK-IN */

    .admin-service-card-in-progress .admin-service-statuses,
    .admin-service-card-completed .admin-service-statuses {
        padding-right: 0;
    }

    .admin-visit-progress-icon {
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .admin-service-card-in-progress .admin-service-top,
    .admin-service-card-completed .admin-service-top {
        padding-right: 34px;
    }

    .admin-visit-progress {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .admin-visit-action-button,
    .admin-reopen-visit-button {
        width: 100%;
        min-width: 0;
    }

    .admin-visit-progress-live,
    .admin-visit-progress-finished {
        margin-right: -14px;
        margin-bottom: -14px;
        margin-left: -14px;
        padding: 14px;
    }

    /* CLIENT VISIT PROGRESS */

    .client-visit-progress-icon {
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .upcoming-service-card-in-progress .upcoming-service-card-header,
    .upcoming-service-card-completed .upcoming-service-card-header {
        padding-right: 34px;
    }

    /* VISIT REPORT */

    .admin-completed-visit-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-visit-report-button,
    .admin-reopen-visit-button {
        width: 100%;
    }

    .admin-visit-care-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-visit-report-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-save-visit-report-button {
        width: 100%;
    }

    .admin-visit-route-preview {
        max-width: 100%;
    }

    /* CLIENT VISIT REPORT */

    .client-visit-report-actions {
        justify-content: stretch;
    }

    .client-view-visit-report-button {
        width: 100%;
    }

    .client-visit-report-header,
    .client-visit-report-section {
        padding: 14px;
    }

    .client-visit-report-photo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .client-visit-report-care-grid {
        gap: 7px;
    }

    .client-visit-report-care-item {
        flex: 1 1 calc(50% - 7px);
        justify-content: center;
    }
}

/* ========================================
   EXTRA SMALL MOBILE
======================================== */

@media (max-width:420px) {
    .dashboard-container {
        width: 94%;
    }

    section {
        padding: 15px;
    }

    .booking-calendar,
    .upcoming-calendar {
        padding: 10px;
    }

    .calendar-weekdays,
    .calendar-grid,
    .upcoming-calendar-weekdays,
    .upcoming-calendar-grid {
        gap: 3px;
    }

    .calendar-nav-button {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .upcoming-day-number,
    .calendar-day {
        font-size: 12px;
    }

    .admin-service-card {
        padding: 14px;
    }
}

/* ========================================
   CLIENT MESSAGING
======================================== */

.client-message-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-width: 138px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease,box-shadow 0.18s ease,background 0.18s ease;
}

.client-message-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 32px rgba(0,0,0,0.28);
}

.client-message-launcher-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
}

.client-message-launcher-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-message-launcher-label {
    line-height: 1;
}

.client-message-unread-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* ========================================
   MESSAGE DRAWER
======================================== */

.client-message-drawer {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 1202;
    display: flex;
    flex-direction: column;
    width: min(390px,calc(100vw - 48px));
    height: min(620px,calc(100vh - 130px));
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.2s ease,visibility 0.2s ease,transform 0.2s ease;
}

.client-message-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ========================================
   MESSAGE HEADER
======================================== */

.client-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 18px 18px 16px;
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.client-message-header h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
}

.client-message-header p {
    margin: 3px 0 0;
    color: #777;
    font-size: 12px;
}

.client-message-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f3f3;
    color: #222;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease,transform 0.18s ease;
}

.client-message-close:hover {
    background: #e8e8e8;
    transform: scale(1.04);
}

/* ========================================
   MESSAGE LIST
======================================== */

.client-message-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f7f7f8;
}

.client-message-loading,
.client-message-empty {
    margin: auto;
    padding: 24px;
    color: #777;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.client-message-row {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.client-message-row.is-client {
    align-self: flex-end;
    align-items: flex-end;
}

.client-message-row.is-business {
    align-self: flex-start;
    align-items: flex-start;
}

.client-message-sender {
    margin-bottom: 4px;
    padding: 0 4px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.client-message-bubble {
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.client-message-row.is-client .client-message-bubble {
    background: #111;
    color: #fff;
    border-bottom-right-radius: 5px;
}

.client-message-row.is-business .client-message-bubble {
    background: #fff;
    color: #222;
    border: 1px solid #e4e4e4;
    border-bottom-left-radius: 5px;
}

.client-message-time {
    margin-top: 4px;
    padding: 0 4px;
    color: #929292;
    font-size: 10px;
}

/* ========================================
   MESSAGE COMPOSER
======================================== */

.client-message-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid #ececec;
    background: #fff;
}

.client-message-form textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 42px;
    max-height: 120px;
    margin: 0;
    padding: 10px 12px;
    resize: none;
    border: 1px solid #d9d9d9;
    border-radius: 13px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
}

.client-message-form textarea:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.client-message-send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: transform 0.18s ease,opacity 0.18s ease;
}

.client-message-send:hover {
    transform: scale(1.05);
}

.client-message-send:disabled {
    opacity: 0.45;
    cursor: wait;
    transform: none;
}

.client-message-send svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-message-error {
    display: none;
    flex: 0 0 auto;
    padding: 8px 14px 11px;
    background: #fff;
    color: #b42318;
    font-size: 11px;
    text-align: center;
}

/* ========================================
   MOBILE MESSAGE BACKDROP
======================================== */

.client-message-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease,visibility 0.2s ease;
}

/* ========================================
   CLIENT MESSAGING MOBILE
======================================== */

@media (max-width:700px) {

    .client-message-launcher {
        right: 16px;
        bottom: 16px;
        min-width: 52px;
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
    }


    .client-message-launcher-label {
        display: none;
    }


    .client-message-launcher-icon,
    .client-message-launcher-icon svg {
        width: 22px;
        height: 22px;
    }


    .client-message-drawer {
        position: fixed;

        inset: 0;

        display: flex;
        flex-direction: column;

        width: 100%;

        height: 100vh;
        height: 100svh;
        height: 100dvh;

        max-width: none;
        max-height: none;

        overflow: hidden;

        border: 0;
        border-radius: 0;

        background: #ffffff;

        transform: translateY(30px);
    }


    .client-message-drawer.is-open {
        transform: translateY(0);
    }


    .client-message-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    .client-message-header {
        flex: 0 0 auto;

        padding:
            max(
                16px,
                env(safe-area-inset-top)
            )
            16px
            14px;
    }


    .client-message-list {
        flex: 1 1 auto;

        min-height: 0;

        padding: 16px;

        overflow-y: auto;
    }


    .client-message-form {
        position: relative;

        z-index: 5;

        flex: 0 0 auto;

        display: flex;
        align-items: flex-end;

        gap: 9px;

        padding:
            10px
            10px
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        background: #ffffff;

        border-top:
            1px solid
            #dce7ed;
    }


    /*
     * IMPORTANT:
     * iOS Safari zooms focused form fields when
     * their text size is below 16px.
     */

    .client-message-form textarea {
        flex: 1 1 auto;

        min-width: 0;
        min-height: 44px;
        max-height: 120px;

        padding:
            11px
            13px;

        background:
            #f8fbfd;

        border:
            1px solid
            #c8dce8;

        border-radius:
            12px;

        color:
            #183447;

        font-size:
            16px;

        line-height:
            1.4;
    }


    .client-message-form textarea:focus {
        background:
            #ffffff;

        border-color:
            #1f9aeb;

        box-shadow:
            0 0 0 3px
            rgba(
                31,
                154,
                235,
                0.10
            );
    }


    .client-message-send {
        flex:
            0 0 44px;

        width:
            44px;

        height:
            44px;

        background:
            linear-gradient(
                135deg,
                #f5ab40 0%,
                #ef602c 100%
            );

        color:
            #ffffff;

        border-radius:
            12px;

        box-shadow:
            0 4px 12px
            rgba(
                239,
                96,
                44,
                0.18
            );
    }


    body.client-messaging-open {
        overflow:
            hidden;
    }


    body.client-messaging-open
    .client-app-nav {
        display:
            none;
    }

}


/* ========================================
   ADMIN MESSAGING
======================================== */

.admin-message-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-width: 138px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease,box-shadow 0.18s ease;
}

.admin-message-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 32px rgba(0,0,0,0.28);
}

.admin-message-launcher-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
}

.admin-message-launcher-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-message-unread-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* ========================================
   ADMIN MESSAGE BACKDROP
======================================== */

.admin-message-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1101;
    background: rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease,visibility 0.2s ease;
}

.admin-message-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   ADMIN MESSAGE DRAWER
======================================== */

.admin-message-drawer {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 1102;
    display: flex;
    flex-direction: column;
    width: min(760px,calc(100vw - 48px));
    height: min(650px,calc(100vh - 125px));
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(0,0,0,0.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.985);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.2s ease,visibility 0.2s ease,transform 0.2s ease;
}

.admin-message-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ========================================
   ADMIN MESSAGE HEADER
======================================== */

.admin-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 18px 20px 16px;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
}

.admin-message-header h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.admin-message-header p {
    margin: 3px 0 0;
    color: #777;
    font-size: 12px;
}

.admin-message-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f3f3;
    color: #222;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

/* ========================================
   ADMIN MESSAGE BODY
======================================== */

.admin-message-body {
    display: grid;
    grid-template-columns: 250px minmax(0,1fr);
    flex: 1 1 auto;
    min-height: 0;
}

/* ========================================
   ADMIN MESSAGE INBOX
======================================== */

.admin-message-inbox {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid #e9e9e9;
    background: #fafafa;
}

.admin-message-inbox-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #e9e9e9;
}

.admin-message-inbox-heading strong {
    font-size: 13px;
}

.admin-message-inbox-heading span {
    color: #888;
    font-size: 10px;
}

.admin-conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.admin-conversation-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid #ececec;
    border-radius: 0;
    background: transparent;
    color: #222;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-conversation-item:hover {
    background: #f0f0f0;
}

.admin-conversation-item.is-active {
    background: #e9e9e9;
}

.admin-conversation-item.has-unread {
    background: #fff;
}

.admin-conversation-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.admin-conversation-item-top strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-conversation-unread {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.admin-conversation-preview {
    display: block;
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: #666;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-conversation-time {
    margin-top: 4px;
    color: #999;
    font-size: 9px;
}

/* ========================================
   ADMIN ACTIVE CONVERSATION
======================================== */

.admin-message-conversation {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.admin-message-conversation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 11px 16px;
    border-bottom: 1px solid #e9e9e9;
}

.admin-message-conversation-header>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-message-conversation-header strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-message-conversation-header span {
    overflow: hidden;
    color: #777;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-message-mobile-back {
    display: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* ========================================
   ADMIN MESSAGE LIST
======================================== */

.admin-message-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    background: #f7f7f8;
    overscroll-behavior: contain;
}

.admin-message-loading,
.admin-message-empty {
    margin: auto;
    padding: 20px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.admin-message-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.admin-message-row.is-admin {
    align-self: flex-end;
    align-items: flex-end;
}

.admin-message-row.is-client {
    align-self: flex-start;
    align-items: flex-start;
}

.admin-message-sender {
    margin-bottom: 4px;
    padding: 0 4px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
}

.admin-message-bubble {
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-message-row.is-admin .admin-message-bubble {
    background: #111;
    color: #fff;
    border-bottom-right-radius: 5px;
}

.admin-message-row.is-client .admin-message-bubble {
    background: #fff;
    color: #222;
    border: 1px solid #e2e2e2;
    border-bottom-left-radius: 5px;
}

.admin-message-time {
    margin-top: 4px;
    padding: 0 4px;
    color: #929292;
    font-size: 9px;
}

/* ========================================
   ADMIN MESSAGE COMPOSER
======================================== */

.admin-message-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid #e9e9e9;
    background: #fff;
}

.admin-message-form textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 42px;
    max-height: 120px;
    margin: 0;
    padding: 10px 12px;
    resize: none;
    border: 1px solid #d9d9d9;
    border-radius: 13px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    outline: none;
}

.admin-message-form textarea:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.admin-message-send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    cursor: pointer;
}

.admin-message-send:disabled {
    opacity: 0.45;
    cursor: wait;
}

.admin-message-send svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-message-error {
    display: none;
    flex: 0 0 auto;
    padding: 8px 14px 11px;
    background: #fff;
    color: #b42318;
    font-size: 11px;
    text-align: center;
}

/* ========================================
   ADMIN MESSAGING MOBILE
======================================== */

@media (max-width:700px) {
    .admin-message-launcher {
        right: 16px;
        bottom: 16px;
        min-width: 52px;
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
    }

    .admin-message-launcher>span:not(.admin-message-launcher-icon):not(.admin-message-unread-badge) {
        display: none;
    }

    .admin-message-drawer {
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        transform: translateY(30px);
    }

    .admin-message-drawer.is-open {
        transform: translateY(0);
    }

    .admin-message-header {
        padding: max(16px,env(safe-area-inset-top)) 16px 14px;
    }

    .admin-message-body {
        position: relative;
        display: block;
        flex: 1 1 auto;
        min-height: 0;
    }

    .admin-message-inbox,
    .admin-message-conversation {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .admin-message-inbox {
        border-right: 0;
    }

    .admin-message-conversation {
        z-index: 2;
        transform: translateX(100%);
        transition: transform 0.2s ease;
    }

    .admin-message-drawer.conversation-open .admin-message-conversation {
        transform: translateX(0);
    }

    .admin-message-mobile-back {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-message-list {
        padding: 16px;
    }

    .admin-message-form {
        padding: 10px 10px max(10px,env(safe-area-inset-bottom));
    }

    body.admin-messaging-open {
        overflow: hidden;
    }
}

/* ========================================
   CLIENT APP NAVIGATION
======================================== */

/* ========================================
   HEADER ACTIONS
======================================== */

.client-dashboard-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ========================================
   CLIENT NOTIFICATION CENTER BUTTON
======================================== */

.client-portal-page
.client-notification-center-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    background:
        #ffffff;

    color:
        #2890df;

    border:
        1px solid
        #c8dce8;

    border-radius:
        11px;

    box-shadow:
        0
        3px
        10px
        rgba(
            24,
            52,
            71,
            0.06
        );

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;

}


.client-portal-page
.client-notification-center-button:hover {

    background:
        #f7fbfe;

    border-color:
        #9ec8df;

    box-shadow:
        0
        5px
        14px
        rgba(
            24,
            52,
            71,
            0.09
        );

}


.client-portal-page
.client-notification-center-button:active {

    transform:
        scale(0.96);

}


/* ========================================
   CLIENT NOTIFICATION BELL
======================================== */

.client-portal-page
.client-notification-bell {

    display:
        block;

    font-size:
        18px;

    line-height:
        1;

}


/* ========================================
   CLIENT NOTIFICATION UNREAD BADGE
======================================== */

.client-portal-page
.client-notification-unread-badge {

    position:
        absolute;

    top:
        -5px;

    right:
        -5px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 5px;

    background:
        #ef602c;

    color:
        #ffffff;

    border:
        2px solid
        #ffffff;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    box-shadow:
        0
        3px
        8px
        rgba(
            239,
            96,
            44,
            0.28
        );

}


.client-portal-page
.client-notification-unread-badge[hidden] {

    display:
        none !important;

}


/* ========================================
   CLIENT NOTIFICATION SETTINGS MODAL
======================================== */

.client-notifications-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        10050;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

}


.client-notifications-modal[hidden] {

    display:
        none !important;

}


.client-notifications-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            14,
            35,
            49,
            0.58
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

}


.client-notifications-dialog {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            720px
        );

    max-height:
        min(
            90vh,
            820px
        );

    overflow-y:
        auto;

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            40,
            144,
            223,
            0.14
        );

    border-radius:
        22px;

    box-shadow:
        0
        28px
        70px
        rgba(
            19,
            50,
            68,
            0.24
        );

}


/* ========================================
   CLIENT NOTIFICATION MODAL HEADER
======================================== */

.client-notifications-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        24px 26px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(
                71,
                206,
                230,
                0.11
            ),
            rgba(
                40,
                144,
                223,
                0.06
            )
        );

    border-bottom:
        1px solid
        #e1edf3;

}


.client-notifications-header h2 {

    margin:
        3px 0 5px;

    color:
        #183447;

    font-size:
        24px;

    font-weight:
        800;

}


.client-notifications-header p {

    max-width:
        520px;

    margin:
        0;

    color:
        #687986;

    font-size:
        13px;

    line-height:
        1.5;

}


.client-notifications-eyebrow {

    display:
        block;

    color:
        #2890df;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.client-notifications-close {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    color:
        #677a87;

    border:
        1px solid
        #c8dce8;

    border-radius:
        10px;

    font-size:
        25px;

    font-weight:
        400;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;

}


.client-notifications-close:hover {

    background:
        #ffffff;

    color:
        #183447;

}


.client-notifications-close:active {

    transform:
        scale(0.96);

}


/* ========================================
   CLIENT NOTIFICATION DEVICE SECTION
======================================== */

.client-notifications-device-section {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        0;

    padding:
        22px 26px;

    background:
        #ffffff;

    border-bottom:
        1px solid
        #e7eef2;

    border-radius:
        0;

}


.client-notifications-device-copy {

    min-width:
        0;

}


.client-notifications-device-copy strong {

    display:
        block;

    margin-top:
        3px;

    color:
        #203847;

    font-size:
        15px;

    font-weight:
        800;

}


.client-notifications-device-copy p {

    margin:
        5px 0 0;

    color:
        #6b7785;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.45;

}


.client-notifications-section-label {

    display:
        block;

    color:
        #2890df;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

}


.client-notification-enable-button {

    flex:
        0 0 auto;

    width:
        auto;

    min-height:
        42px;

    padding:
        10px 16px;

    background:
        linear-gradient(
            135deg,
            #f5ab40,
            #ef602c
        );

    color:
        #ffffff;

    border:
        0;

    border-radius:
        11px;

    box-shadow:
        0
        6px
        16px
        rgba(
            239,
            96,
            44,
            0.20
        );

    font-size:
        12px;

    font-weight:
        800;

    white-space:
        nowrap;

    cursor:
        pointer;

}


.client-notification-enable-button:disabled {

    opacity:
        0.6;

    cursor:
        default;

}


/* ========================================
   CLIENT NOTIFICATION PREFERENCES
======================================== */

.client-notifications-preferences-section {

    margin:
        0;

    padding:
        22px 26px 26px;

    background:
        #ffffff;

    border-radius:
        0 0 22px 22px;

}


.client-notifications-section-heading {

    margin-bottom:
        12px;

}


.client-notifications-section-heading p {

    margin:
        4px 0 0;

    color:
        #71808b;

    font-size:
        12px;

    line-height:
        1.45;

}


.client-notification-preference-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    min-height:
        64px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        #edf2f5;

    cursor:
        pointer;

}


.client-notification-preference-row:last-child {

    border-bottom:
        0;

}


.client-notification-preference-row > span {

    min-width:
        0;

}


.client-notification-preference-row strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #243746;

    font-size:
        14px;

    font-weight:
        800;

}


.client-notification-preference-row small {

    display:
        block;

    color:
        #71808b;

    font-size:
        12px;

    line-height:
        1.4;

}


.client-notification-preference-row input {

    flex:
        0 0 auto;

    width:
        20px;

    height:
        20px;

    margin:
        0;

    accent-color:
        #2890df;

    cursor:
        pointer;

}


/* ========================================
   CLIENT NOTIFICATION MODAL OPEN
======================================== */

body.client-notifications-modal-open {

    overflow:
        hidden;

}


/* ========================================
   CLIENT NOTIFICATION MODAL — MOBILE
======================================== */

@media (max-width:700px) {

    .client-notifications-modal {

        align-items:
            flex-end;

        padding:
            0;

    }


    .client-notifications-dialog {

        width:
            100%;

        max-height:
            88dvh;

        border-radius:
            22px
            22px
            0
            0;

    }


    .client-notifications-header {

        padding:
            20px
            18px
            17px;

    }


    .client-notifications-header h2 {

        font-size:
            22px;

    }


    .client-notifications-device-section {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            14px;

        padding:
            18px;

    }


    .client-notification-enable-button {

        width:
            100%;

    }


    .client-notifications-preferences-section {

        padding:
            18px;

        border-radius:
            0;

    }


    .client-notification-preference-row {

        min-height:
            68px;

        gap:
            14px;

    }

}

/* ========================================
   HEADER LOG OUT
======================================== */

.client-portal-page .client-header-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 14px;
    background: #ffffff;
    color: #6b7785;
    border: 1px solid #c8dce8;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(24,52,71,0.06);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease,color 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}

.client-portal-page .client-header-logout-button:hover {
    background: #f7fafc;
    color: #183447;
    border-color: #a9c8d9;
}

.client-portal-page .client-header-logout-button:active {
    transform: scale(0.97);
}

/* ========================================
   HEADER ACTIONS — MOBILE
======================================== */

@media (max-width:700px) {
    .client-portal-page .client-dashboard-header-actions {
        gap: 6px;
    }

    .client-portal-page .client-header-logout-button {
        min-height: 40px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 10px;
    }
}

/* ========================================
   DESKTOP BURGER BUTTON
======================================== */

.client-menu-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}

.client-menu-button:hover {
    background: #f5f5f5;
    border-color: #c9c9c9;
    transform: translateY(-1px);
}

.client-menu-button:active {
    transform: scale(0.97);
}

.client-menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    background: #111111;
    border-radius: 999px;
}

/* ========================================
   DESKTOP NAVIGATION BACKDROP
======================================== */

.client-navigation-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1198;
    background: rgba(0,0,0,0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease,visibility 0.22s ease;
}

.client-navigation-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   DESKTOP NAVIGATION DRAWER
======================================== */

.client-navigation-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1199;
    display: flex;
    flex-direction: column;
    width: min(340px,86vw);
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,0.08);
    box-shadow: 16px 0 50px rgba(0,0,0,0.18);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.24s ease,visibility 0.24s ease;
}

.client-navigation-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* ========================================
   NAVIGATION HEADER
======================================== */

.client-navigation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 16px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid #e9e9e9;
}

/* ========================================
   NAVIGATION CLOSE
======================================== */

.client-navigation-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #f3f3f3;
    color: #222222;
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease,transform 0.18s ease;
}

.client-navigation-close:hover {
    background: #e8e8e8;
    transform: scale(1.04);
}

/* ========================================
   NAVIGATION LINKS
======================================== */

.client-navigation-links {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    padding: 18px 14px;
    overflow-y: auto;
}

.client-navigation-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px 14px;
    background: transparent;
    color: #222222;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease,transform 0.16s ease;
}

.client-navigation-link:hover {
    background: #f4f4f4;
}

.client-navigation-link:active {
    transform: scale(0.985);
}

.client-navigation-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: #f1f1f1;
    border-radius: 8px;
    color: #111111;
    font-size: 16px;
}

/* ========================================
   NAVIGATION MESSAGE BADGE
======================================== */

.client-navigation-message-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #d92d20;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

/* ========================================
   NAVIGATION PRIMARY ACTION
======================================== */

.client-navigation-primary {
    flex: 0 0 auto;
    padding: 14px 14px 8px;
}

.client-navigation-request {
    width: 100%;
    margin: 0;
}

/* ========================================
   NAVIGATION FOOTER
======================================== */

.client-navigation-footer {
    flex: 0 0 auto;
    padding: 8px 14px max(18px,env(safe-area-inset-bottom));
}

.client-navigation-logout {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    color: #555555;
    border: 1px solid #dddddd;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ========================================
   LOCK PAGE WHILE DESKTOP MENU IS OPEN
======================================== */

body.client-navigation-open {
    overflow: hidden;
}

/* ========================================
   DESKTOP SCROLL TARGETS
======================================== */

#household-section,
#pets-section,
#services-section {
    scroll-margin-top: 24px;
}

/* ========================================
   MOBILE BOTTOM NAVIGATION - DEFAULT
======================================== */

.client-bottom-navigation {
    display: none;
}

/* ========================================
   BOTTOM NAV ITEM
======================================== */

.client-bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 8px 4px 7px;
    background: transparent;
    color: #788894;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease,background 0.18s ease,transform 0.12s ease;
}

.client-bottom-nav-item:active {
    transform: scale(0.96);
}

/* ========================================
   BOTTOM NAV ICON
======================================== */

.client-bottom-nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
}

.client-bottom-nav-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ========================================
   BOTTOM NAV LABEL
======================================== */

.client-bottom-nav-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* ========================================
   ACTIVE BOTTOM NAV ITEM
======================================== */

.client-bottom-nav-item-active {
    color: var(--pis-blue,#2890df);
}

.client-bottom-nav-item-active .client-bottom-nav-icon {
    transform: translateY(-1px);
}

.client-bottom-nav-item-active .client-bottom-nav-label {
    font-weight: 800;
}

/* ========================================
   MOBILE MESSAGE BADGE
======================================== */

.client-bottom-nav-icon-badge {
    overflow: visible;
}

.client-bottom-message-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    background: #d92d20;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

/* ========================================
   MOBILE NAVIGATION
======================================== */

@media (max-width:700px) {
    /* ========================================
       HIDE DESKTOP NAVIGATION
    ======================================== */

    .client-menu-button {
        display: none;
    }

    .client-navigation-backdrop,
    .client-navigation-drawer {
        display: none;
    }

    /* ========================================
       FIXED APP NAVIGATION
    ======================================== */

    .client-bottom-navigation {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(5,minmax(0,1fr));
        align-items: center;
        gap: 0;
        width: 100%;
        min-height: 72px;
        padding: 10px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
        background: rgba(255,255,255,0.99);
        border-top: 0;
        box-shadow: 0 -12px 34px rgba(25,55,73,0.18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

   /* ========================================
      BOTTOM NAV BRAND ACCENT
   ======================================== */
   
   .client-bottom-navigation::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
   
       background: linear-gradient(
           90deg,
           #47cee6 0%,
           #2890df 52%,
           #1f7bc2 100%
       );
   
       box-shadow:
           0 1px 6px rgba(40,144,223,0.20);
   }

    /* ========================================
       MOBILE NAV TOUCH TARGET
    ======================================== */

    .client-bottom-nav-item {
        min-height: 52px;
        padding: 6px 2px;
    }

   /* ========================================
      CONTENT CLEARANCE FOR FIXED NAV
   ======================================== */
   
   .client-dashboard-container {
   
       padding-bottom:
           calc(
               96px +
               env(
                   safe-area-inset-bottom
               )
           );
   
   }

    /* ========================================
       HIDE MESSAGE LAUNCHER ON MOBILE APP
    ======================================== */

    .client-message-launcher {
        display: none !important;
    }
}

/* ========================================
   MOBILE APP HOME
======================================== */

.mobile-home-dashboard {
    display: none;
}

/* ========================================
   MOBILE APP HOME - MOBILE ONLY
======================================== */

@media (max-width:700px) {
    .mobile-home-dashboard {
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    /* ========================================
       HOME GREETING
    ======================================== */

    .mobile-home-greeting {
        margin: 4px 18px 22px;
    }

    .mobile-home-greeting h2 {
        margin: 0 0 5px;
        color: var(--pis-navy,#243746);
        font-size: 26px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    .mobile-home-greeting p {
        margin: 0;
        color: var(--pis-muted,#667784);
        font-size: 14px;
        line-height: 1.45;
    }

    /* ========================================
       HOME SECTION
    ======================================== */

    .mobile-home-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 24px;
        padding: 18px;
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(41,91,121,0.14);
        border-radius: 22px;
    }

    .mobile-home-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        gap: 14px;
        margin: 0 0 14px;
    }

    .mobile-home-section-heading h3 {
        margin: 0;
        color: var(--pis-navy,#243746);
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2;
    }

    .mobile-home-section-link {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        padding: 4px 0;
        background: transparent;
        color: var(--pis-blue,#2890df);
        border: 0;
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        text-align: right;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* ========================================
       NEXT VISIT HERO CARD
    ======================================== */

    .mobile-home-next-visit-card {
        position: relative;
        overflow: hidden;
        margin: 0 0 24px;
        padding: 20px;
        background: linear-gradient(145deg,#ffffff 0%,#f5fbff 100%);
        border: 1px solid rgba(40,144,223,0.18);
        border-radius: 20px;
        box-shadow: 0 10px 28px rgba(25,55,73,0.08);
    }

    .mobile-home-next-visit-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--pis-cyan,#47cee6),var(--pis-blue,#2890df));
    }

    .mobile-home-card-eyebrow {
        margin-bottom: 13px;
        color: var(--pis-blue,#2890df);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .mobile-home-next-visit-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
    }

    .mobile-home-next-visit-header>div {
        min-width: 0;
    }

    .mobile-home-next-visit-date {
        margin-bottom: 5px;
        color: var(--pis-muted,#667784);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
    }

    .mobile-home-next-visit-pets {
        margin: 0;
        color: var(--pis-navy,#243746);
        font-size: 22px;
        font-weight: 850;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .mobile-home-next-visit-service {
        margin-top: 8px;
        color: var(--pis-muted,#667784);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
    }

    /* ========================================
       HOME STATUS BADGE
    ======================================== */

    .mobile-home-status-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 9px;
        background: rgba(40,144,223,0.10);
        color: var(--pis-blue,#2890df);
        border: 1px solid rgba(40,144,223,0.16);
        border-radius: 999px;
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
    }

    /* ========================================
       HOME CARD LINK
    ======================================== */

    .mobile-home-card-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin-top: 17px;
        padding: 13px 0 0;
        background: transparent;
        color: var(--pis-blue,#2890df);
        border: 0;
        border-top: 1px solid rgba(40,144,223,0.12);
        font-size: 13px;
        font-weight: 800;
        text-align: left;
    }

    .mobile-home-card-link span {
        font-size: 18px;
        line-height: 1;
    }

    /* ========================================
       QUICK ACTIONS
    ======================================== */

    .mobile-home-quick-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        margin: 0;
    }

    .mobile-home-quick-action {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        min-height: 58px;
        padding: 9px 12px;
        border: 1px solid rgba(41,91,121,0.16);
        border-radius: 18px;
        background: #ffffff;
        color: #183447;
        box-shadow: 0 4px 14px rgba(38,79,104,0.06);
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-home-quick-action-primary {
        border-color: transparent;
        background: linear-gradient(135deg,var(--pis-blue,#2890df),#237fc4);
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(40,144,223,0.16);
    }

    .mobile-home-quick-action-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(40,144,223,0.10);
        color: var(--pis-blue,#2890df);
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
    }

    .mobile-home-quick-action-primary .mobile-home-quick-action-icon {
        background: rgba(255,255,255,0.16);
        color: #ffffff;
    }

    .mobile-home-quick-action-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ========================================
       UPCOMING SNAPSHOT
    ======================================== */

    .mobile-home-upcoming-list {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e2e9ed;
        border-radius: 18px;
        box-shadow: 0 6px 20px rgba(25,55,73,0.05);
    }

    .mobile-home-upcoming-item {
        display: grid;
        grid-template-columns: 48px minmax(0,1fr) auto;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 13px 14px;
        background: #ffffff;
        border: 0;
        border-bottom: 1px solid #edf1f3;
        text-align: left;
    }

    .mobile-home-upcoming-item:last-child {
        border-bottom: 0;
    }

    .mobile-home-upcoming-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 5px 4px;
        background: #f2f8fc;
        border-radius: 12px;
    }

    .mobile-home-upcoming-month {
        color: var(--pis-blue,#2890df);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .mobile-home-upcoming-day {
        margin-top: 1px;
        color: var(--pis-navy,#243746);
        font-size: 18px;
        font-weight: 850;
        line-height: 1;
    }

    .mobile-home-upcoming-info {
        min-width: 0;
    }

    .mobile-home-upcoming-info strong {
        display: block;
        overflow: hidden;
        color: var(--pis-navy,#243746);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-home-upcoming-info span {
        display: block;
        overflow: hidden;
        margin-top: 3px;
        color: var(--pis-muted,#667784);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-home-upcoming-chevron {
        color: #a1adb5;
        font-size: 21px;
        font-weight: 400;
    }

    /* ========================================
       LATEST UPDATE
    ======================================== */

    .mobile-home-latest-update {
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: #ffffff;
        border: 1px solid #e2e9ed;
        border-radius: 18px;
        box-shadow: 0 6px 20px rgba(25,55,73,0.05);
    }

    .mobile-home-latest-update-content {
        padding: 17px;
    }

    .mobile-home-latest-update-heading h3 {
        margin: 0;
        color: var(--pis-navy,#243746);
        font-size: 17px;
        font-weight: 850;
    }

    .mobile-home-latest-update-heading p {
        margin: 4px 0 0;
        color: var(--pis-muted,#667784);
        font-size: 12px;
        font-weight: 600;
    }

    .mobile-home-latest-update-photo {
        overflow: hidden;
        width: 100%;
        margin-top: 14px;
        aspect-ratio: 16/9;
        background: #edf2f5;
        border-radius: 14px;
    }

    .mobile-home-latest-update-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-home-latest-update-note {
        margin: 14px 0 0;
        color: var(--pis-navy,#243746);
        font-size: 13px;
        line-height: 1.55;
    }

    /* ========================================
       HOME EMPTY STATE
    ======================================== */

    .mobile-home-empty-state {
        padding: 20px 17px;
        color: var(--pis-muted,#667784);
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
    }
}

/* ========================================
   PAWS IN STRIDE CLIENT APP THEME
======================================== */

/* ========================================
   BRAND VARIABLES
======================================== */

.client-portal-page {
    --pis-blue: #2890df;
    --pis-blue-dark: #1f7bc2;
    --pis-cyan: #47cee6;
    --pis-orange: #f5ab40;
    --pis-orange-soft: #f3aa4c;
    --pis-orange-hover: #ef602c;
    --pis-ink: #202a33;
    --pis-text: #333333;
    --pis-muted: #6b7785;
    --pis-app-bg: #f3f8fb;
    --pis-app-bg-soft: #f8fbfd;
    --pis-card: #ffffff;
    --pis-border: #dce8ef;
    --pis-border-strong: #c8dce8;
    --pis-blue-soft: #eaf6fc;
    --pis-orange-soft-bg: #fff7ea;
    --pis-shadow: 0 8px 28px rgba(35,93,125,0.08);
    --pis-shadow-hover: 0 12px 32px rgba(35,93,125,0.12);
}

/* ========================================
   CLIENT APP PAGE
======================================== */

html:has(body.client-portal-page) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.client-portal-page {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: radial-gradient(circle at top left,rgba(71,206,230,0.10),transparent 34%),linear-gradient(180deg,#f8fcfe 0%,var(--pis-app-bg) 45%,#eef6fa 100%);
    color: var(--pis-ink);
    font-family: "Roboto",Arial,Helvetica,sans-serif;
}

/* ========================================
   MOBILE WIDTH SAFETY
======================================== */

@media (max-width:700px) {
    body.client-portal-page,
    .client-dashboard-container,
    #dashboard-content,
    .mobile-home-dashboard,
    .mobile-home-section,
    .mobile-home-next-visit-card,
    .mobile-home-upcoming-list,
    .mobile-home-latest-update {
        max-width: 100%;
        min-width: 0;
    }

    body.client-portal-page {
        overflow-x: hidden;
        touch-action: pan-y;
    }
}

/* ========================================
   CLIENT DASHBOARD WIDTH
======================================== */

/* ========================================
   CLIENT DASHBOARD WIDTH
======================================== */

.client-portal-page .client-dashboard-container {
    position: relative;
}

/* ========================================
   CLIENT DASHBOARD HEADER
======================================== */

.client-portal-page .client-dashboard-header {
    position: relative;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(200,220,232,0.82);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(40,144,223,0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ========================================
   SUBTLE BRAND ACCENT
======================================== */

.client-portal-page .client-dashboard-header::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue));
    border-radius: 0 0 999px 999px;
}

/* ========================================
   HEADER BRAND
======================================== */

.client-dashboard-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 18px;
}

.client-dashboard-logo {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.client-dashboard-welcome {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--pis-border);
}

.client-portal-label {
    display: block;
    margin-bottom: 3px;
    color: var(--pis-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.client-portal-page .client-dashboard-header h2 {
    margin: 0;
    color: var(--pis-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

/* ========================================
   LOADING ACCOUNT
======================================== */

.client-portal-page #loading {
    padding: 14px 18px;
    color: var(--pis-muted);
    font-size: 14px;
    font-weight: 500;
}

/* ========================================
   CLIENT SECTIONS / CARDS
======================================== */

.client-portal-page section {
    background: var(--pis-card);
    border: 1px solid var(--pis-border);
    border-radius: 18px;
    box-shadow: var(--pis-shadow);
}

/* ========================================
   MAJOR CLIENT SECTION ACCENTS
======================================== */

.client-portal-page #household-section,
.client-portal-page #pets-section,
.client-portal-page #services-section,
.client-portal-page .booking-section {
    position: relative;
    overflow: hidden;
}

/* ========================================
   MAJOR CLIENT SECTION BRAND BAR
======================================== */

.client-portal-page #household-section::before,
.client-portal-page #pets-section::before,
.client-portal-page #services-section::before,
.client-portal-page .booking-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );

    border-radius: 0;
    pointer-events: none;
}

/* ========================================
   SECTION HEADINGS
======================================== */

.client-portal-page section h3,
.client-portal-page section h4,
.client-portal-page section h5 {
    color: var(--pis-ink);
}

.client-portal-page .household-section-help,
.client-portal-page .pets-section-help,
.client-portal-page .upcoming-calendar-help,
.client-portal-page .booking-help,
.client-portal-page .field-help {
    color: var(--pis-muted);
}


/* ========================================
   DESKTOP SECTION HEADING POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .household-section-header h3,
    .client-portal-page .pets-section-header h3,
    .client-portal-page .upcoming-services-header h3 {
        margin: 0 0 5px;

        color: #183447;

        font-size: 22px;
        font-weight: 800;

        letter-spacing: -0.025em;
        line-height: 1.2;
    }


    .client-portal-page .household-section-help,
    .client-portal-page .pets-section-help,
    .client-portal-page .upcoming-calendar-help {
        color: #6b7785;

        font-size: 13px;
        font-weight: 500;

        line-height: 1.45;
    }

}

/* ========================================
   PRIMARY BUTTONS
======================================== */

.client-portal-page .primary-button {
    min-height: 44px;
    padding: 11px 18px;

    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );

    color: #ffffff;

    border: 0;
    border-radius: 11px;

    box-shadow: 0 5px 14px rgba(239,96,44,0.18);

    font-weight: 800;
    letter-spacing: 0.01em;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.client-portal-page .primary-button:hover {
    opacity: 1;

    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(239,96,44,0.24);
}

.client-portal-page .primary-button:active {
    transform: scale(0.985);
}

/* ========================================
   HEADER REQUEST SERVICE
======================================== */

.client-portal-page .client-header-request-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
    color: #ffffff;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 6px 16px rgba(239,96,44,0.22);
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.18s ease,box-shadow 0.18s ease;
}

.client-portal-page .client-header-request-button:hover {
    background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
    box-shadow: 0 8px 20px rgba(239,96,44,0.28);
    transform: translateY(-1px);
}

.client-portal-page .client-header-request-button:active {
    transform: scale(0.97);
}

/* ========================================
   SECONDARY BUTTONS
======================================== */

.client-portal-page .secondary-button {
    color: var(--pis-blue);
    background: #ffffff;
    border: 1px solid var(--pis-border-strong);
    border-radius: 11px;
}

.client-portal-page .secondary-button:hover {
    background: var(--pis-blue-soft);
    color: var(--pis-blue-dark);
    border-color: var(--pis-blue);
}

/* ========================================
   PROFILE FORM BUTTONS — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-profile .household-form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    body.mobile-app-screen-profile .household-form-actions button {
        width: 100%;
        min-height: 46px;
        padding: 11px 16px;
        border-radius: 11px !important;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* ========================================
       SAVE PROFILE
    ======================================== */

    body.mobile-app-screen-profile .household-form-actions .primary-button {
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        color: #ffffff;
        border: 0;
        border-radius: 11px !important;
        box-shadow: 0 5px 14px rgba(239,96,44,0.18);
    }

    body.mobile-app-screen-profile .household-form-actions .primary-button:hover {
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        transform: none;
    }

    body.mobile-app-screen-profile .household-form-actions .primary-button:active {
        transform: scale(0.985);
    }

    /* ========================================
       CANCEL PROFILE EDIT
    ======================================== */

    body.mobile-app-screen-profile .household-form-actions .secondary-button {
        background: #ffffff;
        color: #1f7bc2;
        border: 1px solid #c8dce8;
        border-radius: 11px !important;
        box-shadow: none;
    }

    body.mobile-app-screen-profile .household-form-actions .secondary-button:hover {
        background: #f4f9fc;
        color: #176aa9;
        border-color: #9fc7dd;
    }

    body.mobile-app-screen-profile .household-form-actions .secondary-button:active {
        transform: scale(0.985);
    }
}

/* ========================================
   EDIT / SMALL ACTION BUTTONS
======================================== */

.client-portal-page .remove-date-button {
    color: var(--pis-blue-dark);
    background: #ffffff;
    border: 1px solid var(--pis-border-strong);
}

.client-portal-page .remove-date-button:hover {
    color: var(--pis-blue);
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

/* ========================================
   EDIT PET BUTTON — MOBILE PETS
======================================== */

body.mobile-app-screen-pets .edit-pet-button {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: #f4f9fc;
    color: #1f7bc2;
    border: 1px solid #c8dce8;
    border-radius: 11px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}

body.mobile-app-screen-pets .edit-pet-button:hover {
    background: #eaf5fb;
    color: #176aa9;
    border-color: #9fc7dd;
}

body.mobile-app-screen-pets .edit-pet-button:active {
    transform: scale(0.985);
}

/* ========================================
   LOG OUT
======================================== */

.client-portal-page #logout-button {
    display: none !important;
}

/* ========================================
   FOCUS STATES
======================================== */

.client-portal-page button:focus-visible,
.client-portal-page input:focus-visible,
.client-portal-page select:focus-visible,
.client-portal-page textarea:focus-visible,
.client-portal-page a:focus-visible {
    outline: 3px solid rgba(40,144,223,0.20);
    outline-offset: 2px;
}

/* ========================================
   FORM INPUTS
======================================== */

.client-portal-page .booking-section input,
.client-portal-page .booking-section select,
.client-portal-page .household-form-field input,
.client-portal-page .household-form-field select,
.client-portal-page .household-form-field textarea,
.client-portal-page .pet-form-field input,
.client-portal-page .pet-form-field select,
.client-portal-page .pet-form-field textarea {
    color: var(--pis-ink);
    background: #fff;
    border: 1px solid var(--pis-border-strong);
    border-radius: 11px;
    transition: border-color 0.18s ease,box-shadow 0.18s ease;
}

.client-portal-page .booking-section input:focus,
.client-portal-page .booking-section select:focus,
.client-portal-page .household-form-field input:focus,
.client-portal-page .household-form-field select:focus,
.client-portal-page .household-form-field textarea:focus,
.client-portal-page .pet-form-field input:focus,
.client-portal-page .pet-form-field select:focus,
.client-portal-page .pet-form-field textarea:focus {
    outline: none;
    border-color: var(--pis-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.11);
}

/* ========================================
   BOOKING SECTION
======================================== */

.client-portal-page .booking-section {
    position: relative;
    overflow: hidden;

    border: 1px solid #d6e4eb;
    border-radius: 18px;

    box-shadow:
        0 7px 18px rgba(24,52,71,0.07);
}

.client-portal-page .booking-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );

    pointer-events: none;
}


/* ========================================
   DESKTOP REQUEST SERVICE HEADER
======================================== */

@media (min-width:701px) {

    .client-portal-page
    .booking-section > .section-header {
        align-items: center;

        margin: 0 0 18px;
        padding-top: 4px;
    }


    .client-portal-page
    .booking-section > .section-header h3 {
        margin: 0;

        color: #183447;

        font-size: 22px;
        font-weight: 800;

        line-height: 1.2;
        letter-spacing: -0.025em;
    }


    .client-portal-page
    .booking-section
    #close-booking-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;
        padding: 0;

        background: #f4f9fc;
        color: #1f7bc2;

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

        box-shadow: none;

        font-size: 25px;
        font-weight: 500;
        line-height: 1;

        cursor: pointer;

        transition:
            background 0.18s ease,
            color 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease;
    }


    .client-portal-page
    .booking-section
    #close-booking-button:hover {
        background: #eaf5fb;
        color: #176aa9;
        border-color: #9fc7dd;
    }


    .client-portal-page
    .booking-section
    #close-booking-button:active {
        transform: scale(0.96);
    }

}

/* ========================================
   REQUEST SERVICE — MOBILE REDESIGN
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .booking-section {
        overflow: visible;
        margin: 0 0 26px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.mobile-app-screen-services .booking-section::before {
        display: none;
    }

    /* ========================================
       REQUEST SERVICE HEADER
    ======================================== */

    body.mobile-app-screen-services .booking-section>.section-header {
        align-items: center;
        margin: 0 0 14px;
        padding: 0 2px;
    }

    body.mobile-app-screen-services .booking-section>.section-header h3 {
        margin: 0;
        color: #183447;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    /* ========================================
       REQUEST SERVICE CLOSE
    ======================================== */

    body.mobile-app-screen-services .booking-section #close-booking-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        color: #1f9aeb;
        border: 0;
        border-radius: 9px;
        box-shadow: none;
        font-size: 28px;
        font-weight: 500;
        line-height: 1;
    }

    body.mobile-app-screen-services .booking-section #close-booking-button:active {
        background: rgba(31,154,235,0.08);
        transform: scale(0.96);
    }

    /* ========================================
       REQUEST SERVICE FORM CARD
    ======================================== */

    body.mobile-app-screen-services .booking-section #booking-form {
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 24px 18px 20px;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 7px 18px rgba(24,52,71,0.07);
    }

    /* ========================================
       REQUEST SERVICE FORM ACCENT
    ======================================== */

    body.mobile-app-screen-services .booking-section #booking-form::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        pointer-events: none;
    }
}

/* ========================================
   BOOKING TOTAL
======================================== */

.client-portal-page .booking-total {
    border-top: 1px solid var(--pis-border);
}

.client-portal-page #booking-price {
    color: var(--pis-blue);
}


/* ========================================
   DESKTOP REQUEST SERVICE TOTAL
======================================== */

@media (min-width:701px) {

    .client-portal-page .booking-total {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        gap: 18px;

        margin: 24px 0 8px;
        padding: 18px 0 0;

        border-top: 1px solid #d6e4eb;
    }


    .client-portal-page #booking-count {
        color: #183447;

        font-size: 17px;
        font-weight: 800;

        line-height: 1.2;
    }


    .client-portal-page #booking-price {
        color: #1f9aeb;

        font-size: 26px;
        font-weight: 800;

        line-height: 1;

        letter-spacing: -0.02em;
    }


    .client-portal-page .booking-price-details {
        margin: 0 0 18px;

        color: #6b7785;

        font-size: 12px;
        font-weight: 500;

        line-height: 1.45;

        text-align: right;
    }

}

/* ========================================
   REQUEST SERVICE TOTAL — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .booking-total {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin: 24px 0 8px;
        padding: 18px 0 0;
        border-top: 1px solid #d6e4eb;
    }

    body.mobile-app-screen-services #booking-count {
        color: #183447;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.mobile-app-screen-services #booking-price {
        color: #1f9aeb;
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.025em;
    }

    body.mobile-app-screen-services .booking-price-details {
        margin: 0 0 18px;
        color: #6b7785;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
        text-align: right;
    }

    /* ========================================
       CONTINUE BUTTON
    ======================================== */

    body.mobile-app-screen-services #booking-submit-button {
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        color: #ffffff;
        border: 0;
        border-radius: 11px !important;
        box-shadow: 0 6px 16px rgba(239,96,44,0.20);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }

    body.mobile-app-screen-services #booking-submit-button:hover {
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        transform: none;
    }

    body.mobile-app-screen-services #booking-submit-button:active {
        transform: scale(0.985);
    }
}

/* ========================================
   ADDITIONAL PETS
======================================== */

.client-portal-page .additional-pets-list {
    border-color: var(--pis-border);
}

.client-portal-page .additional-pet-option {
    border-bottom-color: var(--pis-border);
}

.client-portal-page .additional-pet-option:hover {
    background: var(--pis-blue-soft);
}


/* ========================================
   DESKTOP ADDITIONAL PETS POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .additional-pets-wrapper {
        margin-bottom: 20px;
    }


    .client-portal-page .additional-pets-wrapper > label {
        margin: 0 0 7px;

        color: #183447;

        font-size: 13px;
        font-weight: 800;
    }


    .client-portal-page .additional-pets-list {
        overflow: hidden;

        background: #f4f9fc;

        border: 1px solid #d3e4ed;
        border-radius: 11px;

        box-shadow: none;
    }


    .client-portal-page .additional-pet-option {
        min-height: 48px;
        padding: 11px 13px;

        background: transparent;

        border-bottom: 1px solid #dce9f0;

        transition:
            background 0.18s ease;
    }


    .client-portal-page .additional-pet-option:hover {
        background: #edf6fb;
    }


    .client-portal-page .additional-pet-main {
        color: #263d4c;

        font-size: 14px;
        font-weight: 700;
    }


    .client-portal-page .additional-pet-main input {
        width: 20px !important;
        height: 20px;

        accent-color: #1f9aeb;
    }


    .client-portal-page .additional-pet-fee {
        color: #567487;

        font-size: 11px;
        font-weight: 800;
    }


    .client-portal-page .additional-pets-help {
        margin: 8px 2px 0;

        color: #6b7785;

        font-size: 12px;
        font-weight: 500;

        line-height: 1.45;
    }

}

/* ========================================
   BOARDING POLICY
======================================== */

.client-portal-page .boarding-policy {
    background: var(--pis-orange-soft-bg);
    border: 1px solid #f3d7aa;
}


/* ========================================
   DESKTOP BOARDING POLICY POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .boarding-policy {
        margin-bottom: 20px;
        padding: 16px 17px;

        background: linear-gradient(
            145deg,
            #fffaf2 0%,
            #fff4e3 100%
        );

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

        box-shadow:
            0 3px 10px rgba(201,111,25,0.05);
    }


    .client-portal-page .boarding-policy p {
        margin: 7px 0 0;

        color: #76532d;

        font-size: 13px;
        font-weight: 500;

        line-height: 1.5;
    }

}

/* ========================================
   SELECTED DATES
======================================== */

.client-portal-page #selected-dates-container {
    background: var(--pis-app-bg-soft);
    border-color: var(--pis-border);
}


/* ========================================
   DESKTOP SELECTED DATES POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page #selected-dates-container {
        margin: 24px 0 0;
        padding: 18px;

        background: #f8fbfd;

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

        box-shadow:
            0 4px 14px rgba(24,52,71,0.045);
    }


    .client-portal-page .selected-dates-header {
        margin: 0 2px 14px;
    }


    .client-portal-page .selected-dates-header strong {
        color: #183447;

        font-size: 16px;
        font-weight: 800;

        letter-spacing: -0.01em;
    }


    .client-portal-page #selected-date-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 26px;
        padding: 4px 9px;

        background: #eaf5fb;
        color: #1f7bc2;

        border: 1px solid #c8dce8;
        border-radius: 999px;

        font-size: 11px;
        font-weight: 800;

        line-height: 1;
    }

}

/* ========================================
   SELECTED DATES — MOBILE REDESIGN
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services #selected-dates-container {
        margin: 24px 0 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.mobile-app-screen-services .selected-dates-header {
        margin: 0 2px 12px;
        padding: 0;
    }

    body.mobile-app-screen-services .selected-dates-header strong {
        color: #183447;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    body.mobile-app-screen-services #selected-date-count {
        color: #1f7bc2;
        font-size: 12px;
        font-weight: 800;
    }
}

/* ========================================
   CALENDAR CONTAINERS
======================================== */

.client-portal-page .booking-calendar {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border);
    border-radius: 14px;
}


/* ========================================
   DESKTOP CALENDAR POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .booking-calendar {
        margin: 4px 0 18px;
        padding: 16px 14px 14px;

        background: #f7fbfd;

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

        box-shadow: none;
    }


    .client-portal-page .booking-calendar-header {
        margin-bottom: 12px;
    }


    .client-portal-page .booking-calendar-header strong {
        color: #183447;

        font-size: 16px;
        font-weight: 800;

        letter-spacing: -0.01em;
    }


    .client-portal-page .booking-calendar-weekdays {
        margin-bottom: 5px;
    }


    .client-portal-page .booking-calendar-weekdays span {
        padding: 3px 0;

        color: #82909a;

        font-size: 10px;
        font-weight: 800;

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


    .client-portal-page .booking-calendar-grid {
        gap: 5px;
    }


    .client-portal-page .upcoming-calendar {
        background: #ffffff;

        border: 1px solid #d6e4eb;
        border-radius: 18px;

        box-shadow:
            0 7px 18px rgba(24,52,71,0.07);
    }

}

/* ========================================
   CALENDAR NAVIGATION
======================================== */

.client-portal-page .calendar-nav-button {
    width: 38px;
    height: 38px;
    padding: 0;

    background: #f4f8fb;
    color: #1f7bc2;

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

    box-shadow: none;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.client-portal-page .calendar-nav-button:hover {
    background: #eaf5fb;
    color: #176aa9;
    border-color: #9fc7dd;
}

.client-portal-page .calendar-nav-button:active {
    transform: scale(0.96);
}

/* ========================================
   REQUEST SERVICE CALENDAR — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .booking-calendar {
        margin: 4px 0 18px;
        padding: 16px 14px 14px;
        background: #f7fbfd;
        border: 1px solid #d8e7ef;
        border-radius: 14px;
        box-shadow: none;
    }

    body.mobile-app-screen-services .booking-calendar-header {
        margin-bottom: 12px;
    }

    body.mobile-app-screen-services .booking-calendar-header strong {
        color: #183447;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    /* ========================================
       CALENDAR NAV BUTTONS
    ======================================== */

    body.mobile-app-screen-services .booking-calendar .calendar-nav-button {
        width: 34px;
        height: 34px;
        padding: 0;
        background: #ffffff;
        color: #1f7bc2;
        border: 1px solid #d2e3ec;
        border-radius: 10px;
        box-shadow: none;
        font-size: 21px;
        font-weight: 700;
    }

    body.mobile-app-screen-services .booking-calendar .calendar-nav-button:hover {
        background: #eef7fc;
        color: #176aa9;
        border-color: #a9cfe3;
    }

    body.mobile-app-screen-services .booking-calendar .calendar-nav-button:active {
        transform: scale(0.95);
    }

    /* ========================================
       CALENDAR WEEKDAYS
    ======================================== */

    body.mobile-app-screen-services .booking-calendar-weekdays {
        margin-bottom: 5px;
    }

    body.mobile-app-screen-services .booking-calendar-weekdays span {
        padding: 3px 0;
        color: #82909a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    body.mobile-app-screen-services .booking-calendar-grid {
        gap: 5px;
    }
}

/* ========================================
   BOOKING CALENDAR DAYS
======================================== */

.client-portal-page .calendar-day {
    color: var(--pis-ink);
    border-color: var(--pis-border);
}

.client-portal-page .calendar-day:hover:not(:disabled) {
    color: var(--pis-blue);
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

.client-portal-page .calendar-day-selected {
    color: #ffffff;

    background: linear-gradient(
        145deg,
        #f5ab40 0%,
        #eb872c 100%
    );

    border-color: transparent;

    box-shadow:
        0 4px 10px rgba(201,111,25,0.23);
}

.client-portal-page .calendar-day-today:not(.calendar-day-selected) {
    border: 2px solid #1f9aeb;
}


/* ========================================
   DESKTOP REQUEST SERVICE CALENDAR DAYS
======================================== */

@media (min-width:701px) {

    .client-portal-page .booking-calendar .calendar-day {
        background: #ffffff;
        color: #263d4c;

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

        box-shadow: none;

        font-size: 12px;
        font-weight: 700;

        transition:
            background 0.18s ease,
            color 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }


    .client-portal-page
    .booking-calendar
    .calendar-day:hover:not(:disabled) {
        background: #eef7fd;
        color: #1f7bc2;

        border-color: #9ed2f2;

        transform: translateY(-1px);

        box-shadow:
            0 3px 8px rgba(24,52,71,0.06);
    }


    /* ========================================
       SELECTED DATE
    ======================================== */

    .client-portal-page
    .booking-calendar
    .calendar-day-selected {
        background: linear-gradient(
            145deg,
            #f5ab40 0%,
            #eb872c 100%
        );

        color: #ffffff;

        border-color: transparent;

        box-shadow:
            0 4px 10px rgba(201,111,25,0.23);
    }


    /* ========================================
       TODAY
    ======================================== */

    .client-portal-page
    .booking-calendar
    .calendar-day-today:not(.calendar-day-selected) {
        background: #ffffff;
        color: #1f7bc2;

        border: 2px solid #1f9aeb;
    }


    /* ========================================
       DISABLED / PAST DAYS
    ======================================== */

    .client-portal-page
    .booking-calendar
    .calendar-day:disabled,
    .client-portal-page
    .booking-calendar
    .calendar-day-past {
        background: #f5f7f8;
        color: #bdc5ca;

        border-color: #edf1f3;

        box-shadow: none;

        opacity: 1;
        cursor: not-allowed;
    }


    .client-portal-page
    .booking-calendar
    .calendar-day:active:not(:disabled) {
        transform: scale(0.96);
    }


    /* ========================================
       HOLIDAY STAR ON SELECTED DATE
    ======================================== */

    .client-portal-page
    .booking-calendar
    .calendar-day-selected
    .calendar-holiday-star {
        color: #ffffff;
    }

}

/* ========================================
   REQUEST SERVICE CALENDAR DAYS — MOBILE
======================================== */

@media (max-width:700px) {
    body.mobile-app-screen-services .booking-calendar .calendar-day {
        background: #ffffff;
        color: #263d4c;
        border: 1px solid #e3ebef;
        border-radius: 10px;
        box-shadow: none;
        font-size: 12px;
        font-weight: 700;
    }

    body.mobile-app-screen-services .booking-calendar .calendar-day:hover:not(:disabled) {
        background: #eef7fd;
        color: #1f7bc2;
        border-color: #9ed2f2;
    }

    /* ========================================
       SELECTED DATE
    ======================================== */

    body.mobile-app-screen-services .booking-calendar .calendar-day-selected {
        background: linear-gradient(145deg,#f5ab40 0%,#eb872c 100%);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(201,111,25,0.23);
    }

    /* ========================================
       TODAY
    ======================================== */

    body.mobile-app-screen-services .booking-calendar .calendar-day-today:not(.calendar-day-selected) {
        background: #ffffff;
        color: #1f7bc2;
        border: 2px solid #1f9aeb;
    }

    /* ========================================
       DISABLED / PAST DAYS
    ======================================== */

    body.mobile-app-screen-services .booking-calendar .calendar-day:disabled {
        background: #f5f7f8;
        color: #bdc5ca;
        border-color: #edf1f3;
        box-shadow: none;
        opacity: 1;
    }

    body.mobile-app-screen-services .booking-calendar .calendar-day:active:not(:disabled) {
        transform: scale(0.96);
    }
}

/* ========================================
   UPCOMING CALENDAR
======================================== */

.client-portal-page .upcoming-calendar-day {
    color: var(--pis-ink);
    background: #ffffff;
    border: 1px solid var(--pis-border);
}


/* ========================================
   DESKTOP BOOKED / ACTIVE VISIT
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-booked {
    background: #eef7fd;
    color: #1f7bc2;
    border: 1px solid #9ed2f2;
}


/* ========================================
   DESKTOP COMPLETED VISIT
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-day:has(.upcoming-service-count-completed):not(.upcoming-calendar-selected) {
    background: #eef9f1;
    color: #21863f;
    border: 1px solid #8fd19e;
}


/* ========================================
   DESKTOP CALENDAR HOVER
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-day:hover {
    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(24,52,71,0.08);
}


/* ========================================
   TODAY
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-today:not(.upcoming-calendar-selected):not(:has(.upcoming-service-count-completed)) {
    background: #ffffff;
    color: #1f7bc2;
    border: 2px solid #1f9aeb;
}


/* ========================================
   SELECTED EMPTY DAY
======================================== */

body.client-portal-page:not(
    .mobile-app-screen-services
)
.upcoming-calendar-selected:not(
    .upcoming-calendar-booked
) {
    background:
        linear-gradient(
            145deg,
            #f5ab40 0%,
            #eb872c 100%
        );

    color:
        #ffffff;

    border-color:
        transparent;

    box-shadow:
        0 4px 12px rgba(201,111,25,0.23);
}


/* ========================================
   SELECTED SCHEDULED DAY
======================================== */

body.client-portal-page:not(
    .mobile-app-screen-services
)
.upcoming-calendar-booked.upcoming-calendar-selected:not(
    :has(
        .upcoming-service-count-completed
    )
) {
    background:
        linear-gradient(
            145deg,
            #2890df 0%,
            #1768aa 100%
        );

    color:
        #ffffff;

    border-color:
        transparent;

    box-shadow:
        0 4px 12px rgba(31,123,194,0.24);
}


/* ========================================
   SELECTED COMPLETED DAY
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-selected:has(.upcoming-service-count-completed) {
    background: linear-gradient(
        145deg,
        #22a447 0%,
        #168a3a 100%
    );

    color: #ffffff;
    border-color: transparent;

    box-shadow:
        0 4px 12px rgba(22,138,58,0.24);
}


/* ========================================
   BOOKED / ACTIVE VISIT COUNT
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-service-count {
    background: #1f9aeb;
    color: #ffffff;
    border-color: #ffffff;
}


/* ========================================
   COMPLETED VISIT COUNT
======================================== */

.client-portal-page .upcoming-service-count-completed {
    background: #22a447;
    color: #ffffff;
}


body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-day:has(.upcoming-service-count-completed):not(.upcoming-calendar-selected)
.upcoming-service-count {
    background: #22a447;
    color: #ffffff;
    border-color: #ffffff;
}


/* ========================================
   SELECTED ACTIVE COUNT
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-selected:not(:has(.upcoming-service-count-completed))
.upcoming-service-count {
    background: #ffffff;
    color: #d87519;
    border-color: #ffffff;
}


/* ========================================
   SELECTED COMPLETED COUNT
======================================== */

body.client-portal-page:not(.mobile-app-screen-services)
.upcoming-calendar-selected:has(.upcoming-service-count-completed)
.upcoming-service-count {
    background: #ffffff;
    color: #168a3a;
    border-color: #ffffff;
}

/* ========================================
   SELECTED UPCOMING DAY
======================================== */

.client-portal-page .selected-upcoming-day {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border);
}

/* ========================================
   SERVICE CARDS
======================================== */

.client-portal-page .upcoming-service-card {
    border-color: var(--pis-border);
    box-shadow: 0 4px 14px rgba(35,93,125,0.04);
}

.client-portal-page .service-pet-chip {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
}

/* ========================================
   HOUSEHOLD DETAILS
======================================== */

.client-portal-page .household-detail-card {
    background: var(--pis-app-bg-soft);
    border-color: var(--pis-border);
}

.client-portal-page .household-detail-label,
.client-portal-page .pet-detail-label {
    color: var(--pis-blue);
}


/* ========================================
   DESKTOP HOUSEHOLD DETAIL POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .household-detail-card {
        padding: 16px 17px;

        background: #f8fbfd;

        border: 1px solid #dbe7ed;
        border-radius: 13px;

        box-shadow:
            0 3px 10px rgba(24,52,71,0.035);
    }


    .client-portal-page .household-detail-label {
        margin-bottom: 7px;

        color: #1f7bc2;

        font-size: 10px;
        font-weight: 800;

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


    .client-portal-page .household-detail-value {
        color: #183447;

        font-size: 14px;
        font-weight: 650;

        line-height: 1.5;
    }

}

/* ========================================
   PROPERTY ACCESS
======================================== */

.client-portal-page .access-detail-card {
    background: linear-gradient(
        145deg,
        #f8fcfe 0%,
        #eef8fc 100%
    );
}

.client-portal-page .access-detail-item {
    border-top-color: var(--pis-border);
}


/* ========================================
   DESKTOP PROPERTY ACCESS POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .access-detail-card {
        position: relative;
        overflow: hidden;

        background: linear-gradient(
            145deg,
            #f8fcfe 0%,
            #eef8fc 100%
        );

        border: 1px solid #d2e4ee;
        border-radius: 13px;

        box-shadow:
            0 3px 10px rgba(24,52,71,0.04);
    }


    .client-portal-page .detail-collapse-status {
        color: #6b7785;

        font-size: 12px;
        font-weight: 600;
    }


    .client-portal-page .detail-collapse-chevron {
        width: 34px;
        height: 34px;

        background: #ffffff;
        color: #1f7bc2;

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

        font-size: 23px;

        box-shadow:
            0 2px 7px rgba(24,52,71,0.05);
    }


    .client-portal-page
    .detail-collapse-toggle:hover
    .detail-collapse-chevron {
        background: #eaf5fb;
        color: #176aa9;
        border-color: #9fc7dd;
    }


    .client-portal-page .detail-collapse-content {
        border-top-color: #d6e4eb;
    }


    .client-portal-page .access-detail-item span {
        color: #1f7bc2;

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.05em;
    }


    .client-portal-page .access-detail-item strong {
        color: #183447;

        font-size: 14px;
        font-weight: 700;
    }

}

/* ========================================
   HOUSEHOLD / PET EDIT FORMS
======================================== */

.client-portal-page .household-form-panel,
.client-portal-page .pet-form-panel {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border-strong);
    border-radius: 16px;
    box-shadow: inset 0 3px 0 rgba(71,206,230,0.30);
}

/* ========================================
   PROFILE AVATAR
======================================== */

.client-portal-page .client-profile-avatar,
.client-portal-page .client-photo-preview-wrapper {
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    box-shadow: 0 5px 16px rgba(40,144,223,0.18);
}

/* ========================================
   PHOTO UPLOAD BUTTONS
======================================== */

.client-portal-page
.client-photo-upload-button {

    background:
        var(--pis-blue);

    color:
        #ffffff;

    border-radius:
        11px;

    transition:
        background 0.18s ease,
        transform 0.18s ease;

}


.client-portal-page
.pet-photo-upload-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        160px;

    min-height:
        44px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0
        18px;

    background:
        #ffffff;

    color:
        #1f7bc2;

    border:
        1px solid
        #bcd8e8;

    border-radius:
        11px;

    box-shadow:
        0
        3px
        10px
        rgba(
            31,
            123,
            194,
            0.08
        );

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;

}


.client-portal-page
.client-photo-upload-button:hover {

    background:
        var(--pis-blue-dark);

    transform:
        translateY(-1px);

}


.client-portal-page
.pet-photo-upload-button:hover {

    background:
        #f5fbff;

    border-color:
        #8fc7e8;

    transform:
        translateY(-1px);

}

/* ========================================
   PET PROFILE CARDS
======================================== */

.client-portal-page .pet-profile-card {
    border: 1px solid var(--pis-border);
    border-radius: 16px;

    box-shadow:
        0 4px 16px rgba(35,93,125,0.05);
}

.client-portal-page .pet-profile-photo {
    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 2px rgba(40,144,223,0.20);
}


/* ========================================
   DESKTOP PET CARD POLISH
======================================== */

@media (min-width:701px) {

    .client-portal-page .pet-profile-card {
        position: relative;
        overflow: hidden;

        padding: 18px;

        background: linear-gradient(
            145deg,
            #fbfdfe 0%,
            #f7fafc 100%
        );

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

        box-shadow:
            0 4px 14px rgba(24,52,71,0.055);
    }


    .client-portal-page .pet-profile-card::before {
        display: none;
    }


    .client-portal-page .pet-profile-details {
        border-top-color: #dfe9ee;
    }


    .client-portal-page .pet-detail-block {
        background: #ffffff;

        border: 1px solid #dbe7ed;
        border-radius: 11px;

        box-shadow: none;
    }

}

/* ========================================
   BURGER BUTTON
======================================== */

.client-portal-page .client-menu-button {
    background: #fff;
    border: 1px solid var(--pis-border-strong);
    box-shadow: 0 4px 12px rgba(35,93,125,0.05);
}

.client-portal-page .client-menu-button:hover {
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

.client-portal-page .client-menu-button span {
    background: var(--pis-blue);
}

/* ========================================
   APP NAVIGATION DRAWER
======================================== */

.client-portal-page .client-navigation-drawer {
    background: linear-gradient(180deg,#ffffff 0%,#f8fcfe 100%);
    border-right: 1px solid var(--pis-border);
}

/* ========================================
   NAVIGATION HEADER
======================================== */

.client-portal-page .client-navigation-header {
    position: relative;
    min-height: 98px;
    border-bottom: 1px solid var(--pis-border);
}

.client-portal-page .client-navigation-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue),var(--pis-orange));
}

.client-navigation-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.client-navigation-logo {
    display: block;
    width: 125px;
    height: auto;
}

.client-portal-page .client-navigation-brand span {
    color: var(--pis-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ========================================
   NAVIGATION CLOSE
======================================== */

.client-portal-page .client-navigation-close {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
}

.client-portal-page .client-navigation-close:hover {
    color: #fff;
    background: var(--pis-blue);
}

/* ========================================
   NAVIGATION LINKS
======================================== */

.client-portal-page .client-navigation-link {
    color: var(--pis-ink);
}

.client-portal-page .client-navigation-link:hover {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
}

.client-portal-page .client-navigation-link-icon {
    color: var(--pis-blue);
    background: var(--pis-blue-soft);
}

/* ========================================
   NAVIGATION REQUEST SERVICE
======================================== */

.client-portal-page .client-navigation-request {
    width: 100%;
    min-height: 48px;
}

/* ========================================
   NAVIGATION LOGOUT
======================================== */

.client-portal-page .client-navigation-logout {
    color: var(--pis-muted);
    border: 1px solid var(--pis-border);
}

.client-portal-page .client-navigation-logout:hover {
    color: var(--pis-ink);
    background: var(--pis-app-bg-soft);
}

/* ========================================
   CLIENT MESSAGE LAUNCHER
======================================== */

.client-portal-page .client-message-launcher {
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    color: #fff;
    box-shadow: 0 10px 28px rgba(40,144,223,0.30);
}

.client-portal-page .client-message-launcher:hover {
    background: linear-gradient(135deg,var(--pis-blue),var(--pis-blue-dark));
    box-shadow: 0 13px 34px rgba(40,144,223,0.34);
}

/* ========================================
   MESSAGE DRAWER
======================================== */

.client-portal-page .client-message-drawer {
    border: 1px solid var(--pis-border);
    box-shadow: 0 24px 60px rgba(28,71,94,0.22);
}

/* ========================================
   MESSAGE HEADER
======================================== */

.client-portal-page .client-message-header {
    background: linear-gradient(135deg,#f8fdff,#edf8fd);
    border-bottom: 1px solid var(--pis-border);
}

.client-portal-page .client-message-header h3 {
    color: var(--pis-ink);
}

.client-portal-page .client-message-header p {
    color: var(--pis-blue);
}

/* ========================================
   MESSAGE LIST
======================================== */

.client-portal-page .client-message-list {
    background: var(--pis-app-bg-soft);
}

/* ========================================
   CLIENT MESSAGE BUBBLES
======================================== */

.client-portal-page .client-message-row.is-client .client-message-bubble {
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    color: #fff;
}

.client-portal-page .client-message-row.is-admin .client-message-bubble {
    background: #fff;
    color: var(--pis-ink);
    border: 1px solid var(--pis-border);
}

/* ========================================
   MESSAGE INPUT
======================================== */

.client-portal-page .client-message-form textarea {
    border-color: var(--pis-border-strong);
}

.client-portal-page .client-message-form textarea:focus {
    border-color: var(--pis-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.10);
}

/* ========================================
   MESSAGE SEND BUTTON
======================================== */

.client-portal-page .client-message-send {
    background: var(--pis-blue);
    color: #ffffff;
}

.client-portal-page .client-message-send:hover {
    background: var(--pis-blue-dark);
}

/* ========================================
   MESSAGE COMPOSER — MOBILE POLISH
======================================== */

@media (max-width:700px) {

    .client-portal-page
    .client-message-form {
        gap:
            8px;

        padding:
            10px
            10px
            max(
                14px,
                env(safe-area-inset-bottom)
            );

        background:
            #ffffff;

        border-top:
            1px solid
            #dce7ed;
    }


    .client-portal-page
    .client-message-form textarea {
        min-height:
            42px;

        max-height:
            110px;

        padding:
            9px
            12px;

        background:
            #f8fbfd;

        color:
            #183447;

        border:
            1px solid
            #c8dce8;

        border-radius:
            10px;

        outline:
            none;

        -webkit-appearance:
            none;

        appearance:
            none;

        font-size:
            16px;

        line-height:
            1.4;
    }


    .client-portal-page
    .client-message-form textarea:focus {
        background:
            #ffffff;

        border-color:
            #78bde8;

        box-shadow:
            0 0 0 2px
            rgba(
                31,
                154,
                235,
                0.08
            );

        outline:
            none;
    }


   .client-portal-page
   .client-message-send {
       flex:
           0 0 42px;
   
       width:
           42px;
   
       height:
           42px;
   
       background:
           linear-gradient(
               135deg,
               #47cee6 0%,
               #2890df 100%
           );
   
       color:
           #ffffff;
   
       border-radius:
           10px;
   
       box-shadow:
           0 4px 10px
           rgba(
               40,
               144,
               223,
               0.20
           );
   
       transition:
           transform 0.18s ease,
           box-shadow 0.18s ease;
   }
   
   
   .client-portal-page
   .client-message-send:hover {
       background:
           linear-gradient(
               135deg,
               #2890df 0%,
               #1f7bc2 100%
           );
   
       box-shadow:
           0 5px 12px
           rgba(
               40,
               144,
               223,
               0.26
           );
   }


    .client-portal-page
    .client-message-send:active {
        transform:
            scale(0.96);
    }

}


/* ========================================
   KEEP FUNCTIONAL STATUS COLORS
======================================== */
/* ========================================
   KEEP FUNCTIONAL STATUS COLORS
======================================== */

.client-portal-page .upcoming-service-card-in-progress {
    border-color: #d9b65f;
}

.client-portal-page .upcoming-service-card-completed {
    border-color: #a9d7b7;
}

/* ========================================
   MOBILE PAWS IN STRIDE APP HEADER
======================================== */

@media (max-width:700px) {
    .client-portal-page .client-dashboard-container {
        width: 94%;
        margin: 0 auto 25px;
    }

    .client-portal-page .client-dashboard-header {
        position: sticky;
        top: 0;
        z-index: 900;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0 -3% 18px;
        padding: max(10px,env(safe-area-inset-top)) 3% 10px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 16px 16px;
        background: rgba(255,255,255,0.94);
        box-shadow: 0 5px 18px rgba(35,93,125,0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .client-portal-page .client-dashboard-header::before {
        left: 0;
        right: 0;
    }

    .client-dashboard-brand {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
    }

    .client-dashboard-logo {
        width: 105px;
    }

    .client-dashboard-welcome {
        padding-left: 0;
        border-left: 0;
    }

    .client-portal-label {
        display: none;
    }

    .client-portal-page .client-dashboard-header h2 {
        overflow: hidden;
        max-width: 130px;
        color: var(--pis-muted);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .client-portal-page .client-dashboard-header-actions {
        flex: 0 0 auto;
        gap: 7px;
    }

    .client-portal-page .client-header-request-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 40px;
        padding: 9px 12px;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .client-portal-page .client-menu-button {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 11px;
    }

    .client-portal-page section {
        border-radius: 16px;
    }

    .client-portal-page .client-message-launcher {
        box-shadow: 0 8px 24px rgba(40,144,223,0.30);
    }

    .client-navigation-logo {
        width: 115px;
    }
}

/* ========================================
   EXTRA SMALL MOBILE HEADER
======================================== */

@media (max-width:390px) {
    .client-dashboard-logo {
        width: 94px;
    }

    .client-portal-page .client-header-request-button {
        padding: 9px 10px;
        font-size: 10px;
    }

    .client-portal-page .client-dashboard-header h2 {
        max-width: 110px;
    }
}

/* ========================================
   PAWS IN STRIDE LOGIN THEME
======================================== */

/* ========================================
   LOGIN PAGE VARIABLES
======================================== */

.portal-login-page {
    --pis-blue: #2890df;
    --pis-blue-dark: #1f7bc2;
    --pis-cyan: #47cee6;
    --pis-orange: #f5ab40;
    --pis-orange-hover: #ef602c;
    --pis-ink: #202a33;
    --pis-text: #333333;
    --pis-muted: #6b7785;
    --pis-border: #dce8ef;
    --pis-border-strong: #c8dce8;
    --pis-blue-soft: #edf8fd;
}

/* ========================================
   LOGIN PAGE BODY
======================================== */

html:has(body.portal-login-page) {
    min-height: 100%;
    background: #f4f9fc;
}

body.portal-login-page {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at top right,
            rgba(245,171,64,0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fbfcfd 0%,
            #f4f8fa 100%
        );

    color: var(--pis-ink);
    font-family: "Roboto",Arial,Helvetica,sans-serif;
}

/* ========================================
   LOGIN PAGE SHELL
======================================== */

.login-page-shell {
    display: grid;
    grid-template-columns: minmax(420px,0.95fr) minmax(500px,1.05fr);
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

/* ========================================
   LEFT BRAND PANEL
======================================== */

.login-brand-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 70px;
    background: linear-gradient(
        145deg,
        #f5ab40 0%,
        #ef602c 100%
    );
}

/* ========================================
   BRAND PANEL DECORATION
======================================== */

.login-brand-panel::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -140px;
    left: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

/* ========================================
   BRAND CONTENT
======================================== */

.login-brand-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    color: #fff;
}

.login-brand-logo {
    display: block;
    width: 220px;
    height: auto;
    margin-bottom: 32px;

    transform-origin: center;
    animation:
        login-logo-settle
        0.65s
        cubic-bezier(0.22,1,0.36,1)
        both;
}

.login-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: rgba(255,255,255,0.88);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-brand-eyebrow::before {
    content: "";

    width: 24px;
    height: 2px;

    background: rgba(255,255,255,0.72);
    border-radius: 2px;
}

.login-brand-content h1 {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(38px,4vw,54px);
    font-weight: 800;
    line-height: 1.05;
}

.login-brand-content p {
    max-width: 460px;
    margin: 0 0 28px;
    color: rgba(255,255,255,0.90);
    font-size: 17px;
    line-height: 1.65;
}

/* ========================================
   TRUST POINTS
======================================== */

.login-brand-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-brand-trust span {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: rgba(255,255,255,0.94);

    font-size: 13px;
    font-weight: 700;
}

.login-brand-trust span::before {
    content: "✓";

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

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    background: rgba(255,255,255,0.17);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 7px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;
}

/* ========================================
   LOGIN FORM PANEL
======================================== */

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

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

.portal-login-page .login-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 38px 36px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d6e4eb;
    border-radius: 18px;
    box-shadow: 0 7px 18px rgba(24,52,71,0.07);
}

/* ========================================
   LOGIN CARD BRAND ACCENT
======================================== */

.portal-login-page .login-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );
    pointer-events: none;
}

/* ========================================
   MOBILE LOGO
======================================== */

.login-mobile-logo-wrapper {
    display: none;
}

.login-mobile-logo {
    width: 150px;
    height: auto;
    transform-origin: center;
    animation:
        login-logo-settle
        0.65s
        cubic-bezier(0.22,1,0.36,1)
        both;
}

/* ========================================
   MOBILE LOGO ENTRANCE
======================================== */

@keyframes login-logo-settle {

    0% {
        opacity: 0;
        transform:
            translateY(8px)
            scale(0.965);
    }

    72% {
        opacity: 1;
        transform:
            translateY(-1px)
            scale(1.01);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ========================================
   LOGIN FORM HEADING
======================================== */

.login-form-heading {
    margin-bottom: 28px;
}

.login-form-heading>span {
    display: block;
    margin-bottom: 6px;
    color: #1f7bc2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form-heading h2 {
    margin: 0 0 7px;
    color: var(--pis-ink);
    font-size: 27px;
    font-weight: 800;
}

.login-form-heading p {
    margin: 0;
    color: var(--pis-muted);
    font-size: 14px;
}

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

.portal-login-page #login-form {
    margin: 0;
}

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

.login-field {
    margin-bottom: 20px;
}

.portal-login-page .login-field label {
    display: block;
    margin-bottom: 7px;
    color: #183447;
    font-size: 13px;
    font-weight: 800;
}

.portal-login-page .login-field input {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 13px 14px;

    background: #f8fbfd;
    color: #183447;

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

    font-size: 16px;

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

.portal-login-page .login-field input::placeholder {
    color: #9aa8b2;
}

.portal-login-page .login-field input:hover {
    border-color: #bfd4df;
}

.portal-login-page .login-field input:focus {
    outline: none;

    background: #ffffff;
    border-color: #78bde8;

    box-shadow:
        0 0 0 3px rgba(31,154,235,0.09);
}

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

.portal-login-page .login-password-wrap {
    position: relative;
    width: 100%;
}

.portal-login-page .login-password-wrap input {
    width: 100%;
    padding-right: 72px;
}

.portal-login-page .login-password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;

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

    margin: 0;
    padding: 6px 9px;

    transform: translateY(-50%);

    background: transparent;
    color: #667784;

    border: 0;
    border-radius: 7px;
    box-shadow: none;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
    z-index: 2;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.portal-login-page .login-password-toggle:hover,
.portal-login-page .login-password-toggle:focus {
    background: rgba(40,144,223,0.08);
    color: #1f7bc2;
    box-shadow: none;
}

.portal-login-page .login-password-toggle:focus-visible {
    outline: 2px solid rgba(40,144,223,0.24);
    outline-offset: 1px;
}

/* ========================================
   FORGOT PASSWORD LINK
======================================== */

.login-forgot-password-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.login-forgot-password-link {
    color: #1f7bc2;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

.login-forgot-password-link:hover {
    color: #2890df;
    text-decoration: none;
}

.login-forgot-password-link:active {
    opacity: 0.75;
}

.login-forgot-password-link:focus-visible {
    outline: 3px solid rgba(245,171,64,0.18);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ========================================
   SIGN IN BUTTON
======================================== */

.login-submit-button {
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    padding: 13px 18px;
    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(239,96,44,0.20);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.login-submit-button:hover {
    background: linear-gradient(
        90deg,
        #f5ab40 0%,
        #ef602c 100%
    );
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(239,96,44,0.26);
}

.login-submit-button:active {
    transform: scale(0.985);
}

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

.portal-login-page #login-message {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

/* ========================================
   PASSWORD RECOVERY MESSAGE
======================================== */

.portal-login-page #forgot-password-message,
.portal-login-page #reset-password-message {
    margin: 16px 0 0;
    color: var(--pis-muted);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* ========================================
   PASSWORD RESET SUCCESS
======================================== */

.reset-password-success {
    text-align: center;
    padding: 10px 0 4px;
}

.reset-password-success[hidden] {
    display: none;
}

.reset-password-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(34,197,94,0.12);
    color: #22a447;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.reset-password-success h2 {
    margin: 0 0 10px;
    color: var(--pis-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.reset-password-success p {
    max-width: 380px;
    margin: 0 auto 24px;
    color: var(--pis-muted);
    font-size: 14px;
    line-height: 1.6;
}

.reset-password-success-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
}

.reset-password-success-button:hover {
    text-decoration: none;
}

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

.login-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    padding: 18px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #e7eef2;
    border-radius: 0;
    color: #8a98a3;
    font-size: 11px;
}

.login-footer-note span:first-child {
    color: #526875;
    font-weight: 700;
}

.login-footer-note span:last-child::before {
    content: "•";
    margin-right: 8px;
    color: #f5ab40;
}

/* ========================================
   LOGIN FOCUS ACCESSIBILITY
======================================== */

.portal-login-page button:focus-visible,
.portal-login-page input:focus-visible {
    outline: 3px solid rgba(245,171,64,0.22);
    outline-offset: 2px;
}

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

@media (max-width:900px) {
    .login-page-shell {
        grid-template-columns: minmax(300px,0.8fr) minmax(400px,1fr);
    }

    .login-brand-panel {
        padding: 45px 40px;
    }

    .login-brand-logo {
        width: 180px;
    }

    .login-brand-content h1 {
        font-size: 38px;
    }

    .login-brand-content p {
        font-size: 15px;
    }
}

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

@media (max-width:700px) {
    /*
     * * Lock the login page to the visible mobile
     * * viewport so it behaves like an app screen
     * * instead of a scrollable webpage.
     */

    html:has(body.portal-login-page) {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

   body.portal-login-page {
       width: 100%;
   
       height: 100vh;
       height: 100svh;
       height: 100dvh;
   
       min-height: 0;
   
       overflow: hidden;
   
       overscroll-behavior: none;
   
       background:
           radial-gradient(
               circle at 14% 8%,
               rgba(245,171,64,0.20) 0%,
               rgba(245,171,64,0.11) 24%,
               transparent 52%
           ),
           radial-gradient(
               circle at 92% 92%,
               rgba(239,96,44,0.09) 0%,
               transparent 42%
           ),
           linear-gradient(
               180deg,
               #fffaf3 0%,
               #fffdf9 46%,
               #f8fbfd 100%
           );
   }

    .login-page-shell {
        display: block;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
       display: flex;
       align-items: flex-start;
       justify-content: center;
   
       width: 100%;
   
       height: 100vh;
       height: 100svh;
       height: 100dvh;
   
       min-height: 0;
   
       padding:
           max(22px,env(safe-area-inset-top))
           18px
           max(18px,env(safe-area-inset-bottom));
   
       overflow: hidden;

      background: transparent;
   }

    .portal-login-page .login-container {
        width: 100%;
        max-width: 430px;
        margin: 0;
        padding: 30px 24px;
        border-radius: 20px;
    }

    .login-mobile-logo-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: 22px;
    }

    .login-mobile-logo {
        width: 165px;
    }

    .login-form-heading {
        text-align: center;
    }

    .login-form-heading h2 {
        font-size: 24px;
    }

    .login-form-heading p {
        font-size: 13px;
    }
}

/* ========================================
   EXTRA SMALL LOGIN MOBILE
======================================== */

@media (max-width:390px) {
    .login-form-panel {
        padding: max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));
    }

    .portal-login-page .login-container {
        padding: 24px 20px;
    }

    .login-mobile-logo-wrapper {
        margin-bottom: 16px;
    }

    .login-mobile-logo {
        width: 145px;
    }

    .login-form-heading {
        margin-bottom: 22px;
    }

    .login-footer-note {
        margin-top: 22px;
        padding-top: 16px;
    }
}

/* ========================================
   PAWS IN STRIDE ADMIN APP THEME
======================================== */

/* ========================================
   ADMIN BRAND VARIABLES
======================================== */

.admin-page {
    --pis-blue: #2890df;
    --pis-blue-dark: #1f7bc2;
    --pis-cyan: #47cee6;
    --pis-orange: #f5ab40;
    --pis-orange-hover: #ef602c;
    --pis-ink: #202a33;
    --pis-text: #333333;
    --pis-muted: #6b7785;
    --pis-app-bg: #f3f8fb;
    --pis-app-bg-soft: #f8fbfd;
    --pis-card: #ffffff;
    --pis-border: #dce8ef;
    --pis-border-strong: #c8dce8;
    --pis-blue-soft: #eaf6fc;
    --pis-orange-soft: #fff7ea;
    --pis-shadow: 0 8px 28px rgba(35,93,125,0.08);
}

/* ========================================
   ADMIN APP PAGE
======================================== */

body.admin-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left,rgba(71,206,230,0.10),transparent 34%),linear-gradient(180deg,#f8fcfe 0%,var(--pis-app-bg) 45%,#eef6fa 100%);
    color: var(--pis-ink);
    font-family: "Roboto",Arial,Helvetica,sans-serif;
}

/* ========================================
   ADMIN DASHBOARD HEADER
======================================== */

.admin-page .admin-dashboard-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(200,220,232,0.82);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(40,144,223,0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ========================================
   ADMIN HEADER BRAND ACCENT
======================================== */

.admin-page .admin-dashboard-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue));
    border-radius: 0 0 999px 999px;
}

/* ========================================
   ADMIN BRAND
======================================== */

.admin-dashboard-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 18px;
}

.admin-dashboard-logo {
    display: block;
    width: 135px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.admin-dashboard-title {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--pis-border);
}

.admin-portal-label {
    display: block;
    margin-bottom: 4px;
    color: var(--pis-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.admin-page .admin-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-page .admin-title-row h2 {
    margin: 0;
    color: var(--pis-ink);
    font-size: 21px;
    font-weight: 800;
}

/* ========================================
   ADMIN ROLE BADGE
======================================== */

.admin-page .admin-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border: 1px solid rgba(40,144,223,0.18);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ========================================
   ADMIN LOGOUT
======================================== */

.admin-page .admin-header-logout {
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 17px;
    color: var(--pis-muted);
    background: #fff;
    border: 1px solid var(--pis-border-strong);
    border-radius: 999px;
}

.admin-page .admin-header-logout:hover {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

/* ========================================
   ADMIN LOADING
======================================== */

.admin-page #admin-loading {
    padding: 14px 18px;
    color: var(--pis-muted);
    font-size: 14px;
    font-weight: 500;
}

/* ========================================
   ADMIN MAIN SECTIONS
======================================== */

.admin-page .admin-profile-section,
.admin-page .admin-calendar-section {
    background: var(--pis-card);
    border: 1px solid var(--pis-border);
    border-radius: 18px;
    box-shadow: var(--pis-shadow);
}

/* ========================================
   ADMIN SECTION HEADINGS
======================================== */

.admin-page .admin-profile-section h3,
.admin-page .admin-calendar-section h3,
.admin-page .admin-calendar-section h4 {
    color: var(--pis-ink);
}

.admin-page .household-section-help,
.admin-page .admin-calendar-section-heading p {
    color: var(--pis-muted);
}

/* ========================================
   ADMIN PRIMARY BUTTONS
======================================== */

.admin-page .primary-button {
    color: #fff;
    background: linear-gradient(135deg,var(--pis-blue),var(--pis-blue-dark));
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 15px rgba(40,144,223,0.20);
    font-weight: 700;
    transition: transform 0.18s ease,box-shadow 0.18s ease,background 0.18s ease;
}

.admin-page .primary-button:hover {
    opacity: 1;
    background: var(--pis-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(40,144,223,0.25);
}

/* ========================================
   ADMIN SECONDARY BUTTONS
======================================== */

.admin-page .secondary-button {
    color: var(--pis-blue-dark);
    background: #fff;
    border: 1px solid var(--pis-border-strong);
    border-radius: 999px;
}

.admin-page .secondary-button:hover {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

/* ========================================
   ADMIN PROFILE AVATAR
======================================== */

.admin-page .client-profile-avatar,
.admin-page .client-photo-preview-wrapper {
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    box-shadow: 0 5px 16px rgba(40,144,223,0.18);
}

/* ========================================
   ADMIN PHOTO UPLOAD
======================================== */

.admin-page .client-photo-upload-button {
    color: #fff;
    background: var(--pis-blue);
    border-radius: 999px;
}

.admin-page .client-photo-upload-button:hover {
    background: var(--pis-blue-dark);
}

/* ========================================
   ADMIN PROFILE DETAIL CARDS
======================================== */

.admin-page .household-detail-card {
    background: var(--pis-app-bg-soft);
    border-color: var(--pis-border);
}

.admin-page .household-detail-label {
    color: var(--pis-blue);
}

/* ========================================
   ADMIN PROFILE FORM
======================================== */

.admin-page .household-form-panel {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border-strong);
    border-radius: 16px;
    box-shadow: inset 0 3px 0 rgba(71,206,230,0.30);
}

/* ========================================
   ADMIN FORM INPUTS
======================================== */

.admin-page .household-form-field input,
.admin-page .household-form-field select,
.admin-page .household-form-field textarea {
    color: var(--pis-ink);
    background: #fff;
    border: 1px solid var(--pis-border-strong);
    border-radius: 11px;
}

.admin-page .household-form-field input:focus,
.admin-page .household-form-field select:focus,
.admin-page .household-form-field textarea:focus {
    outline: none;
    border-color: var(--pis-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.11);
}

/* ========================================
   ADMIN SERVICE CALENDAR
======================================== */

.admin-page .admin-service-calendar {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border);
    border-radius: 16px;
}

/* ========================================
   ADMIN CALENDAR SUMMARY
======================================== */

.admin-page .admin-calendar-summary {
    background: var(--pis-blue-soft);
    border: 1px solid rgba(40,144,223,0.14);
}

.admin-page .admin-calendar-summary strong {
    color: var(--pis-blue);
}

/* ========================================
   ADMIN CALENDAR NAVIGATION
======================================== */

.admin-page .calendar-nav-button {
    color: var(--pis-blue);
    background: #fff;
    border: 1px solid var(--pis-border);
}

.admin-page .calendar-nav-button:hover {
    color: #fff;
    background: var(--pis-blue);
    border-color: var(--pis-blue);
}

/* ========================================
   ADMIN CALENDAR DAYS
======================================== */

.admin-page .upcoming-calendar-day {
    color: var(--pis-ink);
    border-color: var(--pis-border);
}

.admin-page .upcoming-calendar-day:hover {
    color: var(--pis-blue);
    background: var(--pis-blue-soft);
    border-color: var(--pis-blue);
}

.admin-page .upcoming-calendar-selected {
    color: #fff;
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    border-color: var(--pis-blue);
    box-shadow: 0 4px 12px rgba(40,144,223,0.20);
}

.admin-page .upcoming-calendar-today:not(.upcoming-calendar-selected) {
    border: 2px solid var(--pis-orange);
}

.admin-page .upcoming-service-count {
    color: #fff;
    background: var(--pis-orange);
}

/* ========================================
   COMPLETED VISIT COUNT
======================================== */

.admin-page .upcoming-service-count-completed {
    color: #fff;
    background: #22a447;
}

/* ========================================
   SELECTED ADMIN DAY
======================================== */

.admin-page .admin-selected-day {
    background: var(--pis-app-bg-soft);
    border: 1px solid var(--pis-border);
    border-radius: 16px;
}

.admin-page .admin-selected-day-eyebrow {
    color: var(--pis-blue);
}

.admin-page .admin-selected-count {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border: 1px solid rgba(40,144,223,0.14);
}

/* ========================================
   ADMIN SERVICE CARDS
======================================== */

.admin-page .admin-service-card {
    border-color: var(--pis-border);
    box-shadow: 0 4px 14px rgba(35,93,125,0.04);
}

/* ========================================
   ADMIN PET CHIPS
======================================== */

.admin-page .admin-pet-chip,
.admin-page .service-pet-chip {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
}

/* ========================================
   ADMIN LINKS
======================================== */

.admin-page a {
    color: var(--pis-blue);
}

.admin-page a:hover {
    color: var(--pis-blue-dark);
}

/* ========================================
   ADMIN MESSAGES LAUNCHER
======================================== */

.admin-page .admin-message-launcher {
    color: #fff;
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    box-shadow: 0 10px 28px rgba(40,144,223,0.30);
}

.admin-page .admin-message-launcher:hover {
    background: linear-gradient(135deg,var(--pis-blue),var(--pis-blue-dark));
    box-shadow: 0 13px 34px rgba(40,144,223,0.34);
}

/* ========================================
   ADMIN MESSAGE DRAWER
======================================== */

.admin-page .admin-message-drawer {
    border: 1px solid var(--pis-border);
    box-shadow: 0 24px 60px rgba(28,71,94,0.22);
}

/* ========================================
   ADMIN MESSAGE HEADER
======================================== */

.admin-page .admin-message-header {
    background: linear-gradient(135deg,#f8fdff,#edf8fd);
    border-bottom: 1px solid var(--pis-border);
}

.admin-page .admin-message-header h3 {
    color: var(--pis-ink);
}

.admin-page .admin-message-header p {
    color: var(--pis-blue);
}

/* ========================================
   ADMIN MESSAGE CLOSE
======================================== */

.admin-page .admin-message-close {
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
}

.admin-page .admin-message-close:hover {
    color: #fff;
    background: var(--pis-blue);
}

/* ========================================
   ADMIN MESSAGE INBOX
======================================== */

.admin-page .admin-message-inbox {
    background: var(--pis-app-bg-soft);
    border-right: 1px solid var(--pis-border);
}

.admin-page .admin-message-inbox-heading {
    border-bottom: 1px solid var(--pis-border);
}

/* ========================================
   ADMIN CONVERSATION ITEMS
======================================== */

.admin-page .admin-conversation-item:hover {
    background: var(--pis-blue-soft);
}

.admin-page .admin-conversation-item.is-active {
    background: var(--pis-blue-soft);
    box-shadow: inset 3px 0 0 var(--pis-blue);
}

/* ========================================
   ADMIN MESSAGE CONVERSATION
======================================== */

.admin-page .admin-message-conversation {
    background: #fff;
}

.admin-page .admin-message-conversation-header {
    background: #fff;
    border-bottom: 1px solid var(--pis-border);
}

/* ========================================
   ADMIN MESSAGE LIST
======================================== */

.admin-page .admin-message-list {
    background: var(--pis-app-bg-soft);
}

/* ========================================
   ADMIN MESSAGE BUBBLES
======================================== */

.admin-page .admin-message-row.is-admin .admin-message-bubble {
    color: #fff;
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
}

.admin-page .admin-message-row.is-client .admin-message-bubble {
    color: var(--pis-ink);
    background: #fff;
    border: 1px solid var(--pis-border);
}

/* ========================================
   ADMIN MESSAGE INPUT
======================================== */

.admin-page .admin-message-form textarea {
    border-color: var(--pis-border-strong);
}

.admin-page .admin-message-form textarea:focus {
    border-color: var(--pis-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.10);
}

/* ========================================
   ADMIN MESSAGE SEND
======================================== */

.admin-page .admin-message-send {
    color: #fff;
    background: var(--pis-blue);
}

.admin-page .admin-message-send:hover {
    background: var(--pis-blue-dark);
}

/* ========================================
   ADMIN FOCUS STATES
======================================== */

.admin-page button:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible,
.admin-page textarea:focus-visible,
.admin-page a:focus-visible {
    outline: 3px solid rgba(40,144,223,0.18);
    outline-offset: 2px;
}

/* ========================================
   KEEP ADMIN VISIT STATUS COLORS
======================================== */

.admin-page .admin-service-card-in-progress {
    border-color: #d9b65f;
}

.admin-page .admin-service-card-completed {
    border-color: #a9d7b7;
}

/* ========================================
   MOBILE ADMIN APP
======================================== */

@media (max-width:700px) {
    .admin-page .admin-dashboard-container {
        width: 94%;
        margin: 0 auto 25px;
    }

    .admin-page .admin-dashboard-header {
        position: sticky;
        top: 0;
        z-index: 900;
        gap: 10px;
        margin: 0 -3% 18px;
        padding: max(10px,env(safe-area-inset-top)) 3% 10px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 16px 16px;
        background: rgba(255,255,255,0.94);
        box-shadow: 0 5px 18px rgba(35,93,125,0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .admin-page .admin-dashboard-header::before {
        left: 0;
        right: 0;
    }

    .admin-dashboard-brand {
        flex: 1 1 auto;
        gap: 10px;
    }

    .admin-dashboard-logo {
        width: 88px;
    }

    .admin-dashboard-title {
        padding-left: 10px;
    }

    .admin-portal-label {
        font-size: 8px;
    }

    .admin-page .admin-title-row {
        gap: 6px;
    }

    .admin-page .admin-title-row h2 {
        font-size: 14px;
    }

    .admin-page .admin-role-badge {
        padding: 4px 6px;
        font-size: 7px;
    }

    .admin-page .admin-header-logout {
        min-height: 38px;
        padding: 8px 11px;
        font-size: 11px;
    }

    .admin-page .admin-profile-section,
    .admin-page .admin-calendar-section {
        border-radius: 16px;
    }
}

/* ========================================
   EXTRA SMALL ADMIN MOBILE
======================================== */

@media (max-width:390px) {
    .admin-dashboard-logo {
        width: 78px;
    }

    .admin-dashboard-title {
        padding-left: 8px;
    }

    .admin-page .admin-title-row h2 {
        font-size: 12px;
    }

    .admin-page .admin-header-logout {
        padding: 8px 9px;
        font-size: 10px;
    }
}

/* ========================================
   PAWS IN STRIDE SIGNUP FLOW
======================================== */

.portal-signup-page {
    --signup-blue: #2890df;
    --signup-cyan: #47cee6;
    --signup-orange: #f5ab40;
    --signup-orange-hover: #ef602c;
    --signup-text: #182433;
    --signup-muted: #6c7a89;
    --signup-border: #dce8f0;
    --signup-background: #f4f9fc;
    --signup-card: #ffffff;
    --signup-success: #35a76f;
    margin: 0;
    min-height: 100vh;
    font-family: "Roboto",sans-serif;
    color: var(--signup-text);
    background: radial-gradient(circle at top left,rgba(71,206,230,0.13),transparent 34rem),var(--signup-background);
}

/* ========================================
   SIGNUP SHELL
======================================== */

.portal-signup-page .signup-shell {
    width:
        100%;

    min-height:
        100vh;

    margin:
        0;

    padding:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(390px, 48vw)
        minmax(0, 1fr);

    align-items:
        stretch;
}


/* ========================================
   DESKTOP SIGNUP BRAND PANEL
======================================== */

.portal-signup-page .signup-desktop-brand-panel {
    position:
        fixed;

    top:
        0;

    left:
        0;

    bottom:
        0;

    width:
        48vw;

    min-width:
        390px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        56px;

    background:
        radial-gradient(
            circle at 8% 7%,
            rgba(255,255,255,0.15) 0,
            rgba(255,255,255,0.15) 115px,
            transparent 116px
        ),
        radial-gradient(
            circle at 94% 92%,
            rgba(255,255,255,0.10) 0,
            rgba(255,255,255,0.10) 145px,
            transparent 146px
        ),
        linear-gradient(
            145deg,
            #47cee6 0%,
            #2890df 55%,
            #1f7bc2 100%
        );

    z-index:
        2;
}


/* ========================================
   DESKTOP BRAND CONTENT
======================================== */

.portal-signup-page .signup-desktop-brand-content {
    width:
        100%;

    max-width:
        430px;

    color:
        #ffffff;
}


.portal-signup-page .signup-desktop-brand-logo {
    display:
        block;

    width:
        190px;

    height:
        auto;

    margin:
        0 0 38px;
}


/* ========================================
   DESKTOP BRAND EYEBROW
======================================== */

.portal-signup-page .signup-desktop-brand-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

    color:
        rgba(255,255,255,0.90);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.portal-signup-page .signup-desktop-brand-eyebrow span {
    width:
        24px;

    height:
        3px;

    background:
        #f5ab40;

    border-radius:
        999px;
}


/* ========================================
   DESKTOP BRAND HEADING
======================================== */

.portal-signup-page .signup-desktop-brand-content h1 {
    max-width:
        360px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.3rem,
            3vw,
            3.5rem
        );

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -0.045em;
}


/* ========================================
   DESKTOP BRAND COPY
======================================== */

.portal-signup-page .signup-desktop-brand-copy {
    max-width:
        390px;

    margin:
        20px 0 0;

    color:
        rgba(255,255,255,0.90);

    font-size:
        1rem;

    line-height:
        1.65;
}


/* ========================================
   DESKTOP BRAND BENEFITS
======================================== */

.portal-signup-page .signup-desktop-brand-benefits {
    display:
        grid;

    gap:
        12px;

    margin-top:
        34px;
}


.portal-signup-page .signup-desktop-brand-benefits > div {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #ffffff;
}


.portal-signup-page .signup-desktop-brand-benefits span {
    display:
        inline-grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        29px;

    height:
        29px;

    background:
        rgba(255,255,255,0.15);

    border:
        1px solid rgba(255,255,255,0.26);

    border-radius:
        9px;

    font-size:
        0.8rem;

    font-weight:
        900;
}


.portal-signup-page .signup-desktop-brand-benefits strong {
    font-size:
        0.9rem;

    font-weight:
        700;
}


/* ========================================
   SIGNUP FORM COLUMN
======================================== */

.portal-signup-page .signup-form-column {
    grid-column:
        2;

    min-width:
        0;

    width:
        100%;

    min-height:
        100vh;

    padding:
        42px 46px 54px;

    overflow:
        visible;
}


/* ========================================
   SIGNUP FORM CONTENT WIDTH
======================================== */

.portal-signup-page .signup-form-column > .signup-card,
.portal-signup-page .signup-form-column > .signup-footer {
    width:
        min(
            100%,
            840px
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ========================================
   SIGNUP BRANDING
======================================== */

.portal-signup-page .signup-branding {
    display:
        none;

    text-align:
        center;

    margin-bottom:
        18px;
}


.portal-signup-page .signup-logo-link {
    display:
        inline-block;

    text-decoration:
        none;
}


.portal-signup-page .signup-logo {
    display:
        block;

    width:
        min(
            165px,
            42vw
        );

    height:
        auto;

    margin:
        0 auto;
}


.portal-signup-page .signup-branding-subtitle {
    margin:
        3px 0 0;

    color:
        var(--signup-blue);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


/* ========================================
   SIGNUP DESKTOP / TABLET BREAKPOINT
======================================== */

@media (max-width:980px) {

    .portal-signup-page .signup-shell {
        width:
            min(
                100% - 32px,
                820px
            );

        min-height:
            auto;

        margin:
            0 auto;

        padding:
            36px 0 48px;

        display:
            block;
    }


    .portal-signup-page
    .signup-desktop-brand-panel {
        display:
            none;

        position:
            static;

        width:
            auto;

        min-width:
            0;
    }


    .portal-signup-page
    .signup-form-column {
        min-height:
            0;

        padding:
            0;
    }


    .portal-signup-page
    .signup-branding {
        display:
            block;
    }

}

/* ========================================
   SIGNUP CARD
======================================== */

.portal-signup-page .signup-card {
    background: var(--signup-card);
    border: 1px solid rgba(40,144,223,0.12);
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(38,81,111,0.09),0 4px 14px rgba(38,81,111,0.05);
    overflow: hidden;
}

/* ========================================
   SIGNUP PROGRESS
======================================== */

.portal-signup-page .signup-progress {
    padding: 24px 30px 0;
}

.portal-signup-page .signup-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
    font-size: 0.82rem;
    font-weight: 700;
}

.portal-signup-page #signup-step-count {
    color: var(--signup-blue);
}

.portal-signup-page #signup-step-label {
    color: var(--signup-muted);
}

.portal-signup-page .signup-progress-track {
    width: 100%;
    height: 7px;
    overflow: hidden;
    background: #eaf1f5;
    border-radius: 999px;
}

.portal-signup-page .signup-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--signup-cyan),var(--signup-blue));
    transition: width 0.3s ease;
}

/* ========================================
   SIGNUP STEPS
======================================== */

.portal-signup-page .signup-step {
    padding: 34px 30px 32px;
}

.portal-signup-page .signup-step[hidden] {
    display: none !important;
}

.portal-signup-page .signup-step-heading {
    margin-bottom: 30px;
}

.portal-signup-page .signup-eyebrow {
    margin: 0 0 8px;
    color: var(--signup-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portal-signup-page .signup-step-heading h1,
.portal-signup-page .signup-success h1 {
    margin: 0;
    color: var(--signup-text);
    font-size: clamp(1.8rem,4vw,2.35rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.portal-signup-page .signup-step-heading>p:last-child {
    max-width: 610px;
    margin: 10px 0 0;
    color: var(--signup-muted);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* ========================================
   SIGNUP VALIDATION STATES
======================================== */

.portal-signup-page .signup-field input.signup-field-error,
.portal-signup-page .signup-field select.signup-field-error {
    border-color: #d94f4f !important;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(217,79,79,0.10) !important;
}

.portal-signup-page .signup-field input.signup-field-error:focus,
.portal-signup-page .signup-field select.signup-field-error:focus {
    border-color: #d94f4f !important;
    box-shadow: 0 0 0 3px rgba(217,79,79,0.16) !important;
}

/* ========================================
   ERROR / STATUS MESSAGES
======================================== */

.portal-signup-page .signup-message {
    margin: 24px 30px 0;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.portal-signup-page .signup-message[hidden] {
    display: none !important;
}

.portal-signup-page .signup-message-error {
    color: #a23535;
    background: #fff1f1;
    border: 1px solid #f0c8c8;
}

/* ========================================
   CLIENT TYPE
======================================== */

.portal-signup-page .signup-field-group {
    margin-bottom: 30px;
}

.portal-signup-page .signup-field-heading {
    margin-bottom: 13px;
}

.portal-signup-page .signup-field-heading label {
    display: block;
    color: var(--signup-text);
    font-size: 0.93rem;
    font-weight: 700;
}

.portal-signup-page .signup-field-heading label span,
.portal-signup-page .signup-field>label>span[aria-hidden="true"] {
    color: var(--signup-orange-hover);
}

.portal-signup-page .signup-field-heading p {
    margin: 5px 0 0;
    color: var(--signup-muted);
    font-size: 0.83rem;
}

.portal-signup-page .signup-client-type-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.portal-signup-page .signup-choice-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.portal-signup-page .signup-choice-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.portal-signup-page .signup-choice-card-content {
    display: flex;
    align-items: center;
    min-height: 96px;
    padding: 18px;
    border: 2px solid var(--signup-border);
    border-radius: 17px;
    background: #ffffff;
    transition: border-color 0.18s ease,box-shadow 0.18s ease,background 0.18s ease,transform 0.18s ease;
}

.portal-signup-page .signup-choice-card:hover .signup-choice-card-content {
    border-color: rgba(40,144,223,0.45);
    transform: translateY(-1px);
}

.portal-signup-page .signup-choice-card input:focus-visible+.signup-choice-card-content {
    outline: 3px solid rgba(71,206,230,0.22);
    outline-offset: 3px;
}

.portal-signup-page .signup-choice-card input:checked+.signup-choice-card-content {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.07);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.08);
}

.portal-signup-page .signup-choice-card-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-right: 13px;
    place-items: center;
    border-radius: 50%;
    color: var(--signup-blue);
    background: rgba(71,206,230,0.13);
    font-size: 1.15rem;
    font-weight: 800;
}

.portal-signup-page .signup-choice-card input:checked+.signup-choice-card-content .signup-choice-card-icon {
    color: #ffffff;
    background: linear-gradient(135deg,var(--signup-cyan),var(--signup-blue));
}

.portal-signup-page .signup-choice-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.portal-signup-page .signup-choice-card-copy strong {
    font-size: 0.98rem;
}

.portal-signup-page .signup-choice-card-copy small {
    color: var(--signup-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* ========================================
   FORM GRID
======================================== */

.portal-signup-page .signup-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 19px 18px;
}

.portal-signup-page .signup-field {
    min-width: 0;
}

.portal-signup-page .signup-field-full {
    grid-column: 1/-1;
}

.portal-signup-page .signup-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--signup-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.portal-signup-page .signup-optional {
    margin-left: 5px;
    color: #9aa7b2;
    font-size: 0.72rem;
    font-weight: 500;
}

.portal-signup-page .signup-field input,
.portal-signup-page .signup-field select {
    box-sizing: border-box;
    width: 100%;
    height: 49px;
    padding: 0 14px;
    border: 1px solid var(--signup-border);
    border-radius: 11px;
    outline: none;
    color: var(--signup-text);
    background: #ffffff;
    font: inherit;
    font-size: 0.91rem;
    transition: border-color 0.18s ease,box-shadow 0.18s ease;
}

.portal-signup-page .signup-field input::placeholder {
    color: #a5b0b9;
}

.portal-signup-page .signup-field input:hover,
.portal-signup-page .signup-field select:hover {
    border-color: #bfd4e2;
}

.portal-signup-page .signup-field input:focus,
.portal-signup-page .signup-field select:focus {
    border-color: var(--signup-blue);
    box-shadow: 0 0 0 3px rgba(40,144,223,0.11);
}

.portal-signup-page .signup-field input:invalid:not(:placeholder-shown) {
    border-color: #d88787;
}

/* ========================================
   PASSWORD
======================================== */

.portal-signup-page .signup-password-wrap {
    position: relative;
    width: 100%;
}

.portal-signup-page .signup-password-wrap input {
    width: 100%;
    padding-right: 72px;
}

.portal-signup-page .signup-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 7px;
    color: var(--signup-blue) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
}

.portal-signup-page .signup-password-toggle:hover,
.portal-signup-page .signup-password-toggle:focus {
    color: var(--signup-blue) !important;
    background: rgba(40,144,223,0.08) !important;
    box-shadow: none !important;
}

.portal-signup-page .signup-password-toggle:focus-visible {
    outline: 2px solid rgba(40,144,223,0.3);
    outline-offset: 1px;
}

.portal-signup-page .signup-field-help {
    display: block;
    margin-top: 6px;
    color: var(--signup-muted);
    font-size: 0.75rem;
}

/* ========================================
   FORM SECTIONS
======================================== */

.portal-signup-page .signup-section-divider {
    height: 1px;
    margin: 32px 0 27px;
    background: #eaf0f4;
}

.portal-signup-page .signup-subsection-heading {
    margin-bottom: 20px;
}

.portal-signup-page .signup-subsection-heading h2 {
    margin: 0;
    color: var(--signup-text);
    font-size: 1.15rem;
}

.portal-signup-page .signup-subsection-heading p {
    margin: 6px 0 0;
    color: var(--signup-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ========================================
   BUTTONS / ACTIONS
======================================== */

.portal-signup-page .signup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}

.portal-signup-page .signup-actions-end {
    justify-content: flex-end;
}

.portal-signup-page .signup-primary-button,
.portal-signup-page .signup-secondary-button,
.portal-signup-page .signup-add-pet-button {
    box-sizing: border-box;
    min-height: 48px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease,box-shadow 0.18s ease,background 0.18s ease,border-color 0.18s ease;
}

.portal-signup-page .signup-primary-button {
    display: inline-flex;
    min-width: 150px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid var(--signup-orange);
    color: #ffffff;
    background: var(--signup-orange);
    box-shadow: 0 7px 18px rgba(245,171,64,0.21);
    text-decoration: none;
}

.portal-signup-page .signup-primary-button:hover:not(:disabled) {
    border-color: var(--signup-orange-hover);
    background: var(--signup-orange-hover);
    box-shadow: 0 9px 21px rgba(239,96,44,0.2);
    transform: translateY(-1px);
}

.portal-signup-page .signup-primary-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.portal-signup-page .signup-secondary-button {
    min-width: 105px;
    padding: 0 18px;
    border: 1px solid var(--signup-border);
    color: var(--signup-blue);
    background: #ffffff;
}

.portal-signup-page .signup-secondary-button:hover {
    border-color: var(--signup-blue);
    background: rgba(40,144,223,0.04);
}

.portal-signup-page .signup-primary-button:focus-visible,
.portal-signup-page .signup-secondary-button:focus-visible,
.portal-signup-page .signup-add-pet-button:focus-visible {
    outline: 3px solid rgba(71,206,230,0.25);
    outline-offset: 3px;
}

/* ========================================
   PET CARDS
======================================== */

.portal-signup-page .signup-pet-card {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid var(--signup-border);
    border-radius: 18px;
    background: #fbfdfe;
}

.portal-signup-page .signup-pet-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.portal-signup-page .signup-pet-number {
    margin: 0 0 4px;
    color: var(--signup-blue);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.portal-signup-page .signup-pet-card-header h2 {
    margin: 0;
    color: var(--signup-text);
    font-size: 1.08rem;
}

.portal-signup-page .signup-remove-pet-button {
    padding: 7px 10px;
    border: 1px solid #efcccc;
    border-radius: 8px;
    color: #b84c4c;
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
}

.portal-signup-page .signup-remove-pet-button:hover {
    background: #fff2f2;
}

.portal-signup-page .signup-add-pet-button {
    width: 100%;
    padding: 0 18px;
    border: 1px dashed rgba(40,144,223,0.45);
    color: var(--signup-blue);
    background: rgba(71,206,230,0.04);
}

.portal-signup-page .signup-add-pet-button span {
    margin-right: 6px;
    font-size: 1.15rem;
}

.portal-signup-page .signup-add-pet-button:hover {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.09);
}

.portal-signup-page .signup-pet-note {
    margin-top: 20px;
    padding: 15px 17px;
    border-radius: 13px;
    color: var(--signup-muted);
    background: #f5f9fb;
    font-size: 0.82rem;
    line-height: 1.5;
}

.portal-signup-page .signup-pet-note strong {
    color: var(--signup-text);
}

.portal-signup-page .signup-pet-note p {
    margin: 4px 0 0;
}

/* ========================================
   MEET & GREET SUMMARY
======================================== */

.portal-signup-page .signup-meet-greet-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(40,144,223,0.15);
    border-radius: 15px;
    background: rgba(71,206,230,0.055);
}

.portal-signup-page .signup-meet-greet-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(38,81,111,0.07);
    font-size: 1.25rem;
}

.portal-signup-page .signup-meet-greet-summary strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.95rem;
}

.portal-signup-page .signup-meet-greet-summary p {
    margin: 0;
    color: var(--signup-muted);
    font-size: 0.8rem;
}

/* ========================================
   MEET & GREET CALENDAR
======================================== */

.portal-signup-page #signup-meet-greet-calendar {
    width: 100%;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--signup-border);
    border-radius: 17px;
}

/* ========================================
   MEET & GREET CALENDAR HEADER
======================================== */

.portal-signup-page .signup-meet-greet-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.portal-signup-page .signup-meet-greet-calendar-header strong {
    color: var(--signup-text);
    font-size: 18px;
    font-weight: 800;
}

/* ========================================
   MEET & GREET MONTH NAVIGATION
======================================== */

.portal-signup-page .signup-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    color: var(--signup-blue);
    background: #ffffff;
    border: 1px solid var(--signup-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease,background 0.18s ease,box-shadow 0.18s ease;
}

.portal-signup-page .signup-calendar-nav:hover {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.05);
}

.portal-signup-page .signup-calendar-nav:focus-visible {
    outline: 3px solid rgba(71,206,230,0.25);
    outline-offset: 2px;
}

/* ========================================
   MEET & GREET WEEKDAYS
======================================== */

.portal-signup-page .signup-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 6px;
    margin-bottom: 6px;
}

.portal-signup-page .signup-calendar-weekdays span {
    padding: 4px 0;
    color: var(--signup-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* ========================================
   MEET & GREET CALENDAR GRID
======================================== */

.portal-signup-page .signup-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 6px;
}

/* ========================================
   EMPTY CALENDAR DAYS
======================================== */

.portal-signup-page .signup-calendar-day-empty {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
}

/* ========================================
   MEET & GREET CALENDAR DAY
======================================== */

.portal-signup-page .signup-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1/1;
    padding: 0;
    color: var(--signup-text);
    background: #ffffff;
    border: 1px solid var(--signup-border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease,background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

/* ========================================
   CALENDAR DAY HOVER
======================================== */

.portal-signup-page .signup-calendar-day:hover:not(:disabled) {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.05);
    transform: translateY(-1px);
}

/* ========================================
   SELECTED CALENDAR DAY
======================================== */

.portal-signup-page .signup-calendar-day.selected {
    color: #ffffff;
    background: linear-gradient(135deg,var(--signup-cyan),var(--signup-blue));
    border-color: var(--signup-blue);
    box-shadow: 0 5px 12px rgba(40,144,223,0.18);
}

/* ========================================
   DISABLED / PAST CALENDAR DAYS
======================================== */

.portal-signup-page .signup-calendar-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   CALENDAR DAY FOCUS
======================================== */

.portal-signup-page .signup-calendar-day:focus-visible {
    outline: 3px solid rgba(71,206,230,0.25);
    outline-offset: 2px;
}

/* ========================================
   MEET & GREET AVAILABLE TIMES
======================================== */

.portal-signup-page .signup-meet-greet-time-heading {
    margin: 22px 0 11px;
    color: var(--signup-text);
    font-size: 0.88rem;
    font-weight: 800;
}

/* ========================================
   MEET & GREET TIME GRID
======================================== */

.portal-signup-page .signup-meet-greet-time-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
}

/* ========================================
   MEET & GREET TIME BUTTON
======================================== */

.portal-signup-page .signup-meet-greet-time {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    color: var(--signup-blue);
    background: #ffffff;
    border: 1px solid var(--signup-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease,background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

.portal-signup-page .signup-meet-greet-time:hover:not(:disabled) {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.05);
    transform: translateY(-1px);
}

/* ========================================
   SELECTED MEET & GREET TIME
======================================== */

.portal-signup-page .signup-meet-greet-time.selected {
    color: #ffffff;
    background: var(--signup-blue);
    border-color: var(--signup-blue);
    box-shadow: 0 5px 12px rgba(40,144,223,0.18);
}

/* ========================================
   UNAVAILABLE MEET & GREET TIME
======================================== */

.portal-signup-page .signup-meet-greet-time:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   MEET & GREET TIME FOCUS
======================================== */

.portal-signup-page .signup-meet-greet-time:focus-visible {
    outline: 3px solid rgba(71,206,230,0.25);
    outline-offset: 2px;
}

/* ========================================
   MEET & GREET CALENDAR MOBILE
======================================== */

@media (max-width:680px) {
    .portal-signup-page #signup-meet-greet-calendar {
        padding: 12px;
        border-radius: 15px;
    }

    .portal-signup-page .signup-meet-greet-calendar-header {
        margin-bottom: 13px;
    }

    .portal-signup-page .signup-meet-greet-calendar-header strong {
        font-size: 16px;
    }

    .portal-signup-page .signup-calendar-nav {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 24px;
    }

    .portal-signup-page .signup-calendar-weekdays,
    .portal-signup-page .signup-calendar-grid {
        gap: 4px;
    }

    .portal-signup-page .signup-calendar-weekdays span {
        font-size: 10px;
    }

    .portal-signup-page .signup-calendar-day {
        border-radius: 7px;
        font-size: 12px;
    }

    .portal-signup-page .signup-meet-greet-time-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 7px;
    }

    .portal-signup-page .signup-meet-greet-time {
        min-height: 42px;
        padding: 7px 5px;
        font-size: 0.76rem;
    }
}

/* ========================================
   MEET & GREET CALENDAR SMALL MOBILE
======================================== */

@media (max-width:420px) {
    .portal-signup-page #signup-meet-greet-calendar {
        padding: 10px;
    }

    .portal-signup-page .signup-calendar-weekdays,
    .portal-signup-page .signup-calendar-grid {
        gap: 3px;
    }

    .portal-signup-page .signup-calendar-day {
        font-size: 11px;
    }

    .portal-signup-page .signup-meet-greet-time-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ========================================
   MEET & GREET TIME SLOTS
======================================== */

.portal-signup-page .signup-time-slots {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 20px;
}

.portal-signup-page .signup-time-slots[hidden] {
    display: none !important;
}

.portal-signup-page .signup-time-slot {
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--signup-border);
    border-radius: 10px;
    color: var(--signup-blue);
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
}

.portal-signup-page .signup-time-slot:hover {
    border-color: var(--signup-blue);
    background: rgba(71,206,230,0.05);
}

.portal-signup-page .signup-time-slot.is-selected {
    border-color: var(--signup-blue);
    color: #ffffff;
    background: var(--signup-blue);
}

/* ========================================
   SELECTED APPOINTMENT
======================================== */

.portal-signup-page .signup-selected-appointment {
    margin-top: 20px;
    padding: 15px 17px;
    border: 1px solid rgba(40,144,223,0.18);
    border-radius: 13px;
    background: rgba(71,206,230,0.06);
}

.portal-signup-page .signup-selected-appointment[hidden] {
    display: none !important;
}

.portal-signup-page .signup-selected-appointment span {
    display: block;
    margin-bottom: 4px;
    color: var(--signup-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.portal-signup-page .signup-selected-appointment strong {
    color: var(--signup-text);
    font-size: 0.92rem;
}

/* ========================================
   SUCCESS SCREEN
======================================== */

.portal-signup-page .signup-success {
    padding-top: 46px;
    padding-bottom: 46px;
    text-align: center;
}

.portal-signup-page .signup-success-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--signup-success);
    box-shadow: 0 10px 24px rgba(53,167,111,0.2);
    font-size: 2rem;
    font-weight: 800;
}

.portal-signup-page .signup-success-message {
    max-width: 520px;
    margin: 12px auto 0;
    color: var(--signup-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.portal-signup-page .signup-success-appointment {
    max-width: 470px;
    margin: 25px auto 0;
    padding: 18px;
    border: 1px solid rgba(40,144,223,0.17);
    border-radius: 15px;
    background: rgba(71,206,230,0.06);
}

.portal-signup-page .signup-success-appointment[hidden] {
    display: none !important;
}

.portal-signup-page .signup-success-appointment span {
    display: block;
    margin-bottom: 7px;
    color: var(--signup-blue);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.portal-signup-page .signup-success-appointment strong {
    display: block;
    font-size: 1rem;
}

.portal-signup-page .signup-success-appointment p {
    margin: 5px 0 0;
    color: var(--signup-muted);
    font-size: 0.86rem;
}

.portal-signup-page .signup-success-checklist {
    display: grid;
    max-width: 470px;
    gap: 9px;
    margin: 25px auto 28px;
    text-align: left;
}

.portal-signup-page .signup-success-checklist>div {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 11px;
    background: #f6faf8;
    color: #405248;
    font-size: 0.85rem;
    font-weight: 600;
}

.portal-signup-page .signup-success-checklist>div[hidden] {
    display: none !important;
}

.portal-signup-page .signup-success-checklist span {
    display: inline-grid;
    width: 23px;
    height: 23px;
    margin-right: 10px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--signup-success);
    font-size: 0.72rem;
    font-weight: 800;
}

.portal-signup-page .signup-login-button {
    min-width: 220px;
}

/* ========================================
   SIGNUP FOOTER
======================================== */

.portal-signup-page .signup-footer {
    padding: 20px 0 0;
    text-align: center;
}

.portal-signup-page .signup-footer p {
    margin: 0;
    color: var(--signup-muted);
    font-size: 0.82rem;
}

.portal-signup-page .signup-footer a {
    color: var(--signup-blue);
    font-weight: 700;
    text-decoration: none;
}

.portal-signup-page .signup-footer a:hover {
    text-decoration: underline;
}

/* ========================================
   TABLET / MOBILE
======================================== */

@media (max-width:680px) {
    .portal-signup-page .signup-shell {
        width: min(100% - 22px,820px);
        padding: 22px 0 34px;
    }

    .portal-signup-page .signup-branding {
        margin-bottom: 17px;
    }

    .portal-signup-page .signup-logo {
        width: min(155px,42vw);
    }

    .portal-signup-page .signup-card {
        border-radius: 21px;
    }

    .portal-signup-page .signup-progress {
        padding: 20px 20px 0;
    }

    .portal-signup-page .signup-step {
        padding: 28px 20px 24px;
    }

    .portal-signup-page .signup-message {
        margin: 20px 20px 0;
    }

    .portal-signup-page .signup-client-type-options {
        grid-template-columns: 1fr;
    }

    .portal-signup-page .signup-choice-card-content {
        min-height: 82px;
    }

    .portal-signup-page .signup-form-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .portal-signup-page .signup-field-full {
        grid-column: auto;
    }

    .portal-signup-page .signup-field input,
    .portal-signup-page .signup-field select {
        height: 51px;
        font-size: 16px;
    }

    .portal-signup-page .signup-pet-card {
        padding: 18px;
    }

    .portal-signup-page .signup-time-slots {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .portal-signup-page .signup-actions {
        margin-top: 27px;
    }

    .portal-signup-page .signup-primary-button {
        min-width: 135px;
    }
}

/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width:430px) {
    .portal-signup-page .signup-shell {
        width: min(100% - 16px,820px);
    }

    .portal-signup-page .signup-logo {
        width: min(145px,40vw);
    }

    .portal-signup-page .signup-progress-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .portal-signup-page .signup-step-heading h1,
    .portal-signup-page .signup-success h1 {
        font-size: 1.75rem;
    }

    .portal-signup-page .signup-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .portal-signup-page .signup-actions-end {
        display: flex;
    }

    .portal-signup-page .signup-actions-end .signup-primary-button {
        width: 100%;
    }

    .portal-signup-page .signup-actions .signup-secondary-button,
    .portal-signup-page .signup-actions .signup-primary-button {
        width: 100%;
        min-width: 0;
    }

    .portal-signup-page .signup-time-slots {
        grid-template-columns: 1fr 1fr;
    }

    .portal-signup-page .signup-login-button {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================
   SIGNUP BREED AUTOCOMPLETE
======================================== */

.signup-breed-autocomplete {
    position: relative;
    width: 100%;
}

/* ========================================
   BREED SUGGESTION MENU
======================================== */

.signup-breed-suggestions {
    position: absolute;
    top: calc(100%+6px);
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e5ee;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(18,48,77,0.14);
}

.signup-breed-suggestions[hidden] {
    display: none;
}

/* ========================================
   BREED SUGGESTION
======================================== */

.signup-breed-suggestion {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #edf2f6;
    background: #ffffff;
    color: #102338;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease,color 0.15s ease;
}

.signup-breed-suggestion:last-child {
    border-bottom: 0;
}

.signup-breed-suggestion:hover,
.signup-breed-suggestion:focus-visible {
    background: #eef9fd;
    color: #2890df;
    outline: none;
}

/* ========================================
   MOBILE BREED AUTOCOMPLETE
======================================== */

@media (max-width:700px) {
    .signup-breed-suggestion {
        padding: 13px 14px;
        font-size: 16px;
    }
}

/* ========================================
   PAWS IN STRIDE PAYMENT PAGE
======================================== */

/* ========================================
   PAYMENT PAGE CONTAINER
======================================== */

.payment-page-container {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px 0 60px;
}

/* ========================================
   PAYMENT HEADER
======================================== */

.payment-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px 24px;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(200,220,232,0.82);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(35,93,125,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ========================================
   PAYMENT HEADER BRAND ACCENT
======================================== */

.payment-page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue),var(--pis-orange));
    border-radius: 0 0 999px 999px;
}

/* ========================================
   PAYMENT HEADER BRAND
======================================== */

.payment-header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* ========================================
   PAYMENT HEADER LOGO
======================================== */

.payment-header-logo {
    display: block;
    width: 130px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

/* ========================================
   PAYMENT HEADER COPY
======================================== */

.payment-header-copy {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--pis-border);
}

.payment-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--pis-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.payment-header-copy h1 {
    margin: 0;
    color: var(--pis-ink);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.payment-header-copy p {
    margin: 7px 0 0;
    color: var(--pis-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ========================================
   SECURITY BADGE
======================================== */

.payment-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 12px;
    color: var(--pis-blue-dark);
    background: linear-gradient(135deg,#eef9fd,#e5f4fb);
    border: 1px solid rgba(40,144,223,0.18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(40,144,223,0.06);
}

.payment-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #ffffff;
    background: linear-gradient(135deg,var(--pis-cyan),var(--pis-blue));
    border-radius: 50%;
    font-size: 11px;
}

/* ========================================
   PAYMENT LAYOUT
======================================== */

.payment-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
}

/* ========================================
   MULTI-SERVICE DESKTOP CHECKOUT
======================================== */

.payment-layout-multi {
    grid-template-columns: minmax(0,0.42fr) minmax(0,0.58fr);
    align-items: start;
}

.payment-layout-multi .payment-summary-card,
.payment-layout-multi .payment-methods-card {
    align-self: start;
}

/* ========================================
   CHECKOUT COLUMN SAFETY
======================================== */

.payment-summary-card,
.payment-methods-card {
    min-width: 0;
}

/* ========================================
   PAYMENT CARDS
======================================== */

.payment-page .payment-card {
    position: relative;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--pis-border-strong);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(35,93,125,0.08);
}

/* ========================================
   ORDER SUMMARY CARD
======================================== */

.payment-summary-card {
    background: linear-gradient(145deg,#ffffff 0%,#fbfdfe 55%,#f1f9fc 100%);
}

/* ========================================
   ORDER SUMMARY CARD ACCENT
======================================== */

.payment-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue));
}

/* ========================================
   PAYMENT METHODS CARD
======================================== */

.payment-methods-card {
    background: linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
}

/* ========================================
   PAYMENT METHODS CARD ACCENT
======================================== */

.payment-methods-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--pis-cyan),
            var(--pis-blue)
        );

}

/* ========================================
   PAYMENT CARD HEADINGS
======================================== */

.payment-card-heading {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;

}


.payment-card-eyebrow {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--pis-blue);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.payment-card-heading h2 {

    margin:
        0;

    color:
        var(--pis-ink);

    font-size:
        21px;

    font-weight:
        800;

}


/* ========================================
   EDIT BOOKING BUTTON
======================================== */

.payment-edit-booking-button {

    flex:
        0
        0
        auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto;

    min-width:
        0;

    min-height:
        40px;

    padding:
        0
        13px;

    color:
        var(--pis-blue);

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            40,
            144,
            223,
            0.28
        );

    border-radius:
        11px;

    box-shadow:
        0
        3px
        10px
        rgba(
            35,
            93,
            125,
            0.06
        );

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;

}


.payment-edit-booking-button:hover {

    background:
        #f5fbff;

    border-color:
        rgba(
            40,
            144,
            223,
            0.48
        );

    box-shadow:
        0
        5px
        14px
        rgba(
            35,
            93,
            125,
            0.09
        );

    transform:
        translateY(-1px);

}


.payment-edit-booking-button:active {

    transform:
        translateY(0);

}


/* ========================================
   EDIT BOOKING — MOBILE
======================================== */

@media (max-width: 700px) {

    .payment-card-heading {

        flex-direction:
            row;

        align-items:
            flex-start;

        justify-content:
            space-between;

        gap:
            12px;

    }


    .payment-edit-booking-button {

        width:
            auto;

        min-width:
            0;

        min-height:
            38px;

        padding:
            0
            11px;

        font-size:
            11px;

    }

}

/* ========================================
   ORDER SUMMARY CONTENT
======================================== */

.payment-summary-content {
    color: var(--pis-text);
    font-size: 14px;
    line-height: 1.6;
}

/* ========================================
   PAYMENT SUMMARY DATE GROUP
======================================== */

.payment-summary-date-group {
    overflow: hidden;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--pis-border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(35,93,125,0.05);
}

/* ========================================
   PAYMENT SUMMARY DATE HEADER
======================================== */

.payment-summary-date-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    color: var(--pis-ink);
    background: linear-gradient(135deg,#ffffff,#f5fbfd);
    border: none;
    text-align: left;
    cursor: pointer;
}

/* ========================================
   PAYMENT SUMMARY DATE HEADER HOVER
======================================== */

.payment-summary-date-header:hover {
    background: linear-gradient(135deg,#fbfdfe,#edf8fc);
}

/* ========================================
   PAYMENT SUMMARY DATE HEADER TEXT
======================================== */

.payment-summary-date-header-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ========================================
   PAYMENT SUMMARY DATE TITLE
======================================== */

.payment-summary-date-title {
    color: var(--pis-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

/* ========================================
   PAYMENT SUMMARY DATE META
======================================== */

.payment-summary-date-meta {
    color: var(--pis-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================
   PAYMENT SUMMARY DATE ARROW
======================================== */

.payment-summary-date-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--pis-blue);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

/* ========================================
   PAYMENT SUMMARY DATE CONTENT
======================================== */

.payment-summary-date-content {
    padding: 0 12px 12px;
    border-top: 1px solid var(--pis-border);
}

/* ========================================
   HIDDEN PAYMENT SUMMARY DATE CONTENT
======================================== */

.payment-summary-date-content[hidden] {
    display: none;
}

/* ========================================
   PAYMENT SUMMARY SERVICE CARD
======================================== */

.payment-summary-service {
    position: relative;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 16px 16px 16px 18px;
    background: rgba(255,255,255,0.90);
    border: 1px solid var(--pis-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(35,93,125,0.05);
}

/* ========================================
   SERVICE ACCENT BAR
======================================== */

.payment-summary-service::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg,var(--pis-cyan),var(--pis-blue));
    border-radius: 0 4px 4px 0;
}

/* ========================================
   PAYMENT SUMMARY SERVICE NAME
======================================== */

.payment-summary-service-name {
    color: var(--pis-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

/* ========================================
   PAYMENT SUMMARY PETS
======================================== */

.payment-summary-pets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.payment-summary-pet-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border: 1px solid rgba(40,144,223,0.10);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* ========================================
   PAYMENT SUMMARY DETAILS
======================================== */

.payment-summary-service-details {
    margin-top: 9px;
    color: var(--pis-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   PAYMENT SUMMARY PRICE
======================================== */

.payment-summary-service-price {
    margin-top: 8px;
    color: var(--pis-ink);
    font-size: 14px;
    font-weight: 800;
}

/* ========================================
   PAYMENT SUMMARY TOTAL
======================================== */

.payment-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 16px 18px;
    color: var(--pis-ink);
    background: linear-gradient(135deg,#fffaf1,#fff3d9);
    border: 1px solid rgba(245,171,64,0.30);
    border-radius: 14px;
    box-shadow: inset 0 3px 0 rgba(245,171,64,0.18);
    font-size: 20px;
    font-weight: 800;
}

/* ========================================
   PAYMENT SUMMARY ACCOUNT CREDIT
======================================== */

.payment-summary-credit-available,
.payment-summary-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(40,144,223,0.06);
    border: 1px solid rgba(40,144,223,0.18);
    border-radius: 12px;
    color: var(--pis-ink);
}

/* ========================================
   AVAILABLE CREDIT INFO
======================================== */

.payment-summary-credit-available>div {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.payment-summary-credit-available span {
    color: var(--pis-muted);
    font-size: 13px;
    font-weight: 700;
}

.payment-summary-credit-available strong {
    color: var(--pis-blue);
    font-size: 15px;
    font-weight: 800;
}

/* ========================================
   APPLY CREDIT BUTTON
======================================== */

.payment-apply-credit-button {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 16px;
    background: var(--pis-blue);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease,transform 0.2s ease,opacity 0.2s ease;
}

.payment-apply-credit-button:hover {
    opacity: 0.9;
}

.payment-apply-credit-button:active {
    transform: scale(0.98);
}

.payment-apply-credit-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================
   APPLIED ACCOUNT CREDIT
======================================== */

.payment-summary-credit {
    color: #067647;
    background: #f0fdf4;
    border-color: rgba(6,118,71,0.18);
    font-size: 14px;
    font-weight: 800;
}

.payment-summary-credit span:last-child {
    white-space: nowrap;
}

/* ========================================
   COMPLETE BOOKING WITH CREDIT
======================================== */

.payment-complete-credit-button {
    width: 100%;
    margin-top: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg,#f5ab40,#f3b94f);
    color: #ffffff;
    border: none;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(245,171,64,0.22);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease,opacity 0.2s ease,box-shadow 0.2s ease;
}

.payment-complete-credit-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(245,171,64,0.28);
}

.payment-complete-credit-button:active {
    transform: scale(0.99);
}

.payment-complete-credit-button:disabled {
    opacity: 0.60;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   ACCOUNT CREDIT MOBILE
======================================== */

@media (max-width:600px) {
    .payment-summary-credit-available {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-summary-credit-available>div {
        justify-content: space-between;
    }

    .payment-apply-credit-button {
        width: 100%;
    }
}

/* ========================================
   PAYMENT SUMMARY EXPIRATION
======================================== */

.payment-summary-expiration {
    margin-top: 12px;
    padding: 9px 12px;
    color: var(--pis-muted);
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--pis-border);
    border-radius: 10px;
    font-size: 11px;
    text-align: center;
}

/* ========================================
   PAYMENT METHOD HELP
======================================== */

.payment-method-help {
    margin: -8px 0 20px;
    color: var(--pis-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ========================================
   PAYMENT WALLET STACK
======================================== */

.payment-wallet-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(145deg,#f8fcfe,#eef8fc);
    border: 1px solid var(--pis-border);
    border-radius: 16px;
}

/* ========================================
   PAYMENT WALLET WRAPPERS
======================================== */

.payment-wallet-wrapper {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    border-radius: 10px;
}

/* ========================================
   WALLET BUTTON CONSISTENCY
======================================== */

#paypal-button,
#venmo-button,
#apple-pay-button {
    display: block;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 50px;
    min-height: 50px;
}

/* ========================================
   GOOGLE PAY FULL WIDTH
======================================== */

#google-pay-wrapper {
    width: 100%;
}

#google-pay-button {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 50px;
}

#google-pay-button>div,
#google-pay-button button,
#google-pay-button iframe {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
}

/* ========================================
   APPLE PAY BUTTON
======================================== */

#apple-pay-button {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 50px;
    --apple-pay-button-border-radius: 10px;
}

/* ========================================
   PAYMENT DIVIDER
======================================== */

.payment-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--pis-blue-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.payment-divider::before,
.payment-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pis-border);
}

/* ========================================
   CARD PAYMENT AREA
======================================== */

.card-payment-wrapper {
    padding: 20px;
    background: linear-gradient(145deg,#f8fcfe,#eef8fc);
    border: 1px solid var(--pis-border-strong);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(35,93,125,0.05);
}

/* ========================================
   CARD PAYMENT HEADING
======================================== */

.card-payment-heading {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pis-border);
}

.card-payment-heading h3 {
    margin: 0;
    color: var(--pis-ink);
    font-size: 17px;
    font-weight: 800;
}

.card-payment-heading p {
    margin: 5px 0 0;
    color: var(--pis-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* ========================================
   CARD FIELD LABEL
======================================== */

.payment-field-label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--pis-ink);

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.3;

}


/* ========================================
   CARD FIELD
======================================== */

.payment-card-field {

    min-width:
        0;

    margin-bottom:
        16px;

}


.paypal-card-field-host {

    width:
        100%;

    height:
        52px;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        #c8dce8;

    border-radius:
        11px;

    box-shadow:
        none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


.paypal-card-field-host > iframe {

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

}


.paypal-card-field-host:focus-within {

    border-color:
        #1f9aeb;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            31,
            154,
            235,
            0.10
        );

}


/* ========================================
   CARD FIELD GRID
======================================== */

.payment-card-field-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px;

}


/* ========================================
   PAY WITH CARD BUTTON
======================================== */

.payment-card-pay-button {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        4px;

    padding:
        12px
        18px;

    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            #f5ab40 0%,
            #ef602c 100%
        );

    border:
        0;

    border-radius:
        11px;

    box-shadow:
        0
        5px
        14px
        rgba(
            239,
            96,
            44,
            0.18
        );

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;

}


.payment-card-pay-button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0
        7px
        18px
        rgba(
            239,
            96,
            44,
            0.24
        );

}


.payment-card-pay-button:active:not(:disabled) {

    transform:
        translateY(0);

}


.payment-card-pay-button:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    transform:
        none;

}

/* ========================================
   PAYMENT MESSAGE
======================================== */

.payment-message {
    min-height: 20px;
    margin-top: 18px;
    color: var(--pis-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

/* ========================================
   PAYMENT SECURITY NOTE
======================================== */

.payment-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 14px;
    background: rgba(234,246,252,0.72);
    border: 1px solid var(--pis-border);
    border-radius: 12px;
    box-shadow: inset 0 2px 0 rgba(71,206,230,0.12);
}

.payment-security-note-icon {
    flex: 0 0 auto;
    font-size: 13px;
}

.payment-security-note p {
    margin: 0;
    color: var(--pis-muted);
    font-size: 11px;
    line-height: 1.5;
}

/* ========================================
   EXPIRED CHECKOUT STATE
======================================== */

.payment-expired-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 24px 20px;
    text-align: center;
    background: linear-gradient(145deg,#fffafa 0%,#fff5f5 100%);
    border: 1px solid rgba(220,53,69,0.22);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(100,30,40,0.06);
}

/* ========================================
   EXPIRED CHECKOUT TITLE
======================================== */

.payment-expired-title {
    display: block;
    margin-bottom: 8px;
    color: #b42332;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

/* ========================================
   EXPIRED CHECKOUT MESSAGE
======================================== */

.payment-expired-message {
    max-width: 430px;
    margin: 0 0 18px;
    color: var(--pis-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ========================================
   EXPIRED CHECKOUT BUTTON
======================================== */

.payment-expired-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    min-height: 48px;
    padding: 12px 20px;
    color: #ffffff;
    background: linear-gradient(135deg,var(--pis-blue),var(--pis-cyan));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(40,144,223,0.20);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease,box-shadow 0.18s ease,filter 0.18s ease;
}

.payment-expired-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(40,144,223,0.26);
    filter: brightness(0.98);
}

.payment-expired-button:active {
    transform: translateY(0);
}

.payment-expired-button:focus-visible {
    outline: 3px solid rgba(71,206,230,0.28);
    outline-offset: 3px;
}

/* ========================================
   PAYMENT PAGE MOBILE
======================================== */

@media (max-width:700px) {
    .payment-page-container {
        width: 94%;
        padding: 0 0 30px;
    }

    /* ========================================
       MOBILE CHECKOUT LAYOUT
    ======================================== */

    .payment-layout,
    .payment-layout-multi {
        grid-template-columns: 1fr;
    }

    /* ========================================
       MOBILE PAYMENT HEADER
    ======================================== */

    .payment-page-header {
        position: sticky;
        top: 0;
        z-index: 900;
        gap: 10px;
        margin: 0 -3% 18px;
        padding: max(12px,env(safe-area-inset-top)) 3% 12px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 16px 16px;
        background: rgba(255,255,255,0.94);
        box-shadow: 0 5px 18px rgba(35,93,125,0.08);
    }

    .payment-page-header::before {
        left: 0;
        right: 0;
    }

    /* ========================================
       MOBILE HEADER BRAND
    ======================================== */

    .payment-header-brand {
        flex: 1 1 auto;
        gap: 10px;
        min-width: 0;
    }

    .payment-header-logo {
        width: 95px;
    }

    .payment-header-copy {
        min-width: 0;
        padding-left: 0;
        border-left: 0;
    }

    .payment-header-copy h1 {
        font-size: 21px;
    }

    .payment-header-copy p {
        display: none;
    }

    /* ========================================
       MOBILE SECURITY BADGE
    ======================================== */

    .payment-security-badge {
        padding: 8px 10px;
        font-size: 10px;
    }

    /* ========================================
       MOBILE PAYMENT CARDS
    ======================================== */

    .payment-page .payment-card {
        padding: 18px;
        border-radius: 16px;
    }

    .payment-card-heading h2 {
        font-size: 19px;
    }

    /* ========================================
       MOBILE DATE GROUP
    ======================================== */

    .payment-summary-date-group {
        margin-bottom: 10px;
        border-radius: 12px;
    }

    /* ========================================
       MOBILE DATE HEADER
    ======================================== */

    .payment-summary-date-header {
        gap: 12px;
        padding: 13px 14px;
    }

    /* ========================================
       MOBILE DATE TITLE
    ======================================== */

    .payment-summary-date-title {
        font-size: 14px;
    }

    /* ========================================
       MOBILE DATE META
    ======================================== */

    .payment-summary-date-meta {
        font-size: 11px;
    }

    /* ========================================
       MOBILE DATE ARROW
    ======================================== */

    .payment-summary-date-arrow {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    /* ========================================
       MOBILE DATE CONTENT
    ======================================== */

    .payment-summary-date-content {
        padding: 0 10px 10px;
    }

    /* ========================================
       MOBILE SERVICE CARD
    ======================================== */

    .payment-summary-service {
        padding: 14px 14px 14px 17px;
        border-radius: 12px;
    }

    /* ========================================
       MOBILE TOTAL
    ======================================== */

    .payment-summary-total {
        padding: 14px 15px;
        font-size: 18px;
    }

    /* ========================================
       MOBILE WALLET PANEL
    ======================================== */

    .payment-wallet-methods {
        padding: 10px;
        border-radius: 14px;
    }

    /* ========================================
       MOBILE CARD PAYMENT
    ======================================== */

    .card-payment-wrapper {
        padding: 16px;
    }
}

/* ========================================
   EXTRA SMALL PAYMENT PAGE
======================================== */

@media (max-width:420px) {
    /* ========================================
       EXTRA SMALL HEADER
    ======================================== */

    .payment-header-logo {
        width: 82px;
    }

    .payment-header-copy h1 {
        font-size: 18px;
    }

    /* ========================================
       EXTRA SMALL CARD FIELDS
    ======================================== */

    .payment-card-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    /* ========================================
       EXTRA SMALL PAYMENT CARDS
    ======================================== */

    .payment-page .payment-card {
        padding: 16px;
    }

    /* ========================================
       EXTRA SMALL SECURITY BADGE
    ======================================== */

    .payment-security-badge span:last-child {
        display: none;
    }

    .payment-security-badge {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* ========================================
   PAWS IN STRIDE BOOKING SUCCESS PAGE
======================================== */

/* ========================================
   SUCCESS PAGE
======================================== */

body.booking-success-page {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: radial-gradient(circle at top left,rgba(71,206,230,0.12),transparent 34rem),linear-gradient(180deg,#f8fcfe 0%,#f3f8fb 50%,#edf6fa 100%);
    color: var(--pis-ink);
    font-family: "Roboto",Arial,Helvetica,sans-serif;
}

/* ========================================
   SUCCESS PAGE SHELL
======================================== */

.booking-success-shell {
    width: min(92%,760px);
    margin: 0 auto;
    padding: 42px 0 60px;
}

/* ========================================
   SUCCESS HEADER
======================================== */

.booking-success-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 20px 24px;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--pis-border);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(35,93,125,0.08);
}

/* ========================================
   SUCCESS HEADER ACCENT
======================================== */

.booking-success-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 4px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue),var(--pis-orange));
    border-radius: 0 0 999px 999px;
}

/* ========================================
   SUCCESS LOGO
======================================== */

.booking-success-logo {
    width: 120px;
    height: auto;
    flex: 0 0 auto;
}

/* ========================================
   SUCCESS HEADER COPY
======================================== */

.booking-success-header-copy {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--pis-border);
}

.booking-success-header-copy span {
    display: block;
    margin-bottom: 4px;
    color: var(--pis-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.booking-success-header-copy h1 {
    margin: 0;
    color: var(--pis-ink);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

/* ========================================
   SUCCESS CARD
======================================== */

.booking-success-card {
    position: relative;
    padding: 34px;
    overflow: hidden;
    background: linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
    border: 1px solid var(--pis-border-strong);
    border-radius: 22px;
    box-shadow: 0 16px 50px rgba(35,93,125,0.11);
    text-align: center;
}

/* ========================================
   SUCCESS CARD ACCENT
======================================== */

.booking-success-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,var(--pis-cyan),var(--pis-blue),var(--pis-orange));
}

/* ========================================
   SUCCESS ICON
======================================== */

.booking-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 2px auto 22px;
    color: #ffffff;
    background: linear-gradient(135deg,#35b877,#22995e);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(35,184,119,0.24);
    font-size: 42px;
    font-weight: 800;
}

/* ========================================
   SUCCESS COPY
======================================== */

.booking-success-copy {
    max-width: 540px;
    margin: 0 auto;
}

.booking-success-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #22995e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.booking-success-copy h2 {
    margin: 0 0 8px;
    color: var(--pis-ink);
    font-size: 30px;
    font-weight: 800;
}

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

/* ========================================
   PAYMENT CONFIRMED BADGE
======================================== */

.booking-success-payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    padding: 8px 12px;
    color: #187545;
    background: #ecf9f1;
    border: 1px solid #c8ead5;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.booking-success-payment-dot {
    width: 8px;
    height: 8px;
    background: #35b877;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(53,184,119,0.10);
}

/* ========================================
   BOOKING DETAILS
======================================== */

.booking-success-details {
    margin-top: 28px;
    text-align: left;
}

/* ========================================
   SUCCESS DATE GROUP
======================================== */

.booking-success-date-group {
    overflow: hidden;
    margin-top: 12px;
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--pis-border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(35,93,125,0.05);
}

/* ========================================
   SUCCESS DATE HEADER
======================================== */

.booking-success-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    color: var(--pis-ink);
    background: linear-gradient(145deg,#ffffff,#f8fcfe);
    border: 0;
    cursor: pointer;
    text-align: left;
}

.booking-success-date-header:hover {
    background: linear-gradient(145deg,#ffffff,#f3fafe);
}

/* ========================================
   SUCCESS DATE HEADER TEXT
======================================== */

.booking-success-date-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.booking-success-date-title {
    color: var(--pis-ink);
    font-size: 15px;
    font-weight: 800;
}

.booking-success-date-meta {
    color: var(--pis-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================
   SUCCESS DATE ARROW
======================================== */

.booking-success-date-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--pis-blue);
    font-size: 18px;
    font-weight: 800;
}

/* ========================================
   SUCCESS DATE CONTENT
======================================== */

.booking-success-date-content {
    padding: 0 12px 12px;
    border-top: 1px solid var(--pis-border);
}

.booking-success-date-content[hidden] {
    display: none;
}

/* ========================================
   SUCCESS DETAIL CARD
======================================== */

.booking-success-service {
    position: relative;
    margin-top: 12px;
    padding: 16px 18px 16px 20px;
    background: linear-gradient(145deg,#ffffff,#f8fcfe);
    border: 1px solid var(--pis-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(35,93,125,0.05);
}

/* ========================================
   SUCCESS DETAIL ACCENT
======================================== */

.booking-success-service::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg,var(--pis-cyan),var(--pis-blue));
    border-radius: 0 4px 4px 0;
}

/* ========================================
   SUCCESS SERVICE NAME
======================================== */

.booking-success-service-name {
    color: var(--pis-ink);
    font-size: 15px;
    font-weight: 800;
}

/* ========================================
   SUCCESS PETS
======================================== */

.booking-success-pets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.booking-success-pet-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    color: var(--pis-blue-dark);
    background: var(--pis-blue-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

/* ========================================
   SUCCESS SERVICE DETAILS
======================================== */

.booking-success-service-details {
    margin-top: 8px;
    color: var(--pis-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   SUCCESS SERVICE PRICE
======================================== */

.booking-success-service-price {
    margin-top: 8px;
    color: var(--pis-ink);
    font-size: 14px;
    font-weight: 800;
}

/* ========================================
   SUCCESS TOTAL
======================================== */

.booking-success-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg,#fffaf1,#fff3d9);
    border: 1px solid rgba(245,171,64,0.30);
    border-radius: 14px;
    color: var(--pis-ink);
    font-size: 20px;
    font-weight: 800;
}

/* ========================================
   SUCCESS NOTE
======================================== */

.booking-success-note {
    margin-top: 22px;
    padding: 15px 16px;
    background: linear-gradient(145deg,#f8fcfe,#eef8fc);
    border: 1px solid var(--pis-border);
    border-radius: 14px;
    text-align: left;
}

.booking-success-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--pis-ink);
    font-size: 13px;
}

.booking-success-note p {
    margin: 0;
    color: var(--pis-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================
   SUCCESS BUTTON
======================================== */

.booking-success-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 22px;
    padding: 14px 18px;
    color: #ffffff;
    background: linear-gradient(135deg,var(--pis-orange),#f7b84d);
    border-radius: 999px;
    box-shadow: 0 7px 20px rgba(245,171,64,0.24);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease,box-shadow 0.18s ease;
}

.booking-success-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(245,171,64,0.30);
}

/* ========================================
   SUCCESS REFERENCE
======================================== */

.booking-success-reference {
    margin-top: 16px;
    color: var(--pis-muted);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ========================================
   SUCCESS LOADING
======================================== */

.booking-success-loading {
    padding: 18px;
    color: var(--pis-muted);
    background: var(--pis-blue-soft);
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
}

/* ========================================
   SUCCESS PAGE MOBILE
======================================== */

@media (max-width:700px) {
    .booking-success-shell {
        width: 94%;
        padding: 18px 0 30px;
    }

    .booking-success-header {
        padding: 16px 18px;
        gap: 12px;
    }

    .booking-success-logo {
        width: 90px;
    }

    .booking-success-header-copy {
        padding-left: 12px;
    }

    .booking-success-header-copy h1 {
        font-size: 19px;
    }

    .booking-success-card {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .booking-success-icon {
        width: 72px;
        height: 72px;
        font-size: 34px;
    }

    .booking-success-copy h2 {
        font-size: 25px;
    }

    /* ========================================
       MOBILE SUCCESS DATE GROUP
    ======================================== */

    .booking-success-date-group {
        margin-top: 10px;
        border-radius: 12px;
    }

    .booking-success-date-header {
        gap: 10px;
        padding: 13px 14px;
    }

    .booking-success-date-title {
        font-size: 14px;
    }

    .booking-success-date-meta {
        font-size: 11px;
    }

    .booking-success-date-arrow {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    .booking-success-date-content {
        padding: 0 10px 10px;
    }

    /* ========================================
       MOBILE SUCCESS SERVICE CARD
    ======================================== */

    .booking-success-service {
        margin-top: 10px;
        padding: 14px 14px 14px 18px;
        border-radius: 11px;
    }

    .booking-success-service-name {
        font-size: 14px;
    }

    .booking-success-service-details {
        font-size: 11px;
    }

    .booking-success-service-price {
        font-size: 13px;
    }

    .booking-success-total {
        font-size: 18px;
    }
}

/* ========================================
   MOBILE APP SCREENS
======================================== */

@media (max-width:700px) {
   
   /* ========================================
      HOME SCREEN
   ======================================== */
   
   body.mobile-app-screen-home #mobile-home-dashboard {
       display: block !important;
   }
   
   body.mobile-app-screen-home .client-dashboard-grid,
   body.mobile-app-screen-home #push-notification-card,
   body.mobile-app-screen-home #logout-button {
       display: none !important;
   }
   
   
   /* ========================================
      DESKTOP LATEST UPDATE — MOBILE HIDE
   ======================================== */
   
   .client-portal-page .desktop-latest-update-section {
       display: none !important;
   }

    /* ========================================
       SERVICES SCREEN
    ======================================== */

    body.mobile-app-screen-services #household-section,
    body.mobile-app-screen-services #pets-section,
    body.mobile-app-screen-services #push-notification-card,
    body.mobile-app-screen-services #logout-button {
        display: none !important;
    }

    body.mobile-app-screen-services #services-section {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* ========================================
       PETS SCREEN
    ======================================== */

    body.mobile-app-screen-pets #household-section,
    body.mobile-app-screen-pets #services-section,
    body.mobile-app-screen-pets #push-notification-card,
    body.mobile-app-screen-pets #logout-button {
        display: none !important;
    }

    body.mobile-app-screen-pets #pets-section {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* ========================================
       PROFILE SCREEN
    ======================================== */

    body.mobile-app-screen-profile #pets-section,
    body.mobile-app-screen-profile #services-section,
    body.mobile-app-screen-profile #push-notification-card,
    body.mobile-app-screen-profile #logout-button {
        display: none !important;
    }

    body.mobile-app-screen-profile #household-section {
        display: block !important;
        position: relative;
        overflow: visible;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.mobile-app-screen-profile #household-section::before {
        display: none;
    }

    /* ========================================
       PROFILE HEADING
    ======================================== */

    body.mobile-app-screen-profile .household-section-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0 2px 14px;
    }

    body.mobile-app-screen-profile .household-section-header h3 {
        margin: 0 0 5px;
        color: #183447;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    body.mobile-app-screen-profile .household-section-help {
        margin: 0 0 14px;
        color: #6b7785;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
    }

    /* ========================================
       EDIT PROFILE BUTTON
    ======================================== */

    body.mobile-app-screen-profile .household-edit-button {
        width: 100%;
        min-height: 50px;
        padding: 10px 16px;
        background: #f5ab40;
        color: #ffffff;
        border: 0;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(111,69,12,0.18);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    /* ========================================
       PROFILE CONTENT CARD
    ======================================== */

    body.mobile-app-screen-profile .household-profile-top {
        position: relative;
        padding: 22px 16px 20px;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
    }

    body.mobile-app-screen-profile .household-profile-top::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        border-radius: 18px 18px 0 0;
    }

    /* ========================================
       PROFILE DETAILS GRID
    ======================================== */

    body.mobile-app-screen-profile .household-profile-grid {
        margin-top: 0;
        padding: 0 16px 18px;
        background: #ffffff;
        border-right: 1px solid #d6e4eb;
        border-bottom: 1px solid #d6e4eb;
        border-left: 1px solid #d6e4eb;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 7px 18px rgba(24,52,71,0.07);
    }

    /* ========================================
       UPDATE PASSWORD BUTTON
    ======================================== */

    body.mobile-app-screen-profile .change-password-actions .primary-button {
        width: 100%;
        min-height: 46px;
        padding: 11px 16px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
        color: #ffffff;
        border: 0;
        border-radius: 11px;
        box-shadow: 0 5px 14px rgba(239,96,44,0.18);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    body.mobile-app-screen-profile .change-password-actions .primary-button:active {
        transform: scale(0.985);
    }

    /* ========================================
       SINGLE SCREEN GRID
    ======================================== */

    body.mobile-app-screen-services .client-dashboard-grid,
    body.mobile-app-screen-pets .client-dashboard-grid,
    body.mobile-app-screen-profile .client-dashboard-grid {
        display: block !important;
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    body.mobile-app-screen-services .client-dashboard-column,
    body.mobile-app-screen-pets .client-dashboard-column,
    body.mobile-app-screen-profile .client-dashboard-column {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ========================================
   STATIC DASHBOARD LOADING
======================================== */

.portal-static-loading-logo,
.portal-static-loading-indicator {
    display: none;
}

/* ========================================
   REDUCED MOTION — MOBILE / INSTALLED PWA
======================================== */

@media (prefers-reduced-motion:reduce) {
    @media (max-width:700px),(display-mode:standalone) {
        body.client-portal-page #loading {
            position: fixed;
            inset: 0;
            z-index: 99998;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            width: 100%;
            height: 100%;
            height: 100dvh;
            margin: 0;
            padding: 24px;
            box-sizing: border-box;
            background: #f5ab40;
            color: #ffffff;
            font-family: Arial,sans-serif;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .portal-static-loading-logo {
            display: block;
            width: min(300px,72vw);
            height: auto;
        }

        .portal-static-loading-indicator {
            display: block;
            width: 38px;
            height: 38px;
            box-sizing: border-box;
            flex-shrink: 0;
            border: 4px solid rgba(255,255,255,0.35);
            border-top-color: #ffffff;
            border-radius: 50%;
        }
    }
}

/* ========================================
   PAWS IN STRIDE — HOME REDESIGN
======================================== */

@media (max-width:700px) {
    /* ========================================
       PREMIUM SOFT PAGE BACKGROUND
    ======================================== */

    body.client-portal-page.mobile-app-screen-home {
        background-color: #edf5f8;
        background-image: radial-gradient(circle at 12% 0%,rgba(71,206,230,0.18),transparent 32%),linear-gradient(180deg,#e7f2f7 0%,#f2f7fa 58%,#eaf3f7 100%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* ========================================
       REMOVE OUTER HOME CARD
    ======================================== */

    body.client-portal-page #mobile-home-dashboard {
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* ========================================
       BRANDED GREETING PANEL
    ======================================== */

    body.client-portal-page .mobile-home-greeting {
        position: relative;
        overflow: hidden;
        margin: 8px 0 22px;
        padding: 22px 20px 24px;
        background: linear-gradient(135deg,#174b68 0%,#1d6f98 55%,#268db2 100%);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 20px;
        box-shadow: 0 10px 24px rgba(23,75,104,0.16);
    }

    body.client-portal-page .mobile-home-greeting::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        top: -86px;
        right: -52px;
        background: rgba(71,206,230,0.16);
        border-radius: 50%;
        pointer-events: none;
    }

    body.client-portal-page .mobile-home-greeting h2 {
        position: relative;
        z-index: 1;
        margin: 0 0 7px;
        color: #ffffff;
        font-size: clamp(24px,6vw,29px);
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -0.025em;
    }

    body.client-portal-page .mobile-home-greeting p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: rgba(255,255,255,0.86);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
    }

    /* ========================================
       REMOVE HOME SECTION SHELLS
    ======================================== */

    body.client-portal-page #mobile-home-dashboard>.mobile-home-section {
        margin: 0 0 25px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* ========================================
       SECTION HEADINGS
    ======================================== */

    body.client-portal-page .mobile-home-section-heading {
        margin: 0 0 12px;
        gap: 12px;
    }

    body.client-portal-page .mobile-home-section-heading h3 {
        color: #183447;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-shadow: none;
    }

    body.client-portal-page .mobile-home-section-link {
        color: #1f7bc2;
        font-size: 13px;
        font-weight: 800;
        text-shadow: none;
    }

    /* ========================================
       NEXT VISIT
    ======================================== */

    body.client-portal-page #mobile-home-dashboard>.mobile-home-next-visit-card {
        margin: 0 0 25px;
        padding: 20px;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 7px 18px rgba(24,52,71,0.07);
    }

    body.client-portal-page .mobile-home-next-visit-card::before {
        height: 5px;
        background: linear-gradient(90deg,#f5ab40 0%,#ef602c 100%);
    }

    body.client-portal-page .mobile-home-card-eyebrow {
        color: #1f7bc2;
    }

    body.client-portal-page .mobile-home-next-visit-pets {
        color: #202a33;
        font-size: 25px;
        line-height: 1.2;
    }

    /* ========================================
       QUICK ACTIONS
    ======================================== */

    body.client-portal-page #mobile-home-dashboard>.mobile-home-section:has(.mobile-home-quick-actions) {
        margin-bottom: 26px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.client-portal-page .mobile-home-quick-actions {
        gap: 10px;
    }

    body.client-portal-page .mobile-home-quick-action {
        min-height: 62px;
        padding: 12px 11px;
        border: 1px solid #d6e4eb;
        border-radius: 16px;
        box-shadow: 0 5px 14px rgba(24,52,71,0.06);
        line-height: 1.3;
    }

    body.client-portal-page .mobile-home-quick-action-primary {
        background: linear-gradient(135deg,#f5b54e 0%,#f3a333 100%);
        color: #183447;
        border-color: transparent;
    }

    body.client-portal-page .mobile-home-quick-action-icon,
    body.client-portal-page .mobile-home-quick-action-primary .mobile-home-quick-action-icon {
        width: 27px;
        height: 27px;
        padding: 0;
        background: transparent;
        color: inherit;
        border: 0;
        border-radius: 0;
    }

    /* ========================================
       UPCOMING
    ======================================== */

    body.client-portal-page .mobile-home-upcoming-list {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 6px 16px rgba(24,52,71,0.06);
    }

    body.client-portal-page .mobile-home-upcoming-item {
        padding: 16px 14px;
        background: #ffffff;
    }

    body.client-portal-page .mobile-home-upcoming-date {
        background: #eaf5fa;
        color: #1f7bc2;
        border-radius: 11px;
    }

    /* ========================================
       LATEST UPDATE
    ======================================== */

    body.client-portal-page .mobile-home-latest-update {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #d6e4eb;
        border-radius: 18px;
        box-shadow: 0 6px 16px rgba(24,52,71,0.06);
    }

    /* ========================================
       EMPTY STATES
    ======================================== */

    body.client-portal-page .mobile-home-empty-state {
        padding: 20px 16px;
        background: #ffffff;
        color: #536b7a;
        border: 1px dashed #bfd4df;
        border-radius: 16px;
        box-shadow: none;
    }
}

/* ========================================
   HOME REDESIGN — COLOR AND HIERARCHY
======================================== */

@media (max-width:700px) {
    /* ========================================
       COMPACT QUICK ACTIONS
    ======================================== */

    body.client-portal-page #mobile-home-dashboard>.mobile-home-section:has(.mobile-home-quick-actions) {
        margin-bottom: 25px;
        padding: 14px 14px 15px;
        background: linear-gradient(135deg,#174b68 0%,#1d6f98 58%,#268db2 100%);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 18px;
        box-shadow: 0 7px 18px rgba(23,75,104,0.12);
    }

    body.client-portal-page .mobile-home-section:has(.mobile-home-quick-actions) .mobile-home-section-heading {
        margin-bottom: 10px;
    }

    body.client-portal-page .mobile-home-section:has(.mobile-home-quick-actions) .mobile-home-section-heading h3 {
        color: #ffffff;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    body.client-portal-page .mobile-home-quick-actions {
        gap: 8px;
    }

    body.client-portal-page .mobile-home-quick-action {
        min-width: 0;
        min-height: 50px;
        padding: 8px 10px;
        gap: 8px;
        background: #ffffff;
        color: #183447;
        border: 0;
        border-radius: 12px;
        box-shadow: 0 3px 9px rgba(7,42,63,0.10);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.client-portal-page .mobile-home-quick-action-primary {
        background: #f5ab40;
        color: #ffffff;
        border: 0;
        box-shadow: 0 4px 12px rgba(111,69,12,0.18);
    }

    body.client-portal-page .mobile-home-quick-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        padding: 6px;
        background: #eaf5fa;
        color: #1f7bc2;
        border: 0;
        border-radius: 9px;
    }

    body.client-portal-page .mobile-home-quick-action-primary .mobile-home-quick-action-icon {
        background: rgba(255,255,255,0.18);
        color: #ffffff;
    }

    body.client-portal-page .mobile-home-quick-action-icon svg {
        width: 18px;
        height: 18px;
    }

    /* ========================================
       UPCOMING CARD ACCENT
    ======================================== */

    body.client-portal-page .mobile-home-upcoming-list {
        position: relative;
        border-top: 4px solid #f5ab40;
    }

    /* ========================================
       UPCOMING DATE TILES
    ======================================== */

    body.client-portal-page .mobile-home-upcoming-date {
        background: linear-gradient(145deg,#fff4df 0%,#ffe5bb 100%);
        color: #183447;
        border: 1px solid rgba(245,171,64,0.30);
    }

    body.client-portal-page .mobile-home-upcoming-month {
        color: #d98218;
    }

    body.client-portal-page .mobile-home-upcoming-day {
        color: #183447;
    }

    /* ========================================
       UPCOMING SERVICE TEXT
    ======================================== */

    body.client-portal-page .mobile-home-upcoming-info strong {
        color: #245b78;
    }

    body.client-portal-page .mobile-home-upcoming-info span {
        color: #6b7785;
    }

    body.client-portal-page .mobile-home-upcoming-chevron {
        color: #e79528;
    }

   /* ========================================
      LATEST UPDATE ACCENT
   ======================================== */
   
       body.client-portal-page .mobile-home-latest-update {
           position: relative;
           border-top: 4px solid #f5ab40;
       }
   
       body.client-portal-page .mobile-home-latest-update-heading h3 {
           color: #245b78;
       }
   
       body.client-portal-page .mobile-home-latest-update-heading p {
           color: #6b7785;
       }
   
       body.client-portal-page .mobile-home-latest-update-note {
           color: #344b5c;
           line-height: 1.55;
       }
   
       body.client-portal-page .mobile-home-card-link {
           color: #1f7bc2;
       }
   
   }
   
   
   /* ========================================
      DESKTOP LATEST UPDATE
   ======================================== */
   
   @media (min-width:701px) {
   
       .client-portal-page .desktop-latest-update-section {
           margin: 0;
           padding: 0;
   
           background: transparent;
   
           border: 0;
           border-radius: 0;
   
           box-shadow: none;
       }
   
   
       .client-portal-page .desktop-latest-update {
           position: relative;
   
           overflow: hidden;
   
           margin: 0;
           padding: 0;
   
           background: #ffffff;
   
           border: 1px solid #d6e4eb;
           border-top: 4px solid #f5ab40;
           border-radius: 18px;
   
           box-shadow:
               0 6px 16px rgba(24,52,71,0.06);
       }
   
   
       /* ========================================
          SECTION HEADING
       ======================================== */
   
       .client-portal-page .desktop-latest-update-section-heading {
           margin: 0;
           padding:
               20px
               20px
               0;
       }
   
   
       .client-portal-page .desktop-latest-update-section-heading h3 {
           margin: 0;
   
           color: #183447;
   
           font-size: 22px;
           font-weight: 800;
           line-height: 1.2;
   
           letter-spacing: -0.02em;
       }
   
   
       /* ========================================
          UPDATE CONTENT
       ======================================== */
   
       .client-portal-page .desktop-latest-update-content {
           padding:
               18px
               20px
               20px;
       }
   
   
       .client-portal-page .desktop-latest-update-heading h3 {
           margin: 0;
   
           color: #245b78;
   
           font-size: 17px;
           font-weight: 850;
           line-height: 1.3;
       }
   
   
       .client-portal-page .desktop-latest-update-heading p {
           margin: 4px 0 0;
   
           color: #6b7785;
   
           font-size: 12px;
           font-weight: 600;
           line-height: 1.4;
       }
   
   
       /* ========================================
          PHOTO
       ======================================== */
   
       .client-portal-page .desktop-latest-update-photo {
           overflow: hidden;
   
           width: 100%;
   
           margin-top: 14px;
   
           aspect-ratio: 16 / 9;
   
           background: #edf2f5;
   
           border-radius: 14px;
       }
   
   
       .client-portal-page .desktop-latest-update-photo img {
           display: block;
   
           width: 100%;
           height: 100%;
   
           object-fit: cover;
       }
   
   
       /* ========================================
          NOTE
       ======================================== */
   
       .client-portal-page .desktop-latest-update-note {
           margin: 14px 0 0;
   
           color: #344b5c;
   
           font-size: 13px;
           line-height: 1.55;
       }
   
   
       /* ========================================
          VIEW UPDATE
       ======================================== */
   
       .client-portal-page .desktop-latest-update-button {
           display: flex;
   
           align-items: center;
           justify-content: space-between;
   
           gap: 10px;
   
           width: 100%;
   
           margin-top: 17px;
           padding: 13px 0 0;
   
           background: transparent;
   
           color: #1f7bc2;
   
           border: 0;
           border-top: 1px solid rgba(40,144,223,0.12);
   
           font-size: 13px;
           font-weight: 800;
           text-align: left;
   
           cursor: pointer;
       }
   
   
       .client-portal-page .desktop-latest-update-button span {
           font-size: 18px;
           line-height: 1;
       }
   
   
       /* ========================================
          EMPTY STATE
       ======================================== */
   
       .client-portal-page .desktop-latest-update-empty {
           padding:
               18px
               20px
               20px;
   
           color: #536b7a;
   
           font-size: 13px;
           line-height: 1.5;
           text-align: left;
       }
   
   }

/* ========================================
   MOBILE PORTAL INTRO
======================================== */

.mobile-portal-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background: var(--portal-intro-background,#f7941d);
    opacity: 1;
    transition: opacity 350ms ease;
}

.mobile-portal-intro.is-active {
    display: block;
}

.mobile-portal-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.mobile-portal-intro-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mobile-portal-intro-loading {
    position: absolute;
    top: 72%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 24px;
    color: #ffffff;
    font-family: Arial,sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.mobile-portal-intro-spinner {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 4px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: portal-intro-spin 800ms linear infinite;
}

body.portal-intro-open {
    overflow: hidden;
}

@keyframes portal-intro-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .mobile-portal-intro {
        transition: none;
    }

    .mobile-portal-intro-spinner {
        animation: none;
    }
}