/* Login Modal Styling for HILO168 (Red-Black + white text)
   Dedicated styles for login popup and action buttons
*/
:root {
  --login-red-1: #170506;
  --login-red-2: #7a0b14;
  --login-accent: #e11d2e; /* bright red */
}

/* Dedicated submit class for login popup only (scoped to avoid global conflicts) */
.login-popup-wrap .lg-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 140px; border-radius: 10px; padding: 0 16px;
  font-weight: 600; cursor: pointer; transition: transform .05s ease, box-shadow .2s; font-size: 16px;
  background: linear-gradient(180deg, var(--login-red-2) 0%, var(--login-red-1) 100%) !important;
  color: #fff !important; border: 2px solid var(--login-accent) !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, .28), 0 8px 22px rgba(0, 0, 0, .35), 0 0 22px rgba(225, 29, 46, .35), inset 0 1.5px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .25) !important;
}
.login-popup-wrap .lg-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(225, 29, 46, .32), 0 12px 28px rgba(0, 0, 0, .45), 0 0 30px rgba(225, 29, 46, .55), inset 0 1.5px 0 rgba(255, 255, 255, .20), inset 0 -2px 0 rgba(0, 0, 0, .28) !important; }
.login-popup-wrap .lg-btn-submit:disabled { opacity: .7; cursor: not-allowed; }
.login-popup-wrap .lg-btn-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(225, 29, 46, .40), 0 10px 24px rgba(0, 0, 0, .45), 0 0 34px rgba(225, 29, 46, .60), inset 0 1.5px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .30) !important; }

.login-popup-wrap { max-width: 520px; margin: 0 auto; font-family: "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; touch-action: manipulation; }
.login-popup-wrap h3 { margin: 0 0 12px; font-weight: 700; letter-spacing: .3px; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.login-popup-wrap .login-desc { text-align: center; margin-bottom: 18px; font-size: 15px; color: rgba(255,255,255,.7); }
.login-popup-wrap .form-label { color: #fff !important; display: block; margin-bottom: 6px; font-weight: 600; }
.login-popup-wrap .mb-3 { margin-bottom: 16px; }
.login-popup-wrap input { width: 100%; height: 46px; border: 1px solid rgba(225, 29, 46, .35); border-radius: 10px; padding: 0 14px; background: rgba(255,255,255,.92); color: #111; outline: none; transition: box-shadow .2s, border-color .2s; font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.login-popup-wrap input:focus { border-color: var(--login-accent); box-shadow: 0 0 0 4px rgba(225, 29, 46, .25); }
.login-popup-wrap input[readonly] { background: #f7f7f7; color: #333; }

.login-popup-wrap .popup-actions { display: flex; gap: 12px; margin-top: 16px; }
.login-popup-wrap .popup-actions button { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; padding: 0 16px; font-weight: 600; cursor: pointer; transition: transform .05s ease, box-shadow .2s; font-size: 16px; border: none; }
.login-popup-wrap .popup-actions .btn-cancel { min-width: 110px; height: 44px !important; box-sizing: border-box; background: transparent; border: 2px solid var(--login-accent); color: var(--login-accent); }
.login-popup-wrap .popup-actions .btn-cancel:hover { background: rgba(225, 29, 46, .08); }

.login-popup-wrap .login-extra { margin-top: 18px; text-align: center; font-size: 14px; color: rgba(255,255,255,.65); }
.login-popup-wrap .login-extra a { color: var(--login-accent); text-decoration: underline; }
.login-popup-wrap .login-extra a:hover { color: #ff6161; }

/* Align buttons inside modal */
.rg-modal .login-popup-wrap .lg-btn-submit, .rg-modal .login-popup-wrap .btn-cancel { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 44px !important; margin: 0 !important; }

/* Mobile tweaks */
@media (max-width: 576px){
  .login-popup-wrap{ max-width: 100%; }
  .login-popup-wrap .popup-actions{ flex-direction: column; }
  .login-popup-wrap .popup-actions .lg-btn-submit{ order:1 !important; width: 100% !important; min-width: 0 !important; height: 44px !important; background: linear-gradient(180deg, var(--login-red-2) 0%, var(--login-red-1) 100%) !important; color:#fff !important; border: 2px solid var(--login-accent) !important; padding-top:0 !important; padding-bottom:0 !important; line-height:44px !important; margin:0 !important; }
  .login-popup-wrap .popup-actions .btn-cancel{ order:2 !important; width: 100% !important; min-width: 0 !important; height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 44px !important; margin: 0 !important; }
  .login-popup-wrap .popup-actions button, .login-popup-wrap .popup-actions .lg-btn-submit{ width: 100% !important; }
}