body { font-family: Arial, sans-serif; }

/* Question card */
.question-container{
  padding: 10px;
  border-bottom: 1px solid rgb(180 191 255);
  border-radius: 20px;
  margin-bottom: 20px;
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}
.question{ font-size:17px; line-height:25px; color:#000; }

/* Options */
.option{
  margin: 0 0 2px 22px;
  position: relative;
  padding: 3px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 22px;
}
.correct{ color:#000; font-weight:400; }
.incorrect{ color:#bababa; }
.option-text{ cursor:pointer; }

/* Tick mark */
.tick-mark{
  display:none;
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><radialGradient id='g' cx='30%25' cy='30%25' r='75%25'><stop offset='0' stop-color='%2328D928'/><stop offset='.55' stop-color='%230FA80F'/><stop offset='1' stop-color='%23076E07'/></radialGradient><filter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'><feDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.25'/></filter></defs><circle cx='32' cy='32' r='29' fill='url(%23g)'/><circle cx='32' cy='32' r='29' fill='none' stroke='%23065306' stroke-opacity='.25' stroke-width='2'/><circle cx='32' cy='32' r='31' fill='none' stroke='%23fff' stroke-width='2.5'/><path d='M18 34l9 9 19-20' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/><path d='M18 34l9 9 19-20' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' filter='url(%23s)'/></svg>"); 
}
.tick-mark::before{ content:none !important; }
.tick-mark-incorrect,
.tick-mark-incorrect::before{ display:none !important; content:none !important; }

  /*Red Cross SVG for Incorrect Answer
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><radialGradient id='g' cx='30%25' cy='30%25' r='75%25'><stop offset='0' stop-color='%23E04545'/><stop offset='.55' stop-color='%23B51616'/><stop offset='1' stop-color='%237A0B0B'/></radialGradient><filter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'><feDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.25'/></filter></defs><circle cx='32' cy='32' r='29' fill='url(%23g)'/><circle cx='32' cy='32' r='29' fill='none' stroke='%235A0707' stroke-opacity='.25' stroke-width='2'/><circle cx='32' cy='32' r='31' fill='none' stroke='%23fff' stroke-width='2.5'/><path d='M22 22L42 42' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='8' stroke-linecap='round'/><path d='M42 22L22 42' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='8' stroke-linecap='round'/><path d='M22 22L42 42' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' filter='url(%23s)'/><path d='M42 22L22 42' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' filter='url(%23s)'/></svg>");*/

/* Explanation*/
.explanation{
  background:#f5f5f5;
  color:#000;
  padding:10px;
  border-radius:10px;
  font-size:14px;
  line-height:22px;
}
.explanation p{ margin:8px 0; }
.correct-answer-title,
.explanation-title{ color:green; }
.mcq-theme-ocean{ --mcq-a:#717171; --mcq-b:#0038ff3d; --mcq-acc:#0b2a7a; --mcq-ink:#fff; }

/* Buttons row */
.buttons-container{ display:flex; align-items:center; }
.view-answer-button,
.workspace-button,
.report-button,
.discuss-button,
.heart-ic{
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
}
.mcq-btn{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:6px;
  margin-top:10px; margin-right:20px;
  font-size:0;
  background: transparent !important;
  border-bottom: 1px solid #c7d1f8 !important;
}
.mcq-btn:hover{ background: #fff !important; }
.mcq-btn svg{ display:block; }
.mcq-ic{ width:16px; height:16px; display:block; }
.mcq-btn.active{ outline:2px solid rgba(155,205,255,.65); background: #fff !important; }
#mcq-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Pagination */
.pagination{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:20px 0;
}
.pagination button{
  margin: 5px;
  padding: 5px 10px;
  background:#fff;
  color:#000;
  border-radius:5px;
  cursor:pointer;
  border:1px solid #a1c8ff;
}
.pagination button.active{ background:#005b9c; color:#fff; }
.pagination button:hover{ text-decoration:underline; }
.pagination span{ margin:0 5px; }

/* Next Part CTA (shown only on the last page of the current part) */
.gkaim-next-part-wrap{
  display:flex;
  justify-content:flex-end;
  margin: 10px 0 10px;
}
.gkaim-next-part-btn{
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #a1c8ff;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #1a75ac;
}
.gkaim-next-part-btn:hover{ text-decoration:underline; }
.workspace-textarea{ background-color: #f5f5f5; color: #515151; padding: 5px; border-radius: 10px; margin-top: 6px; font-size: 14px; }

/* Search*/
#pageSearchInput{
  margin:0 10px;
  padding:5px;
  border-radius:4px;
  width:140px;
}
#searchButton{
  padding:6px 10px;
  text-align:center;
  display:inline-block;
  font-size:16px;
  margin:0;
  cursor:pointer;
}

@media (max-width:600px){
  #pageSearchInput{ width:60px; }
}
/*Heart*/
.mcq-btn.heart-right .heart-ic { fill: transparent !important; }
.mcq-btn.heart-right .heart-ic .heart-shape{
  fill: #fff;
  stroke: #888888;
  stroke-width: 2px;
  shape-rendering: auto;
  transition: fill 1.0s ease, stroke 1.0s ease;
}

.mcq-btn.heart-right.active .heart-ic .heart-shape{
  fill: #ff7070;
  stroke: #ff7070;
}
:root{
  --heart-ic-size: 26px;
  --heart-btn-size: 36px;
}
@media (max-width: 600px){
  :root{
    --heart-ic-size: 24px;
    --heart-btn-size: 34px;
  }
}
.mcq-btn.heart-right .heart-ic{
  width: var(--heart-ic-size) !important;
  height: var(--heart-ic-size) !important;
}
.mcq-btn.heart-right{
  width: var(--heart-btn-size) !important;
  height: var(--heart-btn-size) !important;
  margin-left: auto; margin-right: 12px;
  border-bottom: none !important;
}
.mcq-btn.heart-right.active,
.mcq-btn.heart-right.active:hover,
.mcq-btn.heart-right:hover,
.mcq-btn.heart-right:focus{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Star Sparkle */
.mcq-btn.heart-right { position: relative; overflow: visible; }

.heart-sparkles{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:2;
}
.heart-sparkles span{
  position:absolute; line-height:1;
  font-size:12px;
  color:#ff8c00;
  opacity:0; transform:translate(-50%,-50%) scale(0.2);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.2));
  animation:heart-sparkle 800ms ease-out forwards;
}

@keyframes heart-sparkle{
  0%   {opacity:0; transform:translate(-50%,-50%) scale(0.2);}
  40%  {opacity:1;}
  100% {opacity:0;
        transform:translate(calc(-50% + var(--dx)),
                            calc(-50% + var(--dy))) scale(1);}
}

@media (prefers-reduced-motion: reduce){
  .heart-sparkles span{ animation:none; opacity:0; }
}

/*Toggles row: Timer | Random | Favourite*/
.switch{ position:relative; display:inline-block; width:50px; height:16px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#C7C7C7; transition:.3s;
  border-radius:10px;
}
.slider:before{
  position:absolute; content:"";
  height:9px; width:9px; left:4px; bottom:4px;
  background:#fff; transition:.3s; border-radius:50%;
}
input:checked + .slider{ background:#005b9c; }
input:checked + .slider:before{ transform:translateX(26px); }

.quiz-page img{ max-width:100%; height:auto; }


.button-container{
  --sw-w: 40px; --sw-h: 13px; --pad: 3px; --knob: 7px; 

  display:flex; align-items:center; flex-wrap:nowrap;
  justify-content:space-between;
  gap:10px 14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin-bottom:20px;
}
.button-container .button-group{
  flex:0 0 auto; display:flex; align-items:center; margin:0 !important;
}
.button-container .button-group span,
.button-container .fav-toggle-label{ white-space:nowrap; }
.button-container .mastery-label{ margin-left:8px; font-size:12px; opacity:.85; }
.button-container .wrong-toggle-label{ white-space:nowrap; }
.button-container .switch{ width:var(--sw-w); height:var(--sw-h); margin:2px; }
.button-container .slider:before{
  width:var(--knob); height:var(--knob);
  left:var(--pad); bottom:var(--pad);
}
.button-container input:checked + .slider:before{
  transform:translateX(calc(var(--sw-w) - (2*var(--pad)) - var(--knob)));
}
@media (min-width: 481px){
  .button-container{
    --sw-w: 52px; --sw-h: 17px; --pad: 4px; --knob: 9px;

    display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
    align-items:center; gap:0 16px; overflow:visible;
  }
  .button-container .button-group{ justify-content:center; min-width:0; }
  .button-container .button-group:nth-child(1){ justify-self:start;  }
  .button-container .button-group:nth-child(2){ justify-self:center; }
  .button-container .button-group:nth-child(3){ justify-self:center; }
  .button-container .button-group:nth-child(4){ justify-self:end;    }
}
@media (max-width: 480px){
  .button-container .button-group span,
  .button-container .fav-toggle-label{
    font-size: 12px;
  }
}
/* === GKaim MCQ Engine (server-side additions) === */

.gkaim-mcq-root .gkaim-ph{ opacity: .85; }

/* Full locked pages: placeholders only + a single overlay CTA */
.gkaim-mcq-root .quiz-page.gkaim-locked-page{ position:relative; }
.gkaim-mcq-root .quiz-page.gkaim-locked-page .question-container{
  filter: blur(2px);
  user-select:none;
  pointer-events:none;
}
.gkaim-mcq-root .quiz-page.gkaim-locked-page .gkaim-page-lock{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index: 5;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(1px);
}
.gkaim-mcq-root .gkaim-page-lock .gkaim-lock-box{
  max-width: 520px;
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px;
  border: 2px solid rgb(255, 0, 0);
  background: rgb(49 68 112 / 95%);
  text-align:center;
  color: #fff;
  font-size: 25px;
}
.gkaim-mcq-root .gkaim-page-lock .gkaim-lock-title{ margin:0 0 6px; font-weight:700; }
.gkaim-mcq-root .gkaim-page-lock .gkaim-lock-sub{ margin:0 0 12px; font-size:16px; }
.gkaim-mcq-root .gkaim-page-lock .gkaim-lock-btn{
  font-weight: 600;
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  background:#fff;
  text-decoration:none;
  font-size: 20px;
}

/* Partial locked rows (rare): only blur locked containers */
.gkaim-mcq-root .question-container.gkaim-locked{ position:relative; }
.gkaim-mcq-root .question-container.gkaim-locked .gkaim-lock-blur{
  filter: blur(2px);
  user-select:none;
  pointer-events:none;
}
.gkaim-mcq-root .question-container.gkaim-locked .buttons-container{
  filter: blur(2px);
  user-select:none;
  pointer-events:none;
}
.gkaim-mcq-root .question-container.gkaim-locked .gkaim-lock-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-radius: 16px;
  z-index: 4;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(1px);
}

/* A small info bar that can be shown under pagination (optional) */
.gkaim-mcq-root .gkaim-mcq-lock{
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
}