/* predictable */
.adsafy-auth, .adsafy-auth * { box-sizing: border-box; font-family: inherit; }

/* GLOBAL safety (prevents horizontal scroll from theme quirks) */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
img, video, canvas, svg, iframe { max-width: 100%; }

/* Page */
.adsafy-auth{
  width: 100%;
  padding: 34px 14px 30px;
}

.adsafy-page-title{
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  margin: 0 0 14px 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.adsafy-auth-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Card */
.adsafy-card{
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
}

/* prevent any child from forcing overflow */
.adsafy-card, .adsafy-auth, .adsafy-auth-wrap { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { .adsafy-card, .adsafy-auth, .adsafy-auth-wrap { overflow-x: hidden; } }
.adsafy-card * { min-width: 0; }


/* =========================
   Header navigation (minimal)
   ========================= */
.adsafy-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

/* fixed side slots keep the title perfectly centered */
.adsafy-nav-side{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 34px;
}

.adsafy-nav-spacer{
  width: 18px;
  height: 18px;
}

/* Minimal back button: icon only, no background/border */
.adsafy-nav-btn{
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  opacity: .72;
  transition: opacity .12s ease;
}
.adsafy-nav-btn:hover{ opacity: 1; }
.adsafy-nav-btn:active{ opacity: 1; }
.adsafy-nav-btn.is-disabled{
  opacity: .25;
  pointer-events: none;
}

.adsafy-nav-svg{
  width: 18px;
  height: 18px;
  display:block;
}

@media (min-width: 900px){
  .adsafy-nav-side{ width: 36px; height: 36px; flex-basis: 36px; }
  .adsafy-nav-btn{ width: 36px; height: 36px; }
  .adsafy-nav-svg{ width: 19px; height: 19px; }
}

.adsafy-card-header-title{
  font-size: 14px;
  font-weight: 900;
  opacity: .85;
  flex: 1;
  text-align: center;
}

/* Fields */
.adsafy-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
}
.adsafy-field label{
  font-size: 13px;
  opacity: .85;
  font-weight: 700;
}

/* INPUTS: force rounded always */
.adsafy-field input{
  height: 46px;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  outline: none;
  width: 100%;
  background: #fff;
  transition: border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Minimal focus */
.adsafy-field input:focus{
  border-color: rgba(0,0,0,.35);
}

/* ERROR: red border around rounded rectangle */
.adsafy-field input.adsafy-input-error{
  border-color: #d93025 !important;
}

/* Inline error message under field (minimal) */
.adsafy-field-msg{
  font-size: 12px;
  font-weight: 800;
  color: #d93025;
  line-height: 1.2;
  display: none;
  margin-top: -2px;
}

/* Buttons */
.adsafy-btn{
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
  transition: transform .04s ease, filter .15s ease, opacity .15s ease;
}
.adsafy-btn:active{ transform: translateY(1px); }

.adsafy-btn-primary{
  background: #111;
  color: #fff;
  margin-top: 2px;
}
.adsafy-btn-primary:hover{ filter: brightness(1.03); }

.adsafy-btn-secondary{
  background: #f3f3f3;
  color: #111;
  margin-top: 10px;
}
.adsafy-btn-secondary:hover{ filter: brightness(0.99); }

.adsafy-or{
  text-align: center;
  margin: 14px 0;
  opacity: .60;
  font-size: 13px;
}

/* Social */
.adsafy-social{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adsafy-btn-social{
  background: #f3f3f3;  /* same as secondary */
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
}
.adsafy-btn-social:hover{ border-color: rgba(0,0,0,.22); }

/* Icons */
.adsafy-icon{ width: 18px; height: 18px; display: inline-block; }

/* Messages (general) */
.adsafy-msg{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}
.adsafy-msg.ok{ background: #e8fff0; }
.adsafy-msg.err{ background: #ffecec; }

/* =========================
   Google overlay (GIS)
   Make it look like our button
   ========================= */
.adsafy-google-wrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

/* Our visible button style */
.adsafy-google-fake{
  position: relative;
  z-index: 1;
  background: #f3f3f3; /* like secondary */
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
}

/* Real Google button sits on top only after it is fully rendered */
.adsafy-google-overlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.01;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
  transform: translateZ(0);
}

.adsafy-google-wrap.is-ready .adsafy-google-overlay{
  pointer-events: auto;
}

.adsafy-google-wrap.is-ready .adsafy-google-fake{
  pointer-events: none;
}

.adsafy-google-overlay > div,
.adsafy-google-overlay iframe{
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
  display: block !important;
  border-radius: 14px !important;
}

.adsafy-google-overlay [role=button]{
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
}

/* Modal */
.adsafy-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.adsafy-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.adsafy-modal-dialog{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.adsafy-modal-card{
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.10);
}
.adsafy-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  position: relative;
  z-index: 20;
}
.adsafy-modal-title{
  font-size: 16px;
  font-weight: 900;
}
.adsafy-modal-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  position: relative;
  z-index: 30;
}

/* Body lock when modal open (no jump) */
body.adsafy-modal-open{
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* Small screens */
@media (max-width: 420px){
  .adsafy-card{ padding: 18px; border-radius: 20px; }
  .adsafy-modal-card{ border-radius: 20px; }

  /* Phone: equal-sized action/role buttons */
  .adsafy-role-choose .adsafy-btn{
    height: 52px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Desktop */
@media (min-width: 900px){
  .adsafy-auth{ padding: 54px 18px 48px; }
  .adsafy-page-title{ font-size: 30px; margin-bottom: 18px; }
  .adsafy-card{ max-width: 560px; padding: 28px; border-radius: 26px; }
  .adsafy-field input{ height: 52px; font-size: 15px; }
  .adsafy-btn{ height: 52px; font-size: 15px; }
  .adsafy-google-overlay{ min-height: 52px; }
  .adsafy-modal-card{ max-width: 520px; padding: 22px; }
}

/* Desktop spacing from header */
@media (min-width: 900px){
  .adsafy-auth{ padding-top: 95px; }
}

/* =========================
   NEW: Role choose (Step 0)
   ========================= */
.adsafy-step-title{
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 6px 0;
  text-align: center;
}
.adsafy-step-subtitle{
  text-align: center;
  font-size: 13px;
  opacity: .75;
  margin: 0 0 14px 0;
  line-height: 1.35;
}

.adsafy-role-choose{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Buttons in choose grids must be perfectly aligned (no extra top margins) */
.adsafy-role-choose .adsafy-btn{
  margin-top: 0 !important;
}

@media (max-width: 420px){
  .adsafy-role-choose{
    /* Phone: buttons stacked (2 rows) */
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Active state */
.adsafy-role-btn.is-active{
  background: #111;
  color: #fff;
}

/* Override secondary margin-top for role buttons */
.adsafy-role-btn{
  margin-top: 0;
}
/* Move role buttons to bottom of STEP 0 */
#adsafy-step-0{
  display: flex;
  flex-direction: column;
}

#adsafy-step-0 .adsafy-role-choose{
  margin-top: auto;   /* pushes buttons down */
  padding-top: 14px;
}
/* Increase spacing between title and subtitle in STEP 0 */
#adsafy-step-0 .adsafy-step-title{
  margin-bottom: 14px; /* було ~6px, зробили більше */
}

#adsafy-step-0 .adsafy-step-subtitle{
  margin-bottom: 22px; /* відстань після тексту */
}
/* Space between "Реєстрація" and "Оберіть тип акаунта" */
#adsafy-step-0{
  margin-top: 18px;
}

/* Make STEP auth ("Оберіть дію") sized like STEP 0 */
#adsafy-step-auth{
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}

#adsafy-step-auth .adsafy-step-title{ margin-bottom: 14px; }
#adsafy-step-auth .adsafy-step-subtitle{ margin-bottom: 22px; }

/* Keep action buttons positioned similarly to role buttons */
#adsafy-step-auth .adsafy-role-choose{
  margin-top: auto;
  padding-top: 14px;
}
@media (min-width: 900px){
  #adsafy-step-0{
    margin-top: 24px;
  }
  #adsafy-step-auth{
    margin-top: 24px;
  }
}
/* ТІЛЬКИ відстань між кнопками (верх–низ) у блоці авторизації */
@media (max-width: 420px){
/* Phone: keep page title on one line so the card top is identical for blogger & advertiser */
.adsafy-page-title{
  font-size: clamp(18px, 5.6vw, 22px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  /* Phone: raise registration fields block (was too low) */
  #adsafy-step-1{ margin-top: 0px; }
}
/* Fix subtitle line-break jump on back navigation */
@media (max-width: 420px){
  #adsafy-step-0 .adsafy-step-subtitle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* =========================
   v6: Minimal back arrow (Font Awesome)
   ========================= */
#adsafy_header_auth{
  justify-content: center;
}
#adsafy_header_auth .adsafy-card-header-title{
  flex: 0 0 auto;
  text-align: center;
}

#adsafy_header_main .adsafy-nav-btn{
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 12px;
  color: #111;
}
#adsafy_header_main .adsafy-nav-btn:hover{
  background: rgba(0,0,0,.04);
}
#adsafy_header_main .adsafy-nav-btn:active{
  transform: translateY(1px);
}
#adsafy_header_main .adsafy-nav-btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}
#adsafy_header_main .adsafy-nav-btn i{
  font-size: 18px;
  line-height: 1;
}


/* =========================
   OVERRIDE: Minimal back button (Font Awesome)
   ========================= */
.adsafy-nav-btn{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.adsafy-nav-btn:hover{ opacity: .85; filter: none !important; }
.adsafy-nav-btn:active{ opacity: .70; transform: none !important; }
.adsafy-nav-btn.is-disabled{ opacity: .25 !important; pointer-events: none !important; }

.adsafy-nav-btn i{
  font-size: 20px;
  line-height: 1;
}
@media (min-width: 900px){
  .adsafy-nav-btn i{ font-size: 22px; }
}


/* =========================
   Back button – match role buttons style
   (targets real element: #adsafy_nav_back)
   ========================= */
#adsafy_nav_back{
  width: 44px;
  height: 44px;
  min-width: 44px;

  border: 0 !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; /* softer than big buttons */

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#adsafy_nav_back i{
  font-size: 18px;
  line-height: 1;
  color: #111;
}



/* =========================
   Fix: phone "pressed" look on first role button (Astra focus styles)
   ========================= */
.adsafy-role-btn{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.adsafy-role-btn:focus,
.adsafy-role-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (hover: none){
  .adsafy-role-btn:hover{ filter: none !important; }
}
/* --- Mobile/Astra fix: prevent tap-through and pressed look (no layout changes) --- */
/* Prevent theme :active/:focus styles from making the first role button look selected */
.adsafy-role-btn:not(.is-active),
.adsafy-role-btn:not(.is-active):hover,
.adsafy-role-btn:not(.is-active):active,
.adsafy-role-btn:not(.is-active):focus,
.adsafy-role-btn:not(.is-active):focus-visible{
  background: #f3f3f3 !important;
  color: #111 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

/* Keep active role styling consistent */
.adsafy-role-btn.is-active,
.adsafy-role-btn.is-active:hover,
.adsafy-role-btn.is-active:active,
.adsafy-role-btn.is-active:focus,
.adsafy-role-btn.is-active:focus-visible{
  background: #111 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

/* Message under OTP input */
#adsafy-step-2 .adsafy-field #adsafy_msg{
  margin-top: 10px;
}


/* Tap-guard: prevent 'ghost click' after switching steps on mobile */
.adsafy-tapguard .adsafy-role-btn{ pointer-events: none !important; }


/* Ensure role buttons never look pressed unless .is-active */
.adsafy-role-btn:not(.is-active):active,
.adsafy-role-btn:not(.is-active):focus,
.adsafy-role-btn:not(.is-active):focus-visible{
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}