/*
Theme Name: TVDE Academia
Theme URI: https://tvdeacademia.pt/
Author: TVDE Academia
Author URI: https://tvdeacademia.pt/
Description: Custom theme for TVDE Academia, the TVDE exam preparation platform for Portugal. Built from the approved TVDE Academia design package: navy, teal, amber and violet system with the exam card, pricing, courses, training and dashboard layouts, fully responsive from small phones to large laptops.
Version: 1.9
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tvde-academia
*/
:root{
  --navy:#0b1e3f; --navy2:#122a56; --teal:#00b894; --teal-dark:#00997a;
  --amber:#ffb703; --amber2:#fb8500; --violet:#6c5ce7; --pink:#fd79a8;
  --bg:#f6f8ff; --card:#ffffff; --ink:#14213d; --muted:#5b6b8c; --line:#e4e9f7;
  --radius:20px; --shadow:0 18px 45px rgba(11,30,63,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.18;color:var(--navy)}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;padding:15px 28px;border-radius:999px;border:0;cursor:pointer;transition:.25s;white-space:normal;text-align:center;line-height:1.35;min-height:44px;justify-content:center}
.btn-amber{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#231303;box-shadow:0 12px 26px rgba(251,133,0,.35)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(251,133,0,.42)}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;box-shadow:0 12px 26px rgba(0,184,148,.32)}
.btn-teal:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-dark)}
.btn-white{background:#fff;color:var(--navy)}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--navy)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(0,184,148,.18)}
section{padding:86px 0}
.sec-head{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-head .kicker,.kicker{display:inline-block;font-family:'Poppins';font-weight:700;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--teal-dark);background:rgba(0,184,148,.12);padding:7px 16px;border-radius:999px;margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:17.5px}
/* Topbar */
.topbar{background:var(--navy);color:#dbe6ff;font-size:13.5px;padding:9px 0;text-align:center}
.topbar b{color:var(--amber)}
/* Nav */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0}
.logo{display:flex;align-items:center;gap:11px;font-family:'Poppins';font-weight:800;font-size:23px;color:var(--navy)}
.logo-badge{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--teal),var(--violet));display:grid;place-items:center;color:#fff;font-size:21px;box-shadow:0 10px 20px rgba(0,184,148,.3)}
.logo span em{font-style:normal;color:var(--teal-dark)}
.nav-links{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--navy2)}
.nav-links a:hover{color:var(--teal-dark)}
.nav-cta{display:flex;gap:11px;align-items:center}
.nav-cta .btn{padding:11px 22px;font-size:14.5px}
.menu-btn{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--navy)}
/* Hero */
.hero{position:relative;padding:74px 0 92px;background:linear-gradient(160deg,#eef4ff 0%,#f6f8ff 46%,#e9fff7 100%);overflow:hidden}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,231,.20),transparent 65%);top:-190px;right:-120px}
.hero:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,183,3,.24),transparent 65%);bottom:-200px;left:-120px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,60px);font-weight:900;letter-spacing:-.5px;margin:20px 0 18px}
.hero h1 .grad{background:linear-gradient(92deg,var(--teal-dark),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .hl{position:relative;white-space:normal}
.hero h1 .hl:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:11px;background:rgba(255,183,3,.55);z-index:-1;border-radius:6px}
.hero-sub{font-size:18.5px;color:var(--muted);max-width:540px;margin-bottom:28px}
.hero-sub b{color:var(--navy)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-points{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;max-width:560px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;text-align:center;box-shadow:0 8px 20px rgba(11,30,63,.06)}
.stat b{display:block;font-family:'Poppins';font-size:23px;color:var(--navy)}
.stat span{font-size:12.5px;color:var(--muted);font-weight:600}
/* Exam card */
.exam-card{background:#fff;border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;transform:rotate(1.2deg)}
.exam-top{background:linear-gradient(120deg,var(--navy),var(--navy2) 55%,var(--violet));color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.exam-top .t1{font-family:'Poppins';font-weight:700;font-size:16.5px}
.exam-top .t2{font-size:12.5px;color:#c4d3f5}
.timer{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;font-weight:700;font-size:14.5px}
.progress{height:9px;background:#e9eefb}
.progress i{display:block;height:100%;width:63%;background:linear-gradient(90deg,var(--teal),var(--amber));border-radius:9px}
.exam-body{padding:24px 24px 8px}
.q-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.tag{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:#eef2ff;color:var(--navy2)}
.tag.green{background:rgba(0,184,148,.13);color:var(--teal-dark)}
.tag.amber{background:rgba(255,183,3,.18);color:#9a6200}
.q-text{font-family:'Poppins';font-weight:600;font-size:18.5px;color:var(--navy);margin-bottom:18px}
.opt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;background:#f7f9ff;border:2px solid var(--line);border-radius:15px;padding:14px 16px;margin-bottom:11px;font-size:15.5px;font-weight:500;cursor:pointer;transition:.2s;font-family:'Inter'}
.opt:hover{border-color:var(--violet)}
.opt .letter{flex:0 0 auto;width:29px;height:29px;border-radius:9px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13.5px;color:var(--navy)}
.opt.correct{border-color:var(--teal);background:rgba(0,184,148,.09)}
.opt.correct .letter{background:var(--teal);border-color:var(--teal);color:#fff}
.opt.wrong{border-color:#e74c3c;background:rgba(231,76,60,.07)}
.opt.wrong .letter{background:#e74c3c;border-color:#e74c3c;color:#fff}
.explain{display:none;background:#fffbe9;border:1.5px dashed var(--amber);border-radius:15px;padding:15px 17px;font-size:14.5px;margin:4px 0 14px}
.explain.show{display:block}
.explain b{color:#9a6200}
.lang-switch{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.lang-switch button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--navy)}
.lang-switch button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.exam-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 21px;gap:12px;flex-wrap:wrap}
.score-chip{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ring{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--teal) 0 82%,#e6ebf8 82% 100%);display:grid;place-items:center}
.ring i{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-family:'Poppins';font-weight:800;font-size:12.5px;color:var(--navy)}
/* Trust strip */
.trust{background:#fff;border-block:1px solid var(--line);padding:24px 0}
.trust .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.trust p{font-weight:600;color:var(--muted);font-size:14.5px}
.trust .brands{display:flex;gap:14px;font-family:'Poppins';font-weight:800;font-size:20px;color:#a9b7d6;flex-wrap:wrap;align-items:center}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:800;font-size:16.5px;line-height:1;padding:11px 20px;border-radius:12px;letter-spacing:.2px;white-space:nowrap;box-shadow:0 6px 16px rgba(11,30,63,.12)}
.brand-uber{background:#000000;color:#ffffff;font-weight:600;letter-spacing:.4px}
.brand-bolt{background:#34d186;color:#10231a}
.brand-freenow{background:#ff0037;color:#ffffff;font-size:15px;letter-spacing:1.2px}
.brand-cabify{background:#7145d6;color:#ffffff;font-weight:700}
.platform-logo{height:34px;width:auto;display:block}
.lang-switch{display:flex;align-items:center}
.lang-switch select{font-family:'Inter';font-size:13.5px;font-weight:600;color:var(--navy);background:#eef2fa;border:1px solid var(--line);border-radius:10px;padding:8px 9px;max-width:132px;cursor:pointer}
.lang-switch .pll-switcher-select{font-family:'Inter';font-size:13.5px;font-weight:600;color:var(--navy);background:#eef2fa;border:1px solid var(--line);border-radius:10px;padding:8px 9px;max-width:132px;cursor:pointer}
.lang-switch ul{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.lang-switch ul a{font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none}
.lang-switch ul a:hover{color:var(--teal-dark)}


/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;position:relative;overflow:hidden}
.step:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--c,var(--teal))}
.step .num{font-family:'Poppins';font-weight:900;font-size:44px;color:var(--c,var(--teal));opacity:.18;position:absolute;top:14px;right:22px}
.step .icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:27px;margin-bottom:18px;background:color-mix(in srgb,var(--c,var(--teal)) 13%,#fff)}
.step h3{font-size:20.5px;margin-bottom:9px}
.step p{color:var(--muted);font-size:15.5px}
/* Categories */
#categorias{background:linear-gradient(180deg,#fff,#f6f8ff)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:26px;transition:.25s;position:relative}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--c)}
.cat .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:25px;margin-bottom:15px;background:color-mix(in srgb,var(--c) 13%,#fff)}
.cat h3{font-size:18.5px;margin-bottom:6px}
.cat p{color:var(--muted);font-size:14.5px;margin-bottom:15px}
.cat .meta{display:flex;justify-content:space-between;align-items:center}
.cat .count{font-family:'Poppins';font-weight:700;color:var(--navy)}
.free-badge{font-size:11.5px;font-weight:800;color:var(--teal-dark);background:rgba(0,184,148,.13);padding:4px 11px;border-radius:999px;letter-spacing:.4px}
/* Why us */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-list{display:grid;gap:17px;margin-top:28px}
.why-item{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:19px 21px}
.why-item .ic{flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:rgba(108,92,231,.11)}
.why-item h4{font-size:16.5px;margin-bottom:3px}
.why-item p{color:var(--muted);font-size:14.5px}
.lang-card{background:linear-gradient(150deg,var(--navy),var(--navy2) 55%,#2d1e6b);border-radius:26px;padding:36px;color:#fff;box-shadow:var(--shadow)}
.lang-card h3{color:#fff;font-size:24px;margin-bottom:8px}
.lang-card>p{color:#c4d3f5;font-size:15px;margin-bottom:24px}
.lang-row{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:15px;padding:15px 18px;margin-bottom:12px}
.lang-row b{font-family:'Poppins';font-size:16px}
.lang-row span{font-size:13px;color:#ffd97a;font-weight:700}
.mistake{background:#fff;border-radius:17px;padding:19px 21px;margin-top:22px;color:var(--ink)}
.mistake h4{font-size:15.5px;margin-bottom:9px}
.mistake .bar{height:10px;border-radius:9px;background:#edf0fa;margin-bottom:9px;overflow:hidden}
.mistake .bar i{display:block;height:100%;border-radius:9px}
/* Pricing */
#precos{background:linear-gradient(165deg,var(--navy) 0%,var(--navy2) 55%,#241a52 100%);color:#fff}
#precos .sec-head h2{color:#fff}
#precos .sec-head p{color:#c4d3f5}
#precos .kicker{background:rgba(255,183,3,.18);color:var(--amber)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:#fff;color:var(--ink);border-radius:24px;padding:34px 30px;position:relative;display:flex;flex-direction:column}
.price.pop{border:4px solid var(--amber);transform:scale(1.045);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.pop-tag{position:absolute;top:-17px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--amber),var(--amber2));color:#231303;font-family:'Poppins';font-weight:800;font-size:13px;padding:7px 18px;border-radius:999px;white-space:normal;text-align:center}
.price h3{font-size:19px}
.price .amount{font-family:'Poppins';font-weight:900;font-size:46px;color:var(--navy);margin:12px 0 2px}
.price .amount small{font-size:16px;font-weight:600;color:var(--muted)}
.price .per{color:var(--muted);font-size:14px;margin-bottom:22px}
.price ul{list-style:none;display:grid;gap:11px;font-size:15px;margin-bottom:28px}
.price li{padding-left:29px;position:relative}
.price li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:rgba(0,184,148,.15);color:var(--teal-dark);font-size:12px;font-weight:800;display:grid;place-items:center}
.price li.off{color:#a4aec6}
.price li.off:before{content:"✕";background:#eef0f7;color:#a4aec6}
.price .btn{margin-top:auto;justify-content:center}
.price-note{text-align:center;color:#c4d3f5;font-size:14px;margin-top:28px}
/* Courses */
.courses{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.course{border-radius:var(--radius);padding:27px 24px;color:#fff;position:relative;overflow:hidden;min-height:205px;display:flex;flex-direction:column}
.course h3{color:#fff;font-size:19px;margin-bottom:8px}
.course p{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:auto}
.course .mods{font-size:13px;font-weight:700;background:rgba(255,255,255,.2);align-self:flex-start;padding:5px 13px;border-radius:999px;margin-top:17px}
.c1{background:linear-gradient(150deg,#00b894,#00796b)}.c2{background:linear-gradient(150deg,#6c5ce7,#4834d4)}
.c3{background:linear-gradient(150deg,#e17055,#d63031)}.c4{background:linear-gradient(150deg,#fdcb6e,#e17055)}
/* Testimonials */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:29px}
.testi .stars{color:var(--amber2);font-size:17px;letter-spacing:3px;margin-bottom:13px}
.testi p{font-size:15.5px;color:#33415e;margin-bottom:20px}
.testi .who{display:flex;gap:13px;align-items:center}
.avatar{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;font-family:'Poppins';font-weight:800;color:#fff;font-size:16px}
.testi .who b{display:block;font-size:15px;color:var(--navy)}
.testi .who span{font-size:13px;color:var(--muted)}
.pass-badge{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--teal-dark);background:rgba(0,184,148,.13);padding:5px 11px;border-radius:999px}
/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:16px;margin-bottom:13px;padding:5px 24px}
.faq summary{font-family:'Poppins';font-weight:600;font-size:16.5px;color:var(--navy);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary:after{content:"+";font-size:23px;color:var(--teal-dark);font-weight:700}
.faq details[open ] summary:after{content:"-"}
.faq details p{color:var(--muted);font-size:15px;padding-bottom:19px}
/* CTA */
.cta-band{background:linear-gradient(120deg,var(--teal),var(--teal-dark) 55%,#00796b);border-radius:28px;padding:52px 46px;display:flex;justify-content:space-between;align-items:center;gap:28px;color:#fff;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:clamp(25px,3.4vw,36px);max-width:640px;margin-bottom:9px}
.cta-band p{color:#d8fff3;font-size:16.5px;max-width:600px}
/* Footer */
footer{background:var(--navy);color:#aebfe8;padding:64px 0 0;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
footer h4{color:#fff;font-size:16px;margin-bottom:17px}
footer ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
footer ul a:hover{color:var(--amber)}
.foot-logo{font-family:'Poppins';font-weight:800;font-size:23px;color:#fff;margin-bottom:13px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding:20px 0;font-size:13.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* Responsive */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .cats,.courses{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .price.pop{transform:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  section{padding:60px 0}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .steps,.cats,.courses,.testis{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .exam-card{transform:none}
  .cta-band{padding:38px 26px}
  .menu-btn{display:block}
  .logo{font-size:19px}
  .logo-badge{width:36px;height:36px;font-size:17px;border-radius:11px}
  .nav{gap:10px;padding:11px 0}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:9px 14px;font-size:13px}
  .topbar{font-size:12px;padding:8px 10px}
}

/* ===== Shared page components (v1 pages) ===== */
.page-hero{background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 55%,#2d1e6b 100%);color:#fff;padding:58px 0 64px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,148,.35),transparent 65%);top:-160px;right:-80px}
.page-hero h1{color:#fff;font-size:clamp(30px,4.4vw,46px);font-weight:800;margin-bottom:12px;position:relative;z-index:2}
.page-hero p{color:#c4d3f5;font-size:17.5px;max-width:680px;position:relative;z-index:2}
.crumbs{font-size:13.5px;color:#9db1dd;margin-bottom:16px;position:relative;z-index:2;font-weight:600}
.crumbs a:hover{color:var(--amber)}
.page-hero .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h3{font-size:19px;margin-bottom:9px}
.card p{color:var(--muted);font-size:15px}
.icon-lg{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;margin-bottom:16px}
.pbar{height:11px;border-radius:9px;background:#edf0fa;overflow:hidden;margin:9px 0 5px}
.pbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--teal),var(--violet))}
.pbar.amber i{background:linear-gradient(90deg,var(--amber),var(--amber2))}
.meta-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;box-shadow:0 10px 30px rgba(11,30,63,.08);margin-bottom:6px}
.table-scroll table.compare{box-shadow:none;border-radius:0;min-width:640px}
table.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(11,30,63,.08);font-size:15px}
table.compare th,table.compare td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left}
table.compare th{background:var(--navy);color:#fff;font-family:'Poppins';font-size:15px}
table.compare td.c,table.compare th.c{text-align:center}
table.compare tr:last-child td{border-bottom:0}
.yes{color:var(--teal-dark);font-weight:800}.no{color:#b6c0d8;font-weight:700}
.form label{display:block;font-weight:600;font-size:14.5px;color:var(--navy);margin:0 0 7px}
.form input,.form select,.form textarea{width:100%;border:2px solid var(--line);border-radius:13px;padding:13px 16px;font-size:15.5px;font-family:'Inter';margin-bottom:17px;background:#fbfcff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal)}
.form .btn{width:100%;justify-content:center}
.small{font-size:13.5px;color:var(--muted)}
.center{text-align:center}
/* Dashboard */
.dash{display:grid;grid-template-columns:290px 1fr;gap:24px;align-items:start}
.side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:96px}
.side .who{display:flex;gap:13px;align-items:center;margin-bottom:20px}
.side a{display:block;padding:11px 14px;border-radius:11px;font-weight:600;font-size:15px;color:var(--navy2);margin-bottom:4px}
.side a.on,.side a:hover{background:rgba(0,184,148,.12);color:var(--teal-dark)}
.plan-box{background:linear-gradient(140deg,var(--amber),var(--amber2));border-radius:16px;padding:18px;color:#231303;margin-top:16px}
.plan-box b{font-family:'Poppins';font-size:17px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.kpi .card{padding:21px;text-align:center}
.kpi b{display:block;font-family:'Poppins';font-size:29px;color:var(--navy)}
.kpi span{font-size:13px;color:var(--muted);font-weight:600}
.result-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 19px;margin-bottom:11px;font-size:15px;flex-wrap:wrap}
.badge-pass{background:rgba(0,184,148,.14);color:var(--teal-dark);font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:999px}
.badge-fail{background:rgba(231,76,60,.12);color:#c0392b;font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:999px}
/* Exam player */
.qnav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.qnav span{aspect-ratio:1;border-radius:10px;background:#eef2ff;display:grid;place-items:center;font-weight:700;font-size:13.5px;color:var(--navy)}
.qnav span.done{background:var(--teal);color:#fff}
.qnav span.now{background:#fff;border:2.5px solid var(--amber2);color:var(--navy)}
.qnav span.flag{background:rgba(255,183,3,.35)}
/* Lessons */
.lesson{display:flex;gap:15px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 20px;margin-bottom:11px}
.lesson .n{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:rgba(108,92,231,.12);display:grid;place-items:center;font-family:'Poppins';font-weight:800;color:var(--violet)}
.lesson h4{font-size:16px}
.lesson p{font-size:13.5px;color:var(--muted)}
.lesson .st{margin-left:auto;font-size:12.5px;font-weight:800;padding:5px 13px;border-radius:999px;white-space:normal;text-align:center}
.st.free{background:rgba(0,184,148,.14);color:var(--teal-dark)}.st.lock{background:#eef0f7;color:#8494b5}.st.done{background:var(--teal);color:#fff}
/* Article */
.article{max-width:800px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:46px 50px}
.article h2{font-size:27px;margin:30px 0 12px}
.article h3{font-size:21px;margin:24px 0 9px}
.article p,.article li{color:#33415e;font-size:16.5px;margin-bottom:13px}
.article ul,.article ol{padding-left:24px}
.callout{background:#fffbe9;border:1.5px dashed var(--amber);border-radius:15px;padding:18px 21px;margin:20px 0;font-size:15.5px}
/* Timeline */
.timeline{display:grid;gap:0;max-width:820px;margin:0 auto}
.tl{display:flex;gap:20px;position:relative;padding-bottom:34px}
.tl:before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:3px;background:var(--line)}
.tl:last-child:before{display:none}
.tl .dotn{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--violet));color:#fff;display:grid;place-items:center;font-family:'Poppins';font-weight:800;font-size:19px;z-index:2}
.tl h3{font-size:20px;margin-bottom:6px}.tl p{color:var(--muted);font-size:15.5px;max-width:600px}
@media(max-width:1020px){.dash{grid-template-columns:1fr}.side{position:static}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.grid2,.grid3,.kpi{grid-template-columns:1fr}.article{padding:30px 22px}.qnav{grid-template-columns:repeat(5,1fr)}}

/* ===== TVDE Academia responsive overhaul v2 ===== */
/* TVDE Academia responsive overhaul v2
   Method note: this block is additive and loads last, so it wins over the
   original 1020px and 680px blocks without deleting the original design.
   Breakpoints: 1180, 1024, 900, 860 (nav), 820, 768, 680, 560, 420, 360.
   Full issue list and reasoning per viewport: see RESPONSIVE-AUDIT.md */

/* 1. Global overflow guard and fluid media */
html{max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-wrap:break-word}
img,svg,video,iframe,embed,object{max-width:100%}
img,video{height:auto}
a,p,li,h1,h2,h3,h4,td,th{overflow-wrap:break-word}
footer a,.foot-bottom span,.card p a{overflow-wrap:anywhere}

/* 2. Buttons: wrapping text and 44px touch target already patched in the
   base .btn rule. Long pill tags also wrap instead of overflowing. */
.pill{white-space:normal;text-align:center;line-height:1.35;min-height:36px}
.pop-tag{max-width:92%}
.faq summary{min-height:44px;align-items:center}
.side a{min-height:44px;display:flex;align-items:center}
.menu-btn{width:44px;height:44px;flex:0 0 auto}
.lang-switch button{min-height:36px}

/* 3. Compare tables: scroll wrapper (HTML wraps tables in .table-scroll) */
.table-scroll{max-width:100%}
.table-scroll:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* 4. Keyboard focus visibility */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,184,148,.65);outline-offset:2px;border-radius:6px}

/* 1180px: large laptop down to iPad landscape edge */
@media(max-width:1180px){
  .nav-links{gap:20px}
  .hero-grid{gap:38px}
  .cats,.courses,.testis,.steps{gap:18px}
  .foot-grid{gap:28px}
}

/* 1024px: iPad landscape and small laptops */
@media(max-width:1024px){
  section{padding:72px 0}
  .nav-links{gap:16px;font-size:14.5px}
  .nav-cta .btn{padding:10px 18px;font-size:14px}
  .logo{font-size:21px}
  .page-hero{padding:50px 0 56px}
  .cta-band{padding:44px 36px}
  .article{padding:40px 38px}
  .kpi{gap:13px}
  .kpi .card{padding:18px 12px}
  .kpi b{font-size:25px}
}

/* 900px: exam layout with sidebar (inline .sim-grid grids) stacks.
   The !important is required because those grids are set inline in the HTML. */
@media(max-width:900px){
  .sim-grid{grid-template-columns:1fr !important}
}

/* 860px: navigation switches to the hamburger pattern.
   The button toggles .open on #menu-principal (script in every page). */
@media(max-width:860px){
  header .nav{position:relative;flex-wrap:nowrap}
  .menu-btn{display:grid;place-items:center}
  .nav-links{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;flex-direction:column;gap:2px;z-index:70}
  .nav-links.open{display:flex}
  .nav-links a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:11px;font-size:16px}
  .nav-links a:hover,.nav-links a:focus-visible{background:rgba(0,184,148,.10)}
  .nav-cta .btn-ghost{display:none}
}

/* 820px: iPad and tablet portrait */
@media(max-width:820px){
  .grid2{grid-template-columns:1fr}
  .steps,.testis{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .hero h1 .hl{white-space:normal}
  .hero h1 .hl:after{bottom:2px;height:9px}
  .cta-band{flex-direction:column;align-items:stretch;text-align:left}
  .cta-band .btn{align-self:flex-start}
  .trust .wrap{justify-content:center;text-align:center}
  .trust .brands{justify-content:center;gap:18px 24px}
  .exam-top{flex-wrap:wrap}
  .tl{gap:16px}
  .dash{gap:18px}
}

/* 768px: tablet portrait lower edge, large phones landscape */
@media(max-width:768px){
  .wrap{padding:0 18px}
  section{padding:60px 0}
  .qnav{grid-template-columns:repeat(5,1fr)}
  table.compare{font-size:14px}
  table.compare th,table.compare td{padding:12px 13px}
  /* Fallback for any compare table that was not wrapped */
  table.compare:not(.table-scroll table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .form input,.form select,.form textarea{font-size:16px;min-height:48px}
  .form textarea{min-height:120px}
  .opt{min-height:52px}
}

/* 680px: original small breakpoint, extended */
@media(max-width:680px){
  .hero{padding:54px 0 64px}
  .hero-sub{font-size:16.5px}
  .page-hero p{font-size:16px}
  .article{padding:28px 20px}
  .article h2{font-size:23px}
  .article h3{font-size:19px}
  .article p,.article li{font-size:15.5px}
  .card{padding:23px 20px}
  .step{padding:27px 22px}
  .price{padding:30px 24px}
  .lang-card{padding:28px 22px}
  .exam-body{padding:20px 18px 6px}
  .exam-foot{padding:13px 18px 18px}
  .faq details{padding:5px 18px}
  .foot-bottom{flex-direction:column;gap:6px}
}

/* 560px: phones */
@media(max-width:560px){
  .wrap{padding:0 16px}
  section{padding:48px 0}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:34px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-points .pill{flex:1 1 auto;justify-content:center}
  .stats{gap:10px;margin-top:28px}
  .stat{padding:12px 8px}
  .stat b{font-size:20px}
  .exam-top{flex-direction:column;align-items:flex-start;gap:9px}
  .exam-top .timer{align-self:flex-start}
  .exam-foot{flex-direction:column;align-items:stretch}
  .exam-foot .btn{width:100%}
  .score-chip{justify-content:center}
  .cta-band{padding:32px 22px;border-radius:22px}
  .cta-band .btn{width:100%;align-self:stretch}
  .result-row{flex-direction:column;align-items:flex-start;gap:7px}
  .lesson{flex-wrap:wrap;row-gap:9px;padding:15px 16px}
  .lesson .st{margin-left:55px}
  .lang-row{flex-wrap:wrap;gap:5px 12px}
  .kpi{grid-template-columns:1fr}
  .kpi .card{padding:17px}
  .price .amount{font-size:40px}
  .pop-tag{left:50%;font-size:12px;padding:6px 13px}
  .tl .dotn{width:46px;height:46px;font-size:16px}
  .tl:before{left:22px;top:48px}
  .tl h3{font-size:18px}
  .topbar{line-height:1.45}
  .sec-head{margin-bottom:36px}
  .sec-head p{font-size:16px}
  .q-text{font-size:17px}
  .course{min-height:0}
}

/* 420px: small phones */
@media(max-width:420px){
  .logo{font-size:18px;gap:8px}
  .logo-badge{width:34px;height:34px;font-size:16px;border-radius:10px}
  .nav-cta .btn{padding:9px 13px;font-size:13px}
  .hero h1{letter-spacing:-.2px}
  .btn{padding:14px 20px;font-size:15px}
  .nav-cta .btn{min-height:44px}
  .qnav{gap:6px}
  .qnav span{font-size:12.5px;border-radius:8px}
  .lang-switch button{min-height:44px;padding:7px 14px}
  .trust .brands{font-size:17px}
  .foot-logo{font-size:20px}
  .timer{font-size:13px;padding:6px 11px}
  .ring{width:46px;height:46px}
  .ring i{width:35px;height:35px}
}

/* 360px and below: narrow phones, last-resort tightening, no sideways scroll */
@media(max-width:360px){
  .wrap{padding:0 14px}
  section{padding:42px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat b{font-size:18px}
  .stat span{font-size:11.5px}
  .hero-ctas .btn,.exam-foot .btn,.cta-band .btn{padding:13px 14px;font-size:14.5px}
  .page-hero{padding:42px 0 48px}
  .exam-card{border-radius:20px}
  .opt{padding:12px 12px;font-size:14.5px;gap:10px}
  .lesson .st{margin-left:0}
  .lang-row{flex-direction:column;align-items:flex-start}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none !important;animation:none !important}
}

/* Platform logos on small phones: exact logos side by side, centred */
@media(max-width:560px){
  .trust .brands{display:flex;justify-content:center;align-items:center;gap:30px;width:100%}
  .platform-logo{height:29px}
}

/* Language switcher on small screens: own row under the header bar */
@media(max-width:860px){
  header .nav{flex-wrap:wrap}
  .lang-switch{order:3;width:100%;justify-content:flex-end;padding:8px 0 2px}
  .lang-switch select{max-width:160px}
}

/* RTL chrome (Urdu): the header, trust strip and footer flex rows already
   follow the document direction; only text alignment inside them needs a
   nudge so lines start at the right edge instead of inheriting left. */
html[dir="rtl"] .nav-links a{text-align:right}
html[dir="rtl"] .trust p,
html[dir="rtl"] footer p,
html[dir="rtl"] .foot-bottom span{text-align:right}
html[dir="rtl"] .lang-switch select{text-align:right}


/* Study pages v2: question pictures, translation blocks and toggle toolbar */
.q-img{display:block;max-width:100%;height:auto;border-radius:12px;margin:12px 0 4px}
.q-tr{background:#f4f7fd;border-top:2px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--navy)}
.q-tr-text{font-weight:600;margin-bottom:6px}
.q-tr-opt{padding:3px 0}
.q-tr-opt .letter{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:rgba(0,184,148,.13);font-weight:700;margin-right:8px;font-size:12.5px}
.q-tr[dir="rtl"] .q-tr-opt .letter{margin-right:0;margin-left:8px}
.tr-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.tr-toolbar .tr-label{font-family:'Poppins';font-weight:700;font-size:14.5px;color:var(--navy);margin-right:2px}
.tr-toolbar button{font-family:'Inter';font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;min-height:38px}
.tr-toolbar button:hover{border-color:var(--teal)}
.tr-toolbar button.active{background:var(--teal);border-color:var(--teal);color:#fff}
@media(max-width:560px){
  .tr-toolbar{gap:6px}
  .tr-toolbar button{padding:8px 12px;font-size:13px}
  .q-img{width:100%}
}

/* Footer language switcher (v1.9): same Polylang dropdown as the header,
   placed in the first footer column in the style of getyournif.pt. The
   change handler in js/menu.js already binds every .pll-switcher-select. */
.lang-switch-footer{display:block;margin-top:22px}
.lang-switch-footer .footer-lang-label{display:block;font-family:'Poppins';font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;margin-bottom:9px}
.lang-switch-footer select,.lang-switch-footer .pll-switcher-select{max-width:100%}