/* Register/Login Modal Theme for HILO168 (Red-Black + white text)
   This stylesheet provides base modal container styles (rg-modal...) and
   shared popup utilities used by login/register popups.
*/
:root{
  --rg-red-1:#170506;        /* near black with red tint */
  --rg-red-2:#7a0b14;        /* primary deep red */
  --rg-accent:#e11d2e;       /* bright accent red */
  --rg-accent-2:#ff3b3b;     /* lighter accent */
}

/* Modal shell (shared for both register and login modals) */
.rg-modal, .login-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:9999;backdrop-filter: blur(2px)}
.rg-modal.open, .login-modal.open{display:flex}
.rg-modal__dialog, .login-modal .rg-modal__dialog{position:relative;width:min(720px, 92vw);max-height:92vh;border-radius:14px;overflow:auto;background: linear-gradient(180deg, var(--rg-red-2) 0%, var(--rg-red-1) 100%) !important;border: 2px solid rgba(225,29,46,.7) !important; box-shadow: 0 0 28px rgba(225,29,46,.22), 0 14px 44px rgba(0,0,0,.6) !important;}
.rg-modal__close, .login-modal .rg-modal__close{position:absolute;right:10px;top:10px;font-size:28px;line-height:1;border:0;background:transparent;color:#fff;cursor:pointer;z-index:2}
.rg-modal__body, .login-modal .rg-modal__body{padding:18px;background: rgba(255,255,255,.03) !important;border-top: 1px solid rgba(225,29,46,.35) !important; color:#fff !important}

/* Fix for nested input styles getting overridden */
.rg-modal input:not([type="radio"]):not([type="checkbox"]),
.rg-modal select, 
.rg-modal textarea {
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  border: 1px solid rgba(225, 29, 46, .35) !important;
  border-radius: 10px !important;
  height: 46px !important;
  padding: 0 14px !important;
}
.rg-modal label { color: #fff !important; }

/* Step 2 Specific Fixes */
.register-popup-wrap .step2 .rg-two-col-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 576px) { .register-popup-wrap .step2 .rg-two-col-50 { grid-template-columns: 1fr; } }

/* Inline alert box within modal */
@keyframes rg-pop{from{transform:scale(.98);opacity:.9}to{transform:scale(1);opacity:1}}
.rg-inline{border-radius:12px;padding:12px 14px;margin:8px 0 14px;border:2px solid transparent;position:relative;animation:rg-pop .12s ease-out}
.rg-inline strong{font-weight:700}
.rg-inline--error{background:linear-gradient(180deg, rgba(225,29,46,.20) 0%, rgba(225,29,46,.10) 100%);border-color:#e11d2e;color:#fff;box-shadow:0 0 0 3px rgba(225,29,46,.18), 0 10px 22px rgba(0,0,0,.35)}
.rg-inline--error:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#e11d2e;border-top-left-radius:10px;border-bottom-left-radius:10px}
.rg-inline--info{background:linear-gradient(180deg, rgba(255,59,59,.22) 0%, rgba(255,59,59,.10) 100%);border-color:var(--rg-accent);color:#fff;box-shadow:0 0 0 3px rgba(255,59,59,.18), 0 10px 22px rgba(0,0,0,.35)}
.rg-inline--info:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--rg-accent);border-top-left-radius:10px;border-bottom-left-radius:10px}

/* Buttons scoped to register popup to avoid conflicts */
.register-popup-wrap .btn-next, .register-popup-wrap .btn-submit, .register-popup-wrap .rg-btn-submit{
  background: linear-gradient(180deg, var(--rg-accent-2) 0%, var(--rg-red-1) 100%) !important;
  color:#fff !important;
  border: 2px solid var(--rg-accent) !important;
  text-shadow: none !important;
  box-shadow: 0 0 18px rgba(225,29,46,.25) !important;
  min-width: 180px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  line-height: 44px;
  height: 44px;
  border-radius: 10px;
}

.register-popup-wrap .btn-next:hover, .register-popup-wrap .btn-submit:hover{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(225,29,46,.35) !important; }
.register-popup-wrap .btn-prev{ 
  background: transparent !important; 
  border: 2px solid var(--rg-accent) !important; 
  color: var(--rg-accent) !important; 
  min-width: 180px; 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  border-radius: 10px;
}
.register-popup-wrap .btn-prev:hover{ background: rgba(225,29,46,.10) !important; }

/* Desktop alignment for step actions */
@media (min-width: 992px){ .register-popup-wrap .popup-actions{ display:flex; justify-content: space-between; gap: 10px; } .register-popup-wrap .btn-prev{ order: 0; } .register-popup-wrap .btn-next{ order: 1; } .register-popup-wrap .btn-submit, .register-popup-wrap .rg-btn-submit{ order: 2; } }

/* Mobile: full width buttons */
@media (max-width: 576px){ .register-popup-wrap .popup-actions{ display:flex; flex-wrap: wrap; gap: 10px; } .register-popup-wrap .btn-prev, .register-popup-wrap .btn-next, .register-popup-wrap .btn-submit, .register-popup-wrap .rg-btn-submit{ flex: 1 1 100%; width: 100%; } }