/* ============================================================
   ELITE CORE V6 (Gallery A) - SIGN IN MODAL SKIN
   Restyles the ec-auth-modal plugin (div#ecam-backdrop > .ecam-modal,
   injected in wp_footer on every page) to SignInModal.dc.html.
   CSS only: the plugin markup, ids, classes and JS are untouched.
   The plugin enqueues assets/modal.css at wp_enqueue_scripts priority
   100, AFTER this file, so every rule here is anchored on the
   #ecam-backdrop id to out-rank it, and carries !important only where
   modal.css does.
   Copy that lives in the plugin ("Members get 10% off, early restock
   access, and rewards on every order.") is replaced visually by the
   ::before text on .ecam-subtitle; the real string still needs the
   plugin edit.
   ============================================================ */

/* Backdrop */
body.ec-v6 #ecam-backdrop{
  background:rgba(10,10,10,.5);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:24px;
  font-family:var(--ec-font-body,'Inter',sans-serif);
  color:var(--ec-ink,#0A0A0A);
}
body.ec-v6 #ecam-backdrop.is-open{animation:ecamFadeIn .2s ease}

/* Dialog */
body.ec-v6 #ecam-backdrop .ecam-modal{
  max-width:480px;width:100%;box-sizing:border-box;
  padding:36px;border:0;border-radius:28px;
  background:var(--ec-card,#FFFFFF);color:var(--ec-ink,#0A0A0A);
  box-shadow:0 30px 80px rgba(10,10,10,.28),0 2px 6px rgba(10,10,10,.08);
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:15px;line-height:1.5;
}
body.ec-v6 #ecam-backdrop .ecam-modal *{box-sizing:border-box}

/* Close */
body.ec-v6 #ecam-backdrop .ecam-close{
  top:20px;right:20px;width:44px;height:44px;padding:0;
  border:1px solid var(--ec-border,#E8E4DC);border-radius:999px;background:var(--ec-card,#FFFFFF);
  color:var(--ec-ink,#0A0A0A);display:grid;place-items:center;transition:background .2s ease;z-index:2;
}
body.ec-v6 #ecam-backdrop .ecam-close:hover,
body.ec-v6 #ecam-backdrop .ecam-close:focus-visible{background:var(--ec-cream,#F7F5F0);color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-close:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}
body.ec-v6 #ecam-backdrop .ecam-close svg{width:18px;height:18px}

/* Product strip (add-to-cart mode) */
body.ec-v6 #ecam-backdrop .ecam-product-strip{
  gap:12px;padding:10px 12px;margin:0 44px 18px 0;
  background:var(--ec-cream,#F7F5F0);border:0;border-radius:12px;
}
body.ec-v6 #ecam-backdrop .ecam-product-img{width:48px;height:48px;border:0;border-radius:8px;background:var(--ec-card,#FFFFFF);object-fit:contain}
body.ec-v6 #ecam-backdrop .ecam-product-img-fallback{background:var(--ec-card,#FFFFFF)}
body.ec-v6 #ecam-backdrop .ecam-product-name{font-size:14px;font-weight:600;color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-product-price{font-size:13px;color:var(--ec-muted,#6B6B6B)}

/* Header: eyebrow (::before), title, subtitle, points pill (::after) */
body.ec-v6 #ecam-backdrop .ecam-header,
body.ec-v6 #ecam-backdrop .ecam-modal.is-auth-mode .ecam-header{margin:0 0 24px;display:flex;flex-direction:column}
body.ec-v6 #ecam-backdrop .ecam-header::before{
  content:"Member sign in";display:flex;align-items:center;order:-1;min-height:24px;margin:0 0 14px;padding-left:48px;
  background:linear-gradient(var(--ec-gold,#C9A961),var(--ec-gold,#C9A961)) 0 50% / 36px 2px no-repeat;
  font-size:12px;font-weight:700;letter-spacing:.22em;line-height:1.6;text-transform:uppercase;color:var(--ec-ink,#0A0A0A);
}
body.ec-v6 #ecam-backdrop .ecam-title{
  font-family:var(--ec-font-display,'Plus Jakarta Sans',sans-serif) !important;font-size:32px !important;font-weight:700 !important;
  line-height:1.1 !important;letter-spacing:-.02em;color:var(--ec-ink,#0A0A0A) !important;margin:0 0 10px !important;padding-right:44px;
}
body.ec-v6 #ecam-backdrop .ecam-subtitle{
  position:relative;visibility:hidden;margin:0;font-size:0;line-height:0;color:var(--ec-muted,#6B6B6B);
}
body.ec-v6 #ecam-backdrop .ecam-subtitle::before{
  content:"Get 500 welcome points, early restock access, and rewards on every order.";
  visibility:visible;display:block;font-size:15px;line-height:1.55;color:var(--ec-muted,#6B6B6B);
}
body.ec-v6 #ecam-backdrop .ecam-header::after{
  content:"Earn 5 points for every $1 spent";display:flex;align-items:center;margin:16px 0 0;padding:10px 14px 10px 36px;
  background:radial-gradient(circle at 18px 50%,var(--ec-gold,#C9A961) 4px,transparent 4.6px) var(--ec-cream,#F7F5F0);
  border-radius:12px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ec-ink,#0A0A0A);
}

/* Google */
body.ec-v6 #ecam-backdrop .ecam-social{margin:0}
body.ec-v6 #ecam-backdrop .ecam-google-btn,
body.ec-v6 #ecam-backdrop .ecam-google-btn:hover{
  height:50px;padding:0 16px;gap:12px;
  background:var(--ec-card,#FFFFFF);color:var(--ec-ink,#0A0A0A);
  border:1px solid var(--ec-border,#E8E4DC);border-radius:999px;
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:15px;font-weight:600;text-decoration:none;
  transition:border-color .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-google-btn:hover,
body.ec-v6 #ecam-backdrop .ecam-google-btn:focus-visible{border-color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-google-btn:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}

/* Divider */
body.ec-v6 #ecam-backdrop .ecam-divider{
  gap:14px;margin:18px 0;color:var(--ec-muted,#6B6B6B);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
body.ec-v6 #ecam-backdrop .ecam-divider::before,
body.ec-v6 #ecam-backdrop .ecam-divider::after{background:var(--ec-border,#E8E4DC)}

/* Phone / Email toggle */
body.ec-v6 #ecam-backdrop .ecam-tabs{
  display:flex;gap:4px;padding:4px;margin:0 0 14px;
  background:var(--ec-cream,#F7F5F0);border:0;border-radius:999px;
}
body.ec-v6 #ecam-backdrop .ecam-tab{
  flex:1;height:44px;padding:0 12px;gap:8px;
  border:1px solid transparent;border-radius:999px;background:transparent;box-shadow:none;
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:14px;font-weight:600;color:var(--ec-muted,#6B6B6B);
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-tab:hover{color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-tab.is-active{
  background:var(--ec-card,#FFFFFF);color:var(--ec-ink,#0A0A0A);border-color:var(--ec-border,#E8E4DC);
  font-weight:600;box-shadow:0 4px 12px rgba(10,10,10,.06);
}
body.ec-v6 #ecam-backdrop .ecam-tab:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}
body.ec-v6 #ecam-backdrop .ecam-tab svg{width:16px;height:16px;stroke-width:1.8}

/* Fields */
body.ec-v6 #ecam-backdrop .ecam-form{gap:14px}
body.ec-v6 #ecam-backdrop .ecam-field{gap:6px}
body.ec-v6 #ecam-backdrop .ecam-field label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ec-ink,#0A0A0A);line-height:1.4}
body.ec-v6 #ecam-backdrop .ecam-field input,
body.ec-v6 #ecam-backdrop .ecam-phone-cc{
  height:52px;padding:0 16px;
  border:1px solid var(--ec-border,#E8E4DC);border-radius:14px;background:var(--ec-paper,#FAFAF8);
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:15px;color:var(--ec-ink,#0A0A0A);box-shadow:none;
  transition:border-color .2s ease,background .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-field input:focus,
body.ec-v6 #ecam-backdrop .ecam-phone-cc:focus{outline:0;border-color:var(--ec-ink,#0A0A0A);background:var(--ec-card,#FFFFFF);box-shadow:none}
body.ec-v6 #ecam-backdrop .ecam-field input:focus-visible,
body.ec-v6 #ecam-backdrop .ecam-phone-cc:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}
body.ec-v6 #ecam-backdrop .ecam-field input::placeholder{color:var(--ec-muted,#6B6B6B);opacity:1}
body.ec-v6 #ecam-backdrop .ecam-phone-wrap{gap:8px}
body.ec-v6 #ecam-backdrop .ecam-phone-cc{
  width:112px;padding-right:34px;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
body.ec-v6 #ecam-backdrop .ecam-password-wrap input{padding-right:44px}
body.ec-v6 #ecam-backdrop .ecam-password-toggle{right:10px;color:var(--ec-muted,#6B6B6B);border-radius:50%}
body.ec-v6 #ecam-backdrop .ecam-password-toggle:hover{color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-forgot{
  align-self:flex-end;min-height:24px;margin:2px 0 0;display:inline-flex;align-items:center;
  font-size:13px;font-weight:600;color:var(--ec-ink,#0A0A0A);text-decoration:underline;text-underline-offset:3px;
}
body.ec-v6 #ecam-backdrop .ecam-forgot:hover{color:var(--ec-muted,#6B6B6B);text-decoration:underline}

/* Create Account / Sign In switch */
body.ec-v6 #ecam-backdrop .ecam-subtabs{
  display:flex;justify-content:center;gap:4px;margin:0 0 14px;padding:4px;
  border:0;border-bottom:0;background:var(--ec-cream,#F7F5F0);border-radius:999px;
}
body.ec-v6 #ecam-backdrop .ecam-subtab{
  flex:1;height:40px;padding:0 12px;margin:0;border:1px solid transparent;border-bottom:1px solid transparent;border-radius:999px;background:transparent;
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:13px;font-weight:600;color:var(--ec-muted,#6B6B6B);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-subtab:hover{color:var(--ec-ink,#0A0A0A)}
body.ec-v6 #ecam-backdrop .ecam-subtab.is-active{
  color:var(--ec-ink,#0A0A0A);background:var(--ec-card,#FFFFFF);border-color:var(--ec-border,#E8E4DC);border-bottom-color:var(--ec-border,#E8E4DC);
  box-shadow:0 4px 12px rgba(10,10,10,.06);
}
body.ec-v6 #ecam-backdrop .ecam-subtab:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}

/* Submit */
body.ec-v6 #ecam-backdrop .ecam-submit{
  height:54px;padding:0 24px;margin:0;gap:10px;
  border:0;border-radius:999px;background:var(--ec-ink,#0A0A0A);color:var(--ec-paper,#FAFAF8);
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:15px;font-weight:600;letter-spacing:0;
  transition:box-shadow .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-submit:hover{background:var(--ec-ink,#0A0A0A);box-shadow:0 10px 30px rgba(10,10,10,.18)}
body.ec-v6 #ecam-backdrop .ecam-submit:active{transform:none}
body.ec-v6 #ecam-backdrop .ecam-submit:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:3px}
body.ec-v6 #ecam-backdrop .ecam-submit:disabled{opacity:.55}
body.ec-v6 #ecam-backdrop .ecam-gold-arrow{color:var(--ec-gold,#C9A961);font-weight:600}

/* Legal */
body.ec-v6 #ecam-backdrop .ecam-legal{margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--ec-muted,#6B6B6B)}
body.ec-v6 #ecam-backdrop .ecam-legal a{color:var(--ec-ink,#0A0A0A);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body.ec-v6 #ecam-backdrop .ecam-legal a:hover{color:var(--ec-muted,#6B6B6B)}

/* One-time code step */
body.ec-v6 #ecam-backdrop .ecam-otp-back{
  min-height:44px;margin:-12px 0 6px -8px;padding:0 10px 0 8px;gap:8px;
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:14px;font-weight:600;color:var(--ec-ink,#0A0A0A);
}
body.ec-v6 #ecam-backdrop .ecam-otp-back:hover{color:var(--ec-muted,#6B6B6B)}
body.ec-v6 #ecam-backdrop .ecam-otp-back svg{width:16px;height:16px;stroke:var(--ec-gold,#C9A961)}
body.ec-v6 #ecam-backdrop #ecam-otp .ecam-field{gap:10px}
body.ec-v6 #ecam-backdrop #ecam-otp .ecam-field > label{
  padding-right:44px;margin:0 0 4px;
  font-family:var(--ec-font-display,'Plus Jakarta Sans',sans-serif);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ec-ink,#0A0A0A);
}
body.ec-v6 #ecam-backdrop #ecam-otp .ecam-field > label::before{
  content:"One-time code";display:flex;align-items:center;min-height:24px;margin:0 0 14px;padding-left:48px;
  background:linear-gradient(var(--ec-gold,#C9A961),var(--ec-gold,#C9A961)) 0 50% / 36px 2px no-repeat;
  font-family:var(--ec-font-body,'Inter',sans-serif);font-size:12px;font-weight:700;letter-spacing:.22em;line-height:1.6;text-transform:uppercase;color:var(--ec-ink,#0A0A0A);
}
body.ec-v6 #ecam-backdrop .ecam-otp-meta{margin:0;font-size:15px;line-height:1.55;color:var(--ec-muted,#6B6B6B)}
body.ec-v6 #ecam-backdrop .ecam-otp-meta strong{color:var(--ec-ink,#0A0A0A);font-weight:600}
body.ec-v6 #ecam-backdrop .ecam-otp-meta a{color:var(--ec-ink,#0A0A0A);font-weight:600;text-decoration:underline;text-underline-offset:4px}
body.ec-v6 #ecam-backdrop .ecam-otp-meta a:hover{color:var(--ec-muted,#6B6B6B)}
body.ec-v6 #ecam-backdrop #ecam-otp-mode-note{margin:4px 0 8px;font-size:13px;color:var(--ec-muted,#6B6B6B);text-align:left}
body.ec-v6 #ecam-backdrop .ecam-otp-inputs{justify-content:space-between;gap:10px;margin:14px 0 12px}
body.ec-v6 #ecam-backdrop .ecam-otp-inputs input{
  flex:1 1 0;width:auto;min-width:0;max-width:52px;height:52px;padding:0;
  border:1px solid var(--ec-border,#E8E4DC);border-radius:12px;background:var(--ec-paper,#FAFAF8);
  font-family:var(--ec-font-display,'Plus Jakarta Sans',sans-serif);font-size:22px;font-weight:700;color:var(--ec-ink,#0A0A0A);text-align:center;
  transition:border-color .2s ease,background .2s ease;
}
body.ec-v6 #ecam-backdrop .ecam-otp-inputs input:focus{border-color:var(--ec-ink,#0A0A0A);background:var(--ec-card,#FFFFFF);box-shadow:none}
body.ec-v6 #ecam-backdrop .ecam-otp-inputs input:focus-visible{outline:2px solid var(--ec-gold,#C9A961);outline-offset:2px}
body.ec-v6 #ecam-backdrop #ecam-otp .ecam-submit{margin-top:10px}

/* Loading */
body.ec-v6 #ecam-backdrop .ecam-loading{padding:40px 20px}
body.ec-v6 #ecam-backdrop .ecam-spinner{width:44px;height:44px;border:3px solid var(--ec-cream,#F7F5F0);border-top-color:var(--ec-gold,#C9A961)}
body.ec-v6 #ecam-backdrop .ecam-loading-text{font-size:14px;color:var(--ec-muted,#6B6B6B)}

/* Errors */
body.ec-v6 #ecam-backdrop .ecam-error{
  padding:10px 14px;border:1px solid var(--ec-border,#E8E4DC);border-left:3px solid var(--ec-gold,#C9A961);border-radius:12px;
  background:var(--ec-cream,#F7F5F0);color:var(--ec-ink,#0A0A0A);font-size:13px;line-height:1.5;
}
body.ec-v6 #ecam-backdrop .ecam-error a{color:var(--ec-ink,#0A0A0A);font-weight:600;text-decoration:underline}

/* The plugin keeps .ecam-header above every step. The one-time code step carries its
   own eyebrow and title (above), so the header is hidden while #ecam-main is, which
   also covers the loading state. Progressive: browsers without :has() keep both. */
body.ec-v6 #ecam-backdrop .ecam-header:has(+ #ecam-main[hidden]){display:none}

/* The plugin's own hidden rule must keep winning */
body.ec-v6 #ecam-backdrop [hidden],
body.ec-v6 #ecam-backdrop .ecam-modal [hidden]{display:none !important}

/* Phones */
@media (max-width: 500px){
  body.ec-v6 #ecam-backdrop{padding:12px}
  body.ec-v6 #ecam-backdrop .ecam-modal{padding:28px 20px;border-radius:24px;max-height:94vh}
  body.ec-v6 #ecam-backdrop .ecam-close{top:14px;right:14px}
  body.ec-v6 #ecam-backdrop .ecam-title{font-size:28px !important}
  body.ec-v6 #ecam-backdrop #ecam-otp .ecam-field > label{font-size:24px}
  body.ec-v6 #ecam-backdrop .ecam-otp-inputs{gap:8px}
  body.ec-v6 #ecam-backdrop .ecam-otp-inputs input{height:48px;font-size:20px}
  body.ec-v6 #ecam-backdrop .ecam-phone-cc{width:100px;padding-left:12px}
}

@media (prefers-reduced-motion: reduce){
  body.ec-v6 #ecam-backdrop.is-open,
  body.ec-v6 #ecam-backdrop .ecam-modal{animation:none !important}
  body.ec-v6 #ecam-backdrop .ecam-spinner{animation-duration:1.6s}
}