/* Tech Codi responsive and visual refinements. Loaded after the feature styles. */
.tcts-course-grid,
.tcts-course-detail,
.tcts-dashboard,
.tcts-result,
.tcts-leaderboard,
.tcts-exam-app { width: 100%; min-width: 0; }

.tcts-btn {
	min-height: 44px;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.tcts-course-card { display: flex; min-width: 0; flex-direction: column; }
.tcts-course-card-head {
	position: relative;
	z-index: 1;
	padding: 18px 20px 16px;
	border-bottom: 1px solid #e2e8f0;
	background: linear-gradient(135deg, #fff, #f5f7ff);
}
.tcts-course-card-head > span {
	display: block;
	margin-bottom: 5px;
	color: #5b70d6;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
}
.tcts-course-card-head h3 { margin: 0; color: #0f172a; font-size: 21px; line-height: 1.3; }
.tcts-course-card-head h3 a { color: inherit; text-decoration: none; }
.tcts-course-card-head h3 a::after { position: absolute; inset: 0; content: ""; }
.tcts-course-body { display: flex; flex: 1; flex-direction: column; }
.tcts-course-body > p { flex: 1; }
.tcts-course-footer { margin-top: auto; }

.tcts-course-about {
	margin-bottom: 22px;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: clamp(22px, 4vw, 38px);
	background: #fff;
	box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}
.tcts-course-about h2 { margin: 7px 0 20px; color: #0f172a; font-size: clamp(25px, 4vw, 36px); line-height: 1.2; }
.tcts-course-description { color: #334155; line-height: 1.75; }
.tcts-course-description > :first-child { margin-top: 0; }
.tcts-course-description > :last-child { margin-bottom: 0; }
.tcts-course-description h2,
.tcts-course-description h3,
.tcts-course-description h4 { margin-top: 1.4em; color: #0f172a; line-height: 1.3; }
.tcts-course-description ul,
.tcts-course-description ol { padding-left: 1.25rem; }
.tcts-course-description li { margin-bottom: 7px; }
.tcts-course-description img { height: auto; border-radius: 13px; }
.tcts-course-description table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.tcts-course-description th,
.tcts-course-description td { border: 1px solid #e2e8f0; padding: 10px; }
.tcts-test-list { scroll-margin-top: 110px; }
.tcts-test-list-head { margin-bottom: 16px; }
.tcts-test-list-head h2 { margin: 5px 0 0; }
.tcts-login-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.tcts-course-detail-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
	gap: 28px;
	align-items: stretch;
	margin-bottom: 22px;
	padding: 34px;
	overflow: hidden;
	border-radius: 22px;
	background: radial-gradient(circle at 85% 8%, rgba(124, 58, 237, .48), transparent 31%), linear-gradient(135deg, #0b1538, #2447dc);
	color: #fff;
	box-shadow: 0 20px 52px rgba(15, 23, 42, .16);
}
.tcts-course-detail-copy { align-self: center; min-width: 0; }
.tcts-course-detail-copy h1 { max-width: 760px; margin: 12px 0; color: #fff; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
.tcts-course-detail-copy > p { max-width: 720px; margin: 0; color: #dbe4ff; font-size: 16px; line-height: 1.65; }
.tcts-badge-inline { display: inline-flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 7px 11px; background: rgba(255, 255, 255, .11); color: #fde68a; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.tcts-course-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tcts-course-facts span { border-radius: 9px; padding: 8px 11px; background: rgba(255, 255, 255, .1); color: #eef2ff; font-size: 13px; font-weight: 650; }
.tcts-course-detail-media { position: relative; min-height: 235px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tcts-course-detail-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 32%, rgba(6, 15, 48, .76)); }
.tcts-course-detail-media > span { position: absolute; z-index: 1; right: 16px; bottom: 16px; border-radius: 12px; padding: 9px 14px; background: #fff; color: #172eaa; font-size: 24px; font-weight: 900; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.tcts-free-test-label { display: inline-flex; vertical-align: middle; margin-left: 7px; border-radius: 999px; padding: 3px 7px; background: #dcfce7; color: #166534; font-size: 10px; font-weight: 900; letter-spacing: .07em; }

.tcts-results-table { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tcts-results-table table { min-width: 680px; }
.tcts-dashboard > h2 { margin-top: 34px; }
.tcts-question-text > div,
.tcts-option > span,
.tcts-review-option > span,
.tcts-solution { min-width: 0; overflow-x: auto; }

@media (max-width: 760px) {
	.tcts-home-courses { margin-block: 34px; }
	.tcts-course-grid { grid-template-columns: 1fr !important; gap: 16px; }
	.tcts-course-card { border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, .07); }
	.tcts-course-card:hover { transform: none; }
	.tcts-course-card-head { padding: 16px 17px 14px; }
	.tcts-course-card-head h3 { font-size: 19px; }
	.tcts-course-image { height: 170px; }
	.tcts-course-body { padding: 17px; }
	.tcts-course-footer { align-items: center; }
	.tcts-course-footer .tcts-btn { max-width: 64%; text-align: center; }

	.tcts-course-detail-hero { grid-template-columns: 1fr; gap: 20px; margin-inline: 0; padding: 23px 20px; border-radius: 17px; }
	.tcts-course-detail-copy h1 { font-size: clamp(30px, 10vw, 40px); }
	.tcts-course-detail-copy > p { font-size: 15px; }
	.tcts-course-detail-media { min-height: 175px; }
	.tcts-course-facts { gap: 7px; }
	.tcts-course-facts span { padding: 7px 9px; font-size: 12px; }
	.tcts-course-about { border-radius: 16px; padding: 22px 18px; }
	.tcts-course-description { font-size: 15px; }

	.tcts-access-card,
	.tcts-dashboard-head,
	.tcts-result-hero,
	.tcts-leader-head { margin-bottom: 20px; border-radius: 16px; padding: 22px 18px; }
	.tcts-access-card .tcts-btn,
	.tcts-dashboard-actions { width: 100%; }
	.tcts-dashboard-actions .tcts-btn { flex: 1 1 130px; }

	.tcts-test-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 15px; }
	.tcts-test-row .tcts-btn,
	.tcts-test-row .tcts-locked { grid-column: 1 / -1; width: 100%; margin: 0; }
	.tcts-test-row .tcts-locked { border-radius: 9px; padding: 10px; background: #f8fafc; text-align: center; }
	.tcts-test-info h3 { font-size: 16px; }

	.tcts-profile-strip { padding: 13px; }
	.tcts-profile-strip div { min-width: 0; }
	.tcts-profile-strip strong,
	.tcts-profile-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tcts-account-active { flex: 0 0 auto; }

	.tcts-exam-top { position: sticky; margin-inline: 0; border-radius: 12px; }
	.tcts-exam-layout { margin-inline: 0; }
	.tcts-palette-panel { order: 2; padding: 15px; }
	.tcts-palette { grid-template-columns: repeat(6, minmax(38px, 1fr)); overflow-x: auto; }
	.tcts-question-panel { min-height: calc(100vh - 170px); }
	.tcts-question-card { padding: 18px 14px; }
	.tcts-question-text { align-items: flex-start; }
	.tcts-exam-nav { position: sticky; bottom: 0; z-index: 4; gap: 9px; padding: 12px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); }
	.tcts-exam-nav .tcts-btn { flex: 1; padding-inline: 10px; }

	.tcts-result-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.tcts-result-actions { display: grid; grid-template-columns: 1fr; }
	.tcts-review-card { border-radius: 13px; }
	.tcts-review-question { display: grid; grid-template-columns: auto minmax(0, 1fr); font-size: 15px; }
	.tcts-review-option { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
	.tcts-review-option em { display: inline-flex !important; grid-column: 2; width: max-content; max-width: 100%; border-radius: 999px; padding: 3px 7px; background: rgba(255, 255, 255, .75); }

	.tcts-checkout-shell,
	.tcts-auth-shell,
	.tcts-payment-state,
	.tcts-manual-payment { margin-inline: 0; }
	.tcts-checkout-summary,
	.tcts-checkout-methods { padding: 24px 19px; }
	.tcts-auth-card { padding: 26px 19px; }
	.tcts-auth-side { padding: 27px 20px; }
	.tcts-auth-notice { margin-inline: 0; }
	.tcts-login-actions { display: grid; grid-template-columns: 1fr; }
	.tcts-login-actions .tcts-btn { width: 100%; }
}

@media (max-width: 420px) {
	.tcts-course-footer { align-items: stretch; flex-direction: column; }
	.tcts-course-footer .tcts-btn { width: 100%; max-width: none; }
	.tcts-course-detail-hero { padding-inline: 17px; }
	.tcts-course-detail-media { min-height: 145px; }
	.tcts-profile-strip { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
	.tcts-account-active { grid-column: 1 / -1; width: 100%; text-align: center; }
	.tcts-question-progress { flex-direction: column; }
	.tcts-question-progress > div { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.tcts-link-btn { min-height: 40px; text-align: center; }
	.tcts-palette { grid-template-columns: repeat(5, minmax(38px, 1fr)); }
}

/* ===== Live Web App Reliability / Mobile UX ===== */
.tcts-exam-app{min-height:calc(100vh - 96px)}
.tcts-exam-nav .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tcts-question-panel{overflow:hidden}
.tcts-exam-app.is-submitting:after{content:"Submitting your test…";display:grid;place-items:center;backdrop-filter:blur(8px)}
@media(max-width:760px){.tcts-exam-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tcts-exam-nav .btn{min-height:58px;font-size:17px}.tcts-submit-all{min-height:58px;font-size:17px}.tcts-palette{grid-template-columns:repeat(5,1fr);gap:8px}.tcts-palette button{min-height:46px}.tcts-question-card{padding:16px 13px}.tcts-options{gap:9px}.tcts-option{min-height:52px;padding:11px}.tcts-exam-top{position:sticky;top:0;z-index:50}.tcts-body-exam .tcts-site-wrap{padding-bottom:18px}}

/* ===== Final Mobile Navigation + Exam Header Behaviour ===== */
@media (max-width:760px){
  /* Header is normal on exam pages; only the timer bar remains sticky. */
  .tcts-body-exam .site-header{position:static !important;top:auto !important;z-index:20 !important;box-shadow:none !important;}
  .tcts-body-exam .site-header-inner{position:relative !important;}
  .tcts-body-exam .site-header{position:static !important;top:auto !important;} .tcts-body-exam .tcts-exam-top{position:sticky !important;top:0 !important;z-index:80 !important;}

  /* Large app-style dropdown menu. */
  .site-header-inner.is-open .site-nav-links{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:10px !important;background:#0b1538 !important;border:1px solid #334155 !important;border-radius:0 0 16px 16px !important;box-shadow:0 18px 40px rgba(2,6,23,.34) !important;animation:tctsMenuDrop .18s ease-out both;}
  .site-nav-links a{display:flex !important;align-items:center !important;justify-content:flex-start !important;min-height:54px !important;padding:15px 16px !important;border-radius:8px !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;text-decoration:none !important;}
  .site-nav-links a+a{border-top:1px solid rgba(255,255,255,.14) !important;border-radius:0 0 8px 8px !important;}
  .site-nav-links a:hover,.site-nav-links a:focus{background:#182b63 !important;color:#fff !important;}
  .site-menu-toggle{width:48px !important;height:44px !important;display:grid !important;place-items:center !important;font-size:25px !important;background:#1f3aa4 !important;color:#fff !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:9px !important;cursor:pointer !important;}

  /* Fixed bottom app navigation: flush to the viewport bottom, no floating radius. */
  .tcts-mobile-bottom-nav{left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;box-sizing:border-box !important;padding:4px 4px env(safe-area-inset-bottom) !important;border-radius:0 !important;margin:0 !important;border-top:1px solid rgba(255,255,255,.12) !important;background:#111a3a !important;box-shadow:0 -8px 25px rgba(2,6,23,.20) !important;}
  .tcts-mobile-bottom-nav a{border-radius:0 !important;min-height:58px !important;}
  .tcts-site-wrap{padding-bottom:74px !important;}

  /* Larger exam navigation buttons. */
  .tcts-exam-nav .btn{min-height:60px !important;font-size:17px !important;padding:14px 18px !important;}
}
@keyframes tctsMenuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}


/* FINAL EXAM HEADER OVERRIDE */
.tcts-body-exam .site-header{position:static !important;top:auto !important;z-index:20 !important;}
.tcts-body-exam .site-header{position:static !important;top:auto !important;} .tcts-body-exam .tcts-exam-top{position:sticky !important;top:0 !important;z-index:80 !important;}
/* Persist selected answer styling when navigating between questions. */
.tcts-exam-app .tcts-option.is-chosen{border:2px solid var(--tcts-blue) !important;background:#eef2ff !important;color:inherit !important;}
.tcts-exam-app .tcts-option.is-chosen strong{background:var(--tcts-blue) !important;color:#fff !important;}


/* FINAL MOBILE EXAM / HEADER / NAV OVERRIDES */
.tcts-body-exam .site-header{position:static!important;top:auto!important;z-index:auto!important;box-shadow:none!important;}
.tcts-body-exam .tcts-exam-top{position:sticky!important;top:0!important;z-index:100!important;}
.tcts-body-exam .tcts-question-panel{min-height:0!important;}
.tcts-body-exam .tcts-question-text{min-height:72px!important;font-size:16px;line-height:1.5;}
.tcts-body-exam .tcts-question-card{padding:14px 12px!important;}
.tcts-body-exam .tcts-options{gap:7px!important;margin-top:7px!important;}
.tcts-body-exam .tcts-option{min-height:48px!important;padding:9px 10px!important;}
.tcts-body-exam .tcts-option strong{width:28px!important;height:28px!important;}
.tcts-body-exam .tcts-marking{margin-top:9px!important;}
.tcts-body-exam .tcts-exam-nav{position:static!important;bottom:auto!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin-top:10px!important;padding:10px 0 0!important;background:transparent!important;backdrop-filter:none!important;border-top:1px solid var(--tcts-line)!important;}
.tcts-body-exam .tcts-exam-nav .tcts-btn{min-height:50px!important;padding:12px 12px!important;font-size:16px!important;}

/* Mobile course cards smaller */
.tcts-course-card{border-radius:12px!important;}
.tcts-course-image{height:125px!important;}
.tcts-course-body{padding:13px 14px!important;}
.tcts-course-body h3{font-size:18px!important;margin:6px 0!important;}
.tcts-course-body p{font-size:13px!important;min-height:0!important;line-height:1.4!important;margin-bottom:8px!important;}
.tcts-course-footer{padding-top:10px!important;margin-top:10px!important;}
.tcts-course-footer strong{font-size:18px!important;}

/* Full-width, non-floating bottom app menu */
.tcts-mobile-bottom-nav{left:0!important;right:0!important;bottom:0!important;width:100%!important;margin:0!important;border-radius:0!important;}
.tcts-mobile-bottom-nav a{border-radius:0!important;}

/* ===== FINAL FIX: MOBILE EXAM HEADER MUST NOT BE STICKY ===== */
.tcts-body-exam .site-header,
.tcts-body-exam .site-header-inner {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transform: none !important;
}
.tcts-body-exam .tcts-exam-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
}
@media (max-width:760px){
  .tcts-body-exam .site-header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  .tcts-body-exam .site-header-inner {
    position: static !important;
  }
  .tcts-body-exam .site-nav-links {
    position: absolute !important;
  }
}

/* FINAL MOBILE EXAM OVERRIDES */
@media(max-width:640px){
  html body.tcts-body-exam .site-header,
  html body.tcts-body-exam header.site-header{
    position:static!important;
    top:auto!important;
    bottom:auto!important;
    inset:auto!important;
    z-index:auto!important;
  }
  html body.tcts-body-exam .tcts-exam-top{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
  }
  html body.tcts-body-exam .tcts-question-panel{
    min-height:0!important;
  }
  html body.tcts-body-exam .tcts-question-text{
    min-height:0!important;
    margin-bottom:0!important;
  }
  html body.tcts-body-exam .tcts-exam-nav{
    position:static!important;
    margin-top:10px!important;
    padding:0!important;
    background:transparent!important;
    border-top:0!important;
  }
}