/* Green E-Learning approved palette only: #01624F, #236A58, #cda92f, #ff7101, #1A1A1A, #4A4A4A, #888888, #E0E0E0, #F2F2F2, #FAFAFA */
    .ge-career-interest {
      --primary-green:#01624F;
      --secondary-green:#236A58;
      --accent-gold:#cda92f;
      --brand-blue:#1A1A1A;
      --rating-orange:#ff7101;
      --ink:#1A1A1A;
      --text-gray:#4A4A4A;
      --muted:#888888;
      --line:#E0E0E0;
      --soft:#F2F2F2;
      --canvas:#FAFAFA;
      --success-soft:#e7f4f0;
      --orange-soft:#fff2e8;
      --gold-soft:#f7f0d9;
      --blue-soft:#F2F2F2;
      /* merged from the original `body` rule below the fold — the wrapper
         takes over body's cosmetic role so the real WordPress <body> is untouched */
      /* BUG FIX (confirmed in scope): position:relative so the modal
         overlay below can be scoped to just this widget's own area (see
         .ge-modal-overlay) -- without it, a fixed overlay covers the
         entire page the instant it loads, including any marketing content
         a page places above the shortcode, which is not what was wanted. */
      position:relative;
      margin:0;
      background:var(--canvas);
      color:var(--ink);
    }
    .ge-career-interest, .ge-career-interest * { box-sizing: border-box; font-family: 'Cairo', sans-serif; }
    /* FORCED CHANGE: kept global (not wrapper-scoped) because it must apply to
       <html>/<body> to affect window.scrollTo() animation, exactly as the original
       relied on. Purely behavioral (no color/layout/spacing), so it cannot bleed
       into the theme visually. See conversion report, friction: smooth-scroll. */
    html { scroll-behavior: smooth; }
    .ge-career-interest .step { display:none; min-height:100vh; width:100%; padding:24px; }
    /* Client feedback (confirmed in scope): the result screen's content
       block (the widest one, max-w-6xl/1152px) was sitting flush against
       one side on a wide screen instead of centered, dumping all the
       slack space on the other -- the .step.active flex centering wasn't
       reliably centering it. Forces true centering directly on these
       step-content wrappers regardless of what's overriding the flex
       alignment. */
    .ge-career-interest .step > .max-w-2xl,
    .ge-career-interest .step > .max-w-4xl,
    .ge-career-interest .step > .max-w-6xl { margin-left:auto !important; margin-right:auto !important; }
    .ge-career-interest .step.active { display:flex; flex-direction:column; align-items:center; justify-content:center; animation:fade .35s ease-out; }
    @keyframes fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
    .ge-career-interest .brand { background:linear-gradient(135deg,var(--primary-green),var(--secondary-green)); color:white; }
    .ge-career-interest .card { background:white; border:1px solid var(--line); border-radius:2rem; box-shadow:0 18px 46px -28px rgba(26,26,26,.18); }
    .ge-career-interest .soft-card { background:white; border:1px solid var(--line); border-radius:1.5rem; box-shadow:0 10px 28px -22px rgba(26,26,26,.15); }
    .ge-career-interest .title { color:var(--primary-green); font-weight:900; }
    .ge-career-interest .subtitle-strong { color:var(--ink); font-weight:800; }
    .ge-career-interest .btn-primary { background:var(--primary-green); color:white; border:none; border-radius:1.25rem; padding:1rem 1.5rem; font-weight:900; cursor:pointer; transition:.2s; }
    .ge-career-interest .btn-primary:hover { background:var(--secondary-green); transform:translateY(-1px); }
    .ge-career-interest .btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; }
    .ge-career-interest .btn-secondary { background:white; color:var(--primary-green); border:2px solid var(--primary-green); border-radius:1.25rem; padding:1rem 1.5rem; font-weight:900; cursor:pointer; }
    .ge-career-interest .btn-secondary:hover { background:var(--success-soft); }
    .ge-career-interest .chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--success-soft); color:var(--primary-green); border:1px solid #b9d8cf; padding:.45rem .8rem; border-radius:999px; font-weight:800; }
    .ge-career-interest .muted { color:var(--muted); }
    .ge-career-interest .answer-select { width:100%; border:1px solid var(--line); border-radius:1rem; padding:.85rem 1rem; font-weight:800; outline:none; background:white; color:var(--ink); }
    .ge-career-interest .answer-select:focus { border-color:var(--primary-green); box-shadow:0 0 0 4px rgba(1,98,79,.10); }
    .ge-career-interest .bar-wrap { height:18px; background:var(--soft); border-radius:999px; overflow:hidden; direction:ltr; border:1px solid var(--line); }
    .ge-career-interest .bar { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--rating-orange),var(--accent-gold),var(--primary-green)); transition:width .8s ease; }
    .ge-career-interest .preline { white-space:pre-line; line-height:1.9; }
    /* Client feedback (confirmed in scope): the report's dark/black text
       (interests, environment, strengths, challenges) needed a bigger,
       bolder font. Targeted by ID -- not the broader .preline class --
       so it doesn't fight the intro/description paragraphs' own explicit
       Tailwind size (text-lg) and color (text-gray-700) utility classes. */
    .ge-career-interest #interestsText,
    .ge-career-interest #environmentText,
    .ge-career-interest #strengthsText,
    .ge-career-interest #challengesText { font-size:1.1rem; font-weight:600; }
    .ge-career-interest .print-only { display:none; }
    /* Client feedback (confirmed in scope): choice text was too small on
       both the legend chips (top) and the in-card rating buttons. */
    .ge-career-interest .legend-chip { padding:.55rem .85rem; border-radius:999px; border:1px solid var(--line); font-weight:800; font-size:.95rem; display:inline-flex; align-items:center; gap:.45rem; }
    .ge-career-interest .legend-chip b { width:1.65rem; height:1.65rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; }
    .ge-career-interest .legend-chip.score-1 { background:var(--orange-soft); color:var(--rating-orange); }
    .ge-career-interest .legend-chip.score-1 b { background:var(--rating-orange); color:white; }
    .ge-career-interest .legend-chip.score-2 { background:var(--soft); color:var(--ink); }
    .ge-career-interest .legend-chip.score-2 b { background:var(--text-gray); color:white; }
    .ge-career-interest .legend-chip.score-3 { background:var(--gold-soft); color:#7a6212; }
    .ge-career-interest .legend-chip.score-3 b { background:var(--accent-gold); color:white; }
    .ge-career-interest .legend-chip.score-4 { background:#e7f4f0; color:var(--secondary-green); }
    .ge-career-interest .legend-chip.score-4 b { background:var(--secondary-green); color:white; }
    .ge-career-interest .legend-chip.score-5 { background:#ddf0ea; color:var(--primary-green); }
    .ge-career-interest .legend-chip.score-5 b { background:var(--primary-green); color:white; }
    .ge-career-interest .question-list { display:flex; flex-direction:column; gap:14px; }
    .ge-career-interest .question-row { background:white; border:1px solid var(--line); border-radius:1.25rem; padding:1.25rem; }
    /* Layout change (confirmed in scope): question stays stacked (text on
       top, rating row underneath, full width) on every screen size,
       including wide desktop -- the previous 980px breakpoint that split
       this into a text column + a fixed 420px rating column is removed. */
    .ge-career-interest .question-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:center; }
    .ge-career-interest .question-text { font-size:1.08rem; font-weight:800; line-height:1.9; color:var(--ink); }
    .ge-career-interest .question-meta { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-bottom:.5rem; }
    .ge-career-interest .type-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; font-weight:800; font-size:.9rem; background:var(--soft); color:var(--text-gray); border:1px solid var(--line); }
    .ge-career-interest .question-no { color:var(--muted); font-size:.9rem; font-weight:800; }
    .ge-career-interest .rating-panel { background:var(--canvas); border:1px solid var(--line); border-radius:1rem; padding:1rem; width:100%; }
    .ge-career-interest .rating-title { font-weight:800; color:var(--text-gray); margin-bottom:.6rem; display:block; }
    /* Layout change (confirmed in scope): all 5 rating buttons sit in a
       single fixed row (grid, 5 equal columns) at every width, full-bleed
       across the (now always full-width) rating panel -- no more 3+2 wrap
       on narrow panels, and no separate desktop sizing. min-height keeps
       every button the same height whether its label wraps to one line or
       two, so the row doesn't look ragged. */
    .ge-career-interest .rating-group { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.5rem; }
    .ge-career-interest .rating-btn { min-width:0; min-height:4.6rem; padding:.75rem .4rem; border-radius:.85rem; border:1px solid var(--line); background:white; color:var(--text-gray); font-weight:900; cursor:pointer; transition:.2s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; }
    .ge-career-interest .rating-btn .num { font-size:1.25rem; line-height:1; }
    .ge-career-interest .rating-btn .label { font-size:.8rem; font-weight:700; line-height:1.2; }
    @media (max-width:640px) {
      .ge-career-interest .question-row { padding:1rem .7rem; }
      .ge-career-interest .rating-panel { padding:.65rem .45rem; }
      /* User feedback (confirmed in scope): 5 buttons squeezed into one
         row was too cramped on mobile no matter how far the font shrank
         -- 3 columns wraps 5 buttons into 2 rows (3, then 2) instead,
         same as the plugin's original mobile layout, so each button gets
         real breathing room and the font can go back up. Desktop keeps
         the single row of 5 untouched (see the base rule above). */
      .ge-career-interest .rating-group { grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem; }
      .ge-career-interest .rating-btn { min-height:3.6rem; padding:.6rem .3rem; border-radius:.7rem; }
      .ge-career-interest .rating-btn .num { font-size:1.1rem; }
      .ge-career-interest .rating-btn .label { font-size:.75rem; line-height:1.2; }
    }
    /* Client feedback (confirmed in scope): reverted -- the horizontal
       scroll bar tried before wasn't wanted; back to stacking/wrapping
       like the original, just with the legend chips sized to fit
       comfortably on a phone screen instead of overflowing. */
    /* User feedback (confirmed in scope): each legend chip is now a
       full-width bar on mobile (stacked, edge-to-edge) instead of a
       center-shrunk pill with wasted space around it -- shorter padding
       per row too, so the whole legend takes less total height, leaving
       more of the screen for the actual question/answer card below. */
    @media (max-width:640px) {
      .ge-career-interest .ge-scale-guide { flex-direction:column; gap:.4rem; }
      .ge-career-interest .ge-scale-guide .legend-chip { width:100%; padding:.4rem .8rem; font-size:.82rem; gap:.4rem; }
      .ge-career-interest .ge-scale-guide .legend-chip b { width:1.4rem; height:1.4rem; font-size:.8rem; }
    }
    .ge-career-interest .rating-btn:hover { transform:translateY(-1px); border-color:var(--secondary-green); }
    .ge-career-interest .rating-btn.selected { color:white; border-color:transparent; box-shadow:0 12px 20px -16px rgba(0,0,0,.4); }
    .ge-career-interest .rating-btn.selected .label { color:rgba(255,255,255,.92); }
    .ge-career-interest .rating-btn.selected.score-1 { background:var(--rating-orange); }
    .ge-career-interest .rating-btn.selected.score-2 { background:var(--text-gray); }
    .ge-career-interest .rating-btn.selected.score-3 { background:var(--accent-gold); color:#1A1A1A; }
    .ge-career-interest .rating-btn.selected.score-3 .label { color:#3f3410; }
    .ge-career-interest .rating-btn.selected.score-4 { background:var(--secondary-green); }
    .ge-career-interest .rating-btn.selected.score-5 { background:var(--primary-green); }
    .ge-career-interest .rating-btn:disabled { opacity:.32; cursor:not-allowed; transform:none; background:#f8f8f8; }
    .ge-career-interest .rating-btn.selected:disabled { opacity:1; }
    .ge-career-interest .selected-hint { margin-top:.6rem; font-size:.9rem; font-weight:800; color:var(--primary-green); }
    .ge-career-interest .mini-marketing-card { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15); border-radius:1.5rem; padding:1.25rem; backdrop-filter:blur(8px); text-align:right; }
    .ge-career-interest .mini-marketing-card strong { display:block; font-size:1.1rem; margin-bottom:.35rem; }
    .ge-career-interest .section-badge { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:999px; background:rgba(255,255,255,.12); color:white; border:1px solid rgba(255,255,255,.18); font-weight:800; }
    .ge-career-interest .brand-name { letter-spacing:.02em; }
    /* The logo used to be position:fixed in the viewport corner, which put a second logo on top of the theme's header. It now sits inside the welcome screen, centred above the title. */
    .ge-career-interest .brand-logo-fixed { position:static; display:block; margin:1.5rem auto .5rem; width:60px; height:60px; object-fit:contain; }
    .ge-career-interest .brand-logo-inline { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
    @media (max-width:640px) { .ge-career-interest .brand-logo-fixed { width:48px; height:48px; } }
    @page { size: A4; margin: 12mm; }
    @media print {
      /* BUG FIX (confirmed in scope): the printed report was including the
         WordPress theme's own header/nav/footer (everything outside this
         plugin's own wrapper), since the old print rules only ever hid
         this plugin's own welcome/name/instr/quiz steps -- nothing told
         the browser to hide content OUTSIDE .ge-career-interest at all.
         This hides literally everything on the page, then re-shows only
         this widget's own wrapper and its descendants -- a standard
         "print only this element" technique that works regardless of
         what theme/page builder the shortcode is dropped into, since it
         never needs to know that theme's own header/footer class names. */
      body * { visibility:hidden !important; }
      .ge-career-interest, .ge-career-interest * { visibility:visible !important; }
      .ge-career-interest { position:absolute !important; inset:0 auto auto 0; width:100%; }

      .ge-career-interest #welcome, .ge-career-interest #nameStep, .ge-career-interest #instr, .ge-career-interest #quiz, .ge-career-interest .no-print { display:none !important; }
      body > *:not(.ge-career-interest):not(:has(.ge-career-interest)) { display:none !important; }
      .ge-career-interest #result { display:block !important; padding:0; min-height:auto; justify-content:flex-start; }
      .ge-career-interest { background:white; }
      .ge-career-interest .card, .ge-career-interest .soft-card { box-shadow:none; border:1px solid #ddd; break-inside:avoid; page-break-inside:avoid; }
      .ge-career-interest .print-only { display:block; }
      /* BUG FIX (confirmed in scope): a heading could previously be stranded
         alone on a page while its content flowed to the next one. Keep every
         heading glued to what follows it. No other print rule changed. */
      .ge-career-interest h2, .ge-career-interest h3 { break-after:avoid; page-break-after:avoid; }
    }

    /* User feedback (confirmed in scope): the logo should repeat on every
       printed page, not just the first. Hidden on screen; position:fixed
       makes Chrome's print engine repeat it on every page of the PDF. This
       is a separate element from .brand-logo-fixed (the on-screen floating
       logo, hidden during print below) so the two never conflict. */
    .ge-career-interest .ge-print-logo { display:none; }
    @media print {
      .ge-career-interest .brand-logo-fixed { display:none !important; }
      .ge-career-interest .ge-print-logo { display:block !important; position:fixed; top:6mm; left:6mm; width:30px; height:30px; object-fit:contain; z-index:9999; }
    }

    /* Access-gating feature (confirmed in scope): guest (logged-out) view of
       the result -- strengths / challenges / jobs are blurred behind a lock
       overlay, and the PDF button is disabled with a "subscribe" CTA next
       to it. Applied server-side (see templates/widget.php) so a guest never
       receives the unlocked text in the page source, not just visually hidden. */
    .ge-career-interest .ge-locked { position:relative; overflow:hidden; }
    .ge-career-interest .ge-locked-content { filter:blur(7px); user-select:none; pointer-events:none; }
    .ge-career-interest .ge-lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:1rem; background:rgba(255,255,255,.62); backdrop-filter:blur(1px); border-radius:inherit; z-index:5; }
    .ge-career-interest .ge-lock-icon { font-size:1.8rem; line-height:1; }
    .ge-career-interest .ge-lock-overlay p { margin:0; font-weight:800; color:var(--ink); max-width:22rem; }
    .ge-career-interest .ge-subscribe-btn { display:inline-flex; align-items:center; justify-content:center; background:var(--rating-orange); color:white; font-weight:900; border-radius:1.25rem; padding:.7rem 1.4rem; text-decoration:none; transition:.2s; }
    .ge-career-interest .ge-subscribe-btn:hover { background:var(--accent-gold); transform:translateY(-1px); }
    .ge-career-interest .ge-subscribe-btn-inline { padding:1rem 1.5rem; border-radius:1.25rem; }
    .ge-career-interest .btn-primary.ge-btn-disabled,
    .ge-career-interest .btn-primary.ge-btn-disabled:hover { opacity:.45; cursor:not-allowed; background:var(--primary-green); transform:none; }
    /* Guests can print too: the locked sections are HIDDEN in print (never printed,
       blurred or not) and a single big
       "اشترك الآن" button closes the printed report (.ge-print-subscribe). */
    .ge-career-interest .ge-print-subscribe { display:none; }
    @media print {
      .ge-career-interest .ge-lock-overlay, .ge-career-interest .ge-subscribe-btn { display:none !important; }
      .ge-career-interest .ge-locked { display:none !important; }
      .ge-career-interest .ge-print-subscribe { display:block !important; text-align:center; padding:1rem 0 0; }
      .ge-career-interest .ge-print-subscribe p { margin:0 0 .6rem; font-weight:800; color:#1A1A1A; }
      .ge-career-interest .ge-print-subscribe a { display:inline-block !important; background:#ff7101; color:#fff !important; font-weight:900; border-radius:1.25rem; padding:.85rem 2.2rem; text-decoration:none; font-size:1.15rem; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    }

    /* Guest: "send me a copy of my report" box under the print / subscribe buttons. */
    .ge-career-interest .ge-guest-email { max-width:34rem; margin:0 auto 2.5rem; padding:1.1rem 1rem; border:2px dashed var(--secondary-green); border-radius:1.25rem; background:var(--success-soft); text-align:center; position:relative; }
    .ge-career-interest .ge-guest-email-title { margin:0 0 .75rem; font-weight:900; color:var(--primary-green); font-size:1.1rem; }
    .ge-career-interest .ge-guest-email-row { display:flex; gap:.6rem; align-items:stretch; }
    .ge-career-interest .ge-guest-email-row input[type=email] { flex:1; min-width:0; padding:.85rem 1rem; border:2px solid #b9d8cf; border-radius:1rem; font-size:16px; background:#fff; text-align:left; outline:none; }
    .ge-career-interest .ge-guest-email-row input[type=email]:focus { border-color:var(--primary-green); }
    .ge-career-interest .ge-guest-email-row .btn-primary { padding:.85rem 1.4rem; white-space:nowrap; }
    .ge-career-interest .ge-guest-email small { display:block; margin-top:.7rem; color:var(--text-gray); line-height:1.7; }
    @media print { .ge-career-interest .ge-guest-email { display:none !important; } }

    /* ---------------------------------------------------------------
       Mobile layout (phones, <= 767px). The test sat inside the theme's
       narrow page container (empty side bands), the logo floated over the
       title, and every step was forced to a full screen height with big
       empty gaps. Screen-only and small-screen-only: desktop and print
       are untouched.
       --------------------------------------------------------------- */
    @media screen and (max-width:767px) {
      /* Use the full phone width (break out of the theme's content padding). */
      .ge-career-interest {
        width:auto; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
        overflow-x:hidden;
      }
      /* Steps hug their content instead of a full-height, vertically centred screen. */
      .ge-career-interest .step { min-height:0; padding:.75rem .5rem 1.5rem; }
      .ge-career-interest .step.active { justify-content:flex-start; }
      .ge-career-interest #welcome.step.active { min-height:100vh; padding-bottom:2rem; }

      /* Logo: in the flow, centred, smaller -- no more overlap with the title. */
      .ge-career-interest .brand-logo-fixed { position:static; display:block; margin:1.25rem auto .25rem; width:56px; height:56px; top:auto; right:auto; }
      .ge-career-interest #welcome > .max-w-6xl { padding:1rem 1rem 1.5rem; }
      .ge-career-interest #welcome h1 { font-size:2.1rem; line-height:1.25; }
      .ge-career-interest #welcome button[onclick*="nameStep"] { width:100%; font-size:1.2rem; padding:1rem 1.25rem; }

      /* Cards: full width, tighter padding. */
      .ge-career-interest .step > .card { width:100%; padding:1.25rem 1rem; border-radius:1.25rem; }
      .ge-career-interest #quiz .card { padding:1rem .75rem 1.25rem; }
      .ge-career-interest #quiz .bar { transition:none; }
      .ge-career-interest #result .card, .ge-career-interest #result .soft-card { padding:1.1rem 1rem; }
      .ge-career-interest #result h2 { font-size:1.75rem; line-height:1.35; }

      /* Prev / Next: equal, comfortable buttons. */
      .ge-career-interest #prevBtn, .ge-career-interest #nextBtn { flex:1; min-height:50px; padding:.75rem 1rem; font-size:1.1rem; }
      .ge-career-interest .question-text { font-size:1.05rem; line-height:1.8; }

      /* Result actions + guest email box: stacked, full width, easy to tap. */
      .ge-career-interest #result .btn-primary,
      .ge-career-interest #result .btn-secondary,
      .ge-career-interest #result .ge-subscribe-btn-inline { width:100%; min-height:50px; }
      .ge-career-interest .ge-guest-email { margin:0 .25rem 1.5rem; }
      .ge-career-interest .ge-guest-email-row { flex-direction:column; }
      .ge-career-interest .ge-guest-email-row .btn-primary { width:100%; min-height:50px; }
    }

    /* "Previous result" popup feature (confirmed in scope): shown
       immediately on page load for a logged-in user who already has a
       saved result -- full-viewport overlay, dismissed by either button.
       BUG FIX: was position:fixed (covers the whole browser viewport
       regardless of where the shortcode sits on the page), which meant it
       popped up over any marketing content a page placed above the
       widget too. absolute + .ge-career-interest's own position:relative
       scopes it to just this widget's area instead. */
    .ge-career-interest .ge-modal-overlay { position:absolute; inset:0; min-height:100%; z-index:9999; background:rgba(26,26,26,.55); display:flex; align-items:center; justify-content:center; padding:1rem; }
    .ge-career-interest #geStartGuestModal.ge-modal-overlay { position:fixed; }
    .ge-career-interest .ge-modal-box { background:white; border-radius:1.5rem; padding:2rem; max-width:26rem; width:100%; text-align:center; box-shadow:0 20px 50px -20px rgba(0,0,0,.35); }
    @media print {
      .ge-career-interest .ge-modal-overlay { display:none !important; }
    }