#mobile-builtin-calendar {
    --booking-calendar-available-height: auto;
    background: var(--background-color) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    color: var(--text-primary) !important;
    padding: 18px 18px 10px !important;
    margin-top: 0 !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scroll-padding-bottom: 10px !important;
    box-sizing: border-box !important;
}

body.booking-calendar-open #booking-main-area,
html body.booking-calendar-open #booking-main-area,
body.booking-calendar-open #mobile-builtin-booking-container,
html body.booking-calendar-open #mobile-builtin-booking-container {
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0 !important;
}

body.booking-calendar-open #mobile-builtin-booking-container {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

#mobile-builtin-calendar .mobile-calendar-shell {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

#mobile-builtin-calendar #calendar-header {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

#mobile-builtin-calendar #calendar-back-slot {
    display: none !important;
}

#mobile-builtin-calendar #calendar-header > div:nth-child(2) {
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}

#mobile-builtin-calendar #calendar-header > div:nth-child(3) {
    display: none !important;
}

#mobile-builtin-calendar #calendar-month-year {
    margin: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

#mobile-builtin-calendar #booking-date-text {
    display: none !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

#mobile-builtin-calendar .mobile-calendar-nav {
    width: 100% !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 38px !important;
    margin: -2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] #mobile-builtin-calendar .mobile-calendar-nav,
[data-theme="dark-accent"] #mobile-builtin-calendar .mobile-calendar-nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar #prev-month,
#mobile-builtin-calendar #next-month {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .booking-calendar-nav-glyph {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 520 !important;
    transform: translateY(-1px) !important;
}

#mobile-builtin-calendar .mobile-calendar-nav-label {
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#mobile-builtin-calendar .mobile-calendar-nav-label::before {
    content: none !important;
}

[data-theme="dark"] #mobile-builtin-calendar .mobile-calendar-nav-label,
[data-theme="dark-accent"] #mobile-builtin-calendar .mobile-calendar-nav-label {
    background: transparent !important;
}

#mobile-builtin-calendar .mobile-calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
}

#mobile-builtin-calendar .mobile-calendar-weekdays div {
    padding: 0 2px 6px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

#mobile-builtin-calendar #calendar-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    border-top: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
}

[data-theme="dark"] #mobile-builtin-calendar #calendar-days,
[data-theme="dark-accent"] #mobile-builtin-calendar #calendar-days {
    background: transparent !important;
}

#mobile-builtin-calendar .calendar-day {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 62px !important;
    height: 62px !important;
    border: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 10px 6px !important;
    position: relative !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#mobile-builtin-calendar .calendar-day span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}

#mobile-builtin-calendar .calendar-day:active {
    transform: scale(0.985) !important;
}

#mobile-builtin-calendar .calendar-day:hover,
#mobile-builtin-calendar .calendar-day:focus-visible {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
    outline: none !important;
}

#mobile-builtin-calendar .calendar-day.is-today:not(.selected) {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 58%, transparent) !important;
    border-radius: 14px !important;
}

[data-theme="dark"] #mobile-builtin-calendar .calendar-day.is-today:not(.selected),
[data-theme="dark-accent"] #mobile-builtin-calendar .calendar-day.is-today:not(.selected) {
    background: transparent !important;
}

#mobile-builtin-calendar .calendar-day.selected {
    background: color-mix(in srgb, var(--primary-color) 24%, transparent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 62%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-radius: 14px !important;
}

[data-theme="dark"] #mobile-builtin-calendar .calendar-day.selected,
[data-theme="dark-accent"] #mobile-builtin-calendar .calendar-day.selected {
    background: color-mix(in srgb, var(--primary-color) 24%, transparent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 74%, transparent) !important;
}

#mobile-builtin-calendar .calendar-day.selected.has-booking,
#mobile-builtin-calendar .calendar-day.selected.has-services {
    background: color-mix(in srgb, #ff4d2d 34%, transparent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #ff4d2d 78%, transparent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#mobile-builtin-calendar .calendar-day.selected span,
#mobile-builtin-calendar .calendar-day.selected.has-booking span,
#mobile-builtin-calendar .calendar-day.selected.has-services span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#mobile-builtin-calendar .calendar-day.is-past {
    color: color-mix(in srgb, var(--text-secondary) 74%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 74%, transparent) !important;
    cursor: not-allowed !important;
}

#mobile-builtin-calendar .calendar-day.is-empty {
    pointer-events: none !important;
    opacity: 0 !important;
}

#mobile-builtin-calendar .calendar-day .calendar-day-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: 5px !important;
    transform: translateX(-50%) !important;
    opacity: 0.9 !important;
}

#mobile-builtin-calendar .calendar-day.is-full .calendar-day-dot {
    background: var(--text-secondary) !important;
    opacity: 0.6 !important;
}

#mobile-builtin-calendar .calendar-day.selected .calendar-day-dot {
    background: #22c55e !important;
    box-shadow: 0 0 8px color-mix(in srgb, #22c55e 58%, transparent) !important;
}

#mobile-builtin-calendar .mobile-calendar-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    padding: 0 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

#mobile-builtin-calendar .mobile-calendar-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#mobile-builtin-calendar .mobile-calendar-legend i {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    display: inline-block !important;
}

#mobile-builtin-calendar .mobile-calendar-legend i.is-booked {
    background: var(--text-secondary) !important;
    opacity: 0.6 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important;
    padding: 18px 0 0 !important;
    margin: 2px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head span {
    grid-column: 1 / -1 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 880 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head strong {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 26px !important;
    line-height: 1.02 !important;
    font-weight: 930 !important;
    letter-spacing: -0.035em !important;
}

#mobile-builtin-calendar .mobile-calendar-day-count {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-list {
    display: grid !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service,
#mobile-builtin-calendar .mobile-calendar-day-booking {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service h3,
#mobile-builtin-calendar .mobile-calendar-day-booking h3 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
    font-weight: 920 !important;
    letter-spacing: -0.02em !important;
}

#mobile-builtin-calendar .mobile-calendar-day-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 6px !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

#mobile-builtin-calendar .mobile-calendar-day-times {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time {
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service,
#mobile-builtin-calendar .mobile-calendar-premium-service * {
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service {
    display: grid !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    background: transparent !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service:last-child {
    border-bottom: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service-head > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service-head span {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service-head h3 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 930 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-service-head > em {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, #22c55e 35%, var(--border-color)) !important;
    background: color-mix(in srgb, #22c55e 8%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-style: normal !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-times {
    display: grid !important;
    gap: 8px !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-time {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important;
    background: color-mix(in srgb, var(--surface-color, #ffffff) 82%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    text-align: left !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-time strong {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-time span {
    min-width: 0 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 780 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#mobile-builtin-calendar .mobile-calendar-premium-time em {
    min-width: 58px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--text-primary) 16%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-time {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-time strong {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 20px !important;
    font-weight: 930 !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-time span {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 10px !important;
    font-weight: 880 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-call {
    margin-top: 10px !important;
    width: max-content !important;
    min-width: 132px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border: 1px solid var(--text-primary) !important;
    background: var(--text-primary) !important;
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 880 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-call i,
#mobile-builtin-calendar .mobile-calendar-booking-call span {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-call i {
    font-size: 12px !important;
}

#mobile-builtin-calendar .mobile-calendar-booking-call span {
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

#mobile-builtin-calendar .mobile-calendar-empty-day {
    padding: 18px 0 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Recoded owner day timeline */
#mobile-builtin-calendar .mobile-calendar-owner-timeline {
    position: relative !important;
    display: grid !important;
    gap: 0 !important;
    padding: 8px 0 0 !important;
}
/* Section headers between what's coming and what's already done. */
#mobile-builtin-calendar .mobile-calendar-owner-group-label {
    padding: 18px 2px 6px !important;
    color: rgba(5, 5, 5, 0.42) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-group-label:first-child {
    padding-top: 4px !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 2px !important;
    border-top: 1px solid rgba(5, 5, 5, 0.07) !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity .14s ease !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event:active {
    opacity: .55 !important;
}
/* A session that's already over reads as history, not as something to act on. */
#mobile-builtin-calendar .mobile-calendar-owner-event.is-done .mobile-calendar-owner-event-copy strong {
    color: rgba(5, 5, 5, 0.34) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.34) !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event.is-done .mobile-calendar-owner-event-copy span {
    color: rgba(5, 5, 5, 0.28) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.28) !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event.is-done .mobile-calendar-owner-event-status {
    border-color: rgba(5, 5, 5, 0.12) !important;
    background: transparent !important;
    color: rgba(5, 5, 5, 0.34) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.34) !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event:focus-visible {
    outline: none !important;
    border-color: var(--primary-color, #f04d2f) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #f04d2f) 16%, transparent) !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-time {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-time strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    letter-spacing: -0.02em !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-time small {
    color: rgba(5, 5, 5, 0.46) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.46) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
}
/* The next session up is the one the owner acts on. A literal green, not
   --primary-color: on this white surface that variable resolves to white. */
#mobile-builtin-calendar .mobile-calendar-owner-event.is-next .mobile-calendar-owner-event-time strong {
    color: #147a3a !important;
    -webkit-text-fill-color: #147a3a !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event.is-done .mobile-calendar-owner-event-time strong,
#mobile-builtin-calendar .mobile-calendar-owner-event.is-done .mobile-calendar-owner-event-time small {
    color: rgba(5, 5, 5, 0.32) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.32) !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-copy strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-copy span {
    color: rgba(5, 5, 5, 0.56) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.56) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-event-status {
    justify-self: end !important;
    width: max-content !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(5, 5, 5, 0.44) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.44) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-timeline .mobile-calendar-booking-call {
    margin: 0 !important;
    justify-self: end !important;
    width: max-content !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #050505 !important;
    border-color: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}
#mobile-builtin-calendar .mobile-calendar-owner-now-line {
    position: absolute !important;
    top: var(--calendar-now-top, -999px) !important;
    left: 74px !important;
    right: 0 !important;
    height: 1px !important;
    background: var(--primary-color, #f04d2f) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}
@media (max-width: 390px) {
    /* The flat row keeps its three columns here; only the time gutter tightens. */
    #mobile-builtin-calendar .mobile-calendar-owner-event { grid-template-columns: 70px minmax(0, 1fr) auto !important; }
    #mobile-builtin-calendar .mobile-calendar-owner-timeline .mobile-calendar-booking-call { width: max-content !important; }
}

/* calendar-redesign-20260810
   Tighter month, availability encoded as a weighted meter rather than an
   identical dot on every day. Shared by guest and owner. */
#mobile-builtin-calendar .calendar-day {
    min-height: 52px !important;
    height: 52px !important;
    padding: 8px 4px 6px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: center !important;
    border-radius: 12px !important;
}

#mobile-builtin-calendar .calendar-day span {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* The meter replaces the dot: width carries how open the day is. */
#mobile-builtin-calendar .calendar-day .calendar-day-meter {
    position: static !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 2px !important;
    transform: scaleX(var(--meter-scale, 1)) !important;
    transform-origin: center !important;
    display: block !important;
    opacity: 1 !important;
}

#mobile-builtin-calendar .calendar-day .calendar-day-meter.is-open {
    background: #16a34a !important;
}

#mobile-builtin-calendar .calendar-day .calendar-day-meter.is-tight {
    background: #86cea4 !important;
}

#mobile-builtin-calendar .calendar-day .calendar-day-meter.is-booked {
    background: color-mix(in srgb, var(--text-primary) 16%, transparent) !important;
}

/* Days with nothing at all keep the row rhythm without drawing a mark. */
#mobile-builtin-calendar .calendar-day .calendar-day-meter.is-none {
    background: transparent !important;
}

#mobile-builtin-calendar .calendar-day.selected {
    background: var(--text-primary) !important;
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
}

#mobile-builtin-calendar .calendar-day.selected span {
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
}

#mobile-builtin-calendar .calendar-day.selected .calendar-day-meter {
    background: var(--background-color) !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .calendar-day.is-past {
    opacity: 0.35 !important;
}

/* Legend gains the third state. */
#mobile-builtin-calendar .mobile-calendar-legend i {
    width: 14px !important;
    height: 3px !important;
    border-radius: 2px !important;
}

#mobile-builtin-calendar .mobile-calendar-legend i.is-open {
    background: #16a34a !important;
}

#mobile-builtin-calendar .mobile-calendar-legend i.is-tight {
    background: #86cea4 !important;
    opacity: 1 !important;
}

#mobile-builtin-calendar .mobile-calendar-legend i.is-booked {
    background: color-mix(in srgb, var(--text-primary) 16%, transparent) !important;
    opacity: 1 !important;
}

/* Month heading picks up the "N days with openings" subtitle. */
#mobile-builtin-calendar #mobile-calendar-open-count {
    display: block !important;
    margin-top: 5px !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* The base legend rule sets a round dot; the meter reads as a bar. */
#mobile-builtin-calendar .mobile-calendar-legend i,
#mobile-builtin-calendar .mobile-calendar-legend i.is-open,
#mobile-builtin-calendar .mobile-calendar-legend i.is-tight,
#mobile-builtin-calendar .mobile-calendar-legend i.is-booked {
    width: 14px !important;
    height: 3px !important;
    border-radius: 2px !important;
}

/* Month heading left-aligned with the controls on the right. */
#mobile-builtin-calendar #calendar-header {
    text-align: left !important;
}

#mobile-builtin-calendar #calendar-header > div:nth-child(2) {
    text-align: left !important;
}

#mobile-builtin-calendar #calendar-month-year {
    text-align: left !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

#mobile-builtin-calendar #mobile-calendar-open-count {
    text-align: left !important;
}

/* "Choose a booking date" duplicates the nav hint below it. */
#mobile-builtin-calendar #booking-date-text {
    display: none !important;
}

/* The day panel scrolls under a floating nav, so it needs the same clearance
   the service list got. */
#mobile-builtin-calendar .mobile-calendar-day-panel {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 200px) !important;
}

/* calendar-3a-structure-20260810
   Month + arrows on one row, tight grid, day sheet docked below. */
#mobile-builtin-calendar .mobile-calendar-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    padding: 0 !important;
}

#mobile-builtin-calendar #calendar-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 20px 0 !important;
    border: 0 !important;
    text-align: left !important;
}

#mobile-builtin-calendar #calendar-header > div:first-child {
    min-width: 0 !important;
    text-align: left !important;
}

#mobile-builtin-calendar #calendar-month-year {
    text-align: left !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
}

/* Arrows sit beside the month, not in their own row. */
#mobile-builtin-calendar .mobile-calendar-nav {
    display: flex !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-nav button {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--surface-color, #ffffff) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 14px !important;
}

#mobile-builtin-calendar .mobile-calendar-nav-label {
    display: none !important;
}

/* Single-letter weekday row, tight against the grid. */
#mobile-builtin-calendar .mobile-calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    padding: 18px 18px 8px !important;
    border: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-weekdays div {
    text-align: center !important;
    color: color-mix(in srgb, var(--text-primary) 42%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 42%, transparent) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

#mobile-builtin-calendar #calendar-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important;
    padding: 0 18px !important;
    border: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-legend {
    padding: 14px 22px 0 !important;
    gap: 8px 16px !important;
}

/* The day sheet docks below the month: white, rounded, its own scroll. */
#mobile-builtin-calendar .mobile-calendar-day-panel {
    margin: 18px 0 0 !important;
    padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 190px) !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: var(--surface-color, #ffffff) !important;
    box-shadow: 0 -8px 30px -12px color-mix(in srgb, var(--text-primary) 22%, transparent) !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
}

/* Grabber, so the sheet reads as draggable. */
#mobile-builtin-calendar .mobile-calendar-day-panel::before {
    content: "" !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    margin: 10px auto 0 !important;
    border-radius: 3px !important;
    background: color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head span {
    order: 2 !important;
    color: var(--primary-color, #ef4e2f) !important;
    -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head strong {
    order: 1 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

#mobile-builtin-calendar .mobile-calendar-day-count {
    order: 3 !important;
    font-style: normal !important;
}

/* Day-sheet service cards: name and price on one line, times as inline chips. */
#mobile-builtin-calendar .mobile-calendar-day-service {
    margin-top: 10px !important;
    padding: 14px 14px 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service h3 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}

#mobile-builtin-calendar .mobile-calendar-day-price {
    flex-shrink: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-meta {
    display: flex !important;
    gap: 5px !important;
    margin-top: 3px !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-times {
    display: flex !important;
    gap: 6px !important;
    margin-top: 11px !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 9%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* First opening reads as the suggested one. */
#mobile-builtin-calendar .mobile-calendar-day-time:first-child {
    background: var(--text-primary) !important;
    box-shadow: none !important;
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
}

/* The header row was collapsing: month overflowed under the arrows and the
   subtitle wrapped a word per line. Give the copy the free space and keep the
   arrows at their intrinsic width. */
/* An older rule makes this a grid, which stacks the copy and the arrows in one
   cell. Two explicit columns: copy takes the room, arrows keep their width. */
html body #mobile-builtin-calendar #calendar-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}

#mobile-builtin-calendar #calendar-header > div:first-child {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}

html body #mobile-builtin-calendar #calendar-header .mobile-calendar-nav {
    grid-column: 2 !important;
}

/* The old nav was a full-width 3-column grid (its own row). Beside the month
   it must be intrinsic width, or the arrows overlap the heading. */
#mobile-builtin-calendar .mobile-calendar-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: flex-start !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

#mobile-builtin-calendar #calendar-month-year {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#mobile-builtin-calendar #mobile-calendar-open-count {
    white-space: nowrap !important;
}

/* "Choose a booking date" is redundant beside the month heading. JS sets this
   inline in setCalendarCopy(), so it needs the id-level override. */
#mobile-builtin-calendar #booking-date-text,
#mobile-builtin-calendar p#booking-date-text[style] {
    display: none !important;
}

/* The lifted sheet read as a different UI sitting on top of the calendar.
   Flatten it: same ground, a hairline instead of a shadow, no grabber. */
#mobile-builtin-calendar .mobile-calendar-day-panel {
    margin: 20px 0 0 !important;
    padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 190px) !important;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel::before {
    content: none !important;
    display: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-panel-head {
    padding: 18px 0 0 !important;
}

/* Service rows sit on the page rather than in their own cards. */
#mobile-builtin-calendar .mobile-calendar-day-service {
    margin: 0 !important;
    padding: 16px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service + .mobile-calendar-day-service {
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}

/* The head pills and the service outline were the last raised bits. Plain type
   and a hairline read as one continuous surface. */
#mobile-builtin-calendar .mobile-calendar-day-panel-head span,
#mobile-builtin-calendar .mobile-calendar-day-panel-head strong,
#mobile-builtin-calendar .mobile-calendar-day-count {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-count {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Later single-selector rules re-add the pill background and the card border,
   so these have to come last and target the same elements directly. */
#mobile-builtin-calendar .mobile-calendar-day-panel-head strong {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin: 0 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-service + .mobile-calendar-day-service {
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}

/* Divider between the legend and the day list removed — spacing carries it. */
#mobile-builtin-calendar .mobile-calendar-day-panel {
    border-top: 0 !important;
}

/* Day panel uses the same time tiles as the home cards: 3-up grid, clock over
   meridiem, filled when selected. */
#mobile-builtin-calendar .mobile-calendar-day-times {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 11px !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time {
    min-height: 52px !important;
    flex: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f7f7f8 !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.09) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time .booking-guest-time-clock {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time .booking-guest-time-meridiem {
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* The old "first slot is filled black" treatment doesn't apply here — nothing
   is selected until the guest taps. */
#mobile-builtin-calendar .mobile-calendar-day-time:first-child {
    background: #f7f7f8 !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.09) !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time:first-child .booking-guest-time-clock {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

#mobile-builtin-calendar .mobile-calendar-day-time:active {
    transform: scale(0.97) !important;
}