/* ===================================================
   READY PRODUCTS SUITE — style.css v3
   Font: Plus Jakarta Sans (loaded via PHP enqueue)
=================================================== */

:root {
  --rps-primary:       #ff7400;
  --rps-primary-dark:  #e66900;
  --rps-primary-light: #fff5eb;
  --rps-text:          #1a1a1a;
  --rps-text-muted:    #64748b;
  --rps-bg:            #fafbfc;
  --rps-border:        #e2e8f0;
  --rps-ff:            'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ===================================================
   AUTH BUTTONS — header
=================================================== */
.rps-auth-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  font-family: var(--rps-ff) !important;
}
.rps-auth-logged-out,
.rps-auth-logged-in {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.rps-auth-logged-in.hidden,
.rps-auth-logged-out.hidden { display: none !important; }

.rps-user-name {
  font-weight: 700 !important;
  color: var(--rps-text) !important;
  font-size: 14px !important;
  font-family: var(--rps-ff) !important;
  white-space: nowrap !important;
}

/* ===== HEADER BUTTONS — hard reset against theme ===== */
.rps-auth-buttons .rps-btn,
.rps-btn-login,
.rps-btn-logout,
.rps-auth-buttons .rps-btn.rps-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  height: 40px !important;
  min-height: unset !important;
  max-height: 40px !important;
  width: auto !important;
  min-width: unset !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.rps-btn-login {
  background: transparent !important;
  color: var(--rps-text) !important;
  border: 1.5px solid var(--rps-border) !important;
}
.rps-btn-login:hover {
  border-color: var(--rps-primary) !important;
  color: var(--rps-primary) !important;
  background: var(--rps-primary-light) !important;
  transform: none !important;
}

.rps-auth-buttons .rps-btn.rps-btn-primary {
  background: var(--rps-primary) !important;
  color: #ffffff !important;
  border: none !important;
}
.rps-auth-buttons .rps-btn.rps-btn-primary:hover {
  background: var(--rps-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(255,116,0,0.3) !important;
  transform: translateY(-1px) !important;
}

.rps-btn-logout {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: none !important;
}
.rps-btn-logout:hover {
  background: #fecaca !important;
  transform: none !important;
}

/* ===================================================
   OVERLAY
=================================================== */
.rps-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.rps-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile view */
@media (max-width: 768px) {
  #signup-step-1, 
  #signup-step-2,
#signup-step-3{
    width: 100% !important;
    max-width: 380px; /* adjust as needed */
  }
}

/* ===================================================
   MODAL — base
=================================================== */
.rps-modal {
  background: #ffffff !important;
  width: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3) !important;
  position: relative !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  transform: translateY(24px) !important;
  opacity: 0 !important;
  transition: transform 0.35s ease, opacity 0.35s ease !important;
  box-sizing: border-box !important;
  font-family: var(--rps-ff) !important;
}
.rps-overlay.active .rps-modal {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.rps-signup-modal { width: auto !important; }
.rps-login-modal  { max-width: 500px !important;  width: 500px !important;}



#signup-step-3 {
	width : 800px !important
}

#signup-step-1 , 
#signup-step-2 {
	width : 500px !important
}


.rps-modal::-webkit-scrollbar { width: 5px; }
.rps-modal::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.rps-modal::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ===================================================
   CLOSE BUTTON — full reset, theme-proof
=================================================== */
button.rps-modal-close,
.rps-modal-close {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; max-width: 32px !important;
  min-height: 32px !important; max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: Arial, sans-serif !important;
  transition: background 0.2s, color 0.2s !important;
}
button.rps-modal-close:hover,
.rps-modal-close:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===================================================
   MODAL HEADERS
=================================================== */
.rps-modal-header {
  padding: 32px 30px 18px !important;
  text-align: center !important;
}
.rps-header-simple {
  background: var(--rps-primary-light) !important;
  padding: 26px 30px 20px !important;
  border-bottom: 1px solid rgba(255,116,0,0.12) !important;
  text-align: center !important;
}
.rps-header-otp {
  padding: 26px 30px 20px !important;
  text-align: center !important;
}

/* All headings inside modal — force visibility */
.rps-modal h2,
.rps-modal .rps-modal-header h2,
.rps-modal .rps-header-otp h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  font-family: var(--rps-ff) !important;
  color: var(--rps-text) !important;
  line-height: 1.2 !important;
}

.rps-modal .rps-header-simple h2 {
  background: linear-gradient(135deg, var(--rps-primary) 0%, var(--rps-primary-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.rps-modal .rps-header-otp h2 {
  color: var(--rps-primary) !important;
  -webkit-text-fill-color: var(--rps-primary) !important;
}

.rps-modal p {
  color: var(--rps-text-muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
  font-family: var(--rps-ff) !important;
}

/* ===================================================
   MODAL BODY
=================================================== */
.rps-modal-body {
  padding: 26px 30px 30px !important;
  box-sizing: border-box !important;
}
.rps-otp-body {
  text-align: center !important;
  padding-top: 18px !important;
}

.rps-otp-body h3 {
  font-size: 16px !important;
  color : #000 !important;
}
.rps-profile-body {
  padding: 20px 30px 30px !important;
  box-sizing: border-box !important;
}

/* ===================================================
   FORM GROUPS & LABELS
=================================================== */
.rps-modal .rps-form-group {
  margin-bottom: 18px !important;
}
.rps-modal .rps-form-group label,
.rps-modal label {
  display: block ;
  margin-bottom: 7px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  font-family: var(--rps-ff) !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  line-height: 1.4 !important;
}
.rps-modal .required { color: #e74c3c !important; }

/* ===================================================
   INPUTS — nuclear override for dark themes
=================================================== */
.rps-modal input,
.rps-modal input[type="text"],
.rps-modal input[type="email"],
.rps-modal input[type="password"],
.rps-modal input[type="tel"],
.rps-modal input[type="number"],
.rps-modal select,
.rps-modal textarea,
.rps-form-input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  height: 50px !important;
  width: 100%;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-family: var(--rps-ff) !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.rps-otp-box  {
	width: auto !important;
	  margin-top : 20px !important;
}


.rps-modal input[type="email"] {
  padding-left: 44px !important;
  background-color: var(--rps-primary-light) !important;
  background: var(--rps-primary-light) !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

.rps-modal input:focus,
.rps-modal select:focus {
  border-color: var(--rps-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,116,0,0.15) !important;
  outline: none !important;
}
.rps-modal input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Input icon */
.rps-input-wrapper { position: relative !important; }
.rps-input-icon {
  position: absolute !important;
  left: 13px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important; height: 18px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

/* ===================================================
   PHONE INPUT
=================================================== */
.rps-modal .rps-phone-input {
  display: flex !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.rps-modal .rps-phone-input:focus-within {
  border-color: var(--rps-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,116,0,0.15) !important;
}
.rps-modal .rps-country-select {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex: 0 0 80px !important;
  height: 50px !important;
  border: none !important;
  border-right: 1.5px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: #f8f9fa !important;
  padding: 0 8px !important;
  font-size: 14px !important;
  font-family: var(--rps-ff) !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
.rps-modal .rps-phone-input input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  height: 50px !important;
  background: #fff !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  width: auto !important;
}

/* ===================================================
   SELECT
=================================================== */
.rps-modal select,
.rps-modal .rps-form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px !important;
  padding-right: 40px !important;
}

/* ===================================================
   DOMAIN INPUT
=================================================== */
.rps-modal .rps-domain-input {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.rps-modal .rps-domain-input:focus-within {
  border-color: var(--rps-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,116,0,0.15) !important;
}
.rps-modal .rps-domain-prefix,
.rps-modal .rps-domain-suffix {
  padding: 0 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  background: #f8f9fa !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border: none !important;
  font-family: var(--rps-ff) !important;
}
.rps-modal .rps-domain-prefix { border-right: 1px solid #e2e8f0 !important; }
.rps-modal .rps-domain-suffix { border-left: 1px solid #e2e8f0 !important; }
.rps-modal .rps-domain-input input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
  height: 50px !important;
  background: #fff !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  width: auto !important;
}
.rps-domain-preview {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
  word-break: break-all !important;
  font-family: var(--rps-ff) !important;
}
.rps-domain-preview span { color: var(--rps-primary) !important; }

/* ===================================================
   PASSWORD TOGGLE — hard reset
=================================================== */
.rps-modal .rps-password-input { position: relative !important; }
.rps-modal .rps-password-input input { padding-right: 50px !important; }

button.rps-toggle-password,
.rps-modal .rps-toggle-password {
  position: absolute !important;
  right: 12px !important; top: 25px !important;
  transform: translateY(-50%) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 4px !important;
  margin: 0 !important;
  width: 28px !important; height: 28px !important;
  min-width: unset !important; max-width: unset !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transition: color 0.2s !important;
	 z-index: 2 !important;
}





button.rps-toggle-password:hover,
.rps-modal .rps-toggle-password:hover {
  color: var(--rps-primary) !important;
  background: none !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}
.rps-modal .rps-toggle-password svg {
  width: 18px !important; height: 18px !important;
  display: block !important;
}

/* ===================================================
   OTP BOXES — nuclear override
=================================================== */
.rps-otp-inputs {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
input.rps-otp-box,
.rps-modal .rps-otp-box,
.rps-otp-box {
  width: 62px !important; height: 70px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  font-family: var(--rps-ff) !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  flex-shrink: 0 !important;
}
input.rps-otp-box:focus,
.rps-modal .rps-otp-box:focus {
  border-color: var(--rps-primary) !important;
  box-shadow: 0 0 0 4px rgba(255,116,0,0.15) !important;
  transform: scale(1.06) !important;
  background: var(--rps-primary-light) !important;
  outline: none !important;
}
input.rps-otp-box::placeholder { color: #d1d5db !important; }

/* OTP header text */
.rps-modal .rps-otp-header h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  margin: 0 0 6px 0 !important;
  font-family: var(--rps-ff) !important;
}

/* ===================================================
   RESEND + CHANGE EMAIL — hard reset
=================================================== */
button.rps-resend-link,
.rps-modal .rps-resend-link {
  display: inline-block !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--rps-primary) !important;
  -webkit-text-fill-color: var(--rps-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  padding: 8px 16px !important;
  margin-bottom: 8px !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
button.rps-resend-link:hover,
.rps-modal .rps-resend-link:hover {
  text-decoration: underline !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}
button.rps-resend-link:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

button.rps-change-email,
.rps-modal .rps-change-email {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  padding: 8px 14px !important;
  margin: 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  text-transform: none !important;
}
button.rps-change-email:hover,
.rps-modal .rps-change-email:hover {
  color: var(--rps-text) !important;
  background: #f1f5f9 !important;
  transform: none !important;
}
.rps-modal .rps-change-email svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

/* ===================================================
   FULL-WIDTH MODAL PRIMARY BUTTON
=================================================== */
.rps-modal .rps-btn-primary,
.rps-modal button.rps-btn-primary {
  width: 100% !important;
  height: 50px !important;
  background: linear-gradient(135deg, var(--rps-primary) 0%, var(--rps-primary-dark) 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rps-modal .rps-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255,116,0,0.35) !important;
}
.rps-modal .rps-btn-primary:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ===================================================
   SECONDARY BUTTON (Cancel)
=================================================== */
.rps-modal .rps-btn-secondary,
.rps-modal button.rps-btn-secondary {
  height: 50px !important;
  padding: 0 24px !important;
  background: #ffffff !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: unset !important;
}
.rps-modal .rps-btn-secondary:hover {
  background: #f8f9fa !important;
  border-color: var(--rps-primary) !important;
  transform: none !important;
}

/* ===================================================
   FORM ACTIONS (Cancel + Submit row)
=================================================== */
.rps-modal .rps-form-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e2e8f0 !important;
}
.rps-modal .rps-form-actions .rps-btn-secondary {
  flex: 0 0 auto !important; width: auto !important;
}
.rps-modal .rps-form-actions .rps-btn-primary {
  flex: 1 !important; width: auto !important;
}

/* ===================================================
   PROFILE UPLOAD
=================================================== */
.rps-profile-upload { text-align: center !important; margin-bottom: 22px !important; }
.rps-upload-circle {
  width: 96px !important; height: 96px !important;
  border-radius: 50% !important;
  border: 2px solid var(--rps-primary) !important;
  background: var(--rps-primary-light) !important;
  background-color: var(--rps-primary-light) !important;
  margin: 0 auto 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  background-size: cover !important; background-position: center !important;
}
.rps-upload-circle:hover { background-color: #ffe4c8 !important; }
.rps-upload-circle svg { width: 36px !important; height: 36px !important; color: var(--rps-primary) !important; }
.rps-camera-icon {
  position: absolute !important; bottom: 9px !important; right: 9px !important;
  width: 28px !important; height: 28px !important;
  background: var(--rps-primary) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 3px solid #fff !important;
}
.rps-camera-icon svg { width: 13px !important; height: 13px !important; color: #fff !important; }
.rps-upload-text { font-size: 13px !important; color: #64748b !important; font-family: var(--rps-ff) !important; }

/* ===================================================
   MODAL FOOTER
=================================================== */
.rps-modal-footer {
  text-align: center !important;
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
  font-family: var(--rps-ff) !important;
}
.rps-modal-footer a {
  color: var(--rps-primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.rps-modal-footer a:hover { text-decoration: underline !important; }

/* ===================================================
   SPINNER
=================================================== */
.rps-spinner {
  display: inline-block !important;
  width: 17px !important; height: 17px !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-radius: 50% !important;
  border-top-color: #fff !important;
  animation: rpsSpin 0.8s linear infinite !important;
  flex-shrink: 0 !important;
}
@keyframes rpsSpin { to { transform: rotate(360deg); } }

/* ===================================================
   STEP TRANSITION
=================================================== */
.rps-step { display: none !important; }
.rps-step.active {display: block !important; animation: rpsSlideIn 0.3s ease !important; }
@keyframes rpsSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===================================================
   ERROR UI
=================================================== */
.rps-error { color: #dc2626 !important; font-size: 12px !important; margin-top: 4px !important; display: block !important; font-family: var(--rps-ff) !important; }
@keyframes rpsShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.rps-error-animate { animation: rpsShake 0.3s ease !important; }

.hidden { display: none !important; }

/* ===================================================
   PRICING TABLE
=================================================== */
.rps-pricing-section {
  padding: 80px 20px !important;
  background: #f8f9fa !important;
  box-sizing: border-box !important;
  font-family: var(--rps-ff) !important;
}
.rps-pricing-container { max-width: 1140px !important; margin: 0 auto !important; }

.rps-pricing-header { text-align: center !important; margin-bottom: 52px !important; }
.rps-pricing-label {
  color: var(--rps-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  display: block !important;
}
.rps-pricing-title {
  /* Solid color — no gradient; gradient was rendering invisible on some themes */
  font-size: 34px !important;
  font-weight: 800 !important;
  margin: 10px 0 0 !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: none !important;
  font-family: var(--rps-ff) !important;
}

/* Flex layout to allow featured to be in the center and taller */
.rps-pricing-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(3, 1fr); /* 👈 3 in a row */
  align-items: center !important;
  justify-content: center !important;
}

.rps-pricing-card {
background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px !important;
  border: 1px solid #e5e7eb !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.25s !important;

  /* ❌ REMOVE THESE */
  /* flex: 1 !important; */
  /* margin: 0 10px !important; */

  /* ✅ ADD THIS */
  width: 100% !important;

}

@media (max-width: 480px) {
  .rps-pricing-grid {
    grid-template-columns: 1fr !important;
  }
}




.rps-pricing-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important; }

/* Featured card — bigger, centered, elevated */
.rps-pricing-card.featured {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,116,0,0.4) !important;
  box-shadow: 0 24px 64px rgba(255,116,0,0.22) !important;
  border-radius: 24px !important;
  padding: 36px 28px !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 1.1 !important;
}

.rps-pricing-plan-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  font-family: var(--rps-ff) !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.rps-pricing-price {
  font-size: 36px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-family: var(--rps-ff) !important;
}
.rps-pricing-price span {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
.rps-pricing-card.featured .rps-pricing-price span {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

.rps-pricing-info {
  background: rgba(255,116,0,0.07) !important;
  padding: 14px !important;
  border-radius: 12px !important;
  margin: 18px 0 !important;
  font-size: 14px !important;
  font-family: var(--rps-ff) !important;
}
.rps-pricing-info p { margin: 0 0 6px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
.rps-pricing-info p:last-child { margin: 0 !important; }
/* Dark card info bg */
.rps-pricing-card.featured .rps-pricing-info { background: rgba(255,255,255,0.1) !important; }

.rps-pricing-btn {
  background: var(--rps-primary) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  padding: 14px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  margin: 0 0 20px !important;
  transition: background 0.25s, transform 0.2s !important;
  width: 100% !important;
  font-size: 15px !important;
  font-family: var(--rps-ff) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rps-pricing-btn:hover { background: var(--rps-primary-dark) !important; transform: translateY(-2px) !important; }

/* Feature pills */
.rps-pricing-features {
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 8px !important;
  margin-top: auto !important;
}

.rps-pricing-feature {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-family: var(--rps-ff) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
}
/* White cards — orange text on light bg */
.rps-pricing-card:not(.featured) .rps-pricing-feature {
  background: rgba(255,116,0,0.1) !important;
  color: #c05600 !important;
  -webkit-text-fill-color: #c05600 !important;
}
.rps-pricing-card:not(.featured) .rps-pricing-feature.disabled {
  opacity: 0.4 !important;
  filter: grayscale(1) !important;
}
/* Dark featured card — white text on semi-white bg */
.rps-pricing-card.featured .rps-pricing-feature {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.rps-pricing-card.featured .rps-pricing-feature.disabled {
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
}

/* Plan name and price on white cards — dark & visible */
.rps-pricing-card:not(.featured) .rps-pricing-plan-title {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.rps-pricing-card:not(.featured) .rps-pricing-price {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.rps-pricing-card:not(.featured) .rps-pricing-info p {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* ===================================================
   RESPONSIVE — TABLET (481–768px)
=================================================== */
@media (max-width: 900px) {
  .rps-pricing-grid {
    
    align-items: stretch !important;
  }
  .rps-pricing-card,
  .rps-pricing-card.featured {
    margin: 0 0 16px 0 !important;
    flex: unset !important;
  }
  .rps-pricing-card.featured { padding: 28px !important; }
}


@media (min-width: 481px) and (max-width: 768px) {
  .rps-modal-body { padding: 20px 22px 24px !important; }
  .rps-header-simple,
  .rps-modal-header { padding: 22px 22px 14px !important; }
  .rps-modal .rps-domain-prefix { display: none !important; }
}

/* ===================================================
   RESPONSIVE — MOBILE (≤480px)
=================================================== */
@media (max-width: 480px) {
  .rps-overlay {
    padding: 5px 10px 0px 5px !important;
    
  }
  .rps-modal {
    max-width: 100% !important;

    max-height: 95vh !important;
  }
  .rps-modal-header     { padding: 20px 18px 12px !important; }
  .rps-header-simple    { padding: 18px 18px 14px !important; }
  .rps-modal-body       { padding: 16px 18px 22px !important; }
  .rps-profile-body     { padding: 14px 18px 22px !important; }

  .rps-otp-inputs       { gap: 8px !important; }
  input.rps-otp-box,
  .rps-modal .rps-otp-box { width: 52px !important; height: 60px !important; font-size: 22px !important; }

  .rps-modal .rps-domain-prefix    { display: none !important; }
  .rps-modal .rps-domain-suffix    { font-size: 11px !important; padding: 0 6px !important; }

  .rps-modal .rps-form-actions {
    flex-wrap: wrap !important;
  }
  .rps-modal .rps-form-actions .rps-btn-secondary,
  .rps-modal .rps-form-actions .rps-btn-primary {
    width: 100% !important; flex: unset !important;
  }

  .rps-auth-buttons { flex-direction: column !important; width: 100% !important; }
  .rps-auth-buttons .rps-btn { width: 100% !important; }

  .rps-pricing-section  { padding: 48px 14px !important; }
  .rps-pricing-title    { font-size: 24px !important; }
}

/* ===================================================
   PROFILE PIC PREVIEW — ensure img renders over placeholder
=================================================== */
.rps-upload-circle {
  overflow: hidden !important;
}
.rps-upload-circle img.rps-profile-preview {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 1 !important;
}
.rps-upload-circle .rps-camera-icon {
  z-index: 2 !important;
}



/* ===================================================
   BILLING TOGGLE
=================================================== */
.rps-billing-toggle {
  display: inline-flex !important;
  background: #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 4px !important;
  margin-top: 20px !important;
  font-family: var(--rps-ff) !important;
}
.rps-toggle-btn {
  padding: 9px 22px !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--rps-text-muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
  white-space: nowrap !important;
}
.rps-toggle-btn.active {
  background: #ffffff !important;
  color: var(--rps-text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}
.rps-save-badge {
  background: #dcfce7 !important;
  color: #16a34a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-family: var(--rps-ff) !important;
}
 
/* ===================================================
   PRICING CARD — restructured inner elements
=================================================== */
.rps-pricing-card { position: relative !important; }
 
.rps-popular-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--rps-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  font-family: var(--rps-ff) !important;
  letter-spacing: .04em !important;
}
 
/* Price line */
.rps-pricing-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  margin: 10px 0 4px !important;
}
.rps-currency-sym {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.rps-price-amount {
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-family: var(--rps-ff) !important;
}
.rps-price-period {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  margin-left: 2px !important;
}
.rps-pricing-card.featured .rps-price-period {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
.rps-price-custom {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--rps-primary) !important;
  -webkit-text-fill-color: var(--rps-primary) !important;
  font-family: var(--rps-ff) !important;
}
.rps-price-yearly-note {
  font-size: 12px !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  margin: 0 0 4px 0 !important;
  font-family: var(--rps-ff) !important;
  min-height: 18px !important;
}
.rps-pricing-card.featured .rps-price-yearly-note {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
 
/* Info rows */
.rps-pricing-info {
  padding: 14px !important;
  border-radius: 12px !important;
  margin: 14px 0 !important;
  font-family: var(--rps-ff) !important;
}
.rps-info-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.rps-info-row:last-child { border-bottom: none !important; }
.rps-info-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--rps-text-muted) !important;
  -webkit-text-fill-color: var(--rps-text-muted) !important;
  font-family: var(--rps-ff) !important;
}
.rps-info-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--rps-text) !important;
  -webkit-text-fill-color: var(--rps-text) !important;
  font-family: var(--rps-ff) !important;
}
.rps-pricing-card.featured .rps-info-label {
  color: rgba(255,255,255,0.6) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}
.rps-pricing-card.featured .rps-info-val {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.rps-pricing-card.featured .rps-info-row {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
 
/* Panels label */
.rps-panels-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--rps-text-muted) !important;
  -webkit-text-fill-color: var(--rps-text-muted) !important;
  margin: 14px 0 8px !important;
  font-family: var(--rps-ff) !important;
}
.rps-pricing-card.featured .rps-panels-label {
  color: rgba(255,255,255,0.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}
 
/* Feature pills */
.rps-feat-icon { font-size: 11px !important; }
 
/* ===================================================
   CUSTOM / ENTERPRISE CARD
=================================================== */
.rps-card-custom {
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
}
.rps-card-custom .rps-pricing-plan-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--rps-text-muted) !important;
  -webkit-text-fill-color: var(--rps-text-muted) !important;
  margin-bottom: 6px !important;
}
.rps-pricing-btn-custom {
  background: var(--rps-primary) !important;
  color: #fff !important;
}
.rps-pricing-btn-custom:hover {
  background: var(--rps-primary-dark) !important;
}
 
.rps-custom-perks {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  font-family: var(--rps-ff) !important;
}
.rps-custom-perks li {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rps-text) !important;
  -webkit-text-fill-color: var(--rps-text) !important;
  padding: 5px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
 
/* ===================================================
   RESPONSIVE ADJUSTMENTS
=================================================== */
@media (max-width: 900px) {
  .rps-billing-toggle { flex-wrap: wrap !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  .rps-toggle-btn { padding: 8px 14px !important; font-size: 13px !important; }
  .rps-price-amount { font-size: 34px !important; }
}


.rps-plan-description {
	font-size: 14px !important;
	margin: 20px 0px;
	color : #c2c2c2;
}

.rps-plan-description.featured {
	font-size: 14px !important;
	margin: 20px 0px;
	color : #ffffff;
}


/* ===================================================
   RPS — RESPONSIVE + INVOICE/CONFIRM MODALS
   Append this block to style.css
   (replaces the old responsive sections at the bottom)
=================================================== */

/* ===================================================
   PRICING GRID — desktop: 2-col if 4+ cards, flex otherwise
=================================================== */
/* .rps-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.rps-pricing-card {
  flex: unset !important;
  max-width: unset !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.rps-pricing-card.featured {
  flex: unset !important;
  max-width: unset !important;
}
 */
/* ===================================================
   TABLET — 481px to 900px
=================================================== */
@media (min-width: 481px) and (max-width: 900px) {
  /* Modals */
  .rps-modal-body       { padding: 20px 22px 24px !important; }
  .rps-header-simple,
  .rps-modal-header     { padding: 22px 22px 14px !important; }
  .rps-modal .rps-domain-prefix { display: none !important; }

  /* Login / signup modal sizing */
  .rps-login-modal      { max-width: 92vw !important; width: 92vw !important; }
  .rps-signup-modal     { max-width: 92vw !important; }
  #signup-step-3        { width: 92vw !important; max-width: 680px !important; }
  #signup-step-1,
  #signup-step-2        { width: 92vw !important; max-width: 480px !important; }

  /* Confirm / invoice modals */
  .rps-confirm-modal,
  .rps-invoice-modal    { max-width: 92vw !important; width: 92vw !important; }

  /* Pricing */
  .rps-pricing-section  { padding: 60px 16px !important; }
/*   .rps-pricing-grid     { gap: 16px !important; grid-template-columns: repeat(2, 1fr) !important; }
  .rps-pricing-card     { flex: 1 1 calc(50% - 16px) !important; max-width: calc(50% - 8px) !important; }
  .rps-pricing-card.featured { flex: 1 1 calc(50% - 16px) !important; max-width: calc(50% - 8px) !important; padding: 28px !important; }
  .rps-card-custom      { flex: 1 1 calc(50% - 16px) !important; max-width: calc(50% - 8px) !important; }
 */
  /* Billing toggle */
  .rps-billing-toggle   { flex-wrap: wrap !important; justify-content: center !important; }

  /* Profile grid on step 3 */
  .rps-profile-grid     { grid-template-columns: 1fr 1fr !important; }

  /* Auth header buttons */
  .rps-auth-buttons     { gap: 8px !important; }
}

/* ===================================================
   MOBILE — ≤480px
=================================================== */
@media (max-width: 480px) {
  /* Overlay — sheet from bottom */
  .rps-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-bottom-left-radius: 18 !important;
    border-bottom-right-radius: 18 !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    max-height: 95vh !important;
    margin: 8px ;
  }

  /* Modal inner spacing */
  .rps-modal-header     { padding: 20px 18px 12px !important; }
  .rps-header-simple    { padding: 18px 18px 14px !important; }
  .rps-modal-body       { padding: 16px 18px 22px !important; }
  .rps-profile-body     { padding: 14px 18px 22px !important; }
  .rps-modal h2         { font-size: 20px !important; }

  /* OTP boxes */
  .rps-otp-inputs       { gap: 8px !important; }
  input.rps-otp-box,
  .rps-modal .rps-otp-box {
    width: 52px !important; height: 60px !important; font-size: 22px !important;
  }

  /* Domain input */
  .rps-modal .rps-domain-prefix { display: none !important; }
  .rps-modal .rps-domain-suffix { font-size: 10px !important; padding: 0 6px !important; }

  /* Form actions stack vertically */
  .rps-modal .rps-form-actions  { flex-wrap: wrap !important; }
  .rps-modal .rps-form-actions .rps-btn-secondary,
  .rps-modal .rps-form-actions .rps-btn-primary {
    width: 100% !important; flex: unset !important;
  }

  /* Confirm modal action row */
  .rps-confirm-actions  { flex-direction: column !important; gap: 10px !important; }
  .rps-confirm-actions .rps-btn-secondary,
  .rps-confirm-actions .rps-btn-primary { width: 100% !important; }

  /* Header auth buttons */
  .rps-auth-buttons     { flex-direction: column !important; width: 100% !important; }
  .rps-auth-buttons .rps-btn { width: 100% !important; }

  /* Pricing — single column */
  .rps-pricing-section  { padding: 40px 14px !important; }
  .rps-pricing-title    { font-size: 22px !important; }
/*   .rps-pricing-grid     { flex-direction: column !important; gap: 14px !important; grid-template-columns: repeat(1, 1fr) !important;}
  .rps-pricing-card,
  .rps-pricing-card.featured,
  .rps-card-custom      {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  } */
  .rps-pricing-card.featured { padding: 24px !important; }
  .rps-popular-badge    { font-size: 10px !important; padding: 3px 12px !important; }
  .rps-price-amount     { font-size: 36px !important; }
  .rps-currency-sym     { font-size: 18px !important; }
  .rps-pricing-features { grid-template-columns: 1fr 1fr !important; }

  /* Toggle */
  .rps-toggle-btn       { padding: 8px 14px !important; font-size: 13px !important; }
  .rps-save-badge       { font-size: 10px !important; padding: 2px 5px !important; }

  /* Profile grid on step 3 — single col */
  .rps-profile-grid     { grid-template-columns: 1fr !important; }
}

/* ===================================================
   PROFILE STEP 3 — 2-col grid on desktop/tablet
=================================================== */
.rps-profile-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 18px !important;
}
.rps-profile-grid .rps-form-group.full-width {
  grid-column: 1 / -1 !important;
}

/* ===================================================
   CONFIRM PURCHASE MODAL
=================================================== */
.rps-confirm-modal {
  max-width: 460px !important;
  width: 460px !important;
  padding: 36px 32px 32px !important;
  text-align: center !important;
}
.rps-confirm-icon {
  width: 64px !important; height: 64px !important;
  background: var(--rps-primary-light) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 18px !important;
}
.rps-confirm-icon svg { width: 30px !important; height: 30px !important; color: var(--rps-primary) !important; }
.rps-confirm-modal h2 {
  font-size: 20px !important; font-weight: 800 !important;
  margin: 0 0 10px !important; color: var(--rps-text) !important;
  -webkit-text-fill-color: var(--rps-text) !important;
}
.rps-confirm-modal p {
  font-size: 14px !important; color: var(--rps-text-muted) !important;
  -webkit-text-fill-color: var(--rps-text-muted) !important;
  margin: 0 0 6px !important; line-height: 1.5 !important;
}
.rps-confirm-plan-badge {
  display: inline-block !important;
  background: var(--rps-primary-light) !important;
  color: var(--rps-primary) !important;
  -webkit-text-fill-color: var(--rps-primary) !important;
  font-weight: 800 !important; font-size: 13px !important;
  padding: 5px 14px !important; border-radius: 20px !important;
  margin: 8px 0 22px !important;
  font-family: var(--rps-ff) !important;
}
.rps-confirm-actions {
  display: flex !important; gap: 12px !important;
  justify-content: center !important; align-items: center !important;
  margin-top: 4px !important;
}
.rps-confirm-actions .rps-btn-secondary {
  flex: 1 !important; height: 48px !important;
}
.rps-confirm-actions .rps-btn-primary {
  flex: 1 !important; height: 48px !important;
  width: auto !important;
}

/* ===================================================
   INVOICE MODAL
=================================================== */
.rps-invoice-modal {
  max-width: 480px !important;
  width: 480px !important;
  padding: 36px 32px 32px !important;
  text-align: center !important;
}
.rps-invoice-icon {
  width: 72px !important; height: 72px !important;
  background: #dcfce7 !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 18px !important;
}
.rps-invoice-icon svg { width: 34px !important; height: 34px !important; color: #16a34a !important; }
.rps-invoice-modal h2 {
  font-size: 22px !important; font-weight: 800 !important;
  margin: 0 0 10px !important; color: var(--rps-text) !important;
  -webkit-text-fill-color: var(--rps-text) !important;
}
.rps-invoice-modal p {
  font-size: 14px !important; color: var(--rps-text-muted) !important;
  -webkit-text-fill-color: var(--rps-text-muted) !important;
  margin: 0 0 6px !important; line-height: 1.6 !important;
}
.rps-invoice-email-note {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  font-weight: 600 !important;
  margin: 14px 0 22px !important;
  font-family: var(--rps-ff) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
.rps-invoice-actions {
  display: flex !important; flex-direction: column !important;
  gap: 10px !important;
}
.rps-btn-download {
  width: 100% !important; height: 50px !important;
  background: linear-gradient(135deg, var(--rps-primary), var(--rps-primary-dark)) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: none !important; border-radius: 10px !important;
  font-size: 15px !important; font-weight: 700 !important;
  font-family: var(--rps-ff) !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
}
.rps-btn-download:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255,116,0,0.35) !important;
}
.rps-btn-close-invoice {
  width: 100% !important; height: 46px !important;
  background: transparent !important;
  color: var(--rps-text-muted) !important; -webkit-text-fill-color: var(--rps-text-muted) !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 700 !important;
  font-family: var(--rps-ff) !important; cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.rps-btn-close-invoice:hover {
  border-color: var(--rps-primary) !important;
  color: var(--rps-primary) !important;
  -webkit-text-fill-color: var(--rps-primary) !important;
}

/* Mobile overrides for invoice modal */
@media (max-width: 480px) {
  .rps-confirm-modal,
  .rps-invoice-modal  { padding: 28px 20px 24px !important; }
  .rps-confirm-modal h2,
  .rps-invoice-modal h2 { font-size: 18px !important; }
}



/* Google Maps Location Dropdown Design  */


.pac-container {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 999999 !important;
  position: absolute !important;
}

.pac-item {
  padding: 10px;
  font-size: 14px;
}

.pac-item:hover {
  background-color: #f5f5f5;
}

.popup {
  overflow: visible !important;
}

/* country code and number CSS */

.phone-wrapper {
  display: flex;
  gap: 8px;
  width : 100% !important;
}

#countryCode {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

#phoneNumber {
  flex: 1;
}


/* CSS for the checkbox */


.rps-checkbox-group {
    display: inline-flex;
    flex-direction: row;
    gap: 0px !important;
    margin-right: 0px;
}

.rps-checkbox-group label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 14px !important;
  cursor: pointer !important;
	margin: 10px 10px !important
}

.rps-checkbox-group input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
}

.rps-checkbox-group input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 26px !important;
  padding : 0px !important;
  height: 25px !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  background: #fff !important;
}

/* ACTIVE STATE */
.rps-checkbox-group input[type="checkbox"]:checked {
  background-color: #ff6a00 !important; /* your orange */
  border-color: #ff6a00 !important;
}

.rps-checkbox-group input[type="checkbox"]:checked::after {
  content: "" !important;
  width: 6px !important;
  height: 12px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  position: absolute !important;
  top: 3px !important;
  left: 9px !important;
  transform: rotate(45deg) !important;
}

.rps-checkbox-group input[type="checkbox"]:hover {
  border-color: #ff6a00 !important;
}


#login-step-2 {
	text-align: center !important;
}