/* ============================================================
   Check your Vocabulary — search + instant popup
   Extends speaking/styles.css (indigo/gold, Manrope + Fraunces)
   ============================================================ */

.voc-container{ max-width: 720px; }

.voc-brand-mark{ font-size: 1.7rem; }

/* ---------- Search ---------- */
.voc-search-wrap{ position: relative; margin-bottom: 1.8rem; }

.voc-dir-bar{
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin: 0 0 0.6rem;
}
.voc-dir-label{
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  min-width: 5.2rem; text-align: center;
  transition: color 0.15s ease;
}
.voc-dir-label.is-active{ color: var(--accent); }
.voc-dir-swap{
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface-glass);
  color: var(--accent);
  font-size: 0.9rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, border-color 0.15s ease, background 0.15s ease;
}
.voc-dir-swap:hover{ border-color: var(--accent); background: var(--accent-soft); }
.voc-dir-swap:active{ transform: rotate(180deg); }
.voc-dir-swap:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

.voc-search-box{
  position: relative; display: flex; align-items: center;
  background: var(--surface-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: 0.2rem 0.4rem 0.2rem 1.1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.voc-search-box:focus-within{ border-color: var(--accent); box-shadow: var(--shadow-lg), var(--glow-gold); }
.voc-search-box .search-icon{ font-size: 1rem; opacity: 0.6; flex-shrink: 0; }
.voc-search-box input{
  flex: 1; border: none; background: none; outline: none;
  font-family: inherit; font-size: 1rem; color: var(--text);
  padding: 0.85rem 0.7rem;
}
.voc-search-box input::placeholder{ color: var(--muted); }
.voc-clear-btn{
  flex-shrink: 0; border: none; background: var(--accent-soft); color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.voc-clear-btn:hover{ color: var(--text); }

.voc-autocomplete{
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  margin: 0; padding: 0.4rem; list-style: none;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto;
}
.voc-ac-item{
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.65rem 0.8rem; border-radius: 10px; cursor: pointer;
  font-size: 0.92rem; color: var(--text);
}
.voc-ac-item .ac-word{ font-weight: 700; }
.voc-ac-item .ac-hint{ font-size: 0.76rem; color: var(--muted); margin-left: auto; }
.voc-ac-item:hover, .voc-ac-item.is-active{ background: var(--accent-soft); }

/* ---------- Discovery (empty state) ---------- */
.voc-discover-block{ margin-bottom: 1.6rem; }
.voc-discover-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.voc-discover-head h2{
  margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
}
.voc-text-btn{
  border: none; background: none; color: var(--accent); font-family: inherit;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0;
}
.voc-text-btn:hover{ color: var(--accent-hover); text-decoration: underline; }

.voc-chip-row{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voc-chip{
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  background: var(--surface-glass); border: 1.5px solid var(--border); color: var(--text);
  padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.voc-chip:hover{ border-color: var(--accent); transform: translateY(-1px); }
.voc-topic-row .voc-chip{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.voc-chip.voc-chip-remove{ padding-right: 0.6rem; }
.voc-chip-x{ opacity: 0.55; font-size: 0.78rem; margin-left: 2px; }

/* ---------- Result list (multiple matches) ---------- */
.voc-result-cards{ display: flex; flex-direction: column; gap: 0.7rem; }
.voc-result-card{
  display: block; text-align: left; width: 100%; font-family: inherit; cursor: pointer;
  background: var(--surface-glass); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.voc-result-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.voc-result-card .rc-word{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.voc-result-card .rc-meta{ font-size: 0.78rem; color: var(--muted); margin: 2px 0 4px; }
.voc-result-card .rc-def{ font-size: 0.86rem; color: var(--text); opacity: 0.85; }

.voc-nomatch{ text-align: center; padding: 2rem 0; }
.voc-nomatch-title{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; }
.voc-didyoumean{ display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.2rem; }

/* ---------- Modal popup ---------- */
.voc-modal-backdrop{
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, #0a0b10 60%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.voc-modal-backdrop[hidden]{ display: none; }
.voc-modal{
  position: relative; width: 100%; max-width: 640px; max-height: 88vh;
  background: var(--surface); border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.voc-modal-close{
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.35); color: #fff; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.voc-modal-close:hover{ background: rgba(0,0,0,0.55); }
.voc-modal-body{ overflow-y: auto; }

.voc-modal-loading{
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 4rem 2rem; color: var(--muted); font-weight: 600;
}
.voc-spinner{
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: voc-spin 0.8s linear infinite;
}
@keyframes voc-spin{ to{ transform: rotate(360deg); } }

/* -- header band -- */
.voc-band{
  padding: 2rem 1.6rem 1.4rem; color: #fff; position: relative;
}
.voc-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 88% -10%, rgba(255,255,255,0.22), transparent 55%);
}
.voc-band-top{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; position: relative; }
.voc-save-btn{
  margin-left: auto; border: 1.5px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12);
  color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700;
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.voc-save-btn:hover{ background: rgba(255,255,255,0.22); }
.voc-save-btn.is-saved{ background: #fff; color: var(--danger); border-color: #fff; }
.voc-badge-tag{
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  background: rgba(255,255,255,0.16); padding: 4px 10px; border-radius: 999px;
}
.voc-word{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; margin: 0 0 0.3rem; position: relative; }
.voc-meta-row{
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-size: 0.85rem; font-weight: 700; opacity: 0.95; position: relative;
}
.voc-meta-chip{ background: rgba(255,255,255,0.16); padding: 3px 10px; border-radius: 999px; }

/* CEFR level badge — green (easiest) through red (hardest), same convention as Cambridge/Oxford materials */
.voc-level-badge{
  padding: 3px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 800;
  color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.voc-level-a1{ background: #16a34a; }
.voc-level-a2{ background: #65a30d; }
.voc-level-b1{ background: #0891b2; }
.voc-level-b2{ background: #2563eb; }
.voc-level-c1{ background: #ea580c; }
.voc-level-c2{ background: #dc2626; }

.voc-pron-row{ display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; position: relative; }
.voc-pron-item{ display: flex; align-items: center; gap: 0.5rem; }
.voc-pron-flag{ font-weight: 700; font-size: 0.82rem; }
.voc-pron-btn{
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.2); color: #fff; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.voc-pron-btn:hover{ background: rgba(255,255,255,0.32); }
.voc-pron-btn.playing{ animation: voc-pulse-btn 0.7s ease-in-out infinite; }
@keyframes voc-pulse-btn{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
.voc-ipa{ font-family: "Courier New", monospace; font-size: 0.82rem; opacity: 0.85; }

/* -- body sections -- */
.voc-body{ padding: 1.4rem 1.6rem 2rem; }
.voc-section{ margin-bottom: 1.5rem; }
.voc-section:last-child{ margin-bottom: 0; }
.voc-section-label{
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.5rem;
}
.voc-def-list{ margin: 0; padding-left: 1.1rem; }
.voc-def-list li{ margin-bottom: 0.5rem; line-height: 1.5; }
.voc-def-list li:last-child{ margin-bottom: 0; }
.voc-def-example{ display: block; color: var(--muted); font-style: italic; font-size: 0.88rem; margin-top: 2px; }
.voc-simple-box{
  background: var(--accent-soft); border-radius: 12px; padding: 0.9rem 1.1rem;
  font-size: 0.92rem; line-height: 1.55;
}

.voc-lang-strip{ display: flex; gap: 1rem; }
.voc-lang-half{ flex: 1; display: flex; gap: 0.6rem; align-items: flex-start; }
.voc-flag-xl{ font-size: 1.3rem; }
.voc-lang-tag{ font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.voc-lang-word{ font-weight: 700; font-size: 0.98rem; }

.voc-star-row{ letter-spacing: 2px; color: var(--gold); }

.voc-collocation-list{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voc-collo-chip{
  font-size: 0.86rem; font-weight: 600; background: var(--accent-soft); color: var(--text);
  padding: 0.4rem 0.85rem; border-radius: 10px;
}

.voc-example-block{ margin-bottom: 0.8rem; }
.voc-example-block:last-child{ margin-bottom: 0; }
.voc-example-tag{
  display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 0.25rem;
}
.voc-example-text{ font-size: 0.94rem; line-height: 1.5; }

.voc-family-table{ width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.voc-family-table td{ padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.voc-family-table tr:last-child td{ border-bottom: none; }
.voc-family-word{ font-weight: 700; cursor: pointer; color: var(--accent); }
.voc-family-word:hover{ text-decoration: underline; }
.voc-family-pos{ color: var(--muted); font-size: 0.78rem; }

.voc-usage-pattern{
  font-family: "Courier New", monospace; font-weight: 700; font-size: 0.92rem;
  background: var(--accent-soft); display: inline-block; padding: 0.4rem 0.8rem; border-radius: 8px; margin-bottom: 0.6rem;
}

.voc-mistake-line{ font-size: 0.9rem; margin-bottom: 0.35rem; }
.voc-mistake-ok{ color: #16803d; }
.voc-mistake-bad{ color: var(--danger); }

@media (max-width: 640px){
  .voc-modal-backdrop{ padding: 0; align-items: flex-end; }
  .voc-modal{ max-width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
  .voc-lang-strip{ flex-direction: column; gap: 0.7rem; }
}

.privacy-note{ margin-bottom: 2rem; }