/*!
 * NexiBook Customer Skin — Pasul 5/6
 * Scope: body.nb customer-facing pages (bookings, purchases, calendar, packages)
 * Author: BUILDER
 * Date: 2025-01-21
 */

/* ── Base ── (html body.nb to beat html[data-theme="dark"] body specificity 0,1,2) */
html body.nb {
  background-color: var(--nb-bg-body) !important;
  color: var(--nb-text-main) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
html body.nb::before,
html body.nb::after {
  background: transparent !important;
}

body.nb a {
  color: var(--nb-gold);
  text-decoration: none;
}

body.nb a:hover {
  color: var(--nb-gold-deep);
  text-decoration: underline;
}

/* ── Typography ── */
body.nb h1,
body.nb h2,
body.nb h3,
body.nb h4,
body.nb h5,
body.nb h6 {
  color: var(--nb-text-main);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.nb .text-muted {
  color: var(--nb-text-muted) !important;
}

/* ── Cards ── */
body.nb .card {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body.nb .card-header {
  background-color: var(--nb-bg-surface);
  border-bottom: 1px solid var(--nb-border-light);
  border-radius: 14px 14px 0 0;
  color: var(--nb-text-main);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

body.nb .card-body {
  background-color: var(--nb-bg-surface);
  color: var(--nb-text-main);
  padding: 1.25rem;
}

body.nb .card-footer {
  background-color: var(--nb-bg-surface);
  border-top: 1px solid var(--nb-border-light);
  border-radius: 0 0 14px 14px;
}

/* ── Buttons ── */
body.nb .btn {
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

body.nb .btn-primary {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep)) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

body.nb .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

body.nb .btn-primary:focus,
body.nb .btn-primary:active {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3) !important;
}

body.nb .btn-outline-primary {
  background-color: transparent !important;
  border: 1.5px solid var(--nb-gold) !important;
  color: var(--nb-gold) !important;
}

body.nb .btn-outline-primary:hover {
  background-color: rgba(212, 175, 55, 0.1) !important;
  border-color: var(--nb-gold-deep) !important;
  color: var(--nb-gold-deep) !important;
}

body.nb .btn-outline-secondary {
  background-color: transparent !important;
  border: 1.5px solid var(--nb-border-light) !important;
  color: var(--nb-text-muted) !important;
}

body.nb .btn-outline-secondary:hover {
  background-color: var(--nb-bg-elevated) !important;
  border-color: var(--nb-gold) !important;
  color: var(--nb-gold) !important;
}

body.nb .btn-secondary {
  background-color: var(--nb-bg-elevated) !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
}

body.nb .btn-secondary:hover {
  background-color: var(--nb-bg-surface) !important;
  border-color: var(--nb-gold) !important;
}

body.nb .btn-success,
body.nb .btn-danger,
body.nb .btn-warning,
body.nb .btn-info {
  border: none !important;
}

body.nb .btn:disabled,
body.nb .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Forms ── */
body.nb .form-control,
body.nb .form-select {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 10px;
  color: var(--nb-text-main);
  font-size: 0.9375rem;
  padding: 0.625rem 0.875rem;
}

body.nb .form-control:focus,
body.nb .form-select:focus {
  background-color: var(--nb-bg-elevated);
  border-color: var(--nb-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  color: var(--nb-text-main);
}

body.nb .form-control::placeholder {
  color: var(--nb-text-muted);
}

body.nb .form-label {
  color: var(--nb-text-main);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.nb .form-check-input {
  background-color: var(--nb-bg-elevated);
  border-color: var(--nb-border-light);
}

body.nb .form-check-input:checked {
  background-color: var(--nb-gold);
  border-color: var(--nb-gold);
}

body.nb .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

body.nb .form-check-label {
  color: var(--nb-text-main);
}

body.nb .input-group-text {
  background-color: var(--nb-bg-elevated);
  border-color: var(--nb-border-light);
  color: var(--nb-text-muted);
}

body.nb .form-text {
  color: var(--nb-text-muted);
}

/* ── Tables ── */
body.nb .table,
body.nb table {
  --bs-table-bg: var(--nb-bg-surface);
  --bs-table-color: var(--nb-text-main);
  --bs-table-border-color: var(--nb-border-light);
  border-radius: 10px;
  overflow: hidden;
}

body.nb .table thead th,
body.nb table thead th {
  background-color: var(--nb-bg-elevated);
  border-bottom: 2px solid var(--nb-gold) !important;
  color: var(--nb-text-main);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.nb .table tbody tr,
body.nb table tbody tr {
  transition: background-color 0.15s ease;
}

body.nb .table tbody tr:hover,
body.nb table tbody tr:hover {
  background-color: rgba(212, 175, 55, 0.06) !important;
}

body.nb .table td,
body.nb .table th,
body.nb table td,
body.nb table th {
  border-color: var(--nb-border-light);
  color: var(--nb-text-main);
  padding: 0.875rem 1rem;
  vertical-align: middle;
}

/* ── Badges ── */
body.nb .badge {
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35em 0.65em;
}

body.nb .badge-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
}

body.nb .badge-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}

body.nb .badge-danger,
body.nb .badge-error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

body.nb .badge-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
}

body.nb .badge-primary {
  background-color: rgba(212, 175, 55, 0.15) !important;
  color: var(--nb-gold) !important;
}

body.nb .badge-secondary {
  background-color: var(--nb-bg-elevated) !important;
  color: var(--nb-text-muted) !important;
}

/* ── Modals ── */
body.nb .modal-content {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

body.nb .modal-header {
  background-color: var(--nb-bg-surface);
  border-bottom: 1px solid var(--nb-border-light);
  border-radius: 16px 16px 0 0;
}

body.nb .modal-header .modal-title {
  color: var(--nb-text-main);
  font-weight: 600;
}

body.nb .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.6;
}

body.nb .modal-header .btn-close:hover {
  opacity: 1;
}

body.nb .modal-body {
  background-color: var(--nb-bg-surface);
  color: var(--nb-text-main);
}

body.nb .modal-footer {
  background-color: var(--nb-bg-surface);
  border-top: 1px solid var(--nb-border-light);
  border-radius: 0 0 16px 16px;
}

body.nb .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* ── Nav Tabs / Pills ── */
body.nb .nav-tabs {
  border-bottom: 1px solid var(--nb-border-light);
}

body.nb .nav-tabs .nav-link {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--nb-text-muted);
  font-weight: 500;
  padding: 0.625rem 1rem;
}

body.nb .nav-tabs .nav-link:hover {
  border-bottom-color: var(--nb-border-light);
  color: var(--nb-text-main);
}

body.nb .nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom-color: var(--nb-gold);
  color: var(--nb-gold);
}

body.nb .nav-pills .nav-link {
  background-color: var(--nb-bg-elevated);
  border-radius: 10px;
  color: var(--nb-text-muted);
  font-weight: 500;
}

body.nb .nav-pills .nav-link:hover {
  background-color: var(--nb-bg-surface);
  color: var(--nb-text-main);
}

body.nb .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep));
  color: #000;
}

/* ── Pagination ── */
body.nb .pagination {
  gap: 0.25rem;
}

body.nb .pagination .page-link {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 8px;
  color: var(--nb-text-main);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
}

body.nb .pagination .page-link:hover {
  background-color: var(--nb-bg-surface);
  border-color: var(--nb-gold);
  color: var(--nb-gold);
}

body.nb .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep));
  border-color: var(--nb-gold);
  color: #000;
}

body.nb .pagination .page-item.disabled .page-link {
  background-color: var(--nb-bg-elevated);
  border-color: var(--nb-border-light);
  color: var(--nb-text-muted);
  opacity: 0.5;
}

/* ── Alerts ── */
body.nb .alert {
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
}

body.nb .alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

body.nb .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

body.nb .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

body.nb .alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

body.nb .alert-primary {
  background-color: rgba(212, 175, 55, 0.1);
  color: var(--nb-gold);
}

/* ── Customer-specific components ── */
body.nb .purchase-card,
body.nb .booking-card,
body.nb .package-card {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 14px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.nb .purchase-card:hover,
body.nb .booking-card:hover,
body.nb .package-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

body.nb .credit-pill {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep));
  border-radius: 999px;
  color: #000;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}

body.nb .calendar-day {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 10px;
  color: var(--nb-text-main);
  min-height: 80px;
  padding: 0.5rem;
  transition: background-color 0.15s ease;
}

body.nb .calendar-day:hover {
  background-color: var(--nb-bg-surface);
}

body.nb .calendar-day.active,
body.nb .calendar-day.selected {
  background-color: rgba(212, 175, 55, 0.1);
  border-color: var(--nb-gold);
}

body.nb .day-strip {
  background-color: var(--nb-bg-elevated);
  border-bottom: 1px solid var(--nb-border-light);
  border-radius: 10px 10px 0 0;
  color: var(--nb-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
}

body.nb .slot-row {
  align-items: center;
  background-color: var(--nb-bg-surface);
  border-bottom: 1px solid var(--nb-border-light);
  color: var(--nb-text-main);
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  transition: background-color 0.15s ease;
}

body.nb .slot-row:hover {
  background-color: rgba(212, 175, 55, 0.05);
}

body.nb .slot-row.selected {
  background-color: rgba(212, 175, 55, 0.1);
}

body.nb .video-thumbnail {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

body.nb .video-thumbnail::after {
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

body.nb .replay-card {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 14px;
  overflow: hidden;
}

body.nb .progress {
  background-color: var(--nb-bg-elevated);
  border-radius: 999px;
  height: 0.5rem;
}

body.nb .progress-bar {
  background: linear-gradient(90deg, var(--nb-gold), var(--nb-gold-deep));
  border-radius: 999px;
}

/* ── Tabular nums ── */
body.nb .price,
body.nb .amount,
body.nb .duration,
body.nb .time,
body.nb .credits-remaining {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ── Scrollbar ── */
body.nb ::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

body.nb ::-webkit-scrollbar-track {
  background: var(--nb-bg-elevated);
  border-radius: 4px;
}

body.nb ::-webkit-scrollbar-thumb {
  background: var(--nb-gold);
  border-radius: 4px;
}

body.nb ::-webkit-scrollbar-thumb:hover {
  background: var(--nb-gold-deep);
}

/* ── Dropdowns ── */
body.nb .dropdown-menu {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

body.nb .dropdown-item {
  color: var(--nb-text-main);
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
}

body.nb .dropdown-item:hover,
body.nb .dropdown-item:focus {
  background-color: rgba(212, 175, 55, 0.1);
  color: var(--nb-gold);
}

body.nb .dropdown-divider {
  border-color: var(--nb-border-light);
}

/* ── List groups ── */
body.nb .list-group {
  border-radius: 14px;
}

body.nb .list-group-item {
  background-color: var(--nb-bg-surface);
  border-color: var(--nb-border-light);
  color: var(--nb-text-main);
}

body.nb .list-group-item:hover {
  background-color: var(--nb-bg-elevated);
}

body.nb .list-group-item.active {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep));
  border-color: var(--nb-gold);
  color: #000;
}

/* ── Breadcrumb ── */
body.nb .breadcrumb {
  background-color: transparent;
}

body.nb .breadcrumb-item a {
  color: var(--nb-text-muted);
}

body.nb .breadcrumb-item a:hover {
  color: var(--nb-gold);
}

body.nb .breadcrumb-item.active {
  color: var(--nb-text-main);
}

body.nb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--nb-text-muted);
}

/* ── Top-bar (site-header partial) ── */
html body.nb .site-header,
html body.nb nav.site-header {
  background: var(--nb-bg-body) !important;
  border-bottom: 1px solid var(--nb-border-light) !important;
  box-shadow: none !important;
}
html body.nb .site-header .brand,
html body.nb .site-header .brand-glow {
  color: var(--nb-text-main) !important;
  text-shadow: none !important;
}
html body.nb .site-header .text-muted,
html body.nb .site-header .text-secondary {
  color: var(--nb-text-muted) !important;
}
html body.nb .site-header .btn-custom,
html body.nb .site-header .btn-outline-secondary,
html body.nb .site-header .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
  white-space: nowrap;
}
html body.nb .site-header .btn-custom:hover,
html body.nb .site-header .btn-outline-secondary:hover,
html body.nb .site-header .btn-outline-primary:hover {
  border-color: var(--nb-border-gold) !important;
  color: var(--nb-gold) !important;
}
html body.nb .site-header .btn-primary,
html body.nb .site-header .btn-warning {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep)) !important;
  color: #000 !important;
  border: none !important;
  white-space: nowrap;
}
/* Header overflow fix on narrower viewports — text labels can overlap (calendar page).
   Allow wrap + reduce gaps; truncate long button labels with ellipsis. */
html body.nb .site-header .container {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}
html body.nb .site-header .d-flex {
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
html body.nb .site-header .btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── /customer/purchases tab pills (override indigo with gold) ── */
html body.nb .purchase-tab {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-muted) !important;
}
html body.nb .purchase-tab:hover {
  background: rgba(255,215,0,0.06) !important;
  color: var(--nb-text-main) !important;
  border-color: rgba(255,215,0,0.25) !important;
}
html body.nb .purchase-tab.active {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep)) !important;
  color: #000 !important;
  border-color: var(--nb-gold) !important;
  box-shadow: 0 6px 18px rgba(255,215,0,0.25) !important;
}
html body.nb .purchase-tab .tab-count {
  background: rgba(0,0,0,0.18) !important;
  color: inherit !important;
}
html body.nb .purchase-tab.active .tab-count {
  background: rgba(0,0,0,0.22) !important;
}

/* ── Booking schedule date (was bright indigo) ── */
html body.nb .scheduled-for-date,
html body.nb .booking-schedule a,
html body.nb [data-purchase-schedule] {
  color: var(--nb-gold) !important;
}
/* Bootstrap .text-primary scoped under purchase context (was indigo) */
html body.nb .purchase-card .text-primary,
html body.nb .info-value.text-primary,
html body.nb .booking-card .text-primary {
  color: var(--nb-gold) !important;
}
/* Generic .info-label / .info-value pairs in purchase + booking cards */
html body.nb .info-label {
  color: var(--nb-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
html body.nb .info-value {
  color: var(--nb-text-main) !important;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   Booking Modal (#booking-popup) — premium centered card with backdrop
   ────────────────────────────────────────────────────────────────── */
html body.nb #booking-popup,
html body.nb #booking-popup.modal {
  background: rgba(5, 5, 5, 0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-start !important;
  padding: clamp(1rem, 4vh, 4rem) 1rem !important;
}
html body.nb #booking-popup .modal-content {
  background: var(--nb-bg-surface) !important;
  border: 1px solid var(--nb-border-gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 215, 0, 0.06),
              0 8px 32px rgba(255, 215, 0, 0.08) !important;
  max-width: 560px !important;
  width: 100% !important;
  padding: 28px 28px 24px !important;
  margin: 0 auto !important;
  text-align: left !important;
  color: var(--nb-text-main) !important;
}
@media (max-width: 600px) {
  html body.nb #booking-popup .modal-content {
    padding: 22px 18px 18px !important;
    border-radius: 14px !important;
  }
}

/* Close button — top-right, ghost circle, hover gold */
html body.nb #booking-popup .close,
html body.nb #booking-popup #booking-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--nb-text-muted) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
html body.nb #booking-popup .close:hover,
html body.nb #booking-popup #booking-close:hover {
  background: rgba(255, 215, 0, 0.12) !important;
  color: var(--nb-gold) !important;
}

/* Title + service header section */
html body.nb #booking-popup h2 {
  color: var(--nb-text-main) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  padding-right: 32px;
}
html body.nb #booking-popup .booking-service-name {
  color: var(--nb-gold) !important;
  font-weight: 600;
}

/* Sub-cards inside modal (T&C panel, promo, gift card) — subtle nested look */
html body.nb #booking-popup .terms-card,
html body.nb #booking-popup .promo-section,
html body.nb #booking-popup .gift-card-section,
html body.nb #booking-popup [class*="Termeni"],
html body.nb #booking-popup section,
html body.nb #booking-popup .card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--nb-border-light) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

/* IMPORTANT - CITIȚI alert: amber tinted */
html body.nb #booking-popup .alert-warning,
html body.nb #booking-popup .important-warning {
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
  color: #fbbf24 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

/* Inputs inside modal */
html body.nb #booking-popup input[type="text"],
html body.nb #booking-popup input[type="email"],
html body.nb #booking-popup input[type="tel"],
html body.nb #booking-popup select,
html body.nb #booking-popup textarea {
  background: var(--nb-bg-body) !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.nb #booking-popup input:focus,
html body.nb #booking-popup select:focus {
  border-color: var(--nb-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important;
  outline: none !important;
}

/* Checkbox row (T&C) */
html body.nb #booking-popup label.terms-label,
html body.nb #booking-popup .form-check-label {
  color: var(--nb-text-main) !important;
  font-size: 0.92rem;
  line-height: 1.5;
}
html body.nb #booking-popup a {
  color: var(--nb-gold) !important;
}

/* Section headers inside modal (CoD PROMOTIONAL, CARD CADOU) */
html body.nb #booking-popup .section-label,
html body.nb #booking-popup .form-section-title {
  color: var(--nb-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin: 8px 0 6px;
}

/* "Alege tipul de rezervare" / "O clasă" pill */
html body.nb #booking-popup .btn-group .btn,
html body.nb #booking-popup .purchase-type-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}
html body.nb #booking-popup .btn-group .btn.active,
html body.nb #booking-popup .purchase-type-btn.active,
html body.nb #booking-popup .btn-group .btn:hover {
  background: rgba(255, 215, 0, 0.10) !important;
  border-color: var(--nb-gold) !important;
  color: var(--nb-gold) !important;
}

/* Final "Plătește" button at bottom of modal — full-width gold */
html body.nb #booking-popup .booking-submit,
html body.nb #booking-popup #booking-submit-btn,
html body.nb #booking-popup button[type="submit"] {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep)) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  width: 100% !important;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body.nb #booking-popup .booking-submit:hover,
html body.nb #booking-popup button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(255, 215, 0, 0.32) !important;
}

/* :target highlight — when /customer/purchases#booking-56 is opened, the
   matching purchase-card briefly pulses with a gold ring so the user sees
   which booking they were navigated to. */
html body.nb .purchase-card:target {
  border-color: var(--nb-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25),
              0 16px 48px rgba(255, 215, 0, 0.18) !important;
  animation: nb-target-pulse 1.6s ease-out 1;
  scroll-margin-top: 80px;
}
@keyframes nb-target-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,215,0,0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(255,215,0,0.05); }
  100% { box-shadow: 0 0 0 3px  rgba(255,215,0,0.25),
                     0 16px 48px rgba(255,215,0,0.18); }
}

/**
 * NexiBook — Centered Mobile Toast Fix
 * Purpose: Reposition Bootstrap toast container from top-right to center-screen on mobile,
 *          making warning/error toasts equally prominent as success celebration overlays.
 *          iOS-native aesthetic: glass morphism, gradient accents, slide-up animation.
 * Author: BUILDER (agent)
 * Date: 2025-07-10
 *
 * INTEGRATION: Append these rules to /var/www/nexibook/public/css/nexibook/customer-skin.css
 * No JavaScript changes required. Pure CSS override of .toast-container positioning.
 */

/* ============================================================
   1. SLIDE-UP KEYFRAME ANIMATION (iOS system notification style)
   ============================================================ */
@keyframes toastSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Subtle pulse on the accent bar to draw attention */
@keyframes accentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================================
   1.5. GLOBAL TOAST CONTAINER CLICK-THROUGH (CRITICAL FIX 2026-05-08)
   Bootstrap's .toast-container with position:fixed top/right + bottom/left
   from cascading rules expands to ~700×700 covering main viewport area on
   desktop. With pointer-events: auto (default) it blocks clicks on every
   button beneath even when EMPTY (no toasts visible). Force click-through
   on the container; restore on actual visible toasts.
   ============================================================ */
.toast-container {
  pointer-events: none !important;
}
.toast-container .toast,
.toast-container .toast.show {
  pointer-events: auto !important;
}

/* ============================================================
   2. MOBILE TOAST CONTAINER REPOSITIONING
   Target: Bootstrap .toast-container with position:fixed
   Strategy: On mobile, override to center-screen with bottom bias
   ============================================================ */
@media (max-width: 768px) {

  /* --- Container: center-bottom with slide-up entry --- */
  .toast-container {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 12% !important;            /* slightly above bottom for thumb-reach comfort */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 400px !important;
    z-index: 99999 !important;          /* above celebration overlay (99990) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;    /* allow click-through on gaps */
  }

  /* --- Individual toast: glass card with animation --- */
  .toast-container .toast {
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(30, 30, 30, 0.88) !important;
    color: #ffffff !important;
    animation: toastSlideUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    opacity: 0 !important;             /* start hidden, animation reveals */
    position: relative !important;
  }

  /* Hiding animation — Bootstrap adds .hiding class during fade */
  .toast-container .toast.hiding {
    animation: toastFadeOut 0.3s ease forwards !important;
  }

  /* Already-visible toasts (e.g., re-render) should be visible without animation */
  .toast-container .toast.show {
    opacity: 1 !important;
  }

  /* --- Accent bar (left edge) — color varies by type --- */
  .toast-container .toast::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    border-radius: 16px 0 0 16px !important;
    animation: accentPulse 2s ease-in-out infinite !important;
  }

  /* WARNING — amber/gold gradient accent */
  .toast-container .toast.bg-warning::before,
  .toast-container .toast[data-bs-theme="warning"]::before,
  .toast-container .toast.text-bg-warning::before {
    background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  }

  /* ERROR / DANGER — red gradient accent */
  .toast-container .toast.bg-danger::before,
  .toast-container .toast[data-bs-theme="danger"]::before,
  .toast-container .toast.text-bg-danger::before {
    background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  }

  /* SUCCESS — green gradient accent */
  .toast-container .toast.bg-success::before,
  .toast-container .toast[data-bs-theme="success"]::before,
  .toast-container .toast.text-bg-success::before {
    background: linear-gradient(180deg, #22c55e, #15803d) !important;
  }

  /* INFO — blue gradient accent */
  .toast-container .toast.bg-info::before,
  .toast-container .toast[data-bs-theme="info"]::before,
  .toast-container .toast.text-bg-info::before {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  }

  /* Default / unknown — neutral gray accent */
  .toast-container .toast::before {
    background: linear-gradient(180deg, #9ca3af, #6b7280) !important;
  }

  /* --- Toast header: transparent, larger, white text --- */
  .toast-container .toast .toast-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 12px 16px 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }

  .toast-container .toast .toast-header .btn-close {
    filter: invert(1) grayscale(1) brightness(0.8) !important;
    opacity: 0.6 !important;
    font-size: 14px !important;
  }

  .toast-container .toast .toast-header .btn-close:hover {
    opacity: 1 !important;
  }

  /* --- Toast body: larger text, comfortable padding --- */
  .toast-container .toast .toast-body {
    padding: 10px 16px 14px 20px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
  }

  /* --- Icon styling if present (e.g., <i class="bi bi-exclamation-triangle">) --- */
  .toast-container .toast .toast-body i.bi,
  .toast-container .toast .toast-header i.bi {
    font-size: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
  }

  .toast-container .toast.bg-warning .toast-body i.bi,
  .toast-container .toast.text-bg-warning .toast-body i.bi,
  .toast-container .toast.bg-warning .toast-header i.bi,
  .toast-container .toast.text-bg-warning .toast-header i.bi {
    color: #fbbf24 !important;
  }

  .toast-container .toast.bg-danger .toast-body i.bi,
  .toast-container .toast.text-bg-danger .toast-body i.bi,
  .toast-container .toast.bg-danger .toast-header i.bi,
  .toast-container .toast.text-bg-danger .toast-header i.bi {
    color: #f87171 !important;
  }

  .toast-container .toast.bg-success .toast-body i.bi,
  .toast-container .toast.text-bg-success .toast-body i.bi,
  .toast-container .toast.bg-success .toast-header i.bi,
  .toast-container .toast.text-bg-success .toast-header i.bi {
    color: #4ade80 !important;
  }

  /* --- Override Bootstrap's default warning/danger bg colors on toast --- */
  /* Bootstrap sets .bg-warning → yellow bg, which clashes with glass aesthetic */
  .toast-container .toast.bg-warning,
  .toast-container .toast.text-bg-warning {
    background: rgba(30, 30, 30, 0.88) !important;
  }

  .toast-container .toast.bg-danger,
  .toast-container .toast.text-bg-danger {
    background: rgba(30, 30, 30, 0.88) !important;
  }

  .toast-container .toast.bg-success,
  .toast-container .toast.text-bg-success {
    background: rgba(30, 30, 30, 0.88) !important;
  }

  .toast-container .toast.bg-info,
  .toast-container .toast.text-bg-info {
    background: rgba(30, 30, 30, 0.88) !important;
  }

  /* --- Subtle gradient overlay on the entire toast card per type --- */
  .toast-container .toast.bg-warning::after,
  .toast-container .toast.text-bg-warning::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent 60%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .toast-container .toast.bg-danger::after,
  .toast-container .toast.text-bg-danger::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent 60%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .toast-container .toast.bg-success::after,
  .toast-container .toast.text-bg-success::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent 60%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Ensure body/header content sits above the gradient overlay */
  .toast-container .toast .toast-header,
  .toast-container .toast .toast-body {
    position: relative !important;
    z-index: 1 !important;
  }

  /* --- Progressive bar (if Bootstrap toast progress bar is used) --- */
  .toast-container .toast .progress {
    height: 3px !important;
    border-radius: 0 0 16px 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .toast-container .toast.bg-warning .progress-bar,
  .toast-container .toast.text-bg-warning .progress-bar {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  }

  .toast-container .toast.bg-danger .progress-bar,
  .toast-container .toast.text-bg-danger .progress-bar {
    background: linear-gradient(90deg, #ef4444, #f87171) !important;
  }

  .toast-container .toast.bg-success .progress-bar,
  .toast-container .toast.text-bg-success .progress-bar {
    background: linear-gradient(90deg, #22c55e, #4ade80) !important;
  }

  /* --- Dimmed backdrop effect: subtle overlay behind toast --- */
  /* This creates a focus effect similar to iOS system alerts */
  .toast-container::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: -1 !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  /* Show backdrop only when at least one toast is visible */
  .toast-container:has(.toast.show)::before {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* --- Safe area insets for notched devices (iPhone X+) --- */
  .toast-container {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ============================================================
   3. SMALL PHONE ADJUSTMENTS (≤380px) — even more compact
   ============================================================ */
@media (max-width: 380px) {
  .toast-container .toast .toast-body {
    font-size: 14px !important;
    padding: 8px 14px 12px 18px !important;
  }

  .toast-container .toast .toast-header {
    font-size: 12px !important;
    padding: 10px 14px 6px 18px !important;
  }
}

/* ============================================================
   4. LANDSCAPE MOBILE — reposition to top-center to avoid
      the toast being cut off by the short viewport height
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .toast-container {
    bottom: auto !important;
    top: 8% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80vw !important;
    max-width: 500px !important;
  }
}

/* ============================================================
   5. ACCESSIBILITY — respect reduced motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .toast-container .toast {
    animation: none !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
  }

  .toast-container .toast::before {
    animation: none !important;
  }
}
/* ============================================================
   FAB — Floating Action Button (iOS-style, above bottom nav)
   ============================================================ */
.fab-container {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom) + 16px);
  right: 16px;
  z-index: 1000;
}

.fab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary, #caa400);
  color: #000;
  border: none;
  border-radius: 28px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.fab:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.fab svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Pulse animation for first-visit attention */
.fab--pulse {
  animation: fab-pulse 2s ease-in-out 3;
}

@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 4px 24px rgba(202, 164, 0, 0.6); }
}

@media (max-width: 768px) {
  .fab-container {
    bottom: calc(76px + env(safe-area-inset-bottom) + 20px);
    right: 12px;
  }
  .fab {
    padding: 8px 14px;
    font-size: 12px;
    gap: 6px;
    border-radius: 24px;
  }
  .fab svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   P0: Global tap & scroll polish
   ============================================================ */
body.nb * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}
body.nb {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}
@view-transition { navigation: auto; }

/* ============================================================
   P1: Layout consistency
   ============================================================ */
body.nb .container,
body.nb main[class*="customer"],
body.nb main.studio,
body.nb main.purchases,
body.nb main.account,
body.nb main.replays,
body.nb main.calendar,
body.nb main.help,
body.nb main.courseDashboard,
body.nb main.videoCourse,
body.nb main.videoCoursePlayer,
body.nb main.calendar-container,
body.nb main.lesson-container,
body.nb main.dashboard-shell,
body.nb main.container,
body.nb #customer-app,
body.nb .customer-page {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Desktop overrides — per-page wider containers + remove mobile bottom-nav padding */
@media (min-width: 1024px) {
  body.nb main.studio,
  body.nb main.replays,
  body.nb main.videoCourse,
  body.nb main.videoCoursePlayer,
  body.nb main.dashboard-shell {
    max-width: 1200px;
    padding-bottom: 32px;
  }
  body.nb main.purchases,
  body.nb main.account,
  body.nb main.help,
  body.nb main.calendar,
  body.nb main.courseDashboard,
  body.nb main.calendar-container,
  body.nb main.lesson-container,
  body.nb main.container,
  body.nb #customer-app,
  body.nb .customer-page {
    max-width: 760px;
    padding-bottom: 32px;
  }
}
body.nb .sticky-header,
body.nb .customer-header {
  padding-top: env(safe-area-inset-top);
}
body.nb input, body.nb select, body.nb textarea {
  font-size: 16px !important;
}

/* ============================================================
   P2: Active state scale + skeleton shimmer
   ============================================================ */
body.nb .card:active,
body.nb button:active:not(:disabled),
body.nb .slot-row:active {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card {
  background: linear-gradient(90deg, var(--nb-card-bg, #1a1a2e) 25%, var(--nb-card-bg-alt, #222240) 50%, var(--nb-card-bg, #1a1a2e) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--nb-radius, 12px);
  height: 80px;
  margin-bottom: 12px;
}

/* ============================================================
   P2: Staggered Fade-In (iOS-style card entry)
   ============================================================ */
@keyframes staggerFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-stagger {
  opacity: 0;
  animation: staggerFadeIn 0.35s ease-out forwards;
}
.card-stagger:nth-child(1) { animation-delay: 0.00s; }
.card-stagger:nth-child(2) { animation-delay: 0.06s; }
.card-stagger:nth-child(3) { animation-delay: 0.12s; }
.card-stagger:nth-child(4) { animation-delay: 0.18s; }
.card-stagger:nth-child(5) { animation-delay: 0.24s; }
.card-stagger:nth-child(6) { animation-delay: 0.30s; }
.card-stagger:nth-child(7) { animation-delay: 0.36s; }
.card-stagger:nth-child(8) { animation-delay: 0.42s; }

/* ============================================================
   P2: Active Press Scale (all card types)
   ============================================================ */
.card:active,
.nb-card:active,
.course-card:active,
.purchase-card:active,
.replay-card:active,
.booking-card:active {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}

/* ============================================================
   P2: No Text Selection on Interactive Surfaces
   ============================================================ */
.customer-page,
.customer-main,
.nb-bottom-nav,
.fab-container,
.card,
.nb-card,
button,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   P2: Toast Mobile Glass Style (centered, slide-up, SF blur)
   ============================================================ */
.toast-container {
  position: fixed !important;
  bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: calc(100vw - 32px) !important;
  width: auto !important;
  z-index: 9999 !important;
}
.toast-container .toast {
  background: rgba(28, 28, 30, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px !important;
  padding: 12px 20px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-container .toast-warning {
  border-left: 3px solid #FF9F0A !important;
}
.toast-container .toast-error {
  border-left: 3px solid #FF453A !important;
}
.toast-container .toast-success {
  border-left: 3px solid #30D158 !important;
}

/* ============================================================
   P2: Hide Old FAB When New (.fab-container) Present
   ============================================================ */
body:has(.fab-container) #fabRezervare:not(.fab-container #fabRezervare),
body:has(.fab-container) .nb-fab:not(.fab-container .nb-fab) {
  display: none !important;
}


/* ── P1 Hide top nav on mobile ── */
@media (max-width: 768px) {
  .site-header,
  .app-header,
  nav.site-header,
  header.app-header,
  .luxury-premium-nav {
    display: none !important;
  }
}


/* ============================================================
   P2: BOTTOM-SHEET MODALS (iOS-style slide-up)
   ============================================================ */

/* Backdrop */
.nb-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99990;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nb-sheet-backdrop.nb-active {
  opacity: 1;
  pointer-events: auto;
}

/* Sheet container */
.nb-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99991;
  background: #0a0a0a;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.nb-sheet.nb-active {
  transform: translateY(0);
}

/* Drag handle */
.nb-sheet-handle {
  width: 36px;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  margin: 12px auto 8px;
  flex-shrink: 0;
}

/* Sheet content scrollable */
.nb-sheet-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 20px;
  flex: 1;
}

/* Sheet header */
.nb-sheet-header {
  padding: 8px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.nb-sheet-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f5f5f5;
  letter-spacing: -0.3px;
}

/* Sheet actions row */
.nb-sheet-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.nb-sheet-actions button {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}
.nb-sheet-actions button:active {
  transform: scale(0.96);
}
.nb-sheet-actions .nb-btn-primary {
  background: linear-gradient(135deg, #c8a84e, #a88b3a);
  color: #050505;
}
.nb-sheet-actions .nb-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #f5f5f5;
}

/* Light theme */
html.theme-light .nb-sheet {
  background: #ffffff;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
}
html.theme-light .nb-sheet-header {
  border-color: rgba(0,0,0,0.08);
}
html.theme-light .nb-sheet-header h3 {
  color: #1a1a1a;
}
html.theme-light .nb-sheet-actions {
  border-color: rgba(0,0,0,0.08);
}
html.theme-light .nb-sheet-actions .nb-btn-secondary {
  background: rgba(0,0,0,0.06);
  color: #1a1a1a;
}
html.theme-light .nb-sheet-handle {
  background: rgba(0,0,0,0.2);
}

/* ============================================================
   P2: STATUS BADGES (iOS SF-style, no Bootstrap)
   ============================================================ */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
}
.nb-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Green — confirmed/active */
.nb-badge-success {
  background: rgba(48, 209, 88, 0.12);
  color: #30D158;
}
.nb-badge-success::before { background: #30D158; }

/* Orange — pending/waiting */
.nb-badge-warning {
  background: rgba(255, 159, 10, 0.12);
  color: #FF9F0A;
}
.nb-badge-warning::before { background: #FF9F0A; }

/* Red — cancelled/error */
.nb-badge-danger {
  background: rgba(255, 69, 58, 0.12);
  color: #FF453A;
}
.nb-badge-danger::before { background: #FF453A; }

/* Blue — info/upcoming */
.nb-badge-info {
  background: rgba(10, 132, 255, 0.12);
  color: #0A84FF;
}
.nb-badge-info::before { background: #0A84FF; }

/* Gray — default */
.nb-badge-default {
  background: rgba(255,255,255,0.08);
  color: #8E8E93;
}
.nb-badge-default::before { background: #8E8E93; }

/* Light theme variants */
html.theme-light .nb-badge-success {
  background: rgba(48, 209, 88, 0.15);
  color: #248A3D;
}
html.theme-light .nb-badge-warning {
  background: rgba(255, 159, 10, 0.15);
  color: #9A5C00;
}
html.theme-light .nb-badge-danger {
  background: rgba(255, 69, 58, 0.15);
  color: #C41C11;
}
html.theme-light .nb-badge-info {
  background: rgba(10, 132, 255, 0.15);
  color: #0055D4;
}
html.theme-light .nb-badge-default {
  background: rgba(0,0,0,0.06);
  color: #636366;
}

/* ============================================================
   P2: SKELETON LOADERS (shimmer effect)
   ============================================================ */
@keyframes nb-skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.nb-skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 800px 100%;
  animation: nb-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.nb-skeleton-text   { height: 16px; width: 80%; margin-bottom: 8px; }
.nb-skeleton-title  { height: 24px; width: 60%; margin-bottom: 12px; }
.nb-skeleton-card   { height: 120px; width: 100%; border-radius: 12px; }
.nb-skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }
.nb-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

html.theme-light .nb-skeleton {
  background: linear-gradient(90deg, #e5e5e5 25%, #f0f0f0 50%, #e5e5e5 75%);
  background-size: 800px 100%;
}

/* ============================================================
   P3: CELEBRATING TOAST ANIMATION
   ============================================================ */
@keyframes nb-toast-celebrate {
  0%   { transform: translateX(-50%) translateY(16px) scale(0.9); opacity: 0; }
  50%  { transform: translateX(-50%) translateY(-4px) scale(1.03); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.nb-toast.nb-toast-celebrate {
  animation: nb-toast-celebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   P3: HAPTIC-READY VISUAL FEEDBACK (fallback when vibrate unavailable)
   ============================================================ */
@keyframes nb-haptic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.97); }
}
.nb-haptic-visual {
  animation: nb-haptic-pulse 0.15s ease-in-out 2;
}

/* Button press feedback */
.nb-btn-press:active,
.nb-btn-press.nb-active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* Card press feedback */
.nb-card-press:active,
.nb-card-press.nb-active {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}

/* ============================================================
   P3: SMOOTH PAGE TRANSITIONS (cross-fade)
   ============================================================ */
@keyframes nb-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nb-page-transition {
  animation: nb-page-enter 0.35s ease-out;
}

/* ============================================================
   P3: RIPPLE EFFECT (material-style, subtle)
   ============================================================ */
.nb-ripple {
  position: relative;
  overflow: hidden;
}
.nb-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s, transform 0.5s;
  pointer-events: none;
}
.nb-ripple:active::after {
  opacity: 1;
  transform: scale(1);
  transition: 0s;
}

/* ============================================================
   P2/P3 — BOTTOM-SHEET MODALS + HAPTIC + SKELETON + BADGES
   ============================================================ */

/* ── Bottom-sheet overlay ── */
.nb-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nb-bottom-sheet-overlay.active { opacity: 1; }

/* ── Bottom-sheet container ── */
.nb-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--nb-surface-1, #1c1c1e);
  border-radius: 24px 24px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}
.nb-bottom-sheet.active { transform: translateY(0); }

/* ── Drag handle ── */
.nb-bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--nb-text-tertiary, #6b6b6b);
  border-radius: 2px;
  margin: 8px auto 12px;
  opacity: 0.6;
}

/* ── Title ── */
.nb-bottom-sheet__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--nb-text-primary, #f5f5f7);
  text-align: center;
  padding: 0 20px 12px;
  flex-shrink: 0;
}

/* ── Body (scrollable) ── */
.nb-bottom-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 16px;
  -webkit-overflow-scrolling: touch;
  color: var(--nb-text-secondary, #a1a1a6);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Actions ── */
.nb-bottom-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  border-top: 1px solid var(--nb-border, rgba(255,255,255,0.08));
}

.nb-bottom-sheet__btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, opacity 0.2s;
  text-align: center;
}

.nb-bottom-sheet__btn:active { transform: scale(0.97); }

.nb-bottom-sheet__btn--primary {
  background: linear-gradient(135deg, #34C759 0%, #30B350 100%);
  color: #fff;
}

.nb-bottom-sheet__btn--secondary {
  background: var(--nb-surface-2, #2c2c2e);
  color: var(--nb-text-secondary, #a1a1a6);
}

/* ── Booking-specific styles ── */
.nb-bottom-sheet__booking-summary {
  text-align: center;
  padding: 8px 0 16px;
}

.nb-bottom-sheet__booking-date {
  font-size: 13px;
  color: var(--nb-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.nb-bottom-sheet__booking-time {
  font-size: 32px;
  font-weight: 700;
  color: var(--nb-text-primary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.nb-bottom-sheet__booking-trainer {
  font-size: 15px;
  color: var(--nb-text-secondary);
}

/* ── Skeleton loaders ── */
.nb-skeleton {
  background: linear-gradient(90deg, var(--nb-surface-2, #2c2c2e) 25%, var(--nb-surface-3, #3a3a3c) 50%, var(--nb-surface-2, #2c2c2e) 75%);
  background-size: 200% 100%;
  animation: nbSkeletonShimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes nbSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.nb-skeleton--card { height: 80px; border-radius: 12px; margin-bottom: 12px; }
.nb-skeleton--text { height: 16px; border-radius: 4px; margin-bottom: 8px; }
.nb-skeleton--title { height: 24px; border-radius: 6px; margin-bottom: 12px; width: 60%; }
.nb-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.nb-skeleton--list { height: 56px; border-radius: 10px; margin-bottom: 8px; }

/* ── Status badges (iOS SF style) ── */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.nb-badge-success {
  background: linear-gradient(135deg, #34C759 0%, #30B350 100%);
  color: #fff;
}

.nb-badge-warning {
  background: linear-gradient(135deg, #FF9500 0%, #F5A623 100%);
  color: #fff;
}

.nb-badge-danger {
  background: linear-gradient(135deg, #FF3B30 0%, #E6352B 100%);
  color: #fff;
}

.nb-badge-info {
  background: linear-gradient(135deg, #5AC8FA 0%, #4FB9F0 100%);
  color: #fff;
}

/* ── Celebration toast ── */
.nb-toast--celebration {
  animation: nbToastCelebration 0.5s ease !important;
}

@keyframes nbToastCelebration {
  0% { transform: translateX(-50%) translateY(20px) scale(0.9); opacity: 0; }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* ── Visual haptic feedback (fallback) ── */
.nb-haptic-visual {
  animation: nbHapticPulse 0.3s ease;
}

@keyframes nbHapticPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ── Page transitions ── */
.nb-page-transition {
  animation: nbPageFadeIn 0.3s ease;
}

@keyframes nbPageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Ripple effect ── */
.nb-ripple {
  position: relative;
  overflow: hidden;
}

.nb-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s, transform 0.5s;
  pointer-events: none;
}

.nb-ripple:active::after {
  opacity: 1;
  transform: scale(1);
  transition: 0s;
}