/* ── FlipVerbs Dictionary — Frontend CSS ── */

:root {
  --fv-blue:        #1B6FD8;
  --fv-blue-light:  #4A9AEF;
  --fv-orange:      #F47B20;
  --fv-orange-light:#FFAA55;
  --fv-dark:        #0B0D11;
  --fv-dark2:       #13161D;
  --fv-gray:        #8B909E;
  --fv-light:       #F5F4F0;
  --fv-white:       #FFFFFF;
}

/* ── Search Hero ── */
.fv-search-hero {
  background: var(--fv-dark);
  padding: 5rem 2rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * (100vw - 100%) / 2);
}
.fv-search-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(27,111,216,.18), transparent 70%);
}
.fv-search-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(244,123,32,.1), transparent 70%);
}
.fv-search-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
}
.fv-search-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: .5rem !important;
  position: relative;
  z-index: 1;
  line-height: 1.2 !important;
}
.fv-o { color: var(--fv-orange); }
.fv-b { color: var(--fv-blue-light); }
.fv-search-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 300 !important;
  margin-bottom: 2rem !important;
  position: relative;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
}
.fv-search-wrap {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.fv-search-input-row {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.fv-search-input {
  flex: 1;
  padding: 14px 20px;
  font-size: 16px;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  color: var(--fv-dark);
  background: #fff;
}
.fv-search-input::placeholder { color: #AAAAAA; }
.fv-search-btn {
  padding: 14px 22px;
  background: var(--fv-orange);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s;
}
.fv-search-btn:hover { background: #D96A10; }
.fv-search-hints {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.fv-hint-chip {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .2s;
  font-family: 'DM Sans', sans-serif;
}
.fv-hint-chip:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ── Result Area ── */
.fv-result-area {
  max-width: 680px;
  margin: 1.5rem auto;
  padding: 0 1.5rem 4rem;
}
.fv-empty-state {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--fv-gray);
  font-family: 'DM Sans', sans-serif;
}
.fv-empty-icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: .4; }
.fv-empty-state p { font-size: 14px; line-height: 1.7; }

/* Loading state */
.fv-loading {
  text-align: center;
  padding: 2rem;
  color: var(--fv-gray);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}
.fv-loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--fv-blue-light);
  border-top-color: transparent;
  border-radius: 50%;
  animation: fv-spin .6s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}
@keyframes fv-spin { to { transform: rotate(360deg); } }

/* ── Entry Card ── */
.fv-entry-card {
  background: #fff;
  border: 1px solid #E8E6DF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  font-family: 'DM Sans', sans-serif;
}
.fv-entry-header { padding: 1.75rem 1.75rem 0; }
.fv-entry-pv {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--fv-dark);
  margin-bottom: .25rem;
}
.fv-entry-phonetic {
  font-size: 13px;
  color: var(--fv-gray);
  margin-bottom: .75rem;
  font-style: italic;
}
.fv-entry-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.fv-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 100px;
}
.fv-badge-informal  { background: #FFF0E0; color: #B85A10; }
.fv-badge-formal    { background: #EAF2FF; color: #1550A8; }
.fv-badge-neutral   { background: #F5F4F0; color: #5A5A5A; }
.fv-badge-a1,.fv-badge-a2 { background: #E8FFF0; color: #0E6B2A; }
.fv-badge-b1        { background: #F0FAF0; color: #1A6B32; }
.fv-badge-b2        { background: #FFF8E0; color: #8B6800; }
.fv-badge-c1        { background: #F5F0FF; color: #5B3FA8; }
.fv-badge-c2        { background: #FFF0F5; color: #8B1A4A; }
.fv-badge-cat       { background: #F5F4F0; color: #5A5A5A; }

.fv-entry-def {
  font-size: 15px;
  line-height: 1.75;
  color: #3A3A38;
  padding: 0 1.75rem 1.25rem;
  border-bottom: 1px solid #F0EDE6;
}

/* ── Sections ── */
.fv-entry-section {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid #F0EDE6;
}
.fv-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--fv-gray);
  margin-bottom: .875rem;
}
.fv-example-list { display: flex; flex-direction: column; gap: .6rem; }
.fv-example-item {
  font-size: 14px;
  color: #4A4A48;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2.5px solid #E8E6DF;
  font-style: italic;
}
.fv-example-item em { font-style: normal; font-weight: 600; color: var(--fv-dark); }

/* ── Did You Know ── */
.fv-dyk {
  background: var(--fv-dark2);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fv-dyk-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(244,123,32,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.fv-dyk-text {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}
.fv-dyk-text strong { color: #fff; }

/* ── Quiz ── */
.fv-quiz-wrap {
  background: var(--fv-light);
  border-radius: 12px;
  padding: 1.25rem;
}
.fv-quiz-question {
  font-size: 14px;
  color: var(--fv-dark);
  line-height: 1.65;
  margin-bottom: 1rem;
  font-weight: 500;
}
.fv-quiz-options { display: flex; flex-direction: column; gap: 7px; }
.fv-qopt {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border: 1.5px solid #E0DDD6;
  border-radius: 9px;
  cursor: pointer;
  color: var(--fv-dark);
  background: #fff;
  text-align: left;
  transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.fv-qopt:hover { border-color: var(--fv-blue); background: #F0F6FF; }
.fv-qopt.correct { background: #F0FAF0; border-color: #2E9E4F; color: #1A6B32; pointer-events: none; }
.fv-qopt.wrong   { background: #FFF0F0; border-color: #CC3333; color: #8B1A1A; pointer-events: none; }
.fv-qopt.disabled { pointer-events: none; opacity: .6; }
.fv-quiz-feedback {
  margin-top: .75rem;
  font-size: 13px;
  padding: 9px 13px;
  border-radius: 8px;
  display: none;
}
.fv-quiz-feedback.ok  { background: #F0FAF0; color: #1A6B32; display: block; }
.fv-quiz-feedback.err { background: #FFF0F0; color: #8B1A1A; display: block; }

/* ── Opposites ── */
.fv-opp-section { padding: 1.5rem 1.75rem 1.75rem; }
.fv-opp-intro {
  font-size: 13px;
  color: var(--fv-gray);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.fv-opp-intro strong { color: var(--fv-dark); }
.fv-opp-group { margin-bottom: 1.1rem; }
.fv-opp-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--fv-gray);
  margin-bottom: .5rem;
}
.fv-opp-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.fv-opp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all .2s;
  font-family: 'DM Sans', sans-serif;
}
.fv-opp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.fv-opp-btn .fv-arrow { font-size: 10px; opacity: .7; }
.fv-opp-btn.resilience    { background:#FAECE7; color:#993C1D; border:1.5px solid #F5C4B3; }
.fv-opp-btn.work          { background:#E6F1FB; color:#185FA5; border:1.5px solid #B5D4F4; }
.fv-opp-btn.travel        { background:#EAF3DE; color:#3B6D11; border:1.5px solid #C0DD97; }
.fv-opp-btn.relationships { background:#FBEAF0; color:#993556; border:1.5px solid #F4C0D1; }
.fv-opp-btn.communication { background:#F0EAFF; color:#5B3FA8; border:1.5px solid #D4C4F4; }
.fv-opp-btn.emotions      { background:#FFF8E0; color:#8B6800; border:1.5px solid #F4E4A0; }
.fv-opp-btn.growth        { background:#E0FAF5; color:#1A6B5A; border:1.5px solid #9FE0D0; }

/* ── Not Found ── */
.fv-not-found {
  text-align: center;
  padding: 2rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
}
.fv-not-found p { font-size: 14px; color: var(--fv-gray); line-height: 1.7; }
.fv-not-found strong { color: var(--fv-dark); }
.fv-suggest-link {
  color: var(--fv-orange);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 500px) {
  .fv-entry-pv { font-size: 1.6rem; }
  .fv-entry-header,
  .fv-entry-def,
  .fv-entry-section,
  .fv-opp-section { padding-left: 1.25rem; padding-right: 1.25rem; }
}