/* Ally Moving — official identity for the Book Now wizard (2026-10-18).
   Loaded LAST in <head> of every step (index, time, mancrew, form…form5), so it
   overrides each page's inline <style> without touching its markup or logic.
   Fonts are the site's self-hosted Kanit + Manrope (/assets/css/fonts.css).
   Colors: Rojo Ally #A5473B, Gris Ally #5D5D5D, Rosa Ally #F0C2BB, white. */
:root {
  --ally-rojo: #A5473B;
  --ally-rojo-50: #FEF4F3;
  --ally-rojo-100: #F9E4E1;
  --ally-rojo-600: #8D3D32;
  --ally-gris: #5D5D5D;
  --ally-rosa: #F0C2BB;
  --ally-neutro-200: #D7D7D7;
  --ally-neutro-800: #353535;

  /* the names the pages already use */
  --brand-red:    var(--ally-rojo);
  --brand-red-dk: var(--ally-rojo-600);
  --brand-gold:   var(--ally-rosa);
}

html, body {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
  color: var(--ally-neutro-800);
}
/* Background «rojo profesional» (hub FONDOS/allymoving_fondo_rojo-profesional.css):
   Rojo Ally with a soft radial gradient of the same tone + ONE official emblem in white at
   7 % cropped in the bottom-right corner. Fixed layers, so long pages do not stretch it.
   No repeated patterns. Same background as the other form app (family). */
html { background: #8D3D32; }
html body { background: transparent; }
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
body::before {
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 36%, #A5473B 0%, #A5473B 40%, #9A4337 72%, #8D3D32 100%);
}
body::after {
  right: -10vmax; bottom: -12vmax; width: min(70vmax, 1000px); aspect-ratio: 895 / 683;
  background: url(../images/ally-emblema-blanco.svg?v=1) no-repeat center / contain; opacity: .07;
}
@media (max-width: 767px) {
  body::after { width: 125vw; right: -38vw; bottom: -10vh; }
}

/* Inputs, buttons and the date picker used 'Inter' explicitly */
input, select, textarea, button, .gui-input, .gui-textarea, input.form, #end_date, .ui-datepicker {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
}
/* Headings: Kanit */
.header-title, .booking-badge, .date-badge, .addr-header, .ui-datepicker .ui-datepicker-title {
  font-family: 'Kanit', 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}
.form-logo img { height: 52px; width: auto; }   /* 52 px tall = 300 px wide (official minimum 260) */

/* Header of the card: step pill in Rosa Ally with dark text, sub-line readable on red */
.step-badge, .form-header .step-badge { background: var(--ally-rosa); color: var(--ally-neutro-800); }
.header-sub, .form-header .header-sub { opacity: .95; }

/* Placeholders and helper text: >= 4.5:1 on white */
::placeholder { color: var(--ally-gris); opacity: 1; }
.date-label { color: var(--ally-gris); }
.slot-section-label { color: var(--ally-rojo); }

/* Notice boxes were amber/yellow: brand light tone instead */
.notice-box, .notif-box, .service-area-box {
  background: var(--ally-rojo-50);
  border-color: var(--ally-rosa);
  color: var(--ally-neutro-800);
}
.section-question, .addr-header, .hiddenbox, label.option:hover:not(:has(input:checked)), .verify-label:has(input:checked) {
  background-color: var(--ally-rojo-50);
}

/* Buttons. The main "Continue / Check availability" (.btn-submit) stays SOLID
   Rojo Ally on purpose: it is the one conversion action of each step. The
   secondary ones follow the brand rule (outlined, never filled). */
.btn-refresh {
  background: transparent; color: var(--ally-gris);
  border: 1.5px solid var(--ally-gris);
}
.btn-refresh:hover { background: rgba(93, 93, 93, .08); color: var(--ally-neutro-800); }
.btn-back { border-color: var(--ally-gris); color: var(--ally-gris); }
.btn-back:hover { border-color: var(--ally-neutro-800); color: var(--ally-neutro-800); }

/* jQuery UI date picker */
.ui-datepicker td a:hover { background: var(--ally-rojo-100); color: var(--ally-rojo); border-color: var(--ally-rojo-100); }

/* Card edge: the card header is red on a red page, so lift the card a little */
.form-card { box-shadow: 0 12px 36px rgba(53, 53, 53, .30); }