/* GreenTouch — selector compact de culoare pentru calculator.
   Scope STRICT sub .gt-cc (nu atinge designul aprobat). ~20 buline într-o grilă responsive. */

/* Offset sub header-ul fix (.hdr, position:fixed) pentru pagina Calculator, ca „Lungimea/Lățimea
   proiectului" și sliderele să nu fie acoperite. Bazat pe înălțimea reală a headerului (extins ≈62px),
   cu spațiu de siguranță; ține cont de bara admin WP (desktop +32px, mobil +46px). Valoare statică →
   pagina nu sare când headerul se compactează. Scope: doar mount-ul calculatorului. */
:root { --gt-header-offset: clamp(88px, 11vh, 112px); }
.gt-calculator-mount { padding-top: var(--gt-header-offset); }
body.admin-bar .gt-calculator-mount { padding-top: calc(var(--gt-header-offset) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .gt-calculator-mount { padding-top: calc(var(--gt-header-offset) + 46px); }
}

.gt-cc {
  border-top: 1px solid rgba(29, 32, 25, .1);
  padding-top: 12px;
  margin-top: 4px;
}
.gt-cc-title {
  font: 700 13px var(--font-ui, sans-serif);
  color: var(--ink, #1d2019);
  margin: 0 0 4px;
}
.gt-cc-selected {
  font: 500 12.5px var(--font-ui, sans-serif);
  color: var(--ink-60, #5b5f54);
  margin: 0 0 10px;
}
.gt-cc-selected b { color: var(--green-900, #1d2a17); font-weight: 700; }

.gt-cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  width: 100%;
}
/* Peste 480px limităm celula ca bulinele să nu devină exagerat de mari. */
@media (min-width: 480px) {
  .gt-cc-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 50px)); }
}

.gt-cc-dot {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
/* Bulina vizuală (~32px), culoarea din _gt_color_hex via --cc. */
.gt-cc-dot::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--cc, #9aa886);
  border: 1px solid rgba(29, 32, 25, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  transition: transform .12s ease;
}
.gt-cc-dot:hover:not(:disabled)::before { transform: scale(1.06); }

/* Focus vizibil pentru tastatură. */
.gt-cc-dot:focus-visible { outline: 2px solid var(--green-900, #1d2a17); outline-offset: 2px; }

/* Selectat: inel exterior verde închis + bifă cu contrast. */
.gt-cc-dot.is-sel::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 2.5px solid var(--green-900, #1d2a17);
  box-shadow: 0 0 0 2px #fff inset;
  pointer-events: none;
}
.gt-cc-check {
  position: absolute;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 2px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* Indisponibil: estompat + bară diagonală, dezactivat real. */
.gt-cc-dot.is-out { cursor: not-allowed; }
.gt-cc-dot.is-out::before { opacity: .35; }
.gt-cc-dot.is-out .gt-cc-bar {
  position: absolute;
  width: 34px;
  height: 2px;
  background: rgba(29, 32, 25, .55);
  transform: rotate(-45deg);
  border-radius: 2px;
  pointer-events: none;
}

/* Homepage (mobil): calculatorul e la mijloc de pagină, nu are nevoie de offset-ul header-ului
   fix pe care mount-ul îl folosește pe pagina dedicată. Reducem spațiul dintre paragraf și card
   la ~40px. Scoped la body.home (front page) + mobil; pagina dedicată (fără .home) rămâne neatinsă. */
@media (max-width: 760px) {
  body.home .gt-calculator-mount { padding-top: 40px; }
}

/* Homepage (desktop ≥761px): calculatorul e la mijloc de pagină și NU are nevoie de offset-ul
   header-ului fix (folosit doar pe pagina dedicată, unde mount-ul e în vârf). Eliminăm padding-top-ul
   care crea spațiul mare înainte de Calculator. Scoped body.home → pagina dedicată (fără .home) neatinsă. */
@media (min-width: 761px) {
  body.home .gt-calculator-mount { padding-top: 0; }
}