/*
 * Hideo Override for Easy!Appointments
 * Maps Hideo-Hugo design tokens onto E!A selectors.
 *
 * Design tokens from Hideo theme (default.css + _variables.scss):
 *   --color-bg: #ECE7E1        (warm cream background)
 *   --color-text: #15151C      (near-black text)
 *   --color-border: #D4CFC8   (warm gray borders)
 *   --color-muted: #75736E     (muted gray text)
 *   --color-accent: #C8A97E    (warm gold accent)
 *   --color-white: #FFFFFF
 *
 * Font pairing:
 *   Headings: Instrument Serif (serif)
 *   Body: Open Sauce Two (sans-serif)
 *
 * Mounted into E!A container at /var/www/html/assets/css/hideo-override.css
 * and included via patched header template.
 */

/* ==========================================================================
   FONT DECLARATIONS
   Loaded from mxmarin.ca production site
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('https://mxmarin.ca/fonts/instrument-serif/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('https://mxmarin.ca/fonts/instrument-serif/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce Two';
  src: url('https://mxmarin.ca/fonts/open-sauce-two/open-sauce-two-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce Two';
  src: url('https://mxmarin.ca/fonts/open-sauce-two/open-sauce-two-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce Two';
  src: url('https://mxmarin.ca/fonts/open-sauce-two/open-sauce-two-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce Two';
  src: url('https://mxmarin.ca/fonts/open-sauce-two/open-sauce-two-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce Two';
  src: url('https://mxmarin.ca/fonts/open-sauce-two/open-sauce-two-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Hideo design tokens)
   ========================================================================== */

:root {
  --hideo-bg: #ECE7E1;
  --hideo-text: #15151C;
  --hideo-border: #D4CFC8;
  --hideo-muted: #75736E;
  --hideo-accent: #C8A97E;
  --hideo-white: #FFFFFF;
  --hideo-font-heading: "Instrument Serif", ui-serif, Georgia, serif;
  --hideo-font-body: "Open Sauce Two", ui-sans-serif, system-ui, sans-serif;
  --hideo-radius-pill: 99px;
  --hideo-radius-small: 4px;
  --hideo-radius-medium: 12px;
  --hideo-transition: 150ms ease;
}

/* ==========================================================================
   GLOBAL RESETS
   ========================================================================== */

body {
  background-color: var(--hideo-bg) !important;
  color: var(--hideo-text) !important;
  font-family: var(--hideo-font-body) !important;
  font-weight: 500 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--hideo-text) !important;
  color: var(--hideo-bg) !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hideo-font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

#header,
.header-frame,
.navbar {
  background-color: var(--hideo-bg) !important;
  border-bottom: 1px solid var(--hideo-border) !important;
}

#header .navbar-brand,
.header-frame .brand {
  font-family: var(--hideo-font-heading) !important;
  color: var(--hideo-text) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
.btn-primary,
.btn-default,
button[type="submit"],
.btn-success {
  font-family: var(--hideo-font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--hideo-radius-pill) !important;
  padding: 12px 32px !important;
  transition: all var(--hideo-transition) !important;
  border: 1px solid var(--hideo-text) !important;
  background-color: var(--hideo-text) !important;
  color: var(--hideo-bg) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-default:hover,
button[type="submit"]:hover {
  background-color: transparent !important;
  color: var(--hideo-text) !important;
  border-color: var(--hideo-text) !important;
}

/* Accent / confirmation buttons */
.btn-success,
.btn-accent,
#book-appointment-wizard .command-buttons .btn-success {
  background-color: var(--hideo-accent) !important;
  color: var(--hideo-text) !important;
  border-color: var(--hideo-accent) !important;
}

.btn-success:hover,
.btn-accent:hover {
  background-color: var(--hideo-text) !important;
  color: var(--hideo-bg) !important;
  border-color: var(--hideo-text) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input,
select,
textarea,
.form-control {
  font-family: var(--hideo-font-body) !important;
  border: 1px solid var(--hideo-border) !important;
  background-color: var(--hideo-white) !important;
  color: var(--hideo-text) !important;
  border-radius: var(--hideo-radius-small) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--hideo-accent) !important;
  outline-color: var(--hideo-accent) !important;
  box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.2) !important;
}

::placeholder {
  color: var(--hideo-muted) !important;
}

/* ==========================================================================
   BOOKING WIZARD
   ========================================================================== */

#book-appointment-wizard {
  background-color: var(--hideo-white) !important;
  border-radius: var(--hideo-radius-medium) !important;
}

#book-appointment-wizard .wizard-frame .frame-title {
  color: var(--hideo-text) !important;
  font-family: var(--hideo-font-heading) !important;
}

#book-appointment-wizard .step-number {
  background-color: var(--hideo-accent) !important;
  color: var(--hideo-text) !important;
}

#book-appointment-wizard .active-step {
  background-color: var(--hideo-accent) !important;
}

#book-appointment-wizard .book-step {
  background-color: var(--hideo-muted) !important;
}

/* Calendar / date picker */
.ui-datepicker {
  font-family: var(--hideo-font-body) !important;
}

.ui-datepicker .ui-datepicker-header {
  background-color: var(--hideo-text) !important;
  color: var(--hideo-bg) !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
  background-color: var(--hideo-accent) !important;
  color: var(--hideo-text) !important;
  border-radius: 50% !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
  background-color: var(--hideo-border) !important;
}

/* Available time slots */
.available-hour,
.available-hour:hover {
  background-color: var(--hideo-white) !important;
  border: 1px solid var(--hideo-border) !important;
  color: var(--hideo-text) !important;
  border-radius: var(--hideo-radius-small) !important;
  transition: all var(--hideo-transition) !important;
}

.available-hour:hover,
.available-hour.selected {
  background-color: var(--hideo-accent) !important;
  color: var(--hideo-text) !important;
  border-color: var(--hideo-accent) !important;
}

/* Booking bar */
#book-appointment-wizard .book-hour {
  background-color: #f3f2e7 !important;
  border-color: #e4e1c9 !important;
}

/* ==========================================================================
   LAYOUT / STRUCTURE
   ========================================================================== */

#main,
.main-content {
  background-color: var(--hideo-bg) !important;
}

.footer {
  border-top: 1px solid var(--hideo-border) !important;
  background-color: var(--hideo-bg) !important;
  color: var(--hideo-muted) !important;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: inherit !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
  transition: opacity var(--hideo-transition) !important;
}

a:hover {
  opacity: 0.7 !important;
}

/* ==========================================================================
   MUTED / HELPER TEXT
   ========================================================================== */

.text-muted,
.help-block,
.help-text,
.small {
  color: var(--hideo-muted) !important;
}

/* ==========================================================================
   MODALS AND POPUPS
   ========================================================================== */

.modal-header {
  background-color: var(--hideo-text) !important;
  color: var(--hideo-bg) !important;
  border-bottom: none !important;
}

.modal-content {
  border-radius: var(--hideo-radius-medium) !important;
  border: 1px solid var(--hideo-border) !important;
}

/* ==========================================================================
   ADMIN SIDEBAR (backend)
   ========================================================================== */

#sidebar,
.sidebar {
  background-color: var(--hideo-text) !important;
}

#sidebar a,
.sidebar a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: background-color var(--hideo-transition) !important;
}

#sidebar a:hover,
#sidebar a.active,
.sidebar a:hover,
.sidebar a.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--hideo-white) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  #book-appointment-wizard {
    border-radius: 0 !important;
  }

  .btn,
  .btn-primary,
  .btn-default,
  button[type="submit"] {
    width: 100% !important;
    padding: 14px 24px !important;
  }
}