:root { --nb-primary: #ad73d7; --nb-accent: #e6c0ac; --nb-bg-color: #1a1018; --nb-panel-bg: #221621; --nb-border: #4a3148; --nb-slot-available: #b3e6bf; --nb-slot-unavailable: #8d5a48; --nb-slot-booked: #6f4555; --nb-selection: #f4c8d5; --nb-button-start: #ad73d7; --nb-button-end: #e6c0ac; --nb-button-border: #ffffff; --nb-button-text: #ffffff; --nb-unavailable-opacity: 0.5; --nb-today-highlight: #d6b36f; --nb-closed-day: #47313f; --nb-slot-hover: #d9f3df; --nb-input-bg: #2a1c29; --nb-input-text: #f7ecf2; --nb-input-border: #5b4057; --nb-input-focus: #ad73d7; --nb-checkbox-accent: #ad73d7; --nb-calendar-heading: #fff5fb; --nb-available-text: #102319; --nb-unavailable-text: #f7ecf2; --nb-booked-text: #fff1f5; --nb-selection-text: #2f1723; --nb-closed-day-text: #cfb7c4; --nb-summary-bg: #3b2539; --nb-summary-border: #ad73d7; --nb-summary-text: #cfb7c4; --nb-summary-label: #e6c0ac; --nb-summary-value: #f7ecf2; --nb-bg: linear-gradient(155deg, rgba(17, 11, 16, 0.98) 0%, rgba(34, 19, 28, 0.98) 48%, rgba(56, 35, 44, 0.98) 100%); --nb-bg-shine: linear-gradient(125deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01) 26%, transparent 52%); --nb-card: rgba(26, 16, 24, 0.94); --nb-card-border: rgba(231, 213, 223, 0.16); --nb-text: #f7ecf2; --nb-heading: #fff5fb; --nb-muted: #cfb7c4; --nb-service-bg: #34243a; --nb-service-border: #8f64a8; --nb-service-title: #fff5fb; --nb-service-text: #cfb7c4; --nb-service-active-bg: #f4c8d5; --nb-service-active-border: #ad73d7; --nb-service-active-text: #2f1723; --nb-service-badge-bg: #3b2539; --nb-service-badge-text: #e6c0ac; --nb-label: #ead6e3; --nb-notice: #e6c0ac; --nb-error: #ffb6c8; --nb-accent-strong: var(--nb-primary); --nb-nude: #e6c0ac; --nb-brown: #7b4e3f; --nb-success: #b3e6bf; --nb-danger: #4a2c37; --nb-glow: 0 24px 60px rgba(99, 44, 123, 0.24); --nb-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.12); --nb-radius: 0px; --nb-card-radius: 0px; --nb-choice-radius: 0px; --nb-status-radius: 0px; --nb-slot-radius: 0px; --nb-button-radius: 0px; --nb-input-radius: 0px; --nb-gap: 12px; --nb-card-padding: 22px; --nb-font-base: 14px; --nb-font-heading: 22px; --nb-font-section-title: 18px; --nb-font-service-title: 16px; --nb-font-slot: 14px; --nb-font-label: 13px; --nb-font-button: 15px; --nb-weight-heading: 700; --nb-weight-button: 700; } .nb-booking-app { color: var(--nb-text); font-family: "Segoe UI", sans-serif; font-size: var(--nb-font-base); } .nb-booking-shell { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: var(--nb-gap); padding: 28px; border: 1px solid color-mix(in srgb, var(--nb-accent) 34%, transparent); border-radius: var(--nb-radius); background: var(--nb-bg); box-shadow: var(--nb-glow); position: relative; overflow: hidden; } .nb-booking-shell::before { content: ""; position: absolute; inset: 0; background: var(--nb-bg-shine); pointer-events: none; } .nb-booking-column, .nb-booking-panel-card { background: var(--nb-card); border: 1px solid var(--nb-border); border-radius: var(--nb-card-radius); backdrop-filter: blur(14px); box-shadow: var(--nb-gloss); } .nb-booking-calendar-panel { padding: 0; grid-column: 2; grid-row: 1 / span 3; display: grid; gap: var(--nb-gap); align-content: start; } .nb-booking-form-panel { display: contents; } .nb-booking-form-panel [data-step="services"] { grid-column: 1; grid-row: 1; } .nb-booking-form-panel [data-step="staff"] { grid-column: 1; grid-row: 2; } .nb-booking-form-panel [data-step="contact"] { grid-column: 1; grid-row: 3; } .nb-booking-calendar-panel [data-step="schedule"] { height: 100%; } .nb-booking-step-card { position: relative; } .nb-booking-step-card.is-current { border-color: var(--nb-accent); background: linear-gradient(90deg, color-mix(in srgb, var(--nb-accent) 18%, transparent), transparent 34%), var(--nb-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-accent) 76%, transparent), 0 0 0 7px color-mix(in srgb, var(--nb-primary) 24%, transparent), 0 18px 42px color-mix(in srgb, var(--nb-primary) 26%, transparent), var(--nb-gloss); transform: translateY(-1px); } .nb-booking-step-card.is-current::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 5px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--nb-accent), var(--nb-primary)); box-shadow: 0 0 16px color-mix(in srgb, var(--nb-accent) 66%, transparent); pointer-events: none; } .nb-booking-step-card.is-current::after { content: ""; position: absolute; inset: 6px; border: 2px solid color-mix(in srgb, var(--nb-accent) 56%, transparent); border-radius: calc(var(--nb-card-radius) - 2px); pointer-events: none; } .nb-booking-step-card.is-current .nb-booking-panel-head h3 { color: var(--nb-accent); } .nb-booking-panel-card { padding: var(--nb-card-padding); } .nb-booking-panel-head, .nb-booking-week-nav, .nb-booking-legend, .nb-booking-services, .nb-booking-field-grid { display: flex; } .nb-booking-panel-head { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .nb-booking-eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--nb-label); font-weight: 800; } .nb-booking-panel-head h2, .nb-booking-panel-card h3 { margin: 0; color: var(--nb-heading); font-size: var(--nb-font-heading); font-weight: var(--nb-weight-heading); } .nb-booking-step-description { margin: 6px 0 0; color: var(--nb-muted); font-size: 0.9rem; } .nb-booking-week-nav { align-items: center; gap: 10px; } .nb-booking-week-button, .nb-booking-service, .nb-booking-submit, .nb-booking-reset { border-radius: var(--nb-button-radius); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .nb-booking-week-button { width: 38px; height: 38px; background: linear-gradient(180deg, color-mix(in srgb, var(--nb-panel-bg) 82%, var(--nb-primary)), color-mix(in srgb, var(--nb-panel-bg) 94%, transparent)); color: var(--nb-heading); border: 1px solid color-mix(in srgb, var(--nb-border) 82%, transparent); cursor: pointer; } .nb-booking-week-button:hover, .nb-booking-service:hover, .nb-booking-submit:hover, .nb-booking-reset:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--nb-primary) 28%, transparent); } .nb-booking-week-label { min-width: 170px; text-align: center; font-weight: 600; color: var(--nb-accent); } .nb-booking-legend { flex-wrap: wrap; gap: 14px; margin-bottom: 18px; font-size: 0.86rem; color: var(--nb-muted); } .nb-booking-legend span { display: inline-flex; align-items: center; gap: 8px; } .nb-booking-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; } .nb-booking-legend .is-open { background: var(--nb-accent); } .nb-booking-legend .is-available { background: var(--nb-slot-available); } .nb-booking-legend .is-selection { background: linear-gradient(135deg, color-mix(in srgb, var(--nb-selection) 70%, #fff) 0%, var(--nb-selection) 100%); } .nb-booking-legend .is-booked { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18) 6px, var(--nb-slot-unavailable) 6px, var(--nb-slot-unavailable) 12px); } .nb-booking-legend .is-too-short { background: color-mix(in srgb, var(--nb-slot-unavailable) 65%, var(--nb-primary)); } .nb-booking-slot-explanation { margin: -6px 0 16px; padding: 10px 12px; border-left: 3px solid color-mix(in srgb, var(--nb-accent) 70%, var(--nb-border)); background: color-mix(in srgb, var(--nb-panel-bg) 90%, var(--nb-accent)); color: var(--nb-muted); font-size: 0.82rem; line-height: 1.45; } .nb-booking-app.is-service-locked .nb-booking-slot-explanation { display: none; } .nb-booking-calendar { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: var(--nb-gap); overflow-x: auto; align-items: stretch; } .nb-booking-calendar-gate { margin-bottom: 16px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--nb-border) 58%, transparent); background: color-mix(in srgb, var(--nb-panel-bg) 78%, transparent); color: var(--nb-notice); border-radius: 6px; } .nb-booking-app:not(.is-service-locked) .nb-booking-calendar-gate { display: none; } .nb-booking-app.is-service-locked .nb-booking-calendar { opacity: 0.74; filter: saturate(0.9); pointer-events: none; } .nb-booking-app.is-service-locked .nb-booking-week-button { opacity: 0.55; cursor: not-allowed; } .nb-booking-day { padding: 12px; border-radius: var(--nb-card-radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.08); min-height: 420px; position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; } .nb-booking-day.is-today { border-color: color-mix(in srgb, var(--nb-today-highlight) 44%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--nb-today-highlight) 14%, transparent), rgba(255, 255, 255, 0.03)); } .nb-booking-day.is-today h4 { color: color-mix(in srgb, var(--nb-today-highlight) 45%, var(--nb-calendar-heading)); } .nb-booking-day h4, .nb-booking-day p { margin: 0; } .nb-booking-day h4 { margin-bottom: 4px; font-size: var(--nb-font-section-title); color: var(--nb-calendar-heading); } .nb-booking-day-meta { margin-bottom: 8px; font-size: 0.84rem; color: var(--nb-muted); } .nb-booking-day-slots { display: grid; gap: 3px; align-content: start; } .nb-booking-slot { display: flex; align-items: center; justify-content: flex-start; min-height: 34px; padding: 8px 10px; border-radius: var(--nb-slot-radius); font-size: var(--nb-font-slot); font-weight: 600; text-align: left; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); position: relative; } .nb-booking-slot[data-state="available"] { cursor: pointer; color: var(--nb-available-text); background: linear-gradient(90deg, var(--nb-slot-available) 0%, color-mix(in srgb, var(--nb-slot-available) 78%, var(--nb-accent)) 100%); border-color: color-mix(in srgb, var(--nb-slot-available) 70%, #fff); } .nb-booking-slot[data-state="available"]:hover, .nb-booking-slot.is-selected { border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nb-selection) 56%, transparent), 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 24px color-mix(in srgb, var(--nb-selection) 26%, transparent); } .nb-booking-slot[data-state="available"]:hover { background: linear-gradient(90deg, var(--nb-slot-hover) 0%, color-mix(in srgb, var(--nb-slot-hover) 72%, var(--nb-accent)) 100%); } .nb-booking-slot.is-selected { background: linear-gradient(180deg, color-mix(in srgb, var(--nb-selection) 62%, #fff) 0%, var(--nb-selection) 100%); color: var(--nb-selection-text); border-color: rgba(255, 244, 231, 0.95); z-index: 2; } .nb-booking-slot::before { content: ""; display: inline-block; width: 44px; flex: 0 0 44px; color: var(--nb-muted); } .nb-booking-slot[data-state="booked"] { color: var(--nb-booked-text); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12) 7px, var(--nb-slot-booked) 7px, var(--nb-slot-booked) 14px); } .nb-booking-slot[data-state="too_short"] { color: var(--nb-unavailable-text); background: color-mix(in srgb, var(--nb-slot-unavailable) 55%, var(--nb-primary)); border-color: color-mix(in srgb, var(--nb-slot-unavailable) 60%, transparent); } .nb-booking-slot[data-state="closed"] { color: var(--nb-closed-day-text); background: color-mix(in srgb, var(--nb-closed-day) 52%, transparent); } .nb-booking-slot-filler { cursor: default; justify-content: center; text-align: center; color: var(--nb-closed-day-text); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 7px, var(--nb-closed-day) 7px, var(--nb-closed-day) 14px); } .nb-booking-slot:disabled { opacity: var(--nb-unavailable-opacity, 0.5); } .nb-booking-services { flex-direction: column; gap: 12px; margin: 16px 0 18px; } .nb-booking-service { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--nb-service-bg) 96%, #fff), var(--nb-service-bg)); color: var(--nb-service-text); cursor: pointer; border: 1px solid color-mix(in srgb, var(--nb-service-border) 76%, transparent); text-align: left; position: relative; overflow: hidden; } .nb-booking-service::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 32%); opacity: 0; transition: opacity 0.25s ease; } .nb-booking-service.is-active { background: linear-gradient(135deg, color-mix(in srgb, var(--nb-service-active-bg) 86%, #fff), var(--nb-service-active-bg)); border-color: color-mix(in srgb, var(--nb-service-active-border) 88%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nb-service-active-border) 46%, transparent), 0 16px 34px color-mix(in srgb, var(--nb-service-active-border) 26%, transparent), 0 0 32px color-mix(in srgb, var(--nb-service-active-bg) 22%, transparent); } .nb-booking-service.is-active::before, .nb-booking-service:hover::before { opacity: 1; } .nb-booking-service-copy { display: grid; gap: 5px; padding-right: 12px; } .nb-booking-service-copy strong { font-size: var(--nb-font-service-title); color: var(--nb-service-title); } .nb-booking-service-copy small { color: var(--nb-service-text); font-size: 0.8rem; line-height: 1.45; } .nb-booking-service-meta { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--nb-service-badge-text) 28%, transparent); background: color-mix(in srgb, var(--nb-service-badge-bg) 88%, transparent); color: var(--nb-service-badge-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .nb-booking-selection { min-height: 84px; color: var(--nb-summary-text); padding: 16px; border: 1px solid color-mix(in srgb, var(--nb-summary-border) 72%, transparent); background: linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--nb-summary-bg) 86%, transparent), color-mix(in srgb, var(--nb-bg-color) 92%, #000)); border-radius: var(--nb-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 30px rgba(0, 0, 0, 0.18); } .nb-booking-selection p { margin: 8px 0 0; } .nb-summary-title { margin-bottom: 10px; color: var(--nb-summary-label); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .nb-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .nb-summary-row span { color: var(--nb-summary-label); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .nb-summary-row strong { color: var(--nb-summary-value); text-align: right; } .nb-booking-form[hidden] { display: none !important; } .nb-booking-field-grid { flex-wrap: wrap; gap: 14px; } .nb-booking-field-grid label { display: flex; flex-direction: column; flex: 1 1 calc(50% - 7px); gap: 6px; font-size: var(--nb-font-label); color: var(--nb-label); } .nb-booking-field-grid input, .nb-booking-field-grid textarea { width: 100%; padding: 13px 14px; border-radius: var(--nb-input-radius); border: 1px solid var(--nb-input-border); background: var(--nb-input-bg); color: var(--nb-input-text); } .nb-booking-field-wide { flex-basis: 100%; } .nb-booking-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--nb-accent) 28%, transparent); background: rgba(255, 255, 255, 0.035); border-radius: 6px; color: var(--nb-muted); font-size: 0.88rem; line-height: 1.45; } .nb-booking-terms input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--nb-primary); } .nb-booking-submit, .nb-booking-reset { width: 100%; margin-top: 16px; padding: 15px 18px; background: linear-gradient(135deg, var(--nb-button-start) 0%, var(--nb-button-end) 100%); border-color: color-mix(in srgb, var(--nb-button-border) 78%, transparent); color: var(--nb-button-text); font-weight: var(--nb-weight-button); font-size: var(--nb-font-button); cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.16); } .nb-booking-feedback { min-height: 22px; margin: 12px 0 0; color: var(--nb-notice); } .nb-booking-success { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; margin: 0 0 16px; padding: 20px 22px; border: 2px solid color-mix(in srgb, var(--nb-slot-available) 82%, #ffffff 18%); border-radius: var(--nb-card-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--nb-slot-available) 32%, #102819 68%), color-mix(in srgb, var(--nb-slot-available) 17%, var(--nb-panel-bg) 83%)); box-shadow: 0 12px 32px color-mix(in srgb, var(--nb-slot-available) 24%, transparent); color: #ffffff; } .nb-booking-success[hidden] { display: none !important; } .nb-booking-success-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nb-slot-available); color: var(--nb-available-text); font-size: 30px; font-weight: 900; line-height: 1; } .nb-booking-success-content { min-width: 0; } .nb-booking-success h3 { margin: 2px 0 7px; color: #ffffff; font-size: clamp(21px, 2.2vw, 29px); line-height: 1.18; } .nb-booking-success p { margin: 0; color: rgba(255, 255, 255, 0.94); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; } .nb-booking-success-badge { display: inline-flex; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--nb-slot-available) 72%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--nb-slot-available) 18%, transparent); color: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .nb-booking-success .nb-booking-reset { width: auto; min-width: 190px; margin: 0; } @media (max-width: 720px) { .nb-booking-success { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 17px; } .nb-booking-success .nb-booking-reset { grid-column: 1 / -1; width: 100%; } } .nb-booking-day-closed { padding: 12px; border-radius: calc(var(--nb-radius) * 0.7); background: color-mix(in srgb, var(--nb-closed-day) 45%, transparent); color: var(--nb-muted); font-size: 0.88rem; border: 1px dashed rgba(255, 255, 255, 0.15); min-height: 100%; } .nb-booking-empty-state { padding: 14px; border: 1px dashed rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); border-radius: 8px; color: var(--nb-muted); } @media (max-width: 900px) { .nb-booking-shell { grid-template-columns: 1fr; padding: 18px; } .nb-booking-calendar-panel, .nb-booking-form-panel { grid-column: 1; grid-row: auto; } .nb-booking-calendar-panel { display: contents; } .nb-booking-form-panel [data-step="services"], .nb-booking-form-panel [data-step="staff"], .nb-booking-calendar-panel [data-step="schedule"], .nb-booking-form-panel [data-step="contact"] { grid-column: 1; grid-row: auto; } .nb-booking-form-panel [data-step="services"] { grid-row: 1; } .nb-booking-form-panel [data-step="staff"] { grid-row: 2; } .nb-booking-calendar-panel [data-step="schedule"] { grid-row: 3; } .nb-booking-form-panel [data-step="contact"] { grid-row: 4; } } @media (max-width: 640px) { .nb-booking-shell { gap: 16px; padding: 12px; } .nb-booking-calendar { grid-template-columns: repeat(1, minmax(0, 1fr)); overflow-x: visible; } .nb-booking-day { min-height: auto; } .nb-booking-day-slots { grid-template-columns: minmax(0, 1fr); gap: 6px; } .nb-booking-slot { min-height: 42px; justify-content: center; text-align: center; } .nb-booking-slot::before { display: none; } .nb-booking-panel-head { flex-direction: column; align-items: flex-start; } .nb-booking-week-nav { width: 100%; justify-content: space-between; } .nb-booking-field-grid label { flex-basis: 100%; } } .nb-booking-honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } .nb-booking-honeypot input { tab-size: 0; } /* 1.10.5 mobile polish: make date arrows easier to notice and tap */ @media (max-width: 640px) { .nb-booking-week-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-style: solid; border-color: color-mix(in srgb, var(--nb-primary) 72%, rgba(255, 255, 255, 0.18)); background: color-mix(in srgb, var(--nb-panel-bg) 78%, var(--nb-primary)); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); font-size: 0; position: relative; } .nb-booking-week-button::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 13px; height: 13px; border-top: 3px solid var(--nb-heading); border-right: 3px solid var(--nb-heading); transform-origin: center; } .nb-booking-week-button[data-week-shift="-7"]::before { transform: translate(-35%, -50%) rotate(-135deg); } .nb-booking-week-button[data-week-shift="7"]::before { transform: translate(-65%, -50%) rotate(45deg); } .nb-booking-week-label { font-weight: 700; text-align: center; line-height: 1.35; } } /* 1.11.3: selected service card has its own text color, separate from selected appointment slots. */ .nb-booking-service.is-active, .nb-booking-service.is-active .nb-booking-service-copy strong, .nb-booking-service.is-active .nb-booking-service-copy small, .nb-booking-service.is-active .nb-booking-service-meta { color: var(--nb-service-active-text); } /* 1.11.14: optional staff portrait display. Disabled by default unless app has .has-staff-images. */ .nb-booking-app.has-staff-images .nb-booking-staff-option.has-portrait { align-items: center; min-height: 76px; padding-top: 13px; padding-bottom: 13px; } .nb-booking-app.has-staff-images .nb-booking-staff-option.has-portrait .nb-booking-service-copy { min-width: 0; } .nb-booking-staff-avatar { position: relative; z-index: 1; width: 54px; height: 68px; flex: 0 0 54px; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--nb-service-active-border) 38%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--nb-service-active-border) 22%, transparent); background: color-mix(in srgb, var(--nb-service-bg) 85%, #fff); } .nb-booking-staff-avatar img, .nb-booking-success-staff-image { width: 100%; height: 100%; object-fit: cover; display: block; } .nb-booking-success-staff-image { width: 96px; height: 124px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--nb-service-active-border) 56%, transparent); box-shadow: 0 14px 30px color-mix(in srgb, var(--nb-service-active-border) 24%, transparent); margin: 0 0 16px; } .nb-booking-success-staff-name { font-weight: 800; color: var(--nb-heading); } @media (max-width: 640px) { .nb-booking-app.has-staff-images .nb-booking-staff-option.has-portrait { min-height: 72px; } .nb-booking-staff-avatar { width: 50px; height: 62px; flex-basis: 50px; } } /* 1.11.x/1.12.x: Desktop-Wizard-Feinschliff. Mobile bleibt bewusst unverändert. */ .nb-booking-step-mini-summary { display: none; } @media (min-width: 901px) { .nb-booking-app { --nb-gap: 10px; --nb-card-padding: 14px; --nb-font-base: 13px; --nb-font-section-title: 16px; --nb-font-service-title: 14px; --nb-font-slot: 12px; --nb-font-label: 12px; --nb-font-button: 14px; } .nb-booking-shell { grid-template-columns: minmax(300px, 0.72fr) minmax(600px, 1.28fr); align-items: start; gap: 10px; padding: 14px; max-height: calc(100svh - 32px); min-height: min(660px, calc(100svh - 32px)); overflow: hidden; } .nb-booking-calendar-panel, .nb-booking-calendar-panel [data-step="schedule"] { min-width: 0; min-height: 0; } .nb-booking-calendar-panel [data-step="schedule"] { display: flex; flex-direction: column; max-height: calc(100svh - 60px); overflow: hidden; } .nb-booking-form-panel [data-step="services"], .nb-booking-form-panel [data-step="staff"], .nb-booking-form-panel [data-step="contact"] { min-width: 0; min-height: 0; } .nb-booking-panel-head { align-items: flex-start; gap: 10px; margin-bottom: 9px; } .nb-booking-eyebrow { margin-bottom: 4px; font-size: 0.66rem; letter-spacing: 0.14em; } .nb-booking-step-description { margin-top: 4px; font-size: 0.8rem; line-height: 1.35; } .nb-booking-week-nav { gap: 6px; flex: 0 0 auto; } .nb-booking-week-button { width: 30px; height: 30px; } .nb-booking-week-label { min-width: 132px; font-size: 0.82rem; } .nb-booking-legend { gap: 8px 10px; margin-bottom: 8px; font-size: 0.72rem; line-height: 1.2; } .nb-booking-legend span { gap: 5px; } .nb-booking-legend i { width: 10px; height: 10px; } .nb-booking-slot-explanation { margin: 0 0 8px; padding: 8px 10px; font-size: 0.74rem; } .nb-booking-calendar-gate { margin-bottom: 8px; padding: 9px 11px; font-size: 0.82rem; } .nb-booking-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: stretch; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } .nb-booking-day { min-height: 0; padding: 8px; gap: 4px; grid-template-rows: auto auto minmax(0, 1fr); } .nb-booking-day h4 { margin-bottom: 0; font-size: 0.84rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-booking-day-meta { margin-bottom: 3px; font-size: 0.68rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-booking-day-slots { gap: 3px; min-height: 0; } .nb-booking-slot { min-height: 24px; padding: 4px 5px; justify-content: center; text-align: center; line-height: 1.15; } .nb-booking-slot::before { display: none; } .nb-booking-services { gap: 8px; margin: 10px 0 10px; } .nb-booking-service { padding: 10px 12px; } .nb-booking-service-copy { gap: 3px; } .nb-booking-service-meta { min-width: 60px; padding: 5px 8px; font-size: 0.68rem; } .nb-booking-selection { min-height: 0; padding: 10px 12px; } .nb-booking-selection p { margin-top: 6px; } .nb-summary-title { margin-bottom: 6px; font-size: 0.72rem; } .nb-summary-row { gap: 8px; padding: 5px 0; } .nb-summary-row span { font-size: 0.68rem; } .nb-booking-field-grid { gap: 9px; } .nb-booking-field-grid label { gap: 4px; } .nb-booking-field-grid input, .nb-booking-field-grid textarea { padding: 9px 10px; } .nb-booking-field-grid textarea { min-height: 66px; } .nb-booking-terms { margin-top: 10px; padding: 9px 10px; font-size: 0.8rem; } .nb-booking-submit, .nb-booking-reset { margin-top: 10px; padding: 12px 14px; } .nb-booking-feedback { min-height: 18px; margin-top: 8px; } .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current), .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) { padding: 11px 14px; } .nb-booking-form-panel [data-step="services"].is-complete:not(.is-current), .nb-booking-form-panel [data-step="staff"].is-complete:not(.is-current) { cursor: pointer; } .nb-booking-form-panel [data-step="services"].is-complete:not(.is-current):hover, .nb-booking-form-panel [data-step="staff"].is-complete:not(.is-current):hover { border-color: color-mix(in srgb, var(--nb-accent) 52%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nb-accent) 18%, transparent), var(--nb-gloss); } .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current) > .nb-booking-step-description, .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-step-description, .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current) > .nb-booking-services, .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-services, .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current) > .nb-booking-selection, .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-selection, .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-form { display: none; } .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current) > .nb-booking-step-mini-summary, .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-step-mini-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 7px; background: color-mix(in srgb, var(--nb-summary-bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--nb-summary-border) 32%, transparent); color: var(--nb-summary-value); font-weight: 800; line-height: 1.25; } .nb-booking-form-panel [data-step="services"].is-complete:not(.is-current) > .nb-booking-step-mini-summary::after, .nb-booking-form-panel [data-step="staff"].is-complete:not(.is-current) > .nb-booking-step-mini-summary::after { content: attr(data-change-label); flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--nb-primary) 22%, transparent); color: var(--nb-accent); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } } @media (min-width: 901px) and (max-height: 760px) { .nb-booking-app { --nb-card-padding: 12px; --nb-gap: 8px; --nb-font-section-title: 15px; --nb-font-slot: 11px; } .nb-booking-shell { gap: 8px; padding: 10px; max-height: calc(100svh - 20px); min-height: 0; } .nb-booking-panel-head { margin-bottom: 6px; } .nb-booking-legend { display: none; } .nb-booking-step-description { font-size: 0.76rem; } .nb-booking-calendar-gate { padding: 7px 9px; } .nb-booking-day { padding: 6px; } .nb-booking-slot { min-height: 21px; padding: 3px 4px; } .nb-booking-service { padding: 8px 10px; } .nb-booking-field-grid input, .nb-booking-field-grid textarea { padding: 8px 9px; } .nb-booking-field-grid textarea { min-height: 54px; } } @media (min-width: 901px) { .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) { padding: 11px 14px; } .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-step-description, .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-form, .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-services, .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-selection { display: none; } .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-step-mini-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 7px; background: color-mix(in srgb, var(--nb-summary-bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--nb-summary-border) 32%, transparent); color: var(--nb-summary-value); font-weight: 800; line-height: 1.25; } } /* 1.13.7: compact slot rendering for configurable 15/30/60 minute calendar grids. */ @media (min-width: 901px) { .nb-booking-app[data-slot-interval="15"] .nb-booking-calendar { gap: 4px; } .nb-booking-app[data-slot-interval="15"] .nb-booking-day { padding: 6px; gap: 3px; } .nb-booking-app[data-slot-interval="15"] .nb-booking-day h4 { font-size: 0.78rem; } .nb-booking-app[data-slot-interval="15"] .nb-booking-day-meta { font-size: 0.62rem; } .nb-booking-app[data-slot-interval="15"] .nb-booking-day-slots { gap: 2px; } .nb-booking-app[data-slot-interval="15"] .nb-booking-slot { min-height: 18px; padding: 2px 3px; font-size: clamp(9px, 0.56vw, 11px); line-height: 1.05; letter-spacing: -0.01em; } .nb-booking-app[data-slot-interval="60"] .nb-booking-slot { min-height: 30px; padding: 6px 7px; } } @media (min-width: 901px) and (max-height: 760px) { .nb-booking-app[data-slot-interval="15"] .nb-booking-slot { min-height: 16px; padding: 1px 2px; font-size: 9px; } .nb-booking-app[data-slot-interval="15"] .nb-booking-day { padding: 5px; } } @media (max-width: 640px) { .nb-booking-app[data-slot-interval="15"] .nb-booking-slot { font-size: 0.86rem; } } /* 1.13.8: clearer step-number highlighting for the active frontend flow. */ .nb-booking-step-card .nb-booking-eyebrow { display: inline-flex; align-items: center; gap: 8px; } .nb-booking-step-card .nb-booking-eyebrow::before { content: ""; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--nb-border) 78%, transparent); background: color-mix(in srgb, var(--nb-card) 80%, transparent); color: var(--nb-label); font-size: 0.76rem; font-weight: 900; line-height: 1; } .nb-booking-step-card[data-step="services"] .nb-booking-eyebrow::before { content: "1"; } .nb-booking-step-card[data-step="staff"] .nb-booking-eyebrow::before { content: "2"; } .nb-booking-step-card[data-step="schedule"] .nb-booking-eyebrow::before { content: "3"; } .nb-booking-step-card[data-step="contact"] .nb-booking-eyebrow::before { content: "4"; } .nb-booking-step-card.is-current .nb-booking-eyebrow::before { border-color: color-mix(in srgb, var(--nb-accent) 82%, transparent); background: linear-gradient(135deg, var(--nb-primary), var(--nb-accent)); color: var(--nb-button-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nb-accent) 18%, transparent); } .nb-booking-step-card.is-complete:not(.is-current) .nb-booking-eyebrow::before { content: "✓"; border-color: color-mix(in srgb, var(--nb-accent) 45%, transparent); color: var(--nb-accent); } /* License-restricted frontend state (1.17.0). */ .nb-booking-license-restricted { display: flex; align-items: flex-start; gap: 16px; width: min(760px, 100%); margin: 24px auto; padding: 24px; border: 1px solid rgba(148, 163, 184, .42); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .08); color: #1f2937; } .nb-booking-license-restricted-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #fef3c7; color: #92400e; font-size: 22px; font-weight: 800; } .nb-booking-license-restricted h3 { margin: 0 0 7px; font-size: 21px; line-height: 1.25; color: #111827; } .nb-booking-license-restricted p { margin: 0; line-height: 1.6; } .nb-booking-license-admin-note { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .32); font-size: 14px; } .nb-booking-license-admin-note a { font-weight: 700; } @media (max-width: 560px) { .nb-booking-license-restricted { padding: 20px; } } /* 1.17.4: release-ready choice flow and isolated designer-controlled layout. */ .nb-booking-app .nb-booking-step-card .nb-booking-eyebrow::before { display: none !important; content: none !important; } .nb-booking-app .nb-booking-step-card .nb-booking-eyebrow { position: relative; padding-left: 13px; } .nb-booking-app .nb-booking-step-card .nb-booking-eyebrow::after { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-accent) 18%, transparent); transform: translateY(-50%); } .nb-booking-app .nb-booking-step-card.is-current { transform: none; border-color: color-mix(in srgb, var(--nb-accent) 68%, var(--nb-border)); background: linear-gradient(90deg, color-mix(in srgb, var(--nb-accent) 10%, transparent), transparent 42%), color-mix(in srgb, var(--nb-panel-bg) 94%, #000); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nb-accent) 24%, transparent), 0 14px 32px color-mix(in srgb, var(--nb-primary) 16%, transparent), var(--nb-gloss); } .nb-booking-app .nb-booking-step-card.is-current::before { top: 0; bottom: 0; left: 0; width: 4px; border-radius: var(--nb-card-radius) 0 0 var(--nb-card-radius); } .nb-booking-app .nb-booking-step-card.is-current::after { display: none; } .nb-booking-app .nb-booking-choice-prompt { display: flex; align-items: center; gap: 9px; margin: 11px 0 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--nb-summary-border) 38%, transparent); border-radius: var(--nb-status-radius); background: color-mix(in srgb, var(--nb-summary-bg) 48%, transparent); color: var(--nb-summary-text); font-size: 0.78rem; font-weight: 650; line-height: 1.35; } .nb-booking-app .nb-booking-choice-prompt-kicker { flex: 0 0 auto; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--nb-summary-border) 58%, transparent); background: color-mix(in srgb, var(--nb-summary-border) 14%, transparent); color: var(--nb-summary-label); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.07em; line-height: 1; text-transform: uppercase; } .nb-booking-app .nb-booking-services { margin: 11px 0 0; gap: 9px; } .nb-booking-app .nb-booking-service { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "index copy controls"; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 13px 14px; border: 2px solid color-mix(in srgb, var(--nb-service-border) 96%, transparent); border-radius: var(--nb-choice-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--nb-service-bg) 96%, #fff), var(--nb-service-bg)); color: var(--nb-service-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); cursor: pointer; overflow: hidden; text-align: left; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease; } .nb-booking-app .nb-booking-service > * { position: relative; z-index: 1; } .nb-booking-app .nb-booking-service:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--nb-accent) 76%, var(--nb-service-border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 9px 22px color-mix(in srgb, var(--nb-primary) 15%, transparent); } .nb-booking-app .nb-booking-service:focus-visible { outline: 3px solid color-mix(in srgb, var(--nb-accent) 48%, transparent); outline-offset: 2px; border-color: var(--nb-accent); } .nb-booking-app .nb-booking-option-index { grid-area: index; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--nb-service-badge-text) 42%, transparent); border-radius: max(2px, calc(var(--nb-choice-radius) * 0.55)); background: color-mix(in srgb, var(--nb-service-badge-bg) 82%, transparent); color: var(--nb-service-badge-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; } .nb-booking-app .nb-booking-service-copy { grid-area: copy; display: grid; gap: 4px; min-width: 0; padding: 0; } .nb-booking-app .nb-booking-service-copy strong { color: var(--nb-service-title); font-size: var(--nb-font-service-title); line-height: 1.25; } .nb-booking-app .nb-booking-service-copy small { display: block; color: var(--nb-service-text); font-size: 0.79rem; line-height: 1.38; } .nb-booking-app .nb-booking-service-side { grid-area: controls; display: grid; justify-items: end; gap: 6px; min-width: 104px; } .nb-booking-app .nb-booking-service-meta { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--nb-service-badge-text) 30%, transparent); border-radius: max(2px, calc(var(--nb-choice-radius) * 0.45)); background: color-mix(in srgb, var(--nb-service-badge-bg) 88%, transparent); color: var(--nb-service-badge-text); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; } .nb-booking-app .nb-booking-option-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 104px; padding: 7px 8px 7px 10px; border: 1px solid color-mix(in srgb, var(--nb-accent) 68%, transparent); border-radius: max(3px, calc(var(--nb-choice-radius) * 0.55)); background: color-mix(in srgb, var(--nb-primary) 18%, transparent); color: color-mix(in srgb, var(--nb-service-title) 72%, var(--nb-accent)); font-size: 0.64rem; font-weight: 900; letter-spacing: 0.065em; line-height: 1; text-transform: uppercase; } .nb-booking-app .nb-booking-option-action-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--nb-accent) 18%, transparent); font-size: 0.78rem; line-height: 1; } .nb-booking-app .nb-booking-service.is-active { border-color: color-mix(in srgb, var(--nb-service-active-border) 92%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--nb-service-active-bg) 88%, #fff), var(--nb-service-active-bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nb-service-active-border) 30%, transparent), 0 13px 28px color-mix(in srgb, var(--nb-service-active-border) 20%, transparent); } .nb-booking-app .nb-booking-service.is-active .nb-booking-option-index { border-color: color-mix(in srgb, var(--nb-service-active-border) 76%, #fff); background: color-mix(in srgb, var(--nb-service-active-border) 20%, transparent); color: var(--nb-service-active-text); } .nb-booking-app .nb-booking-service.is-active .nb-booking-service-copy strong, .nb-booking-app .nb-booking-service.is-active .nb-booking-service-copy small, .nb-booking-app .nb-booking-service.is-active .nb-booking-service-meta { color: var(--nb-service-active-text); } .nb-booking-app .nb-booking-service.is-active .nb-booking-service-meta { border-color: color-mix(in srgb, var(--nb-service-active-text) 32%, transparent); background: color-mix(in srgb, var(--nb-service-active-border) 16%, transparent); } .nb-booking-app .nb-booking-service.is-active .nb-booking-option-action, .nb-booking-app .nb-booking-option-action.is-selected { border-color: color-mix(in srgb, var(--nb-service-active-text) 52%, transparent); background: var(--nb-service-active-text); color: var(--nb-service-active-bg); } .nb-booking-app .nb-booking-service.is-active .nb-booking-option-action-icon, .nb-booking-app .nb-booking-option-action.is-selected .nb-booking-option-action-icon { background: color-mix(in srgb, var(--nb-service-active-bg) 22%, transparent); } .nb-booking-app .nb-booking-staff-option.has-portrait { grid-template-columns: 38px 52px minmax(0, 1fr) auto; grid-template-areas: "index portrait copy controls"; } .nb-booking-app .nb-booking-staff-avatar { grid-area: portrait; display: block; width: 52px; height: 62px; margin: 0; border: 1px solid color-mix(in srgb, var(--nb-service-border) 82%, transparent); border-radius: max(3px, calc(var(--nb-choice-radius) * 0.65)); background: color-mix(in srgb, var(--nb-service-bg) 82%, #000); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .nb-booking-app .nb-booking-staff-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .nb-booking-app .nb-booking-flow-notice { margin: 0 0 9px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nb-error) 46%, transparent); border-left-width: 3px; border-radius: var(--nb-status-radius); background: color-mix(in srgb, var(--nb-danger) 74%, transparent); color: var(--nb-error); font-weight: 700; line-height: 1.4; } .nb-booking-app .nb-booking-flow-notice[hidden], .nb-booking-app .nb-booking-selection[hidden] { display: none !important; } @media (min-width: 901px) { .nb-booking-app .nb-booking-choice-prompt { font-size: 0.72rem; } .nb-booking-app .nb-booking-form-panel .nb-booking-step-card.is-complete:not(.is-current) > .nb-booking-choice-prompt, .nb-booking-app .nb-booking-form-panel .nb-booking-step-card.is-waiting:not(.is-current) > .nb-booking-choice-prompt, .nb-booking-app .nb-booking-form-panel .nb-booking-step-card.is-inactive:not(.is-current) > .nb-booking-choice-prompt { display: none; } } @media (max-width: 640px) { .nb-booking-app .nb-booking-choice-prompt { align-items: flex-start; flex-direction: column; gap: 6px; } .nb-booking-app .nb-booking-service, .nb-booking-app .nb-booking-staff-option.has-portrait { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "index copy" "index controls"; gap: 8px 11px; padding: 12px; } .nb-booking-app .nb-booking-staff-option.has-portrait { grid-template-columns: 38px 48px minmax(0, 1fr); grid-template-areas: "index portrait copy" "index portrait controls"; } .nb-booking-app .nb-booking-staff-avatar { width: 48px; height: 58px; } .nb-booking-app .nb-booking-service-side { width: 100%; min-width: 0; grid-template-columns: auto minmax(104px, auto); align-items: center; justify-content: space-between; justify-items: start; } .nb-booking-app .nb-booking-option-action { justify-self: end; } } /* 1.17.7: element-width responsive layout without CSS size containment. * * `container-type: inline-size` must not be placed on the shortcode root. In * flex/page-builder layouts it removes the root's intrinsic inline size and * can create a circular 100%-of-zero calculation. The result is the vertical * one-character-wide rendering seen in Elementor. The frontend script now * measures the real rendered width and adds cumulative layout classes instead. */ .nb-booking-app { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; align-self: stretch; justify-self: stretch; contain: none; } .nb-booking-app, .nb-booking-app .nb-booking-shell, .nb-booking-app .nb-booking-column, .nb-booking-app .nb-booking-panel-card, .nb-booking-app .nb-booking-services, .nb-booking-app .nb-booking-service, .nb-booking-app .nb-booking-service-copy, .nb-booking-app .nb-booking-service-side { box-sizing: border-box; max-width: 100%; min-width: 0; } .nb-booking-app .nb-booking-service-copy strong, .nb-booking-app .nb-booking-service-copy small, .nb-booking-app .nb-booking-choice-prompt, .nb-booking-app .nb-booking-step-description { overflow-wrap: anywhere; } /* Protect the common WordPress/Elementor wrappers without requiring a theme * specific integration. :has() is intentionally progressive enhancement; the * app itself remains fully usable where it is unavailable. */ @supports selector(:has(*)) { .elementor-widget-shortcode:has(.nb-booking-app), .elementor-widget-container:has(> .nb-booking-app), .wp-block-shortcode:has(.nb-booking-app) { width: 100%; max-width: 100%; min-width: 0; flex-basis: 100%; align-self: stretch; box-sizing: border-box; } } .nb-booking-app.nb-layout-tablet .nb-booking-shell { grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row; align-items: stretch; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding: clamp(12px, 2.8vw, 18px); } .nb-booking-app.nb-layout-tablet .nb-booking-calendar-panel, .nb-booking-app.nb-layout-tablet .nb-booking-form-panel { grid-column: 1 !important; grid-row: auto !important; } .nb-booking-app.nb-layout-tablet .nb-booking-calendar-panel { display: contents !important; } .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="services"], .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="staff"], .nb-booking-app.nb-layout-tablet .nb-booking-calendar-panel [data-step="schedule"], .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="contact"] { grid-column: 1 !important; min-width: 0; max-height: none !important; overflow: visible !important; } .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="services"] { grid-row: 1 !important; } .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="staff"] { grid-row: 2 !important; } .nb-booking-app.nb-layout-tablet .nb-booking-calendar-panel [data-step="schedule"] { display: block !important; grid-row: 3 !important; height: auto !important; } .nb-booking-app.nb-layout-tablet .nb-booking-form-panel [data-step="contact"] { grid-row: 4 !important; } .nb-booking-app.nb-layout-tablet .nb-booking-panel-card { padding: min(var(--nb-card-padding), 24px) !important; } .nb-booking-app.nb-layout-tablet .nb-booking-panel-card h3 { font-size: min(var(--nb-font-heading), 28px); line-height: 1.18; } .nb-booking-app.nb-layout-tablet .nb-booking-calendar { grid-template-columns: repeat(7, minmax(132px, 1fr)); overflow-x: auto !important; overflow-y: visible !important; scrollbar-gutter: auto; -webkit-overflow-scrolling: touch; } .nb-booking-app.nb-layout-compact .nb-booking-shell { gap: clamp(12px, 2.6vw, 16px); padding: clamp(10px, 2.8vw, 16px); } .nb-booking-app.nb-layout-compact .nb-booking-panel-card { padding: min(var(--nb-card-padding), 18px) !important; } .nb-booking-app.nb-layout-compact .nb-booking-panel-head { align-items: flex-start; flex-direction: column; gap: 12px; } .nb-booking-app.nb-layout-compact .nb-booking-week-nav { justify-content: space-between; width: 100%; } .nb-booking-app.nb-layout-compact .nb-booking-week-label { min-width: 0; padding-inline: 8px; } .nb-booking-app.nb-layout-compact .nb-booking-choice-prompt { align-items: flex-start; flex-wrap: wrap; } .nb-booking-app.nb-layout-compact .nb-booking-service, .nb-booking-app.nb-layout-compact .nb-booking-staff-option.has-portrait { grid-template-columns: 38px minmax(0, 1fr) !important; grid-template-areas: "index copy" "controls controls" !important; align-items: start; gap: 10px 12px; padding: 13px !important; } .nb-booking-app.nb-layout-compact .nb-booking-staff-option.has-portrait { grid-template-columns: 38px 54px minmax(0, 1fr) !important; grid-template-areas: "index portrait copy" "controls controls controls" !important; } .nb-booking-app.nb-layout-compact .nb-booking-option-index { align-self: start; } .nb-booking-app.nb-layout-compact .nb-booking-staff-avatar { align-self: start; width: 54px; height: 66px; } .nb-booking-app.nb-layout-compact .nb-booking-service-side { grid-area: controls; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; width: 100%; min-width: 0; padding-top: 2px; } .nb-booking-app.nb-layout-compact .nb-booking-staff-option .nb-booking-service-side { justify-content: flex-end; } .nb-booking-app.nb-layout-compact .nb-booking-option-action { min-width: 0; max-width: 100%; } .nb-booking-app.nb-layout-compact .nb-booking-field-grid label { flex-basis: 100%; } .nb-booking-app.nb-layout-mobile { font-size: min(var(--nb-font-base), 16px); } .nb-booking-app.nb-layout-mobile .nb-booking-shell { gap: 12px; padding: 9px; } .nb-booking-app.nb-layout-mobile .nb-booking-panel-card { padding: min(var(--nb-card-padding), 14px) !important; } .nb-booking-app.nb-layout-mobile .nb-booking-panel-card h3 { font-size: min(var(--nb-font-heading), 24px); line-height: 1.16; } .nb-booking-app.nb-layout-mobile .nb-booking-step-description { font-size: min(0.9rem, 15px); line-height: 1.45; } .nb-booking-app.nb-layout-mobile .nb-booking-choice-prompt { align-items: flex-start; flex-direction: column; gap: 7px; padding: 10px; } .nb-booking-app.nb-layout-mobile .nb-booking-service, .nb-booking-app.nb-layout-mobile .nb-booking-staff-option.has-portrait { grid-template-columns: 34px minmax(0, 1fr) !important; grid-template-areas: "index copy" "controls controls" !important; gap: 9px 10px; padding: 12px !important; } .nb-booking-app.nb-layout-mobile .nb-booking-staff-option.has-portrait { grid-template-columns: 34px 48px minmax(0, 1fr) !important; grid-template-areas: "index portrait copy" "controls controls controls" !important; } .nb-booking-app.nb-layout-mobile .nb-booking-option-index { width: 34px; height: 34px; } .nb-booking-app.nb-layout-mobile .nb-booking-staff-avatar { width: 48px; height: 60px; } .nb-booking-app.nb-layout-mobile .nb-booking-service-copy { align-self: start; gap: 4px; } .nb-booking-app.nb-layout-mobile .nb-booking-service-copy strong { font-size: min(var(--nb-font-service-title), 18px); line-height: 1.25; } .nb-booking-app.nb-layout-mobile .nb-booking-service-copy small { font-size: min(0.82rem, 14px); line-height: 1.4; } .nb-booking-app.nb-layout-mobile .nb-booking-service-side { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding-top: 4px; } .nb-booking-app.nb-layout-mobile .nb-booking-staff-option .nb-booking-service-side { grid-template-columns: minmax(0, 1fr); } .nb-booking-app.nb-layout-mobile .nb-booking-service-meta { min-width: 0; white-space: nowrap; } .nb-booking-app.nb-layout-mobile .nb-booking-option-action { justify-self: stretch; width: 100%; min-width: 0; padding: 9px 10px; } .nb-booking-app.nb-layout-mobile .nb-booking-staff-option .nb-booking-option-action { justify-self: stretch; } .nb-booking-app.nb-layout-mobile .nb-booking-week-button { flex: 0 0 46px; width: 46px; height: 46px; min-width: 46px; min-height: 46px; } .nb-booking-app.nb-layout-mobile .nb-booking-week-label { font-size: 0.84rem; line-height: 1.3; } .nb-booking-app.nb-layout-mobile .nb-booking-calendar { grid-template-columns: minmax(0, 1fr); overflow-x: visible !important; } .nb-booking-app.nb-layout-mobile .nb-booking-day { min-height: 0; } /* 1.17.20: privacy-friendly helper below the optional customer message. */ .nb-booking-field-help { display: block; margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--nb-booking-muted, #64748b); } /* 2.2.6: At high browser zoom the effective viewport height becomes small. * Prefer normal page scrolling over clipping the booking flow. */ @media (min-width: 901px) and (max-height: 760px) { .nb-booking-app .nb-booking-shell { max-height: none !important; overflow: visible !important; } .nb-booking-app .nb-booking-calendar-panel [data-step="schedule"] { max-height: none !important; overflow: visible !important; } .nb-booking-app .nb-booking-calendar { overflow-y: visible !important; } } /* Neuro Booking 2.2.8: optional informational service prices. */ .nb-booking-app .nb-booking-service-price { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--nb-accent) 34%, transparent); border-radius: max(2px, calc(var(--nb-choice-radius) * 0.45)); background: color-mix(in srgb, var(--nb-accent) 12%, transparent); color: var(--nb-service-title); font-size: 0.71rem; font-weight: 850; line-height: 1; white-space: nowrap; } .nb-booking-app .nb-booking-service.is-active .nb-booking-service-price { border-color: color-mix(in srgb, var(--nb-service-active-text) 34%, transparent); background: color-mix(in srgb, var(--nb-service-active-border) 18%, transparent); color: var(--nb-service-active-text); } @media (max-width: 560px) { .nb-booking-app .nb-booking-service-side { min-width: 92px; } .nb-booking-app .nb-booking-service-price, .nb-booking-app .nb-booking-service-meta { min-width: 64px; font-size: 0.64rem; } }