/* ==========================================================================
   START-TEST.CSS
   Page-scoped styles for start-test.php ONLY. Prefix: st-
   This page has no shared includes (it runs full-screen, standalone),
   so the core design tokens from global.css are re-declared here to
   keep the same brand look. Nothing in global.css is touched.
   ========================================================================== */

:root {
  --st-primary: #6C63FF;
  --st-primary-dark: #5a52e0;
  --st-primary-light: #8B85FF;
  --st-success: #6BCB77;
  --st-danger: #FF4B2B;

  --st-bg-main: #F8F9FF;
  --st-bg-card: #FFFFFF;
  --st-bg-section: #F0F2FF;

  --st-text-primary: #1A1A2E;
  --st-text-secondary: #4A4A6A;
  --st-text-muted: #8888AA;
  --st-text-white: #FFFFFF;

  --st-border-color: rgba(108, 99, 255, 0.15);
  --st-shadow-sm: 0 2px 12px rgba(108, 99, 255, 0.08);
  --st-shadow-md: 0 8px 32px rgba(108, 99, 255, 0.15);

  --st-radius-sm: 8px;
  --st-radius-md: 16px;
  --st-radius-lg: 24px;

  --st-topbar-height: 64px;
}

[data-theme="dark"] {
  --st-bg-main: #0D0E1A;
  --st-bg-card: #1A1B2E;
  --st-bg-section: #141527;

  --st-text-primary: #E8E8F5;
  --st-text-secondary: #A0A0C0;
  --st-text-muted: #606080;

  --st-border-color: rgba(108, 99, 255, 0.25);
  --st-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
  --st-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------
   RESET / BASE — page is locked to the device viewport, no page-level
   scroll; only the questions column scrolls.
-------------------------------------------------------------------- */
* , *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body.st-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.st-body {
  font-family: "Inter", sans-serif;
  background-color: var(--st-bg-main);
  color: var(--st-text-primary);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------
   TOP STICKY BAR
-------------------------------------------------------------------- */
.st-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--st-topbar-height);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  background: var(--st-bg-card);
  border-bottom: 1px solid var(--st-border-color);
  box-shadow: var(--st-shadow-sm);
}

.st-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--st-border-color);
  background: transparent;
  color: var(--st-text-secondary);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: var(--st-radius-sm);
  cursor: pointer;
  transition: var(--transition, all 0.25s ease);
  flex-shrink: 0;
}

.st-exit-btn:hover {
  background: rgba(255, 75, 43, 0.1);
  border-color: var(--st-danger);
  color: var(--st-danger);
}

.st-topbar-title {
  flex: 1;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--st-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--st-bg-section);
  color: var(--st-primary);
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-border-color);
}

.st-timer.st-timer-warning {
  color: var(--st-danger);
  border-color: var(--st-danger);
  background: rgba(255, 75, 43, 0.08);
}

/* --------------------------------------------------------------------
   MAIN LAYOUT — questions column (scrollable) + sticky ad sidebar
-------------------------------------------------------------------- */
.st-main {
  position: absolute;
  top: var(--st-topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
}

.st-questions-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.st-questions-col::-webkit-scrollbar {
  width: 8px;
}

.st-questions-col::-webkit-scrollbar-thumb {
  background: var(--st-border-color);
  border-radius: var(--st-radius-full, 999px);
}

/* ---------------- ADS (Google approved fixed sizes via CSS) ----------------
   >= 1200px : right column 300px, ad 300x600 (short screens: 300x250)
   768-1199px: right column 160px, ad 160x600 (short screens: 160x300)
   < 768px   : right column hidden, one 320x100 ad on top of questions
   display:none = ad request hi nahi jaati (Google ka approved tareeka). */
.st-ad-col { display: none; flex-shrink: 0; }
.sp_test_side_ad { display: none; }
.st-ad-slot {
  background: var(--st-bg-card);
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-radius-md);
  padding: 12px;
  text-align: center;
}
.st-ad-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--st-text-muted);
  margin-bottom: 8px;
}
.st-ad-preview {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 2px dashed var(--st-border-color);
  border-radius: 8px;
  color: var(--st-text-muted);
  font-size: 0.72rem;
  text-align: center;
}

@media (min-width: 768px) {
  .st-ad-col { display: block; width: 186px; }
  .sp_test_side_ad { display: inline-block; width: 160px; height: 600px; }
}
@media (min-width: 1200px) {
  .st-ad-col { width: 326px; }
  .sp_test_side_ad { width: 300px; height: 600px; }
}
/* Choti height (laptop 1366x768 + browser bar): 600px fit nahi hota */
@media (min-width: 1200px) and (max-height: 760px) {
  .sp_test_side_ad { width: 300px; height: 250px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 760px) {
  .sp_test_side_ad { width: 160px; height: 300px; }
}

/* Mobile ad */
.st-mobile-ad { text-align: center; margin: 0 0 22px; }
.sp_test_mobile_ad { display: inline-block; width: 320px; height: 100px; }
@media (max-width: 349.98px) {
  .sp_test_mobile_ad { width: 300px; height: 100px; }
}
@media (min-width: 768px) {
  .st-mobile-ad, .sp_test_mobile_ad { display: none !important; }
}

/* --------------------------------------------------------------------
   LOADING STATE
-------------------------------------------------------------------- */
.st-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 20px;
  color: var(--st-text-secondary);
}

.st-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid var(--st-border-color);
  border-top-color: var(--st-primary);
  border-radius: 50%;
  animation: st-spin 0.8s linear infinite;
}

@keyframes st-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------
   QUESTION CARDS
-------------------------------------------------------------------- */
.st-question-card {
  background: var(--st-bg-card);
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-radius-md);
  padding: 22px 24px;
  margin: 0 auto 18px;
  max-width: 900px;
  width: 100%;
}

.st-question-head {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.st-question-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--st-bg-section);
  color: var(--st-primary);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

.st-question-text {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--st-text-primary);
  padding-top: 3px;
}

.st-question-code {
  display: block;
  background: var(--st-bg-section);
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-radius-sm);
  color: var(--st-text-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 14px 16px;
  margin: 0 0 14px 42px;
  max-height: 320px;
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre;
}

.st-question-code::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.st-question-code::-webkit-scrollbar-thumb {
  background: var(--st-border-color);
  border-radius: 999px;
}

.st-question-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-border-color);
  margin: 0 0 14px 42px;
}

.st-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 42px;
}

.st-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-radius-sm);
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.st-option:hover {
  border-color: var(--st-primary-light);
  background: var(--st-bg-section);
}

.st-option input[type="radio"] {
  accent-color: var(--st-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.st-option-text {
  font-size: 0.9rem;
  color: var(--st-text-secondary);
}

.st-option.st-option-selected {
  border-color: var(--st-primary);
  background: var(--st-bg-section);
}

.st-option.st-option-selected .st-option-text {
  color: var(--st-text-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------
   SUBMIT BUTTON
-------------------------------------------------------------------- */
.st-submit-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 40px;
}

.st-submit-btn {
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-light) 100%);
  color: var(--st-text-white);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 48px;
  border-radius: var(--st-radius-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.st-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--st-shadow-md);
}

/* --------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------- */
@media (max-width: 768px) {
  .st-topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .st-exit-btn span {
    display: none;
  }

  .st-topbar-title {
    font-size: 0.8rem;
  }

  .st-timer {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .st-main {
    padding: 14px;
  }

  .st-question-card {
    padding: 16px;
  }

  .st-question-code,
  .st-question-image,
  .st-options {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------
   TIMER — submitted state
-------------------------------------------------------------------- */
.st-timer.st-timer-submitted {
  color: var(--st-success);
  border-color: var(--st-success);
  background: rgba(107, 203, 119, 0.1);
}

/* --------------------------------------------------------------------
   RESULT BANNER — shown after submit
-------------------------------------------------------------------- */
.st-result-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--st-bg-card);
  border: 1px solid var(--st-success);
  border-radius: var(--st-radius-md);
  margin: 0 auto 20px;
  max-width: 900px;
  width: 100%;
  padding: 20px 24px;
}

.st-result-score {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(107, 203, 119, 0.12);
  color: var(--st-success);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.st-result-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--st-text-primary);
}

.st-result-sub {
  font-size: 0.88rem;
  color: var(--st-text-secondary);
  margin-top: 2px;
}

/* --------------------------------------------------------------------
   OPTIONS — locked / correct / incorrect states after submit
-------------------------------------------------------------------- */
.st-option:has(input:disabled) {
  cursor: default;
}

.st-option-correct {
  border-color: var(--st-success);
  background: rgba(107, 203, 119, 0.1);
}

.st-option-correct .st-option-text {
  color: var(--st-text-primary);
  font-weight: 600;
}

.st-option-incorrect {
  border-color: var(--st-danger);
  background: rgba(255, 75, 43, 0.08);
}

.st-option-incorrect .st-option-text {
  color: var(--st-text-primary);
}

.st-text-muted {
  color: var(--st-text-muted);
  text-align: center;
  padding: 40px 20px;
}