/* ==========================================================================
   RAMA IRON - COMPREHENSIVE AUTHENTICATION & FORM STYLESHEET
   Supports: #sploginForm, #spregisterForm, #registerForm
   ========================================================================== */

/* ==========================================================================
   1. PRIMARY ACTION BUTTONS (#ef8002) - LIGHT & DARK THEMES
   ========================================================================== */
#sploginForm .btn-login,
#sploginForm button[type="submit"],
#spregisterForm .btn-otp,
#spregisterForm #submitBtn,
#spregisterForm #spSubmitBtn,
#spregisterForm button[type="submit"],
#registerForm #submitBtn,
#registerForm button[type="submit"] {
    background-color: #ef8002 !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 50rem !important;
    padding: 13px 28px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease-in-out, transform 0.1s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    width: 100% !important;
}

#sploginForm .btn-login:hover:not(:disabled),
#spregisterForm .btn-otp:hover:not(:disabled),
#spregisterForm #submitBtn:hover:not(:disabled),
#spregisterForm #spSubmitBtn:hover:not(:disabled),
#registerForm #submitBtn:hover:not(:disabled) {
    opacity: 0.9 !important;
    color: #000000 !important;
}

#sploginForm .btn-login:disabled,
#spregisterForm .btn-otp:disabled,
#spregisterForm #submitBtn:disabled,
#spregisterForm #spSubmitBtn:disabled,
#registerForm #submitBtn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   2. LIGHT THEME INPUTS, LABELS & TOGGLES
   ========================================================================== */
#sploginForm .form-label,
#spregisterForm .form-label,
#registerForm .form-label {
    color: #495057 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
}

#sploginForm > .mb-3 > .form-control,
#spregisterForm .form-control:not(.otp-box-wrapper .form-control),
#registerForm .form-control:not(.otp-box-wrapper .form-control) {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: #212529 !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

#sploginForm > .mb-3 > .form-control:focus,
#spregisterForm .form-control:not(.otp-box-wrapper .form-control):focus,
#registerForm .form-control:not(.otp-box-wrapper .form-control):focus {
    border-color: #215f3c !important;
    box-shadow: none !important;
}

#spregisterForm .whatsapp-box {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
}

#spregisterForm .form-check-input:checked {
    background-color: #215f3c !important;
    border-color: #215f3c !important;
}

/* ==========================================================================
   3. SEAMLESS OTP INPUT GROUP (LIGHT THEME)
   ========================================================================== */
.otp-box-wrapper,
#sploginForm .otp-box-wrapper,
#spregisterForm .otp-box-wrapper,
#registerForm .otp-box-wrapper {
    background-color: #f4f6f8 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
}

.otp-box-wrapper .input-group,
#sploginForm .otp-box-wrapper .input-group,
#spregisterForm .otp-box-wrapper .input-group,
#registerForm .otp-box-wrapper .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.otp-box-wrapper .input-group > .form-control,
#sploginForm .otp-box-wrapper .input-group > .form-control,
#spregisterForm .otp-box-wrapper .input-group > .form-control,
#registerForm .otp-box-wrapper .input-group > .form-control {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 11px 16px !important;
    color: #212529 !important;
    font-size: 0.95rem !important;
    width: 1% !important;
    flex: 1 1 auto !important;
    border-radius: 0 !important;
}

/* "Get OTP" Button in Light Mode (#1e5f3b) */
.otp-box-wrapper .btn-theme-otp,
#sploginForm .otp-box-wrapper .btn-theme-otp,
#spregisterForm .otp-box-wrapper .btn-theme-otp,
#registerForm .otp-box-wrapper .btn-theme-otp {
    background-color: #1e5f3b !important;
    border: none !important;
    border-left: 1px solid #d1d5db !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 0 22px !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
}

.otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
#sploginForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
#spregisterForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
#registerForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled) {
    background-color: #184c2f !important;
    color: #ffffff !important;
}

.otp-box-wrapper .btn-theme-otp:disabled,
#sploginForm .otp-box-wrapper .btn-theme-otp:disabled,
#spregisterForm .otp-box-wrapper .btn-theme-otp:disabled,
#registerForm .otp-box-wrapper .btn-theme-otp:disabled {
    background-color: #e5e7eb !important;
    border-left: 1px solid #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Optional Multi-Box OTP styling */
.otp-container {
    max-width: 380px;
    margin: 0 auto;
}

.otp-digit {
    width: 48px !important;
    height: 52px !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   4. ALERTS FEEDBACK SYSTEM (LIGHT THEME)
   ========================================================================== */
#spLoginResponse .alert,
#spResponse .alert,
#spregisterresponse .alert,
#response .alert {
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

#spLoginResponse .alert i,
#spResponse .alert i,
#spregisterresponse .alert i,
#response .alert i {
    font-size: 1.25rem !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#spLoginResponse .alert-success,
#spResponse .alert-success,
#spregisterresponse .alert-success,
#response .alert-success {
    background-color: #d7e8dd !important;
    border: 1px solid #c2decb !important;
    color: #135336 !important;
}

#spLoginResponse .alert-danger,
#spResponse .alert-danger,
#spregisterresponse .alert-danger,
#response .alert-danger {
    background-color: #fde8e8 !important;
    border: 1px solid #f8b4b4 !important;
    color: #9b1c1c !important;
}

#spLoginResponse .btn-close,
#spResponse .btn-close,
#spregisterresponse .btn-close,
#response .btn-close {
    margin-left: auto !important;
    opacity: 0.65 !important;
    outline: none !important;
    box-shadow: none !important;
}

#spLoginResponse .btn-close:hover,
#spResponse .btn-close:hover,
#spregisterresponse .btn-close:hover,
#response .btn-close:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   5. LINKS CONTRAST - LIGHT THEME (DARK ON WHITE, NO COLOR CHANGE ON HOVER)
   ========================================================================== */
#sploginForm .register-link,
#spregisterForm .register-link,
#registerForm .register-link,
#sploginForm a:not(.btn),
#spregisterForm a:not(.btn),
#registerForm a:not(.btn) {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: opacity 0.2s ease !important;
}

#sploginForm .register-link:hover,
#spregisterForm .register-link:hover,
#registerForm .register-link:hover,
#sploginForm a:not(.btn):hover,
#spregisterForm a:not(.btn):hover,
#registerForm a:not(.btn):hover {
    color: #111827 !important;
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   6. DARK THEME OVERRIDES (body.dark-theme)
   ========================================================================== */
body.dark-theme #sploginForm .light-color-text,
body.dark-theme #spregisterForm .light-color-text,
body.dark-theme #spregisterForm .form-label,
body.dark-theme #registerForm .light-color-text {
    color: #d1d5db !important;
}

body.dark-theme #sploginForm .text-muted,
body.dark-theme #sploginForm .text-sub-hint,
body.dark-theme #spregisterForm .text-muted,
body.dark-theme #spregisterForm .text-sub-hint,
body.dark-theme #registerForm .text-muted,
body.dark-theme #registerForm .text-sub-hint {
    color: #9ca3af !important;
}

/* Dark Theme Links: Pure White on Dark (No Color Change on Hover) */
body.dark-theme #sploginForm .register-link,
body.dark-theme #spregisterForm .register-link,
body.dark-theme #registerForm .register-link,
body.dark-theme #sploginForm a:not(.btn),
body.dark-theme #spregisterForm a:not(.btn),
body.dark-theme #registerForm a:not(.btn) {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: opacity 0.2s ease !important;
}

body.dark-theme #sploginForm .register-link:hover,
body.dark-theme #spregisterForm .register-link:hover,
body.dark-theme #registerForm .register-link:hover,
body.dark-theme #sploginForm a:not(.btn):hover,
body.dark-theme #spregisterForm a:not(.btn):hover,
body.dark-theme #registerForm a:not(.btn):hover {
    color: #ffffff !important;
    opacity: 0.85 !important;
    text-decoration: underline !important;
}

/* Outer Input Controls in Dark Theme */
body.dark-theme #sploginForm > .mb-3 > .form-control,
body.dark-theme #spregisterForm .form-control:not(.otp-box-wrapper .form-control),
body.dark-theme #registerForm .form-control:not(.otp-box-wrapper .form-control) {
    background-color: #242628 !important;
    border: 1px solid #33363a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-theme #sploginForm > .mb-3 > .form-control:focus,
body.dark-theme #spregisterForm .form-control:not(.otp-box-wrapper .form-control):focus,
body.dark-theme #registerForm .form-control:not(.otp-box-wrapper .form-control):focus {
    border-color: #4b4f56 !important;
    box-shadow: none !important;
}

body.dark-theme #sploginForm > .mb-3 > .form-control::placeholder,
body.dark-theme #spregisterForm .form-control::placeholder,
body.dark-theme #registerForm .form-control::placeholder {
    color: #6c7179 !important;
}

body.dark-theme #spregisterForm .whatsapp-box {
    background-color: #1e2022 !important;
    border: 1px solid #33363a !important;
}

/* Dark Theme OTP Box Wrapper & Seamless Input Group */
body.dark-theme .otp-box-wrapper,
body.dark-theme #sploginForm .otp-box-wrapper,
body.dark-theme #spregisterForm .otp-box-wrapper,
body.dark-theme #registerForm .otp-box-wrapper {
    background-color: #1e2022 !important;
    border: 1px solid #2e3235 !important;
}

body.dark-theme .otp-box-wrapper .input-group,
body.dark-theme #sploginForm .otp-box-wrapper .input-group,
body.dark-theme #spregisterForm .otp-box-wrapper .input-group,
body.dark-theme #registerForm .otp-box-wrapper .input-group {
    background-color: #242628 !important;
    border: 1px solid #3a3f44 !important;
}

body.dark-theme .otp-box-wrapper .input-group > .form-control,
body.dark-theme #sploginForm .otp-box-wrapper .input-group > .form-control,
body.dark-theme #spregisterForm .otp-box-wrapper .input-group > .form-control,
body.dark-theme #registerForm .otp-box-wrapper .input-group > .form-control {
    background-color: transparent !important;
    color: #ffffff !important;
}

body.dark-theme .otp-box-wrapper .input-group > .form-control::placeholder,
body.dark-theme #sploginForm .otp-box-wrapper .input-group > .form-control::placeholder,
body.dark-theme #spregisterForm .otp-box-wrapper .input-group > .form-control::placeholder,
body.dark-theme #registerForm .otp-box-wrapper .input-group > .form-control::placeholder {
    color: #6b7280 !important;
}

/* Dark Theme "Get OTP" Button */
body.dark-theme .otp-box-wrapper .btn-theme-otp:not(:disabled),
body.dark-theme #sploginForm .otp-box-wrapper .btn-theme-otp:not(:disabled),
body.dark-theme #spregisterForm .otp-box-wrapper .btn-theme-otp:not(:disabled),
body.dark-theme #registerForm .otp-box-wrapper .btn-theme-otp:not(:disabled) {
    background-color: #215f3c !important;
    border: none !important;
    border-left: 1px solid #3a3f44 !important;
    color: #ffffff !important;
}

body.dark-theme .otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
body.dark-theme #sploginForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
body.dark-theme #spregisterForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled),
body.dark-theme #registerForm .otp-box-wrapper .btn-theme-otp:hover:not(:disabled) {
    background-color: #1a4d31 !important;
    color: #ffffff !important;
}

body.dark-theme .otp-box-wrapper .btn-theme-otp:disabled,
body.dark-theme #sploginForm .otp-box-wrapper .btn-theme-otp:disabled,
body.dark-theme #spregisterForm .otp-box-wrapper .btn-theme-otp:disabled,
body.dark-theme #registerForm .otp-box-wrapper .btn-theme-otp:disabled {
    background-color: #2e3338 !important;
    border: none !important;
    border-left: 1px solid #3a3f44 !important;
    color: #e5e7eb !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   7. DARK THEME ALERTS & CRISP SVG CLOSE BUTTONS
   ========================================================================== */
body.dark-theme #spLoginResponse .alert-success,
body.dark-theme #spResponse .alert-success,
body.dark-theme #spregisterresponse .alert-success,
body.dark-theme #response .alert-success {
    background-color: #10291d !important;
    border: 1px solid #1e4f35 !important;
    color: #4ade80 !important;
}

body.dark-theme #spLoginResponse .alert-success .bi-check-circle-fill,
body.dark-theme #spResponse .alert-success .bi-check-circle-fill,
body.dark-theme #spregisterresponse .alert-success .bi-check-circle-fill,
body.dark-theme #response .alert-success .bi-check-circle-fill {
    color: #4ade80 !important;
}

body.dark-theme #spLoginResponse .alert-danger,
body.dark-theme #spResponse .alert-danger,
body.dark-theme #spregisterresponse .alert-danger,
body.dark-theme #response .alert-danger {
    background-color: #2b1315 !important;
    border: 1px solid #541d21 !important;
    color: #f87171 !important;
}

body.dark-theme #spLoginResponse .alert-danger .bi-exclamation-triangle-fill,
body.dark-theme #spResponse .alert-danger .bi-exclamation-triangle-fill,
body.dark-theme #spregisterresponse .alert-danger .bi-exclamation-triangle-fill,
body.dark-theme #response .alert-danger .bi-exclamation-triangle-fill {
    color: #f87171 !important;
}

/* Crisp Vector SVG Close Button for Dark Mode Alerts */
body.dark-theme #spLoginResponse .alert .btn-close,
body.dark-theme #spResponse .alert .btn-close,
body.dark-theme #spregisterresponse .alert .btn-close,
body.dark-theme #response .alert .btn-close {
    filter: none !important;
    opacity: 0.85 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: opacity 0.15s ease !important;
}

body.dark-theme #spLoginResponse .alert .btn-close:hover,
body.dark-theme #spResponse .alert .btn-close:hover,
body.dark-theme #spregisterresponse .alert .btn-close:hover,
body.dark-theme #response .alert .btn-close:hover {
    opacity: 1 !important;
}

body.dark-theme #spLoginResponse .alert-success .btn-close,
body.dark-theme #spResponse .alert-success .btn-close,
body.dark-theme #spregisterresponse .alert-success .btn-close,
body.dark-theme #response .alert-success .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234ade80'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

body.dark-theme #spLoginResponse .alert-danger .btn-close,
body.dark-theme #spResponse .alert-danger .btn-close,
body.dark-theme #spregisterresponse .alert-danger .btn-close,
body.dark-theme #response .alert-danger .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f87171'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}


.main-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    margin: 60px auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.dark-theme .main-card {
    background: #1f1f20;
}
/* Construction visual from image_8d0e34.jpg */
.side-image {
    background: url('../images/rama-iron-sp-login.webp') center/cover; min-height: 100%;
}

.welcome-text { font-size: 14px; color: #6c757d; margin-bottom: 2px; }
.brand-title { font-weight: 700; margin-bottom: 15px; }

.form-label { font-size: 0.85rem; color: #495057; font-weight: 500; }

.form-control {
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    margin-bottom: 4px;
}

.forgot-link {
    font-size: 0.85rem;
    color: #333;
    text-decoration: none;
    display: block;
    text-align: right;
    margin-bottom: 20px;
}

/* OTP Radio styling from image_8d0a36.jpg */
.otp-section {
    font-size: 0.85rem;
    color: #495057;
    margin-top: 10px;
    margin-bottom: 30px;
}

.btn-login, .btn-login:hover, .btn-login:focus, .btn-login:active {
    background-color: rgb(250, 204, 21);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
  color: #000;
  width: 100%;
  transition: 0.3s;
}

.register-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}
.password-input-group{
    position: relative;
}
.password-input-group span{
    width: 40px;
  height: 40px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
@media (max-width: 575px) {
    .main-card {
        margin: 40px auto;
    }
    .main-card .brand-title{
        font-size: 22px;
    }
}