:root {
  --font-size: 16px; /* default */
}

/* ==========================
   Base Setup
========================== */
html, body {
  font-size: var(--font-size);
  transition: font-size 0.12s ease;
}

/* popup styles */
.font-popup {
  position: absolute;
  right: 0.75rem;
  top: 3rem;
  background: #070101;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08);
  padding: 0.625rem;
  border-radius: 0.5rem;
  min-width: 10rem;
  z-index: 9999;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
.font-popup .fp-row { display:flex; gap:0.5rem; justify-content:center; margin-bottom:0.5rem; }
.fp-btn {
  border: 1px solid #ddd;
  background: #f7f9fc;
  padding:0.375rem 0.625rem;
  border-radius:0.375rem;
  cursor:pointer;
  font-weight:600;
  font-size: 0.95rem;
}
.fp-btn:hover { background:#eef6ff; border-color:#bcdcff; }
.fp-note { text-align:center; font-size:0.9rem; color:#333; }

/* small tweak to ensure popup positions inside header container */
.header-actions { position: relative; } 
.tmr {text-align: left;}

/* ==========================
   Global Styles
========================== */
p {
    line-height: 1.6;
    margin-bottom: 0.9rem;
}
.exam-part {
    margin-bottom: 2.5rem;
}
.match-question {
    margin-bottom: 0.6rem;
}

/* ==========================
   Fill in the Blanks Section
========================== */
.fill-blank-section {
    font-size: 1.25rem;   /* ~20px */
    line-height: 1.8;
    margin: 1.25rem 0;
    color: #000000;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
.fill-blank-section .section-title {
    font-size: 1.25rem;
    margin-bottom: 0.9rem;
    color: #1e90ff;
}
.fill-blank-section .fill-line {
    margin-bottom: 0.75rem;
}

/* ==========================
   Fill in the Blanks Input
========================== */
.blank {
    min-width: 11.25rem; /* 180px */
    padding: 0.625rem 0.875rem;
    margin: 0.375rem 0.25rem;
    border: 0.093rem solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem; 
    background: #fdfdfd;
    font-family: "Segoe UI", Arial, sans-serif;
    transition: all 0.25s ease;
}
.blank:focus {
    border-color: #007bff;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0.375rem rgba(0,123,255,0.4);
}

/* ==========================
   Table + Inputs
========================== */
.table-input {
    width: 95%;
    padding: 0.5rem 0.625rem;
    border: 0.093rem solid #bbb;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    background: #fff;
    text-align: center;
    transition: all 0.25s ease;
}
.table-input:focus {
    border-color: #28a745;
    box-shadow: 0 0 0.375rem rgba(40,167,69,0.4);
    outline: none;
}

table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    font-family: "Segoe UI", Arial, sans-serif;
}
table th {
    background: #007bff;
    color: #fff;
    padding: 0.625rem;
    border: 0.0625rem solid #ddd;
    text-align: center;
}
table td {
    padding: 0.625rem;
    border: 0.0625rem solid #ddd;
    background: #fafafa;
}
table tr:nth-child(even) td {
    background: #f5f9ff;
}

/* ==========================
   Drag & Drop
========================== */
.draggable {
    padding: 0.5rem 0.875rem;
    margin: 0.375rem 0;
    background: linear-gradient(135deg, #f9f9f9, #f1f1f1);
    border: 0.0625rem solid #ccc;
    border-radius: 0.375rem;
    cursor: grab;
    font-size: 0.95rem;
    transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
}
.draggable:hover {
    background: #eef6ff;
    border-color: #1e90ff;
    transform: scale(1.03);
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
}

/* Dropzones */
.dropzone {
    display: inline-block;
    min-width: 8.75rem; /* 140px */
    min-height: 2rem;
    border: 0.125rem dashed #777;
    border-radius: 0.375rem;
    background: rgba(255,255,255,0.8);
    text-align: center;
    line-height: 1.8;
    font-size: 0.9rem;
    font-weight: bold;
    color: #555;
    margin: 0.25rem 0;
    cursor: pointer;
    transition: all 0.25s ease;
}
.dropzone::before {
    content: attr(data-answer);
    margin-right: 0.3rem;
    font-weight: bold;
    color: #333;
}
.dropzone.hover {
    background: #eaf7ff;
    border-color: #1e90ff;
    box-shadow: 0 0 0.375rem rgba(30,144,255,0.6);
}

/* ==========================
   Map Container
========================== */
.map-container {
    position: relative;
    border: 0.125rem solid #ddd;
    border-radius: 0.5rem;
    padding: 0.3rem;
    background: #fafafa;
}
.map-drop {
    position: absolute;
    width: 7.5rem; /* 120px */
    min-height: 2rem;
}

/* ==========================
   Submit Button (Floating)
========================== */
.fixed-submit {
    position: fixed;
    bottom: 3rem;
    right: 1.25rem;
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 3rem;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.2);
    z-index: 9999;
    transition: transform 0.2s, background 0.3s;
}
.fixed-submit:hover {
    transform: scale(1.05);
    background-color: #218838;
}