/* ==========================================================
   DTK AUTH STYLES — Enterprise (SAFE GLOBAL ENQUEUE)
   - WP Login: body.login (wp-login.php)
   - Woo Account + Login + Lost Password + Endpoints: body.woocommerce-account
   - Password Protected front-end: .post-password-form

   IMPORTANT: Safe to enqueue globally because EVERYTHING is scoped.
========================================================== */


/* ==========================================================
   0) TOKENS (scoped roots only)
========================================================== */

body.login,
body.woocommerce-account,
.post-password-form {
  --dtk-green: #16a34a;
  --dtk-green-dark: #15803d;
  --dtk-text: #0f172a;
  --dtk-muted: #64748b;
  --dtk-border: #e5e7eb;
  --dtk-bg: #f6f8fb;
  --dtk-card: #ffffff;
  --dtk-radius: 18px;
  --dtk-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --dtk-ring: 0 0 0 4px rgba(22, 163, 74, 0.12);
}


/* ==========================================================
   1) COMMON HELPERS (scoped)
========================================================== */

body.login :where(a),
body.woocommerce-account :where(a),
.post-password-form :where(a) {
  text-underline-offset: 2px;
}

body.login :where(.dtk-auth-card),
body.woocommerce-account :where(.dtk-auth-card),
.post-password-form :where(.dtk-auth-card) {
  background: var(--dtk-card);
  border: 1px solid var(--dtk-border);
  border-radius: var(--dtk-radius);
  box-shadow: var(--dtk-shadow);
}

/* Inputs/buttons baseline only within scopes */
body.login :where(input, select, textarea),
body.woocommerce-account :where(input, select, textarea),
.post-password-form :where(input, select, textarea) {
  box-sizing: border-box;
}

body.login :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], textarea, select, .input, .input-text),
body.woocommerce-account :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], textarea, select, .input-text),
.post-password-form :where(input[type="text"], input[type="email"], input[type="password"], input[name="post_password"], textarea, select) {
  border: 1px solid var(--dtk-border) !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  font-size: 15px !important;
  box-shadow: none !important;
  background: #fff !important;
}

body.login :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], textarea, select, .input, .input-text):focus,
body.woocommerce-account :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], textarea, select, .input-text):focus,
.post-password-form :where(input[type="text"], input[type="email"], input[type="password"], input[name="post_password"], textarea, select):focus {
  border-color: rgba(22, 163, 74, 0.50) !important;
  box-shadow: var(--dtk-ring) !important;
  outline: none !important;
}

/* Primary buttons (robust) */
body.login :where(.button-primary, #wp-submit),
body.woocommerce-account :where(button.button, a.button, input.button, button, .wp-element-button, #respond input#submit),
.post-password-form :where(input[type="submit"], button) {
  background: var(--dtk-green) !important;
  border: 1px solid var(--dtk-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.login :where(.button-primary, #wp-submit):hover,
body.login :where(.button-primary, #wp-submit):focus,
body.woocommerce-account :where(button.button, a.button, input.button, button, .wp-element-button, #respond input#submit):hover,
body.woocommerce-account :where(button.button, a.button, input.button, button, .wp-element-button, #respond input#submit):focus,
.post-password-form :where(input[type="submit"], button):hover,
.post-password-form :where(input[type="submit"], button):focus {
  background: var(--dtk-green-dark) !important;
  border-color: var(--dtk-green-dark) !important;
  color: #fff !important;
}


/* ==========================================================
   2) WP LOGIN (wp-login.php)
   Scope: body.login
========================================================== */

body.login {
  background: var(--dtk-bg) !important;
}

body.login #login {
  width: min(420px, calc(100% - 32px)) !important;
  padding: 0 !important;
}

/* WP core has h1 a, your HTML may have h1.wp-login-logo a */
body.login #login h1 {
  margin: 0 0 16px !important;
}

body.login #login :where(h1 a, h1.wp-login-logo a) {
  background-image: url("https://dotykacka.cz/wp-content/uploads/2021/08/dotykacka_logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 220px !important;
  height: 60px !important;
  display: block !important;
  margin: 0 auto !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Forms: login, lost password, reset pass, register */
body.login :where(#loginform, #lostpasswordform, #resetpassform, #registerform) {
  background: var(--dtk-card) !important;
  border: 1px solid var(--dtk-border) !important;
  border-radius: var(--dtk-radius) !important;
  box-shadow: var(--dtk-shadow) !important;
  padding: 22px !important;
}

body.login :where(#loginform, #lostpasswordform, #resetpassform, #registerform) label {
  color: var(--dtk-text) !important;
  font-weight: 700 !important;
}

/* password reveal button layout (WP 5.3+) */
body.login .wp-pwd {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
}

body.login .wp-hide-pw.button.button-secondary {
  border-radius: 12px !important;
  border: 1px solid var(--dtk-border) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}

/* remember me */
body.login .forgetmenot {
  margin-top: 8px !important;
}
body.login .forgetmenot label {
  font-weight: 600 !important;
  color: var(--dtk-muted) !important;
}

/* submit row */
body.login :where(#loginform, #lostpasswordform, #resetpassform, #registerform) .submit {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* links under form */
body.login :where(#nav, #backtoblog) {
  padding: 12px 0 0 !important;
}

body.login :where(#nav a, #backtoblog a) {
  color: var(--dtk-muted) !important;
  text-decoration: none !important;
}

body.login :where(#nav a:hover, #backtoblog a:hover) {
  color: var(--dtk-text) !important;
  text-decoration: underline !important;
}

/* messages */
body.login :where(.message, .notice, .success, #login_error) {
  border-radius: 12px !important;
}
body.login :where(.message, .success) {
  border-left-color: var(--dtk-green) !important;
}

/* optional: hide language switcher */
/* body.login .language-switcher { display: none !important; } */


/* ==========================================================
   3) WOO MY ACCOUNT + LOGIN + ENDPOINTS
   Scope: body.woocommerce-account
========================================================== */

body.woocommerce-account {
  background: var(--dtk-bg);
}

/* constrain common wrappers (theme-independent) */
body.woocommerce-account :where(.woocommerce, .woocommerce-account, #primary, #main) {
  color: var(--dtk-text);
}

/* main content width */
body.woocommerce-account :where(.woocommerce, .woocommerce-account) {
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
}

/* Notices */
body.woocommerce-account .woocommerce-notices-wrapper :where(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
  border-radius: 12px !important;
}

/* Cards: login/register blocks + account nav/content + customer_login wrapper */
body.woocommerce-account :where(
  #customer_login,
  .u-columns,
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content,
  form.login,
  form.register,
  form.lost_reset_password
) {
  background: var(--dtk-card);
  border: 1px solid var(--dtk-border);
  border-radius: var(--dtk-radius);
  box-shadow: var(--dtk-shadow);
  padding: 20px;
}

/* spacing on mobile */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  margin-bottom: 16px;
}

/* desktop two-column */
@media (min-width: 900px) {
  body.woocommerce-account :where(.woocommerce, .woocommerce-account) {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
  }

  /* Login/register two columns inside customer_login */
  body.woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* labels */
body.woocommerce-account :where(.woocommerce, .woocommerce-account) form :where(label) {
  font-weight: 700;
  color: var(--dtk-text);
}

/* Account menu */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--dtk-text);
  text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(22, 163, 74, 0.10);
}

/* tables in account */
body.woocommerce-account :where(.woocommerce, .woocommerce-account) table.shop_table {
  border: 1px solid var(--dtk-border);
  border-radius: 12px;
  overflow: hidden;
}
body.woocommerce-account :where(.woocommerce, .woocommerce-account) table.shop_table th,
body.woocommerce-account :where(.woocommerce, .woocommerce-account) table.shop_table td {
  border-top: 1px solid var(--dtk-border);
}
body.woocommerce-account :where(.woocommerce, .woocommerce-account) table.shop_table thead th {
  border-top: none;
}

/* helper texts */
body.woocommerce-account :where(.woocommerce, .woocommerce-account) :where(.woocommerce-form__label, .woocommerce-privacy-policy-text, .lost_password, .woocommerce-LostPassword) {
  color: var(--dtk-muted);
}

/* links */
body.woocommerce-account :where(.woocommerce, .woocommerce-account) a {
  color: var(--dtk-green-dark);
}
body.woocommerce-account :where(.woocommerce, .woocommerce-account) a:hover {
  color: var(--dtk-text);
}


/* ==========================================================
   4) PASSWORD PROTECTED (front-end post/password form)
   Scope: .post-password-form
========================================================== */

.post-password-form {
  width: min(520px, calc(100% - 32px));
  margin: 24px auto;
  background: var(--dtk-card);
  border: 1px solid var(--dtk-border);
  border-radius: var(--dtk-radius);
  box-shadow: var(--dtk-shadow);
  padding: 22px;
  color: var(--dtk-text);
}

.post-password-form > p:first-child {
  margin-top: 0;
  color: var(--dtk-muted);
}

.post-password-form label {
  display: block;
  font-weight: 800;
  margin: 10px 0 6px;
  color: var(--dtk-text);
}

/* WP renders input name="post_password" */
.post-password-form input[name="post_password"] {
  width: 100% !important;
}

/* submit spacing */
.post-password-form input[type="submit"] {
  margin-top: 12px;
}