/* ============================================================================
   كيف اختار تخصصي؟ — Guide / Quiz / Results flow
   Tokens + component classes ported from the UCAS design system handoff.
   ============================================================================ */
:root {
  --ucas-blue: #0B669E;
  --ucas-blue-diploma: #0F62AC;
  --ucas-blue-major: #0d689d;
  --ucas-green: #62BB46;
  --ucas-green-bachelor: #51A45C;
  --ucas-cyan: #35B8E0;
  --ucas-navy-title: #233b77;
  --ucas-stat-orange: #E78A20;

  --ucas-text: #3A3838;
  --ucas-text-muted: #6F6F6F;
  --ucas-text-strong: #4D4B4B;
  --ucas-text-headline: #212529;
  --ucas-bg-page: #F0F0F2;
  --ucas-bg-section: #F3F7FA;

  --ucas-grad-brand: linear-gradient(to left, #0B669E, #62BB46);
  --ucas-grad-section-decor: linear-gradient(to right, #3cb64c, #008fd5);
  --ucas-grad-card: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  --ucas-grad-pill: linear-gradient(135deg, #edf5fb, #f5f9fc);
  --ucas-grad-login-cta: linear-gradient(135deg, #35B8E0, #106B9A);
  --ucas-grad-bachelor: linear-gradient(135deg, #51A45C, #3d8a47);
  --ucas-grad-bachelor-hover: linear-gradient(135deg, #62BB46, #51A45C);
  --ucas-grad-register: linear-gradient(135deg, #0f62ac, #0B5A8A);
  --ucas-grad-register-hover: linear-gradient(135deg, #35B8E0, #0f62ac);
  --ucas-grad-whatsapp: linear-gradient(135deg, #51a45c, #45924f);
  --ucas-grad-disabled: linear-gradient(135deg, #888888, #666666);

  --font-arabic: "Bahij TheSansArabic", "Cairo", sans-serif;
  --fw-body: 500;
  --fw-bold: 700;
  --fs-section-title: 1.75rem;
  --fs-subhead: 1.625rem;
  --fs-major-name: 1.5rem;
  --fs-page-section: 1.375rem;
  --fs-card-title: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-small-2: 0.875rem;
  --fs-fine: 0.8125rem;
  --lh-body: 1.8;
  --lh-desc: 1.6;

  --r-card: 1rem;
  --r-button: 0.75rem;
  --r-login: 0.85rem;
  --r-pill: 0.875rem;
  --r-sm: 0.5rem;
  --r-circle: 50%;
  --r-badge: 0 0.75rem 0.75rem 0;

  --sh-card: 0 4px 20px rgba(11,102,158,0.12), 0 0 0 1px rgba(11,102,158,0.08);
  --sh-card-hover: 0 12px 35px rgba(11,102,158,0.2), 0 0 0 1px rgba(11,102,158,0.15);
  --sh-pill: 0 2px 6px rgba(11,102,158,0.08);
  --bd-card: 1px solid rgba(255,255,255,0.6);
  --bd-hairline: 1px solid rgba(11,102,158,0.10);
  --blur-card: blur(10px);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --t-card: all 0.4s var(--ease-standard);
  --t-button: all 0.3s var(--ease-standard);
}

/* ---- section header -------------------------------------------------------- */
.ucas-section-decor { width: 80px; height: 5px; border-radius: 3px; background: var(--ucas-grad-section-decor); }
.ucas-section-title { font-size: var(--fs-section-title); font-weight: var(--fw-bold); color: var(--ucas-text); margin-top: 0.625rem; }
.ucas-section-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ucas-text-muted); font-weight: var(--fw-body); text-align: justify; text-align-last: right; margin-top: 0.3125rem; }

/* ---- buttons --------------------------------------------------------------- */
.ucas-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-button);
  padding: 0.625rem 1rem; cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: var(--t-button); font-family: var(--font-arabic); font-weight: var(--fw-bold); font-size: var(--fs-small);
  color: #fff; background: var(--ucas-grad-register); box-shadow: 0 3px 10px rgba(15,98,172,0.25);
}
.ucas-btn::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: rgba(255,255,255,0.2); transform: translate(-50%,-50%); transition: width .5s, height .5s; }
.ucas-btn:hover::before { width: 320px; height: 320px; }
.ucas-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 6px 18px rgba(15,98,172,0.4); background: var(--ucas-grad-register-hover); }
.ucas-btn:active { transform: translateY(-1px) scale(1.01); }
.ucas-btn > * { position: relative; z-index: 1; }
.ucas-btn--bachelor { background: var(--ucas-grad-bachelor); box-shadow: 0 3px 10px rgba(81,164,92,0.25); }
.ucas-btn--bachelor:hover { background: var(--ucas-grad-bachelor-hover); box-shadow: 0 6px 18px rgba(81,164,92,0.4); }
.ucas-btn--whatsapp { background: var(--ucas-grad-whatsapp); box-shadow: 0 3px 10px rgba(81,164,92,0.25); }
.ucas-btn--whatsapp:hover { background: linear-gradient(135deg,#5bb566,#51a45c); box-shadow: 0 5px 15px rgba(81,164,92,0.4); }
.ucas-btn--cta { background: var(--ucas-grad-login-cta); border-radius: var(--r-login); box-shadow: 0 3px 10px rgba(53,184,224,0.3); }
.ucas-btn--disabled { background: var(--ucas-grad-disabled); pointer-events: none; opacity: .6; cursor: not-allowed; box-shadow: none; }
.ucas-btn--ghost { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); border: 2px solid var(--ucas-blue-diploma); color: var(--ucas-blue-diploma); box-shadow: none; }
.ucas-btn--ghost:hover { background: linear-gradient(135deg, rgba(15,98,172,0.08), rgba(15,98,172,0.05)); border-color: var(--ucas-cyan); box-shadow: 0 6px 16px rgba(15,98,172,0.2); transform: translateY(-3px) scale(1.02); }
.ucas-btn--ghost.ucas-btn--bachelor { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); border-color: var(--ucas-green-bachelor); color: var(--ucas-green-bachelor); }

.ucas-degree-badge { border-radius: var(--r-badge); color: #fff; font-weight: var(--fw-bold); padding: 0.375rem 1rem; box-shadow: 0 3px 10px rgba(0,0,0,0.15); font-size: var(--fs-small); display: inline-block; }
.ucas-pill { padding: 0.375rem 0.875rem; font-size: var(--fs-small-2); color: var(--ucas-text); font-weight: var(--fw-body); border-radius: var(--r-pill); margin: 0; box-shadow: var(--sh-pill); transition: all .3s ease; background: var(--ucas-grad-pill); border: var(--bd-hairline); }

.ucas-select {
  color: #000; font-family: var(--font-arabic); font-size: var(--fs-body-lg); font-weight: var(--fw-body);
  border: 1px solid rgba(11,102,158,0.15); box-shadow: 0 4px 16px rgba(13,104,157,0.12);
  appearance: none; -webkit-appearance: none; padding: 0.75rem 1.25rem 0.75rem 3rem; border-radius: var(--r-button);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f62ac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 1rem center; transition: all .3s ease; cursor: pointer; direction: rtl;
}
.ucas-select:focus { outline: none; border-color: var(--ucas-blue-diploma); box-shadow: 0 0 0 3px rgba(15,98,172,0.1), 0 6px 20px rgba(13,104,157,0.18); }

/* ============================================================================
   Screen scaffold
   ============================================================================ */
.ms-screen { background: var(--ucas-bg-page); min-height: 60vh; font-family: var(--font-arabic); color: var(--ucas-text); }
.ms-screen--plain { background: var(--ucas-bg-section); }
.ms-wrap { width: 90%; max-width: 1000px; margin: 0 auto; padding-bottom: 3rem; }
.ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .ms-grid2 { grid-template-columns: 1fr; } }

/* do / avoid panels */
.ms-panel { background: var(--ucas-grad-card); border: var(--bd-card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 1.5rem 1.75rem; }
.ms-panel__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ms-panel__badge { width: 2.6rem; height: 2.6rem; border-radius: var(--r-circle); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ms-panel__title { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ucas-text-headline); }
.ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.ms-list li { display: flex; align-items: flex-start; gap: .65rem; font-weight: var(--fw-body); font-size: var(--fs-small); line-height: 1.6; color: var(--ucas-text); }
.ms-list li i { margin-top: .25rem; flex-shrink: 0; }

/* CTA band */
.ms-cta-band { background: var(--ucas-grad-brand); border-radius: var(--r-card); padding: 1.75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; box-shadow: var(--sh-card); }
@media (max-width: 700px) { .ms-cta-band { flex-direction: column; align-items: stretch; text-align: center; } }

/* quiz shared: progress bar + fields + nav row */
.ms-progress__bar { height: 8px; border-radius: 4px; background: rgba(11,102,158,.1); margin: .65rem 0 1rem; overflow: hidden; }
.ms-progress__bar span { display: block; height: 100%; border-radius: 4px; transition: width .4s var(--ease-standard); }
.ms-fields { display: flex; flex-direction: column; gap: 1.75rem; }
.ms-navrow { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; gap: .75rem; flex-wrap: wrap; }

.ms-field__q { margin: 0 0 .25rem; font-weight: var(--fw-bold); color: var(--ucas-text-headline); font-size: var(--fs-body-lg); }
.ms-field__hint { margin: 0 0 .85rem; color: var(--ucas-text-muted); font-weight: var(--fw-body); font-size: var(--fs-small-2); }

.ms-cardgrid { display: grid; gap: .75rem; }
.ms-optcard { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; cursor: pointer; padding: 1.1rem .75rem; border-radius: var(--r-button); border: 1.5px solid rgba(11,102,158,.14); background: #fff; font-family: var(--font-arabic); font-weight: var(--fw-body); color: var(--ucas-text); transition: var(--t-button); position: relative; }
.ms-optcard:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: rgba(53,184,224,.4); }
.ms-optcard__icon { font-size: 1.6rem; }
.ms-optcard__t { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.ms-optcard.is-sel { background: rgba(53,184,224,.06); }
.ms-optcard__tick { position: absolute; top: .5rem; inset-inline-start: .5rem; font-size: 1rem; }

.ms-radiowrap { display: flex; flex-direction: column; gap: .6rem; }
.ms-radio { display: flex; align-items: center; gap: .7rem; cursor: pointer; padding: .85rem 1.1rem; border-radius: var(--r-button); border: 1.5px solid rgba(11,102,158,.14); background: #fff; font-family: var(--font-arabic); font-weight: var(--fw-body); font-size: var(--fs-body); color: var(--ucas-text); transition: var(--t-button); text-align: start; width: 100%; }
.ms-radio:hover { border-color: rgba(53,184,224,.4); transform: translateY(-2px); box-shadow: var(--sh-pill); }
.ms-radio__dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid #005BAA; flex-shrink: 0; position: relative; }
.ms-radio__dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ucas-blue); transform: scale(0); transition: transform .2s var(--ease-bouncy); }
.ms-radio.is-checked { border-color: var(--ucas-cyan); background: rgba(53,184,224,.06); }
.ms-radio.is-checked .ms-radio__dot::after { transform: scale(1); }

.ms-checkwrap { display: flex; flex-wrap: wrap; gap: .6rem; }
.ms-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .6rem 1rem; border-radius: var(--r-button); border: 1.5px solid rgba(11,102,158,.16); background: #fff; font-family: var(--font-arabic); font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--ucas-text); transition: var(--t-button); }
.ms-check:hover { transform: translateY(-2px); box-shadow: var(--sh-pill); }

.ms-textarea { width: 100%; font-family: var(--font-arabic); font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--ucas-text); padding: 1rem 1.1rem; border-radius: var(--r-login); border: 1.5px solid rgba(11,102,158,.14); background: #fff; resize: vertical; box-sizing: border-box; transition: all .3s var(--ease-standard); }
.ms-textarea:focus { outline: none; border-color: var(--ucas-cyan); box-shadow: 0 0 0 4px rgba(53,184,224,.12); }

.ms-rating { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ms-rating__dot { width: 2.75rem; height: 2.75rem; border-radius: var(--r-button); border: 1.5px solid rgba(11,102,158,.18); background: #fff; color: var(--ucas-text-muted); font-family: var(--font-arabic); font-weight: var(--fw-bold); font-size: 1.05rem; cursor: pointer; transition: var(--t-button); }
.ms-rating__dot:hover { transform: translateY(-2px); box-shadow: var(--sh-pill); }
.ms-rating__lab { margin-inline-start: .5rem; font-weight: var(--fw-bold); color: var(--ucas-blue-major); font-size: var(--fs-small); }

/* video card — 16:9 box sized to fit the actual video, no crop/stretch */
.ms-video { position: relative; border-radius: var(--r-card); overflow: hidden; cursor: pointer; box-shadow: var(--sh-card); border: var(--bd-card); aspect-ratio: 16 / 9; height: auto; background: #000; }
.ms-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-standard), filter .3s; }
.ms-video:hover .ms-video__poster { transform: scale(1.05); }
.ms-video__play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ucas-cyan); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 28px rgba(11,102,158,.35); transition: transform .3s var(--ease-bouncy); z-index: 1; }
.ms-video:hover .ms-video__play { transform: scale(1.12); }
.ms-video__dur { position: absolute; bottom: .85rem; inset-inline-start: .85rem; background: rgba(33,37,41,.78); color: #fff; font-size: var(--fs-fine); font-weight: var(--fw-bold); padding: .3rem .7rem; border-radius: var(--r-sm); display: flex; align-items: center; gap: .4rem; z-index: 1; }
.ms-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* analyzing */
.ms-spinner { width: 4rem; height: 4rem; border-radius: 50%; border: 5px solid rgba(11,102,158,.12); border-top-color: var(--ucas-cyan); animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-dots3 { display: flex; gap: .5rem; }
.ms-dots3 span { width: .65rem; height: .65rem; border-radius: 50%; opacity: .35; animation: ms-bounce 1.2s infinite; }
.ms-dots3 span:nth-child(2) { animation-delay: .2s; }
.ms-dots3 span:nth-child(3) { animation-delay: .4s; }
@keyframes ms-bounce { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* done panel */
.ms-done { text-align: center; max-width: 520px; margin: 0 auto; background: var(--ucas-grad-card); border: var(--bd-card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 3rem 2rem; }
.ms-done__icon { font-size: 4rem; color: var(--ucas-green-bachelor); animation: ms-pop .5s var(--ease-bouncy); display: inline-block; }
@keyframes ms-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* results */
.ms-note { display: flex; align-items: flex-start; gap: .75rem; background: rgba(2,119,189,.06); border: 1px solid rgba(2,119,189,.18); border-radius: var(--r-button); padding: 1rem 1.25rem; margin-top: 1.75rem; font-weight: var(--fw-body); font-size: var(--fs-small-2); line-height: 1.7; color: var(--ucas-text-strong); }
.ms-note i { margin-top: .2rem; font-size: 1.1rem; flex-shrink: 0; }

.ms-recwrap { display: flex; flex-direction: column; gap: 1.25rem; }
.ms-reccard { display: grid; grid-template-columns: 200px 1fr; background: var(--ucas-grad-card); border: var(--bd-card); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; transition: var(--t-card); }
.ms-reccard:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.ms-reccard__side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; }
.ms-rank { font-size: var(--fs-card-title); font-weight: var(--fw-bold); }
.ms-reccard__body { padding: 1.5rem 1.75rem; }
.ms-reccard__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ms-reccard__ic { width: 2.8rem; height: 2.8rem; border-radius: var(--r-button); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.ms-reccard__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.1rem; }
@media (max-width: 700px) { .ms-reccard { grid-template-columns: 1fr; } .ms-reccard__cols { grid-template-columns: 1fr; } }
.ms-mini-title { margin: 0 0 .6rem; font-weight: var(--fw-bold); color: var(--ucas-navy-title); font-size: var(--fs-small); display: flex; align-items: center; gap: .5rem; }
.ms-pillrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-careers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ms-careers li { display: flex; gap: .5rem; font-weight: var(--fw-body); font-size: var(--fs-small-2); color: var(--ucas-text); }
.ms-actionbar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }

/* ============================================================================
   Quiz screen (student-friendly)
   ============================================================================ */
.v2-kicker { display: inline-block; font-weight: var(--fw-bold); color: var(--ucas-green-bachelor); font-size: var(--fs-fine); }
.v2-quizcard { background: var(--ucas-grad-card); border: var(--bd-card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 1.75rem; }
.v2-stepper { display: flex; align-items: flex-start; justify-content: center; max-width: 640px; margin: 0 auto 1rem; }
.v2-stepper__item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.v2-stepper__bubble { width: 2.6rem; height: 2.6rem; border-radius: var(--r-circle); border: 2px solid rgba(11,102,158,.18); background: #fff; color: var(--ucas-text-muted); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t-button); z-index: 1; }
.v2-stepper__item.is-active .v2-stepper__bubble { background: var(--ucas-grad-login-cta); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(53,184,224,.35); transform: scale(1.08); }
.v2-stepper__item.is-done .v2-stepper__bubble { background: var(--ucas-green-bachelor); color: #fff; border-color: transparent; }
.v2-stepper__lab { margin-top: .5rem; font-size: var(--fs-fine); font-weight: var(--fw-bold); color: var(--ucas-text-muted); text-align: center; }
.v2-stepper__item.is-active .v2-stepper__lab { color: var(--ucas-blue-major); }
.v2-stepper__line { position: absolute; top: 1.3rem; inset-inline-end: 50%; width: 100%; height: 2px; background: rgba(11,102,158,.14); z-index: 0; }
.v2-stepper__item.is-done .v2-stepper__line { background: var(--ucas-green-bachelor); }
@media (max-width: 600px) { .v2-stepper__lab { display: none; } }
.v2-stepcat { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: var(--bd-hairline); }
.v2-stepcat__ic { width: 3.2rem; height: 3.2rem; border-radius: var(--r-circle); background: var(--ucas-grad-login-cta); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(53,184,224,.3); }

/* results (student-friendly cards, unused by final flow but harmless) */
.v2-recgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (max-width: 820px) { .v2-recgrid { grid-template-columns: 1fr; } }