/* =========== HRYP CST – Base styling =========== */

:root{
  --hryp-primary:#1b5fc0;
  --hryp-primary-dark:#13478e;
  --hryp-bg:#f7f9fc;
  --hryp-text:#222;
  --hryp-muted:#777;
  --hryp-border:#e6e9ef;
  --hryp-card:#fff;
  --hryp-soft:#fafafa;
  --hryp-success:#226600;
  --hryp-warning:#d99000;
  --hryp-danger:#cc0000;
  --radius-lg:16px;
  --radius-md:10px;
  --shadow:0 3px 15px rgba(0,0,0,.08);
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
}

html,body{
  background:var(--hryp-bg);
  color:var(--hryp-text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}

/* Utility */
.hidden{display:none;}
.small{font-size:.9rem;}
.center{text-align:center;}
.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}

/* Inputs & Buttons (global look) */
.cst-wrap input[type="text"],
.cst-wrap input[type="email"],
.cst-wrap select,
.hryp-cst-test input[type="text"],
.hryp-cst-customize select{
  width:100%;
  max-width:560px;
  background:#fff;
  border:1px solid var(--hryp-border);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}

.cst-wrap input:focus,
.cst-wrap select:focus,
.hryp-cst-test input:focus,
.hryp-cst-customize select:focus{
  border-color:var(--hryp-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(27,95,192,.12);
}

button,
.cst-wrap .pay,
#btn-load-preview,
#cst-start,
#cst-prev,#cst-next,#cst-submit,
.btn-replace,
.approve-btn{
  background:var(--hryp-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  padding:12px 18px;
  font-size:1rem;
  cursor:pointer;
  transition:transform .05s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm);
}

button:hover,
.cst-wrap .pay:hover,
#btn-load-preview:hover,
#cst-start:hover,
#cst-prev:hover,#cst-next:hover,#cst-submit:hover,
.btn-replace:hover,
.approve-btn:hover{
  background:var(--hryp-primary-dark);
}

button:active{ transform:translateY(1px); }

/* Secondary / Light button variant */
.btn-replace{
  background:#f0f0f0;
  color:#222;
}
.btn-replace:hover{ background:#e6e6e6; }

/* Cards / Containers */
.cst-wrap,
.hryp-cst-test,
.hryp-cst-customize{
  background:var(--hryp-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
  max-width:960px;
  margin:32px auto;
}

.cst-wrap h2,
.hryp-cst-test h2,
.hryp-cst-customize h2{
  text-align:center;
  margin:0 0 12px;
  font-size:1.8rem;
}

.cst-wrap p,
.hryp-cst-test p,
.hryp-cst-customize p{ color:#444; }

/* ========== Recruiter – Generator / Preview / Tiers ========== */

.cst-wrap form#cst-gen-form{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:18px;
}

.cst-preview{
  margin:16px 0 22px;
  padding:18px;
  border:1px solid var(--hryp-border);
  border-radius:var(--radius-md);
  background:var(--hryp-soft);
}

#cst-preview-list{
  background:#fff;
  border:1px dashed var(--hryp-border);
  border-radius:var(--radius-md);
  padding:14px;
  min-height:80px;
  margin-bottom:12px;
}

.cst-preview .note{
  color:var(--hryp-muted);
  font-size:.95rem;
}

.cst-tiers h3{
  text-align:center;
  margin:10px 0 16px;
}

.tiers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.tier{
  background:#fff;
  border:1px solid var(--hryp-border);
  border-radius:var(--radius-lg);
  padding:18px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.tier h4{ margin:0 0 6px; }
.tier .price{
  font-size:1.6rem;
  color:var(--hryp-primary);
  font-weight:700;
  margin:8px 0 12px;
}
.tier .plus-opt{
  display:block;
  margin:8px 0 12px;
  color:#444;
}
.tier .pay{ width:100%; }

/* ========== Candidate Test ========== */

.hryp-cst-test .intro-screen,
.hryp-cst-test .quiz-screen,
.hryp-cst-test .completion-screen{
  text-align:center;
}

.hryp-cst-test label{
  display:block;
  margin:14px auto 6px;
  max-width:560px;
  text-align:left;
}

.hryp-cst-test input[type="text"]{
  display:block;
  margin:0 auto;
}

.test-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:16px 0 20px;
  flex-wrap:wrap;
}

.progress{
  flex:1;
  background:#eee;
  border-radius:999px;
  height:8px;
  overflow:hidden;
}
.progress-bar{
  height:8px;
  background:var(--hryp-primary);
  width:0%;
  transition:width .3s ease;
}

.timer{
  font-weight:700;
  color:var(--hryp-primary);
}

.question-area h3{ margin:8px 0 12px; }

.answers{
  text-align:left;
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:700px;
}
.answers li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  transition:background .15s;
}
.answers li:hover{ background:#f4f7fd; }
.answers input{ transform:translateY(1px); }

.controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.submit-btn.hidden{ display:none; }

/* Completion */
.completion-screen h3{ margin-bottom:8px; }

/* ========== Recruiter – Customize (Plus) ========== */

.hryp-cst-customize .intro{
  text-align:center;
  color:#555;
  margin-bottom:18px;
}
.hryp-cst-customize .test-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  color:#555;
  margin-bottom:18px;
}

.q-block{
  border:1px solid var(--hryp-border);
  background:var(--hryp-soft);
  border-radius:var(--radius-md);
  padding:16px;
  margin-bottom:12px;
}
.q-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.q-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.q-num{
  font-weight:700;
  color:var(--hryp-primary);
}
.q-cat{
  background:#e9f0ff;
  color:var(--hryp-primary);
  padding:2px 10px;
  border-radius:999px;
  font-size:.85rem;
}
.q-text{
  margin:10px 0;
  font-weight:600;
}
.answers .answer-correct{
  color:var(--hryp-primary);
  font-weight:700;
}

.finalize{
  text-align:center;
  margin-top:20px;
}
#cst-qty{
  margin:0 10px;
  padding:10px 12px;
  border:1px solid var(--hryp-border);
  border-radius:var(--radius-md);
  background:#fff;
}
.approve-btn{ margin-top:12px; }
.note{ color:#666; font-size:.95rem; }
.result-msg{
  margin-top:12px;
  padding:10px 12px;
  background:#f5fff1;
  color:var(--hryp-success);
  border-radius:var(--radius-md);
}

/* ========== Tables (email preview blocks, etc.) ========== */
.cst-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--hryp-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.cst-table th,
.cst-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--hryp-border);
  text-align:left;
}
.cst-table thead th{
  background:#f2f5fb;
  font-weight:700;
}

/* ========== Responsive ========== */

@media (max-width: 900px){
  .tiers-grid{ grid-template-columns:1fr; }
  .controls{ flex-direction:column; }
  .answers{ padding:0 4px; }
}

@media (max-width: 600px){
  .cst-wrap, .hryp-cst-test, .hryp-cst-customize{ padding:20px; }
  .test-header{ flex-direction:column; align-items:flex-start; }
  .progress{ width:100%; }
  .answers li{ padding:8px; }
}