/*
 * Urbanstart V5 presentation layer for SSA 1.6.12.13.
 *
 * This file intentionally styles existing SSA controls only. It does not hide
 * availability, validation messages or confirmation actions.
 */

@font-face {
  font-family: "Urbanstart Orbitron";
  src: url("../fonts/Orbitron-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "Urbanstart Rajdhani";
  src: url("../fonts/Rajdhani-400-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Urbanstart Rajdhani";
  src: url("../fonts/Rajdhani-500-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Urbanstart Rajdhani";
  src: url("../fonts/Rajdhani-600-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --us-ssa-ink: #0a0a0a;
  --us-ssa-ink-soft: #24242a;
  --us-ssa-paper: #f2f5f7;
  --us-ssa-surface: #ffffff;
  --us-ssa-muted: #62626c;
  --us-ssa-line: rgba(11, 11, 14, 0.16);
  --us-ssa-cyan: #29d5e2;
  --us-ssa-cyan-hover: #6ce4ec;
  --us-ssa-yellow: #fdf500;
  --us-ssa-purple: #973ca8;
  --us-ssa-focus: #7e2d90;
  --us-ssa-radius-sm: 10px;
  --us-ssa-radius-md: 14px;
  --us-ssa-shadow: 0 16px 40px rgba(11, 11, 14, 0.1);
  --mdc-theme-primary: var(--us-ssa-cyan);
  --mdc-theme-on-primary: var(--us-ssa-ink);
  --mdc-theme-secondary: var(--us-ssa-purple);
  --mdc-theme-on-secondary: #ffffff;
  --mdc-ripple-color: var(--us-ssa-cyan);
  --mdc-typography-font-family: "Urbanstart Rajdhani", "Segoe UI", Arial, sans-serif;
  --mdc-typography-headline6-font-family: "Urbanstart Orbitron", "Arial Black", Arial, sans-serif;
}

html,
html body,
html body.md-theme-default {
  color: var(--us-ssa-ink);
  background: var(--us-ssa-paper) !important;
  font-family: "Urbanstart Rajdhani", "Segoe UI", Arial, sans-serif !important;
}

html body.md-theme-default {
  padding: clamp(12px, 2.6vw, 24px) !important;
}

#ssa-booking-app,
#ssa-booking-app main,
#ssa-booking-app .app-wrapper {
  min-width: 0;
  background: transparent;
}

#ssa-booking-app :is(h1, h2, h3, .md-title, .md-headline, .md-subheading) {
  color: var(--us-ssa-ink);
}

#ssa-booking-app :is(h1, .md-title, .md-headline, .ssa-type-header, .mdc-button__label) {
  font-family: "Urbanstart Orbitron", "Arial Black", Arial, sans-serif;
  letter-spacing: 0.01em;
}

#ssa-booking-app .ssa-type-header {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
}

#ssa-booking-app .date-select-headline,
#ssa-booking-app .time-select-headline,
#ssa-booking-app .focus-target {
  line-height: 1.2;
}

#ssa-booking-app :is(.md-card, .mdc-card) {
  border: 1px solid var(--us-ssa-line);
  border-radius: var(--us-ssa-radius-md);
  background: var(--us-ssa-surface);
  box-shadow: var(--us-ssa-shadow);
}

/* Madrid is the only booking timezone. Keep dates/times, remove the raw token. */
#ssa-booking-app .appointment-timezone {
  display: none !important;
}

/* Calendar */
#ssa-booking-app .book-day button.md-whiteframe {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--us-ssa-line);
  border-radius: var(--us-ssa-radius-sm);
  background: var(--us-ssa-surface);
  box-shadow: none;
}

#ssa-booking-app .book-day button.md-whiteframe.selectable {
  color: var(--us-ssa-ink);
}

#ssa-booking-app .book-day button.md-whiteframe.selectable:hover,
#ssa-booking-app .book-day button.md-whiteframe.selectable:focus-visible,
#ssa-booking-app .book-day button.md-whiteframe.selected {
  border-color: var(--us-ssa-cyan);
  background: var(--us-ssa-cyan) !important;
  color: var(--us-ssa-ink) !important;
  box-shadow: 0 0 0 3px rgba(41, 213, 226, 0.2);
}

#ssa-booking-app .book-day button.md-whiteframe.disabled {
  border-color: transparent;
  background: rgba(11, 11, 14, 0.04);
  color: #898992;
}

/* Time slots and all actionable controls meet the 44 CSS-pixel target. */
#ssa-booking-app :is(button, [role="button"], .mdc-button) {
  min-height: 44px;
}

#ssa-booking-app .time-listing {
  display: grid;
  gap: 8px;
}

#ssa-booking-app .time-listing li {
  padding: 0;
}

#ssa-booking-app .time-listing li .mdc-button {
  min-width: 100%;
  min-height: 44px;
  border: 1px solid var(--us-ssa-line);
  border-radius: var(--us-ssa-radius-sm);
  background: var(--us-ssa-surface);
  color: var(--us-ssa-ink);
  font-weight: 700;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#ssa-booking-app .time-listing li .mdc-button:hover,
#ssa-booking-app .time-listing li .mdc-button:focus-visible {
  border-color: var(--us-ssa-cyan);
  background: rgba(41, 213, 226, 0.12);
  box-shadow: 0 0 0 3px rgba(41, 213, 226, 0.18);
}

/* Buttons */
#ssa-booking-app .mdc-button {
  min-height: 44px;
  border-radius: 12px;
  padding-inline: 18px;
  font-weight: 700;
}

#ssa-booking-app .mdc-button--raised,
#ssa-booking-app .md-button.md-raised {
  border: 1px solid var(--us-ssa-cyan);
  background: var(--us-ssa-cyan) !important;
  color: var(--us-ssa-ink) !important;
  box-shadow: 0 10px 24px rgba(41, 213, 226, 0.2);
}

#ssa-booking-app .mdc-button--raised:hover,
#ssa-booking-app .mdc-button--raised:focus-visible,
#ssa-booking-app .md-button.md-raised:hover,
#ssa-booking-app .md-button.md-raised:focus-visible {
  background: var(--us-ssa-cyan-hover) !important;
}

#ssa-booking-app .mdc-button--outlined {
  border-color: var(--us-ssa-line);
  color: var(--us-ssa-ink);
  background: var(--us-ssa-surface);
}

/* Fields */
#ssa-booking-app .customer-information-container {
  gap: 14px;
}

#ssa-booking-app :is(.mdc-text-field, .textfield-container) {
  min-height: 56px;
  border-radius: var(--us-ssa-radius-sm);
  background: var(--us-ssa-surface);
}

#ssa-booking-app :is(input, textarea, select) {
  min-height: 44px;
  color: var(--us-ssa-ink);
  font-family: "Urbanstart Rajdhani", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
}

#ssa-booking-app :is(input, textarea, select, button, [role="button"]):focus-visible {
  outline: 3px solid var(--us-ssa-focus);
  outline-offset: 2px;
}

#ssa-booking-app .foxy-phone-container button[id^="ssa-tel-input-anchor-"] {
  width: 48px;
  min-width: 48px;
  min-height: 44px;
}

#ssa-booking-app .foxy-phone-container .vti__input {
  min-height: 44px;
}

#ssa-booking-app .vue-tel-input-dropdown {
  border: 1px solid var(--us-ssa-line);
  border-radius: var(--us-ssa-radius-sm);
  background: var(--us-ssa-surface);
  box-shadow: var(--us-ssa-shadow);
}

#ssa-booking-app .ssa_vti__country {
  min-height: 44px;
}

/* Keep anti-spam semantics without exposing its English instruction. */
#ssa-booking-app [data-urbanstart-ssa-honeypot] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html body.md-theme-default {
    padding: 12px !important;
  }

  #ssa-booking-app .md-layout .time-selection-col.md-layout {
    min-width: 50%;
  }

  #ssa-booking-app .mdc-button {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ssa-booking-app *,
  #ssa-booking-app *::before,
  #ssa-booking-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}