:root{--p700:#064e3b;--p600:#059669;--p500:#10b981;--p50:#ecfdf5;--ink:#111827;--muted:#6b7280;--warn:#f59e0b}    *{box-sizing:border-box; font-family:'Cairo', sans-serif;}    body{color:var(--ink);background:#f8fafc;margin:0;scroll-behavior:smooth;}    .ge-step{display:none !important;min-height:100vh;width:100%;}    .ge-step.ge-active{display:flex !important;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn 0.5s ease-out;}    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }    .ge-brand{background:linear-gradient(135deg,var(--p700),var(--p600));color:#fff;}    .ge-card{background:#fff;border:1px solid #e5e7eb;border-radius:1.5rem;padding:1.5rem;margin:0.5rem;box-shadow:0 10px 25px -5px rgba(0,0,0,0.1);}    @media (min-width: 768px) { .ge-card { border-radius:2.5rem; padding:2rem; margin:1rem; } }    .ge-kpi{display:inline-flex;gap:8px;background:var(--p50);color:var(--p700);border:1px solid var(--p500);padding:8px 16px;border-radius:1rem;font-weight:800;margin:4px;}    .ge-kpi-warn{background:#fffbeb;color:#92400e;border-color:#f59e0b;}    .ge-singlebar{height:20px;background:#e5e7eb;border-radius:999px;position:relative;overflow:hidden;margin:10px 0;}    .ge-barFill{height:100%;background:linear-gradient(90deg,#10b981,#059669);float:right;transition:width 1s ease-in-out;}    .ge-title{font-weight:900;color:var(--p700);}    .ge-section{border:1px solid #e5e7eb;background:#fff;border-radius:1.5rem;padding:1.5rem;margin:1rem 0;}    @media (min-width: 768px) { .ge-section { border-radius:2.5rem; padding:2rem; margin:2rem 0; } }    .ge-verbal-p{white-space:pre-wrap;line-height:1.8;background:#fff;border:1px solid #e5e7eb;border-radius:1.5rem;padding:1.5rem;margin:1rem 0;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}    .ge-btn-primary{background:var(--p600);color:#fff;padding:1rem 2rem;border-radius:1.5rem;font-weight:900;transition:all 0.3s;box-shadow:0 10px 15px -3px rgba(5,150,105,0.3);border:none;cursor:pointer;}    .ge-btn-primary:hover{background:var(--p700);transform:translateY(-2px);}    .ge-btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;}    .ge-btn-secondary{background:#fff;color:var(--p700);padding:1rem 2rem;border-radius:1.5rem;font-weight:900;border:2px solid var(--p600);cursor:pointer;}    .ge-roadmap-card b {        display: block;        margin-bottom: 8px;        line-height: 1.4;    }    .ge-roadmap-card p {        margin-top: 4px;        line-height: 1.6;    }    .ge-tier-frame{border:2px solid; border-radius:1.25rem; padding:1.25rem; margin-bottom:1.5rem;}    .ge-tier-frame-high{border-color:#01624F; background:#eafaf5;}    .ge-tier-frame-mid{border-color:#cda92f; background:#fdf8ea;}    .ge-tier-frame-low{border-color:#ff7101; background:#fff3ea;}    .ge-tier-header-box{display:inline-block; padding:8px 22px; border-radius:0.75rem; color:#fff; font-weight:900; margin-bottom:1.25rem; font-size:1rem;}    .ge-tier-header-high{background:#01624F;}    .ge-tier-header-mid{background:#cda92f;}    .ge-tier-header-low{background:#ff7101;}    .ge-tier-text-high{color:#01624F;}    .ge-tier-text-mid{color:#946c1a;}    .ge-tier-text-low{color:#c85a00;}    .ge-barFill-high{background:linear-gradient(90deg,#236A58,#01624F);}    .ge-barFill-mid{background:linear-gradient(90deg,#e0bb4e,#cda92f);}    .ge-barFill-low{background:linear-gradient(90deg,#ff9a45,#ff7101);}    .ge-tier-frame .ge-verbal-p{background:#fff;}    .ge-opt-row{display:flex;flex-direction:column;gap:14px;padding:20px 24px;border:2px solid #e5e7eb;border-radius:1rem;margin-bottom:10px;background:#fafafa;transition:border-color .2s;}    .ge-opt-row.ge-has-value{border-color:var(--p500);background:#fff;}    .ge-squares{display:flex;flex-wrap:nowrap;gap:8px;width:100%;}    .ge-sq-btn{flex:1 1 0;width:auto;height:54px;min-width:0;border:2px solid #d1d5db;border-radius:0.75rem;background:#fff;font-weight:900;font-size:1.25rem;color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}    .ge-sq-btn:hover{border-color:var(--p500);}    .ge-sq-btn.ge-selected{color:#fff;transform:scale(1.05);}    .ge-sq-btn.ge-selected-low{background:#ff7101;border-color:#ff7101;}    .ge-sq-btn.ge-selected-mid{background:#cda92f;border-color:#cda92f;}    .ge-sq-btn.ge-selected-high{background:#01624F;border-color:#01624F;}    .ge-opt-locked{opacity:0.45;}    .ge-opt-locked .ge-opt-text{color:#9ca3af;}    .ge-sq-btn.ge-sq-locked{cursor:not-allowed;background:#f3f4f6;color:#9ca3af;}    .ge-sq-btn.ge-sq-locked:hover{border-color:#d1d5db;}    .ge-opt-text{flex:1;font-size:1.4rem;line-height:1.7;font-weight:600;}    .ge-opt-num{color:var(--p600);}    /* User feedback (confirmed in scope, same fixes already shipped in the
       career-interest and personality plugins): this plugin had no @page
       rule at all -- Chrome falls back to its own larger default print
       margins, leaving less usable height per page and making a
       near-empty trailing page more likely. */
    @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 rules below only ever hid this
         plugin's own welcome/name/instr/quiz steps. 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 the theme/page
         builder the shortcode is dropped into. Kept alongside (not
         replacing) the original rules below it, which are unchanged. */
      body * { visibility:hidden !important; }
      #ge-team-role-app, #ge-team-role-app * { visibility:visible !important; }
      body > *:not(#ge-team-role-app):not(:has(#ge-team-role-app)) { display:none !important; }

      .ge-btn-primary, .ge-btn-secondary, #welcome, #name, #instr, #quiz { display:none !important; }
      #result { display:block !important; min-height:auto !important; height:auto !important; width:auto !important; }
      #result .max-w-5xl { max-width:100% !important; margin:0 !important; padding:0 !important; }
      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; transition:none !important; animation:none !important; }
      .ge-card, .ge-section, .ge-verbal-p, .ge-roadmap-card, .ge-tier-frame { break-inside: avoid; page-break-inside: avoid; }
      html, body { height:auto !important; min-height:auto !important; overflow:visible !important; background:#fff !important; }

      /* User feedback (confirmed in scope): the logo repeats on every
         printed page (see .ge-print-logo below). The button row's own
         padding is removed too -- it was left in the DOM even though the
         buttons inside it are hidden for print, occasionally pushing a
         nearly-empty trailing page onto the end of the PDF. */
      .ge-actions-row { display:none !important; }
    }

    /* 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.
       !important on the hide rule matters: some WordPress themes/page
       builders ship a global "img { display:block !important; }" reset,
       and !important always wins over a non-!important rule regardless of
       selector specificity. */
    .ge-print-logo { display:none !important; }
    @media print {
      .ge-print-logo { display:block !important; position:fixed; top:6mm; left:6mm; width:30px; height:30px; object-fit:contain; z-index:9999; }
    }

    .ge-app-logo-home{position:absolute;top:16px;right:16px;width:56px;height:56px;object-fit:contain;z-index:5;}

    @media (min-width:768px){ .ge-app-logo-home{width:72px;height:72px;top:24px;right:24px;} }

    #welcome{position:relative;}

    .ge-app-logo-quiz{width:36px;height:36px;object-fit:contain;}

    @media (min-width:768px){ .ge-app-logo-quiz{width:44px;height:44px;} }

    .ge-ci-note{position:relative;}

    .ge-ci-note p{font-style:normal;}

    /* Responsiveness (confirmed in scope): on a narrow phone a row can
       have up to 12 rating squares (0-11) -- shrink them a bit so a row
       wraps to fewer, more comfortable lines instead of many tiny ones. */
    @media (max-width:480px) {
      .ge-squares { gap:4px; }
    }

    /* WordPress integration (confirmed in scope): the course's own
       featured image, shown above the program name when a Tutor LMS
       course is linked (image is simply absent otherwise -- no layout
       change to unlinked cards). */
    .ge-roadmap-card-img {
      width: 100%;
      height: 170px;
      object-fit: contain;
      background: #f3f4f6;
      border-radius: 0.75rem;
      margin-bottom: 12px;
    }

    /* User feedback (confirmed in scope, matching the other two
       assessment plugins' pattern): each result section is locked on its
       own for a guest, instead of one overlay shared across several. */
    .ge-locked-section { position:relative; margin:1rem 0; }
    .ge-locked-content { filter:blur(7px); user-select:none; pointer-events:none; }
    .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,.65); border-radius:1.5rem; z-index:5; }
    .ge-lock-icon { font-size:1.8rem; line-height:1; }
    .ge-lock-overlay p { margin:0; font-weight:800; color:var(--ink); max-width:22rem; }
    .ge-subscribe-btn { display:inline-flex; align-items:center; justify-content:center; background:#ff7101; color:#fff; font-weight:900; border-radius:1.25rem; padding:.85rem 1.6rem; text-decoration:none; transition:.2s; }
    .ge-subscribe-btn:hover { background:#e0630a; transform:translateY(-1px); }
    .ge-btn-primary.ge-btn-disabled,
    .ge-btn-primary.ge-btn-disabled:hover { opacity:.4; cursor:not-allowed; transform:none; }

    /* "Previous result" popup feature (confirmed in scope): shown
       immediately on page load for a logged-in user who already has a
       saved result. position:absolute + #ge-team-role-app's own
       position:relative scopes it to just this widget's own area
       (learned from an earlier plugin's bug: position:fixed covers the
       whole page, including any content a theme places above the
       shortcode). */
    #ge-team-role-app { position: relative; }
    .ge-modal-overlay { position:absolute; inset:0; min-height:100%; z-index:9999; background:rgba(17,24,39,.55); display:flex; align-items:center; justify-content:center; padding:1rem; }
    .ge-modal-box { background:#fff; 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); }

    /* Guests can print too: the locked sections come out BLURRED (the lock
       overlay and the on-screen subscribe buttons are hidden) and a single big
       "اشترك الآن" button closes the printed report (.ge-print-subscribe). */
    .ge-print-subscribe { display:none; }
    @media print {
      .ge-lock-overlay, .ge-subscribe-btn, .ge-modal-overlay { display:none !important; }
      .ge-locked-content { filter:blur(7px) !important; -webkit-filter:blur(7px) !important; }
      .ge-print-subscribe { display:block !important; text-align:center; padding:1rem 0 0; }
      .ge-print-subscribe p { margin:0 0 .6rem; font-weight:800; color:#111827; }
      .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; }
      .ge-guest-email { display:none !important; }
    }

    /* Guest: "send me a copy of my report" box next to print / subscribe. */
    .ge-guest-email { max-width:34rem; margin:0 auto 2.5rem; padding:1.1rem 1rem; border:2px dashed #10b981; border-radius:1.25rem; background:#ecfdf5; text-align:center; position:relative; }
    .ge-guest-email-title { margin:0 0 .75rem; font-weight:900; color:#064e3b; font-size:1.1rem; }
    .ge-guest-email-row { display:flex; gap:.6rem; align-items:stretch; }
    .ge-guest-email-row input[type=email] { flex:1; min-width:0; padding:.85rem 1rem; border:2px solid #a7f3d0; border-radius:1rem; font-size:16px; background:#fff; text-align:left; outline:none; }
    .ge-guest-email-row input[type=email]:focus { border-color:#059669; }
    .ge-guest-email-row .ge-btn-primary { padding:.85rem 1.4rem; white-space:nowrap; }
    .ge-guest-email small { display:block; margin-top:.7rem; color:#4b5563; line-height:1.7; }

    /* ---------------------------------------------------------------
       Mobile layout (phones, <= 767px). The test sat inside the theme's
       narrow page container (empty side bands), the logo floated over the
       title, each step was forced to a full screen height with big empty
       gaps, and the 0-11 rating squares were tiny. 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-team-role-app {
        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-team-role-app .ge-step { min-height:0; }
      #ge-team-role-app .ge-step.ge-active { justify-content:flex-start; }
      #ge-team-role-app #name.ge-step, #ge-team-role-app #instr.ge-step, #ge-team-role-app #quiz.ge-step { padding:.75rem .5rem 1.5rem; }
      #ge-team-role-app #welcome.ge-step.ge-active { min-height:100vh; padding-bottom:2rem; }

      /* Logo: in the flow, centred, smaller -- no more overlap with the title. */
      #ge-team-role-app .ge-app-logo-home { position:static; display:block; margin:1.25rem auto .25rem; width:56px; height:56px; }
      #ge-team-role-app #welcome > .max-w-4xl { padding:1rem 1rem 1.5rem; }
      #ge-team-role-app #welcome h1 { font-size:2.1rem; line-height:1.25; }
      #ge-team-role-app #start-btn { width:100%; font-size:1.2rem; padding:1rem 1.25rem; }

      /* Cards: full width, tighter padding. */
      #ge-team-role-app .ge-card { margin:0; padding:1rem; width:100%; border-radius:1.25rem; }
      #ge-team-role-app #quiz .ge-card { padding:1rem .75rem 1.25rem; }
      #ge-team-role-app #progress-bar { transition:none; }
      #ge-team-role-app #qtext { font-size:1.15rem; line-height:1.7; margin-bottom:1rem; }
      #ge-team-role-app .ge-opt-row { padding:.8rem .7rem; }
      #ge-team-role-app .ge-opt-text { font-size:1.2rem; }

      /* Rating squares (0-11): big, tappable, spread across the card in rows of 6. */
      #ge-team-role-app .ge-squares { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; flex-wrap:wrap; }
      #ge-team-role-app .ge-sq-btn { width:100%; min-width:0; height:48px; font-size:1.15rem; border-radius:.7rem; }

      /* Prev / Next: equal, comfortable buttons. */
      #ge-team-role-app #prev, #ge-team-role-app #next { min-height:50px; padding:.75rem 1rem; font-size:1.1rem; }

      /* Results: tighter spacing, full-width actions. */
      #ge-team-role-app #result .max-w-5xl { padding:.5rem; }
      #ge-team-role-app #result h2 { font-size:1.75rem; line-height:1.35; }
      #ge-team-role-app .ge-section { padding:1rem; margin:.75rem 0; border-radius:1.25rem; }
      #ge-team-role-app .ge-actions-row .ge-btn-primary,
      #ge-team-role-app .ge-actions-row .ge-subscribe-btn { width:100%; min-height:50px; }

      /* Guest email box: stacked, full width. */
      #ge-team-role-app .ge-guest-email { margin:0 .25rem 1.5rem; }
      #ge-team-role-app .ge-guest-email-row { flex-direction:column; }
      #ge-team-role-app .ge-guest-email-row .ge-btn-primary { width:100%; min-height:50px; }
    }