/* ========================================================================== P18 identitate A "Aur de semnal" — ecranele clientului (body.nb-ia) Calendarul clientului (mobil /m/calendar, desktop /customer/calendar si /calendar public), foaia de rezervare, bara de jos. Tokenii (--nb-ia-*) sunt in nexibook/tokens.css. Nimic de aici nu se aplica trainerului, adminului, paginilor studioului sau e-mailurilor: totul e sub body.nb-ia, iar clasa e pusa doar de cele doua sabloane de calendar. Metoda: (1) numele de variabile pe care paginile le folosesc deja citesc acum tokenii A (un singur bloc, fara !important); (2) reguli de forma pentru ce nu se rezolva din culori: randuri grupate pe zi, ora in stanga, randul de locuri, butoane secundare cu contur, fara majuscule/umbre/gradiente. ========================================================================== */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0218-021B, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+2122, U+2212, U+2190-2193; } /* 1. Variabilele existente citesc tokenii A ------------------------------------------------------------------ */ body.nb-ia { --bg: var(--nb-ia-bg); --surface: var(--nb-ia-surf); --surface-2: var(--nb-ia-surf2); --card: var(--nb-ia-surf); --bg-card: var(--nb-ia-surf); --bg-card-hover: var(--nb-ia-surf2); --bg-input: var(--nb-ia-bg); --input-bg: var(--nb-ia-bg); --input-border: var(--nb-ia-line-strong); --header-bg: var(--nb-ia-bg); --text: var(--nb-ia-text); --text-muted: var(--nb-ia-muted); --text-dim: var(--nb-ia-muted); --accent: var(--nb-ia-act); --accent-strong: var(--nb-ia-act); --accent-light: var(--nb-ia-surf2); --accent-glow: transparent; --accent-text: var(--nb-ia-act-text); --border: var(--nb-ia-line); --border-strong: var(--nb-ia-line-strong); --glass-bg: transparent; --glass-border: var(--nb-ia-line); --danger: var(--nb-ia-danger); --success: var(--nb-ia-text); --warning: var(--nb-ia-text); --radius: var(--nb-ia-r-lg); --radius-sm: var(--nb-ia-r); --font: var(--nb-ia-font); --nb-bg-body: var(--nb-ia-bg); --nb-bg-surface: var(--nb-ia-surf); --nb-bg-surface-trans: var(--nb-ia-bg); --nb-glass: transparent; --nb-text-main: var(--nb-ia-text); --nb-text-muted: var(--nb-ia-muted); --nb-text-secondary: var(--nb-ia-muted); --nb-border-light: var(--nb-ia-line); --nb-border-gold: var(--nb-ia-line-strong); --nb-gold: var(--nb-ia-act-text); --nb-gold-text: var(--nb-ia-text); --nb-gold-hover: var(--nb-ia-act-text); --nb-gold-dim: var(--nb-ia-act-text); --nb-gold-deep: var(--nb-ia-act-text); --nb-text-on-gold: var(--nb-ia-on-act); --nb-success: var(--nb-ia-text); --nb-success-text: var(--nb-ia-text); --nb-warn: var(--nb-ia-text); --nb-danger: var(--nb-ia-danger); --nb-shadow-sm: none; --nb-shadow-md: none; --nb-shadow-lg: none; --nb-shadow-xl: none; --nb-shadow-gold: none; --nb-shadow-gold-sm: none; --nb-gradient-gold: linear-gradient(var(--nb-ia-act), var(--nb-ia-act)); --nb-gradient-gold-wash: linear-gradient(var(--nb-ia-surf), var(--nb-ia-surf)); --color-primary: var(--nb-ia-act); --color-primary-hover: var(--nb-ia-act); --color-primary-text: var(--nb-ia-on-act); --color-bg: var(--nb-ia-bg); --color-surface: var(--nb-ia-surf); --color-text: var(--nb-ia-text); --color-text-muted: var(--nb-ia-muted); --color-border: var(--nb-ia-line); --color-border-light: var(--nb-ia-line); --nb-btn-radius: var(--nb-ia-r); /* contrast-aa.css reads these for 'gold as text' and 'muted copy'; on these screens gold is not a text colour */ --aa-gold-ink: var(--nb-ia-text); --aa-muted-light: var(--nb-ia-muted); --aa-muted-dark: var(--nb-ia-muted); --aa-red-light: var(--nb-ia-danger); /* customer-skin.css sets background/colour/font on `html body.nb` with !important; the first two read the tokens above, the font cannot */ background-image: none; } html body.nb.nb-ia { font-family: var(--nb-ia-font) !important; font-size: 15px; line-height: 1.5; } /* 2. Fara majuscule spatiate, fara umbre, fara gradient ------------------------------------------------------- */ /* trei clase repetate = specificitate peste regulile `.a .b { text-transform: uppercase }` ale foilor vechi, fara !important */ body.nb-ia.nb-ia.nb-ia *, body.nb-ia.nb-ia.nb-ia *::before, body.nb-ia.nb-ia.nb-ia *::after { text-transform: none; letter-spacing: normal; } body.nb-ia *, body.nb-ia *::before, body.nb-ia *::after { text-shadow: none; } body.nb-ia .nb-ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; } body.nb-ia .nb-ico path, body.nb-ia .nb-ico circle, body.nb-ia .nb-ico rect { vector-effect: non-scaling-stroke; } body.nb-ia :focus-visible { outline: 3px solid var(--nb-ia-ring); outline-offset: 2px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { body.nb-ia *, body.nb-ia *::before, body.nb-ia *::after { animation-duration: .001ms; transition-duration: .001ms; scroll-behavior: auto; } } /* 3. Butoane: un singur auriu (actiunea principala), restul cu contur --------------------------------------- */ body.nb-ia .btn-rezerva, body.nb-ia .btn-rezerva.slot-row, body.nb-ia .mc-btn-primary { background: var(--nb-ia-act); background-image: none; color: var(--nb-ia-on-act); border: 1px solid var(--nb-ia-act-edge); border-radius: var(--nb-ia-r); box-shadow: none; font-weight: 700; font-size: 16px; min-height: 44px; transform: none; filter: none; } body.nb-ia .btn-rezerva:hover, body.nb-ia .btn-rezerva:active, body.nb-ia .mc-btn-primary:active { box-shadow: none; transform: none; opacity: 1; filter: brightness(.94); } body.nb-ia .btn-rezerva:disabled, body.nb-ia .btn-rezerva.slot-row:disabled, body.nb-ia .mc-btn-blocked { background: transparent; background-image: none; color: var(--nb-ia-muted); border: 1px solid var(--nb-ia-line-strong); box-shadow: none; filter: none; } body.nb-ia .cal-slot-card.full .btn-rezerva:disabled, body.nb-ia .mc-svc-card.is-full .mc-btn-blocked { color: var(--nb-ia-danger); border-color: var(--nb-ia-danger); } body.nb-ia .mc-btn-secondary, body.nb-ia .btn-outline-secondary, body.nb-ia .btn-outline-primary, body.nb-ia .btn-secondary, body.nb-ia .cal-week-arrow, body.nb-ia .cal-week-today, body.nb-ia .mc-header-btn, body.nb-ia .mc-day-nav, body.nb-ia .cal-credits-banner__close { background: transparent; background-image: none; color: var(--nb-ia-text); border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r); box-shadow: none; } body.nb-ia .mc-btn-danger, body.nb-ia .btn-outline-danger, body.nb-ia .cancel-booking-btn { color: var(--nb-ia-danger); border-color: var(--nb-ia-danger); background: transparent; } /* link-ul "Sari la continut" (apare doar la focus): text pe fundal, ambele teme */ body.nb-ia a.nb-skip-link { background: var(--nb-ia-surf); color: var(--nb-ia-text); border-color: var(--nb-ia-ring); } /* 4. Antet, filtre, navigare ---------------------------------------------------------------------------------- */ body.nb-ia .app-header, body.nb-ia .m-topbar, body.nb-ia .mc-header, body.nb-ia .mc-filter-bar, body.nb-ia .mc-day-strip-wrap, body.nb-ia .m-bottom-nav { background: var(--nb-ia-bg); background-image: none; border-color: var(--nb-ia-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.nb-ia .app-header__titles h1, body.nb-ia .m-topbar__title { font-size: 20px; font-weight: 700; color: var(--nb-ia-text); -webkit-text-fill-color: currentColor; background: none; } body.nb-ia .app-header__titles p { color: var(--nb-ia-muted); font-size: 14px; } body.nb-ia .studio-topnav__link { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--nb-ia-muted); font-size: 15px; font-weight: 500; padding: 8px 12px; } body.nb-ia .studio-topnav__link.is-active { color: var(--nb-ia-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--nb-ia-sel); } body.nb-ia .studio-topnav__theme, body.nb-ia .nb-theme-toggle-fab, body.nb-ia .nb-theme-toggle { background: transparent; border: 1px solid var(--nb-ia-line-strong); box-shadow: none; color: var(--nb-ia-text); } body.nb-ia .studio-topnav__theme-icon, body.nb-ia .nb-theme-toggle-fab__icon { color: var(--nb-ia-text); } body.nb-ia .m-bottom-nav { border-top: 1px solid var(--nb-ia-line); } body.nb-ia .m-bottom-nav__tab { color: var(--nb-ia-muted); font-size: 12px; font-weight: 600; } body.nb-ia .m-bottom-nav__tab.is-active { color: var(--nb-ia-act-text); } body.nb-ia .cal-filter-card, body.nb-ia .cal-panel { background: var(--nb-ia-surf); border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r-lg); box-shadow: none; } body.nb-ia .cal-filter-title, body.nb-ia .cal-panel__title { font-size: 13px; font-weight: 600; color: var(--nb-ia-muted); } body.nb-ia .chip, body.nb-ia .trainer-chip { background: transparent; border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r); color: var(--nb-ia-text); font-size: 14px; font-weight: 500; padding: 6px 12px; } body.nb-ia .chip.active, body.nb-ia .trainer-chip.active, body.nb-ia .cal-layout-btn[aria-pressed="true"] { background: var(--nb-ia-surf2); border-color: var(--nb-ia-text); box-shadow: inset 0 0 0 1px var(--nb-ia-text); color: var(--nb-ia-text); font-weight: 700; } body.nb-ia .chip:hover, body.nb-ia .trainer-chip:hover { border-color: var(--nb-ia-text); color: var(--nb-ia-text); } body.nb-ia .toggle-switch { background: var(--nb-ia-bg); border: 1px solid var(--nb-ia-line-strong); } body.nb-ia .toggle-switch::after { background: var(--nb-ia-muted); } body.nb-ia .toggle-switch.on { background: var(--nb-ia-surf2); border-color: var(--nb-ia-text); } body.nb-ia .toggle-switch.on::after { background: var(--nb-ia-text); } body.nb-ia .cal-layout-toggle { background: transparent; border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r); } body.nb-ia .cal-layout-btn { border-radius: calc(var(--nb-ia-r) - 3px); font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .cal-week-header { background: var(--nb-ia-bg); border-bottom: 1px solid var(--nb-ia-line); } body.nb-ia .cal-week-label { font-size: 15px; font-weight: 600; text-transform: none; } body.nb-ia .cal-week-today { font-size: 14px; font-weight: 600; padding: 6px 14px; } /* zile: ziua aleasa = singurul chip auriu */ body.nb-ia .cal-day-chip, body.nb-ia .mc-day-item { background: transparent; border: 1px solid var(--nb-ia-line); border-radius: 12px; box-shadow: none; outline: 0; } body.nb-ia .cal-day-chip__name, body.nb-ia .mc-day-name { font-size: 12px; font-weight: 500; color: var(--nb-ia-muted); } body.nb-ia .cal-day-chip__num, body.nb-ia .mc-day-num { font-size: 18px; font-weight: 700; color: var(--nb-ia-text); } body.nb-ia .cal-day-chip.today:not(.selected) { background: transparent; border-color: var(--nb-ia-text); } body.nb-ia .cal-day-chip.today:not(.selected) .cal-day-chip__name { color: var(--nb-ia-muted); } body.nb-ia .cal-day-chip.today:not(.selected) .cal-day-chip__num { color: var(--nb-ia-text); } body.nb-ia .cal-day-chip.selected, body.nb-ia .cal-day-chip.selected:not(.today), body.nb-ia .mc-day-item.selected { background: var(--nb-ia-act); border-color: var(--nb-ia-act-edge); outline: 0; } body.nb-ia .cal-day-chip.selected .cal-day-chip__name, body.nb-ia .cal-day-chip.selected .cal-day-chip__num, body.nb-ia .cal-day-chip.selected:not(.today) .cal-day-chip__name, body.nb-ia .cal-day-chip.selected:not(.today) .cal-day-chip__num, body.nb-ia .mc-day-item.selected .mc-day-num, body.nb-ia .mc-day-item.selected .mc-day-name { color: var(--nb-ia-on-act); } body.nb-ia .mc-day-item.today:not(.selected) { background: transparent; border-color: var(--nb-ia-text); } body.nb-ia .mc-day-item.today:not(.selected) .mc-day-num { color: var(--nb-ia-text); } body.nb-ia .mc-day-item.today:not(.selected) .mc-day-name { color: var(--nb-ia-muted); } body.nb-ia .mc-day-dot { background: var(--nb-ia-muted); width: 4px; height: 4px; } body.nb-ia .mc-day-item.selected .mc-day-dot { background: var(--nb-ia-on-act); } body.nb-ia .mc-day-nav { width: 32px; height: 32px; } /* inelul de focus al zilelor (regulile de mai sus pun outline: 0 ca sa taie conturul vechi al zilei alese) */ html body.nb-ia .mc-day-item.mc-day-item:focus-visible, html body.nb-ia .cal-day-chip.cal-day-chip:focus-visible { outline: 3px solid var(--nb-ia-ring); outline-offset: 2px; } /* 5. Lista: grupuri pe zi, ora in stanga, randul de locuri ----------------------------------------------------- */ body.nb-ia .cal-day-section { padding: 18px 0 6px; background: transparent; } body.nb-ia .cal-day-section + .cal-day-section { border-top: 0; } body.nb-ia .cal-day-section.is-past, body.nb-ia .cal-day-section.is-past .cal-slot-card { opacity: 1; filter: none; } body.nb-ia .cal-day-heading { font-size: 15px; font-weight: 700; color: var(--nb-ia-muted); padding: 0 2px; margin-bottom: 8px; } body.nb-ia .cal-day-heading .today-badge, body.nb-ia .past-badge, body.nb-ia .cal-online-badge, body.nb-ia .mc-online-badge, body.nb-ia .cal-wk-card__badge { background: transparent; border: 1px solid var(--nb-ia-line-strong); border-radius: 999px; color: var(--nb-ia-text); font-size: 12px; font-weight: 600; padding: 1px 8px; } body.nb-ia .cal-day-empty, body.nb-ia .cal-day-past-empty { background: var(--nb-ia-surf); border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r-lg); color: var(--nb-ia-muted); font-style: normal; font-size: 14px; } body.nb-ia .cal-slot-card { background: var(--nb-ia-surf); border: 0; border-bottom: 1px solid var(--nb-ia-line); border-radius: 0; box-shadow: none; margin: 0; padding: 16px 18px; grid-template-columns: 92px 1fr auto; column-gap: 16px; align-items: center; transform: none; transition: none; } body.nb-ia .cal-day-heading + .cal-slot-card { border-top-left-radius: var(--nb-ia-r-lg); border-top-right-radius: var(--nb-ia-r-lg); } body.nb-ia .cal-slot-card:last-child { border-bottom: 0; border-bottom-left-radius: var(--nb-ia-r-lg); border-bottom-right-radius: var(--nb-ia-r-lg); } body.nb-ia .cal-slot-card:hover { border-color: var(--nb-ia-line); box-shadow: none; transform: none; } body.nb-ia .cal-slot-card.full { opacity: 1; } body.nb-ia .cal-slot-time { gap: 4px; padding-top: 0; } body.nb-ia .cal-slot-time__hour { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nb-ia-text); } body.nb-ia .cal-slot-time__duration { font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .cal-slot-name { font-size: 17px; font-weight: 650; white-space: normal; margin-bottom: 2px; } body.nb-ia .cal-slot-meta { font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .cal-slot-trainer { font-size: 14px; color: var(--nb-ia-muted); margin-top: 2px; } body.nb-ia .cal-slot-capacity { margin-top: 10px; gap: 12px; flex-wrap: wrap; } body.nb-ia .cal-cap-label, body.nb-ia .cal-cap-label.ok, body.nb-ia .cal-cap-label.low, body.nb-ia .cal-cap-label.cal-scarcity-badge { background: transparent; border-radius: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--nb-ia-text); } body.nb-ia .cal-cap-label.full { color: var(--nb-ia-danger); } body.nb-ia .cal-slot-cta { align-items: flex-end; gap: 10px; } body.nb-ia .cal-slot-price, body.nb-ia .mc-svc-price { font-size: 15px; font-weight: 600; color: var(--nb-ia-text); } @media (max-width: 560px) { body.nb-ia .cal-slot-card { grid-template-columns: 76px 1fr; column-gap: 12px; row-gap: 10px; padding: 14px; } body.nb-ia .cal-slot-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } body.nb-ia .cal-slot-time__hour { font-size: 22px; } body.nb-ia .nb-spots { min-width: 0; } } /* randul de locuri: un segment pe loc, ocupat gri, liber aur (max. 15; peste 15 sau fara capacitate: doar textul) */ body.nb-ia .nb-spots { display: flex; gap: 4px; flex: 1 1 auto; min-width: 120px; max-width: 300px; height: 10px; align-items: stretch; } body.nb-ia .nb-spot { flex: 1 1 0; min-width: 6px; border-radius: 2px; background: var(--nb-ia-free); } body.nb-ia .nb-spot.is-taken { background: var(--nb-ia-taken); } /* saptamana (desktop) */ body.nb-ia .cal-wk-col-head { background: transparent; border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r); } body.nb-ia .cal-wk-col-head.today { background: transparent; border-color: var(--nb-ia-text); } body.nb-ia .cal-wk-col-head.today .cal-wk-col-head__name { color: var(--nb-ia-muted); } body.nb-ia .cal-wk-col-head.today .cal-wk-col-head__num { color: var(--nb-ia-text); } body.nb-ia .cal-wk-col-head__name { font-size: 12px; font-weight: 500; } body.nb-ia .cal-wk-col.is-past { opacity: 1; } body.nb-ia .cal-wk-card { background: var(--nb-ia-surf); border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r); box-shadow: none; transform: none; } body.nb-ia .cal-wk-card:hover { border-color: var(--nb-ia-text); box-shadow: none; transform: none; } body.nb-ia .cal-wk-card.is-past, body.nb-ia .cal-wk-card.is-booked, body.nb-ia .cal-wk-card.is-full { opacity: 1; } body.nb-ia .cal-wk-card__time { font-size: 15px; font-variant-numeric: tabular-nums; } body.nb-ia .cal-wk-card__name { font-size: 14px; font-weight: 650; } body.nb-ia .cal-wk-card__trainer { font-size: 12px; } body.nb-ia .cal-wk-card__price { font-size: 12px; font-weight: 600; color: var(--nb-ia-text); } body.nb-ia .cal-wk-card__footer { flex-wrap: wrap; row-gap: 6px; } body.nb-ia .cal-wk-card__bar { flex: 1 0 100%; min-width: 0; height: 8px; } body.nb-ia .cal-wk-card .nb-spot { min-width: 3px; } body.nb-ia .cal-wk-empty { border: 1px dashed var(--nb-ia-line-strong); } /* panou dreapta, produse, banner, toast */ body.nb-ia .pkg-bar { background: var(--nb-ia-surf2); } body.nb-ia .pkg-bar__fill, body.nb-ia .mc-package-progress-bar { background: var(--nb-ia-text); } body.nb-ia .pkg-item__name, body.nb-ia .upcoming-item__name, body.nb-ia .rec-item__name { font-size: 14px; } body.nb-ia .pkg-item__credits, body.nb-ia .pkg-expiry, body.nb-ia .upcoming-item__trainer, body.nb-ia .upcoming-item__time, body.nb-ia .rec-item__price, body.nb-ia .upcoming-item__date-m { font-size: 12px; color: var(--nb-ia-muted); } body.nb-ia .upcoming-item__date { background: var(--nb-ia-surf2); border-radius: var(--nb-ia-r); } body.nb-ia .upcoming-item__date-d { color: var(--nb-ia-text); } body.nb-ia .rec-item__icon { background: var(--nb-ia-surf2); color: var(--nb-ia-text); font-size: 18px; border-radius: var(--nb-ia-r); } body.nb-ia .cal-product-card { background: var(--nb-ia-surf); border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r-lg); } body.nb-ia .cal-product-card:hover { border-color: var(--nb-ia-text); transform: none; } body.nb-ia .cal-product-meta { color: var(--nb-ia-muted); } body.nb-ia .cal-credits-banner { background: var(--nb-ia-surf); background-image: none; border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r-lg); animation: none; } body.nb-ia .cal-credits-banner__icon { display: inline-flex; font-size: 22px; color: var(--nb-ia-text); } body.nb-ia .cal-toast { background: var(--nb-ia-surf2); color: var(--nb-ia-text); border: 1px solid var(--nb-ia-line-strong); box-shadow: none; } body.nb-ia .cal-toast--success, body.nb-ia .cal-toast--error { background: var(--nb-ia-surf2); color: var(--nb-ia-text); } body.nb-ia .cal-toast--error { border-color: var(--nb-ia-danger); } body.nb-ia .cal-empty-icon, body.nb-ia .mc-empty-icon { display: inline-flex; font-size: 40px; opacity: 1; color: var(--nb-ia-muted); } body.nb-ia .cal-empty-icon .nb-ico, body.nb-ia .mc-empty-icon .nb-ico { width: 1em; height: 1em; } /* comutatorul de limba (mobil, vizitator): selectat = contur, nu auriu */ body.nb-ia .mc-lang-switch { background: transparent; border: 1px solid var(--nb-ia-line-strong); border-radius: 999px; } body.nb-ia .mc-lang-switch button { background: transparent; color: var(--nb-ia-muted); border: 1px solid transparent; font-size: 14px; min-height: 32px; } body.nb-ia .mc-lang-switch button.active { background: var(--nb-ia-surf2); color: var(--nb-ia-text); border-color: var(--nb-ia-text); font-weight: 700; } body.nb-ia .m-langswitch { background: transparent; border-color: var(--nb-ia-line-strong); } body.nb-ia .m-langswitch button { color: var(--nb-ia-muted); font-size: 14px; } body.nb-ia .m-langswitch button.active { background: var(--nb-ia-surf2); color: var(--nb-ia-text); box-shadow: inset 0 0 0 1px var(--nb-ia-text); font-weight: 700; } /* 6. Mobil: lista de clase ----------------------------------------------------------------------------------- */ body.nb-ia .m-topbar { padding-bottom: 4px; } body.nb-ia .mc-header-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; font-size: 18px; } body.nb-ia .mc-filter-bar { padding: 6px 12px; border: 0; } body.nb-ia .mc-filter-bar input, body.nb-ia .mc-filter-bar select { background: var(--nb-ia-bg); border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r); color: var(--nb-ia-text); font-size: 16px; min-height: 44px; } body.nb-ia .mc-day-strip-wrap { border: 0; border-bottom: 1px solid var(--nb-ia-line); } body.nb-ia .mc-main { background: transparent; } body.nb-ia .mc-svc-card { display: grid; grid-template-columns: 64px 1fr auto; column-gap: 12px; row-gap: 4px; align-items: baseline; background: var(--nb-ia-surf); border: 0; border-bottom: 1px solid var(--nb-ia-line); border-radius: 0; box-shadow: none; padding: 16px 16px 14px; margin: 0; transition: none; } /* o singura suprafata pe zi: primul/ultimul rand rotunjesc colturile (padding-ul de jos al #mcMain ramane, deci subsolul nu intra sub bara de jos) */ body.nb-ia .mc-svc-card:first-child { border-top-left-radius: var(--nb-ia-r-lg); border-top-right-radius: var(--nb-ia-r-lg); } body.nb-ia .mc-svc-card:not(:has(~ .mc-svc-card)) { border-bottom: 0; border-bottom-left-radius: var(--nb-ia-r-lg); border-bottom-right-radius: var(--nb-ia-r-lg); } body.nb-ia .mc-svc-card:active { background: var(--nb-ia-surf2); } body.nb-ia .mc-svc-card.mc-svc-past { background: var(--nb-ia-surf); } body.nb-ia .mc-svc-card.selected { background: var(--nb-ia-surf2); border-color: var(--nb-ia-line); } body.nb-ia .mc-svc-past { pointer-events: none; } body.nb-ia .mc-svc-top, body.nb-ia .mc-svc-meta { display: contents; } body.nb-ia .mc-svc-time { grid-area: 1 / 1 / 3 / 2; align-self: start; font-size: 21px; font-weight: 700; color: var(--nb-ia-text); font-variant-numeric: tabular-nums; } body.nb-ia .mc-svc-name { grid-area: 1 / 2 / 2 / 3; font-size: 17px; font-weight: 650; color: var(--nb-ia-text); } body.nb-ia .mc-svc-price { grid-area: 1 / 3 / 2 / 4; text-align: right; } body.nb-ia .mc-svc-trainer { grid-area: 2 / 2 / 3 / 3; display: flex; align-items: center; gap: 6px; font-size: 14px; border: 0; padding: 0; margin: 0; color: var(--nb-ia-muted); } body.nb-ia .mc-svc-trainer span { font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .mc-svc-trainer img { width: 20px; height: 20px; } body.nb-ia .mc-svc-dur { grid-area: 2 / 3 / 3 / 4; justify-self: end; font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .mc-svc-spots { grid-area: 3 / 2 / 4 / 4; margin-top: 8px; max-width: none; } body.nb-ia .mc-svc-meta > .capacity-ok, body.nb-ia .mc-svc-meta > .capacity-low, body.nb-ia .mc-svc-meta > .capacity-full, body.nb-ia .mc-svc-meta > .mc-scarcity-badge { grid-area: 4 / 2 / 5 / 4; background: transparent; border-radius: 0; padding: 0; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--nb-ia-text); } body.nb-ia .mc-svc-meta > .capacity-full { color: var(--nb-ia-danger); } body.nb-ia .mc-svc-date { grid-area: 5 / 2 / 6 / 4; font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .mc-svc-actions { grid-area: 6 / 2 / 7 / 4; display: flex; gap: 8px; margin-top: 10px; } body.nb-ia .mc-svc-actions .mc-btn-primary { flex: 1; height: 44px; font-size: 16px; } body.nb-ia .mc-svc-actions .mc-btn-blocked { border-radius: var(--nb-ia-r); flex: 0 0 auto; height: 44px; padding: 0 16px; font-size: 16px; } body.nb-ia .mc-btn-small { width: 44px; height: 44px; padding: 0; border-radius: var(--nb-ia-r); display: flex; align-items: center; justify-content: center; } body.nb-ia .mc-svc-actions .mc-btn-small[data-action="joinWaitingList"] { flex: 1 1 auto; width: auto; padding: 0 14px; font-size: 14px; } body.nb-ia .mc-svc-card .mc-svc-top + .mc-svc-meta { margin: 0; } body.nb-ia .mc-svc-past .mc-svc-time, body.nb-ia .mc-svc-past .mc-svc-name, body.nb-ia .mc-svc-past .mc-svc-price { color: var(--nb-ia-muted); } /* 7. Foaia de rezervare (mobil .mc-modal, desktop .modal-content) -------------------------------------------- */ body.nb-ia .mc-modal, body.nb-ia #booking-popup .modal-content { background: var(--nb-ia-surf); border: 1px solid var(--nb-ia-line); border-radius: var(--nb-ia-r-lg); box-shadow: none; } body.nb-ia .mc-modal { border: 0; border-radius: var(--nb-ia-r-sheet) var(--nb-ia-r-sheet) 0 0; } body.nb-ia .mc-modal-header { background: transparent; border-bottom: 1px solid var(--nb-ia-line); } body.nb-ia .mc-modal-header h2, body.nb-ia #booking-modal-title { font-size: 18px; font-weight: 650; } body.nb-ia .mc-modal-close, body.nb-ia #booking-close { border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } body.nb-ia .mc-modal-close { background: var(--nb-ia-surf2); color: var(--nb-ia-text); width: 44px; height: 44px; } body.nb-ia #booking-popup.modal { background: rgba(0, 0, 0, .65); backdrop-filter: none; } body.nb-ia .booking-service-name { font-size: 22px; font-weight: 700; color: var(--nb-ia-text); } body.nb-ia .booking-when, body.nb-ia .booking-resource, body.nb-ia .booking-when-lg, body.nb-ia #booking-modal-description, body.nb-ia .booking-service-desc { font-size: 15px; color: var(--nb-ia-muted); } body.nb-ia .booking-price, body.nb-ia .booking-price-lg { font-size: 18px; font-weight: 700; color: var(--nb-ia-text); opacity: 1; } body.nb-ia .purchase-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: transparent; border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r-lg); box-shadow: none; transform: none; } body.nb-ia .purchase-card:hover { background: var(--nb-ia-surf2); border-color: var(--nb-ia-text); } body.nb-ia .purchase-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; font-size: 20px; color: var(--nb-ia-text); } body.nb-ia .purchase-card__body { flex: 1; min-width: 0; } body.nb-ia .purchase-card__title { font-size: 16px; font-weight: 650; color: var(--nb-ia-text); } body.nb-ia .purchase-card__sub { font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .purchase-card__check { width: 24px; height: 24px; margin-left: auto; border: 2px solid var(--nb-ia-line-strong); background: transparent; border-radius: 999px; } body.nb-ia .purchase-card-input:checked + .purchase-card { background: var(--nb-ia-surf2); border: 2px solid var(--nb-ia-sel); box-shadow: none; } body.nb-ia .purchase-card-input:checked + .purchase-card .purchase-card__check { background: var(--nb-ia-sel); border-color: var(--nb-ia-sel); } body.nb-ia .purchase-card-input:checked + .purchase-card .purchase-card__check::after { border-color: var(--nb-ia-on-act); } html[data-theme="light"] body.nb-ia .purchase-card-input:checked + .purchase-card .purchase-card__check::after { border-color: var(--nb-ia-surf); } body.nb-ia .purchase-card-input:focus-visible + .purchase-card { outline: 3px solid var(--nb-ia-ring); outline-offset: 2px; } body.nb-ia .nb-extras-summary, body.nb-ia #purchase-other-options > summary { font-size: 14px; color: var(--nb-ia-muted); } body.nb-ia .form-control, body.nb-ia .form-select, body.nb-ia #booking-popup input:not([type=checkbox]):not([type=radio]), body.nb-ia #booking-popup select { background: var(--nb-ia-bg); border: 1px solid var(--nb-ia-line-strong); border-radius: var(--nb-ia-r); color: var(--nb-ia-text); box-shadow: none; } body.nb-ia input[type="checkbox"], body.nb-ia input[type="radio"] { accent-color: var(--nb-ia-sel); } body.nb-ia ::placeholder { color: var(--nb-ia-muted); opacity: 1; } body.nb-ia #booking-popup .alert, body.nb-ia .booking-error-banner, body.nb-ia .booking-reschedule-note { background: var(--nb-ia-surf2); border: 1px solid var(--nb-ia-line-strong); color: var(--nb-ia-text); border-radius: var(--nb-ia-r); } body.nb-ia #booking-popup .alert-danger, body.nb-ia .booking-error-banner { border-color: var(--nb-ia-danger); } body.nb-ia #purchase-type-group { border: 0; } body.nb-ia #booking-popup .modal-content { position: relative; } body.nb-ia input, body.nb-ia select, body.nb-ia textarea, body.nb-ia button { font-family: inherit; } /* formularul de cont/cod pentru vizitatori (guest-booking-auth.js isi pune singur