/*
 * Open test pages (4.15.91): the owner's layout 6 «عمودان + زر ثابت» (17 Oct 2026),
 * in the «مراجعة إجاباتي» design (see-exam-review.css) inside the site shell.
 * Computer: the free question beside the paid card. Phone: one column
 * and a bar with the button that stays at the bottom of the screen.
 */
.see-ot { min-height: 100vh; }
.see-ot .see-ot__page { max-width: 1180px; margin: 24px auto 48px; padding: 0 16px; }

.see-ot .see-ot__intro { margin: 14px 22px 0 !important; color: #27413a !important; font-size: 15.5px !important; line-height: 1.8 !important; text-align: center; }
.see-ot .see-ot__stats { padding-bottom: 22px !important; }

.see-ot__grid { display: grid; gap: 20px; margin-top: 4px; }
.see-ot__main, .see-ot__side { min-width: 0; }
.see-ot .see-ot__h2 { margin: 26px 0 0 !important; color: #fff !important; font-size: 20px !important; font-weight: 900 !important; }
.see-ot .see-ot__h { margin: 18px 0 4px !important; color: #f2c85c !important; font-size: 15px !important; font-weight: 800 !important; }
/* The free question (owner, 17 Oct): the student answers first, then right or wrong and «الشرح» (see-open-test.js). */
.see-ot .see-review__q .see-review__pill { background: #e3f4ea; color: #0f6b46; }
.see-ot .see-review__q .see-review__num { background: #0f7a55; }
.see-ot .see-review__q.is-wrong .see-review__num { background: #c0392b; }
.see-ot button.see-review__opt { width: 100%; box-sizing: border-box; margin: 0; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background-color 0.15s, transform 0.1s; }
.see-ot button.see-review__opt:hover:not(:disabled) { border-color: #d6a53d; background: #fff8e6; }
.see-ot button.see-review__opt:active:not(:disabled) { transform: scale(0.99); }
.see-ot button.see-review__opt:focus-visible { outline: 3px solid #d6a53d; outline-offset: 2px; }
.see-ot button.see-review__opt:disabled { cursor: default; opacity: 1; }
.see-ot .see-ot__fb { animation: see-ot-in 0.25s ease both; }
.see-ot .see-ot__result { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; }
.see-ot .see-review__q.is-right .see-ot__result { background: #e3f4ea; color: #0f6b46; }
.see-ot .see-review__q.is-wrong .see-ot__result { background: #fbe5e1; color: #a5281b; }
@keyframes see-ot-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .see-ot .see-ot__fb { animation: none; } .see-ot button.see-review__opt { transition: none; } }

/* English inside the Arabic explanation keeps its own direction (see SEE_Open_Tests::isolate_latin()). */
.see-ot .see-review__explain bdi { unicode-bidi: isolate; }
.see-ot .see-review__explain div div { unicode-bidi: plaintext; text-align: start; margin-top: 4px; }

/*
 * The paid card (owner, 17 Oct, option 3 of 4): «بقية النموذج: N سؤالًا / في الباقة المدفوعة»
 * on top, then the free test page's whole card, design 1 «إطار ذهبي فاخر» (step-free-test.css
 * .see-ft-offer, 16 Oct). A gold frame, a soft gold light on top, the price large in gold, the film, the
 * payment page's points and a gold button that shines now and then.
 */
.see-ot-offer {
  --ot-gold-a: #f6d77f;
  --ot-gold-b: #d6a53d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 22px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(170deg, #082927, #041a19) padding-box, linear-gradient(135deg, #f6d77f, #8a6420 35%, #f2ad1d 60%, #6d4f17) border-box;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 235, 171, 0.08);
  color: #f6f2e9;
}
.see-ot-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 70% at 50% 0%, rgba(216, 166, 58, 0.16), transparent 60%); pointer-events: none; }
.see-ot .see-ot-offer__top { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(216, 166, 58, 0.3); }
.see-ot .see-ot-offer__title { margin: 0 !important; color: #fff !important; font-size: 24px !important; font-weight: 900 !important; line-height: 1.35 !important; }
.see-ot .see-ot-offer__sub { margin: 4px 0 0 !important; color: #f2c85c !important; font-size: 15px !important; font-weight: 800 !important; }
.see-ot .see-ot-offer__kicker { display: inline-block; margin: 0 0 8px !important; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--ot-gold-a), var(--ot-gold-b)); color: #1d1405 !important; font-size: 12.5px !important; font-weight: 800 !important; }
.see-ot .see-ot-offer__name { margin: 0 0 6px !important; color: #fff !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.45 !important; }
.see-ot .see-ot-offer__price { margin: 0 0 12px !important; font-size: 13.5px; line-height: 1.6; color: #d9e2dd !important; }
.see-ot .see-ot-offer__price b { font-size: 30px; line-height: 1.3; margin-left: 6px; white-space: nowrap; color: #f2ad1d; background: linear-gradient(180deg, #fff1c2, #e6b34a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.see-ot-offer__terms { display: block; margin-top: 2px; color: #c9b27a; font-size: 13px; }
.see-ot-offer__terms i { font-style: normal; }
.see-ot-offer__terms i + i::before { content: " · "; }
.see-ot-offer__video { margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(216, 166, 58, 0.45); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); aspect-ratio: 16 / 9; }
.see-ot-offer__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.see-ot .see-ot-offer__lead { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 800 !important; color: #f2d38a !important; }
.see-ot .see-ot-offer__list { list-style: none; margin: 0 0 12px !important; padding: 0 !important; }
.see-ot .see-ot-offer__list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; color: #f6f2e9 !important; font-size: 15px; }
.see-ot-offer__list li::before { content: "✓"; font-weight: 800; color: #d8a63a; }
.see-ot .see-ot-offer__btn { position: relative; overflow: hidden; display: block; width: 100%; box-sizing: border-box; padding: 14px; border-radius: 14px; text-align: center; font-size: 17px; font-weight: 800; text-decoration: none; background: linear-gradient(135deg, var(--ot-gold-a), var(--ot-gold-b)); color: #1d1405 !important; box-shadow: 0 12px 26px rgba(216, 166, 58, 0.28); transition: transform 0.15s, box-shadow 0.2s; }
.see-ot .see-ot-offer__btn:hover { background: linear-gradient(135deg, #f9e19a, #e0b04a); color: #1d1405 !important; }
.see-ot .see-ot-offer__btn:active { transform: scale(0.98); }
.see-ot-offer__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(120%); animation: see-ot-sheen 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes see-ot-sheen { 0%, 55% { transform: translateX(120%); } 85%, 100% { transform: translateX(-120%); } }
@media (prefers-reduced-motion: reduce) { .see-ot-offer__btn::after { animation: none !important; } }
.see-ot .see-ot__chips { margin-top: 8px !important; }
.see-ot .see-ot__chips .see-review__tab { cursor: default; }

.see-ot .see-ot__nav { padding: 22px 0 0 !important; }
.see-ot .see-ot__nav .see-review__btn { flex: 1 1 40%; }
.see-ot .see-ot__nav .see-ot__all { flex: 1 1 100%; border-color: rgba(255, 255, 255, 0.25) !important; background: transparent !important; color: #dfeee7 !important; }

/* Phone: the button stays at the bottom of the screen. */
.see-ot__bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 20px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #001010; border-top: 1px solid rgba(242, 200, 92, 0.4); }
.see-ot .see-ot__bar .see-review__btn { flex: 1 1 auto; min-height: 46px; padding: 8px 14px; }
.see-ot__bar span { color: #f2c85c; font-weight: 800; font-size: 14px; white-space: nowrap; }

/* Computer: two columns (the card is taller than the screen now, so it scrolls with the page). */
@media (min-width: 1000px) {
  .see-ot__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 26px; }
  .see-ot__bar { display: none; }
}

/*
 * 4.16.2: the smart dashboard's paid lock (SEE_Dashboard::paid_lock(), owner 18 Oct, option 1 of 4 «البطاقة وحدها»):
 * the same card alone, in the middle, for a student without full access on the smart dashboard,
 * «تحليل المهارات», «هدفي» and «مراجعة إجاباتي».
 */
.see-paid-lock .see-paid-lock__wrap { max-width: 480px; margin: 24px auto 48px; padding: 0 16px; }
.see-paid-lock .see-ot-offer { margin-top: 0; }

/*
 * 4.16.11 (owner 19 Oct, design C «خط زمني»): after the free question of a Listening page, the real STEP Listening section
 * (tiles, the rule, the skills) and this test's recordings on one line. Text colours are set here because the page's
 * dark shell makes paragraph text light.
 */
.see-ot .see-lx { margin: 22px 0 6px; background: #fff; border: 1px solid #e3e8e5; border-radius: 16px; padding: 16px 14px; color: #1d2a26; font-size: 15px; line-height: 1.75; }
.see-ot .see-lx h2 { font-size: 18px; margin: 0 0 10px; color: #0c2f25; }
.see-ot .see-lx h2:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d8dfdb; }
.see-ot .see-lx h3 { font-size: 15.5px; margin: 14px 0 8px; color: #0c2f25; }
.see-ot .see-lx p, .see-ot .see-lx li, .see-ot .see-lx span { color: #1d2a26; }
.see-ot .see-lx__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 10px; }
.see-ot .see-lx__tiles div { background: #0c2f25; border-radius: 12px; padding: 8px 2px; text-align: center; }
.see-ot .see-lx__tiles b { display: block; color: #e7ba4d; font-size: 17px; line-height: 1.3; }
.see-ot .see-lx__tiles span { color: #fff; font-size: 12px; }
.see-ot .see-lx__rule { margin: 0 0 4px; color: #3d4c46; }
.see-ot .see-lx__skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.see-ot .see-lx__skills li { background: #f6f8f7; border-radius: 10px; padding: 6px 10px; }
.see-ot .see-lx__skills b { display: block; color: #0c2f25; }
.see-ot .see-lx__skills span { font-size: 13.5px; color: #55645e; }
.see-ot .see-lx__lead { margin: 0 0 8px; color: #55645e; }
.see-ot .see-lx__time { list-style: none; margin: 0; padding: 0; position: relative; }
.see-ot .see-lx__time::before { content: ""; position: absolute; right: 12px; top: 6px; bottom: 6px; width: 2px; background: #e7ba4d; }
.see-ot .see-lx__time li { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.see-ot .see-lx__time p { margin: 2px 0; }
.see-ot .see-lx__dot { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #e7ba4d; color: #0c2f25; display: grid; place-items: center; font-weight: 800; font-size: 13px; position: relative; z-index: 1; }
.see-ot .see-lx__kind { display: inline-block; font-size: 12px; background: #f3ead1; color: #6b5210; border-radius: 6px; padding: 0 6px; margin-inline-end: 4px; }
.see-ot .see-lx__meta { font-size: 12.5px; color: #66756f; }
.see-ot .see-lx__same { margin: 10px 0 0; background: #eef6f2; border-radius: 10px; padding: 8px 10px; font-weight: 700; color: #0c2f25; }
@media (max-width: 380px) { .see-ot .see-lx__tiles b { font-size: 15px; } .see-ot .see-lx__tiles span { font-size: 11px; } }