/* ============================================================
   EDUKURS – /kontakt (cleaned)
   - 2-column layout (info left, form right)
   - Contact cards (single + dual)
   - Form in brand style
   ============================================================ */

:root {
  --k-gap: 28px;
  --k-radius: 14px;
  --k-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Wrapper */
.kontakt { padding: clamp(24px, 4vw, 48px) 0; }
.kontakt-inner { max-width: 1200px; margin: 0 auto; }

/* Grid + locked areas */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* lewa ciut szersza */
  grid-template-areas: "info form";
  gap: var(--k-gap);
  align-items: start;
}
.kontakt-info { grid-area: info; }
.kontakt-form { grid-area: form; max-width: 520px; justify-self: end; }

@media (max-width: 1024px) {
  .kontakt-grid { grid-template-columns: 1fr; grid-template-areas: "info" "form"; }
}

/* Headings & text */
.kontakt-header h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.15; margin: 0 0 12px; }
.kontakt-header .lead { font-size: clamp(16px, 2.1vw, 18px); color: var(--muted, #65707c); margin: 0 0 10px; }
.kontakt-header .sublead { font-size: 15px; color: var(--muted, #6b7580); margin: 0 0 22px; }

/* Cards wrapper */
.kontakt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-gap); }
@media (max-width: 720px) { .kontakt-cards { grid-template-columns: 1fr; } }

/* Single card */
.kontakt-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  padding: 18px 20px;
}
html[data-theme="dark"] .kontakt-card { background: #0f141a; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.k-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kontakt-card h2 { font-size: 20px; margin: 0; }
.k-hours { margin: 0; color: var(--muted, #66707a); font-weight: 500; }
.k-days { opacity: .85; margin-right: 6px; }
.k-card-body { margin-top: 10px; }

/* Dual card: Biuro + Dział handlowy obok siebie */
.kontakt-card--dual .kontakt-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .kontakt-card--dual .kontakt-dual-grid { grid-template-columns: 1fr; gap: 24px; } }

.kontakt-card--dual {
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-top: 3px solid var(--brand, #ffcc00);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)) , var(--surface, #fff);
  box-shadow: var(--k-shadow);
  padding: 24px 26px;
  max-width: 520px;
  margin: 0 auto;
}
html[data-theme="dark"] .kontakt-card--dual { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), #0f141a; border-color: rgba(255,255,255,.1); border-top-color: var(--brand, #ffcc00); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* Contact list/links (spójne ze stopką) */
.contact-link { display: flex; align-items: center; gap: 10px; color: var(--text, #0f1720); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.contact-link svg { width: 20px; height: 20px; stroke: currentColor; transition: color .2s ease; }
.contact-link:hover { color: var(--brand, #ffcc00); border-bottom-color: var(--brand, #ffcc00); }
.contact-link:hover svg { color: var(--brand, #ffcc00); }
html[data-theme="dark"] .contact-link { color: #fff; }


/* Right column – form */
.kontakt-form { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)) , var(--surface, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 18px; box-shadow: var(--k-shadow); padding: 18px 18px 20px; border-top: 3px solid var(--brand, #ffcc00); max-width: 520px; justify-self: end; }
html[data-theme="dark"] .kontakt-form { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), #0f141a; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-top-color: var(--brand, #ffcc00); }

.kontakt-form > h2 { font-size: 26px; margin: 6px 6px 14px; }

.form { display: grid; grid-template-columns: 1fr; gap: 0; }
.f-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0;
}
.f-group:last-child {
  margin-bottom: 0;
}

.f-group--textarea { grid-column: 1 / -1; }

.f-group label { font-weight: 600; font-size: 14px; }
.f-group input, .f-group textarea { appearance: none; background: var(--surface, #fff); border: 1.5px solid var(--line, rgba(0,0,0,.18)); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: var(--text, #0f1720); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
html[data-theme="dark"] .f-group input, html[data-theme="dark"] .f-group textarea { background: #0b0f13; color: #e9eef6; border-color: rgba(255,255,255,.14); }

.f-group input::placeholder, .f-group textarea::placeholder { color: rgba(0,0,0,.35); }
html[data-theme="dark"] .f-group input::placeholder, html[data-theme="dark"] .f-group textarea::placeholder { color: rgba(255,255,255,.45); }

.f-group input:focus, .f-group textarea:focus { border-color: var(--brand, #ffcc00); box-shadow: none; }

.f-error { min-height: 16px; font-size: 12px; color: #ba1a1a; }

/* Consents */
.f-consents { grid-column: 1 / -1; font-size: 13px; color: var(--muted, #61707e); }
/* Custom checkbox (RODO) */
.checkbox{ position: relative; display: block; }
.checkbox input[type="checkbox"]{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
.checkbox label{
  position:relative; display:inline-block; padding-left:30px; cursor:pointer; line-height:1.55; color: var(--text, #0f1720);
}
html[data-theme="dark"] .checkbox label{ color:#e9eef6; }
/* box */
.checkbox label::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:4px;
  border:2px solid var(--line, rgba(0,0,0,.5)); background: var(--surface, #fff);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .checkbox label::before{ background:#0b0f13; border-color: rgba(255,255,255,.55); }
/* yellow check */
.checkbox input[type="checkbox"]:checked + label::after{
  content:""; position:absolute; left:4px; top:6px; width:10px; height:6px; border:3px solid var(--brand, #ffcc00);
  border-top:none; border-right:none; transform:rotate(-45deg);
}
/* keyboard focus */
.checkbox input[type="checkbox"]:focus + label::before{
  box-shadow: 0 0 0 2px rgba(255,204,0,.35);
}
/* validation error highlight */
.checkbox input[aria-invalid="true"] + label::before{ border-color:#d43c3c !important; }

/* Actions */
.f-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 4px; }
.btn-submit { appearance: none; border: none; background: var(--brand, #ffcc00); color: #000; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: transform .15s ease, filter .2s ease, background-color .2s ease; }
.btn-submit:hover { filter: none; transform: translateY(-1px); background: #ffd633; }
.btn-submit:active { transform: translateY(0); }
html[data-theme="dark"] .btn-submit { background: var(--brand, #ffcc00); color: #000; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Status */
.form-status { margin-top: 8px; font-size: 14px; }

/* Responsive tweaks */

/* ============================================================
   EDUKURS – stacked inputs (label + hint inside one field)
   ============================================================ */
.f-stack .f-field {
  position: relative;
  border: 1.6px solid var(--line, rgba(0,0,0,.28));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,0)) , var(--surface, #fff);
  padding: 8px 12px 6px; /* compact but safe */
}
html[data-theme="dark"] .f-stack .f-field {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), #0f141a;
  border-color: rgba(255,255,255,.35);
}

.f-stack .f-label { position: absolute; top: 6px; left: 12px; font-weight: 700; font-size: 15px; }

/* Stacked input fields: no inner borders/background/cienie */
.f-stack input,
.f-stack textarea {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  outline: none;
  padding: 18px 0 4px; /* top for label space, bottom for cursor */
  font-size: 16px;
  color: var(--text, #0f1720);
  box-shadow: none !important;
}
html[data-theme="dark"] .f-stack input,
html[data-theme="dark"] .f-stack textarea { color: #e9eef6; }

/* Bez dodatkowych ramek/cieni w wariancie stacked przy focus */
.f-stack .f-field input:focus,
.f-stack .f-field textarea:focus { box-shadow:none !important; border:0 !important; background:transparent !important; }

/* Secondary hint line (visible only when empty) */
.f-stack .f-hint { left: 12px; top: 26px; font-size: 14px; color: rgba(0,0,0,.38); position: absolute; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
html[data-theme="dark"] .f-stack .f-hint { color: rgba(255,255,255,.45); }

/* Toggle hint visibility using placeholder-shown */
.f-stack input:not(:placeholder-shown) ~ .f-hint,
.f-stack textarea:not(:placeholder-shown) ~ .f-hint {
  opacity: 0;
  transform: translateY(-2px);
}

/* Focus state – brand border */
.f-stack .f-field:focus-within {
  border-color: var(--brand, #ffcc00);
  box-shadow: none;
}

.f-stack input:focus,
.f-stack textarea:focus { box-shadow: none; }

/* ============================================================
   EDUKURS – Formularz kontaktowy: błędy i animacje
   ============================================================ */
/* Błąd w polu – oba warianty markupu */
.f-group.is-error input,
.f-group.is-error textarea,
.form-field.is-error input,
.form-field.is-error textarea {
  border-color: #d43c3c !important;
  animation: shakeField .35s ease;
  box-shadow: none;
}
/* Wariant stacked: granica jest na .f-field (wrapper) */
.f-stack .f-field.is-error {
  border-color: #d43c3c !important;
  box-shadow: none;
}


@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Komunikaty błędów – bez rezerwowania miejsca */
.f-error { color:#d43c3c; font-size:13px; margin-top:0; }
.f-error:empty { display:none; margin:0; padding:0; }
.f-error:not(:empty) { display:block; margin-top:6px; }

/* Wariant stacked: granica jest na .f-field (wrapper) */
.f-stack .f-field.is-error { border-color:#d43c3c !important; box-shadow:none; }


/* Status pod ramką – poza ramką formularza */
.form-status {
  display: block;
  position: relative;
  margin-top: 12px; /* slightly smaller gap */
  font-size: 15px;
  text-align: left;
  padding: 4px 0 0 0;
}

.kontakt-form + .form-status {
  margin-top: 10px;
  position: relative;
  top: 8px; /* visually below border */
}

.form-status.is-error {
  color: #b01818;
  background: transparent;
  border: none;
  font-weight: 600;
}

.form-status.is-ok {
  color: #146b11;
  background: transparent;
  border: none;
  font-weight: 600;
}

/* Większa czcionka podczas pisania */
.f-group input:focus,
.f-group textarea:focus {
  font-size: 17px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}