/* ---------------------------------------------------------------------------
   Nahool Back-to-School Challenge -- additions on top of the design's own CSS.
   Loaded AFTER arabic.css and the inlined helmet styles, so it can override.
   Nothing here restyles the design; it only supports the parts that became
   dynamic (modals, quiz engine, upload box, score card).
--------------------------------------------------------------------------- */

/* The modal shells carry `display:flex` as an inline style, which beats the
   UA rule for [hidden]. Without this they would never hide. */
[hidden]{display:none!important;}

/* Keep the page from scrolling behind an open modal. */
body.nh-locked{overflow:hidden;}

/* --------------------------------------------------------------------------
   Forms
-------------------------------------------------------------------------- */
.fld:focus{border-color:#2B6FEA!important;box-shadow:0 0 0 3px rgba(43,111,234,.15);}
.fld.nh-bad{border-color:#C6382F!important;background:#FFF7F6!important;}

/* Email and phone are latin-script even in Arabic; arabic.css otherwise
   forces every .fld to direction:rtl, which mangles "+966 5..." and addresses. */
[dir="rtl"] .fld[dir="ltr"]{direction:ltr!important;text-align:left!important;}

/* Chrome renders number spinners inside the narrow Age field. */
.fld[type="number"]{-moz-appearance:textfield;}
.fld[type="number"]::-webkit-outer-spin-button,
.fld[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

button[disabled],
form.nh-busy button[type="submit"]{opacity:.6;cursor:not-allowed;}

/* --------------------------------------------------------------------------
   Week cards
-------------------------------------------------------------------------- */
.card[data-state="locked_prev"],
.card[data-state="locked_date"],
.card[data-state="closed"]{opacity:.72;}
.card[data-state="active"],
.card[data-state="in_progress"]{transition:transform .18s ease;}
.card[data-state="active"]:hover,
.card[data-state="in_progress"]:hover{transform:translateY(-4px);}

/* The decorative connector arrows point left-to-right; mirror them in Arabic
   so they still lead the eye from card 1 to card 3. */
[dir="rtl"] .cards-grid .card > img[src*="arrow-"]{transform:scaleX(-1);left:-11%;right:auto;}

/* --------------------------------------------------------------------------
   Quiz
-------------------------------------------------------------------------- */
/* The bar drains from the side the language starts on. */
[dir="rtl"] #nhBarWrap{transform:scaleX(-1);}

#nhClock.nh-warn{color:#C6382F;animation:nhPulse .9s ease-in-out infinite;}
@keyframes nhPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* Two compact choice cards side-by-side — never full-bleed bars. */
.nh-opts,
#nhOpts.nh-opts{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:stretch;
  gap:20px;
  padding:4px 8px 8px;
  box-sizing:border-box;
}
.nh-opt{
  font-family:'Baloo Bhaijaan 2',cursive;
  cursor:pointer;border:0;border-radius:20px;
  flex:0 1 148px;
  width:148px;max-width:148px;
  min-height:118px;
  padding:18px 14px;
  font-size:clamp(17px,3.8vw,22px);font-weight:700;color:#fff;
  box-shadow:0 7px 0 rgba(0,0,0,.14);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
  display:flex;align-items:center;justify-content:center;text-align:center;
  line-height:1.2;word-break:break-word;
}
.nh-opt:hover{filter:brightness(1.06);transform:translateY(-3px);}
.nh-opt:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.14);}
.nh-opt[disabled]{cursor:default;filter:none;transform:none;}
#nhOpts.nh-sent .nh-opt:not(.nh-picked){opacity:.42;}
#nhOpts.nh-sent .nh-picked{outline:3px solid #0A2A66;outline-offset:3px;transform:none;}

#nhQuizMsg:empty{display:none!important;}

/* --------------------------------------------------------------------------
   Upload (week 3)
-------------------------------------------------------------------------- */
#nhDrop{position:relative;}
#nhDrop:hover,#nhDrop.nh-over{border-color:#2B6FEA;background:#F4F8FF;}
#nhDrop.nh-has img#nhPreview{display:block;}

/* --------------------------------------------------------------------------
   Small screens
-------------------------------------------------------------------------- */
@media (max-width:480px){
  .modal-panel{padding:20px 16px!important;border-radius:20px!important;}
  .quiz-q{font-size:20px!important;}
  .nh-opts,#nhOpts.nh-opts{gap:14px;padding:4px 0 6px;}
  .nh-opt{flex-basis:132px;width:132px;max-width:132px;min-height:104px;padding:16px 10px;font-size:18px;border-radius:16px;}
}