/* Auth Skin — light WOW, accessible, performant (2025) */

/* =============== Tokens / Theme =============== */
.tuto-auth{
  --maxw: 960px; --formw: 560px; --gap: 16px; --r: 14px; --ring: 3px;

  --c-bg:#fff; --c-surface:#f8fafc; --c-border:#e5e7eb;
  --c-text:#0f172a; --c-muted:#475569; --c-placeholder:#9aa4b2;

  --c-accent:#0ea5e9;           /* brand accent */
  --c-accent-2:#22d3ee;         /* soft secondary for gradients */
  --c-accent-hover:#0284c7;
  --c-danger:#dc2626;
  --c-ok:#10b981;               /* success for validation */

  /* defaults for TABs (login as colored) */
  --tab-pill-bg: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-hover) 100%);
  --tab-active-text: #fff;

  --shadow:0 10px 26px rgba(2,6,23,.06);
  --shadow-focus:0 0 0 3px rgba(14,165,233,.12), 0 10px 28px rgba(14,165,233,.10);

  margin:28px auto; max-width:var(--maxw); position:relative;
  background: var(--c-bg);
  border-radius: var(--r);
  padding:18px;
  box-shadow: var(--shadow);
  /* subtle gradient border without heavy filters */
  border:1px solid transparent;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(120deg, color-mix(in srgb, var(--c-accent) 24%, #fff) 0%, color-mix(in srgb, var(--c-accent-2) 22%, #fff) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Decorative corner (very light, no perf hit) */
.tuto-auth::after{
  content:"";
  position:absolute; right:8px; top:8px; width:72px; height:72px; pointer-events:none;
  background:
    radial-gradient(60% 60% at 80% 20%, color-mix(in srgb, var(--c-accent) 18%, #fff) 0%, transparent 70%),
    radial-gradient(60% 60% at 30% 70%, color-mix(in srgb, var(--c-accent-2) 14%, #fff) 0%, transparent 70%);
  opacity:.55; filter:saturate(1.05);
  border-radius:50%;
}

/* Remove big default title */
.woocommerce-account .entry-title,
.woocommerce-account h1.page-title{ display:none; }

/* =============== Tabs =============== */
.tuto-auth__tabs{
  position:relative;
  display:flex; gap:8px; margin-bottom:16px;
  background:var(--c-surface);
  border:1px solid color-mix(in srgb, var(--c-border) 60%, #fff);
  border-radius:12px; padding:6px;
  overflow:hidden;
}
.tuto-auth__tabs::before{
  content:"";
  position:absolute; inset:6px; width:calc(50% - 6px); height:calc(100% - 12px);
  border-radius:10px;
  background: var(--tab-pill-bg);
  box-shadow:0 8px 20px rgba(2,6,23,.10);
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.2,.7,.2,1), background .24s ease;
  z-index:0;
}
.tuto-auth.is-tab-register{
  --tab-pill-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-accent) 8%, #ffffff) 0%,
    color-mix(in srgb, var(--c-accent) 6%, #ffffff) 100%
  );
  --tab-active-text: var(--c-accent);
}
.tuto-auth.is-tab-register .tuto-auth__tabs::before{ transform: translateX(100%); }

.tuto-auth__tab{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 0; min-width:130px; padding:10px 14px;
  border-radius:10px; border:1px solid transparent; background:transparent;
  color:var(--c-text); font-weight:700; cursor:pointer;
  transition: color .24s ease, transform .06s ease;
}
.tuto-auth__tab.is-active{ color: var(--tab-active-text); }
.tuto-auth__tab.is-active .hint-en{ color: color-mix(in srgb, var(--tab-active-text) 78%, #4b5563); }
.tuto-auth__tab:hover{ transform: translateY(-1px); }
.tuto-auth__tab:focus-visible{ outline:var(--ring) solid color-mix(in srgb, var(--c-accent) 55%, #fff); outline-offset:2px; }

/* =============== Panels (smooth reveal) =============== */
.tuto-auth__panels{ display:block; }
.tuto-auth__panel{
  display:block; width:100%; box-sizing:border-box; padding-top:6px;
  opacity:1; transform: translateY(0); transition: opacity .18s ease, transform .18s ease;
}
.tuto-auth__panel.is-hidden{ display:block; opacity:0; transform: translateY(4px); height:0; padding-top:0; overflow:hidden; }

/* Unify widths */
#tuto-auth-panel-login .u-column1, #tuto-auth-panel-register .u-column2,
#tuto-auth-panel-login .col-1,   #tuto-auth-panel-register .col-2,
#tuto-auth-panel-login form,     #tuto-auth-panel-register form{
  max-width:var(--formw); width:100%; margin:0 auto;
}
.woocommerce .u-columns, .u-columns{ display:block !important; }

/* =============== Inputs (elevated look + states) =============== */
.tuto-input,
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"]{
  width:100%;
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:12px 14px;
  font-size:16px; line-height:1.45;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg, #eef2f7, #ffffff) border-box;
  color:var(--c-text);
  box-shadow:
    inset 0 1px 0 rgba(2,6,23,.02),
    0 1px 0 rgba(2,6,23,.02);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
  box-sizing:border-box;
}
.woocommerce form .input-text::placeholder{ color:var(--c-placeholder); }
.woocommerce form .input-text:hover{ border-color:#d6e7f5; }
.woocommerce form .input-text:focus,
.woocommerce form .input-text:focus-visible{
  outline:none; border-color:transparent;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3px color-mix(in srgb, var(--c-accent) 35%, #fff),
    0 10px 24px rgba(14,165,233,.08);
}

/* Validation states */
.woocommerce form .input-text[aria-invalid="true"],
.woocommerce form input[aria-invalid="true"]{
  border-color:#fca5a5 !important;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3px rgba(244,63,94,.16),
    0 6px 18px rgba(244,63,94,.06) !important;
}
.woocommerce form .input-text[data-valid="true"],
.woocommerce form input[data-valid="true"]{
  border-color: color-mix(in srgb, var(--c-ok) 50%, #d1fae5);
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3px rgba(16,185,129,.18),
    0 6px 18px rgba(16,185,129,.06);
}

.woocommerce form .form-row{ margin:0 0 14px 0; }
.woocommerce form .form-row label{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-weight:600; color:var(--c-muted);
}

/* EN comments */
.hint-en{ font-size:12px; font-weight:500; color:var(--c-muted); }
@media (max-width:560px){
  .woocommerce form .form-row label .hint-en{ display:block; margin-top:2px; }
}

/* Required star */
.woocommerce form .form-row label .tuto-required,
.woocommerce form .form-row label .required{
  margin-left:6px; line-height:1; color:#ef4444; font-size:14px; text-decoration:none;
}

/* Inline field messages (uniform size) */
.tuto-field-msg,
.tuto-auth__consent-error{
  margin-top:6px; font-size:12px; line-height:1.35;
  color:#b91c1c;  /* errors by default */
}
.tuto-field-msg.is-ok{ color:var(--c-muted); }

/* Password hint (PL • EN) */
.tuto-auth__pwd-hint{ font-size:13px; color:var(--c-muted); margin:6px 0 10px 0; }

/* Show/Hide password */
.woocommerce form .form-row .password-input{ position:relative; }
.woocommerce form .form-row .password-input input[type="password"],
.woocommerce form .form-row .password-input input[type="text"]{ padding-right:52px; }
.woocommerce form .form-row .show-password-input{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer; border-radius:8px;
}
.woocommerce form .form-row .show-password-input:focus-visible{ outline:var(--ring) solid rgba(14,165,233,.18); outline-offset:2px; }

/* =============== Consents (single-line EN; wraps on very narrow) =============== */
.tuto-auth__consents{
  border:1px dashed var(--c-border);
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg, #fff, var(--c-surface));
}
.tuto-consent{ margin:10px 0; }
.tuto-consent .woocommerce-form__label{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap;
  line-height:1.25; min-width:0;
}
.tuto-consent .woocommerce-form__label .input-checkbox{ flex:0 0 auto; margin:0; }
.tuto-consent .woocommerce-form__label .tuto-consent__pl{
  display:inline; font-size:12.5px; color:var(--c-text);
}
.tuto-consent .hint-en{
  display:inline; margin-left:6px; font-size:11px; font-weight:500; color:var(--c-muted);
}
.tuto-consent .tuto-required,
.tuto-consent .woocommerce-form__label .required{
  display:inline; margin-left:6px; color:#ef4444; font-size:13px; line-height:1; text-decoration:none; white-space:nowrap;
}
@media (max-width: 360px){
  .tuto-consent .woocommerce-form__label{ white-space:normal; flex-wrap:wrap; gap:4px; }
  .tuto-consent .woocommerce-form__label .tuto-consent__pl{ font-size:12px; }
  .tuto-consent .hint-en{ font-size:10.5px; }
  .tuto-consent .tuto-required{ font-size:12.5px; }
}

/* =============== Password strength (clean bar) =============== */
.woocommerce-password-strength{
  position:relative;
  border:1px solid var(--c-border); border-radius:8px;
  padding:8px 12px; font-size:12px; background:#fff; color:var(--c-muted); margin-top:8px;
}
.woocommerce-password-strength::before{
  content:""; position:absolute; left:8px; right:8px; bottom:8px;
  height:6px; background:#eef2f7; border-radius:999px;
}
.woocommerce-password-strength::after{
  content:""; position:absolute; left:8px; bottom:8px; height:6px; width:0;
  border-radius:999px; transition: width .25s ease;
  background: linear-gradient(90deg,#06b6d4 0%, #0ea5e9 100%);
}
.woocommerce-password-strength.short::after{ width:20%; background:#f43f5e; }
.woocommerce-password-strength.bad::after{   width:40%; background:#f59e0b; }
.woocommerce-password-strength.good::after{  width:70%; background:#10b981; }
.woocommerce-password-strength.strong::after{width:100%; background:linear-gradient(90deg,#06b6d4,#0ea5e9); }

/* =============== Buttons (subtle sheen) =============== */
.woocommerce form .button,
#customer_login .button,
#customer_login button[type="submit"],
#customer_login input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; color:#fff; padding:12px 16px; border-radius:12px;
  font-weight:800; font-size:15px; cursor:pointer; width:100%;
  background:
    linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-hover) 100%),
    linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,0) 40%);
  background-size: 100% 100%, 180% 100%;
  background-position: center, -60% 0;
  box-shadow:0 10px 24px rgba(14,165,233,.14);
  transition: transform .08s ease, box-shadow .12s ease, background-position .6s ease, filter .12s ease;
}
@media (min-width:560px){ .woocommerce form .button, #customer_login .button{ width:auto; } }
.woocommerce form .button:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(14,165,233,.18);
  background-position: center, 120% 0; /* gentle sheen */
}
.woocommerce form .button:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(2,6,23,.10); }
.woocommerce form .button[disabled],
#customer_login .button[disabled]{
  opacity:.55; cursor:not-allowed; filter:grayscale(0.2) brightness(0.95);
  box-shadow:none; transform:none;
}

/* Secondary */
.tuto-btn.tuto-btn--secondary{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--c-border); background:#fff; color:var(--c-text);
  padding:10px 12px; border-radius:10px; font-weight:600;
  box-shadow:0 4px 12px rgba(2,6,23,.04);
}
.tuto-auth__lostpass{ margin-top:10px; display:flex; justify-content:flex-end; }

/* Notices */
.woocommerce-error,.woocommerce-message,.woocommerce-info{ border-radius:10px !important; }
.woocommerce-error{ border-left:4px solid var(--c-danger); }

/* Fallback CSS switching */
.tuto-auth.is-tab-login  #tuto-auth-panel-login{ display:block; }
.tuto-auth.is-tab-login  #tuto-auth-panel-register{ display:none; }
.tuto-auth.is-tab-register #tuto-auth-panel-login{ display:none; }
.tuto-auth.is-tab-register #tuto-auth-panel-register{ display:block; }

/* Focus */
button,[type="button"],[type="submit"],a,input,select,textarea{ outline-offset:2px; }
:focus-visible{ outline:var(--ring) solid rgba(14,165,233,.18); }