/* OPD Login & Register UX (mobile-first, styling only)
   Design rules:
   - Gold = primary actions
   - Red = errors / warnings
   - Green + lock icon = security / success
*/

body.opd-auth-ux {
  --opd-gold: #d4af37;
  --opd-gold-2: #b9922a;
  --opd-red: #d32f2f;
  --opd-green: #2e7d32;
  --opd-bg: #0f1115;
  --opd-panel: rgba(255,255,255,0.06);
  --opd-border: rgba(255,255,255,0.12);
  --opd-text: rgba(255,255,255,0.92);
  --opd-muted: rgba(255,255,255,0.70);
  --opd-radius: 16px;
  --opd-radius-sm: 12px;
  --opd-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Keep layout: only polish the existing WooCommerce account forms */
body.opd-auth-ux .woocommerce .u-columns {
  gap: 14px;
}

body.opd-auth-ux .woocommerce form.login,
body.opd-auth-ux .woocommerce form.register {
  background: var(--opd-panel);
  border: 1px solid var(--opd-border);
  border-radius: var(--opd-radius);
  box-shadow: var(--opd-shadow);
  padding: 14px;
}

/* Headings (if present in theme template) */
body.opd-auth-ux .woocommerce .u-column1 h2,
body.opd-auth-ux .woocommerce .u-column2 h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.25;
}

/* Fields */
body.opd-auth-ux .woocommerce form.login .form-row,
body.opd-auth-ux .woocommerce form.register .form-row {
  margin-bottom: 10px;
}

body.opd-auth-ux .woocommerce form.login label,
body.opd-auth-ux .woocommerce form.register label {
  font-weight: 600;
  font-size: 13px;
  color: var(--opd-muted);
  margin-bottom: 6px;
  display: inline-block;
}

body.opd-auth-ux .woocommerce form.login input[type="text"],
body.opd-auth-ux .woocommerce form.login input[type="password"],
body.opd-auth-ux .woocommerce form.login input[type="email"],
body.opd-auth-ux .woocommerce form.register input[type="text"],
body.opd-auth-ux .woocommerce form.register input[type="password"],
body.opd-auth-ux .woocommerce form.register input[type="email"] {
  width: 100%;
  border-radius: var(--opd-radius-sm);
  border: 1px solid var(--opd-border);
  background: rgba(0,0,0,0.22);
  color: var(--opd-text);
  padding: 12px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.opd-auth-ux .woocommerce form.login input:focus,
body.opd-auth-ux .woocommerce form.register input:focus {
  border-color: rgba(212,175,55,0.65);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.20);
}

/* Primary buttons => gold */
body.opd-auth-ux .woocommerce form.login button.button,
body.opd-auth-ux .woocommerce form.register button.button,
body.opd-auth-ux .woocommerce form.login input[type="submit"],
body.opd-auth-ux .woocommerce form.register input[type="submit"] {
  width: 100%;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(0,0,0,0.20);
  background: linear-gradient(180deg, var(--opd-gold) 0%, var(--opd-gold-2) 100%);
  color: #111;
  box-shadow: 0 8px 18px rgba(212,175,55,0.20);
}

body.opd-auth-ux .woocommerce form.login button.button:hover,
body.opd-auth-ux .woocommerce form.register button.button:hover {
  filter: brightness(1.03);
}

body.opd-auth-ux .woocommerce form.login button.button:active,
body.opd-auth-ux .woocommerce form.register button.button:active {
  transform: translateY(1px);
}

/* Remember me alignment */
body.opd-auth-ux .woocommerce form.login .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--opd-muted);
  user-select: none;
}

body.opd-auth-ux .woocommerce form.login input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--opd-gold);
}

/* Helper block */
body.opd-auth-ux .opd-auth-helpers {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

body.opd-auth-ux a.opd-auth-link {
  color: var(--opd-gold);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.10);
}

body.opd-auth-ux a.opd-auth-link:hover {
  background: rgba(212,175,55,0.14);
}

/* Secure badge (green + lock) */
body.opd-auth-ux .opd-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(46,125,50,0.30);
  background: rgba(46,125,50,0.12);
  color: rgba(255,255,255,0.90);
}

body.opd-auth-ux .opd-secure-badge .opd-lock {
  fill: var(--opd-green);
  flex: 0 0 auto;
}

body.opd-auth-ux .opd-secure-badge span {
  font-size: 13px;
  line-height: 1.35;
}

/* WooCommerce notices (errors => red, success => green). */
body.opd-auth-ux .woocommerce-error,
body.opd-auth-ux .woocommerce-message,
body.opd-auth-ux .woocommerce-info {
  border-radius: var(--opd-radius);
  padding: 12px 12px;
  margin-bottom: 12px;
  box-shadow: var(--opd-shadow);
}

body.opd-auth-ux .woocommerce-error {
  border: 1px solid rgba(211,47,47,0.35);
  background: rgba(211,47,47,0.14);
  color: rgba(255,255,255,0.92);
}

body.opd-auth-ux .woocommerce-message {
  border: 1px solid rgba(46,125,50,0.35);
  background: rgba(46,125,50,0.14);
  color: rgba(255,255,255,0.92);
}

body.opd-auth-ux .woocommerce-info {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
}

/* Make notice text fully red (per your rule) */
body.opd-auth-ux .woocommerce-error li,
body.opd-auth-ux .woocommerce-error,
body.opd-auth-ux .woocommerce-error a {
  color: rgba(255,255,255,0.92);
}

body.opd-auth-ux .woocommerce-error a {
  text-decoration: underline;
}

/* Slightly improve spacing on narrow screens */
@media (max-width: 480px) {
  body.opd-auth-ux .woocommerce form.login,
  body.opd-auth-ux .woocommerce form.register {
    padding: 12px;
  }
}

/* Visibility fixes: required asterisks + secure badge text */
body.opd-auth-ux .woocommerce span.required,
body.opd-auth-ux .woocommerce .required {
  color: var(--opd-red) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Secure badge: make text readable on light backgrounds */
body.opd-auth-ux .opd-secure-badge {
  border: 1px solid rgba(46,125,50,0.50);
  background: rgba(46,125,50,0.16);
}

body.opd-auth-ux .opd-secure-badge span {
  color: rgba(11, 46, 18, 0.96);
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  body.opd-auth-ux .opd-secure-badge span {
    color: rgba(255,255,255,0.92);
  }
}

/* v1.0.2 - Readability upgrades (no layout changes) */

/* Inputs: improve typing contrast on light pages */
body.opd-auth-ux .woocommerce form.login input[type="text"],
body.opd-auth-ux .woocommerce form.login input[type="password"],
body.opd-auth-ux .woocommerce form.login input[type="email"],
body.opd-auth-ux .woocommerce form.register input[type="text"],
body.opd-auth-ux .woocommerce form.register input[type="password"],
body.opd-auth-ux .woocommerce form.register input[type="email"]{
  background: rgba(255,255,255,0.96) !important;
  color: #121212 !important;
  border-color: rgba(0,0,0,0.14) !important;
}

body.opd-auth-ux .woocommerce form.login input::placeholder,
body.opd-auth-ux .woocommerce form.register input::placeholder{
  color: rgba(0,0,0,0.45) !important;
}

/* Keep gold focus ring */
body.opd-auth-ux .woocommerce form.login input:focus,
body.opd-auth-ux .woocommerce form.register input:focus{
  border-color: rgba(212,175,55,0.75) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.22) !important;
}

/* Required markers: catch all common Woo patterns */
body.opd-auth-ux .woocommerce span.required,
body.opd-auth-ux .woocommerce .required,
body.opd-auth-ux .woocommerce abbr.required,
body.opd-auth-ux .woocommerce label .required,
body.opd-auth-ux .woocommerce label span.required{
  color: var(--opd-red) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Secure badge: green lock + green text, no border box */
body.opd-auth-ux .opd-secure-badge{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}

body.opd-auth-ux .opd-secure-badge .opd-lock{
  fill: var(--opd-green) !important;
}

body.opd-auth-ux .opd-secure-badge span{
  color: rgba(46,125,50,0.96) !important;
  font-weight: 800 !important;
}

/* In dark color scheme, keep it readable too */
@media (prefers-color-scheme: dark){
  body.opd-auth-ux .opd-secure-badge span{
    color: rgba(170, 255, 200, 0.92) !important;
  }
}

/* v1.0.3 - Remove green helper texts + force label visibility/readability */

/* Some themes hide labels on My Account login/register. Force them visible and readable. */
body.opd-auth-ux .woocommerce form.login .form-row label,
body.opd-auth-ux .woocommerce form.register .form-row label,
body.opd-auth-ux .woocommerce form.login .woocommerce-form-row label,
body.opd-auth-ux .woocommerce form.register .woocommerce-form-row label{
  display: block !important;
  color: #111 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* Keep required asterisk red */
body.opd-auth-ux .woocommerce label .required,
body.opd-auth-ux .woocommerce label span.required,
body.opd-auth-ux .woocommerce abbr.required{
  color: var(--opd-red) !important;
}

/* If a theme outputs only '*' on a separate line, make it align with label */
body.opd-auth-ux .woocommerce .form-row .required{
  margin-left: 4px;
}

/* v1.0.4 - Hide page title + label visibility fixes */
body.opd-auth-ux.woocommerce-account .entry-title,
body.opd-auth-ux.woocommerce-account h1,
body.opd-auth-ux.woocommerce-account .page-title{
  display: none !important;
}

/* If theme uses screen-reader-text for labels, make them visible inside auth forms */
body.opd-auth-ux .woocommerce form.login .screen-reader-text,
body.opd-auth-ux .woocommerce form.register .screen-reader-text{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Make sure label text is not overridden to muted/white */
body.opd-auth-ux .woocommerce form.login label,
body.opd-auth-ux .woocommerce form.register label{
  color: #111 !important;
}

/* v1.0.5 - Remove "Required" label text + strengthen label typography */
body.opd-auth-ux .woocommerce form.login label,
body.opd-auth-ux .woocommerce form.register label,
body.opd-auth-ux .woocommerce form.login .screen-reader-text,
body.opd-auth-ux .woocommerce form.register .screen-reader-text{
  font-weight: 800 !important;
}

/* In case theme outputs a separate element for Required text */
body.opd-auth-ux .woocommerce form.login label .required:not(.-keep),
body.opd-auth-ux .woocommerce form.register label .required:not(.-keep),
body.opd-auth-ux .woocommerce form.login label abbr.required,
body.opd-auth-ux .woocommerce form.register label abbr.required{
  text-transform: none !important;
}

/* v1.0.6 - Force-remove helper sentence + hide any "Required" helper nodes */
body.opd-auth-ux .woocommerce form.login .woocommerce-password-hint,
body.opd-auth-ux .woocommerce form.register .woocommerce-password-hint,
body.opd-auth-ux .woocommerce form.login .description,
body.opd-auth-ux .woocommerce form.register .description{
  display: none !important;
}

/* Some themes output a separate .required label text node; if wrapped, hide it (we keep the red asterisk styles elsewhere) */
body.opd-auth-ux .woocommerce form.login label abbr.required,
body.opd-auth-ux .woocommerce form.register label abbr.required,
body.opd-auth-ux .woocommerce form.login label span.required,
body.opd-auth-ux .woocommerce form.register label span.required{
  font-style: normal !important;
}


/* v1.1.4 – Force required asterisks + Woo notices text to RED (high specificity) */

/* Required markers (Woo uses abbr.required or span.required; some themes style label * directly) */
body.opd-auth-ux .woocommerce form .form-row label .required,
body.opd-auth-ux .woocommerce form .woocommerce-form-row label .required,
body.opd-auth-ux .woocommerce form .form-row label abbr.required,
body.opd-auth-ux .woocommerce form .woocommerce-form-row label abbr.required,
body.opd-auth-ux .woocommerce form .form-row label span.required,
body.opd-auth-ux .woocommerce form .woocommerce-form-row label span.required,
body.opd-auth-ux .woocommerce form .form-row label .opd-asterisk,
body.opd-auth-ux .woocommerce form .woocommerce-form-row label .opd-asterisk {
  color: #d32f2f !important;
  font-weight: 800 !important;
}

/* If theme renders a raw '*' next to label (rare), at least make the label-required part red by targeting abbr/span above. */

/* Error/notice text must be red (some themes force white text on notices) */
body.opd-auth-ux .woocommerce-error,
body.opd-auth-ux .woocommerce-error li,
body.opd-auth-ux .woocommerce-error a,
body.opd-auth-ux .woocommerce-error strong,
body.opd-auth-ux .woocommerce-error span,
body.opd-auth-ux .woocommerce-notices-wrapper .woocommerce-error,
body.opd-auth-ux .woocommerce-notices-wrapper .woocommerce-error * {
  color: #d32f2f !important;
  text-shadow: none !important;
}

/* Also cover Woo "notice" wrapper that some themes convert into a generic .woocommerce-message/.woocommerce-info layout */
body.opd-auth-ux .woocommerce-notice,
body.opd-auth-ux .woocommerce-notice * ,
body.opd-auth-ux .woocommerce-info,
body.opd-auth-ux .woocommerce-info * ,
body.opd-auth-ux .woocommerce-message,
body.opd-auth-ux .woocommerce-message * {
  color: #d32f2f !important;
}

/* Keep backgrounds/borders as theme defines; user asked only for red text */


/* v1.1.5 – Required asterisks (raw '*') + Woo error icon alignment */
body.opd-auth-ux .opd-asterisk{
  color:#d32f2f !important;
  font-weight:900 !important;
}

/* Align WooCommerce error notice icon so it doesn't overlap text */
body.opd-auth-ux .woocommerce-error{
  display:flex;
  align-items:center;
  gap:10px;
}
body.opd-auth-ux .woocommerce-error:before{
  position:static !important;
  margin:0 !important;
  flex:0 0 auto;
  line-height:1 !important;
}
body.opd-auth-ux .woocommerce-error li{
  margin:0 !important;
}


/* v1.1.6 - reset-flow polish only: success/info notices + reset form */
body.opd-auth-ux .opd-auth-notice-stack {
  display: grid;
  gap: 12px;
  margin: 0 0 16px 0;
}

body.opd-auth-ux .woocommerce-message,
body.opd-auth-ux .woocommerce-info {
  position: relative;
  padding: 16px 18px 16px 54px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  margin: 0;
}

body.opd-auth-ux .woocommerce-message {
  border: 1px solid #7fb06d;
  background: #eef6e8;
  color: #1e2b1d !important;
}

body.opd-auth-ux .woocommerce-info {
  border: 1px solid #e5d09b;
  background: #f9f2e2;
  color: #3a3120 !important;
}

body.opd-auth-ux .woocommerce-message::before,
body.opd-auth-ux .woocommerce-info::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
}

body.opd-auth-ux .woocommerce-message::before {
  background: #79a867;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

body.opd-auth-ux .woocommerce-message::after {
  content: '✓';
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

body.opd-auth-ux .woocommerce-info::before {
  background: #f1ddb0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

body.opd-auth-ux .woocommerce-info::after {
  content: '🔒';
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-53%);
  font-size: 15px;
  line-height: 1;
}

body.opd-auth-ux .woocommerce-message,
body.opd-auth-ux .woocommerce-message *,
body.opd-auth-ux .woocommerce-info,
body.opd-auth-ux .woocommerce-info * {
  color: inherit !important;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword {
  margin-top: 4px;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword > p:first-child {
  margin: 0 0 18px 0;
}

body.opd-auth-ux .opd-reset-title {
  display: block;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #111;
  margin: 0 0 10px 0;
}

body.opd-auth-ux .opd-reset-helper {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .woocommerce-form-row {
  margin-bottom: 16px;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword label {
  display: inline-block;
  margin-bottom: 8px;
  color: #222;
  font-size: 13px;
  font-weight: 700;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword input[type="password"],
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 14px 48px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.22);
  background: #fff !important;
  color: #111 !important;
  box-shadow: none;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .show-password-input,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .password-input .show-password-input {
  right: 14px;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .woocommerce-password-strength,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .woocommerce-password-hint {
  display: none !important;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword button.button,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword input[type="submit"] {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(180deg, #f1d78c 0%, #e8c96c 100%);
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: none;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword button.button:disabled,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword input[type="submit"]:disabled {
  opacity: .55;
}

@media (max-width: 480px) {
  body.opd-auth-ux .woocommerce-message,
  body.opd-auth-ux .woocommerce-info {
    border-radius: 20px;
    padding: 15px 16px 15px 50px;
  }

  body.opd-auth-ux .opd-reset-title {
    font-size: 22px;
  }
}

/* v1.1.7 - safe custom top notices (do not move native Woo blocks) */
body.opd-auth-ux .opd-auth-source-notice {
  display: none !important;
}

body.opd-auth-ux .opd-auth-notice-stack {
  display: grid;
  gap: 12px;
  margin: 0 0 16px 0;
  position: relative;
  z-index: 2;
}

body.opd-auth-ux .opd-auth-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  pointer-events: auto;
}

body.opd-auth-ux .opd-auth-notice__icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}

body.opd-auth-ux .opd-auth-notice__text {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

body.opd-auth-ux .opd-auth-notice--success {
  border: 1px solid #7fb06d;
  background: #eef6e8;
  color: #1e2b1d !important;
}

body.opd-auth-ux .opd-auth-notice--success .opd-auth-notice__icon {
  background: #79a867;
  color: #fff;
}

body.opd-auth-ux .opd-auth-notice--info {
  border: 1px solid #e5d09b;
  background: #f9f2e2;
  color: #3a3120 !important;
}

body.opd-auth-ux .opd-auth-notice--info .opd-auth-notice__icon {
  background: #f1ddb0;
  color: #7a6030;
}

body.opd-auth-ux.opd-reset-flow .opd-auth-notice-stack {
  margin-top: 8px;
}

body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword button.button,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword .woocommerce-Button,
body.opd-auth-ux.opd-reset-flow .woocommerce-ResetPassword input[type="submit"] {
  width: 100%;
  min-height: 52px;
}

@media (max-width: 480px) {
  body.opd-auth-ux .opd-auth-notice {
    border-radius: 20px;
    padding: 15px 16px;
  }
}


/* v1.1.8 - top notice portal before account header */
body.opd-auth-ux .opd-auth-notice-portal {
  width: 100%;
  position: relative;
  z-index: 30;
}

body.opd-auth-ux .opd-auth-notice-portal .opd-auth-notice-stack {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px 0;
  box-sizing: border-box;
  margin: 0;
}

@media (min-width: 768px) {
  body.opd-auth-ux .opd-auth-notice-portal .opd-auth-notice-stack {
    padding-left: 20px;
    padding-right: 20px;
  }
}