/* ── Greene Learning Personality Quiz — Lightweight CSS ── */
:root {
  --p700:#064e3b; --p600:#059669; --p500:#10b981;
  --p50:#ecfdf5;  --p100:#d1fae5; --warn:#f59e0b;
  --ink:#111827;  --muted:#6b7280; --border:#e5e7eb;
  --bg:#f8fafc;   --white:#ffffff;
  --radius-sm:12px; --radius-md:20px; --radius-lg:32px;
  --font:'Cairo',Tahoma,sans-serif;
  --shadow:0 2px 16px rgba(0,0,0,.07);
  --shadow-md:0 8px 32px rgba(0,0,0,.12);
}

#glpq-app * { box-sizing:border-box; font-family:var(--font); }
#glpq-app { direction:rtl; min-height:100vh; background:var(--bg); }

/* ── Screens ── */
.glpq-screen { display:none; width:100%; animation:glpqFI .4s ease; }
.glpq-screen.active { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; }
@keyframes glpqFI { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Cards ── */
.glpq-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem;
  box-shadow:var(--shadow); width:100%; max-width:680px; margin:0 auto;
}
@media(min-width:768px){ .glpq-card{padding:2.5rem} }

/* ── Buttons ── */
.glpq-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.9rem 2rem; border-radius:var(--radius-md); font-weight:700;
  font-size:1rem; cursor:pointer; border:none; transition:all .2s; font-family:var(--font);
}
.glpq-btn-primary { background:var(--p600); color:#fff; }
.glpq-btn-primary:hover { background:var(--p700); transform:translateY(-2px); box-shadow:0 6px 20px rgba(5,150,105,.3); }
.glpq-btn-secondary { background:var(--white); color:var(--p700); border:2px solid var(--p100); }
.glpq-btn-secondary:hover { background:var(--p50); }
.glpq-btn-lg { padding:1.1rem 2.5rem; font-size:1.1rem; border-radius:var(--radius-md); }
.glpq-btn-block { width:100%; }

/* ── Progress bar ── */
.glpq-progress-wrap { width:100%; height:8px; background:var(--border); border-radius:999px; overflow:hidden; margin-bottom:1.5rem; }
.glpq-progress-bar { height:100%; background:linear-gradient(90deg,var(--p500),var(--p600)); border-radius:999px; transition:width .5s ease; }

/* ── Quiz question ── */
.glpq-q-counter { display:inline-flex; align-items:center; gap:8px; background:var(--p50); color:var(--p700); border:1px solid var(--p100); padding:6px 16px; border-radius:999px; font-size:.9rem; font-weight:700; }
.glpq-q-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; }
@media(max-width:640px){ .glpq-q-grid{grid-template-columns:1fr} }
.glpq-q-option {
  padding:1.2rem; border-radius:var(--radius-md); border:2px solid transparent;
  transition:all .2s; cursor:pointer;
}
.glpq-q-option.option-a { background:#ecfdf5; border-color:#d1fae5; }
.glpq-q-option.option-a:hover { border-color:var(--p600); }
.glpq-q-option.option-b { background:#fffbeb; border-color:#fde68a; }
.glpq-q-option.option-b:hover { border-color:var(--warn); }
.glpq-q-text { font-size:1rem; font-weight:700; color:var(--ink); line-height:1.6; margin-bottom:.8rem; }
.glpq-q-label { font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.05em; }
.glpq-select {
  width:100%; padding:.7rem 1rem; border:2px solid var(--border);
  border-radius:var(--radius-sm); font-size:1rem; font-weight:700;
  font-family:var(--font); color:var(--ink); background:var(--white);
  cursor:pointer; outline:none; transition:border-color .2s;
}
.glpq-select:focus { border-color:var(--p600); }
.glpq-q-nav { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; gap:1rem; }

/* ── Bipolar bar (result) ── */
.glpq-bipolar-wrap { margin:1rem 0; }
.glpq-bipolar-labels { display:flex; justify-content:space-between; font-size:.8rem; font-weight:700; margin-bottom:.4rem; }
.glpq-bipolar-labels span:first-child { color:var(--p700); }
.glpq-bipolar-labels span:last-child  { color:var(--warn); }
.glpq-bipolar-bar { height:14px; background:var(--border); border-radius:999px; position:relative; overflow:hidden; }
.glpq-bar-a { height:100%; background:linear-gradient(90deg,var(--p500),var(--p600)); float:right; border-radius:999px; transition:width 1s ease; }
.glpq-bar-b { height:100%; background:linear-gradient(90deg,var(--warn),#fbbf24); float:left; border-radius:999px; transition:width 1s ease; }

/* ── Domain section ── */
.glpq-domain { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.5rem; margin-bottom:1rem; }
.glpq-domain-title { font-size:1.1rem; font-weight:900; color:var(--p700); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:2px solid var(--p50); }

/* ── Credibility badge ── */
.glpq-cred-badge { display:inline-flex; align-items:center; gap:8px; background:var(--p50); border:1px solid var(--p100); border-radius:var(--radius-md); padding:.8rem 1.5rem; }
.glpq-cred-num { font-size:2rem; font-weight:900; color:var(--p700); }

/* ── Roadmap ── */
.glpq-roadmap { border:2px solid var(--p600); border-radius:var(--radius-md); overflow:hidden; margin:1.5rem 0; }
.glpq-roadmap-header { background:var(--p600); color:#fff; padding:1.5rem; text-align:center; }
.glpq-roadmap-body { padding:1.5rem; }
.glpq-roadmap-section { margin-bottom:1.5rem; }
.glpq-roadmap-section h4 { font-weight:900; font-size:1rem; padding-right:.8rem; border-right:4px solid; margin-bottom:.8rem; }
.glpq-roadmap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.glpq-roadmap-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; }

/* ── Course cards ── */
.glpq-courses-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1400px; margin:0 auto; }
@media(max-width:1100px){ .glpq-courses-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .glpq-courses-grid{grid-template-columns:1fr} }
.glpq-course-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .25s,box-shadow .25s;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.glpq-course-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.glpq-course-img { width:100%; height:190px; object-fit:cover; display:block; transition:transform .4s; }
.glpq-course-card:hover .glpq-course-img { transform:scale(1.04); }
.glpq-course-thumb-fallback { height:190px; background:linear-gradient(135deg,#064e3b,#059669); display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; overflow:hidden; }
.glpq-course-body { padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1; gap:.4rem; }
.glpq-course-title { font-size:1.05rem; font-weight:700; color:var(--ink); margin:0 0 .3rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.glpq-course-desc { font-size:.82rem; color:var(--muted); margin:0 0 .8rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.glpq-course-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:.8rem; }
.glpq-badge { padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.glpq-badge-green { background:var(--p50); color:var(--p700); }
.glpq-badge-gray  { background:#f3f4f6; color:#4b5563; }
.glpq-course-cta { display:block; width:100%; text-align:center; padding:.65rem 1rem; border-radius:999px; font-weight:700; font-size:.9rem; text-decoration:none; margin-top:auto; transition:opacity .2s; font-family:var(--font); }
.glpq-course-cta:hover { opacity:.85; }

/* ── Lock overlay ── */
.glpq-lock-box { background:linear-gradient(135deg,#1a2e1a,#064e3b); border-radius:var(--radius-lg); padding:2.5rem; text-align:center; margin:1.5rem 0; }
.glpq-lock-box h3 { color:#fff; font-size:1.3rem; font-weight:700; margin:0 0 .5rem; }
.glpq-lock-box p  { color:rgba(255,255,255,.7); font-size:.95rem; margin:0 0 1.2rem; }

/* ── Hero (landing) ── */
.glpq-hero { background:linear-gradient(135deg,var(--p700),var(--p600)); color:#fff; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.glpq-hero-inner { max-width:900px; width:100%; text-align:center; }
.glpq-hero h1 { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; margin:0 0 1rem; }
.glpq-hero p  { font-size:clamp(1rem,2vw,1.2rem); opacity:.85; margin:0 0 2rem; }

/* ── Nav ── */
.glpq-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.5rem; }
.glpq-nav-brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--p700); font-size:1rem; }
.glpq-nav-brand-dot { width:36px; height:36px; background:var(--p600); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; }

/* ── Spinner ── */
.glpq-spinner { width:40px; height:40px; border:4px solid var(--p100); border-top-color:var(--p600); border-radius:50%; animation:glpqSpin .8s linear infinite; }
@keyframes glpqSpin { to{transform:rotate(360deg)} }

/* ── Previous result modal ── */
.glpq-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.glpq-modal { background:var(--white); border-radius:var(--radius-lg); max-width:420px; width:100%; padding:2rem; text-align:center; border-top:8px solid var(--p600); box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* ── Section divider ── */
.glpq-section-head { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:1rem; }
.glpq-section-head h3 { font-size:1.3rem; font-weight:900; color:var(--ink); margin:0; }
.glpq-section-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }

/* ── Fullwidth for page layout ── */
.glpq-full { width:100%; max-width:none; }
.glpq-center { text-align:center; }

/* ── Card without image — better layout ── */
.glpq-course-card { min-height: 320px; }
.glpq-course-body { padding: 1.4rem 1.5rem 1.5rem !important; }
.glpq-course-title { font-size: 1.1rem !important; font-weight: 800 !important; margin-bottom: .6rem !important; line-height: 1.5 !important; }
.glpq-course-desc  { font-size: .88rem !important; line-height: 1.7 !important; margin-bottom: .8rem !important; color: #4b5563 !important; }
.glpq-course-meta  { margin-bottom: .9rem !important; }
.glpq-course-cta   { padding: .75rem 1rem !important; font-size: .95rem !important; border-radius: 999px !important; }
.glpq-badge        { font-size: .78rem !important; padding: 4px 12px !important; }


/* ── Modern course cards ── */
.glpq-courses-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem; max-width:1400px; margin:0 auto;
}
@media(max-width:1100px){ .glpq-courses-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px) { .glpq-courses-grid{grid-template-columns:1fr} }

.glpq-course-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:transform .25s,box-shadow .25s;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  height:100%;
}
.glpq-course-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 36px rgba(0,0,0,.13);
}
.glpq-course-card:hover .glpq-c-img { transform:scale(1.05); }

/* Image area — fixed height always */
.glpq-c-img-wrap {
  position:relative; height:200px;
  overflow:hidden; flex-shrink:0;
}
.glpq-c-img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s;
}
.glpq-c-img-fallback {
  width:100%; height:200px;
  background:linear-gradient(135deg,#064e3b 0%,#059669 100%);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* Body — flex grow fills remaining space */
.glpq-c-body {
  padding:1.1rem 1.2rem 1.2rem;
  display:flex; flex-direction:column;
  flex:1; direction:rtl; gap:.4rem;
}
.glpq-c-title {
  font-size:1rem; font-weight:800; color:#111827;
  line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.glpq-c-desc {
  font-size:.82rem; color:#6b7280;
  line-height:1.65; margin:0;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.glpq-c-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.glpq-c-badge {
  padding:3px 10px; border-radius:999px;
  font-size:.72rem; font-weight:700;
  background:#f3f4f6; color:#4b5563;
}
.glpq-c-cta {
  display:block; width:100%; text-align:center;
  padding:.72rem; border-radius:999px;
  font-weight:700; font-size:.9rem;
  text-decoration:none; color:#fff;
  margin-top:auto; transition:opacity .2s;
  font-family:var(--font);
}
.glpq-c-cta:hover { opacity:.85; }
/* ── Career-quiz style cards override ── */
.glpq-course-card {
  background:#fff !important;
  border:1.5px solid #e5ece5 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:0 2px 14px rgba(0,0,0,.06) !important;
  transition:transform .25s,box-shadow .25s !important;
  display:flex !important;
  flex-direction:column !important;
  text-decoration:none !important;
  color:inherit !important;
  padding:0 !important;
}
.glpq-course-card:hover {
  transform:translateY(-5px) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.13) !important;
}
.glpq-course-card:hover img { transform:scale(1.04); }

/* Center courses grid */
.glpq-courses-grid {
  max-width: 1000px !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media(max-width:900px){ .glpq-courses-grid{ grid-template-columns: repeat(2,1fr) !important; } }
@media(max-width:600px){ .glpq-courses-grid{ grid-template-columns: 1fr !important; } }