/* ============================================
   G4A — Global Mobile Fix
   ============================================ */

/* Previne zoom pe iOS la focus input */
input, select, textarea {
  font-size: 16px !important;
}

@media (max-width: 768px) {

  /* Wrapper-e generale */
  .g4a-login-wrap,
  .g4a-register-wrap {
    max-width: 100% !important;
    padding: 12px 12px 40px !important;
    gap: 16px !important;
  }

  .g4a-login-bg {
    align-items: flex-start !important;
    padding-top: 20px !important;
  }

  /* Card */
  .g4a-card {
    padding: 24px 16px 24px !important;
    border-radius: 10px !important;
  }

  /* Grid 2 coloane -> 1 coloana */
  .g4a-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .g4a-col-full {
    grid-column: 1 !important;
  }

  /* Inputs */
  .g4a-input {
    font-size: 16px !important;
    padding: 11px 14px !important;
  }

  /* Phone */
  .g4a-field .iti,
  .g4a-field .intl-tel-input {
    width: 100% !important;
  }

  .g4a-field .iti__tel-input,
  .g4a-field .intl-tel-input input[type="tel"] {
    font-size: 16px !important;
    padding: 11px 14px 11px 88px !important;
  }

  .iti__dropdown-content,
  .intl-tel-input .country-list {
    width: calc(100vw - 40px) !important;
    left: 0 !important;
    right: auto !important;
    max-height: 200px !important;
    z-index: 9999 !important;
  }

  /* Titluri */
  .g4a-title {
    font-size: 20px !important;
  }

  .g4a-subtitle {
    font-size: 13px !important;
  }

  .g4a-shield-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }

  .g4a-card-header {
    margin-bottom: 20px !important;
  }

  /* Section divider */
  .g4a-section-divider {
    font-size: 10px !important;
    margin: 16px 0 12px !important;
  }

  /* Form */
  .g4a-form {
    gap: 14px !important;
  }

  /* Password */
  .g4a-pw-wrap .g4a-input {
    padding-right: 42px !important;
  }

  /* Button */
  .g4a-btn-login {
    padding: 13px 16px !important;
    font-size: 15px !important;
  }

  /* Marketing optin */
  .g4a-marketing-optin {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* TOS */
  .g4a-tos-box {
    padding: 12px !important;
    gap: 10px !important;
  }

  .g4a-tos-content {
    font-size: 12px !important;
  }

  /* Register link */
  .g4a-register-link {
    margin-top: 16px !important;
    font-size: 13px !important;
  }

  /* Select */
  .g4a-select {
    background-position: right 12px center !important;
    padding-right: 32px !important;
  }

  /* Logo */
  .g4a-logo img {
    height: 38px !important;
  }

}

/* ============================================
   Telefoane mici — max-width: 380px
   ============================================ */

@media (max-width: 380px) {

  .g4a-card {
    padding: 18px 12px 20px !important;
  }

  .g4a-title {
    font-size: 18px !important;
  }

  .g4a-login-wrap,
  .g4a-register-wrap {
    padding: 8px 8px 30px !important;
  }

  .g4a-btn-login {
    font-size: 14px !important;
    padding: 12px !important;
  }

  .iti__dropdown-content,
  .intl-tel-input .country-list {
    width: calc(100vw - 24px) !important;
  }

}

/* ============================================
   Modal Login Fix — Navbar
   ============================================ */

/* Overlay/modal container */
.modal-login,
[class*="login-modal"],
[id*="login-modal"],
.navbar-login-dropdown,
[class*="loginBox"],
[id*="loginBox"] {
  background: #111111 !important;
  border: 1px solid rgba(220,30,30,0.25) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
  color: #fff !important;
}

/* Header roz/colorat din modal */
.modal-header,
[class*="login-modal"] .header,
[class*="loginBox"] .header {
  background: #dc1e1e !important;
  border-radius: 8px 8px 0 0 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Inputuri din modal */
.modal input[type="email"],
.modal input[type="text"],
.modal input[type="password"],
[class*="loginBox"] input,
[class*="login-modal"] input {
  width: 100% !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 11px 14px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.modal input:focus,
[class*="loginBox"] input:focus {
  border-color: #dc1e1e !important;
  box-shadow: 0 0 0 3px rgba(220,30,30,0.15) !important;
}

/* Buton Login galben -> rosu */
.modal button[type="submit"],
.modal input[type="submit"],
[class*="loginBox"] button,
[class*="login-modal"] button[type="submit"] {
  background: #dc1e1e !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  width: 100% !important;
  font-size: 15px !important;
}

.modal button[type="submit"]:hover,
[class*="loginBox"] button:hover {
  background: #c01919 !important;
}

/* Checkbox Remember Me */
.modal .checkbox label,
[class*="loginBox"] .checkbox label {
  color: #888 !important;
  font-size: 13px !important;
}

/* Link-uri Forgot / Register */
.modal a,
[class*="loginBox"] a {
  color: #dc1e1e !important;
  text-decoration: none !important;
}

.modal a:hover,
[class*="loginBox"] a:hover {
  text-decoration: underline !important;
  opacity: 0.8 !important;
}


/* ============================================
   Login Dropdown Modal — login.tpl
   ============================================ */

/* Container dropdown */
.user-login .dropdown-menu {
  background: #111111 !important;
  border: 1px solid rgba(220,30,30,0.25) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  min-width: 300px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}

/* Header roz -> rosu */
.user-login .login-header {
  background: #dc1e1e !important;
  padding: 14px 18px !important;
  border-radius: 12px 12px 0 0 !important;
}

.user-login .login-header h6 {
  color: #fff !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.user-login .login-header b {
  color: #fff !important;
}

/* Forgot pass / Register links */
.user-login .forgot-pass {
  padding: 12px 16px 4px !important;
}

.user-login .forgot-pass a {
  color: #dc1e1e !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.user-login .forgot-pass a:hover {
  text-decoration: underline !important;
}

/* Login content box */
.user-login .login-content {
  background: #111111 !important;
  padding: 8px 16px 16px !important;
}

/* Form groups */
.user-login .form-group {
  position: relative !important;
  margin-bottom: 12px !important;
}

.user-login .form-group i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #dc1e1e !important;
  font-size: 14px !important;
  z-index: 1 !important;
}

.user-login .form-control {
  width: 100% !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 10px 14px 10px 36px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.user-login .form-control::placeholder {
  color: #444 !important;
}

.user-login .form-control:focus {
  border-color: #dc1e1e !important;
  box-shadow: 0 0 0 3px rgba(220,30,30,0.15) !important;
}

/* Remember me */
.user-login .custom-control-label {
  color: #888 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.user-login .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #dc1e1e !important;
  border-color: #dc1e1e !important;
}

/* Buton Login galben -> rosu */
.user-login .btn-default-yellow-fill,
.user-login #login {
  background: #dc1e1e !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.user-login .btn-default-yellow-fill:hover,
.user-login #login:hover {
  background: #c01919 !important;
}

/* ============================================
   Logged in — user dropdown
   ============================================ */

/* Avatar section */
.user-login .login-header.on {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: #161616 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px 12px 0 0 !important;
  position: relative !important;
}

.user-login .user-info-avatar img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid #dc1e1e !important;
}

.user-login .user-info-avatar a {
  display: block !important;
  font-size: 11px !important;
  color: #dc1e1e !important;
  text-decoration: none !important;
  margin-top: 2px !important;
  text-align: center !important;
}

.user-login .login-header.on h6 {
  color: #ccc !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.user-login .login-header.on .c-white {
  color: #fff !important;
}

/* Logout btn */
.user-login .logout-btn {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #dc1e1e !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}

.user-login .logout-btn:hover {
  opacity: 0.7 !important;
}

/* Stats row (services/domains/invoices) */
.user-login .user-info-content {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.user-login .user-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 6px !important;
  background: #0d0d0d !important;
  text-decoration: none !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  transition: background 0.2s !important;
}

.user-login .user-info:last-child {
  border-right: none !important;
}

.user-login .user-info:hover {
  background: rgba(220,30,30,0.08) !important;
}

.user-login .user-info i {
  color: #dc1e1e !important;
  font-size: 18px !important;
  margin-bottom: 4px !important;
}

.user-login .number-services {
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.user-login .number-services span {
  display: block !important;
  font-size: 10px !important;
  color: #666 !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Quick links */
.user-login .user-quicklinks {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: #111 !important;
}

.user-login .user-quicklinks li a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: #bbb !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 0.2s, color 0.2s !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.user-login .user-quicklinks li a:hover {
  background: rgba(220,30,30,0.08) !important;
  color: #fff !important;
}

.user-login .user-quicklinks li a i {
  color: #dc1e1e !important;
  font-size: 15px !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}

.user-login .user-quicklinks li a span {
  display: block !important;
  font-size: 11px !important;
  color: #555 !important;
  margin-top: 1px !important;
}

/* Mobile — dropdown sa nu iasa din ecran */
@media (max-width: 768px) {
  .user-login .dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: unset !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }
}