/* oopticshop v2: formularul de programare (Easy Appointments). Doar prezentare peste marcajul pluginului.
   Specificitate "html body .ea-bootstrap": Bootstrap-ul pluginului se incarca in subsol. */
html body .ea-bootstrap { max-width:none !important; font-family:var(--type-family-body), system-ui, sans-serif; color:var(--text-on-light);
  font-size:var(--type-size-corp); }
html body .ea-bootstrap .form-horizontal { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-6); }
html body .ea-bootstrap .col-md-6 { width:auto; float:none; padding:0 !important; }
@media (max-width:767px) { html body .ea-bootstrap .form-horizontal { grid-template-columns:1fr; gap:var(--space-5); } }

/* randuri: eticheta deasupra campului, nu alaturi (Bootstrap pune 4/8 coloane) */
html body .ea-bootstrap .form-group { display:grid; gap:var(--space-1); margin:0 0 var(--space-4); }
html body .ea-bootstrap .form-group > [class*="col-sm-"] { width:auto; float:none; padding:0; text-align:left; }
html body .ea-bootstrap .control-label, html body .ea-bootstrap .ea-label { font-size:var(--type-size-interfata); font-weight:var(--type-weight-semibold);
  color:var(--text-on-light); text-align:left; padding:0; }
html body .ea-bootstrap .form-control { box-sizing:border-box; width:100%; height:auto; min-height:var(--space-7); padding:var(--space-2) var(--space-3);
  font:inherit; color:var(--text-on-light); background:var(--surface-placheta); border:var(--line-hair) solid var(--text-on-light);
  border-radius:var(--radius-m); box-shadow:none; }
html body .ea-bootstrap .form-control:hover { border-color:var(--text-on-light); background:var(--background-light); }
html body .ea-bootstrap .form-control:focus, html body .ea-bootstrap .form-control:focus-visible {
  outline:var(--line-rule) solid var(--text-on-light); outline-offset:var(--line-rule); box-shadow:none; }
html body .ea-bootstrap select.form-control:disabled { color:var(--text-secondary-on-light); background:var(--background-light); }
html body .ea-bootstrap textarea.form-control { min-height:calc(var(--space-9) + var(--space-5)); }
html body .ea-bootstrap .ea-service-description { color:var(--text-secondary-on-light); font-size:var(--type-size-interfata); }
html body .ea-bootstrap .ea-phone-field-group { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:var(--space-2); }
html body .ea-bootstrap .ea-phone-field-group br { display:none; }

/* calendarul (jQuery UI): zile de 44 px pe telefon; starile se deosebesc si fara culoare */
html body .ea-bootstrap .ui-datepicker { width:100%; box-sizing:border-box; padding:var(--space-3); background:var(--surface-placheta);
  border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m); font-family:inherit; }
html body .ea-bootstrap .ui-datepicker-header { display:flex; align-items:center; justify-content:space-between; background:transparent; border:0;
  padding:0 0 var(--space-2); }
html body .ea-bootstrap .ui-datepicker-title { order:2; font-family:var(--type-family-display), "Arial Narrow", sans-serif; font-size:var(--type-size-h3);
  font-weight:800; text-transform:uppercase; line-height:1.1; color:var(--text-on-light); }
html body .ea-bootstrap .ui-datepicker-prev, html body .ea-bootstrap .ui-datepicker-next { position:static; order:1; display:inline-flex;
  align-items:center; justify-content:center; width:calc(var(--space-7) - var(--space-1)); height:calc(var(--space-7) - var(--space-1));
  border:var(--line-hair) solid var(--text-on-light); border-radius:var(--radius-m); cursor:pointer; background:var(--surface-placheta); }
html body .ea-bootstrap .ui-datepicker-next { order:3; }
html body .ea-bootstrap .ui-datepicker-prev.ui-state-disabled { opacity:0.35; cursor:default; }
html body .ea-bootstrap .ui-datepicker-prev .ui-icon, html body .ea-bootstrap .ui-datepicker-next .ui-icon { display:none; }
html body .ea-bootstrap .ui-datepicker-prev::before, html body .ea-bootstrap .ui-datepicker-next::before { content:""; width:var(--space-5); height:var(--space-5);
  background:currentColor; -webkit-mask:var(--oo-ico-left) center / contain no-repeat; mask:var(--oo-ico-left) center / contain no-repeat; }
html body .ea-bootstrap .ui-datepicker-next::before { -webkit-mask-image:var(--oo-ico-right); mask-image:var(--oo-ico-right); }
html body .ea-bootstrap .ui-datepicker-calendar { width:100%; border-collapse:separate; border-spacing:var(--space-1); }
html body .ea-bootstrap .ui-datepicker-calendar th { font-size:var(--type-size-legenda); font-weight:var(--type-weight-semibold);
  color:var(--text-secondary-on-light); text-transform:uppercase; padding:var(--space-1) 0; }
html body .ea-bootstrap .ui-datepicker-calendar td { padding:0; }
html body .ea-bootstrap .ui-datepicker-calendar td a, html body .ea-bootstrap .ui-datepicker-calendar td span {
  display:flex; align-items:center; justify-content:center; min-height:calc(var(--space-7) - var(--space-1)); padding:0;
  border:var(--line-hair) solid transparent; border-radius:var(--radius-m); background:transparent; font-variant-numeric:tabular-nums;
  font-weight:var(--type-weight-regular); color:var(--text-on-light); text-decoration:none; }
/* zi cu intervale libere: cadru plin, textul ingrosat */
html body .ea-bootstrap .ui-datepicker-calendar td.free a { border-color:var(--text-on-light); font-weight:var(--type-weight-bold); background:var(--surface-placheta); }
html body .ea-bootstrap .ui-datepicker-calendar td.free a:hover { background:var(--background-light); }
/* zi fara intervale sau inchisa: cifra taiata si estompata, fara cadru */
html body .ea-bootstrap .ui-datepicker-calendar td.no-slots a, html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-unselectable span {
  color:var(--text-secondary-on-light); text-decoration:line-through; background:transparent; border-color:transparent; }
/* fara estompare: grafitul pe alb are 5,9:1, taietura deosebeste ziua fara sa scada contrastul (axe) */
/* ziua aleasa: plin espresso */
html body .ea-bootstrap .ui-datepicker-calendar td a.ui-state-active, html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-current-day.free a {
  background:var(--text-on-light); color:var(--text-on-dark); border-color:var(--text-on-light); }
/* azi: contur, oricare ar fi starea */
html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-today a, html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-today span {
  outline:var(--line-rule) solid var(--text-on-light); outline-offset:calc(var(--line-hair) * -3); }
html body .ea-bootstrap .ui-datepicker-other-month span { visibility:hidden; }

/* intervalele orare: butoane; ocupate taiate */
html body .ea-bootstrap .time { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
html body .ea-bootstrap .time-value { display:inline-flex; align-items:center; justify-content:center; min-width:calc(var(--space-9) - var(--space-3));
  min-height:calc(var(--space-7) - var(--space-1)); padding:0 var(--space-3); border:var(--line-hair) solid var(--text-on-light);
  border-radius:var(--radius-m); background:var(--surface-placheta); color:var(--text-on-light); font-variant-numeric:tabular-nums;
  font-weight:var(--type-weight-semibold); cursor:pointer; }
html body .ea-bootstrap .time-value:hover { background:var(--background-light); }
html body .ea-bootstrap .time-value.selected-time, html body .ea-bootstrap .time-value.active { background:var(--text-on-light); color:var(--text-on-dark); }
html body .ea-bootstrap .time-value.time-disabled { text-decoration:line-through; color:var(--text-secondary-on-light); cursor:default; }
html body .ea-bootstrap .time-message { width:100%; margin:0; padding:var(--space-3); border:var(--line-hair) solid var(--border-default);
  border-radius:var(--radius-m); background:var(--background-light); font-weight:var(--type-weight-semibold); }

/* datele personale si rezumatul */
html body .ea-bootstrap .step.final h3 { font-family:var(--type-family-display), "Arial Narrow", sans-serif; font-size:var(--type-size-h3);
  font-weight:800; text-transform:uppercase; line-height:1.1; margin:0 0 var(--space-1); color:var(--text-on-light); }
html body .ea-bootstrap .step.final small, html body .ea-bootstrap .text-muted { display:block; color:var(--text-secondary-on-light);
  font-size:var(--type-size-interfata); margin-bottom:var(--space-4); }
html body .ea-bootstrap .step .block { display:none; }
html body .ea-bootstrap .ea-actions-group { display:flex; flex-wrap:wrap; gap:var(--space-3); padding:0; }
html body .ea-bootstrap .ea-btn { min-height:calc(var(--space-7) + var(--space-1)); padding:0 var(--space-5); border-radius:var(--radius-m);
  font:inherit; font-weight:var(--type-weight-bold); box-shadow:none; text-shadow:none; cursor:pointer; }
html body .ea-bootstrap .ea-submit, html body .ea-bootstrap .ea-button-book-again { background:var(--text-on-light); border:var(--line-rule) solid var(--text-on-light);
  color:var(--text-on-dark); }
html body .ea-bootstrap .ea-submit:hover { background:var(--surface-panou-inchis); }
html body .ea-bootstrap .ea-submit:disabled { opacity:0.55; cursor:default; }
html body .ea-bootstrap .ea-cancel { background:var(--surface-placheta); border:var(--line-rule) solid var(--text-on-light); color:var(--text-on-light); }
html body .ea-bootstrap .ea-cancel:hover { background:var(--background-light); }
html body .ea-bootstrap .ea-btn:focus-visible { outline:var(--line-rule) solid var(--text-on-light); outline-offset:var(--line-rule); }
html body .ea-bootstrap .ea-btn:active { transform:translateY(var(--line-hair)); }

/* erorile: structurale (bordura de 2 px, "Eroare:" ingrosat, semn de avertizare), fara rosu */
html body .ea-bootstrap .form-control.error { border-width:var(--line-rule); border-color:var(--text-on-light); background:var(--surface-placheta); }
html body .ea-bootstrap label.error { display:block; margin-top:var(--space-1); color:var(--text-on-light); font-size:var(--type-size-interfata);
  font-weight:var(--type-weight-semibold); }
/* [iconita de avertizare] Eroare: mesajul — textul "Eroare:" in ::before, iconita desenata in ::after, asezata la inceputul randului */
html body .ea-bootstrap label.error { position:relative; padding-left:calc(1em + var(--space-1)); }
html body .ea-bootstrap label.error::before { content:"Eroare: "; font-weight:var(--type-weight-bold); }
html body .ea-bootstrap label.error::after { content:""; position:absolute; left:0; top:0.2em; width:1em; height:1em; background:currentColor;
  -webkit-mask:var(--oo-ico-warn) center / contain no-repeat; mask:var(--oo-ico-warn) center / contain no-repeat; }

/* confirmarea */
html body .ea-bootstrap .ea-confirmation-card { background:var(--surface-placheta); border:var(--line-rule) solid var(--text-on-light);
  border-radius:var(--radius-m); padding:var(--space-5); }
html body .ea-bootstrap .ea-confirmation-title { font-family:var(--type-family-display), "Arial Narrow", sans-serif; font-size:var(--type-size-h3);
  font-weight:800; text-transform:uppercase; line-height:1.1; }
html body .ea-bootstrap .ea-status-note { color:var(--text-secondary-on-light); }

/* culorile pluginului in toate starile (Bootstrap + jQuery UI): doar paleta. Gasite cu check_booking.py (culori in afara paletei). */
html body .ea-bootstrap .ui-datepicker-prev, html body .ea-bootstrap .ui-datepicker-next { color:var(--text-on-light); }
html body .ea-bootstrap .ui-datepicker-prev.ui-state-disabled { color:var(--text-secondary-on-light); }
html body .ea-bootstrap .ui-datepicker-calendar { border:0; }
/* fundalul starilor (azi, zi aleasa, weekend) sta pe celula TD, nu pe link: celula ramane transparenta */
html body .ea-bootstrap .ui-datepicker-calendar td, html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-today,
html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-current-day { background:transparent !important; border:0 !important; }
html body .ea-bootstrap .time.well { background:var(--background-light); border:var(--line-hair) solid var(--border-default);
  border-radius:var(--radius-m); box-shadow:none; padding:var(--space-3); }
html body .ea-bootstrap .form-control:focus { border-color:var(--text-on-light); }
html body .ea-bootstrap .time-value:focus, html body .ea-bootstrap .time-value:focus-visible { outline:var(--line-rule) solid var(--text-on-light);
  outline-offset:var(--line-rule); border-color:var(--text-on-light); color:var(--text-on-light); }
html body .ea-bootstrap .time-value.selected-time, html body .ea-bootstrap .time-value.selected, html body .ea-bootstrap .time-value.time-selected,
html body .ea-bootstrap .time-value.active { background:var(--text-on-light) !important; color:var(--text-on-dark) !important; border-color:var(--text-on-light) !important; }
/* butoanele in focus/apasat/activ: tot espresso (Bootstrap le face albastre) */
html body .ea-bootstrap .ea-submit:focus, html body .ea-bootstrap .ea-submit:active, html body .ea-bootstrap .ea-submit:active:focus,
html body .ea-bootstrap .ea-submit.active, html body .ea-bootstrap .ea-submit:hover:focus { background:var(--surface-panou-inchis); border-color:var(--text-on-light);
  color:var(--text-on-dark); box-shadow:none; }
html body .ea-bootstrap .ea-cancel:focus, html body .ea-bootstrap .ea-cancel:active, html body .ea-bootstrap .ea-cancel:active:focus {
  background:var(--background-light); border-color:var(--text-on-light); color:var(--text-on-light); box-shadow:none; }
html body .ea-bootstrap .ea-btn:focus, html body .ea-bootstrap .ea-btn:focus-visible { outline-color:var(--text-on-light); }
html body .ea-bootstrap .ui-datepicker-calendar th { border:0 !important; }
html body .ea-bootstrap .ui-datepicker-calendar td.ui-datepicker-other-month { color:var(--text-secondary-on-light) !important; }
html body .ea-bootstrap .ui-datepicker .ui-state-disabled { color:var(--text-secondary-on-light) !important; }
/* intervalele stau intr-o celula a tabelului calendarului: regula zilelor (td a, cadru transparent) le-ar sterge cadrul */
html body .ea-bootstrap .ui-datepicker-calendar td a.time-value { border:var(--line-hair) solid var(--text-on-light); background:var(--surface-placheta);
  font-weight:var(--type-weight-semibold); padding:0 var(--space-3); }
html body .ea-bootstrap .ui-datepicker-calendar td a.time-value:hover { background:var(--background-light); }
html body .ea-bootstrap .ui-datepicker-calendar td a.time-value.time-disabled { border-color:var(--border-default); }
/* stralucirea albastra a pluginului in jurul calendarului */
html body .ea-bootstrap .ui-datepicker { box-shadow:none; }
/* Bootstrap: .form-horizontal .form-group are margini negative (-15 px) pentru grila lui; aici nu exista grila */
html body .ea-bootstrap .form-horizontal .form-group { margin-left:0; margin-right:0; }
/* butoanele la inceputul randului (Bootstrap le decala cu col-sm-offset) */
html body .ea-bootstrap [class*="col-sm-offset"] { margin-left:0; }
html body .ea-bootstrap .ea-actions-group { justify-content:flex-start !important; }  /* pluginul centreaza cu !important */
/* rezumatul programarii pe placa (os, filet), ca un bon */
html body .ea-bootstrap .step.final table { width:100%; background:var(--background-light); border:var(--line-hair) solid var(--border-default);
  border-radius:var(--radius-m); border-collapse:separate; border-spacing:0; margin:var(--space-2) 0 var(--space-4); }
html body .ea-bootstrap .step.final table td, html body .ea-bootstrap .step.final table th { padding:var(--space-2) var(--space-3);
  border-bottom:var(--line-hair) solid var(--border-default); }
html body .ea-bootstrap .step.final table tr:last-child td { border-bottom:0; }
/* din CSS-ul clientei (post 463): calendarul dezactivat dupa trimitere sta deasupra (suprapunerea pluginului) */
html body .ea-bootstrap .disabled { position:relative; z-index:10; }