:root{
  --wpag-brand:#3B2521;
  --wpag-bg:#F5F2EC;
  --wpag-panel:#FFFFFF;
  --wpag-text:#625A53;
  --wpag-heading:#1A1310;
  --wpag-btn-bg:#3B2521;
  --wpag-btn-text:#FFFFFF;
  --wpag-radius:10px;
  --wpag-heading-font:'Playfair Display', Georgia, serif;
  --wpag-body-font:'DM Sans', sans-serif;
}

*{box-sizing:border-box;}
html body.wpag-gate-body{margin:0;padding:0;background:var(--wpag-bg);}

/* The theme's own CSS still loads on this page (wp_head/wp_footer) for
   fonts/scripts, so its global "button"/"input"/"a" rules — some themes and
   page builders write these with !important — can bleed into ours. We beat
   that two ways: (1) `all:unset !important` strips every inherited/native
   style first, and (2) the extra-specific `html body.wpag-gate-body`
   prefix + !important on every real declaration below guarantees ours wins
   the cascade regardless of load order. */
html body.wpag-gate-body .wpag-gate button,
html body.wpag-gate-body .wpag-gate input,
html body.wpag-gate-body .wpag-gate a{
  all:unset !important;
  box-sizing:border-box !important;
  cursor:pointer;
}

/* Themes/page-builders (e.g. CMSMasters/Cherry Framework) often attach a
   global button:before/button:after pseudo-element to show a colored fill
   on hover. `all:unset` on the button itself does NOT touch pseudo-elements
   — they're separate generated boxes — so we have to kill those directly,
   on every interactive element inside the gate. */
html body.wpag-gate-body .wpag-gate button::before,
html body.wpag-gate-body .wpag-gate button::after,
html body.wpag-gate-body .wpag-gate input::before,
html body.wpag-gate-body .wpag-gate input::after,
html body.wpag-gate-body .wpag-gate a::before,
html body.wpag-gate-body .wpag-gate a::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-color:transparent !important;
  opacity:0 !important;
}

.wpag-gate{display:flex;min-height:100vh;width:100%;font-family:var(--wpag-body-font);}

/* ---------- Left visual / carousel column ---------- */
.wpag-gate__visual{flex:1 1 50%;position:relative;background:#0b0b0b;overflow:hidden;min-height:280px;}
.wpag-carousel{position:absolute;inset:0;}
.wpag-carousel__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;}
.wpag-carousel__slide.is-active{opacity:1;}

html body.wpag-gate-body .wpag-gate .wpag-carousel__dots{
  all:unset !important;
  position:absolute !important;
  left:50% !important;
  bottom:22px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  gap:8px !important;
  z-index:3 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
html body.wpag-gate-body .wpag-gate button.wpag-carousel__dot{
  display:block !important;
  width:8px !important;
  height:8px !important;
  min-width:0 !important;
  border:1.5px solid #fff !important;
  border-radius:50% !important;
  background:none !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  opacity:.85;
}
html body.wpag-gate-body .wpag-gate button.wpag-carousel__dot.is-active{
  background:#fff !important;
  border-color:#fff !important;
  opacity:1;
}

.wpag-carousel__overlay{
  position:absolute;
  left:24px; bottom:24px;
  max-width:340px;
  background:rgba(8,6,5,.72);
  color:#fff;
  padding:16px 20px;
  border-radius:calc(var(--wpag-radius) * 0.6);
  z-index:3;
}
.wpag-carousel__overlay-title{margin:0 0 4px;font-family:var(--wpag-heading-font);font-size:16px;font-weight:600;color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.wpag-carousel__overlay-sub{margin:0;font-size:12.5px;color:rgba(255,255,255,.82) !important;text-shadow:0 1px 2px rgba(0,0,0,.4);}

/* ---------- Right form panel ---------- */
.wpag-gate__panel{flex:1 1 50%;background:var(--wpag-panel);display:flex;align-items:center;justify-content:center;padding:48px 24px;}
.wpag-gate__inner{max-width:420px;width:100%;}
.wpag-gate__brand{font-family:var(--wpag-heading-font);font-size:46px;margin:0 0 8px;color:var(--wpag-heading);font-weight:600;line-height:1.1;}
.wpag-gate__tagline{color:var(--wpag-text);margin:0 0 32px;font-size:15px;}
.wpag-gate__promo{font-family:var(--wpag-heading-font);font-size:21px;margin:0 0 6px;color:var(--wpag-heading);font-weight:600;}
.wpag-gate__promo-sub{color:var(--wpag-text);font-size:14px;margin:0 0 28px;}

.wpag-step label{display:block;font-size:12px;letter-spacing:.06em;color:var(--wpag-text);margin-bottom:6px;font-weight:600;text-transform:uppercase;}
.wpag-step .req{color:var(--wpag-brand);text-transform:none;font-weight:400;}

html body.wpag-gate-body .wpag-gate input[type="email"],
html body.wpag-gate-body .wpag-gate input[type="password"]{
  display:block !important;
  width:100% !important;
  height:auto !important;
  padding:13px 14px !important;
  border:1px solid #d9d4cc !important;
  border-radius:calc(var(--wpag-radius) * 0.35) !important;
  font-size:15px !important;
  line-height:1.4 !important;
  margin:0 0 14px !important;
  font-family:var(--wpag-body-font) !important;
  background:#fff !important;
  color:var(--wpag-heading) !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
}
html body.wpag-gate-body .wpag-gate input[type="email"]:focus,
html body.wpag-gate-body .wpag-gate input[type="password"]:focus{
  outline:none !important;
  border-color:var(--wpag-brand) !important;
}

html body.wpag-gate-body .wpag-gate button.wpag-btn{
  display:block !important;
  width:100% !important;
  background:var(--wpag-btn-bg) !important;
  color:var(--wpag-btn-text) !important;
  border:2px solid var(--wpag-btn-bg) !important;
  padding:14px 18px !important;
  font-size:15px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  text-align:center !important;
  border-radius:var(--wpag-radius) !important;
  cursor:pointer !important;
  margin:0 0 12px !important;
  font-family:var(--wpag-body-font) !important;
  transition:filter .15s ease;
  box-shadow:none !important;
}
.wpag-btn:hover{filter:brightness(1.1);}
.wpag-btn:disabled{opacity:.6;cursor:default;}

.wpag-status{display:block;font-size:13px;margin:-6px 0 14px;}
.wpag-status.ok{color:#2e7d32;}
.wpag-status.new{color:#1565c0;}
.wpag-error{display:block;color:#c62828;font-size:13px;margin:-6px 0 14px;}

html body.wpag-gate-body .wpag-gate a.wpag-link,
html body.wpag-gate-body .wpag-gate button.wpag-link{
  display:block !important;
  text-align:center !important;
  color:var(--wpag-brand) !important;
  font-size:13px !important;
  cursor:pointer !important;
  text-decoration:none !important;
  margin-top:8px !important;
  margin-bottom:0 !important;
  font-family:var(--wpag-body-font) !important;
  background:none !important;
  border:none !important;
  padding:0 !important;
}
.wpag-link:hover{text-decoration:underline;}

.wpag-checkbox{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--wpag-text);margin-bottom:16px;text-transform:none;font-weight:400;}
html body.wpag-gate-body .wpag-gate input[type="checkbox"]{
  display:inline-block !important;
  width:15px !important;
  height:15px !important;
  margin-top:3px !important;
  border:1px solid #d9d4cc !important;
  border-radius:3px !important;
  background:#fff !important;
  cursor:pointer !important;
  flex-shrink:0;
  appearance:none !important;
  -webkit-appearance:none !important;
}
html body.wpag-gate-body .wpag-gate input[type="checkbox"]:checked{background:var(--wpag-brand) !important;}

.wpag-step__title{font-size:15px;color:var(--wpag-heading);margin:0 0 18px;text-align:center;font-family:var(--wpag-body-font);}
.wpag-footer{margin-top:32px;text-align:center;font-size:12px;color:var(--wpag-text);opacity:.75;}

.wpag-footer-links{margin:8px 0 0;text-align:center;font-size:12px;}
html body.wpag-gate-body .wpag-gate .wpag-footer-links a{
  display:inline !important;
  color:var(--wpag-brand) !important;
  text-decoration:none !important;
  font-family:var(--wpag-body-font) !important;
  cursor:pointer !important;
}
.wpag-footer-links a:hover{text-decoration:underline !important;}
.wpag-footer-dot{color:var(--wpag-text);opacity:.6;margin:0 2px;}

@media (max-width:820px){
  .wpag-gate{flex-direction:column;}
  .wpag-gate__visual{flex:0 0 240px;}
  .wpag-gate__panel{padding:36px 20px;}
  .wpag-gate__brand{font-size:36px;}
  .wpag-carousel__overlay{left:16px;bottom:16px;right:16px;max-width:none;}
}