/* =============================================================================
   SunMed — Temă vizuală pentru pagina de programări online (schedule.php)
   -----------------------------------------------------------------------------
   Aliniază aspectul aplicației de programări (intern.sunmedical.ro/SYNCRo) la
   identitatea vizuală a site-ului principal sunmed.ro (tema Astra +
   sunmed-custom.css): portocaliu #E8621A, navy #1B3A5C, fonturi Inter /
   Playfair Display, carduri și câmpuri cu colțuri rotunjite.

   MOD DE INCLUDERE
   ----------------
   schedule.php rulează într-un <iframe> servit de pe alt domeniu, deci stilurile
   site-ului părinte nu pătrund în iframe. Acest fișier trebuie încărcat ÎN
   schedule.php. Adaugă, în <head>-ul din schedule.php, IMEDIAT DUPĂ blocul
   <style>...</style> existent (ca să câștige prin ordinea surselor):

       <link rel="stylesheet" href="schedule-sunmed.css">

   Plasează acest fișier în același folder cu schedule.php
   (SYNCRo/schedules/online/). Căile către pictograme (../../images/...) sunt
   relative la acest CSS și corespund folderului SYNCRo/images/, identic cu
   stilul inline existent.

   Folosește !important acolo unde trebuie să învingă stiluri inline din markup
   sau tema jQuery UI — aceeași abordare ca în sunmed-custom.css de pe site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --sm-orange:        #E8621A;   /* portocaliu brand (acțiune principală) */
  --sm-orange-dark:   #d05516;   /* hover */
  --sm-orange-deep:   #b84d0e;   /* active / text pe surface deschis */
  --sm-orange-soft:   #FEF0E8;   /* surface portocaliu deschis */
  --sm-orange-border: #f5d8c8;   /* border pe surface deschis */
  --sm-navy:          #1B3A5C;   /* secundar brand */
  --sm-navy-dark:     #142c46;
  --sm-ink:           #111111;   /* text titluri */
  --sm-text:          #444444;   /* text curent */
  --sm-muted:         #777777;   /* text secundar */
  --sm-faint:         #999999;   /* text terțiar / placeholdere */
  --sm-line:          #ede9e4;   /* linii / borduri carduri */
  --sm-field-border:  #e8e2db;   /* bordură câmpuri */
  --sm-bg:            #fafaf8;   /* fundal pagină / câmpuri */
  --sm-card:          #ffffff;
  --sm-green:         #16a34a;   /* succes / valid */
  --sm-error:         #c0341a;   /* eroare */
  --sm-error-bg:      #fdece7;
  --sm-radius:        8px;
  --sm-radius-lg:     14px;
  --sm-shadow:        0 8px 24px rgba(0,0,0,.07);
  --sm-font:          'Inter', Arial, Helvetica, sans-serif;
  --sm-font-display:  'Playfair Display', Georgia, serif;
}

/* ── PAGINĂ ────────────────────────────────────────────────────────────── */
body {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 28px 24px 56px !important;
  background: var(--sm-card) !important;
  color: var(--sm-text) !important;
  font-family: var(--sm-font) !important;
  font-size: 15px !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sm-orange); text-decoration: none; }
a:hover { color: var(--sm-orange-dark); text-decoration: underline; }

/* ── TITLURI ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--sm-ink) !important;
  font-family: var(--sm-font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.3px;
}
h1 { font-size: 34px !important; line-height: 1.15; }
h2 { font-size: 22px !important; line-height: 1.3; }

/* h3 = antet de secțiune (Categorii / Servicii / Servicii selectate).
   Markup-ul forțează border-bottom inline #fc7011 -> recolorăm la brand. */
h3 {
  font-family: var(--sm-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--sm-ink) !important;
  padding-bottom: 8px !important;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--sm-orange) !important;
  text-transform: uppercase !important;
}

/* Bannerul informativ (h2 cu border inline #fc7011 și pictogramă info) */
h2[style*="border-bottom"] {
  color: var(--sm-navy) !important;
  font-family: var(--sm-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  border-bottom: 2px solid var(--sm-orange) !important;
  background-color: var(--sm-orange-soft) !important;
  border-radius: var(--sm-radius) var(--sm-radius) 0 0;
}

/* Textul de consimțământ GDPR (ecranul inițial, div cu stil inline) */
body > div > div[style*="justify"] {
  color: var(--sm-muted) !important;
  font-family: var(--sm-font) !important;
  line-height: 1.7 !important;
  background: var(--sm-bg);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius-lg);
  margin: 24px auto !important;
  padding: 28px !important;
}
body > div > div[style*="justify"] a { color: var(--sm-orange) !important; font-weight: 600; }

/* Titlul „Programari disponibile online” */
h1[style*="center"] { color: var(--sm-ink) !important; margin: 28px 0 !important; }

/* ── BUTOANE ──────────────────────────────────────────────────────────────
   Resetăm gradientul roșu vechi. Butoanele „forward”/„confirm” = portocaliu
   (acțiune principală); „back” = navy (acțiune secundară). Pictogramele PNG
   sunt păstrate prin strat de background peste culoarea plată.            */
.button {
  display: block;
  box-sizing: border-box;
  text-align: center;
  margin: 14px 0;
  padding: 13px 24px;
  border: none !important;
  border-radius: var(--sm-radius) !important;
  background: var(--sm-orange) !important;
  text-shadow: none !important;
  font-family: var(--sm-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(232,98,26,.25);
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.button:hover, .button:focus {
  background: var(--sm-orange-dark) !important;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(232,98,26,.30);
}
.button:active { background: var(--sm-orange-deep) !important; transform: translateY(1px); }

/* Buton cu pictogramă: lăsăm spațiu la stânga pentru icon */
.button-confirm, .button-forward, .button-back { padding-left: 50px !important; }

/* CONFIRM (portocaliu) */
.button-confirm,
.button-confirm:hover, .button-confirm:focus,
.button-confirm:active {
  background: url(../../images/confirm_32.png) no-repeat 14px center, var(--sm-orange) !important;
}
.button-confirm:hover, .button-confirm:focus {
  background: url(../../images/confirm_32.png) no-repeat 14px center, var(--sm-orange-dark) !important;
}
.button-confirm:active {
  background: url(../../images/confirm_32.png) no-repeat 14px center, var(--sm-orange-deep) !important;
}

/* FORWARD (portocaliu) */
.button-forward {
  background: url(../../images/forward_32.png) no-repeat 14px center, var(--sm-orange) !important;
}
.button-forward:hover, .button-forward:focus {
  background: url(../../images/forward_32.png) no-repeat 14px center, var(--sm-orange-dark) !important;
}
.button-forward:active {
  background: url(../../images/forward_32.png) no-repeat 14px center, var(--sm-orange-deep) !important;
}

/* BACK (navy — acțiune secundară) */
.button-back {
  background: url(../../images/back_32.png) no-repeat 14px center, var(--sm-navy) !important;
  box-shadow: 0 2px 6px rgba(27,58,92,.22);
}
.button-back:hover, .button-back:focus {
  background: url(../../images/back_32.png) no-repeat 14px center, var(--sm-navy-dark) !important;
  box-shadow: 0 6px 18px rgba(27,58,92,.28);
}
.button-back:active {
  background: url(../../images/back_32.png) no-repeat 14px center, var(--sm-navy-dark) !important;
}

/* ── CÂMPURI FORMULAR (.field-container, floating-label) ───────────────────
   Păstrăm mecanica de floating-label existentă; reîmprospătăm vizual:
   bordură reală, colțuri rotunjite, fundal subtil, focus/valid pe brand.  */
.field-container input[type=text]:not(.field-initial):not(.minicolors-input),
.field-container input[type=password],
.field-container input[type=file],
.field-container textarea,
.field-container select {
  box-sizing: border-box;
  font-family: var(--sm-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--sm-ink) !important;
  background: var(--sm-bg) !important;
  border: 1.5px solid var(--sm-field-border) !important;
  border-radius: var(--sm-radius) !important;
  padding: 11px 14px !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field-container input[type=text]:not(.field-initial):not(.minicolors-input),
.field-container input[type=password],
.field-container input[type=file],
.field-container textarea {
  width: calc(100% - 12px) !important;
}
.field-container select { width: 100% !important; }

/* Focus pe brand (înlocuiește accentul roșu/verde implicit) */
.field-container input[type=text]:focus,
.field-container input[type=password]:focus,
.field-container input[type=file]:focus,
.field-container textarea:focus,
.field-container select:focus {
  outline: 0;
  border-color: var(--sm-orange) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(232,98,26,.12) !important;
}

/* Câmpuri readonly (data, preț, dată programare) */
.field-container input[type=text]:read-only:not(.field-initial),
.field-container input[type=password]:read-only {
  background-color: #f1eee9 !important;
  color: var(--sm-text) !important;
}

/* Linia animată a floating-label: din roșu -> brand; verde valid -> verde brand */
.field-container input[type=text] + label,
.field-container input[type=password] + label,
.field-container input[type=file] + label,
.field-container textarea + label,
.field-container select + label {
  border-top-color: var(--sm-orange) !important;
}
.field-container input[type=text]:valid + label,
.field-container input[type=password]:valid + label,
.field-container input[type=file]:valid + label,
.field-container textarea:valid + label,
.field-container select:valid + label {
  border-color: var(--sm-green) !important;
}

/* Eticheta plutitoare (span) */
.field-container input[type=text] + label > span,
.field-container input[type=password] + label > span,
.field-container input[type=file] + label > span,
.field-container textarea + label > span,
.field-container select + label > span {
  font-family: var(--sm-font) !important;
  color: var(--sm-faint) !important;
  font-weight: 600 !important;
}
.field-container input:focus + label > span,
.field-container textarea:focus + label > span,
.field-container select:focus + label > span { color: var(--sm-orange) !important; }
.field-container input:valid + label > span,
.field-container textarea:valid + label > span,
.field-container select:valid + label > span { color: var(--sm-green) !important; }

/* Câmpul de căutare rapidă (avea fundal palegreen / text roșu) */
.field-container input[name=search],
:not(.field-container) input[name=quickFilter] {
  background-color: var(--sm-orange-soft) !important;
  color: var(--sm-orange-deep) !important;
  font-weight: 600 !important;
}

/* Câmpul „Pret total” (avea text albastru inline) */
input[name=price] { color: var(--sm-navy) !important; font-weight: 700 !important; }

/* Stare de eroare la validare (din coral/roșu -> stil brand discret) */
.field-container input.ui-state-error,
.field-container textarea.ui-state-error,
.field-container select.ui-state-error,
input.ui-state-error, textarea.ui-state-error, select.ui-state-error {
  color: var(--sm-error) !important;
  background: var(--sm-error-bg) !important;
  border-color: var(--sm-error) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* ── LAYOUT COLOANE FORMULAR (.columns-3 / .columns-4) ─────────────────────
   Cele 3 câmpuri pe rând sunt inline-block cu lățime calibrată pe spațiul-alb
   dintre taguri (calc(33.33% - 0.16rem)). La font mai mare, spațiul-alb crește
   și al treilea câmp trece pe rândul următor -> îl anulăm cu font-size:0 pe
   containere (copiii au font-size explicit, deci nu sunt afectați).
   În plus, overflow-x:auto din online.css forțează (prin spec) și scrollbar
   vertical -> punem overflow:visible ca eticheta plutitoare să nu mai genereze
   bare de derulare.                                                        */
form[name="schedule"] > div:not([data-role]),
form[name="schedule"] [data-role="isRequiredBT"] {
  font-size: 0 !important;
}
.columns-3, .columns-4 {
  box-sizing: border-box !important;
  overflow: visible !important;
  vertical-align: top;
}

/* Eticheta plutitoare: font ușor mai mic ca textul lung să încapă în coloană
   (cu overflow:visible pe coloană, un nume foarte lung doar se extinde vizual,
   fără bară de derulare). */
.field-container .columns-3 input[type=text] + label > span,
.field-container .columns-3 input[type=password] + label > span,
.field-container .columns-3 select + label > span {
  font-size: 14px !important;
}

/* ── LAYOUT CATEGORII / SERVICII ──────────────────────────────────────────
   Păstrăm intactă poziționarea (inline-block / absolute) ca să nu stricăm
   logica JS; schimbăm doar borduri, culori, hover/active.                 */
[data-role=categories] {
  border-right: 1px solid var(--sm-line) !important;
}

/* Cardurile de categorie și de serviciu */
[data-role=categories] div,
[data-role=services] div[data-idService],
[data-role=selectedServices] div[data-idService] {
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  padding: 9px 11px !important;
  margin: 4px 2px !important;
  background: var(--sm-card);
  color: var(--sm-text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

/* Hover (înlocuiește wheat + box-shadow) */
[data-role=categories] div:not(.active):hover,
div[data-idService]:hover {
  background: var(--sm-orange-soft) !important;
  border-color: var(--sm-orange) !important;
  box-shadow: 0 4px 12px rgba(232,98,26,.14) !important;
  transform: translateY(-1px);
}

/* Categorie activă (înlocuiește gold) */
[data-role=categories] div.active {
  background: var(--sm-orange) !important;
  border-color: var(--sm-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232,98,26,.25);
}

/* Eticheta categoriei lângă serviciu (era darkgrey) */
[data-role=services] div[data-idService] span[data-role=category],
[data-role=selectedServices] div[data-idService] span[data-role=category] {
  color: var(--sm-faint) !important;
}

/* Prețul lângă serviciu (era blue) */
[data-role=services] div[data-idService] span[data-role=price],
[data-role=selectedServices] div[data-idService] span[data-role=price] {
  color: var(--sm-navy) !important;
  font-weight: 700 !important;
}

/* ── TABEL SERVICII SELECTATE / TOTALURI ──────────────────────────────── */
[data-role=selectedServices] { width: 100%; }
[data-role=selectedServices] caption h3 { text-align: left; }

[data-role=totalPrice] {
  color: var(--sm-error) !important;     /* preț întreg, tăiat */
  text-decoration: line-through;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  text-align: right;
}
[data-role=totalFinalPrice] {
  color: var(--sm-navy) !important;      /* preț final */
  font-weight: 700 !important;
  padding: 4px 12px !important;
  text-align: right;
}

/* ── jQuery UI DATEPICKER ─────────────────────────────────────────────────
   Rescriem tema implicită (smoothness) pe identitatea SunMed.            */
.ui-datepicker {
  width: auto;
  padding: 8px !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius-lg) !important;
  background: var(--sm-card) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16) !important;
  font-family: var(--sm-font) !important;
  font-size: 13px !important;
  z-index: 9999 !important;
}
.ui-datepicker .ui-datepicker-header {
  background: var(--sm-orange) !important;
  border: none !important;
  border-radius: var(--sm-radius) !important;
  padding: 6px 4px !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-title { color: #fff !important; font-weight: 600 !important; }
.ui-datepicker .ui-datepicker-title select {
  color: var(--sm-ink) !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-family: var(--sm-font) !important;
}

/* Săgeți prev/next: ascundem sprite-ul și desenăm chevron alb */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 7px !important;
  height: 22px;
  width: 22px;
  cursor: pointer;
  border-radius: 6px;
  background: rgba(255,255,255,.15) !important;
  border: none !important;
}
.ui-datepicker .ui-datepicker-prev { left: 6px !important; }
.ui-datepicker .ui-datepicker-next { right: 6px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: rgba(255,255,255,.30) !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: none !important; }
.ui-datepicker .ui-datepicker-prev:after,
.ui-datepicker .ui-datepicker-next:after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border: 2px solid #fff;
  border-width: 2px 2px 0 0;
}
.ui-datepicker .ui-datepicker-prev:after  { transform: translate(-30%,-50%) rotate(-135deg); }
.ui-datepicker .ui-datepicker-next:after  { transform: translate(-70%,-50%) rotate(45deg); }

.ui-datepicker table { font-size: 13px !important; margin: 6px 0 0 !important; }
.ui-datepicker th { color: var(--sm-faint) !important; font-weight: 600 !important; padding: 6px 4px !important; }
.ui-datepicker td { padding: 1px !important; }
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  padding: 7px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--sm-text) !important;
  background: transparent !important;
  font-weight: 500;
}
.ui-datepicker td a.ui-state-hover {
  background: var(--sm-orange-soft) !important;
  color: var(--sm-orange-deep) !important;
  border-color: transparent !important;
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td.ui-datepicker-current-day .ui-state-active {
  background: var(--sm-orange) !important;
  color: #fff !important;
  border-color: var(--sm-orange) !important;
}
.ui-datepicker td.ui-datepicker-today a {
  border-color: var(--sm-orange) !important;
  color: var(--sm-orange-deep) !important;
  background: var(--sm-orange-soft) !important;
}
.ui-datepicker td.ui-state-disabled span {
  color: #c9c4bc !important;
  opacity: 1;
}

/* ── DIVERSE / MOBIL ──────────────────────────────────────────────────── */
::placeholder { color: var(--sm-faint); }

@media (max-width: 720px) {
  body { padding: 18px 14px 40px !important; }
  h1 { font-size: 26px !important; }
  .button { font-size: 15px !important; }
}