/* ============================================
   PRACTICE TEST 1 أ¢â‚¬â€‌ WRITING TASK 1
   ============================================ */

/* أ¢â€‌€أ¢â€‌€ Page header أ¢â€‌€أ¢â€‌€ */
.gt3w1-inst-header { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px 20px;margin-bottom:20px; }
.gt3w1-inst-label  { font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);margin-bottom:4px; }
.gt3w1-inst-text   { font-size:1rem;color:rgba(255,255,255,0.85);line-height:1.5; }

/* أ¢â€‌€أ¢â€‌€ Two-column layout أ¢â€‌€أ¢â€‌€ */
.gt3w1-layout { display:flex; gap:24px; margin-top:20px; align-items:flex-start; }
@media(max-width:900px){ .gt3w1-layout { display:flex; gap:24px; margin-top:20px; align-items:flex-start; } }

/* أ¢â€‌€أ¢â€‌€ Left: prompt + image أ¢â€‌€أ¢â€‌€ */
.gt3w1-prompt-box { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:4px; }
.gt3w1-prompt-text { font-size:1rem;color:rgba(255,255,255,0.9);line-height:1.65;margin:0 0 10px; }
.gt3w1-prompt-dir  { font-size:.92rem;color:rgba(255,255,255,0.65);font-style:italic;line-height:1.55;margin:0 0 8px; }
.gt3w1-prompt-min  { font-size:.9rem;color:rgba(255,255,255,0.55);margin:0; }
.gt3w1-prompt-min strong { color:var(--gold); }

.gt3w1-img-wrap { border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.3);text-align:center;min-width:520px; }
.gt3w1-map-img  { width:100%;height:auto;display:block; }
.gt3w1-img-fallback { display:flex;align-items:center;justify-content:center;height:180px;color:rgba(255,255,255,0.4);font-size:.9rem;gap:8px; }

/* أ¢â€‌€أ¢â€‌€ Right: writing area أ¢â€‌€أ¢â€‌€ */
.gt3w1-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.gt3w1-write-head { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
.gt3w1-write-label { font-size:.9rem;font-weight:700;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:.5px; }
.gt3w1-wc { font-size:.88rem;font-weight:700;padding:3px 10px;border-radius:20px;transition:background .25s,color .25s; }
.gt3w1-wc-low  { background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3); }
.gt3w1-wc-warn { background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.3); }
.gt3w1-wc-ok   { background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3); }

.gt3w1-textarea { width:100%;min-height:360px;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.15);border-radius:10px;padding:16px;color:rgba(255,255,255,0.9);font-size:.97rem;line-height:1.75;font-family:'Georgia',serif;resize:vertical;outline:none;transition:border-color .2s;box-sizing:border-box; }
.gt3w1-textarea:focus { border-color:rgba(251,191,36,0.5); }
.gt3w1-textarea::placeholder { color:rgba(255,255,255,0.2); }
.gt3w1-textarea-hint { font-size:.82rem;color:rgba(255,255,255,0.35);font-style:italic; }

/* أ¢â€‌€أ¢â€‌€ Disclaimer أ¢â€‌€أ¢â€‌€ */
.gt3w1-disclaimer { background:rgba(96,165,250,0.08);border:1.5px solid rgba(96,165,250,0.3);border-radius:10px;padding:12px 18px;margin-bottom:14px;font-size:.92rem;color:rgba(255,255,255,0.8);line-height:1.6; }
.gt3w1-disclaimer strong { color:#60a5fa; }

/* أ¢â€‌€أ¢â€‌€ Sample toggle button أ¢â€‌€أ¢â€‌€ */
.gt3w1-sample-toggle-row { text-align:center;margin:6px 0 20px; }
.gt3w1-sample-btn { background:rgba(251,191,36,0.1);border:1.5px solid rgba(251,191,36,0.4);color:var(--gold);border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s; }
.gt3w1-sample-btn:hover { background:rgba(251,191,36,0.22); }

/* أ¢â€‌€أ¢â€‌€ Sample answer section أ¢â€‌€أ¢â€‌€ */
.gt3w1-sample-wrap { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:22px 26px;margin-bottom:24px; }
.gt3w1-sample-header { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px; }
.gt3w1-band-badge { background:var(--gold);color:#111;font-weight:900;font-size:.85rem;padding:3px 12px;border-radius:20px;white-space:nowrap; }
.gt3w1-sample-title { font-size:1rem;font-weight:700;color:rgba(255,255,255,0.9); }

.gt3w1-ann-legend { display:flex;gap:10px;flex-wrap:wrap;margin-left:auto; }
.gt3w1-ann-legend .gt3w1-ann { font-size:.78rem;padding:2px 8px;border-radius:4px;cursor:default; }

.gt3w1-ann-hint { font-size:.82rem;color:rgba(255,255,255,0.4);font-style:italic;margin-bottom:14px; }

/* أ¢â€‌€أ¢â€‌€ Sample text أ¢â€‌€أ¢â€‌€ */
.gt3w1-sample-text { font-size:1.05rem;line-height:2.1;color:rgba(255,255,255,0.88);font-family:'Georgia',serif;position:relative; }
.gt3w1-sample-text p { margin:0 0 14px; }

/* أ¢â€‌€أ¢â€‌€ Annotation spans أ¢â€‌€أ¢â€‌€ */
.gt3w1-ann { border-radius:3px;padding:1px 4px;cursor:pointer;transition:opacity .15s;position:relative; }
.gt3w1-ann:hover { opacity:.82; }
.gt3w1-ann-good { background:rgba(74,222,128,0.18);border-bottom:2px solid #4ade80;color:rgba(255,255,255,0.95); }
.gt3w1-ann-err  { background:rgba(248,113,113,0.18);border-bottom:2px solid #f87171;color:rgba(255,255,255,0.95); }
.gt3w1-ann-note { background:rgba(96,165,250,0.18);border-bottom:2px solid #60a5fa;color:rgba(255,255,255,0.95);font-style:italic;font-size:.88em; }

/* أ¢â€‌€أ¢â€‌€ Annotation popup أ¢â€‌€أ¢â€‌€ */
.gt3w1-ann-popup { position:fixed;background:#1e1e38;border:1.5px solid rgba(255,255,255,0.22);border-radius:10px;padding:12px 16px;font-size:.88rem;color:rgba(255,255,255,0.92);line-height:1.65;width:300px;z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,0.6);font-family:'Inter',sans-serif;pointer-events:none; }

/* أ¢â€‌€أ¢â€‌€ Examiner comment cards أ¢â€‌€أ¢â€‌€ */
.gt3w1-comments-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px; }
@media(max-width:700px){ .gt3w1-comments-grid { grid-template-columns:1fr; } }
.gt3w1-comment-card { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px 16px; }
.gt3w1-comment-head { font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.gt3w1-comment-body { font-size:.9rem;color:rgba(255,255,255,0.78);line-height:1.65; }
.gt3w1-comment-body em { color:rgba(255,255,255,0.55); }


/* ?? Annotation emoji indicators ?? */
.gt3w1-ann-good::before { content: '?? '; font-style: normal; }
.gt3w1-ann-err::before  { content: '?? '; font-style: normal; }

/* أ¢â€‌€أ¢â€‌€ Annotation emoji indicators أ¢â€‌€أ¢â€‌€ */
.gt3w1-ann[data-icon]::before { content: attr(data-icon) ' '; font-style: normal; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }

/* أ¢â€‌€أ¢â€‌€ GT Writing Task 1: letter layout (full width, no image) أ¢â€‌€أ¢â€‌€ */
.gt3w1-prompt-bullets {
  margin: 10px 0 10px 22px;
  padding: 0;
}
.gt3w1-prompt-bullets li {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  margin-bottom: 2px;
}
.gt3w1-prompt-starter {
  font-size: .97rem;
  color: rgba(255,255,255,0.75);
  margin-top: 10px;
  border-left: 3px solid var(--gold, #fbbf24);
  padding-left: 12px;
}
.gt3w1-write-area {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.gt3w1-write-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gt3w1-textarea {
  width: 100%;
  min-height: 340px;
  background: rgba(0,0,0,0.25);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 1.02rem;
  font-family: 'Georgia', serif;
  color: rgba(255,255,255,0.9);
  line-height: 1.85;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.gt3w1-textarea:focus { border-color: rgba(251,191,36,0.6); }
/* Override the two-column layout class if inherited */
.gt3w1-layout { display: block; }