/* ============================================================
   Auth Pages - Dark/Orange Theme (Extraordinarios)
   Matches homepage & find-tutors dark theme palette:
     Primary: #fd5223, Light: #ff7a54, Dark: #d94316
     BG: #1a0a05, #2d1208, #3d1a0a
     Text: #ffffff
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   1. GLOBAL BODY
   ============================================================ */
body {
  background: #1a0a05 !important;
  font-family: 'Inter', sans-serif !important;
  color: #fff !important;
}

/* ============================================================
   2. MAIN LOGIN CONTAINER
   ============================================================ */
.am-main-login {
  background: #1a0a05 !important;
  min-height: 100vh;
}

/* ============================================================
   3. LEFT PANEL (Logo + Video)
   ============================================================ */
.am-auth-page {
  background-color: #1a0a05 !important;
}

.am-login-left {
  background: linear-gradient(180deg, #2d1208 0%, #3d1a0a 50%, #2d1208 100%) !important;
  background-image: none !important;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.am-login-left_title h2 {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
}

.am-login-left_title span {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Video area */
.am-learning_video.am-auth-video {
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(65px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

.am-learning_video.am-auth-video iframe,
.am-learning_video.am-auth-video .video-js {
  border-radius: 10px;
}

/* Circular SVG text */
.am-text-svg text {
  fill: rgba(255, 255, 255, 0.6) !important;
}

.am-learning_video_tag_talent > div {
  background: #3d1a0a !important;
}

.am-learning_video_tag p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   4. RIGHT PANEL (Login Form)
   ============================================================ */
.am-login-right {
  background: linear-gradient(180deg, #1a0a05 0%, #2d1208 100%) !important;
}

/* Mobile logo */
.am-mobile-logo img {
  filter: brightness(0) invert(1);
}

/* Title */
.am-login-right_title h2 {
  color: #fd5223 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 1.5px;
}

.am-login-right_title h3 {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Description text */
.am-login-right p.am-description {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   5. FORM ELEMENTS
   ============================================================ */

/* Labels */
.am-label,
.am-login-form label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Input fields */
.am-login-form .form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-radius: 10px;
  font-family: 'Inter', sans-serif !important;
}

.am-login-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.am-login-form .form-control:focus {
  border-color: #fd5223 !important;
  box-shadow: 0 0 0 3px rgba(253, 82, 35, 0.15) !important;
  outline: none;
}

/* Invalid state */
.am-login-form .am-invalid .form-control {
  border-color: #F04438 !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.15) !important;
}

/* Error messages */
.am-error-msg {
  color: #F04438 !important;
}

/* Password toggle icon */
.am-passwordfield i {
  color: rgba(255, 255, 255, 0.4) !important;
}

.am-passwordfield i:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   6. CHECKBOX & REMEMBER ME
   ============================================================ */
.am-checkbox label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', sans-serif !important;
}

.am-checkbox label span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.am-checkbox label:before {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}

.am-checkbox input:checked + label:before {
  background-color: #fd5223 !important;
  border-color: #fd5223 !important;
}

/* Forgot password link */
.am-lost-password a {
  color: #ff7a54 !important;
  text-decoration: underline;
}

.am-lost-password a:hover {
  color: #fd5223 !important;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

/* Primary login button */
.am-login-form .am-btn {
  background: #fd5223 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.am-login-form .am-btn:hover {
  background: #ff7a54 !important;
  color: #fff !important;
}

.am-login-form .am-btn:before {
  display: none !important;
}

.am-login-form .am-btn > i:before {
  color: #fff !important;
}

/* Demo login buttons */
.am-login-options .am-btn {
  background: rgba(253, 82, 35, 0.1) !important;
  border: 1px solid rgba(253, 82, 35, 0.3) !important;
  color: #ff7a54 !important;
  font-family: 'Inter', sans-serif !important;
}

.am-login-options .am-btn:hover {
  background: rgba(253, 82, 35, 0.2) !important;
  color: #fd5223 !important;
}

.am-login-options em {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Right side role buttons (tutor/student) */
.am-login-right_btns .am-btn {
  background: #fd5223 !important;
  border-color: #fd5223 !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.am-login-right_btns .am-btn:hover {
  background: #ff7a54 !important;
}

.am-login-right_btns .am-white-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.am-login-right_btns .am-white-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   8. "DON'T HAVE AN ACCOUNT" / SIGNUP LINK
   ============================================================ */
.am-already-account {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Inter', sans-serif !important;
}

.am-already-account a {
  color: #ff7a54 !important;
  text-decoration: underline;
}

.am-already-account a:hover {
  color: #fd5223 !important;
}

/* ============================================================
   9. SIGN IN WITH GOOGLE / SOCIAL LOGIN
   ============================================================ */
.am-signinoption {
  font-family: 'Inter', sans-serif !important;
}

.am-signinoption_br {
  position: relative;
}

.am-signinoption_br::before {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.am-signinoption_br em {
  color: rgba(255, 255, 255, 0.4) !important;
  background-color: transparent !important;
  font-family: 'Inter', sans-serif !important;
}

.am-signinoption_btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease;
}

.am-signinoption_btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* OR divider */
.am-optioanl-or span {
  background-color: #2d1208 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Inter', sans-serif !important;
}

.am-optioanl-or::before {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Signup button (Google, etc) */
.am-btn-signup {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.am-btn-signup:hover,
.am-btn-signup:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* ============================================================
   10. TERMS / CHECKBOX LINKS
   ============================================================ */
.am-login-form .am-terms-check a {
  color: #ff7a54 !important;
}

.am-login-form .am-terms-check a:hover {
  color: #fd5223 !important;
}

/* ============================================================
   11. GDPR POPUP
   ============================================================ */
.gdpr-cookie-notice {
  background: #2d1208 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.gdpr-cookie-notice a {
  color: #ff7a54 !important;
}

.gdpr-cookie-notice .gdpr-cookie-notice-btn {
  background: #fd5223 !important;
  color: #fff !important;
}

/* ============================================================
   12. DISABLED / LOADING STATE
   ============================================================ */
.am-btn_disable {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   13. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a0a05; }
::-webkit-scrollbar-thumb { background: #4d4d4d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .am-login-right {
    width: 100% !important;
    padding: 30px 20px !important;
  }

  .am-login-right_title h2 {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   15. GLOBAL FONT OVERRIDE
   ============================================================ */
body, h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, label,
input, select, textarea, button,
.form-control, .am-btn {
  font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   16. GLOBAL BUTTON OVERRIDE (Checkout, etc.)
   ============================================================ */
.am-btn {
  background-color: #fd5223 !important;
  border-color: #fd5223 !important;
}
.am-btn:hover,
.am-btn:focus {
  background-color: #d94316 !important;
  border-color: #d94316 !important;
}
.am-btn.am-btn_disable,
.am-btn.am-btn_disabled {
  background-color: rgba(253, 82, 35, 0.5) !important;
  border-color: rgba(253, 82, 35, 0.5) !important;
}
.am-white-btn {
  border-color: #fd5223 !important;
  color: #fd5223 !important;
}
.am-white-btn:hover {
  background-color: #fd5223 !important;
  color: #fff !important;
}

/* Checkout-specific */
.am-checkout_steptab_checked span,
.am-checkout_steptab_active span {
  background-color: #fd5223 !important;
  border-color: #fd5223 !important;
}
.am-checkout_steptab_checked span .am-checkicon i::before,
.am-checkout_steptab_active span i::before {
  color: #fff !important;
}
.am-ordersummary_list_action a {
  color: #fd5223 !important;
}
.am-checkout_accordion .am-radio input:checked + label::before {
  border-color: #fd5223 !important;
  background-color: #fd5223 !important;
}