/* new-styles.css - Common Tutorix Theme v1.0 */
*{margin:0;padding:0;box-sizing:border-box;}
:root {
  --bg: #e8d5b7;
  --card: #fffef9;
  --text: #2c5282;
  --text-light: #4a6fa5;
  --text-dim: #7c9abf;
  --accent: #fbbf24;
  --accent-dark: #d97706;
  --blue: #057ab5;
  --green: #22c55e;
  --border: rgba(44,82,130,0.1);
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Layout */
.tx-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.tx-sidebar {
  width: 260px; background: var(--card); border-radius: 20px; margin: 20px; padding: 20px 16px;
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  overflow-y: auto; box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.tx-sidebar-logo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 0 4px; }
.tx-sidebar-logo img { height: 30px; }
.tx-sidebar-logo .tx-sidebar-close { position: static; display: none; }
.tx-sidebar-nav { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid rgba(44,82,130,0.08); padding-bottom: 14px; margin-bottom: 14px; }
.tx-sidebar-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 15px; font-weight: 600;
  color: #2c5282; text-decoration: none; border-radius: 12px; transition: all 0.2s; border-left: 3px solid transparent;
}
.tx-sidebar-nav a:hover { background: rgba(44,82,130,0.05); }
.tx-sidebar-nav a.active { background: rgba(44,82,130,0.07); border-left-color: #2c5282; color: #1a365d; }
.tx-sidebar-nav a i { width: 20px; text-align: center; font-size: 16px; color: #4a6fa5; }
.tx-sidebar-nav a.active i { color: #1a365d; }
.tx-sidebar-bottom { margin-top: auto; }
.tx-sidebar-app { text-align: center; padding: 16px 0; border-top: 1px solid rgba(44,82,130,0.08); border-bottom: 1px solid rgba(44,82,130,0.08); }
.tx-sidebar-app p { font-size: 13px; color: #4a6fa5; margin-bottom: 8px; font-weight: 600; }
.tx-sidebar-app .app-links { display: flex; gap: 6px; justify-content: center; }
.tx-sidebar-app .app-links a img { width: 95px; border-radius: 6px; }
.tx-sidebar-premium {
  display: block; margin: 14px 4px 0; padding: 14px 16px;
  background: linear-gradient(135deg, #d97706, #ea580c); color: #fff; font-size: 15px; font-weight: 700;
  border-radius: 14px; text-decoration: none; text-align: center; transition: all 0.3s;
}
.tx-sidebar-premium:hover { background: linear-gradient(135deg, #b45309, #c2410c); }
.tx-sidebar-premium i { margin-right: 6px; }
.tx-sidebar-footer { margin-top: 14px; padding-top: 10px; display: flex; justify-content: center; gap: 14px; font-size: 12px; }
.tx-sidebar-footer a { color: #4a6fa5; text-decoration: none; }
.tx-sidebar-footer a:hover { color: #1a365d; }

/* Hamburger */
.tx-hamburger {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 101; background: var(--card);
  border: 1px solid rgba(44,82,130,0.1); border-radius: 12px; width: 42px; height: 42px;
  cursor: pointer; align-items: center; justify-content: center; font-size: 18px; color: #2c5282;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.tx-sidebar-close {
  display: none; position: absolute; top: 14px; right: 14px; background: none; border: none;
  font-size: 20px; color: var(--text-dim); cursor: pointer;
}

/* Main content */
.tx-main {
  margin-left: 300px; flex: 1; max-width: 860px; padding: 40px 32px 60px; margin-right: auto;
  margin-left: max(300px, calc(50vw - 430px + 150px));
}

/* Login/Signup/Forgot Card */
.tx-login-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.tx-login-card {
  background: var(--card); border-radius: 20px; padding: 36px 32px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 2px solid var(--border);
}
.tx-login-logo { text-align: center; margin-bottom: 24px; display: none; }
.tx-login-logo img { height: 32px; display: inline-block; }
.tx-login-title { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 800; color: #2c5282; text-align: center; margin-bottom: 4px; }
.tx-login-subtitle { font-size: 14px; color: var(--text-dim); text-align: center; margin-bottom: 28px; }

/* Form fields */
.tx-login-field { position: relative; margin-bottom: 16px; }
.tx-login-field .field-icon-wrap {
  position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center;
  pointer-events: none; z-index: 2; color: #2c5282; font-size: 16px;
}
.tx-login-field input, .tx-login-field select {
  width: 100%; padding: 13px 14px 13px 42px; border: 1.5px solid var(--border); border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: #2c5282; background: #fff; outline: none;
  transition: border-color 0.2s;
}
.tx-login-field input:focus, .tx-login-field select:focus { border-color: var(--blue); }
.tx-login-field input::placeholder { color: var(--text-dim); }
.tx-login-field .pwd-toggle {
  position: absolute; right: 14px; top: 0; bottom: 0; display: flex; align-items: center;
  cursor: pointer; color: #2c5282; font-size: 16px; z-index: 2;
}
.tx-login-field .pwd-toggle .eye-show { display: none; }
.tx-login-field .pwd-toggle.active .eye-hide { display: none; }
.tx-login-field .pwd-toggle.active .eye-show { display: inline; }

/* Mobile number row */
.tx-login-mobile-row { display: flex; gap: 0; margin-bottom: 16px; }
.tx-login-mobile-row .field-icon-wrap { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; z-index: 2; color: #2c5282; font-size: 16px; }
.tx-login-mobile-row .tx-mobile-code { position: relative; width: 40%; }
.tx-login-mobile-row .tx-mobile-code select { width: 100%; padding: 13px 8px 13px 42px; border: 1.5px solid var(--border); border-radius: 12px 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #2c5282; background: #fff; outline: none; appearance: auto; }
.tx-login-mobile-row .tx-mobile-num { width: 60%; }
.tx-login-mobile-row .tx-mobile-num input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-left: 0; border-radius: 0 12px 12px 0; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #2c5282; background: #fff; outline: none; }
.tx-login-mobile-row .tx-mobile-num input::placeholder { color: var(--text-dim); }

/* Options row */
.tx-login-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 13px; }
.tx-login-options label { display: flex; align-items: center; gap: 6px; color: #2c5282; cursor: pointer; }
.tx-login-options label input[type="checkbox"] { accent-color: #2c5282; }
.tx-login-options a { color: #2c5282; text-decoration: none; font-weight: 600; }
.tx-login-options a:hover { text-decoration: underline; }

/* Terms */
.tx-login-terms { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; font-size: 13px; color: #2c5282; }
.tx-login-terms input[type="checkbox"] { accent-color: #2c5282; margin-top: 2px; }
.tx-login-terms a { color: #2c5282; font-weight: 600; text-decoration: underline; }

/* Password hint */
.tx-pwd-hint { font-size: 11px; color: var(--text-dim); margin-top: -10px; margin-bottom: 12px; }

/* Button */
.tx-login-btn {
  display: block; width: 100%; padding: 13px;
  background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; border: none; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.2s; letter-spacing: 0.3px; text-align: center; text-decoration: none;
}
.tx-login-btn:hover { background: linear-gradient(135deg, #d97706, #c2410c); }

/* Divider & links */
.tx-login-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 20px; }
.tx-login-links { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 13px; }
.tx-login-links a { color: #2c5282; text-decoration: none; font-weight: 600; transition: color 0.2s; }
.tx-login-links a:hover { color: #1a365d; }
.tx-login-links a i { margin-right: 4px; }

/* In-card toast */
.tx-login-toast { display: none; }
.tx-login-toast.show { display: block; margin-bottom: 16px; }
.tx-login-toast .toast-msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; text-align: center; color: #fff; }
.tx-login-toast .toast-msg.error { background: #c62828; }
.tx-login-toast .toast-msg.success { background: #2c9d30; }
.tx-login-toast .toast-msg.info { background: #1565c0; }
.tx-login-toast .toast-msg.warning { background: #f9a825; }

/* OTP */
.tx-otp-form h2 { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: #2c5282; margin-bottom: 8px; }
.tx-otp-msg { font-size: 13px; color: #2c9d30; text-align: center; margin-bottom: 12px; }
.tx-otp-boxes { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.tx-otp-boxes input { width: 3rem; padding: 10px 0; border: 1.5px solid var(--border); border-radius: 10px; text-align: center; font-size: 18px; font-family: 'DM Sans', sans-serif; color: #2c5282; outline: none; }
.tx-otp-boxes input:focus { border-color: var(--blue); }
.tx-resend { font-size: 13px; color: #2c5282; text-align: center; margin-bottom: 16px; }
.tx-resend a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* Loader */
.wrap_loader{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,254,249,0.8);z-index:9999;place-items:center;}
.wrap_loader .imgLoader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

/* Mobile */
@media(max-width:768px) {
  .tx-sidebar { transform: translateX(-110%); transition: transform 0.3s; margin: 10px; top: 0; bottom: 0; }
  .tx-sidebar.open { transform: translateX(0); }
  .tx-sidebar-logo .tx-sidebar-close { display: block; }
  .tx-hamburger { display: flex; }
  .tx-main { margin-left: 0 !important; padding: 60px 16px 40px; max-width: 100%; box-sizing: border-box; }
  .tx-login-card { padding: 28px 20px 24px; }
  .tx-login-logo { display: block; text-align: center; }
  .tx-login-links { flex-wrap: wrap; gap: 12px; }
}