/*
Theme Name: BazeX App Theme
Author: Zaiba Anikó
Version: 0.2
*/

:root {
  --bz-primary     : #537B63;
  --bz-primary-soft: #edf3ef;
  --bz-bg          : #f4f5fb;
  --bz-border      : #e5e7eb;
  --bz-text-main   : #111827;
  --bz-text-muted  : #6b7280;
  --bz-radius-lg   : 18px;
  --bz-radius-sm   : 10px;
}

/* RESET MINI */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin     : 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background : var(--bz-bg);
  color      : var(--bz-text-main);
}

/* HEADER */

.bz-app-header {
  background   : #ffffff;
  border-bottom: 1px solid var(--bz-border);
  position     : sticky;
  top          : 0;
  z-index      : 50;
}

.bz-header-inner {
  max-width      : 1200px;
  margin         : 0 auto;
  padding        : 10px 20px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.bz-header-left {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.bz-logo-wrap {
  width          : 32px;
  height         : 32px;
  border-radius  : 999px;
  background     : var(--bz-primary-soft);
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

.bz-logo-wrap img {
  width     : 24px;
  height    : 24px;
  object-fit: contain;
}

.bz-header-title {
  display       : flex;
  flex-direction: column;
}

.bz-header-app-name {
  font-weight: 600;
  font-size  : 0.95rem;
}

.bz-header-app-sub {
  font-size: 0.75rem;
  color    : var(--bz-text-muted);
}

.bz-header-right {
  display    : flex;
  align-items: center;
  gap        : 12px;
  font-size  : 0.85rem;
}

.bz-header-username {
  font-weight: 500;
}

.bz-header-logout {
  text-decoration: none;
  background     : var(--bz-primary);
  color          : #fff;
  border-radius  : 999px;
  width          : 26px;
  height         : 26px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 0.8rem;
}

.bz-header-logout:hover {
  background: #3f5f4c;
}

.bz-main {
  max-width: 1200px;
  margin   : 0 auto;
  padding  : 20px 16px 40px;
}

/* DASHBOARD */

#bazex-dashboard {
  display       : flex;
  flex-direction: column;
  gap           : 18px;
}

/* Tabs */

.bz-tab-content {
  display: none;
}

.bz-tab-content--active {
  display: block;
}


.bz-tabs {
  display: flex;
  gap    : 10px;
}

.bz-tab {
  border       : none;
  background   : transparent;
  padding      : 8px 14px;
  border-radius: 999px;
  font-size    : 0.85rem;
  cursor       : pointer;
  color        : var(--bz-text-muted);
}

.bz-tab--active {
  background : var(--bz-primary-soft);
  color      : var(--bz-primary);
  font-weight: 600;
}

/* Card */

.bz-card {
  background   : #ffffff;
  border-radius: var(--bz-radius-lg);
  padding      : 18px 20px 20px;
  margin       : 15px 0;
  box-shadow   : 0 16px 40px rgba(15, 23, 42, 0.06);
}

.bz-card--calendar {
  padding-bottom: 60px;
  /* hely az úszó gombnak */
}

.bz-card-header {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 16px;
  margin-bottom  : 12px;
}

.bz-card-title {
  margin     : 0;
  font-size  : 1.1rem;
  font-weight: 600;
}

.bz-card-subtitle {
  margin   : 4px 0 0;
  font-size: 0.85rem;
  color    : var(--bz-text-muted);
}

.bz-card-header-actions {
  display      : inline-flex;
  padding      : 4px;
  background   : #f3f4f6;
  border-radius: 999px;
}

.bz-card-header--compact {
  padding-bottom: 10px;
}

.bz-card--muted {
  background: #fbfbfb;
  border    : 1px solid var(--bz-border);
}

.bz-collapsible-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  cursor         : pointer;
}

.bz-chevron {
  font-size : 0.9rem;
  color     : var(--bz-text-muted);
  transition: transform .2s ease;
}

.bz-collapsible-head[aria-expanded="true"] .bz-chevron {
  transform: rotate(180deg);
}

.bz-toggle-btn {
  border       : none;
  background   : transparent;
  padding      : 4px 10px;
  font-size    : 0.8rem;
  border-radius: 999px;
  cursor       : pointer;
  color        : var(--bz-text-muted);
}

.bz-toggle-btn--active {
  background : #ffffff;
  color      : var(--bz-primary);
  font-weight: 600;
}

/* Felhasznalok TAB */

.bz-badge {
  display      : inline-block;
  margin-left  : 8px;
  padding      : 2px 8px;
  border-radius: 999px;
  font-size    : 12px;
  background   : #e8f1ea;
}

.bz-user-details td {
  padding: 0;
}

.bz-details-wrap {
  padding   : 10px 14px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

.bz-table--inner {
  width: 100%;
}


/* Toolbar */

.bz-card-toolbar {
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 12px;
  font-size      : 0.8rem;
  color          : var(--bz-text-muted);
}

/* Booking form */

#bz-booking-form {
  padding-bottom: 8px;
  border-bottom : 1px solid var(--bz-border);
  margin-bottom : 14px;
}

#bz-booking-form .bz-primary-btn {
  margin-top: 6px;
}

.bz-booking-form {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 12px;
  align-items  : flex-end;
  margin-bottom: 18px;
}

.bz-booking-form label {
  display       : flex;
  flex-direction: column;
  font-size     : 0.8rem;
  color         : var(--bz-text-muted);
}

.bz-booking-form input[type="date"],
.bz-booking-form input[type="time"] {
  margin-top   : 4px;
  padding      : 6px 8px;
  border-radius: var(--bz-radius-sm);
  border       : 1px solid var(--bz-border);
  min-width    : 130px;
  font-size    : 0.85rem;
}

.bz-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 10px 16px;
  border-radius  : 999px;
  font-size      : 0.9rem;
  font-weight    : 600;
  text-decoration: none;
  cursor         : pointer;
  transition     : all .2s ease;
  white-space    : nowrap;
  color          : var(--bz-primary);
}

.bz-primary-btn {
  border       : none;
  background   : var(--bz-primary);
  color        : #ffffff;
  font-size    : 0.85rem;
  font-weight  : 600;
  padding      : 8px 16px;
  border-radius: 999px;
  cursor       : pointer;
}

.bz-primary-btn:hover {
  background: #3f5f4c;
}

.bz-secondary-btn {
  border       : 1px solid var(--bz-border);
  background   : #fff;
  color        : var(--bz-text-main);
  font-size    : 0.85rem;
  font-weight  : 600;
  padding      : 8px 16px;
  border-radius: 999px;
  cursor       : pointer;
}

.bz-secondary-btn:hover {
  border-color: var(--bz-primary);
  color       : var(--bz-primary);
}

.bz-auth-footer {
  margin-top: 16px;
  text-align: center;
}


/* ===== Recurring UI ===== */

.bz-recurring {
  margin-top   : 12px;
  background   : #fafafa;
  border       : 1px dashed var(--bz-border);
  border-radius: 14px;
  overflow     : hidden;
  padding      : 25px;
}

.bz-recurring-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  background     : transparent;
  padding-bottom : 6px;
}

.bz-pill {
  font-size    : 0.75rem;
  color        : var(--bz-primary);
  background   : var(--bz-primary-soft);
  padding      : 4px 10px;
  border-radius: 999px;
  font-weight  : 600;
}

.bz-recurring-body {
  display    : none;
  padding    : 14px;
  padding-top: 10px;
}

/* .bz-recurring::before {
    content: "Advanced booking";
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
    margin-bottom: 6px;
  } */

.bz-recurring--open .bz-recurring-body {
  display: block;
}

.bz-rec-row {
  display       : flex;
  flex-wrap     : wrap;
  gap           : 12px;
  flex-direction: column;
  align-items   : flex-start;
  margin-bottom : 18px;
}

.bz-rec-row label {
  display       : flex;
  flex-direction: column;
  font-size     : 0.8rem;
  color         : var(--bz-text-muted);
}

.bz-rec-row input[type="date"],
.bz-rec-row input[type="time"] {
  margin-top   : 4px;
  padding      : 6px 8px;
  border-radius: var(--bz-radius-sm);
  border       : 1px solid var(--bz-border);
  min-width    : 130px;
  font-size    : 0.85rem;
}

.bz-rec-label {
  display      : block;
  font-size    : 0.8rem;
  color        : var(--bz-text-muted);
  margin-bottom: 6px;
}

.bz-rec-days {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
}

.bz-rec-days label {
  display      : inline-flex;
  gap          : 6px;
  align-items  : center;
  padding      : 6px 10px;
  border       : 1px solid var(--bz-border);
  border-radius: 999px;
  font-size    : 0.8rem;
  color        : var(--bz-text-main);
  background   : #fff;
  cursor       : pointer;
}

.bz-rec-days input[type="checkbox"] {
  accent-color: var(--bz-primary);
}

.bz-rec-time {
  display    : inline-flex;
  gap        : 10px;
  align-items: center;
}

.bz-hint {
  margin   : 8px 0 0;
  font-size: 0.78rem;
  color    : var(--bz-text-muted);
}

/* Switch */

.bz-switch {
  display    : inline-flex;
  align-items: center;
  gap        : 10px;
  cursor     : pointer;
  user-select: none;
}

.bz-switch input {
  position: absolute;
  opacity : 0;
  width   : 1px;
  height  : 1px;
}

.bz-switch-ui {
  width        : 44px;
  height       : 26px;
  border-radius: 999px;
  background   : #e5e7eb;
  position     : relative;
  transition   : background 0.2s ease;
}

.bz-switch-ui::after {
  content      : "";
  width        : 20px;
  height       : 20px;
  border-radius: 999px;
  background   : #fff;
  position     : absolute;
  top          : 3px;
  left         : 3px;
  box-shadow   : 0 6px 16px rgba(0, 0, 0, 0.12);
  transition   : transform 0.2s ease;
}

.bz-switch input:checked+.bz-switch-ui {
  background: var(--bz-primary);
}

.bz-switch input:checked+.bz-switch-ui::after {
  transform: translateX(18px);
}

.bz-switch-text {
  font-weight: 600;
  font-size  : 0.9rem;
  color      : var(--bz-text-main);
}

#bz-rec-submit {
  background: transparent;
  border    : 1px solid var(--bz-primary);
  color     : var(--bz-primary);
}

#bz-rec-submit:hover {
  background: var(--bz-primary-soft);
}

/* Mobil */
@media (max-width: 768px) {
  .bz-rec-row {
    grid-template-columns: 1fr;
  }
}


/* Calendar container */

.bz-calendar {
  margin-top : 28px;
  padding-top: 12px;
  border-top : 1px solid var(--bz-border);
}

/* FullCalendar finomhangolás */

.fc .fc-toolbar-title {
  font-size: 1rem;
}

a.fc-event,
a.fc-event:hover {
  cursor: pointer;
}

.fc .fc-button-primary {
  background: var(--bz-primary);
  border    : none;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
  background: #3f5f4c;
}

.fc .fc-day-today {
  background: #fefce8;
}

/* Táblák */

.bz-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 0.85rem;
  margin-top     : 8px;
}

.bz-table th,
.bz-table td {
  padding      : 8px 10px;
  border-bottom: 1px solid var(--bz-border);
}

.bz-table th {
  text-align : left;
  background : #f9fafb;
  font-weight: 500;
}

/* Gombok a táblákban */

.bz-approve-btn,
.bz-cancel-btn {
  border       : none;
  border-radius: 999px;
  padding      : 4px 10px;
  font-size    : 0.8rem;
  cursor       : pointer;
  color        : #ffffff;
}

.bz-approve-btn {
  background: #10b981;
}

.bz-approve-btn:hover {
  background: #059669;
}

.bz-cancel-btn {
  background: #ef4444;
}

.bz-cancel-btn:hover {
  background: #b91c1c;
}

/* Floating action button */

.bz-fab {
  position       : fixed;
  right          : 24px;
  bottom         : 24px;
  width          : 48px;
  height         : 48px;
  border-radius  : 999px;
  border         : none;
  background     : var(--bz-primary);
  color          : #ffffff;
  font-size      : 1.6rem;
  line-height    : 1;
  cursor         : pointer;
  box-shadow     : 0 18px 40px rgba(15, 23, 42, 0.25);
  display        : flex;
  align-items    : center;
  justify-content: center;
}

/* AUTH (login / reg) */

.bz-auth-layout {
  min-height     : calc(100vh - 70px);
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.bz-auth-card {
  background   : #ffffff;
  border-radius: 22px;
  padding      : 28px 26px 24px;
  max-width    : 380px;
  width        : 100%;
  box-shadow   : 0 20px 45px rgba(15, 23, 42, 0.09);
  text-align   : start;
}

.bz-auth-logo {
  width          : 54px;
  height         : 54px;
  border-radius  : 999px;
  background     : var(--bz-primary-soft);
  margin         : 0 auto 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

.bz-auth-logo img {
  width     : 36px;
  height    : 36px;
  object-fit: contain;
}

.bz-auth-title {
  margin     : 4px 0;
  font-size  : 1.1rem;
  font-weight: 600;
}

.bz-auth-subtitle {
  margin   : 0 0 16px;
  font-size: 0.85rem;
  color    : var(--bz-text-muted);
}

.bz-auth-form label {
  font-size: 0.8rem;
  color    : var(--bz-text-muted);
}

.bz-auth-form input[type="text"],
.bz-auth-form input[type="email"],
.bz-auth-form input[type="password"],
.bz-auth-form input[type="tel"] {
  width        : 100%;
  padding      : 7px 9px;
  border-radius: var(--bz-radius-sm);
  border       : 1px solid var(--bz-border);
  margin       : 4px 0 10px;
  font-size    : 0.85rem;
}

.bz-auth-form input[type="submit"] {
  width        : 100%;
  border       : none;
  background   : var(--bz-primary);
  color        : #ffffff;
  padding      : 8px 0;
  border-radius: 999px;
  font-size    : 0.9rem;
  font-weight  : 600;
  cursor       : pointer;
}

.bz-auth-form input[type="submit"]:hover {
  background: #3f5f4c;
}

.bz-auth-register {
  margin-top: 10px;
  font-size : 0.8rem;
  color     : var(--bz-text-muted);
}

.bz-auth-register a {
  color      : var(--bz-primary);
  font-weight: 500;
}

.bz-toast {
  position: fixed;
  right   : 24px;
  bottom  : 24px;
  z-index : 9999;

  width        : min(420px, calc(100vw - 48px));
  background   : #ffffff;
  border       : 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow   : 0 18px 60px rgba(0, 0, 0, .18);
  padding      : 14px 14px;

  display    : flex;
  gap        : 12px;
  align-items: flex-start;

  transform : translateY(16px);
  opacity   : 0;
  transition: transform .18s ease, opacity .18s ease;
}

.bz-toast.is-visible {
  transform: translateY(0);
  opacity  : 1;
}

.bz-toast__content {
  flex: 1;
}

.bz-toast__title {
  font-weight  : 700;
  font-size    : 14px;
  margin-bottom: 4px;
}

.bz-toast__msg {
  font-size  : 13px;
  opacity    : .85;
  line-height: 1.35;
}

.bz-toast__close {
  border     : none;
  background : transparent;
  font-size  : 18px;
  line-height: 1;
  padding    : 6px 8px;
  cursor     : pointer;
  opacity    : .6;
}

.bz-toast__close:hover {
  opacity: 1;
}

.bz-toast.is-success {
  border-left: 6px solid #537B63;
}

.bz-toast.is-error {
  border-left: 6px solid #c0392b;
}

.bz-toast.is-info {
  border-left: 6px solid #2c3e50;
}

.bz-primary-btn.is-loading,
#bz-rec-submit.is-loading {
  opacity: .75;
  cursor : wait;
}

/* CONFIRM */

.bz-confirm {
  position: fixed;
  inset   : 0;
  z-index : 10000;
}

.bz-confirm[hidden] {
  display: none;
}

.bz-confirm__backdrop {
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, .45);
}

.bz-confirm__dialog {
  position     : relative;
  background   : #fff;
  width        : min(420px, 90vw);
  margin       : 15vh auto;
  border-radius: 16px;
  padding      : 20px;
  box-shadow   : 0 30px 80px rgba(0, 0, 0, .35);
}

.bz-confirm__title {
  margin     : 0 0 8px;
  font-size  : 18px;
  font-weight: 700;
}

.bz-confirm__msg {
  font-size    : 14px;
  opacity      : .85;
  margin-bottom: 20px;
}

.bz-confirm__actions {
  display        : flex;
  justify-content: flex-end;
  gap            : 10px;
}

.bz-btn {
  padding      : 8px 14px;
  border-radius: 10px;
  border       : none;
  cursor       : pointer;
}

.bz-btn--ghost {
  background: #eee;
}

.bz-btn--danger {
  background: #c0392b;
  color     : #fff;
}

/* CALENDAR MODAL */
.bx-modal[hidden] {
  display: none;
}

.bx-modal {
  position: fixed;
  inset   : 0;
  z-index : 9999;
}

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

.bx-modal-card {
  position     : absolute;
  left         : 50%;
  top          : 50%;
  transform    : translate(-50%, -50%);
  width        : min(92vw, 420px);
  background   : #fff;
  border-radius: 14px;
  padding      : 14px 14px 16px;
  box-shadow   : 0 14px 45px rgba(0, 0, 0, .25);
}

.bx-modal-close {
  position  : absolute;
  top       : 6px;
  right     : 10px;
  border    : 0;
  background: transparent;
  font-size : 22px;
  cursor    : pointer;
}

@media (max-width: 480px) {
  .bx-modal-card {
    top      : auto;
    bottom   : 12px;
    transform: translateX(-50%);
    width    : calc(100vw - 24px);
  }
}

/* CALENDAR MODAL  END*/

/* CALENDAR BOOKING OVERLAY */
/* ===== Create booking modal – only ===== */
#bookingCreateOverlay .bx-create-modal {
  width        : min(560px, 92vw);
  background   : #fff;
  border-radius: 16px;
  box-shadow   : 0 24px 70px rgba(0, 0, 0, .28);
  overflow     : hidden;
}

#bookingCreateOverlay .bx-create-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 18px;
  border-bottom  : 1px solid rgba(0, 0, 0, .08);
}

#bookingCreateOverlay .bx-create-head strong {
  font-size  : 16px;
  font-weight: 700;
}

#bookingCreateOverlay .bx-create-x {
  width        : 36px;
  height       : 36px;
  border-radius: 10px;
  border       : 1px solid rgba(0, 0, 0, .10);
  background   : #fff;
  cursor       : pointer;
  font-size    : 18px;
  line-height  : 1;
}

#bookingCreateOverlay .bx-create-body {
  padding: 18px;
}

#bookingCreateOverlay .bx-row {
  margin-bottom: 12px;
}

#bookingCreateOverlay label {
  display      : block;
  font-size    : 12px;
  font-weight  : 600;
  color        : rgba(0, 0, 0, .65);
  margin-bottom: 6px;
}

#bookingCreateOverlay input[type="text"],
#bookingCreateOverlay input[type="time"] {
  width        : 100%;
  height       : 42px;
  border-radius: 12px;
  border       : 1px solid rgba(0, 0, 0, .14);
  padding      : 0 12px;
  background   : #fff;
  font-size    : 14px;
  outline      : none;
}

#bookingCreateOverlay input[type="text"]:focus,
#bookingCreateOverlay input[type="time"]:focus {
  border-color: rgba(16, 88, 62, .55);
  box-shadow  : 0 0 0 4px rgba(16, 88, 62, .12);
}

#bookingCreateOverlay input[readonly] {
  background: rgba(0, 0, 0, .03);
}

#bookingCreateOverlay .bx-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 12px;
}

/* nice primary button */
#bookingCreateOverlay .bx-btn {
  width        : 100%;
  height       : 44px;
  border-radius: 12px;
  border       : 0;
  font-weight  : 700;
  cursor       : pointer;
}

/* if you added .bx-primary */
#bookingCreateOverlay .bx-btn.bx-primary {
  background: #2f6b52;
  /* ugyanaz a zöld hangulat */
  color     : #fff;
}

/* hover/active */
#bookingCreateOverlay .bx-btn.bx-primary:hover {
  filter: brightness(.96);
}

#bookingCreateOverlay .bx-btn.bx-primary:active {
  transform: translateY(1px);
}

/* error */
#bookingCreateOverlay .bx-error {
  margin-top   : 10px;
  padding      : 10px 12px;
  border-radius: 12px;
  background   : rgba(176, 0, 32, .08);
  color        : #b00020;
  font-size    : 13px;
}

/* FORCE create modal to be real popup overlay */
#bookingCreateOverlay.bx-create-overlay {
  position       : fixed !important;
  inset          : 0 !important;
  width          : 100vw !important;
  height         : 100vh !important;
  background     : rgba(0, 0, 0, .45) !important;
  display        : none;
  /* JS kapcsolja flex-re */
  align-items    : center !important;
  justify-content: center !important;
  z-index        : 999999 !important;
}

/* when opened */
#bookingCreateOverlay.bx-create-overlay.is-open {
  display: flex !important;
}

#bookingCreateOverlay .bx-create-modal {
  position: relative !important;
  z-index : 1000000 !important;
}

/* Create modal selects */
#bookingCreateOverlay .bx-select {
  width             : 100%;
  height            : 42px;
  border-radius     : 12px;
  border            : 1px solid rgba(0, 0, 0, .14);
  padding           : 0 12px;
  background        : #fff;
  font-size         : 14px;
  outline           : none;
  appearance        : none;
  -webkit-appearance: none;
  -moz-appearance   : none;
}

/* kis "nyíl" ikon érzés */
#bookingCreateOverlay .bx-select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, .55) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, .55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size  : 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right    : 34px;
}

#bookingCreateOverlay .bx-select:focus {
  border-color: rgba(16, 88, 62, .55);
  box-shadow  : 0 0 0 4px rgba(16, 88, 62, .12);
}

/* CALENDAR BOOKING OVERLAY  END*/

/* HAZIREND */
.bz-terms {
  margin: 16px 0;
}

.bz-terms details {
  padding      : 10px 12px;
  border       : 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
}

.bz-terms summary {
  cursor     : pointer;
  font-weight: 600;
}

.bz-terms__content {
  margin-top : 10px;
  line-height: 1.5;
}

.bz-terms__accept {
  display    : flex;
  gap        : 10px;
  align-items: flex-start;
  margin-top : 12px;
}

.bz-terms__accept input {
  margin-top: 3px;
}

.bz-modal { display:none; position:fixed; inset:0; z-index:9999; }
.bz-modal.is-open { display:block; }

.bz-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.65); }

.bz-modal__panel{
  position:relative;
  width:min(920px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  border-radius: 16px;
  overflow:hidden;
  background: #111; /* ha sötét a kártyád, maradhat */
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.bz-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bz-modal__title{ font-weight:700; }
.bz-modal__close{
  background: transparent; border:0; color: inherit;
  font-size: 26px; line-height: 1; cursor:pointer;
}

.bz-modal__body{
  padding: 16px;
  overflow:auto;
  max-height: calc(100vh - 220px);
  line-height: 1.55;
}

.bz-modal__body h3{ margin: 0 0 8px; }
.bz-modal__body h4{ margin: 14px 0 8px; }
.bz-modal__body ul{ margin: 0 0 10px 18px; }

.bz-modal__footer{
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; gap: 12px; align-items:center; justify-content:space-between;
  flex-wrap: wrap;
}

.bz-modal__accept{ display:flex; gap:10px; align-items:flex-start; }
.bz-modal__accept input{ margin-top: 3px; }

.bz-modal__actions{ display:flex; gap: 10px; }

/* LOGIN FORM ERROR */
.bz-login-error {
  background: #ffe5e5;
  color: #c10000;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
}


/* RESPONSIVE */

@media (max-width: 768px) {
  .bz-header-inner {
    padding-inline: 12px;
  }

  .bz-main {
    padding-inline: 12px;
  }

  .bz-booking-form {
    flex-direction: column;
    align-items   : stretch;
  }

  .bz-card-header {
    flex-direction: column;
    align-items   : flex-start;
  }

  .bz-fab {
    right : 16px;
    bottom: 16px;
  }

  .fc-toolbar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-direction : column;
    gap            : 8px;
  }


}

@media (max-width: 480px) {

  /* Az event link legyen grid */
  .fc .fc-daygrid-event {
    display              : grid;
    grid-template-columns: 10px auto;
    grid-template-areas  :
      "dot time"
      "title title";
    align-items: center;
    column-gap : 4px;
    row-gap    : 2px;

    /* FullCalendar sokszor white-space: nowrap-ot erőltet */
    white-space: normal !important;
    overflow   : hidden;
  }

  .fc .fc-daygrid-event-dot {
    grid-area   : dot;
    margin      : 0;
    /* FC néha ad marginokat */
    justify-self: center;
  }

  .fc .fc-event-time {
    grid-area  : time;
    font-size  : 11px;
    line-height: 1;
    margin     : 0;
  }

  .fc .fc-event-title {
    grid-area  : title;
    font-size  : 11px;
    line-height: 1.1;
    margin     : 0;

    /* egy sor, ellipsissel */
    white-space  : nowrap !important;
    overflow     : hidden;
    text-overflow: ellipsis;
    min-width    : 0;
    /* fontos grid/flex overflowhoz */
  }

  /* Ha FC ráteszi a min-width-et, ez segít */
  .fc .fc-daygrid-event .fc-event-title-container {
    min-width: 0;
  }

  .fc .fc-daygrid-event-harness {
    width: 100%;
  }

  .fc .fc-daygrid-event {
    width: 100%;
  }
}