/* ===========================
   Webcube Accessibility (wcd)
   =========================== */

/* A. Font OpenDyslexic (webfont) */
@font-face{
  font-family: "OpenDyslexic3";
  src: url("../fonts/OpenDyslexic3-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "OpenDyslexic3";
  src: url("../fonts/OpenDyslexic3-Bold.woff") format("woff");
  font-weight: 700; /* bold */
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "OpenDyslexic3";
  src: url("../fonts/OpenDyslexic3-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Toggle-ul pentru dislexie */
html.wcd-dyslexic{
  font-family: "OpenDyslexic3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  /* (opțional) evită bold/italic sintetice */
  font-synthesis: none;
}

/* B. Variabile pentru contrast */
:root{
  --wcd-bg: #fff;
  --wcd-fg: #111;
  --wcd-link: #0645ad;
  --wcd-border: #d9d9d9;
  --wcd-focus: #ff0;
}

/* ===== Floating wrapper (rămâne în colț) */
.wcd-floating-wrap{
  position: fixed;
  z-index: 9999;
  display: inline-block;
  line-height: 0;
}

/* ===== Buton – icon-only */
.wcd-fab{
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
}
.wcd-fab:focus-visible{
  outline: 2px solid #222;
  outline-offset: 2px;
}
.wcd-fab img{
  display:block;
  width:60px;   
  height:60px;
}

/* ===== Panoul – dropdown ancorat la buton */
.wcd-panel{
  position: absolute;
  display: none;
  min-width: 320px;
  max-width: min(90vw, 360px);
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  padding: 14px;
}
/* deschidere deasupra butonului */
.wcd-floating-wrap.wcd-right .wcd-panel{ right: 0; bottom: calc(100% + 10px); }
.wcd-floating-wrap.wcd-left  .wcd-panel{ left:  0; bottom: calc(100% + 10px); }
/* (alternativ, deschidere în lateral)
.wcd-floating-wrap.wcd-right .wcd-panel{ right: calc(100% + 10px); bottom: 0; }
.wcd-floating-wrap.wcd-left  .wcd-panel{ left:  calc(100% + 10px); bottom: 0; }
*/
.wcd-panel.is-open{ display:block; }

/* ===== Elemente din panou */
.wcd-group{ display:grid; gap:8px; }
.wcd-toggle{
  width:100%;
  text-align:left;
  background:#f7f7f7;
  border:1px solid #ececec;
  border-radius:10px;
  padding:10px 12px;
  font: inherit;
  cursor:pointer;
}
.wcd-toggle[aria-pressed="true"]{ background:#efefef; }
.wcd-note{ margin:10px 0 0; font-size:.85rem; color:#666; }

/* ===== Toggles de accesibilitate globale */
/* Text mai mare */
html.wcd-text-lg{ font-size:122.5% !important; }

/* Spațiere mărită (țintim blocuri de text și formulare) */
html.wcd-spacing p,
html.wcd-spacing li,
html.wcd-spacing dd,
html.wcd-spacing dt,
html.wcd-spacing blockquote,
html.wcd-spacing label,
html.wcd-spacing input,
html.wcd-spacing textarea,
html.wcd-spacing select{
  letter-spacing:.02em !important;
  line-height:1.7 !important;
}

/* Cursor mare (fallback simplu; pentru cursor custom, adaugă url(...) ) */
html.wcd-cursor-lg *{ cursor: default !important; }


/* ===== Mod Contrast Ridicat (fără filtre) */
html.wcd-contrast{
  --wcd-bg: #000;
  --wcd-fg: #fff;
  --wcd-link: #0ff;     /* cyan pe negru */
  --wcd-border: #777;
  --wcd-focus: #ff0;
}

/* Fundal + text principale (acoperim containerele uzuale Magento) */
html.wcd-contrast,
html.wcd-contrast body,
html.wcd-contrast .page-wrapper,
html.wcd-contrast .page-main,
html.wcd-contrast .columns,
html.wcd-contrast .content,
html.wcd-contrast header,
html.wcd-contrast main,
html.wcd-contrast footer{
  background: var(--wcd-bg) !important;
  color: var(--wcd-fg) !important;
}

/* Link-uri vizibile */
html.wcd-contrast a{
  color: var(--wcd-link) !important;
  text-decoration: underline !important;
}
html.wcd-contrast a:hover{ color:#ff0 !important; }

/* Titluri */
html.wcd-contrast h1, html.wcd-contrast h2, html.wcd-contrast h3,
html.wcd-contrast h4, html.wcd-contrast h5, html.wcd-contrast h6{
  color: var(--wcd-fg) !important;
}

/* Butoane / acțiuni uzuale Magento */
html.wcd-contrast .action,
html.wcd-contrast button,
html.wcd-contrast .btn,
html.wcd-contrast [type=button],
html.wcd-contrast [type=submit],
html.wcd-contrast .primary,
html.wcd-contrast .secondary{
  background: transparent !important;
  color: var(--wcd-fg) !important;
  border: 2px solid var(--wcd-fg) !important;
  border-radius: 8px !important;
}
html.wcd-contrast .action:hover,
html.wcd-contrast button:hover,
html.wcd-contrast .btn:hover{
  background:#111 !important;
}

/* Form controls */
html.wcd-contrast input,
html.wcd-contrast select,
html.wcd-contrast textarea{
  background:#000 !important;
  color:#fff !important;
  border:2px solid var(--wcd-border) !important;
}
html.wcd-contrast ::placeholder{ color:#ccc !important; }

/* Focus vizibil peste tot */
html.wcd-contrast *:focus-visible{
  outline: 3px solid var(--wcd-focus) !important;
  outline-offset: 2px !important;
}

/* Bare & blocuri comune */
html.wcd-contrast .breadcrumbs,
html.wcd-contrast .toolbar,
html.wcd-contrast .header,
html.wcd-contrast .footer,
html.wcd-contrast .message,
html.wcd-contrast .alert,
html.wcd-contrast .notice{
  background:#000 !important;
  color:#fff !important;
  border-color: var(--wcd-border) !important;
}

/* Tabele */
html.wcd-contrast table,
html.wcd-contrast th,
html.wcd-contrast td{
  background:#000 !important;
  color:#fff !important;
  border-color: var(--wcd-border) !important;
}

/* Cart / mini-cart / modale */
html.wcd-contrast .minicart-wrapper,
html.wcd-contrast .modal-popup,
html.wcd-contrast .modal-inner-wrap{
  background:#000 !important;
  color:#fff !important;
  border-color: var(--wcd-border) !important;
}

/* Pagination, badges, chips */
html.wcd-contrast .pages .item,
html.wcd-contrast .badge,
html.wcd-contrast .lib-badge{
  background:#000 !important;
  color:#fff !important;
  border:1px solid var(--wcd-fg) !important;
}

/* (Opțional) Variantă pe filtre — dezactivează blocul de mai sus și folosește pe răspunderea ta */
/*
html.wcd-contrast{ filter: invert(1) hue-rotate(180deg) !important; }
html.wcd-contrast img,
html.wcd-contrast video,
html.wcd-contrast picture,
html.wcd-contrast svg,
html.wcd-contrast canvas,
html.wcd-contrast iframe{
  filter: invert(1) hue-rotate(180deg) !important;
}
*/