/* Customer booking page */

.booking-heading {

    text-align: center;

    margin-bottom: 18px;

}

.booking-heading h2 {

    margin-bottom: 4px;

}

.booking-panel {
    margin-top: 20px;
    padding: 10px;
}

.booking-submit {

    margin: 15px;

}


.service-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
}

.service-selector-grid{
    display:flex;
    flex-direction:column;
    width:max-content;
    gap:12px;
    align-items:stretch;
}

.summary-open,
.summary-full{
    position:absolute;
    right:18px;
}

.booking-header {

    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
    margin-right:30px;

}


.booking-header h2 {

    margin:0;
    font-size:1.5rem;

}

.booking-actions {
    margin-top:24px;
}

.btn.disabled {

    opacity:.5;
    cursor:not-allowed;

}

.summary-addon{
    margin-bottom:10px;
}

.summary-field
{
    flex:1;
    text-align: left;
}

.summary-label
{
    font-size:.75rem;
    font-weight: 700;
    text-align: left;
    margin-bottom:8px;
}

.summary-value
{
    font-weight:bold;
    padding:4px 0;
    text-align: left;
}

.summary-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
}

#summaryTotalLabel {
    text-align: right;
}

#bookingTotal {
    min-width: 80px;
    text-align: right;
}


#submitBooking:disabled {

    opacity:0.45;

    cursor:not-allowed;

    filter:grayscale(40%);

}


#submitBooking:not(:disabled){

    opacity:1;

    cursor:pointer;

}

#summaryPanel h3 {
    margin-top:0;
}

.summary-panel {
    margin-top:0;
    padding-top:10px;
}

.summary-line{
    display:grid;
    grid-template-columns:1fr var(--summary-price-width);
    column-gap:20px;
    align-items:start;
}

.summary-price {
    width:var(--summary-price-width);
    text-align:right;
    font-weight:700;
    white-space:nowrap;
    align-self:center;
}

.staff-selector-hidden {
    display:none;
}

/* Calendar */

.calendar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.calendar-grid {
    display: grid;
    gap: 3px;

    /*
     * Seven genuinely equal columns.
     *
     * minmax(0, 1fr) prevents contents such as
     * START / ARR / "2 VISITS" from determining
     * the minimum width of a calendar column.
     */
    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    /* Weekday header + only the week rows this month needs. */
    grid-template-rows:
        30px
        repeat(var(--calendar-week-rows, 6), 58px);

    width: 100%;
    min-width: 0;

    min-height: 0;
}


.calendar-weekday {
    text-align:center;
    font-weight:bold;
}

.calendar-day {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    margin:0;
    min-height:60px;
    border-radius:8px;
    padding:6px;
    text-align:center;
    background:#eee;
}

.calendar-day.calendar-available{
    background:#d9f5d9;
    cursor:pointer;
}

.calendar-day.calendar-partial{
    background:#ffe69a;
    cursor:pointer;
}

.calendar-day.calendar-unavailable {
    background:#eceff1;
    color:#8a939c;
    border:1px solid #d6dce2;
    cursor:not-allowed;
    opacity:.55;
}

.calendar-day.calendar-unavailable:hover {
    transform:none;
}

.calendar-day.selected-date,
.calendar-day.selected-start,
.calendar-day.selected-end {
    background: #2b74c8;
    color: white;
    font-weight: bold;
    border: 2px solid #2b74c8;
}

.calendar-day.selected-range {
    background: #cfe4ff;
}


.slot-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:20px;
}




.slot-button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:60px;
    padding:6px;
}

.slot-label{
    align-self:flex-start;
    min-height:.8rem;
    font-size:.55rem;
    font-weight:700;
    line-height:1;
}

.slot-time{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}


.slot-button.selected,
.slot-button.selected-end-time {
    background:#006DB0;
    color:white;
    border-color:#006DB0;
}

.slot-button:hover{
    background:#43a047;
    color:white;
}

.slot-button:disabled,
.slot-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.booking-note{
    text-align:center;
    color:#666;
    margin:18px 0;
    font-style:italic;
}


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

.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;

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


.booking-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.booking-modal-content{
    position:relative;
    z-index:1;
    display:inline-block;
    width:auto;
    min-width:0;
    background:white;
    border-radius:12px;
    padding:10px 24px 20px;
}

.booking-modal-close{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}


.booking-modal-header{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;

    padding:0 35px;
    margin-bottom:10px;
}

.booking-modal-header h3{
    margin:0;
}



.booking-modal-footer{
    display:flex;
    justify-content:center;
    margin-top:25px;
}

.summary-service-row{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    gap:16px;
}

#summaryService{
    flex:1;
    text-align:left;
}

.service-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.summary-meta{
    margin-top:2px;
    margin-bottom:10px;
    font-size:.82rem;
    color:#777;
}



:root{
    --summary-price-width:90px;
}

#summaryServicePrice{
    width:var(--summary-price-width);
    margin-left:auto;
    text-align:right;
    font-weight:700;
    white-space:nowrap;
    align-self:center;
}


.summary-selector {
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:46px;
    padding:.65rem .9rem;

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

    background:#fff;
    cursor:pointer;
    text-align:left;

    gap:.75rem;
    transition:.15s;
}

.summary-selector:hover {
    border-color:var(--ohm-blue);
    background:#fafafa;
}



.summary-selector > span,
.summary-selector-info {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

.summary-selector-icon {
    flex: 0 0 22px;
    text-align: center;
    font-size: 1.1rem;
}

.summary-selector-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    color: #777;
}

.summary-main-selector {
    width:100%;
    max-width:420px;
    min-width:420px;
}

.summary-schedule-selector {
    width:max-content;
    min-width:200px;
}

.summary-schedule-selector .summary-selector-info {
    flex-direction:row;
    align-items:center;
}

#summaryPets{
    flex:1;
    text-align:left;
}

#summaryPetsPrice{
    width:var(--summary-price-width);
    margin-left:auto;
    text-align:right;
    font-weight:700;
    white-space:nowrap;
    align-self:center;
}


.summary-modifier-price {
    width:var(--summary-price-width);
    text-align:right;
    font-weight:700;
    white-space:nowrap;
    align-self:center;
}

.summary-addons{
    flex: 1;
    gap:8px;
    margin-top:8px;
}


.summary-addons .checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font: inherit;
    color: inherit;
}

.checkbox-row input {
    margin-top:4px;
}

.modifier-info {
    flex:1;
}

.booking-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom:12px;
}

.calendar-nav {
    display: grid;
    grid-template-columns:
        50px
        1fr
        1fr
        50px;

    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.calendar-month{
    flex:1;
    min-width:320px;
}

.calendar-month-title {
    text-align: center;
    font-weight: 600;
}

#calendarPrev {
    justify-self: start;
}

#calendarNext {
    justify-self: end;
}

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

    gap: 20px;

    width: 100%;
    min-width: 0;
}

.calendar-modal-content {
    width: 850px;
    max-width: calc(100vw - 32px);
}

#calendarModal .calendar-month-title-mobile {
    display: none;
}

#calendarModal .schedule-selection-helper {
    margin: 6px 0 0;
    text-align: center;
}

#calendarModal .schedule-picker-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
}

#calendarModal .schedule-picker-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}


.calendar-empty {
    pointer-events: none;
}

.schedule-grid {
    display:grid;
    grid-template-columns:max-content 1fr 1fr;
    gap:8px 16px;
    align-items:center;
}

.summary-selector-button {
    justify-self: start;
}

.time-modal-content{
    width:420px;
    max-width:90vw;

    max-height:90vh;

    display:flex;
    flex-direction:column;
}

.time-targets{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:20px;
}


.time-target{
    padding:10px 18px;
    border:2px solid #d8dee5;
    border-radius:8px;
    cursor:pointer;
    background:white;
    font-weight:600;
}


.time-target.active{
    border-color:var(--ohm-blue);
    background:#eef7fd;
}


.modal-slot-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.modal-time-slot{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    min-height:46px;
    padding:4px 6px;
}


.modal-time-slot.selected{
    background:#006DB0;
    color:white;
}


.modal-time-slot:not(:disabled):hover {
    background: green;
    cursor: pointer;
}

.modal-time-slot:disabled {
    cursor: not-allowed;
}

.modal-slot-time{
    display:flex;
    justify-content:center;
    align-items:center;

    font-weight:600;
    line-height:1;
}

.modal-slot-label{
    min-height:auto;
    margin-bottom:2px;
    font-size:.70rem;
    line-height:1;
}

.modal-service-name{
    text-align:center;
    font-weight:bold;
    font-size:1.15rem;

    margin:0 0 10px;
}

.time-date-refresher {
    width: 100%;
    max-width: 320px;
    margin:0 auto 12px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    text-align: center;
}


.time-refresher-cell {
    padding: 8px;
    border-radius: 8px;
    background: #f5f5f5;
}

.time-refresher-buttons {
    grid-column: 1 / -1;
    grid-row: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.time-target {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 18px;
    border: 2px solid #d8dee5;
    border-radius: 8px;

    cursor: pointer;
    background: white;
    font-weight: 600;
}

#modalTimeSlots{
    flex:1;
    min-height:0;       /* critical for flex scrolling */
    overflow-y:auto;
    overflow-x:hidden;

    padding-right:4px;  /* keeps scrollbar off the buttons */
}

.time-date-refresher.time-refresher-visit {
    grid-template-columns: 1fr;
}

.time-date-refresher.time-refresher-visit
.time-refresher-buttons {
    grid-column: 1;
    grid-template-columns: 1fr;
}

.booking-modal-header,
.modal-service-name,
.time-date-refresher,
.booking-modal-footer{
    flex-shrink:0;
}

.guest-pet-picker{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:260px;
}

.guest-pet-row{
    display:flex;
    align-items:center;
    gap:14px;
}

.guest-pet-label{
    flex:1;
    font-weight:600;
    font-size:1rem;
}

.guest-pet-count{
    width:28px;
    text-align:center;
    font-weight:700;
    font-size:1.15rem;
}

.guest-pet-controls{
    display:flex;
    align-items:center;
    gap:20px;
}

.pet-count-button{
    appearance:none;
    -webkit-appearance:none;

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

    width:42px;
    height:42px;
    padding:0;

    border:0;
    border-radius:50%;

    background: var(--ohm-blue);
    color:#fff;

    font-size:26px;
    font-weight:700;
    line-height:1;

    cursor:pointer;
    flex-shrink:0;
}

.pet-count-button:hover{
    filter:brightness(1.08);
}

.pet-count-button:active{
    transform:scale(.96);
}

.pet-count-button:disabled{
    opacity:.35;
    cursor:default;
}




.calendar-modal-content .booking-modal-header {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

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




.service-card-select:hover{
    border-color:var(--ohm-blue);
}

.service-card-select.selected{
    border-color:var(--ohm-blue);
    background:#eef7fd;
    box-shadow:0 0 0 3px rgba(0,109,176,.15);
}



.service-description{
    margin-top:6px;
    color:#555;
    line-height:1.5;
}

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

    margin-top:16px;
    padding-top:12px;

    border-top:1px solid #eee;
    gap:32px;               /* add this */
}

.service-duration{
    color:#777;
    font-size:.9rem;
    flex:1;
}

.service-price{
    font-size:1.2rem;
    font-weight:700;
    color:var(--ohm-blue);

    text-align:right;
    min-width:80px;
}


.service-bullets{
    margin:12px 0 0;
    padding-left:22px;      /* use padding instead of left margin */
    width:100%;

    list-style-position:outside;
    text-align:left;
}

.service-bullets li{
    margin:0 0 8px;
    line-height:1.45;
    text-align:left;
}


@media (max-width: 600px) {

    /*
    |--------------------------------------------------------------------------
    | Service Selection Modal
    |--------------------------------------------------------------------------
    */

    #serviceModal {
        align-items: stretch;
    }


    #serviceModal .booking-modal-content {
        width: calc(100vw - 16px);
        max-width: none;

        max-height: calc(100dvh - 16px);
        margin: 8px auto;

        padding: 10px 12px 16px;

        overflow-y: auto;
        overflow-x: hidden;
    }


    #serviceModal .service-selector-grid {
        width: 100%;
        max-width: 100%;

        gap: 12px;
    }


    #serviceModal .service-card-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        padding: 14px;

        gap: 14px;
    }


    #serviceModal .service-card-info {
        min-width: 0;
    }


    #serviceModal .service-icon {
        flex: 0 0 58px;

        width: 58px;
        height: 58px;

        font-size: 1.65rem;
    }

}

@media (max-width: 600px) {

    /*
    |--------------------------------------------------------------------------
    | Calendar Modal
    |--------------------------------------------------------------------------
    */

    #calendarModal {
        align-items: stretch;
    }


    #calendarModal .calendar-modal-content {
        width: calc(100vw - 16px);
        max-width: none;

        max-height: calc(100dvh - 16px);
        margin: 8px auto;

        padding: 10px 10px 16px;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /*
    |--------------------------------------------------------------------------
    | Stack Months Vertically
    |--------------------------------------------------------------------------
    */

    #calendarModal .calendar-nav {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
    }

    #calendarModal #month2Title {
        display: none;
    }

    #availabilityCalendar {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    #calendarModal .calendar-month {
        width: 100%;
        min-width: 0;
    }

    #calendarModal .calendar-month-title-mobile {
        display: block;
        margin: 0 0 6px;
        text-align: center;
        font-weight: 600;
    }

    #calendarModal .schedule-selection-helper {
        margin: 6px 0 0;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }

    #calendarModal .schedule-picker-footer {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 0;
    }

    #calendarModal .schedule-picker-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    #calendarModal .schedule-picker-footer button {
        min-width: 0;
        padding-inline: 10px;
    }

}


.summary-addons {
    font-size:1rem;
    font-weight:400;
    color:var(--ohm-dark);
}

.summary-addons .checkbox-row,
.summary-addons .checkbox-row * {
    font:inherit;
}


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

.booking-schedule {
    padding-top: 10px;
}

.schedule-mode-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.schedule-mode-button {
    appearance: none;
    border: none;
    background: #fff;
    color: var(--ohm-blue);
    border: 1px solid var(--ohm-blue);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.schedule-mode-button:hover {
    background: var(--ohm-blue);
    color: #fff;
}

.schedule-mode-button.active {
    background: var(--ohm-blue);
    color: #fff;
}


/* Individual scheduling fields */

.schedule-mode-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.schedule-mode-panel[hidden] {
    display: none !important;
}

.schedule-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-field-label {
    font-size: 0.9rem;
    font-weight: 600;
}


/* Schedule selector buttons */

.schedule-selector {
    width: 100%;
}


/* Weekly day buttons */

.recurring-day-selector {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.recurring-day-button {
    appearance: none;
    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid var(--ohm-blue);
    border-radius: 8px;

    background: #fff;
    color: var(--ohm-blue);

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

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.recurring-day-button:hover {
    background: var(--ohm-blue);
    color: #fff;
}

.recurring-day-button.active {
    background: var(--ohm-blue);
    color: #fff;
}

.schedule-selector-compact {
    width: fit-content !important;
    display: inline-flex;
    align-self: flex-start;
}

.selected-date-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.selected-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eef5ff;
    border: 1px solid #c9dcf5;
    font-size: 0.9rem;
}

.selected-date-day,
.selected-date-time {
    display: block;
}

.booking-summary-title .summary-meta {
    margin-left: 6px;
    font-size: .82rem;
    font-weight: 400;
    color: #777;
}

.booking-estimate-note {
    margin-bottom:0;
    padding-bottom:20px;
}

.selected-date-through {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: bold;
}

.summary-service-description {
    padding-top: 10px;
}

.service-area-button {
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}


/* Not selected */
.service-area-button:not(.active) {
    background: transparent;
    color: var(--ohm-blue);
    border-color: var(--ohm-blue);
    opacity: 0.65;
}


/* Not selected, but clearly clickable */
.service-area-button:not(.active):hover {
    background: transparent;
    color: var(--ohm-blue);
    border-color: var(--ohm-blue);
    opacity: 1;
}


/* Selected */
.service-area-button.active {
    opacity: 1;
}


.booking-provider-section[hidden],
.booking-provider-card[hidden] {
    display:none;
}


.booking-provider-scroller {
    width:100%;
    overflow-x:auto;
    padding:4px 2px 12px;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
}


.booking-provider-list {
    display:flex;
    justify-content:flex-start;
    gap:14px;
    width:max-content;
    min-width:100%;
}


.booking-provider-card {
    display:flex;
    flex:0 0 180px;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px;
    border:1px solid #d5e0e8;
    border-radius:14px;
    background:#f8fbfd;
    text-align:center;
    transition:border-color .15s ease, box-shadow .15s ease;
}


.booking-provider-card.is-selected {
    border-color:var(--ohm-blue);
    box-shadow:0 0 0 2px rgba(0,109,176,.12);
}


.booking-provider-profile-link {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    color:inherit;
    text-decoration:none;
}


.booking-provider-profile-link:hover strong {
    color:var(--ohm-blue);
}


.booking-provider-profile-link > span:last-child {
    color:var(--ohm-blue);
    font-size:.82rem;
    text-decoration:underline;
}


.booking-provider-photo {
    display:block;
    width:88px;
    height:88px;
    border-radius:12px;
    object-fit:cover;
}


.booking-provider-photo-fallback {
    display:grid;
    place-items:center;
    background:#dceef8;
    color:var(--ohm-blue);
    font-size:2rem;
    font-weight:700;
}


.booking-provider-select {
    width:auto;
    margin-top:auto;
    white-space:nowrap;
}


.booking-provider-select:disabled {
    opacity:1;
    background:var(--ohm-blue);
    cursor:default;
}
.booking-advanced {
    max-width: 1000px;
}

.summary-section {
    margin-bottom: 32px;
}

.summary-section:last-of-type {
    margin-bottom: 0;
}


.booking-modal-footer {
    display: flex;
    align-items: center;
}

.schedule-picker-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.schedule-picker-footer #clearDateSelection {
    grid-column: 1;
    justify-self: start;
}

.schedule-picker-footer .schedule-selection-helper {
    grid-column: 2;
    justify-self: center;

    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ohm-blue);

    white-space: nowrap;
}

.schedule-picker-footer #saveDateSelection {
    grid-column: 3;
    justify-self: end;
}

#timeModalServiceName {
    font-size: 1.35rem;
    font-weight: 700;
}

.time-refresher-label {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.time-refresher-value {
    margin-top: 4px;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.housesit-selected-date {
    overflow: hidden;
}

.housesit-schedule-edit:hover {
    background: #eef6fb;
}

.housesit-schedule-edit:focus-visible {
    outline: 2px solid var(--ohm-blue);
    outline-offset: -2px;
}

.customer-service-description {
    margin-top: 18px;
}
.customer-description-label {
    display: block;
    margin-bottom: 8px;
}
.service-radius-required[hidden] {
    display:none !important;
}
.selected-date-editable {
    font: inherit;
    color: inherit;
    cursor: pointer;
}




.calendar-day {
    position: relative;
    box-sizing: border-box;

    /*
     * Fixed calendar-cell height prevents the entire calendar/modal
     * from growing when labels such as "1 VISIT" are added.
     */
    height: 58px;
    min-height: 58px;

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


/*
|--------------------------------------------------------------------------
| Calendar label
|--------------------------------------------------------------------------
|
| Always reserve one line for ARR / DEP / START / "X VISITS".
| Even an empty .calendar-label therefore occupies the same space.
|
*/

.calendar-label {
    width: 100%;
    min-width: 0;

    height: 14px;
    min-height: 14px;
    line-height: 14px;

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

    text-align: center;
    white-space: nowrap;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Calendar date number
|--------------------------------------------------------------------------
*/

.calendar-number {
    line-height: 20px;
}

.calendar-month,
.calendar-day,
.calendar-empty,
.calendar-weekday {
    min-width: 0;
}

.booking-policy-link {
    padding: 0;

    border: 0;
    background: none;

    color: var(--ohm-blue);

    font: inherit;
    font-size: 0.9rem;

    text-decoration: underline;
    cursor: pointer;
}

.booking-policy-link:hover {
    text-decoration: none;
}

.cancellation-policy-modal-content {
    width: 520px;
    max-width: calc(100vw - 32px);
}

.cancellation-policy-text {
    margin-top: 18px;

    line-height: 1.55;
    white-space: pre-line;
}

.summary-submit {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 15px;
}

.summary-submit #submitBooking {
    margin-left: auto;
}

.booking-policy-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

@media (max-width: 600px) {
    .summary-submit {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .summary-submit .booking-policy-links {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .summary-submit #submitBooking {
        margin-left: 0;
        align-self: center;
    }
}


/* ==========================================================================
   SELECTED SERVICE / PET VISUALS
   ========================================================================== */

.summary-selected-service {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.summary-selected-service-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 1.35rem;
    line-height: 1;
}

.summary-selected-pets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.summary-selected-pet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.summary-selected-pet-photo {
    flex: 0 0 34px;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.summary-selected-pet-photo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3f6;
    font-size: 1rem;
}

.summary-selected-pet-name {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Give the pet selector only the small amount of extra height the thumbnail needs. */
#summaryPetsButton:has(.summary-selected-pets) {
    min-height: 52px;
}


/* Keep selected thumbnail/name groups in one horizontal row when space allows. */
#summaryPets .summary-selected-pets {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

#summaryPets .summary-selected-pet {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}


/* Selected service stays icon + name on one horizontal line. */
#summaryService .summary-selected-service {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}


/* ==========================================================================
   Selected service / pet selector polish
   ========================================================================== */

/* Keep the selected service icon + name side-by-side. */
#summaryService .summary-selected-service {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* Keep selected pets side-by-side instead of inheriting the generic
   .summary-selector-info column layout. */
#summaryPets .summary-selected-pets {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Compact pet cell: 4px between photo and selector border. */
#summaryPetsButton {
    padding: 4px;
    padding-left: 4px;
}

#summaryPets .summary-selected-pet {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Squarer pet thumbnail. */
#summaryPets .summary-selected-pet-photo,
#summaryPets .summary-selected-pet-photo-fallback {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 6px;
    object-fit: cover;
}

/* Match the visual weight of the selected service name. */
#summaryPets .summary-selected-pet-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
}


/* Service icon may contain multiple emoji (e.g. walker + dog).
   Never allow the emoji sequence to wrap vertically. */
#summaryService .summary-selected-service-icon {
    width: auto;
    min-width: 30px;
    height: 30px;
    white-space: nowrap;
    flex-wrap: nowrap;
}

/* Main date picker: centered guidance and three equal button positions. */
#calendarModal #calendarSelectionHelper {
    color: var(--ohm-blue, #006DB0);
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    margin: 6px 0;
}
#calendarModal .schedule-picker-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}
#calendarModal .schedule-picker-actions { display: contents; }
#calendarModal .schedule-picker-footer button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    align-self: stretch;
}
#calendarModal #clearDateSelection { grid-column: 1; }
#calendarModal #cancelDateSelection { grid-column: 2; }
#calendarModal #saveDateSelection { grid-column: 3; }

/* Chat and submit remain beside one another, with a 25px gap. */
.summary-submit .booking-submit-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: auto;
    min-width: 0;
}
.summary-submit .booking-submit-actions #submitBooking { margin-left: 0; }
.booking-submit-actions button { white-space: normal; }
@media (max-width:600px) {
    .summary-submit .booking-submit-actions { margin-left: 0; width: 100%; justify-content: center; }
    .booking-submit-actions button { min-width: 0; flex: 1; }
}