/* Friseur Eyüp Güzel – shared look (mirrors /var/www/html/styles.css) */
html:root,
html[data-bs-theme],
:root[data-bs-theme="light"] {
  --eyup-bg: #f8f8f6;
  --eyup-surface: #ffffff;
  --eyup-text: #101010;
  --eyup-muted: #575757;
  --eyup-accent: #0f0f0f;
  --eyup-line: #dadada;
  --eyup-display: 'Playfair Display', 'Times New Roman', serif;
  --eyup-body: 'Manrope', 'Segoe UI', sans-serif;

  --bs-primary: #0f0f0f;
  --bs-primary-rgb: 15, 15, 15;
  --bs-primary-bg-subtle: #ededeb;
  --bs-primary-bg-subtle-rgb: 237, 237, 235;
  --bs-primary-border-subtle: #dadada;
  --bs-primary-text-emphasis: #0f0f0f;
  --bs-link-color: #0f0f0f;
  --bs-link-color-rgb: 15, 15, 15;
  --bs-link-hover-color: #575757;
  --bs-link-hover-color-rgb: 87, 87, 87;
  --bs-body-bg: #ffffff;
  --bs-body-color: #101010;
  --bs-body-font-family: var(--eyup-body);
  --bs-border-color: #dadada;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 16px;
  --bs-focus-ring-color: rgba(15, 15, 15, 0.15);
  --ea-primary-hover: #333333;
  --ea-primary-active: #000000;
  --ea-primary-dark: #000000;
  --ea-primary-darker: #000000;
  --ea-primary-subtle: #ededeb;
}

html body {
  font-family: var(--eyup-body);
  color: var(--eyup-text);
  background: radial-gradient(circle at 20% 0%, #ffffff 0%, #f4f4f2 34%, #ecece8 100%) fixed;
  min-height: 100vh;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--eyup-display);
  line-height: 1.1;
}

/* Site header / footer (same as index.html) */
.eyup-container { width: min(1100px, 92vw); margin: 0 auto; }
.eyup-header {
  position: sticky; top: 0; z-index: 1030;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, white 85%, transparent);
  border-bottom: 1px solid var(--eyup-line);
}
.eyup-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem 0; }
.eyup-brand img { width: min(300px, 62vw); max-height: 68px; object-fit: contain; }
.eyup-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: .78rem 1.1rem;
  background: var(--eyup-accent); color: #fff !important;
  font-weight: 700; font-size: .95rem; text-decoration: none;
}
.eyup-footer { border-top: 1px solid var(--eyup-line); padding: 1rem 0 2rem; margin-top: 1.5rem; }
.eyup-footer-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--eyup-muted); font-size: .9rem; }
.eyup-footer-row p { margin: 0; }

/* Cards / frames */
#book-appointment-wizard,
#message-frame,
.card,
.modal-content,
.popover {
  background: var(--eyup-surface) !important;
  border: 1px solid var(--eyup-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .04) !important;
}
.card, .modal-content { border-radius: 16px !important; }

/* Booking header → light hero card style */
#book-appointment-wizard #header {
  background: linear-gradient(120deg, #ffffff 0%, #f3f3f1 45%, #ededeb 100%) !important;
  border-bottom: 1px solid var(--eyup-line);
}
#book-appointment-wizard #header #company-name,
#book-appointment-wizard #header .text-white { color: var(--eyup-text) !important; font-family: var(--eyup-display); font-weight: 600 !important; }
#book-appointment-wizard #header .text-white-50 { color: var(--eyup-muted) !important; font-family: var(--eyup-body); }
#book-appointment-wizard #company-logo { max-height: 56px; }
#book-appointment-wizard .book-step.active-step { background: var(--eyup-accent) !important; border-radius: 999px !important; }
#book-appointment-wizard .book-step.active-step strong { color: #fff !important; }
#book-appointment-wizard .book-step:not(.active-step) { background: #e7e7e4 !important; border-radius: 999px !important; }
#book-appointment-wizard .book-step:not(.active-step) strong { color: var(--eyup-muted) !important; }
#book-appointment-wizard .frame-title,
#book-appointment-wizard .wizard-frame h3 { font-family: var(--eyup-display); }

/* Buttons: pills */
.btn { border-radius: 999px !important; font-weight: 700; }
.btn-primary,
.btn-success {
  --bs-btn-bg: #0f0f0f; --bs-btn-border-color: #0f0f0f; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #333; --bs-btn-hover-border-color: #333; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #0f0f0f; --bs-btn-disabled-border-color: #0f0f0f;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-secondary {
  --bs-btn-color: #101010; --bs-btn-bg: transparent; --bs-btn-border-color: #dadada;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f0f0f; --bs-btn-hover-border-color: #0f0f0f;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
}
#book-appointment-wizard #available-hours .selected-hour {
  background-color: #0f0f0f !important; border-color: #0f0f0f !important; color: #fff !important;
}

/* Inputs */
.form-control, .form-select, .select2-container--default .select2-selection--single {
  border-radius: 12px !important; border-color: var(--eyup-line); background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--eyup-accent) !important; box-shadow: 0 0 0 .2rem rgba(15, 15, 15, .12) !important;
}
.form-check-input:checked { background-color: var(--eyup-accent); border-color: var(--eyup-accent); }

/* Calendar (flatpickr) */
.flatpickr-calendar { border-radius: 16px; box-shadow: none; border: 1px solid var(--eyup-line); font-family: var(--eyup-body); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: #0f0f0f !important; border-color: #0f0f0f !important; color: #fff !important;
}
.flatpickr-day.today { border-color: #0f0f0f; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { background: transparent !important; color: var(--eyup-text) !important; }
.flatpickr-current-month, .flatpickr-current-month .flatpickr-monthDropdown-months { font-family: var(--eyup-display); }

/* Backend navbar */
#header.navbar, nav#header {
  background: color-mix(in srgb, white 85%, transparent) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--eyup-line);
}
#header .navbar-brand h6, #header .nav-link, #header .text-white { color: var(--eyup-text) !important; }
#header .text-white-50 { color: var(--eyup-muted) !important; }
#header .nav-item.active .nav-link,
#header .nav-link:hover { background: var(--eyup-accent) !important; color: #fff !important; border-radius: 999px; }
#header .navbar-toggler { filter: invert(1); }
#footer, footer { color: var(--eyup-muted); }

/* Tables / list groups / tabs / badges */
.table > :not(caption) > * > * { border-color: var(--eyup-line); }
.list-group-item { border-color: var(--eyup-line); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--eyup-accent); color: #fff; border-color: var(--eyup-accent); }
.nav-pills .nav-link { border-radius: 999px; }
.bg-primary { background-color: var(--eyup-accent) !important; }
.text-primary { color: var(--eyup-accent) !important; }
.border-primary { border-color: var(--eyup-accent) !important; }
.rounded { border-radius: 12px !important; }

/* Calendar events in backend (fullcalendar) */
.fc .fc-button-primary { background: #0f0f0f; border-color: #0f0f0f; border-radius: 999px; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: #000; }

/* Beat any Bootswatch theme font choice */
html body, html body .btn, html body .form-control, html body .form-select, html body input, html body select, html body textarea, html body .nav-link, html body .modal-content, html body table {
  font-family: var(--eyup-body) !important;
}
html body h1, html body h2, html body h3, html body .h1, html body .h2, html body .h3 { font-family: var(--eyup-display) !important; }

#book-appointment-wizard #company-logo { display: none !important; }
#book-appointment-wizard .wizard-frame h2, #book-appointment-wizard .frame-title { color: var(--eyup-text) !important; }
img[alt="Easy!Appointments"] { display: none !important; }
.input-group > .input-group-text { border-radius: 12px 0 0 12px !important; background: #fff; border-color: var(--eyup-line); }
.input-group > .form-control:not(:first-child) { border-radius: 0 12px 12px 0 !important; }

/* default theme paints buttons with a green gradient */
html body .btn-primary, html body .btn-success, html body .btn-primary:disabled, html body .btn-primary.disabled {
  background: #0f0f0f !important; background-image: none !important;
  border-color: #0f0f0f !important; color: #fff !important; box-shadow: none !important;
  padding: .78rem 1.1rem; font-size: .95rem;
}
html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-primary:active,
html body .btn-success:hover, html body .btn-success:active {
  background: #333 !important; background-image: none !important; border-color: #333 !important;
}
html body .btn-primary:disabled, html body .btn-primary.disabled { opacity: .5; }