/* Părinți Solidari — componente pentru wireframe-uri (mid-fi, tematizat).
   Folosește token-urile din brand.css. Provizoriu: devine baza template-urilor reale. */

/* Banner „prototip” */
.wf-banner {
  background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 12px, #ffedd5 12px, #ffedd5 24px);
  border-bottom: 1px solid var(--ps-orange);
  color: #92500f; font-family: var(--ps-font-head); font-weight: 600; font-size: 0.82rem;
  text-align: center; padding: 6px 12px;
}

/* Layout */
.wf-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.wf-breadcrumb { color: var(--ps-muted); font-size: 0.85rem; margin: 4px 0 16px; }
.wf-breadcrumb a { color: var(--ps-muted); }
.wf-h { font-family: var(--ps-font-head); }
.wf-section-title { font-size: 1.25rem; margin: 28px 0 14px; color: var(--ps-ink); }
.wf-muted { color: var(--ps-muted); }
.wf-panel {
  background: var(--ps-surface); border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius); box-shadow: var(--ps-shadow);
}

/* Index wireframes */
.wf-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
.wf-index-card { display: block; padding: 22px; border-left: 5px solid var(--ps-blue); }
.wf-index-card h3 { margin: 0 0 6px; color: var(--ps-blue); }
.wf-index-card p { margin: 0; color: var(--ps-muted); font-size: 0.92rem; }
.wf-index-card.soon { border-left-color: var(--ps-border); opacity: 0.75; }
.wf-tag { display: inline-block; font-family: var(--ps-font-head); font-weight: 700; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.wf-tag--ready { background: rgba(96,182,178,.18); color: #2c7d79; }
.wf-tag--soon { background: #eef2f5; color: var(--ps-muted); }

/* Searchbar + filtre */
.wf-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wf-search input {
  flex: 1; min-width: 220px; font-family: var(--ps-font-body); font-size: 1rem;
  padding: 12px 16px; border: 1px solid var(--ps-border); border-radius: 999px; background: var(--ps-surface);
}
.wf-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wf-chip {
  font-family: var(--ps-font-head); font-weight: 600; font-size: .85rem;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ps-border);
  background: var(--ps-surface); color: var(--ps-ink); cursor: pointer; white-space: nowrap;
}
.wf-chip:hover { border-color: var(--ps-blue); color: var(--ps-blue); }
.wf-chip--active { background: var(--ps-blue); color: #fff; border-color: var(--ps-blue); }
.wf-chip small { opacity: .8; font-weight: 400; }

/* Split listă + hartă */
.wf-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 880px) { .wf-split { grid-template-columns: 1fr; } }

/* Hartă placeholder */
.wf-map {
  position: sticky; top: 84px; height: 560px; border-radius: var(--ps-radius); overflow: hidden;
  border: 1px solid var(--ps-border); box-shadow: var(--ps-shadow);
  background:
    linear-gradient(rgba(0,101,157,.04), rgba(0,101,157,.04)),
    repeating-linear-gradient(0deg, #eaf4fa, #eaf4fa 39px, #dceaf3 39px, #dceaf3 40px),
    repeating-linear-gradient(90deg, #eaf4fa, #eaf4fa 39px, #dceaf3 39px, #dceaf3 40px);
}
@media (max-width: 880px) { .wf-map { position: static; height: 320px; } }
.wf-map__label {
  position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.9);
  border: 1px solid var(--ps-border); border-radius: 8px; padding: 6px 10px;
  font-family: var(--ps-font-head); font-size: .76rem; color: var(--ps-muted);
}
.wf-pin {
  position: absolute; width: 30px; height: 30px; transform: translate(-50%, -100%);
  background: var(--ps-blue); border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  rotate: -45deg; box-shadow: 0 4px 10px rgba(0,101,157,.35);
}
.wf-pin span { rotate: 45deg; display: block; color: #fff; font-weight: 700; font-size: .7rem;
  text-align: center; line-height: 24px; font-family: var(--ps-font-head); }
.wf-pin--cluster { width: 42px; height: 42px; background: var(--ps-blue-light); }
.wf-pin--cluster span { line-height: 36px; color: var(--ps-ink); }

/* Card instituție (listă) */
.wf-inst-card { display: flex; gap: 14px; padding: 16px; margin-bottom: 12px; }
.wf-inst-card__body { flex: 1; min-width: 0; }
.wf-inst-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ps-ink); }
.wf-inst-card h3 a { color: inherit; }
.wf-inst-card .wf-meta { color: var(--ps-muted); font-size: .85rem; margin-bottom: 8px; }
.wf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wf-pill { font-size: .72rem; font-family: var(--ps-font-head); font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: #eef5fa; color: var(--ps-blue); }

/* Badge rating */
.wf-rating { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px; border-radius: 12px; background: var(--ps-blue); color: #fff; }
.wf-rating b { font-family: var(--ps-font-head); font-size: 1.35rem; line-height: 1; }
.wf-rating small { font-size: .66rem; opacity: .85; margin-top: 2px; }
.wf-rating--lg { min-width: 96px; padding: 14px; }
.wf-rating--lg b { font-size: 2.1rem; }

/* Steluțe */
.wf-stars { color: var(--ps-orange); letter-spacing: 1px; font-size: .95rem; }
.wf-stars .off { color: #d7dee3; }

/* Detaliu instituție */
.wf-inst-header { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px; }
.wf-inst-header .grow { flex: 1; min-width: 220px; }
.wf-inst-header h1 { margin: 0 0 8px; font-size: 1.7rem; }
.wf-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; padding: 20px 22px; }
.wf-info-grid .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-muted); font-family: var(--ps-font-head); }
.wf-info-grid .v { color: var(--ps-ink); }

/* Bare pe categorii */
.wf-catbars { display: grid; gap: 14px; padding: 6px 0; }
.wf-catbar { display: grid; grid-template-columns: 190px 1fr 44px; align-items: center; gap: 12px; }
@media (max-width: 560px){ .wf-catbar { grid-template-columns: 1fr; gap: 4px; } }
.wf-catbar .lbl { font-size: .9rem; color: var(--ps-ink); }
.wf-catbar .track { height: 10px; background: #e9eef2; border-radius: 999px; overflow: hidden; }
.wf-catbar .fill { height: 100%; background: linear-gradient(90deg, var(--ps-blue-light), var(--ps-blue)); border-radius: 999px; }
.wf-catbar .val { text-align: right; font-family: var(--ps-font-head); font-weight: 700; color: var(--ps-blue); }

/* CTA-uri */
.wf-cta-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px 22px; border-top: 1px solid var(--ps-border); }

/* Recenzii */
.wf-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.wf-select { font-family: var(--ps-font-head); font-size: .85rem; padding: 8px 12px; border: 1px solid var(--ps-border); border-radius: 8px; background: var(--ps-surface); }
.wf-review { padding: 16px 18px; margin-bottom: 12px; }
.wf-review__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-review__who { font-family: var(--ps-font-head); font-weight: 600; font-size: .92rem; color: var(--ps-ink); }
.wf-review__date { color: var(--ps-muted); font-size: .8rem; }
.wf-review__scores { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.wf-score-tag { font-size: .72rem; font-family: var(--ps-font-head); padding: 2px 8px; border-radius: 6px; background: #eef5fa; color: var(--ps-blue); }
.wf-review p { margin: 6px 0 0; color: #34495a; }
.wf-pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.wf-pager a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--ps-border); color: var(--ps-ink); font-family: var(--ps-font-head); font-size: .85rem; }
.wf-pager a.active { background: var(--ps-blue); color: #fff; border-color: var(--ps-blue); }

/* Pași flux recenzie */
.wf-steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 22px; }
.wf-step { display: flex; align-items: center; gap: 8px; color: var(--ps-muted); font-family: var(--ps-font-head); font-size: .9rem; }
.wf-step b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #e9eef2; color: var(--ps-muted); font-size: .8rem; }
.wf-step--active { color: var(--ps-blue); }
.wf-step--active b { background: var(--ps-blue); color: #fff; }
.wf-step__line { flex: 1; min-width: 16px; height: 2px; background: var(--ps-border); }

/* Formular */
.wf-form { padding: 22px; }
.wf-field { margin-bottom: 18px; }
.wf-field label { display: block; font-family: var(--ps-font-head); font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--ps-ink); }
.wf-field input[type=email], .wf-field textarea {
  width: 100%; font-family: var(--ps-font-body); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--ps-border); border-radius: 10px; background: var(--ps-surface); resize: vertical;
}
.wf-hint { color: var(--ps-muted); font-size: .8rem; margin-top: 4px; }
.wf-score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed var(--ps-border); flex-wrap: wrap; }
.wf-score-row:last-child { border-bottom: 0; }
.wf-score-row .name { font-family: var(--ps-font-head); font-weight: 600; color: var(--ps-ink); }
.wf-score-stars { font-size: 1.4rem; color: var(--ps-orange); letter-spacing: 3px; cursor: pointer; }
.wf-score-stars .off { color: #d7dee3; }

/* Confirmare e-mail */
.wf-confirm { text-align: center; padding: 36px 24px; }
.wf-confirm .icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: rgba(94,197,234,.2); color: var(--ps-blue); font-size: 1.8rem; }
.wf-confirm h2 { margin: 0 0 8px; }
.wf-confirm p { color: var(--ps-muted); max-width: 440px; margin: 0 auto; }

/* Note explicative pentru wireframe */
.wf-note { border-left: 4px solid var(--ps-violet); background: #f6f4fb; color: #4a3f63;
  padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin: 14px 0; }

/* ============ LOT 2 ============ */

/* Taburi */
.wf-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ps-border); margin: 10px 0 18px; }
.wf-tab { font-family: var(--ps-font-head); font-weight: 600; font-size: .9rem; padding: 10px 16px;
  color: var(--ps-muted); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.wf-tab--active { color: var(--ps-blue); border-bottom-color: var(--ps-blue); }

/* Clasament — rânduri cu rank */
.wf-rank-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px; }
.wf-rank { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: #eef5fa; color: var(--ps-blue); font-family: var(--ps-font-head); font-weight: 800; font-size: 1.1rem; }
.wf-rank--1 { background: var(--ps-blue); color: #fff; }
.wf-rank--2 { background: var(--ps-blue-light); color: var(--ps-ink); }
.wf-rank--3 { background: rgba(94,197,234,.4); color: var(--ps-ink); }
.wf-rank-row .grow { flex: 1; min-width: 0; }
.wf-rank-row h3 { margin: 0 0 2px; font-size: 1rem; color: var(--ps-ink); }
.wf-rank-row .wf-meta { color: var(--ps-muted); font-size: .82rem; }

/* Tabel comparativ */
.wf-table-wrap { overflow-x: auto; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); }
.wf-compare { width: 100%; border-collapse: collapse; background: var(--ps-surface); min-width: 560px; }
.wf-compare th, .wf-compare td { padding: 14px 16px; border-bottom: 1px solid var(--ps-border); }
.wf-compare tbody th { font-family: var(--ps-font-head); font-weight: 600; color: var(--ps-ink); text-align: left; }
.wf-compare td { text-align: center; }
.wf-compare .cell { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; }
.wf-compare .cell b { font-family: var(--ps-font-head); color: var(--ps-blue); }
.wf-compare .minibar { width: 80px; height: 7px; background: #e9eef2; border-radius: 999px; overflow: hidden; }
.wf-compare .minibar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ps-blue-light), var(--ps-blue)); }
.wf-compare tr.total td, .wf-compare tr.total th { background: #f5fafd; }
.wf-chead { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--ps-font-head); color: var(--ps-blue); }
.wf-chead .x { color: var(--ps-muted); font-size: .78rem; cursor: pointer; font-weight: 400; }

/* Statistici */
.wf-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 16px; }
.wf-stat { padding: 20px; }
.wf-stat .num { font-family: var(--ps-font-head); font-weight: 800; font-size: 2rem; color: var(--ps-blue); line-height: 1; }
.wf-stat .lbl { color: var(--ps-muted); font-size: .85rem; margin-top: 6px; }
.wf-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px){ .wf-charts { grid-template-columns: 1fr; } }
.wf-chart { padding: 20px; }
.wf-chart h3 { margin: 0 0 18px; font-size: 1rem; }
.wf-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-bottom: 24px; }
.wf-bars .bar { flex: 1; background: linear-gradient(var(--ps-blue-light), var(--ps-blue)); border-radius: 6px 6px 0 0; position: relative; }
.wf-bars .bar span { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--ps-muted); }
.wf-hbars { display: grid; gap: 12px; }
.wf-hbar { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 10px; }
@media (max-width: 560px){ .wf-hbar { grid-template-columns: 1fr; gap: 3px; } }
.wf-hbar .lbl { font-size: .85rem; color: var(--ps-ink); }
.wf-hbar .track { height: 12px; background: #e9eef2; border-radius: 999px; overflow: hidden; }
.wf-hbar .fill { height: 100%; border-radius: 999px; }
.wf-hbar .v { text-align: right; font-family: var(--ps-font-head); font-weight: 700; color: var(--ps-blue); font-size: .85rem; }
.wf-line { height: 170px; border-radius: 10px; border: 1px dashed var(--ps-border); color: var(--ps-muted); font-size: .85rem;
  background: linear-gradient(180deg, rgba(94,197,234,.18), rgba(94,197,234,0)); display: grid; place-items: center; }

/* Opțiuni formular (radio/checkbox) */
.wf-options { display: grid; gap: 10px; }
.wf-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ps-border);
  border-radius: 10px; cursor: pointer; font-size: .92rem; }
.wf-option:hover { border-color: var(--ps-blue); }
.wf-option .box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--ps-blue); flex: none; }
.wf-option--checked { border-color: var(--ps-blue); background: #f1f8fc; }
.wf-option--checked .box { background: var(--ps-blue); }

/* Banner link semnat (evaluare internă) */
.wf-token { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px;
  background: #f6f4fb; border: 1px solid #e3dcf2; color: #4a3f63; margin-bottom: 18px; }
.wf-token .ic { font-size: 1.3rem; }
.wf-token b { font-family: var(--ps-font-head); }

/* Auth */
.wf-auth { max-width: 420px; margin: 30px auto; padding: 30px; text-align: center; }
.wf-auth h1 { font-size: 1.5rem; margin: 0 0 6px; }
.wf-auth p.sub { color: var(--ps-muted); margin: 0 0 22px; }
.wf-auth .wf-field { text-align: left; }
.wf-auth .ps-btn { width: 100%; }
.wf-or { display: flex; align-items: center; gap: 12px; color: var(--ps-muted); font-size: .8rem; margin: 18px 0; }
.wf-or::before, .wf-or::after { content: ""; flex: 1; height: 1px; background: var(--ps-border); }
.wf-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px; border: 1px solid var(--ps-border); border-radius: 999px; background: #fff;
  font-family: var(--ps-font-head); font-weight: 700; color: var(--ps-ink); cursor: pointer; }
.wf-social:hover { border-color: var(--ps-blue); }
.wf-social .g { width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0 100%); }