/* =====================================================
   GLOBAL / DASHBOARD TILES (UNCHANGED CORE DESIGN)
===================================================== */

.content-area{
  padding-top:0 !important; 
  margin-top:0 !important; 
}
 
.dashboard-menu-grid{
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  margin-top:20px;
}

.dashboard-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:220px;
  height:160px;
  border-radius:25px;
  text-decoration:none;
  font-weight:700;
  font-style:italic;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  transition:transform .2s, box-shadow .2s;
}

.dashboard-tile .icon{
  font-size:2.5rem;
  margin-bottom:10px;
}

.dashboard-tile .label{
  font-size:1.1rem;
  color:#1a334d;
}

.dashboard-tile:hover{
  transform:scale(1.05);
  box-shadow:0 6px 15px rgba(0,0,0,.2);
}

.peach{background:#ffcaa7;}
.blue{background:#8ec1ce;}
.green{background:#d3ead3;}


/* =====================================================
   QUESTION CARD – CLEAN CONSOLIDATED VERSION
===================================================== */

/* The complete JetEngine listing item contains:
   - the question card
   - the Add button 
*/
.jet-listing-grid__item{
  position:relative !important;
  width:100% !important;
}

/* Main card */
.question-card{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-height:112px !important;
 
  /* Space on the right for Add button and marks */
  padding:14px 88px 70px 16px !important;
 
  text-align:left; 
  background:#fff;
  border:1px solid #eef3f7;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(40,60,90,.06);

  overflow:hidden !important;

  transition: 
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.question-card:hover{
  transform:translateY(-2px);
  border-color:#d9e8ee;
  box-shadow:0 10px 24px rgba(40,60,90,.10);
}

/* Remove Gutenberg block spacing inside cards */
.question-card > *,
.question-card .wp-block{
  margin:0 !important;
}

.question-card p{
  margin:0 !important;
  line-height:1.4;
}
 
.question-card{
  font-size:15px !important;
}

.question-card .q-body,
.question-card .subq-text,
.question-card .sub-text{
  font-size:15px !important;
  line-height:1.45 !important;
}

/* Main question text */
.question-card .q-body{
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

.question-card .q-body p:first-child{
  color:#1a334d;
}

/* MCQ options */
.question-card .mcq-option{
  display:block;
  margin-bottom:9px;
}

/* Hide empty image fields */
.question-card .mcq-image:empty{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Hide memo answer visually, but keep it in the HTML */
.question-card .asap-answer,
.question-card .q-answer{
  display:none !important;
}

/* =====================================================
   QUESTION CARD – META TAG ROW
===================================================== */

.question-card .q-meta-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;

  width:100% !important;
  margin:8px 0 24px !important;
  padding:0 !important;
}

/* All metadata fields */
.question-card .q-meta-row .q-topic,
.question-card .q-meta-row .q-subtopic,
.question-card .q-meta-row .q-type{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:100% !important;

  margin:0 !important;
  padding:4px 9px !important;

  border-radius:999px !important;
  background:#f4f7f9 !important;
  color:#52697a !important;

  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

/* Remove JetEngine wrapper spacing */
.question-card .q-meta-row .jet-listing-dynamic-field__content{
  display:inline !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}

/* Question type gets the green pill */
.question-card .q-meta-row .q-type{
  background:#e1f3ea !important;
  color:#39705c !important;
}

/* Keep all three metadata pills on one row */
.question-card .q-meta-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
 
	justify-content:flex-start !important;
align-items:center !important;
	
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:10px 0 18px !important;
  padding:0 !important;
}

/* Compact metadata pills */
.question-card .q-meta-row .q-topic,
.question-card .q-meta-row .q-subtopic,
.question-card .q-meta-row .q-type{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  padding:2px 8px !important;

  font-size:9px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* Prevent JetEngine's inner wrappers from becoming full width */
.question-card .q-meta-row .wp-block-jet-engine-dynamic-field,
.question-card .q-meta-row .jet-listing-dynamic-field,
.question-card .q-meta-row .jet-listing-dynamic-field__content{
  display:inline-flex !important;
  flex:0 1 auto !important;
  flex:none !important;
width:auto !important;
  min-width:0 !important;
  max-width:max-content !important;
  margin:0 !important;
}

/* Topic + Subtopic */
.question-card .q-meta-row .q-topic,
.question-card .q-meta-row .q-subtopic{
    background:#f5f7fa !important;
    color:#6b7d8a !important;
    border:none !important;
}

/* Question Type */
.question-card .q-meta-row .q-type{
    background:#dff5e8 !important;
    color:#2f6f5a !important;
    border:none !important;
}

/* =====================================================
   ADD TO TEST BUTTON
===================================================== */

/* Button wrapper sits outside the question card */
.jet-listing-grid__item .add-to-test{
  position:absolute !important;
  top:auto !important;
  bottom:12px !important;
  right:12px !important;
  z-index:30 !important; 

  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;

  cursor:pointer !important;
  pointer-events:auto !important;
}

/* Clickable button/link */
.jet-listing-grid__item .add-to-test,
.jet-listing-grid__item .add-to-test a,
.jet-listing-grid__item .add-to-test button,
.jet-listing-grid__item .add-to-test .wp-block-button__link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:auto !important;
  height:38px !important;
  padding:0 14px !important;
  margin:0 !important;

  background:#fff !important;
  color:#2f6f5a !important;
  border:1px solid #b7ddcf !important;
  border-radius:10px !important;

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;

  box-shadow:none !important;
  cursor:pointer !important;
}

.jet-listing-grid__item .add-to-test:hover,
.jet-listing-grid__item .add-to-test a:hover,
.jet-listing-grid__item .add-to-test button:hover,
.jet-listing-grid__item .add-to-test .wp-block-button__link:hover{
  background:#d3ead3 !important;
  color:#1f5946 !important;
  border-color:#91c9b5 !important;
}

/* =====================================================
   QUESTION CARD – MAIN MARKS BADGE
===================================================== */

.question-card .q-marks,  
.question-card .qmarks{
  position:absolute !important;
  top:auto !important;
bottom:58px !important;
right:16px !important;
  left:auto !important;
  z-index:25 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:28px !important;
  min-width:28px !important;
  max-width:40px !important;
  height:28px !important;
  min-height:28px !important;

  margin:0 !important;
  padding:0 6px !important;

  background:#f4f7f9 !important;
  color:#627585 !important;
  border:none !important;
  border-radius:999px !important;
  box-shadow:none !important;

  font-size:12px !important;
  font-weight:700 !important;
  line-height:28px !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* Force the actual JetEngine marks value into the badge */
.question-card .q-marks *,
.question-card .qmarks *{
  position:static !important;
  inset:auto !important;
  float:none !important;

  display:inline !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  color:inherit !important;
  border:none !important;
  box-shadow:none !important;

  font:inherit !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* JetEngine's actual Dynamic Field content */
.question-card .q-marks .jet-listing-dynamic-field__content,
.question-card .qmarks .jet-listing-dynamic-field__content{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
 
    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1 !important;
    text-align:center !important;
}

.question-card .q-marks,
.question-card .qmarks{
    padding-top:5px !important;
}

/* =====================================================
   QUESTION CARD – SUBQUESTION ROWS
===================================================== */

/* Full repeater list */
.question-card .subq-source-list{
  counter-reset:catalog-subq;
  list-style:none !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:14px 0 0 !important;
  padding:0 !important;

  box-sizing:border-box !important;
}

/* One subquestion row:
   a) | text | marks
*/
.question-card li.subq-item.asap-subq{
  counter-increment:catalog-subq;

  display:grid !important;
  grid-template-columns:24px minmax(0, 1fr) 38px !important;
  column-gap:8px !important;
  align-items:start !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:0 0 10px !important;
  padding:0 !important;

  box-sizing:border-box !important;
}

/* Visual a), b), c) numbering only */
.question-card li.subq-item.asap-subq::before{
  content:counter(catalog-subq, lower-alpha) ")";
  grid-column:1 !important;

  display:block !important;
  margin:0 !important;
  padding:0 !important;

  color:#2f6478;
  font-weight:600;
  line-height:1.5;
}

/* Subquestion text column */
.question-card li.subq-item.asap-subq .subq-text{
  grid-column:2 !important;

  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;

  margin:0 !important;
  padding:0 !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

.question-card li.subq-item.asap-subq .sub-text{
  display:block !important;

  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;

  margin:0 !important;
  padding:0 !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

/* Subquestion marks column */
.question-card li.subq-item.asap-subq .subq-mark{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:start !important;

  display:block !important;
  position:static !important;
  float:none !important;

  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;

  margin:0 !important; 
  padding:0 !important;

  text-align:right !important;
  line-height:1.5 !important;

  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
/* =====================================================
   TEST PREVIEW (MAIN RIGHT PANE)
===================================================== */

#test-preview{
  max-width:794px;
  margin:8px auto;
  background:#fff;
  line-height:1.5;
}


/* =====================================================
   HEADER (SAFE SIMPLIFIED STRUCTURE)
===================================================== */

#test-preview .tp-hdr{
  margin-bottom:8px;
  width:100%;
}

#test-preview .tp-hline{
  height:2px;
  background:#2f3b45;
  opacity:.35;
  margin:6px 0 10px;
}

#test-preview .tp-hgrid{
  display:grid;
  grid-template-columns:90px 1fr 90px;
  align-items:center;
  gap:12px;
}

#test-preview .tp-hlogo{
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#test-preview .tp-hlogo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

#test-preview .tp-hcenter{
  text-align:center;
}

/* IMPORTANT FIX: LEFT ALIGN HEADER META */
.saved-test-wrap .tp-h-leftmeta,
.saved-test-wrap .tp-h-rightmeta{
  text-align:left !important;
}

#test-preview .tp-hmeta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:6px;
}


/* =====================================================
   SECTION + GROUP TITLES (FIX ALIGNMENT ISSUE)
===================================================== */


/* =====================================================
   QUESTION GRID (CORE SYSTEM - SINGLE SOURCE OF TRUTH)
===================================================== */

:root{
  --tp-num-col:56px;
  --tp-gap:12px;
  --tp-marks-col:72px;
}

#test-preview .preview-row{
  display:grid !important;
  grid-template-columns: var(--tp-num-col) 1fr var(--tp-marks-col) max-content !important;
  column-gap: var(--tp-gap) !important;
  align-items:start !important;
}

#test-preview .tp-num{
  text-align:right !important;
  font-weight:600 !important;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

#test-preview .preview-q{
  min-width:0 !important;
}

#test-preview .preview-q p{
  margin:4px 0 !important;
}

#test-preview .preview-marks{
  text-align:right !important;
  font-weight:400 !important;
  white-space:nowrap !important;
}

/* Ordinary main-question marks */
#test-preview .tp-main-marks,
#test-preview .tp-final-mark{
  font-weight:400 !important;
}

/* Ordinary subquestion marks */
#test-preview .tp-subquestion-row td:nth-child(3),
#test-preview .tp-subquestion-row td:nth-child(3) strong,
#test-preview .tp-subquestion-mark{
  font-weight:400 !important;
}

/* Group/question total stays regular */
#test-preview .tp-group-total .preview-marks{
  font-weight:400 !important;
}

/* ONLY section total and grand total are bold */
#test-preview .tp-section-total-content,
#test-preview .tp-section-total-content span,
#test-preview .tp-grand-total-content,
#test-preview .tp-grand-total-content span{
  font-weight:700 !important;
}


/* =====================================================
   MCQ FORMATTING (SINGLE CLEAN RULE)
===================================================== */

#test-preview .preview-q ol{
  list-style:upper-alpha outside !important;
  padding-left:2.2em !important;
  margin:4px 0 6px 0 !important;
}

#test-preview .preview-q li{
  margin:2px 0 !important;
}


/* =====================================================
   BUTTON SYSTEM (UNIFIED STYLE)
===================================================== */

#test-preview button,
#test-preview .tp-header button,
#test-preview .tp-sections button,
#test-preview .tp-groups button,
.tp-actions button{
  appearance:none !important;
  background:#ffcaa7 !important;
  color:#1a334d !important;
  border:0 !important;
  border-radius:10px !important;
  font-weight:700 !important;
  padding:.55rem .9rem !important;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.08) !important;
  transition:all .2s ease;
}

#test-preview button:hover{
  background:#ffb98a !important;
}


/* =====================================================
   SAVED TEST CARDS — CLEAN LIBRARY STYLE
===================================================== */

article.entry-card.type-saved-tests {
  background: #fff !important;
  border: 1px solid #d9e2ea !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(31, 74, 103, 0.08) !important;

  padding: 28px !important;
  min-height: 0 !important;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  position: relative;
  overflow: hidden;
}

/* Remove the old blue label strip */
article.entry-card.type-saved-tests::before {
  content: none !important;
  display: none !important;
}

/* Saved date */
article.entry-card.type-saved-tests .entry-meta {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: #6c7f8d;
}

/* Test title */
article.entry-card.type-saved-tests .entry-title {
  margin: 0 !important;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  line-height: 1.2;
}

article.entry-card.type-saved-tests .entry-title a {
  color: #28536b;
  text-decoration: none;
}

/* Subtle hover */
article.entry-card.type-saved-tests {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

article.entry-card.type-saved-tests:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(31, 74, 103, 0.13) !important;
}

/* =====================================================
   PRINT (A4 SAFE)
===================================================== */

@media print{
  @page{ size:A4; margin:25.4mm; }

  header, footer, .sidebar, .navigation,
  .tp-header, .tp-sections, .tp-groups,
  button, select, input{
    display:none !important;
  }

  #test-preview{
    line-height:1.5 !important;
  }
}


/* =====================================================
   GLOBAL ALIGNMENT FIX (IMPORTANT)
===================================================== */

.saved-test-wrap{
  text-align:left !important;
}

.tp-sec-title{
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* =====================================================
   GLOBAL RESET (SAFE SPACING CONTROL)
===================================================== */

.wp-block-column {
    row-gap: 40px !important;
}

.wp-block-column > * {
    margin-block-start: 20px !important;
    margin-block-end: 20px !important;
}

/* tighten JetEngine listing spacing */
.wp-block-column .wp-block-jet-engine-dynamic-field {
    margin: 0 !important;
}



.q-answer.asap-answer.show {
    display: block !important;
} 

th, td {
    padding: var(--theme-table-padding, 0.7em 1em);
    padding-left: 40px !important;
    padding-top: 20px;
}

#test-preview .preview-marks {
    font-weight: 400;
    white-space: nowrap;
    color: #2f6f95; /* makes marks visible on white background */
}

.tp-sec-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    font-weight: bold !important;
		border-bottom: 1px solid #e6e6e6; /* thin divider line */
}

.saved-test-wrap .tp-group-wrap {
    margin-left: 25px;
    padding-top: 20px;
		font-weight: bold;
}


#test-preview .subq-list .subq-marks {
    margin-left: auto;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
    margin-right: -95px;
}

button[data-act="make-active"] {
    display: none !important;
}

/* WooCommerce category hero compact */
.tax-product_cat .hero-section {
    min-height: 180px !important;
    height: 180px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.tax-product_cat .hero-section .entry-header {
    padding: 20px 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.tax-product_cat .hero-section .page-title,
.tax-product_cat .hero-section .entry-title {
    margin-bottom: 10px !important;
}

.tax-product_cat .hero-section .taxonomy-description,
.tax-product_cat .hero-section .page-description {
    margin: 0 auto !important;
    max-width: 900px !important;
}

/* Fluent Forms success message */
.fluentform .ff-el-is-success,
.ff-message-success,
.fluentform .ff_form_success {
    color: #2F5D7C !important;   /* Your dark blue */
    background: #D8E9C8 !important; /* Your light green */
    border: 1px solid #B7D4A8 !important;
    padding: 15px;
    border-radius: 8px;
}

/* =====================================================
   TOP ACTION BUTTONS
===================================================== */
/* =========================================
   TOP TEST ACTION BUTTONS
========================================= */

#tp-top-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* All three buttons */
#tp-top-actions .tp-footer-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

#tp-top-actions .tp-footer-actions button{
  border:none;
  border-radius:10px;
  padding:11px 18px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.10);
}

/* Save Test */
#tp-top-actions button[data-act="save-test"]{
  background:#2f6478;
  color:#fff;
}

/* Generate Memo */
#tp-top-actions button[data-act="gen-memo"]{
  background:#a8d5b3;
  color:#244b38;
}

/* Print */
#tp-top-actions button[data-act="print-test"]{
  background:#fff;
  color:#2f6478;
  border:1px solid #b8cbd3;
}

/* Hover */
#tp-top-actions .tp-footer-actions button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.16);
}

/* Click */
#tp-top-actions .tp-footer-actions button:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

/* Mobile */
@media (max-width: 768px){
  #tp-top-actions{
    justify-content:flex-start;
    margin-top:16px;
  }

  #tp-top-actions .tp-footer-actions{
    width:100%;
  }

  #tp-top-actions .tp-footer-actions button{
    flex:1 1 auto;
    text-align:center;
  }
}

/* Hide memo answers on question catalogue cards only */
.question-card .asap-answer,
.question-card .q-answer{
  display:none !important;
}

/* =====================================================
   TEST BUILDER – TWO COLUMN MAIN LAYOUT
===================================================== */

.tb-main-layout{
  display:grid !important;
  grid-template-columns:minmax(280px, 30%) minmax(0, 70%) !important;
  gap:32px !important;
  align-items:start !important;
  width:100% !important;
  max-width:1500px !important;
  margin:0 auto !important;
}

/* =====================================================
   TEST BUILDER – WORKSPACE COLOUR / VISUAL SEPARATION
   ===================================================== */

/* Main builder workspace */
.tb-main-layout{
  background:transparent !important;
  border-radius:22px;
  padding:24px !important;
  box-sizing:border-box;
}

/* Question Bank – slightly stronger branded panel */
.tb-catalog-column{
  background:#c4d9d9 !important;
  border:1px solid #c5dcde !important;
  border-radius:18px;
  padding:18px !important;
  box-sizing:border-box;
}

/* Right Builder workspace */
.tb-builder-column{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 20px !important;
  box-sizing:border-box;
}

/* Builder controls – softer than stark white */
#asap-ui-header .card{
  background:#fbfcfb !important;
  border:1px solid #d6e1e3 !important;
  border-radius:14px !important;
  padding:10px 14px !important;
  box-shadow:0 3px 10px rgba(40,60,90,.04) !important;
}

/* Actual test remains white paper */
.tb-builder-column #test-preview{
  background:#fff !important;
  border:1px solid #d5dfe3 !important;
  border-radius:10px !important;
  box-shadow:
    0 2px 5px rgba(35,55,70,.06),
    0 12px 32px rgba(35,55,70,.10) !important;
  padding:30px !important;
}

/* Override Gutenberg column widths */
.tb-main-layout > .wp-block-column{
  flex-basis:auto !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
}

.tb-catalog-column{
  width:100% !important;
  min-width:0 !important;
}

.tb-builder-column{
  width:100% !important;
  min-width:0 !important;
}

/* Let question cards use the full catalogue width */
.tb-catalog-column .question-card,
.tb-catalog-column .jet-listing-grid,
.tb-catalog-column .jet-listing-grid__items,
.tb-catalog-column .jet-listing-grid__item{
  width:100% !important;
  max-width:none !important;
}

/* Keep the builder and preview centred inside their column */
.tb-builder-column #test-preview{
  width:100% !important;
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Tablet */
@media (max-width:1024px){
  .tb-main-layout{
    grid-template-columns:minmax(250px, 32%) minmax(0, 68%) !important;
    gap:22px !important;
  }
}

/* Mobile */
@media (max-width:780px){
  .tb-main-layout{
    display:block !important;
  }

  .tb-catalog-column,
  .tb-builder-column{
    width:100% !important;
    margin-bottom:28px !important;
  }
}

/* =====================================================
   TEST BUILDER – HEADER PANEL BUTTONS
===================================================== */

/* Save Header – primary action */
#hdr-save{
  background:#2f6478 !important;
  color:#fff !important;
  border:1px solid #2f6478 !important;
  border-radius:10px !important;
  padding:11px 18px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease !important;
}

#hdr-save:hover{
  background:#28586b !important;
  border-color:#28586b !important;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.15) !important;
}

#hdr-save:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(0,0,0,.12) !important;
}

/* Remove / Clear Header */
#hdr-clear{
  background:#ffffff !important;
  color:#6b7d8a !important;
  border:1px solid #d9e2ea !important;
  border-radius:10px !important;
  padding:11px 18px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.08) !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease !important;
}

#hdr-clear:hover{
  background:#f7f9fb !important;
  border-color:#c8d4dd !important;
  color:#2f6478 !important;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.14) !important;
}

#hdr-clear:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(0,0,0,.10) !important;
}

/* Add Section */
#sec-add{
  background:#7fbf9d!important;
  color:#183b2d !important;
  border:1px solid #6baa89 !important;
  border-radius:10px !important;
  padding:11px 18px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
  transition:all .2s ease !important;
}

#sec-add:hover{
    background:#6baa89 !important;
    border-color:#5f9d7b !important;
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,.15) !important;
}

/* Edit Section */
#sec-edit{
  background:#fff !important;
  color:#6b7d8a !important;
  border:1px solid #d9e2ea !important;
  border-radius:10px !important;
  padding:11px 18px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.08) !important;
  transition:all .2s ease !important;
}

#sec-edit:hover{
  background:#f7f9fb !important;
  border-color:#c8d4dd !important;
  color:#2f6478 !important;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.14) !important;
}

/* Add Question */
#q-add{
  background:#7fbf9d !important;
  color:#183b2d !important;
  border:1px solid #6baa89 !important;
  border-radius:10px !important;
  padding:11px 20px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
  transition:all .2s ease !important;
}

#q-add:hover{
    background:#6baa89 !important;
    border-color:#5f9d7b !important;
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,.15) !important;
}

/* =====================================================
   TEST BUILDER – LOGO UPLOAD
===================================================== */

#logoBox{
  width:120px !important;
  height:120px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#f8fafb !important;
  border:1px dashed #b8cbd3 !important;
  border-radius:14px !important;

  overflow:hidden !important;
  box-sizing:border-box !important;

  transition:
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease !important;
}

#logoBox:hover{
  background:#f3f7f9 !important;
  border-color:#7fa7b7 !important;
  box-shadow:0 4px 12px rgba(47,100,120,.10) !important;
}

/* Upload Logo button inside the box */
#logoPick{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:18px !important;

  background:transparent !important;
  color:#2f6478 !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:none !important;

  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  text-align:center !important;
  cursor:pointer !important;
}

#logoPick:hover{
  background:transparent !important;
  color:#244f60 !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Uploaded logo image */
#logoBox img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:10px !important;
  box-sizing:border-box !important;
}

/* =====================================================
   TEST BUILDER – FORM CONTROLS
===================================================== */

#asap-ui-header .input,
#asap-ui-header input[type="text"],
#asap-ui-header input[type="number"],
#asap-ui-header select{
    height:42px !important;
    padding:0 14px !important;

    border:1px solid #d9e2ea !important;
    border-radius:10px !important;

    background:#fff !important;
    color:#43586a !important;

    font-size:15px !important;
    font-family:inherit !important;
    font-weight:500 !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}

#asap-ui-header .input:focus,
#asap-ui-header input:focus,
#asap-ui-header select:focus{
    border-color:#2f6478 !important;
    box-shadow:0 0 0 3px rgba(47,100,120,.12) !important;
    outline:none !important;
}

/* Placeholders */
#asap-ui-header ::placeholder{
    color:#9aa8b5 !important;
    opacity:1;
}

/* Dropdown text */
#asap-ui-header select{
    cursor:pointer;
}

/* =====================================================
   TEST PREVIEW – BUILDER ACTION BUTTONS
===================================================== */

/* Secondary actions: Edit / Delete */
#test-preview button[data-act="edit-sec"],
#test-preview button[data-act="del-sec"],
#test-preview .delete-group{
  background:#ffffff !important;
  color:#6b7d8a !important;
  border:1px solid #d9e2ea !important;
  border-radius:10px !important;
  padding:9px 14px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.08) !important;
  transition:all .2s ease !important;
}

#test-preview button[data-act="edit-sec"]:hover,
#test-preview button[data-act="del-sec"]:hover,
#test-preview .delete-group:hover{
  background:#f7f9fb !important;
  color:#2f6478 !important;
  border-color:#c8d4dd !important;
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(0,0,0,.12) !important;
}


/* Add question type here */
#test-preview button[data-act="add-group-here"]{
  background:#7fbf9d !important;
  color:#183b2d !important;
  border:1px solid #6baa89 !important;
  border-radius:10px !important;
  padding:9px 14px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.08) !important;
  transition:all .2s ease !important;
}

#test-preview button[data-act="add-group-here"]:hover{
  background:#6baa89 !important;
  border-color:#5f9d7b !important;
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(0,0,0,.12) !important;
}


/* Add + active-group button */
#test-preview .tp-use-group{
  background:#7fbf9d !important;
  color:#183b2d !important;
  border:1px solid #6baa89 !important;
  border-radius:10px !important;
  padding:9px 14px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.08) !important;
  transition:all .2s ease !important;
}

#test-preview .tp-use-group:hover{
  background:#6baa89 !important;
  border-color:#5f9d7b !important;
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(0,0,0,.12) !important;
}


/* Remove individual question */
#test-preview .remove-from-test{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#ffffff !important;
  color:#8a98a5 !important;
  border:1px solid #d9e2ea !important;
  border-radius:999px !important;

  font-size:18px !important;
  font-weight:700 !important;
  line-height:1 !important;

  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
  transition:all .2s ease !important;
}

#test-preview .remove-from-test:hover{
  background:#fff4f4 !important;
  color:#b84f4f !important;
  border-color:#efcaca !important;
  transform:scale(1.05);
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
}

/* =====================================================
   TEST PREVIEW – MCQ STEM / OPTIONS SPACING
===================================================== */

/* Add space before option A only */
#test-preview .cb-wkpkcy22{
  margin-top:10px !important;
}

/* =====================================================
   TEST PREVIEW – REDUCE VERTICAL QUESTION GAPS ONLY
===================================================== */

#test-preview .preview-item > table{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#test-preview .preview-item > table > tbody > tr > td{
  padding-top:4px !important;
  padding-bottom:4px !important;
}

/* =====================================================
   TEST PREVIEW – CONSISTENT DIAGRAM SIZING
===================================================== */

#test-preview .preview-item img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:520px !important;
  max-height:420px !important;
  margin:12px auto 8px !important;
  object-fit:contain !important;
}

#test-preview .tp-grand-total {
  margin-top: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2f3b45;
}

#test-preview .tp-grand-total-content {
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  gap: 14px;
  font-weight: 700;
  white-space: nowrap;
}

#test-preview .tp-grand-total-label {
  font-weight: 700;
}

#test-preview .tp-section-total {
  margin-top: 10px;
}

#test-preview .tp-section-total-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-weight: 700;
}

#test-preview .tp-section-total-label {
  font-weight: 700;
}

/* ===== STABILISE BUILDER PREVIEW AFTER RELOAD ===== */

#test-preview {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

#test-preview .preview-item table {
  width: 100% !important;
  table-layout: fixed;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

#test-preview .preview-item td,
#test-preview .preview-q,
#test-preview .preview-q p,
#test-preview .preview-q div,
#test-preview .preview-q span,
#test-preview .preview-q li {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

#test-preview .preview-q p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#test-preview .preview-marks,
#test-preview .tp-num,
#test-preview .tp-group-title,
#test-preview .tp-sec-title,
#test-preview .tp-section-total,
#test-preview .tp-grand-total {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* ===== CLEAN QUESTION CONTENT IN BUILDER PREVIEW ===== */

#test-preview .tp-clean-stem,
#test-preview .tp-clean-field {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-indent: 0 !important;
}

#test-preview .tp-clean-stem {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ---------- MCQ OPTIONS ---------- */

#test-preview .tp-clean-option {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 4px !important;
  align-items: start !important;

  margin: 0 0 2px 0 !important;
  padding: 0 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

#test-preview .tp-clean-stem + .tp-clean-option {
  margin-top: 8px !important;
}

#test-preview .tp-option-letter {
  display: block !important;
  white-space: nowrap !important;
  font-weight: inherit !important;
}

#test-preview .tp-option-text {
  display: block !important;
  min-width: 0 !important;
}

#test-preview .tp-clean-stem p,
#test-preview .tp-clean-field p,
#test-preview .tp-clean-option p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

/* ===========================
   QUESTION DATABASE SCROLLING
   =========================== */

/* Left catalogue column grows naturally */
.tb-catalog-column{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:8px;
  box-sizing:border-box;
}

/* Builder preview grows naturally */ 
.tb-builder-column{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Scrollbar styling — question list only */
.tb-catalog-column .jet-listing-grid__items::-webkit-scrollbar{
  width:8px;
}

.tb-catalog-column .jet-listing-grid__items::-webkit-scrollbar-thumb{
  background:#b8c0c8;
  border-radius:20px;
}

.tb-catalog-column .jet-listing-grid__items::-webkit-scrollbar-track{
  background:transparent;
}
/* ===== Question text uses full card width ===== */

.tb-catalog-column .question-card .cb-aa1iukak {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.tb-catalog-column .question-card .cb-aa1iukak .jet-listing,
.tb-catalog-column .question-card .cb-aa1iukak .jet-listing-dynamic-field__inline-wrap,
.tb-catalog-column .question-card .cb-aa1iukak .jet-listing-dynamic-field__content,
.tb-catalog-column .question-card .cb-aa1iukak .display-inline,
.tb-catalog-column .question-card .cb-aa1iukak .display-multiline {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ===== MCQ option alignment inside question cards ===== */

.tb-catalog-column .qcard-option-row {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  column-gap: 4px !important;
  align-items: start !important;

  width: 100% !important;
  margin: 2px 0 !important;
  padding: 0 !important;

  font: inherit !important;
  line-height: inherit !important;
}

.tb-catalog-column .qcard-option-letter {
  display: block !important;
  white-space: nowrap !important;
}

.tb-catalog-column .qcard-option-text {
  display: block !important;
  min-width: 0 !important;
}

/* ===========================
   Mobile Tweaks
   =========================== */

@media (max-width: 768px) {

  /* ---------- Homepage: Our Mission ---------- */

  .home-mission {
    padding: 40px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .home-mission p {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .home-mission .wp-block-buttons {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  .home-mission .wp-block-button {
    width: auto !important;
  }


  /* ---------- Homepage: Platform Section ---------- */

  .home-platform .wp-block-buttons {
    width: 100% !important;
    justify-content: center !important;
  }

  .home-platform .wp-block-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-platform .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 14px 28px;
    white-space: nowrap;
  }


  /* ---------- Shop Hero ---------- */

  .shop-hero {
    padding: 40px 20px !important;
    box-sizing: border-box;
  }

  .shop-hero p,
  .shop-hero h1,
  .shop-hero h2 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .shop-hero .wp-block-search {
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto !important;
  }


  /* ---------- Coming Soon Feature Section ---------- */

  .coming-soon-feature {
    padding: 30px 20px !important;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0 !important;
  }

  .coming-soon-feature .wp-block-columns {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .coming-soon-feature .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }

  .coming-soon-feature .wp-block-column > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .coming-soon-feature p,
  .coming-soon-feature h1,
  .coming-soon-feature h2,
  .coming-soon-feature h3 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .coming-soon-feature p {
    width: 100% !important;
    text-align: left;
  }

  .coming-soon-text-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  .coming-soon-text-column .coming-soon-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    text-align: left;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  /* ---------- Plugin Pages: WooCommerce and SWPM ---------- */

  body.woocommerce-page .site-main,
  body.woocommerce-cart .site-main,
  body.woocommerce-checkout .site-main,
  body.woocommerce-account .site-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
  }

  .swpm-login-widget-form,
  .swpm-registration-widget-form,
  .swpm-profile-form {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    box-sizing: border-box;
  }

  .woocommerce input,
  .woocommerce select,
  .woocommerce textarea,
  .swpm-login-widget-form input,
  .swpm-registration-widget-form input,
  .swpm-profile-form input {
    max-width: 100% !important;
    box-sizing: border-box;
  }


  /* ---------- Mobile Header Cart ---------- */

  #header [data-device="mobile"] [data-id="cart"] {
    position: relative !important;
    top: 6px !important;
    overflow: visible !important;
  }

  #header [data-device="mobile"] [data-id="cart"] *,
  #header [data-device="mobile"] [data-row] {
    overflow: visible !important;
  }

  #header [data-device="mobile"] [data-id="cart"] .ct-dynamic-count-cart {
    top: -5px !important;
    right: -7px !important;
    transform: none !important;
  }

}

.question-card .subq-answer-source {
    display: none !important;
}

/* Fixed subquestion group */
.question-card .subq-source-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  column-gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}

/* Subquestion text */
.question-card .subq-text-source {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Subquestion mark circle */
.question-card .subq-mark-source {
  grid-column: 2 !important;
  align-self: start !important; 

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  background: #f2f4f6 !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
}
/* Hide empty mark fields */
.question-card .subq-mark-source:not(:has(.jet-listing-dynamic-field__content:not(:empty))) {
  display: none !important;
}

/* Hide memo answers on the question card */
.question-card .subq-answer-source {
  display: none !important;
}

/* Let the Test Builder preview grow naturally */
.tb-builder-column {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* Keep all preview totals and mark values the same dark colour */
#test-preview .preview-marks,
#test-preview .tp-section-total-label,
#test-preview .tp-section-total-content,
#test-preview .tp-grand-total-label,
#test-preview .tp-grand-total-content {
  color: #28536B !important;
}

/* =========================================
   HIERARCHICAL FILTER
   6-COLUMN LAYOUT + ICONS
   ========================================= */

/* Six filters in one horizontal row */
.jet-smart-filters-hierarchy .jet-filters-group{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:end !important;
  width:100% !important;
}

/* Individual filter */
.jet-smart-filters-hierarchy .jet-select{
  position:relative;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding-top:46px;
}

/* Dropdown */
.jet-smart-filters-hierarchy .jet-select__control{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Filter label */
.jet-smart-filters-hierarchy .jet-filter-label{
  display:block !important;
  margin-bottom:5px !important;
}

/* =========================================
   FILTER ICONS
   ========================================= */

/* Shared icon styling */
.jet-smart-filters-hierarchy .jet-select::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:36px;
  height:36px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* Language */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="language"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/07/ASAP-images-33.png");
}

/* Grade */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="grade"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/07/ASAP-images-31.png");
}

/* Subject */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="subject"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/07/ASAP-images-32.png");
}

/* Topic */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="topic"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/07/ASAP-images-35.png");
}

/* Subtopic */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="subtopic"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/08/ASAP-images-41.png");
}

/* Question type */
.jet-smart-filters-hierarchy
.jet-select:has(select[name="question-type"])::before{
  background-image:url("https://asapstudyhub.com/wp-content/uploads/2026/07/ASAP-images-34.png");
}

/* =========================================
   RESPONSIVE LAYOUT
   ========================================= */

/* Tablet: 3 filters per row */
@media (max-width:1024px){
  .jet-smart-filters-hierarchy .jet-filters-group{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile: stack filters */
@media (max-width:768px){
  .jet-smart-filters-hierarchy .jet-filters-group{
    grid-template-columns:1fr !important;
  }
}

/* Space between question instruction and passage text */
#test-preview .tp-clean-field:has(> p) + .tp-clean-field{
  margin-top:16px !important;
}

/* Preserve paragraph/line breaks in passage text */
#test-preview .tp-clean-field{
  white-space: pre-line;
}

/* Proper paragraph spacing inside comprehension passages */
#test-preview .tp-passage-item .tp-clean-stem p,
#test-preview .tp-passage-item .tp-clean-field p{
  margin-top:0 !important;
  margin-bottom:14px !important;
  padding:0 !important;
}

/* No unnecessary gap after the final paragraph */
#test-preview .tp-passage-item .tp-clean-stem p:last-child,
#test-preview .tp-passage-item .tp-clean-field p:last-child{
  margin-bottom:0 !important;
}

#test-preview .tp-passage-row .tp-clean-field,
#test-preview .tp-passage-row .tp-clean-stem{
  margin-left:-85px !important;
  width:calc(100% + 140px) !important;
  max-width:none !important;
}

/* Align comprehension subquestions with passage */
#test-preview .tp-passage-item .tp-subquestion-row > td:nth-child(2){
  position:relative;
  left:-85px;
  width:calc(100% + 85px);
}

/* =========================================
   PASSAGE-BASED QUESTIONS ONLY
   Use more of the available page width
   ========================================= */

/* Let the passage use more horizontal space */
#test-preview .tp-passage-item .tp-passage-row .tp-clean-field{
  margin-left:-85px !important;
  width:calc(100% + 140px) !important;
  max-width:none !important;
}

/* Pull comprehension question rows left */
#test-preview .tp-passage-item .tp-subquestion-row > td:nth-child(2){
  position:relative;
  left:-85px;
  width:calc(100% + 145px) !important;
}

/* Give the actual question text more room */
#test-preview .tp-passage-item .tp-subquestion-row > td:nth-child(2) > div{
  grid-template-columns:55px minmax(0,1fr) !important;
  width:calc(100% + 85px) !important;
  max-width:none !important;
}

/* Align normal question numbers with comprehension numbering */
#test-preview .preview-item:not(.tp-passage-item) > table > tbody > tr:first-child > td:first-child strong {
  display: block;
  transform: translateX(-18px);
}

#header-builder-card.header-is-hidden{
  display:none !important;
} 

/* Keep the Question Database visible while scrolling through the test */
.tb-catalog-column{
  position:sticky;
  top:20px;
  align-self:flex-start;
}

/* Let the question cards flow inside the scrolling column */
.tb-catalog-column .jet-listing-grid__items{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:8px;
  box-sizing:border-box;
}

/* Saved Test: match group heading alignment with builder preview */
.saved-test-wrap .tp-group-wrap{
  margin-left:0 !important;
  padding-top:20px;
  font-weight:bold;
}

#test-preview .btn.preview-green{
  background-color:#8bcaa8 !important;
  background:#8bcaa8 !important;
  border-color:#7fbd9d !important;
  color:#17324d !important;
}

#old-section-controls,
#old-question-controls {
  display: none !important;
}

#test-preview .preview-inside-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid #e6e6e6;
}

#test-preview .preview-inside-title{
  font-weight:700;
}

#preview-toolbar{
  display:none !important;
}

#test-preview .preview-inside-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.toggle-header-builder{
  display:none !important;
}

/* Remove leftover Gutenberg gap above Test Preview */
.tb-builder-column > #asap-ui-header{
  margin-top:0 !important;
}

.tb-builder-column.is-layout-flow > #asap-ui-header{
  margin-block-start:0 !important;
}

#test-preview{
  margin-top:-14px !important;
}

/* Preview toolbar buttons */

/* Header button – solid ASAP blue */
#test-preview #preview-header-button{
  background:#285d78 !important;
  border:2px solid #285d78 !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:9px 16px !important;
}

/* Clear all – white outlined */
#test-preview #preview-clear-all{
  background:#fff !important;
  border:2px solid #285d78 !important;
  color:#285d78 !important;
  border-radius:12px !important;
  padding:9px 16px !important;
}

/* Hover */
#test-preview #preview-header-button:hover{
  opacity:.9;
}

#test-preview #preview-clear-all:hover{
  background:#f4f8fa !important;
}

#test-preview .tp-builder-bottom-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:14px 0 10px;
}

#test-preview .tp-builder-bottom-actions button{
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600;
  line-height:1.2 !important;
  min-height:0 !important;
  cursor:pointer;
}

#test-preview #preview-bottom-add-question{
  background:#8bcaa8 !important;
  border:1px solid #7fbd9d !important;
  color:#17324d !important;
}

#test-preview #preview-bottom-add-section{
  background:#fff !important;
  border:1px solid #d7dde2 !important;
  color:#40566b !important;
}

/* Compact Add Question form buttons */
#test-preview .preview-group-form button{
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:0 !important;
}

/* Compact Add Section form buttons */
#test-preview .tp-builder-bottom-form button{
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:0 !important;
}

/* Match initial Add Section form to section action buttons */
#test-preview #preview-section-form .input,
#test-preview #preview-section-form button{
  font-size:13px !important;
  line-height:1.2 !important;
  min-height:0 !important;
  height:auto !important;
  padding:6px 12px !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
}

/* Keep the section-letter field compact */
#test-preview #preview-section-form .input{
  width:140px !important;
}

/* =========================================
   FINAL BUILDER BUTTON SIZING
   ========================================= */

/* Make top toolbar buttons the same compact size
   as Wysig / Verwyder / Voeg vraag by */
#test-preview #preview-header-button,
#test-preview #preview-clear-all{
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:0 !important;
  height:auto !important;
}

/* Keep Edit Header navy */
#test-preview #preview-header-button{
  background:#285d78 !important;
  border:1px solid #285d78 !important;
  color:#fff !important;
}

/* Keep Clear All white with navy outline */
#test-preview #preview-clear-all{
  background:#fff !important;
  border:1px solid #285d78 !important;
  color:#285d78 !important;
}


/* =========================================
   CANCEL BUTTONS – REMOVE ORANGE
   ========================================= */

/* Initial Add Section cancel */
#test-preview #preview-sec-cancel,

/* Bottom Add Section cancel */
#test-preview #preview-bottom-sec-cancel,

/* Add Question cancel */
#test-preview .preview-group-cancel{
  background:#fff !important;
  border:1px solid #d7dde2 !important;
  color:#40566b !important;
  box-shadow:0 2px 5px rgba(0,0,0,.08) !important;

  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:0 !important;
  height:auto !important;
}

/* Mark allocations such as ½ × 4 = 2 */
#test-preview .tp-main-marks{
  width:60px !important;
  text-align:right !important;
  vertical-align:top !important;
  white-space:nowrap !important;
  overflow:visible !important;
  position:relative !important;
  font-weight:400 !important;
  padding-top:0 !important;
}

#test-preview .tp-mark-breakdown{
  position:absolute !important;
  top:0 !important;
  right:0 !important;

  width:max-content !important;
  min-width:max-content !important;

  text-align:right !important;
  white-space:nowrap !important;

  font-size:inherit !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}

#test-preview .tp-final-mark{
  display:block !important;
  width:100% !important;

  padding-top:0 !important;

  text-align:right !important;
  white-space:nowrap !important;

  font-size:inherit !important;
  font-weight:400 !important;
}

/* LIVE BUILDER — default diagram size */
#test-preview .q-diagram img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:400px !important;
  max-height:360px !important;
  object-fit:contain !important;
  margin:8px auto 0 !important;
}

#test-preview .preview-search-bank{
  background:#f3f8fa !important;
  border:1px solid #8faebb !important;
  color:#285d78 !important;
  box-shadow:0 2px 5px rgba(0,0,0,.06) !important;
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:0 !important;
  height:auto !important;
}

/* Kill the orange hover */
#test-preview .preview-search-bank:hover,
#test-preview .preview-search-bank:focus{
  background:#e7f1f4 !important;
  border-color:#285d78 !important;
  color:#285d78 !important;
}

/* =========================================
   QUESTION BANK SEARCH PANEL
   ========================================= */

#test-preview .preview-bank-search-panel{
  max-width:620px !important;
  margin:10px auto 14px !important;
  padding:10px 12px !important;
  background:#f7fafb !important;
  border:1px solid #dbe5e9 !important;
  border-radius:12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}

#test-preview .preview-bank-search-inner{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

#test-preview .preview-bank-search-input{
  flex:1 !important;
  width:auto !important;
  min-width:0 !important;
  height:36px !important;
  padding:6px 12px !important;
  margin:0 !important;
  border:1px solid #cbd9df !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#285d78 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  box-shadow:none !important;
}

#test-preview .preview-bank-search-input:focus{
  border-color:#8faebb !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(40,93,120,.08) !important;
}

/* Close button */
#test-preview .preview-bank-search-close{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;
  border:1px solid #d7dde2 !important;
  border-radius:9px !important;
  color:#607786 !important;

  font-size:18px !important;
  font-weight:500 !important;
  line-height:1 !important;

  box-shadow:none !important;
}

#test-preview .preview-bank-search-close:hover{
  background:#eef4f6 !important;
  border-color:#8faebb !important;
  color:#285d78 !important;
}

/* Space reserved for results once search is connected */
#test-preview .preview-bank-search-results:empty{
  display:none !important;
}

/* All tables displayed inside question-bank cards */
.jet-listing-grid__item .asap-question-table {
  margin: 5px 0 !important;
  table-layout: fixed !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
}

.jet-listing-grid__item .asap-question-table th,
.jet-listing-grid__item .asap-question-table td {
  padding: 4px 2px !important;
  height: auto !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  vertical-align: middle !important;
}

.jet-listing-grid__item .asap-question-table th {
  font-size: 7px !important;
}

/* =====================================================
   QUESTION BANK – HIDE EMPTY SUBQUESTION GROUPS
   ===================================================== */

.jet-listing-grid__item .subq-source-group:not(
  :has(.jet-listing-dynamic-field__content)
) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   QUESTION BANK SEARCH
   Match Test Builder search styling
   ========================================= */

/* Search filter outer container */
.jet-search-filter{
  max-width:260px !important;
  margin:14px auto 16px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* Actual JetSmartFilters search input */
.jet-search-filter .jet-search-filter__input{
  width:100% !important;
  height:36px !important;
  min-height:36px !important;
  padding:6px 12px !important;
  margin:0 !important;

  background:#fff !important;
  border:1px solid #cbd9df !important;
  border-radius:9px !important;

  color:#285d78 !important;
  font-size:13px !important;
  line-height:1.2 !important;

  box-shadow:none !important;
  outline:none !important;
}

/* Focus state */
.jet-search-filter .jet-search-filter__input:focus{
  border-color:#8faebb !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(40,93,120,.08) !important;
}

/* Placeholder */
.jet-search-filter .jet-search-filter__input::placeholder{
  color:#8a9ba5 !important;
  opacity:1 !important;
} 

/* Question Bank: scroll cards, Load More and Search together */
.tb-catalog-column{
  height:calc(100vh - 140px) !important;
  max-height:calc(100vh - 140px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
  box-sizing:border-box;
  padding-bottom:20px;
}

/* Let the JetEngine wrapper grow naturally */
.tb-catalog-column .jet-listing-grid {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================
   DIAGRAM SIZE CONTROL
   ========================================= */

/* Small */
#test-preview .q-diagram.q-diagram-small img,
#test-preview .q-diagram.q-diagram-small svg{
  width:200px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Medium - default */
#test-preview .q-diagram.q-diagram-medium img,
#test-preview .q-diagram.q-diagram-medium svg{
  width:320px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Large */
#test-preview .q-diagram.q-diagram-large img,
#test-preview .q-diagram.q-diagram-large svg{
  width:500px !important;
  max-width:100% !important;
  height:auto !important;
}

/* =========================================
   DIAGRAM SIZE BUTTONS
   ========================================= */

#test-preview .diagram-size-controls{
  display:flex;
  justify-content:center; 
  gap:5px;
  margin:4px 0 2px;
}

#test-preview .diagram-size-btn{
  width:28px;
  height:26px;
  padding:0 !important;
  min-height:0 !important;

  background:#fff !important;
  border:1px solid #cbd9df !important;
  border-radius:7px !important;

  color:#285d78 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;

  cursor:pointer;
}

#test-preview .diagram-size-btn:hover{
  background:#eef4f6 !important;
  border-color:#8faebb !important;
}

#tp-top-actions .tp-library-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #28536b;
  border: 1px solid #cbd8e2;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

#tp-top-actions .tp-library-link:hover {
  background: #eef6fb;
  color: #28536b;
}

/* Keep all four Test Builder action buttons in one row */
#tp-top-actions {
  width: 100%;
  max-width: none !important;
}

/* =========================================
   TEST BUILDER TOP ACTION BUTTONS
   ========================================= */

/* Keep all four buttons on one row */
#tp-top-actions {
  width: 100%;
  max-width: none !important;
}

#tp-top-actions .tp-footer-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 12px;
  width: max-content;
  max-width: none !important;
}

#tp-top-actions .tp-footer-actions > button,
#tp-top-actions .tp-footer-actions > .tp-library-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Match My Test Library to the other buttons */
#tp-top-actions .tp-library-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 8px 16px !important;
  min-height: 0 !important;
  height: auto !important;

  border-radius: 10px !important;
  background: #ffffff !important;
  color: #28536b !important;
  border: 1px solid #cbd8e2 !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

#tp-top-actions .tp-library-link:hover {
  background: #eef6fb !important;
  color: #28536b !important;
}

/* =========================================
   ASAP – MY TEST LIBRARY
   ========================================= */

/* Responsive card grid */
.asap-my-saved-tests .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

/* Compact saved-test cards */
.asap-my-saved-tests .asap-saved-test-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(20, 35, 60, 0.06);
    box-sizing: border-box;
}

/* Test title */
.asap-my-saved-tests .asap-saved-test-card .wp-block-post-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Date */
.asap-my-saved-tests .asap-saved-test-card .wp-block-post-date {
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 13px;
    color: #758195;
}

/* Remove extra spacing from the date's time element */
.asap-my-saved-tests .asap-saved-test-card .wp-block-post-date time {
    margin: 0 !important;
    padding: 0 !important;
}

/* Edit action */
.asap-my-saved-tests .asap-saved-test-card .wp-block-buttons {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    justify-content: flex-start !important;
}

/* Style either a Gutenberg button or a plain Edit link */
.asap-my-saved-tests .asap-saved-test-card .wp-block-button__link,
.asap-my-saved-tests .asap-saved-test-card .wp-block-buttons a {
    display: inline-block;
    padding: 9px 18px !important;
    background: #263e66 !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-style: normal !important;
    text-decoration: none !important;
    box-shadow: none;
}

/* Hover */
.asap-my-saved-tests .asap-saved-test-card .wp-block-buttons a:hover {
    background: #365789 !important;
    color: #ffffff !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .asap-my-saved-tests .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .asap-my-saved-tests .wp-block-post-template {
        grid-template-columns: 1fr;
    }

    .asap-my-saved-tests .asap-saved-test-card {
        padding: 20px;
    }
}