/* =========================================================
   Test Panel — shared layout classes
   (select-category / start / choose-subjects / take / result)
   Loaded AFTER form-style.css on every page in this folder.
   ========================================================= */

/* form-style.css makes body a centering flex row for the old single-box
   pages. These pages now stack multiple full-width sections (.title banner
   + .WG wrapper), so reset that here. */
body.test-panel{display:block;padding:0;}

/* ---------- grid utilities ---------- */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px;box-sizing:border-box;}
.row{display:flex;flex-wrap:wrap;margin:0 -12px;}
.row>[class*="col-"]{padding:0 12px;box-sizing:border-box;}
.col-md-4{flex:0 0 33.3333%;max-width:33.3333%;}
.col-md-6{flex:0 0 50%;max-width:50%;}
.col-md-8{flex:0 0 66.6667%;max-width:66.6667%;}
.col-md-12{flex:0 0 100%;max-width:100%;}
.col-xs-5{flex:0 0 41.6667%;max-width:41.6667%;}
.col-xs-7{flex:0 0 58.3333%;max-width:58.3333%;}
.pull-right{float:right;}
.clearfix::after{content:"";display:table;clear:both;}
@media (max-width:767px){
  .row>[class*="col-md-"],.row>[class*="col-xs-"]{flex:0 0 100%;max-width:100%;}
  .hidden-xs{display:none !important;}
}
@media (max-width:991px){.hidden-sm{display:none !important;}}

/* ---------- page header banner ---------- */
.title{
  background:linear-gradient(120deg,#3454d1 0%,#25327f 100%);
  padding:34px 0 30px;
}
.title h1{
  font-family:'Inter',Arial,sans-serif;
  font-size:24px;
  font-weight:800;
  color:#fff;
  margin:0;
  text-transform:capitalize;
}
.title .row{align-items:center;}

.breadcrumb{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  font-size:12.5px;
}
.breadcrumb li{color:rgba(255,255,255,.65);}
.breadcrumb li a{color:#fff;text-decoration:none;font-weight:600;}
.breadcrumb li a:hover{text-decoration:underline;}
.breadcrumb li.active{color:#fff;font-weight:700;}

/* ---------- section wrappers ---------- */
.WG{background:#f6f7fb;}
.boxPding{padding:52px 0 48px;}
.W{background:#fff;}

.container.W{
  max-width:760px;
  background:#fff;
  border-radius:16px;
  border:1px solid #e7e9f2;
  box-shadow:0 12px 34px rgba(27,38,71,.06);
  padding-top:30px;
  padding-bottom:30px;
}
.container.W.wide{max-width:900px;}

/* ---------- generic content box (replaces the old .card shell) ---------- */
.boxIn{background:#fff;border-radius:14px;}

/* ---------- category / action button list ---------- */
.iconBtns{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:24px;
}
@media (max-width:640px){.iconBtns{grid-template-columns:1fr;}}

.iconBtns .boxIn{
  border:1px solid #e7e9f2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(27,38,71,.05);
}

.iconBtns .boxIn a.btn.cFF{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  height:100%;
  background:#fff;
  color:#1b2647;
  padding:26px 24px;
  border-radius:0;
  box-shadow:none;
  font-weight:600;
  text-align:left;
}
.iconBtns .boxIn a.btn.cFF:hover{border-color:#c7cff2;}

.iconBtns .cat-icon{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:12px;
  background:#eef1fd;
  color:#3454d1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconBtns .cat-icon svg{width:22px;height:22px;}
.iconBtns .cat-copy{flex:1;min-width:0;}
.iconBtns .cat-copy h3{font-size:16px;font-weight:700;margin-bottom:4px;color:#1b2647;}
.iconBtns .cat-copy p{font-size:13px;color:#5c6584;line-height:1.5;font-weight:400;}
.iconBtns .cat-arrow{flex:0 0 auto;color:#8d94ac;}
.iconBtns .cat-arrow svg{width:18px;height:18px;}

/* ---------- link/button helpers ---------- */
a.cFF{color:#fff;text-decoration:none;}
a.cFF:hover{color:#fff;text-decoration:none;}
.btn.cFF{color:#fff;}

.btnHvr{transition:transform .18s ease, box-shadow .18s ease;}
.btnHvr:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(52,84,209,.20);}
.iconBtns .btnHvr:hover{box-shadow:0 14px 30px rgba(52,84,209,.14);}