/*
Theme Name: Woo Ads Manager — Early Access
Description: Single-page early-access signup site for Woo Ads Manager (WCUS beta).
Version: 1.0.0
Author: Ads Engineering
Text Domain: woo-ads-manager
*/

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Vara";
  src: url("assets/fonts/ProximaVara.woff2") format("woff2-variations"),
       url("assets/fonts/ProximaVara.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01";
  color: #1d2327;
  -webkit-font-smoothing: antialiased;
}
a { color: #720EEC; text-decoration: none; }
a:hover { color: #5007AA; }
input::placeholder { color: #a7aaad; }
a, button, input { -webkit-tap-highlight-color: rgba(114, 14, 236, .12); }

.wam-page { min-height: 100vh; background: #fff; }
.wam-container { max-width: 560px; margin: 0 auto; padding: 0 22px; }

.wam-display {
  font-family: "Proxima Vara", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Header / hero ---------- */
.wam-header { position: relative; overflow: hidden; background: #2C045D; padding: 0 0 34px; }
.wam-header .wam-container { position: relative; }

.wam-wooble { position: absolute; pointer-events: none; }
.wam-wooble--1 { display: none; width: 700px; height: 502px; top: -186px; right: -330px; opacity: .75; }
.wam-wooble--2 { display: none; width: 430px; height: 308px; top: -84px; right: -150px; opacity: .55; }
.wam-wooble--3 { display: none; width: 560px; height: 402px; bottom: -220px; left: -220px; opacity: .3; }
.wam-wooble--4 { display: block; width: 760px; height: 545px; bottom: -352px; left: auto; right: -318px; opacity: .1; }
.wam-scrim { position: absolute; inset: 0; pointer-events: none; background: none; }

@media (min-width: 640px) {
  .wam-wooble--1, .wam-wooble--2, .wam-wooble--3 { display: block; }
  .wam-wooble--4 { display: none; }
  .wam-scrim {
    background: linear-gradient(180deg, rgba(44,4,93,0) 0%, rgba(44,4,93,0.3) 34%, rgba(44,4,93,0.75) 66%, #2C045D 100%);
  }
}

.wam-brand { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 18px 0 0; width: fit-content; text-decoration: none; }
.wam-brand img { height: 19px; width: auto; display: block; flex: none; }
.wam-brand__sep { width: 1px; height: 18px; background: rgba(255,255,255,0.28); flex: none; }
.wam-brand__name { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,0.86); white-space: nowrap; flex: none; }

.wam-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 38px; }

.wam-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #D1C1FF; border: 1px solid rgba(209,193,255,0.35); border-radius: 999px;
  padding: 5px 13px 5px 11px; white-space: nowrap;
}
.wam-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #D1C1FF; display: block; flex: none; }

.wam-hero__title {
  font-weight: 700;
  font-size: clamp(31px, 8.4vw, 40px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: pretty;
}
.wam-hero__title em { font-style: normal; color: #D1C1FF; }

/* ---------- Buttons ---------- */
.wam-btn {
  display: block; width: 100%; text-align: center;
  font-family: "Proxima Vara", -apple-system, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  padding: 16px 20px; border: none; border-radius: 10px; cursor: pointer;
  transition: background 120ms ease-out;
}
.wam-btn--light { margin-top: 4px; background: #fff; color: #2C045D; }
.wam-btn--light:hover { background: #D1C1FF; color: #2C045D; }
.wam-btn--primary { background: #720EEC; color: #fff; }
.wam-btn--primary:hover { background: #5007AA; color: #fff; }
.wam-btn--primary:active { background: #2C045D; color: #fff; }
.wam-btn--primary:disabled { opacity: .6; cursor: default; }

/* ---------- Sections ---------- */
.wam-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #720EEC;
}

.wam-pains { border-bottom: 1px solid #E9E4F2; background: #FBFAFE; }
.wam-pains .wam-container { padding-top: 26px; padding-bottom: 26px; }
.wam-pains .wam-eyebrow { margin-bottom: 14px; }
.wam-pains ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.wam-pains li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: #3c434a; }
.wam-pains li svg { flex: none; margin-top: 3px; width: 16px; height: 16px; color: #873EFF; }

.wam-features .wam-container { padding-top: 30px; padding-bottom: 10px; }
.wam-features .wam-eyebrow { margin-bottom: 20px; }
.wam-features__list { display: flex; flex-direction: column; gap: 22px; }
.wam-feature { display: flex; gap: 14px; align-items: flex-start; }
.wam-feature__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #F6F2FE; border: 1px solid rgba(114,14,236,0.12);
  display: flex; align-items: center; justify-content: center;
}
.wam-feature__icon svg { width: 20px; height: 20px; color: #720EEC; }
.wam-feature h3 { font-family: "Proxima Vara", -apple-system, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #1d2327; }
.wam-feature p { font-size: 14.5px; line-height: 1.5; color: #3c434a; margin-top: 3px; }

/* ---------- Signup card ---------- */
.wam-signup .wam-container { padding-top: 30px; padding-bottom: 24px; }
.wam-card {
  position: relative; background: #fff; border: 1px solid #E9E4F2; border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 1px 2px rgba(44,4,93,.06), 0 10px 30px rgba(44,4,93,.07);
}
.wam-card h2 { font-family: "Proxima Vara", -apple-system, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: #1d2327; }
.wam-card__intro { margin-top: 6px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.5; color: #3c434a; }

.wam-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.wam-row .wam-field { flex: 1 1 130px; min-width: 130px; margin-bottom: 0; }
.wam-field { margin-bottom: 14px; }
.wam-field label { display: block; font-size: 12.5px; font-weight: 600; color: #3c434a; margin-bottom: 6px; }
.wam-field label .wam-optional { font-weight: 400; color: #646970; }
.wam-field input {
  width: 100%; font-family: inherit; font-size: 16px; padding: 12px 13px;
  border: 1px solid #dcdcde; border-radius: 8px; background: #fff; color: #1d2327;
  outline: none; transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wam-field input:focus { border-color: #720EEC; box-shadow: 0 0 0 3px rgba(114,14,236,.16); }
.wam-field--last { margin-bottom: 18px; }
.wam-field input[aria-invalid="true"] { border-color: #d63638; }

.wam-form-error {
  display: none;
  margin-bottom: 14px; padding: 11px 13px;
  font-size: 13.5px; line-height: 1.45; color: #d63638;
  background: #fcf0f1; border: 1px solid rgba(214,54,56,.25); border-radius: 8px;
}
.wam-form-error.is-visible { display: block; }

.wam-fine { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: #646970; text-align: center; }

/* Honeypot — visually removed, still in the form for bots */
.wam-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.wam-footer { border-top: 1px solid #E9E4F2; }
.wam-footer .wam-container {
  padding: 22px 22px 32px; display: flex; align-items: center; justify-content: center;
  gap: 9px; font-size: 12.5px; color: #646970;
}
.wam-footer a { font-weight: 600; }
.wam-footer__sep { width: 1px; height: 12px; background: #E9E4F2; }

/* ---------- Admin bar offset ---------- */
body.admin-bar .wam-header { padding-top: 0; }

/* ==========================================================================
   Conference QR page (templates/conference-qr.php — direct link only)
   ========================================================================== */
.wam-qr-body { background: #2C045D; }

.wam-qr {
  min-height: 100vh; background: #2C045D; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.wam-qr .wam-wooble--1 { opacity: .6; }
.wam-qr .wam-wooble--4 { bottom: -352px; right: -318px; width: 760px; height: 545px; opacity: .1; }

.wam-qr__inner {
  position: relative; flex: 1; display: flex; flex-direction: column;
  max-width: 560px; width: 100%; margin: 0 auto; padding: 18px 22px 40px;
}

.wam-qr__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 30px; }
.wam-qr__title {
  font-weight: 700;
  font-size: clamp(29px, 7.8vw, 38px);
  line-height: 1.03; letter-spacing: -0.025em; color: #fff; text-wrap: pretty;
}
.wam-qr__title em { font-style: normal; color: #D1C1FF; }

.wam-qr__card {
  margin-top: 26px; background: #fff; border-radius: 16px; padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 18px 44px rgba(0,0,0,.28);
}
.wam-qr__code-wrap { display: flex; justify-content: center; }
.wam-qr__code {
  width: 236px; height: 236px; display: flex; align-items: center; justify-content: center;
  background: #F6F2FE; border: 1px solid rgba(114,14,236,0.12); border-radius: 12px; overflow: hidden;
}
.wam-qr__code span { font-size: 12.5px; color: #646970; }
.wam-qr__code.is-ready { background: #fff; border: none; }
.wam-qr__code img, .wam-qr__code canvas { display: block; }
.wam-qr__url { margin-top: 16px; text-align: center; font-size: 13px; line-height: 1.45; color: #646970; word-break: break-all; }
.wam-qr__open { margin-top: 16px; font-size: 16px; padding: 15px 20px; }

/* ---------- Signed-up confirmation page ---------- */
.wam-done__sub { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.78); text-wrap: pretty; }

.wam-done__card { padding: 22px 20px; }
.wam-done__card .wam-eyebrow { margin-bottom: 14px; }
.wam-done__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.wam-done__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #3c434a; }
.wam-done__list svg { flex: none; margin-top: 3px; width: 16px; height: 16px; color: #873EFF; }
.wam-done__card .wam-qr__open { margin-top: 20px; }