/* register-error-bs-exact.css — 2026-05-29 rev3
 *
 * EXACT KLONLA v3 (rule #160) — specificity escalated after rev2 still
 * lost the border-width cascade battle.
 *
 * Live cascade analysis showed register-deep-v2-fixes.css ships a
 * `border: 0px !important` rule whose actual W3C specificity (counting
 * the :not() argument correctly) is 162:
 *   html.mobile-root body.mobile-site #registerModal
 *   .form-control-label-bc.inputs:not(.form-control-select-bc)
 *   .form-control-input-bc
 *   → IDs:1 + classes:6 (mobile-root, mobile-site, form-control-label-bc,
 *     inputs, form-control-select-bc inside :not, form-control-input-bc)
 *     + elements:2 (html, body) = 162
 *
 * rev2 sat at 153 → lost. rev3 uses two IDs (the outer #registerModal
 * AND the inner form id #modalRegisterForm) to push specificity to
 * 253, guaranteeing the cascade always falls on our side regardless of
 * any future single-ID rule added to legacy stylesheets.
 *
 * BS extracted ground truth (from m.bahissende305.com,
 * .form-control-bc.invalid input.form-control-input-bc on empty submit):
 *   input.background:    rgba(255, 255, 255, 0.15)
 *   input.color:         rgb(255, 52, 73)
 *   input.border:        0.8px solid rgb(255, 52, 73)
 *   title.color:         rgba(255, 255, 255, 0.4)
 *   message.background:  rgba(255, 52, 73, 0.2)
 *   message.color:       rgb(255, 255, 255)
 *   message.font:        12px / normal / 400
 *   message.padding:     5px
 *   message.borderRadius: 4px
 *   message.margin:      3px 0 0 0
 */

/* ─── INVALID INPUT — red border + translucent white overlay + WHITE text (BS exact) */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid input.form-control-input-bc,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.has-error input.form-control-input-bc,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm input.form-control-input-bc.error,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid select.form-control-input-bc,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.has-error select.form-control-input-bc {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #ff3449 !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image: none !important;
  /* ITER 867: BS exact text WHITE (Ferrari'de red yazılıyordu) */
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Floating label stays gray (BS: rgba(255,255,255,0.4)) — explicit
   rule to override anything painting it red on invalid. */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid .form-control-title-bc,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.has-error .form-control-title-bc {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Custom-styled trigger fields (date picker, country picker, fixed
   select) get the same red treatment on invalid. */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid .register-dob-trigger,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid .bc-fixed-select {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #ff3449 !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ─── BS PASSWORD-RULES SUB-COMPONENT (verbatim BS markup support) ───
   The .has-password-rules form-group contains BS's .validation-content
   block (extracted verbatim from m.bahissende305.com). These rules style
   that sub-component to match BS computed values pixel-for-pixel:

   .validation-message    color rgba(255,255,255,0.9)  font 12/700
                          margin 0 0 16px
   .validation-progress   38×2 strength bar segment, bg rgba(255,255,255,0.3)
                          (inactive), green (active)
   .validation-check-info flex row, ~4px vertical spacing
   .validation-check-marker 6×6 circle, bg rgba(255,255,255,0.3) (inactive)
                            green (valid)
   Rule text span         color rgba(255,255,255,0.9)  font 12px
*/

/* Hide by default; show only when the password field is in invalid /
   has-error state (matches BS .form-control-bc.invalid behavior). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-content {
  display: none;
}

/* ITER 876 rev2: BS has-password-rules item margin alt 0 (Ferrari 14.25 fazla idi — register-deep-v2:441 global form-group rule specificity 235).
   Beat via #registerModal + #modalRegisterForm + form# + div + triple .has-password-rules chain (specificity 345). */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm form#modalRegisterForm div.form-group.has-password-rules.has-password-rules,
html.mobile-root body.mobile-site #registerModal form#modalRegisterForm div.form-group.has-password-rules.has-password-rules {
  margin: 15px 0 0 !important;
  margin-bottom: 0 !important;
}

/* ITER 876: input line-height 'normal' (BS verbatim — Ferrari 16.8px explicit idi, aynı sonuç ama BS clean) */
html.mobile-root body.mobile-site #registerModal .has-password-rules input[type="password"].form-control-input-bc {
  line-height: normal !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules.invalid .validation-content,
html.mobile-root body.mobile-site #registerModal .has-password-rules.has-error .validation-content {
  display: block !important;
  /* ITER 874: BS verbatim — color alpha 0.9 + font-size 12px (cascade temizliği, Ferrari 16 idi) */
  margin-top: 2px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  line-height: 18px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
}

/* ITER 872: BS line-height 18px sabit (Ferrari'de normal/15.6 → rule items 19/21 yamuk) */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-message {
  line-height: 18px !important;
  margin: 0 0 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-info > span:last-child {
  line-height: 18px !important;
  font-size: 12px !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-info {
  /* ITER 874: BS color alpha 0.9 (Ferrari rgb(255,255,255) idi — alpha 1.0). */
  height: 18px !important;
  min-height: 0 !important;
  line-height: 18px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* validation-marker (parent <p>) height fixed 12px + BS margin 0 8px 0 0 (icon-text gap). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-marker {
  height: 12px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 8px 0 0 !important;
}
/* ITER 875: .invalid marker stilini ana .validation-check-marker bloğunda topladık (line 196+).
   Bu eski rule artık gereksiz — silindi. */

/* When the BS rules block is shown, suppress the legacy single-line
   error to avoid double messaging. Double-ID chain to beat register-
   page-fixes.css's tied-specificity .form-group.invalid rule. */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .has-password-rules.invalid > .register-error-text,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .has-password-rules.has-error > .register-error-text {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strength bar row — 7 segments, BS exact gap:normal(0), margin-bottom:16px */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-message-content {
  display: flex;
  gap: normal;
  margin: 0 0 16px;
  padding: 0;
}
/* ITER 867: BS exact border-radius 4px (was 1px).
   ITER 876: BS 2px gap between segments — ardışık inline-block'lar 0px gap kalıyordu (yapışık görünüm). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-progress {
  display: inline-block;
  width: 38px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background-color 0.2s;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-progress:not(:last-child) {
  margin-right: 2px !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-progress.valid {
  background: #109121;
}

/* ITER 867: Strength label KALDIRILDI (BS göstermiyor). Hide-but-keep-DOM
   approach: display:none — JS update no-op olur ama DOM kalır (rollback için). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-strength {
  display: none;
}

/* Header text "Şifreniz şunları içermelidir:" */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 16px;
  padding: 0;
}

/* Rule item row: marker + text — BS exact gap:normal(0), margin: 2px 0 0 */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-info {
  display: flex;
  align-items: center;
  gap: normal;
  margin: 2px 0 0;
  padding: 0;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-marker {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
/* ITER 875 — BS verbatim marker pattern:
   - .invalid (no bc-i-checked) → 12×12 gri daire (font Roboto, glyph yok, bg rgba(255,255,255,0.3))
   - .bc-i-checked (no invalid) → 12×12 yeşil checkmark (font BetConstruct-Icons, color #109121, bg transparent)
   Önceki ITER 865 .valid pattern kaldırıldı — BS class toggle pattern'i farklı (bc-i-checked ↔ invalid swap). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: transparent;
  border-radius: 50%;
  transition: all 0.2s;
  font-size: 12px;
  line-height: 12px;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-marker.invalid {
  background: rgba(255, 255, 255, 0.3) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  line-height: 12px !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-marker.bc-i-checked {
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'BetConstruct-Icons' !important;
  font-size: 12px !important;
  line-height: 12px !important;
  color: #109121 !important;
}
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-info > span:last-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.3;
}
/* ITER 864 — REMOVE strikethrough + fade. BS valid rule text = normal beyaz (çizgi yok). */
html.mobile-root body.mobile-site #registerModal .has-password-rules .validation-check-info.valid > span:last-child {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

/* ITER 865 — Red border REVERTED. BS invalid input state'inde RED border kullanıyor
   (#ff3449 0.8px solid). Ben hatalı genelleştirme yapıp kaldırmıştım. */

/* ITER 870: REVERT ITER 869 — password wrapper expand denedim ama visual REZALET:
   negative margin → modal sol kenarından -7px overflow + diğer field'lardan 30px geniş
   inconsistency. 16px width fark accept ediyoruz — visual uniformity > pixel match. */

/* ITER 868: Password label display:flex FORCE (önceki specificity yetersizdi) */
html.mobile-root body.mobile-site #registerModal .has-password-rules > label.form-control-label-bc,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .has-password-rules > label.form-control-label-bc {
  display: flex !important;
  position: relative !important;
}

/* ITER 868: Eye icon HEIGHT 26 FORCE (.form-control-icon-bc 44px stretch rule
   başka CSS'ten override ediyordu — !important + double-class specificity ile yenelim) */
html.mobile-root body.mobile-site #registerModal .password-toggle-icon.password-toggle-icon {
  /* ITER 874: BS display:flex (Ferrari block idi — glyph centering BS-paralel için flex + align-items center) */
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 20px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* ITER 868 fix: base.css mobile touch target min-height:44px override */
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 26px !important;
  text-align: center !important;
  user-select: none !important;
  z-index: 2 !important;
}
html.mobile-root body.mobile-site #registerModal .password-toggle-icon:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* ─── ERROR MESSAGE BOX — white text on translucent red, 12px ─── */
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .register-error-text.shown,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .register-error-text.active,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.invalid .register-error-text,
html.mobile-root body.mobile-site #registerModal #modalRegisterForm .form-group.has-error .register-error-text {
  display: block !important;
  color: #ffffff !important;
  background-color: rgba(255, 52, 73, 0.2) !important;
  background-image: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  padding: 5px !important;
  border-radius: 4px !important;
  border: 0 !important;
  margin: 3px 0 0 0 !important;
  text-align: start !important;
  letter-spacing: normal !important;
}

/* ITER 880: ITER 879 redundant ID-prefix CSS SİLİNDİ — popup-bs-exact.css zaten
   popup-holder-bc/popup-inner-bc/popup-middleware-bc/casino-popup-title/casino-popup-content/
   casino-popup-button-block/btn için VERBATIM BS rule'larına + popupSlideIn keyframe'ine sahip.
   Eksik sms-verification-* rule'ları popup-bs-exact.css'e eklendi (BS source verbatim). */

/* ITER 884b: -webkit-autofill renk eşitliği fix.
   ITER 884 rev1: box-shadow rgba(0.15) asıl bg rgba(0.15)'in ÜSTÜNE binince effective rgba(0.3) → input açık görünüyordu.
   Düzeltme: asıl bg solid SOLID rgb(38,38,38) ile değiştir — rgba(255,255,255,0.15) over black = #262626 = rgb(38,38,38).
   Bu yüzden autofill ve non-autofill aynı visual görüntü verir. */
html.mobile-root body.mobile-site #registerModal input:-webkit-autofill,
html.mobile-root body.mobile-site #registerModal input:-webkit-autofill:hover,
html.mobile-root body.mobile-site #registerModal input:-webkit-autofill:focus,
html.mobile-root body.mobile-site #registerModal input:-webkit-autofill:active,
html.mobile-root body.mobile-site #login2 input:-webkit-autofill,
html.mobile-root body.mobile-site #login2 input:-webkit-autofill:hover,
html.mobile-root body.mobile-site #login2 input:-webkit-autofill:focus,
html.mobile-root body.mobile-site #login2 input:-webkit-autofill:active,
html.mobile-root body.mobile-site #registerSuccessModal input:-webkit-autofill,
html.mobile-root body.mobile-site #registerSuccessModal input:-webkit-autofill:hover,
html.mobile-root body.mobile-site #registerSuccessModal input:-webkit-autofill:focus,
html.mobile-root body.mobile-site #registerSuccessModal input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgb(38, 38, 38) inset !important;
  box-shadow: 0 0 0 1000px rgb(38, 38, 38) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  caret-color: rgba(255, 255, 255, 0.9) !important;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s !important;
  border: 0.8px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}