/* === RC Reset — layout 1:1 z Elastic + tryb dark z przełącznikiem === */

/* ---------- Zmienne motywu ---------- */
:root{
  --ew-bg:#f5f7fb;
  --ew-card:#fff;
  --ew-border:#e6ebf2;
  --ew-shadow:0 8px 28px rgba(15,23,42,.08);

  --ew-text:#0f172a;
  --ew-muted:#55627a;

  --ew-primary:#33aaff;
  --ew-primary-h:#1ea0ff;

  --ew-secondary-bg:#e8eef7;
  --ew-secondary-br:#d6e3f7;
  --ew-secondary-tx:#1a5fd1;

  --ew-focus-br:#8bbcf8;
  --ew-focus-ring:rgba(139,188,248,.35);
}

/* Motyw ciemny aktywowany przez data-attribute */
:root[data-theme="dark"]{
  --ew-bg:#0b1220;
  --ew-card:#0f172a;
  --ew-border:#152238;
  --ew-shadow:0 10px 30px rgba(0,0,0,.55);

  --ew-text:#e5e7eb;
  --ew-muted:#cbd5e1;

  --ew-secondary-bg:#162646;
  --ew-secondary-br:#22355a;
  --ew-secondary-tx:#c7d2fe;

  --ew-focus-br:#5a95e6;
  --ew-focus-ring:rgba(90,149,230,.30);
}

/* Jeśli użytkownik nie wybrał – użyj preferencji systemu */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ color-scheme: dark; }
}

/* ---------- Scena ---------- */
html, body{height:100%}
body{
  margin:0;
  background:var(--ew-bg);
  color:var(--ew-text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding:28px 18px;
}

#layout-content{ all:unset; }

/* ---------- Karta ---------- */
.rc-card{
  width:100%; max-width:480px;
  background:var(--ew-card);
  border:1px solid var(--ew-border);
  border-radius:12px;
  box-shadow:var(--ew-shadow);
  animation:rcCardIn .28s ease-out both;
}
.rc-card .inner{ padding:26px; position:relative; }

/* ---------- Branding ---------- */
.rc-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}
.rc-brand .logo{
  width:220px;
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto 18px;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.rc-title{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--ew-text);
  text-align:center;
}

/* ---------- Opis ---------- */
.rc-hint{
  color:var(--ew-muted);
  margin:2px 0 16px;
  text-align:center;
}

/* ---------- Formularz ---------- */
.rc-form{
  width:100%;
  max-width:360px;
  margin:0 auto;
}
.rc-field{ margin-bottom:12px; }
.rc-field label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  color:var(--ew-text);
  text-align:left;
}
.rc-field input[type="email"],
.rc-field input[type="text"],
.rc-field input[type="password"]{
  width:100%;
  height:40px;
  border-radius:8px;
  border:1px solid #d9e1ee;
  background:#fff;
  padding:8px 12px;
  outline:none;
  margin:0;
  box-sizing:border-box;
}
:root[data-theme="dark"] .rc-field input{
  background:#0b1220;
  border-color:#28364e;
  color:var(--ew-text);
}
.rc-field input:focus{
  border-color:var(--ew-focus-br);
  box-shadow:0 0 0 3px var(--ew-focus-ring);
}

/* ---------- Przyciski ---------- */
.formbuttons{ margin-top:14px; }
.rc-actions{
  width:100%;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:stretch;
}
.rc-actions .button{
  flex:1 1 0;
  text-align:center;
  height:40px;
  line-height:40px;
  border-radius:8px;
  text-decoration:none;
  display:inline-block;
}

/* primary (submit) */
input.button.mainaction,
a.button.mainaction{
  appearance:none;
  background:var(--ew-primary)!important;
  border:1px solid var(--ew-primary)!important;
  color:#fff!important;
  font-weight:700;
  cursor:pointer;
  height:40px;
  line-height:40px;
  border-radius:8px;
}
input.button.mainaction:hover,
a.button.mainaction:hover{
  background:var(--ew-primary-h)!important;
  border-color:var(--ew-primary-h)!important;
}

/* secondary */
a.button.secondary{
  background:var(--ew-secondary-bg)!important;
  border:1px solid var(--ew-secondary-br)!important;
  color:var(--ew-secondary-tx)!important;
}

/* ---------- Wiadomości ---------- */
.rc-msg{
  padding:12px 14px;
  border-radius:10px;
  margin:0 0 10px;
}
.rc-msg.notice{
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#065f46;
}
:root[data-theme="dark"] .rc-msg.notice{
  background:#0f2b22;
  border-color:#1e5140;
  color:#b9f1dc;
}

/* ---------- Przełącznik motywu ---------- */
.rc-theme{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:7px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--ew-border);
  background:transparent;
  cursor:pointer;
  padding:0;
}
.rc-theme svg{
  width:16px;
  height:16px;
  display:block;
  color:var(--ew-muted);
}
.rc-theme:hover{ background:rgba(0,0,0,.03); }
:root[data-theme="dark"] .rc-theme:hover{ background:rgba(255,255,255,.04); }

/* ---------- Animacje ---------- */
@keyframes rcFadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes rcCardIn{ from{opacity:0;transform:translateY(8px) scale(.995)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ---------- ReCAPTCHA ---------- */
@media (max-height:500px){
  .grecaptcha-badge{
    transform:scale(.9);
    transform-origin:100% 100%;
  }
}

/* === Komunikaty wyników (jak Elastic) === */
.rc-msg{margin:12px 0;padding:12px 14px;border-radius:8px;font-size:15px}
.rc-msg-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.rc-msg-ok{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46}
@media (prefers-color-scheme: dark){
  .rc-msg-error{background:#2a0f10;border-color:#7f1d1d;color:#fecaca}
  .rc-msg-ok{background:#052e22;border-color:#14532d;color:#bbf7d0}
}

/* Pola pełnej szerokości w wierszu */
.rc-field input[type="email"],
.rc-field input[type="text"],
.rc-field input[type="password"]{width:100%; box-sizing:border-box}

/* Równe przyciski obok siebie */
.formbuttons{display:flex; gap:10px}
.formbuttons .button{flex:1}