/* Custom Login Pro — frontend styles
 * Works in three contexts:
 *   1. Standalone mode  — plugin renders its own HTML shell (.clp-standalone)
 *   2. Theme / Elementor mode — form rendered inside WordPress page template
 *   3. Shortcode inside any Elementor widget
 * -------------------------------------------------------------------- */

/* ── Reset (scoped) ─────────────────────────────────────────────────── */
.clp-form-wrap *,
.clp-form-wrap *::before,
.clp-form-wrap *::after { box-sizing: border-box; }

/* ── CSS custom properties ──────────────────────────────────────────── */
:root {
  --clp-bg:          #f0f2f5;
  --clp-card:        #ffffff;
  --clp-accent:      #4f46e5;
  --clp-text:        #111827;
  --clp-radius:      16px;
  --clp-muted:       #6b7280;
  --clp-border:      #e5e7eb;
  --clp-input-bg:    #f9fafb;
  --clp-danger:      #ef4444;
  --clp-success:     #22c55e;
  --clp-font:        inherit;          /* inherits Hello Elementor / theme font */
  --clp-btn-radius:  calc(var(--clp-radius) * 0.625);
  --clp-input-radius:calc(var(--clp-radius) * 0.5);
}

/* ── Standalone shell ───────────────────────────────────────────────── */
body.clp-standalone {
  font-family: var(--clp-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  background: var(--clp-bg);
  color: var(--clp-text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  margin: 0;
}

body.clp-standalone .clp-wrap {
  width: 100%;
  max-width: 440px;
}

body.clp-standalone .clp-card {
  background: var(--clp-card);
  border-radius: var(--clp-radius);
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.07),
    0 2px 4px -2px rgba(0,0,0,.06),
    0 0 0 1px rgba(0,0,0,.04);
  padding: 2.5rem 2rem;
  animation: clp-fade-in .25s ease;
}

@keyframes clp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Theme / Elementor mode: card wrapper ───────────────────────────── */
/* When rendered in a theme page the plugin doesn't add a card by default
   — the Elementor column/section acts as the container.
   Add class .clp-card to a surrounding Elementor element if you want
   the card shadow, OR the plugin auto-adds .clp-form-wrap which you
   can style freely. */

/* ── Form container ─────────────────────────────────────────────────── */
.clp-form-wrap {
  font-family: var(--clp-font, inherit);
  color: var(--clp-text);
  max-width: 440px;   /* natural width; Elementor column controls outer width */
  margin: 0 auto;
}

/* ── Logo & heading block ───────────────────────────────────────────── */
.clp-form-header {
  margin-bottom: 1.75rem;
}

.clp-logo-wrap {
  text-align: center;
  margin-bottom: 1rem;
}

.clp-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.clp-site-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--clp-text);
  text-align: center;
}

.clp-tagline {
  font-size: .875rem;
  color: var(--clp-muted);
  margin-top: .25rem;
  text-align: center;
}

.clp-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .25rem;
  /* Let Hello Elementor's h2 styles show through in theme mode */
  line-height: 1.3;
}

.clp-subtitle {
  font-size: .875rem;
  color: var(--clp-muted);
  margin: 0 0 1.25rem;
}

/* ── Notices ────────────────────────────────────────────────────────── */
.clp-notice {
  border-radius: var(--clp-input-radius);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.clp-notice--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.clp-notice--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* ── Form layout ────────────────────────────────────────────────────── */
.clp-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.clp-field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.clp-field label {
  font-size: .875rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--clp-text);
  /* reset Hello Elementor label bottom margin */
  margin-bottom: 0;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
/* Explicitly override Elementor's aggressive input resets */
.clp-form-wrap .clp-field input[type="text"],
.clp-form-wrap .clp-field input[type="email"],
.clp-form-wrap .clp-field input[type="password"],
.clp-form-wrap .clp-field input[type="url"] {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--clp-border);
  border-radius: var(--clp-input-radius);
  background: var(--clp-input-bg);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--clp-text);
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
  /* reset Hello Elementor / Elementor form widget overrides */
  -webkit-appearance: none;
  appearance: none;
}

.clp-form-wrap .clp-field input:focus {
  border-color: var(--clp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clp-accent) 18%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .clp-form-wrap .clp-field input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .2);
  }
}

/* ── Forgot password link ───────────────────────────────────────────── */
.clp-forgot {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--clp-accent);
  text-decoration: none;
  margin-left: auto;
}

.clp-forgot:hover { text-decoration: underline; }

/* ── Password visibility toggle ─────────────────────────────────────── */
.clp-password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.clp-password-wrap input {
  padding-right: 2.75rem !important;
}

.clp-toggle-pw {
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: .25rem;
  cursor: pointer;
  color: var(--clp-muted);
  display: flex;
  align-items: center;
  line-height: 1;
  /* override Elementor button styles */
  box-shadow: none !important;
  outline: none;
  width: auto;
  height: auto;
  min-height: unset;
  border-radius: 4px;
}

.clp-toggle-pw:hover { color: var(--clp-text); }
.clp-toggle-pw:focus { box-shadow: 0 0 0 2px var(--clp-accent) !important; }

.clp-toggle-pw svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* ── Password strength ──────────────────────────────────────────────── */
.clp-strength-bar {
  height: 4px;
  background: var(--clp-border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: .375rem;
}

#clp-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .3s ease, background .3s ease;
}

.clp-strength-label {
  font-size: .75rem;
  color: var(--clp-muted);
  margin-top: .2rem;
  min-height: 1em;
}

/* ── Remember-me checkbox ───────────────────────────────────────────── */
.clp-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  cursor: pointer;
  user-select: none;
  color: var(--clp-text);
  /* reset Elementor label */
  font-weight: 400;
  margin: 0;
}

.clp-checkbox input[type="checkbox"] {
  accent-color: var(--clp-accent);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

/* ── Submit button ──────────────────────────────────────────────────── */
/* Use high-specificity selector to win over Elementor's .elementor-button rules */
.clp-form-wrap .clp-btn,
.clp-body .clp-btn {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  background: var(--clp-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--clp-btn-radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  box-shadow: none;
  margin-top: .25rem;
  /* override Hello Elementor button resets */
  letter-spacing: 0;
  min-height: unset;
}

.clp-form-wrap .clp-btn:hover,
.clp-body .clp-btn:hover  { opacity: .9; }
.clp-form-wrap .clp-btn:active,
.clp-body .clp-btn:active { transform: scale(.98); }
.clp-form-wrap .clp-btn:focus,
.clp-body .clp-btn:focus  {
  outline: 3px solid color-mix(in srgb, var(--clp-accent) 35%, transparent);
  outline-offset: 2px;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .clp-form-wrap .clp-btn:focus { outline-color: rgba(79,70,229,.4); }
}

/* ── Switch link (sign in / create account) ─────────────────────────── */
.clp-switch {
  text-align: center;
  font-size: .875rem;
  color: var(--clp-muted);
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.clp-switch a {
  color: var(--clp-accent);
  text-decoration: none;
  font-weight: 600;
}
.clp-switch a:hover { text-decoration: underline; }

/* "Already logged in" shortcode message */
.clp-logged-in {
  font-size: .9375rem;
  color: var(--clp-muted);
}

/* ── Hello Elementor theme specific overrides ───────────────────────── */
/* Hello Elementor resets most browser styles — restore what we need */
.hello-elementor .clp-form-wrap label { margin-bottom: 0; }
.hello-elementor .clp-form-wrap p     { margin-bottom: 0; }
.hello-elementor .clp-title           { color: var(--clp-text); }

/* Elementor widget container resets a:visited colour */
.elementor .clp-forgot,
.elementor .clp-switch a { color: var(--clp-accent); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.clp-standalone .clp-card { padding: 2rem 1.25rem; }
}