/* orca-placement.css -- "اعرف مستواك": the gate (placement.html) and the test itself (placement-exam.html).
 *
 * Hand-written on top of orca.css, which already carries the design's own level-test rules (.lv-hero, .lv-steps, .lv-grid, .exam, .lv-form,
 * .lv-result, .ring ...). This file is what the design does not draw because Tafra has it and the handoff does not: the admin's picture,
 * the phone field with its country picker, the question types of a real exam (choices, numbers, equations, tables, drawings), the question
 * map, the module break, the dialogs and the score breakdown. Everything is scoped under .orca; logical properties throughout, because
 * the gate and the result follow the visitor's language while the exam itself is always English (left to right).
 */

.orca .hidden{display:none!important}
.orca button,
.orca input,
.orca select,
.orca textarea{font-family:inherit}

/* ---- loading ring -------------------------------------------------------------------------------------- */
.orca .spin{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(45,70,255,.25);border-top-color:var(--o-blue);
  animation:o-spin .7s linear infinite;vertical-align:-3px;margin-inline-end:8px}
.orca .px-submit .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* ================================================================================================================
   THE GATE
   ================================================================================================================ */
.orca .lv-split{display:grid;gap:22px;max-width:1040px;margin-inline:auto;align-items:start}
.orca .lv-split .lv-stage{width:100%;max-width:560px;margin-inline:auto}

/* the admin's picture (placement_hero_image -> --placement-hero): a framed panel beside the form; without one the form is centred */
.orca .lv-photo{display:none;position:relative;margin:0;padding:12px;border-radius:32px;background:#fff;border:1px solid var(--o-edge);box-shadow:var(--o-shadow-lg)}
.orca .lv-photo::before{content:"";display:block;aspect-ratio:16/7;border-radius:22px;background-color:#E2E6F3;background-image:var(--placement-hero,none);background-size:cover;background-position:center}
.orca .lv-split.has-photo .lv-photo{display:block}
@media (min-width:900px){
  .orca .lv-split.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .orca .lv-split.has-photo .lv-photo{position:sticky;top:104px}
  .orca .lv-split.has-photo .lv-photo::before{aspect-ratio:4/5}
  .orca .lv-split.has-photo .lv-stage{margin-inline:0}
}

/* status lines: loading, nothing open, an error */
.orca .lv-msg{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:18px;font-size:14.5px;font-weight:700;line-height:1.7;
  background:var(--o-glass-strong);border:1px solid var(--o-edge);box-shadow:var(--o-shadow)}
.orca .lv-msg.warn{color:#92400E;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.orca .lv-msg.error{color:#B91C1C;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.28)}
.orca .lv-msg.ok{color:#15803D;background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.3)}

/* the cards of the tests on offer (the design's .exam; its title is a span here, a heading cannot live inside a button).
   Beside the picture the column is narrow, so they stack. */
.orca .exam .t{font-size:16.5px;font-weight:700;line-height:1.5}
.orca .lv-split .lv-grid{grid-template-columns:1fr}
/* the glass button on a white card needs an edge of its own */
.orca .lv-form .btn-glass,
.orca .r-card .btn-glass,
.orca .bk-card .btn-glass{background:rgba(11,21,51,.04);border-color:rgba(11,21,51,.1);box-shadow:none}

/* what the chosen test is: questions, minutes, where the result goes */
.orca .lv-info{display:flex;flex-wrap:wrap;gap:8px}
.orca .lv-info span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--o-ink-2);background:rgba(11,21,51,.05)}
.orca .lv-info svg{flex:none;color:var(--o-blue)}
.orca .lv-info b{color:var(--o-ink)}
.orca .lv-note{text-align:center;font-size:12.5px;color:var(--o-ink-2)}
.orca .lv-form .check{justify-self:start}

/* ---- the phone field: intl-tel-input dressed as the design's country picker (same as the registration page) ---- */
.orca .iti__flag{background-image:url('/img/iti/flags.png')}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.orca .iti__flag{background-image:url('/img/iti/flags@2x.png')}}
.orca .field.iti-field .iti{width:100%;display:block}
.orca .field.iti-field .iti__flag-container{left:8px;top:9px;bottom:auto;padding:0;height:40px}
.orca .field.iti-field .iti__selected-flag{height:40px;border-radius:12px;border:1px solid rgba(11,21,51,.1);background:rgba(11,21,51,.03);padding:0 8px 0 10px;
  display:flex;align-items:center;gap:6px;transition:background .2s,border-color .2s}
.orca .field.iti-field .iti__selected-flag:hover,
.orca .field.iti-field .iti__selected-flag:focus{background:rgba(45,70,255,.07);border-color:rgba(45,70,255,.3);outline:0}
.orca .field.iti-field .iti__selected-dial-code{margin-left:0;font-size:14px;font-weight:700;color:var(--o-ink);direction:ltr}
.orca .field.iti-field .iti__arrow{margin-left:0;border-top-color:var(--o-ink-2)}
.orca .field.iti-field .iti__arrow--up{border-bottom-color:var(--o-ink-2)}
.orca .field.iti-field input[type=tel]{direction:ltr;text-align:left;padding:22px 16px 6px 124px!important;letter-spacing:.3px}
.orca .field.iti-field label{position:absolute;right:16px;top:18px;font-size:15px;color:var(--o-ink-2);pointer-events:none;transition:top .2s var(--o-ease),font-size .2s,color .2s}
.orca .field.iti-field.is-float label{top:7px;font-size:12px;color:var(--o-blue)}
.orca .field.iti-field.bad label{color:#DC2626}
.orca[dir=ltr] .field.iti-field label{left:124px;right:auto}
.orca .field.iti-field.ok input[type=tel]{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.45)}
.orca .field.iti-field.bad input[type=tel]{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}
/* the list opens where the library puts it; it reads left to right (names mix Latin and Arabic) and is anchored with a physical left */
.orca .iti__country-list{margin:0;width:min(360px,calc(100vw - 16px));max-height:240px;white-space:normal;border-radius:16px;border:1px solid var(--o-edge);
  box-shadow:var(--o-shadow-lg);overflow-y:auto;font-family:var(--o-body)}
.orca .iti--container .iti__country-list{left:0;right:auto}
.orca .iti-mobile .iti__country-list{width:100%;max-height:100%}
@media (max-width:500px){ .orca body:not(.iti-mobile) .iti--container{left:8px!important} }
.orca .iti__country{display:flex;align-items:center;gap:8px;direction:ltr;text-align:left;padding:10px 12px;line-height:1.5}
.orca .iti__country .iti__flag-box{flex:none;margin:0}
.orca .iti__country-name{flex:1;min-width:0;margin:0;font-weight:600}
.orca .iti__dial-code{flex:none;margin:0;color:var(--o-ink-2);direction:ltr}
.orca .iti__country.iti__highlight{background:rgba(45,70,255,.08)}
.orca .iti__divider{border-bottom-color:var(--o-line)}
@media (max-width:480px){ .orca .field.iti-field input[type=tel]{padding-left:118px!important} }

/* ================================================================================================================
   THE TEST (placement-exam.html) -- English, left to right
   ================================================================================================================ */
/* while it runs the site's header, drawer and footer step aside; the result brings them back */
html.orca.in-exam #hdr,
html.orca.in-exam #drawer,
html.orca.in-exam #scrim,
html.orca.in-exam #progress,
html.orca.in-exam #orca-footer,
html.orca.in-exam footer.site-foot{display:none!important}

.orca .px{min-height:100vh;display:flex;flex-direction:column}

/* top bar: brand and test name, calculator, clock; a thin progress line along its lower edge */
.orca .px-top{position:fixed;inset-inline:0;top:0;z-index:60;height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--o-glass-strong);-webkit-backdrop-filter:var(--o-blur);backdrop-filter:var(--o-blur);border-bottom:1px solid var(--o-edge);
  box-shadow:0 10px 30px -22px rgba(11,21,51,.45)}
.orca .px-brand{display:flex;align-items:center;gap:14px;min-width:0}
.orca .px-logo{flex:none;height:26px;width:auto;aspect-ratio:2708/624;color:var(--o-blue)}
.orca .top-left{min-width:0;line-height:1.35;padding-inline-start:14px;border-inline-start:1px solid var(--o-line)}
.orca .top-left .tiny{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--o-ink-2)}
.orca .top-left .big{font-size:14.5px;font-weight:700;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orca .px-act{display:flex;align-items:center;gap:10px;flex:none}
.orca #timer{font-size:17px;font-weight:800;letter-spacing:1px;padding:7px 14px;transition:color .3s,border-color .3s}
.orca #timer.warn{color:#B45309;border-color:rgba(245,158,11,.55)}
.orca #timer.danger{color:#DC2626;border-color:rgba(220,38,38,.4)}
.orca #calc-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid rgba(11,21,51,.1);background:#fff;color:var(--o-ink);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.orca #calc-btn:hover{background:rgba(45,70,255,.07);border-color:rgba(45,70,255,.3);color:var(--o-blue)}
.orca .px-bar{position:absolute;inset-inline:0;bottom:-1px;height:3px;background:rgba(11,21,51,.06)}
.orca #pbar{height:100%;width:0;background:linear-gradient(90deg,#22d3ee,var(--o-blue));transition:width .4s var(--o-ease)}

/* the question */
.orca .px-main{flex:1;display:flex;justify-content:center;padding:92px 16px 112px}
.orca .px-q{width:100%;max-width:780px;align-self:flex-start;border-radius:28px;padding:28px 30px;background:var(--o-glass-strong)}
.orca .q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.orca .q-num{display:inline-flex;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:800;color:var(--o-blue);background:rgba(45,70,255,.09)}
.orca .mark-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1.5px solid rgba(11,21,51,.12);background:#fff;color:var(--o-ink-2);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.orca .mark-btn:hover{border-color:rgba(245,158,11,.5)}
.orca .mark-btn.on{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5);color:#92400E}
.orca .mark-btn.on svg{fill:currentColor}
.orca .q-text{font-size:clamp(16px,1.9vw,18px);line-height:1.9;color:var(--o-ink);margin-bottom:22px;overflow-wrap:anywhere}
.orca .q-text img,
.orca .q-text svg{max-width:100%;height:auto;display:block;margin:12px 0}
.orca .q-img{display:block;max-width:100%;height:auto;border-radius:14px;margin-bottom:18px}

/* multiple choice */
.orca .choices{display:grid;gap:10px}
.orca .choice{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:18px;border:1.5px solid rgba(11,21,51,.08);background:rgba(255,255,255,.8);cursor:pointer;
  font-size:15.5px;line-height:1.7;transition:border-color .2s,background .2s,box-shadow .2s,transform .3s var(--o-spring)}
.orca .choice:hover{border-color:rgba(45,70,255,.4);transform:translateY(-1px)}
.orca .choice.sel{border-color:var(--o-blue);background:#fff;box-shadow:0 0 0 4px rgba(45,70,255,.1)}
.orca .cletter{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:14px;font-weight:700;color:var(--o-blue);background:rgba(45,70,255,.08);
  transition:background .2s,color .2s}
.orca .choice.sel .cletter{background:var(--o-blue);color:#fff}
.orca .ctext{min-width:0;overflow-wrap:anywhere}

/* a number to type */
.orca .numeric-wrap{display:grid;gap:9px;max-width:340px}
.orca .numeric-input{width:100%;padding:14px 18px;border-radius:16px;border:1.5px solid rgba(11,21,51,.12);background:rgba(255,255,255,.85);font:inherit;font-size:22px;font-weight:800;
  color:var(--o-ink);text-align:center;letter-spacing:2px;direction:ltr;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.orca .numeric-input:focus{border-color:var(--o-blue);box-shadow:0 0 0 4px rgba(45,70,255,.14);background:#fff}
.orca .numeric-input.filled{border-color:var(--o-blue);background:#fff}
.orca .numeric-hint{font-size:12.5px;color:var(--o-ink-2)}

/* equations and tables inside a question */
.orca .katex{direction:ltr;unicode-bidi:isolate;text-align:left}
.orca .er-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;border-radius:14px;border:1px solid var(--o-line);background:#fff}
.orca .er-table table{border-collapse:collapse;width:100%;min-width:320px;font-size:14px;direction:ltr;color:var(--o-ink)}
.orca .er-table th,
.orca .er-table td{border:1px solid var(--o-line);padding:9px 13px;text-align:center;white-space:nowrap}
.orca .er-table th{background:rgba(45,70,255,.06);font-weight:800}
.orca .er-table tbody tr:nth-child(even) td{background:rgba(11,21,51,.025)}

/* bottom bar: back, the map of questions, next / submit */
.orca .px-bottom{position:fixed;inset-inline:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--o-glass-strong);-webkit-backdrop-filter:var(--o-blur);backdrop-filter:var(--o-blur);
  border-top:1px solid var(--o-edge);box-shadow:0 -10px 30px -22px rgba(11,21,51,.4)}
.orca .nav-btn{min-width:104px;padding:11px 20px;font-size:14.5px}
.orca .nav-btn:disabled{opacity:.45;cursor:default}
.orca #qdots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:55vw;overflow-x:auto;padding:2px}
.orca .qdot{flex:none;width:28px;height:28px;border-radius:9px;border:1.5px solid rgba(11,21,51,.12);background:#fff;color:var(--o-ink-2);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.orca .qdot.done{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.4);color:#166534}
.orca .qdot.mark{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5);color:#92400E}
.orca .qdot.cur{outline:2px solid var(--o-blue);outline-offset:1px}

/* dialogs (submit?, leaving the page, something went wrong) and the loading screen */
.orca .ov{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:20px;background:rgba(11,21,51,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.orca .ov-box{width:100%;max-width:420px;padding:28px 26px;border-radius:28px;background:#fff;text-align:center;box-shadow:var(--o-shadow-lg)}
.orca .ov-box h2{font-size:20px;margin-bottom:9px}
.orca .ov-box p{font-size:14.5px;color:var(--o-ink-2);line-height:1.8;margin-bottom:18px}
.orca #boot .ov-box p{margin:0}
.orca .ov-btns{display:flex;gap:10px}
.orca .ov-btns .btn{flex:1;padding:13px 10px}

/* the break between the two modules (no score here on purpose) */
.orca #break{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;background:rgba(244,246,251,.97)}
.orca #break.show{display:flex}
.orca .bk-card{width:100%;max-width:480px;padding:34px 30px;border-radius:30px;text-align:center;background:var(--o-glass-strong)}
.orca .bk-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#16A34A;background:rgba(22,163,74,.12)}
.orca .bk-pill{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:800;color:#15803D;background:rgba(22,163,74,.12)}
.orca .bk-title{font-size:26px;margin:0 0 10px}
.orca .bk-sub{font-size:15px;line-height:1.8;color:var(--o-ink-2);margin:0 0 14px}
.orca .bk-note{font-size:14px;color:var(--o-ink-2);margin:0 0 18px}
.orca .bk-note b{color:var(--o-ink)}
.orca .bk-box{margin-bottom:20px;padding:14px 16px;border-radius:18px;text-align:start;background:rgba(22,163,74,.07);border:1px solid rgba(22,163,74,.22)}
.orca .bk-row{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14.5px}
.orca .bk-go{width:100%;padding:15px}
.orca .bk-go:disabled{opacity:.55;cursor:default}

/* ================================================================================================================
   THE RESULT (in the visitor's language)
   ================================================================================================================ */
.orca .lv-result.pr{max-width:760px;overflow:hidden}
.orca .pr-photo{display:none;justify-self:stretch;height:150px;margin:-30px -20px 6px;background-color:#E2E6F3;background-image:var(--placement-hero,none);background-size:cover;background-position:center}
.orca .pr.has-photo .pr-photo{display:block}
@media (min-width:700px){ .orca .pr-photo{margin-inline:-20px} }
.orca .r-brand{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--o-blue);background:rgba(45,70,255,.09)}
.orca .r-exam{font-size:15px;font-weight:700;color:var(--o-ink-2)}
.orca .r-msg{font-size:clamp(20px,2.6vw,26px)}
.orca .r-breakdown{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.orca .r-bd{display:grid;gap:2px;min-width:96px;padding:8px 14px;border-radius:14px;background:#fff;border:1px solid var(--o-line);font-size:12.5px;font-weight:700;color:var(--o-ink-2);line-height:1.4}
/* the number reads left to right in an Arabic page: without the isolation "9 / 200" turns into "200 / 9" */
.orca .r-bd .v{unicode-bidi:isolate;display:block;font-size:16px;font-weight:800;color:var(--o-ink)}
.orca .r-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.orca .r-stat{padding:14px 8px;border-radius:18px;text-align:center;background:#fff;border:1px solid var(--o-line)}
.orca .r-stat .n{font-size:26px;font-weight:800;line-height:1.3}
.orca .r-stat .n.g{color:#15803D}
.orca .r-stat .n.r{color:#DC2626}
.orca .r-stat .l{font-size:12px;font-weight:700;color:var(--o-ink-2)}
.orca .r-card{width:100%;padding:20px 22px;border-radius:22px;text-align:start;background:#fff;border:1px solid var(--o-line)}
.orca .r-card h3{font-size:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--o-line)}
.orca .r-body{font-size:14.5px;line-height:1.95;color:var(--o-ink-2)}
.orca .rec{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border-radius:18px;background:rgba(45,70,255,.06);border:1px solid rgba(45,70,255,.16)}
.orca .rec-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;font-style:normal;color:#fff;background:linear-gradient(145deg,#5B6CFF,#2D46FF)}
.orca .rec .t{font-size:12.5px;font-weight:700;color:var(--o-ink-2)}
.orca .rec .n{font-size:16px;font-weight:800;line-height:1.5}
.orca .rec.gift{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}
.orca .rec.gift .rec-ic{background:linear-gradient(145deg,#FBBF24,#F59E0B)}
.orca .enrolled-note{padding:16px 18px;border-radius:18px;font-weight:700;line-height:1.9;color:var(--o-blue-deep);background:rgba(45,70,255,.07);border:1px solid rgba(45,70,255,.18)}
.orca .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.orca .btn-row .btn{flex:1 1 170px}
.orca .r-card .lv-sent{margin-top:14px;display:flex;justify-content:center;text-align:center}

/* ---- small screens ---------------------------------------------------------------------------------------- */
@media (max-width:640px){
  .orca .px-top{padding:0 12px;gap:8px}
  .orca .px-logo{display:none}
  .orca .top-left{padding-inline-start:0;border-inline-start:0}
  .orca .top-left .big{max-width:42vw}
  .orca #calc-btn{padding:8px 10px}
  .orca #calc-btn span{display:none}
  .orca #timer{font-size:15px;padding:6px 11px}
  .orca .px-main{padding:84px 12px 104px}
  .orca .px-q{padding:20px 16px;border-radius:22px}
  .orca .px-bottom{padding-inline:10px;gap:6px}
  .orca .nav-btn{min-width:0;padding:10px 14px;font-size:13.5px}
  .orca #qdots{max-width:36vw}
  .orca .bk-card{padding:28px 20px}
  .orca .r-stat .n{font-size:22px}
}