/* ==========================================================================
   SERVICE PROVIDER REGISTRATION FORM (#spregisterForm)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMARY ACTION BUTTON (#ef8002) - Light & Dark Themes
   -------------------------------------------------------------------------- */
#spregisterForm .btn-otp,
#spregisterForm #submitBtn,
#spregisterForm #spSubmitBtn,
#spregisterForm 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: 0.95rem !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease-in-out !important;
    cursor: pointer;
}

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

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

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

#spregisterForm .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;
}

#spregisterForm .form-control:focus {
    box-shadow: none !important;
}

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

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

/* --------------------------------------------------------------------------
   3. SEAMLESS OTP INPUT GROUP (LIGHT THEME)
   -------------------------------------------------------------------------- */
#spregisterForm .otp-box-wrapper .input-group {
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
}

#spregisterForm .otp-box-wrapper .input-group > .form-control {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    margin-right: 0 !important;
}

#spregisterForm .otp-box-wrapper .input-group > .btn,
#spregisterForm .otp-box-wrapper .input-group > #spSendOtpBtn,
#spregisterForm .otp-box-wrapper .input-group > .btn-theme-otp {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Light Theme "Get OTP" Active Button */
#spregisterForm .otp-box-wrapper .input-group > .btn-theme-otp:not(:disabled) {
    background-color: #1e5f3b !important;
    border: 1px solid #1e5f3b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

#spregisterForm .otp-box-wrapper .input-group > .btn-theme-otp:not(:disabled):hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
}

/* Light Theme Disabled / Countdown State */
#spregisterForm .otp-box-wrapper .input-group > .btn-theme-otp:disabled {
    background-color: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    border-left: 1px solid #e9ecef !important;
    color: #495057 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   4. ALERTS SYSTEM (LIGHT THEME)
   -------------------------------------------------------------------------- */
#spResponse .alert,
#spregisterresponse .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;
}

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

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

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

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

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

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

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

body.dark-theme #spregisterForm .form-control {
    background-color: #242628 !important;
    border: 1px solid #33363a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-theme #spregisterForm .form-control:focus {
    border-color: #4b4f56 !important;
    box-shadow: none !important;
}

body.dark-theme #spregisterForm .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 Container */
body.dark-theme #spregisterForm .otp-box-wrapper {
    background-color: #1e2022 !important;
    border: 1px solid #2e3235 !important;
}

/* Dark Theme Seamless OTP Input Group */
body.dark-theme #spregisterForm .otp-box-wrapper .input-group {
    background-color: #242628 !important;
    border: 1px solid #3a3f44 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

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

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

/* Dark Theme "Get OTP" Enabled State */
body.dark-theme #spregisterForm .otp-box-wrapper .btn-theme-otp:not(:disabled) {
    background-color: #215f3c !important;
    border: none !important;
    border-left: 1px solid #3a3f44 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}

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

/* Dark Theme "Resend in XXs" Disabled State */
body.dark-theme #spregisterForm .otp-box-wrapper .btn-theme-otp:disabled {
    background-color: #2e3338 !important;
    border: none !important;
    border-left: 1px solid #3a3f44 !important;
    color: #e5e7eb !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

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

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

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

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

/* Dark Theme Crisp SVG Close Buttons (Color-Matched) */
body.dark-theme #spResponse .alert .btn-close,
body.dark-theme #spregisterresponse .alert .btn-close {
    filter: none !important;
    opacity: 0.85 !important;
    outline: none !important;
    box-shadow: none !important;
}

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

body.dark-theme #spResponse .alert-success .btn-close,
body.dark-theme #spregisterresponse .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 #spResponse .alert-danger .btn-close,
body.dark-theme #spregisterresponse .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;
}


.input-required {
    color: red;
}
.bg-grey-light{
    background:rgba(146, 151, 161, 0.1);
}
.password-input-group{
    position: relative;
}
.password-input-group span{
    width: 40px;
  height: 40px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
#pass, #rePass{
    padding-right:50px;
}
/* Validation Text Colors */
.text-error { color: #dc3545 !important; } /* */
.text-valid { color: #198754 !important; } /* */
.text-pending { color: #fd7e14 !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;}
        .side-img { background: url('../images/rama-iron-sp-register.webp') center/cover; min-height: 100%; }
        .form-control { border-radius: 10px; padding: 12px; }
        
        /* Validation Styling */
        .is-invalid-custom { border-color: #dc3545 !important; }
        .error-feedback { color: #dc3545; font-size: 0.8rem; margin-top: 4px; display: none; }
        
        .whatsapp-box { background-color: rgba(146, 151, 161, 0.1); border-radius: 12px; padding: 15px; margin: 20px 0; }
        .btn-otp { width: 100%;border: none; border-radius: 10px; padding: 10px 40px; color: black !important;
  font-weight: 600;
  background-color: rgb(250, 204, 21) !important; }
        .btn-otp:not(:disabled) { background-color: #ffcb04;
  color: #333; }
        .btn-prev { border: 1.5px solid #333; border-radius: 10px; padding: 10px 40px; background: white; }
@media (max-width: 575px) {
    .main-card {
        margin: 40px auto;
    }
    .main-card h3{
        font-size: 22px;
    }
}