/*!
 * MO2 Builder — Global Redesign Layer (v1)
 * Loaded AFTER shared.css on every page. Elevates the existing dark
 * medieval aesthetic: refined header, page-transition loader, hero blocks,
 * gilded cards, chip filters, sticky toolbars. Uses the existing CSS vars.
 * Copyright (c) 2026 nolimitdigital.io.
 */

/* ---- Fonts: keep Cinzel for display, add EB Garamond for elegant italics ---- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ================= PARCHMENT GRAIN OVERLAY ================= */
/* ================= (grain overlay removed — it caused dropdown stacking issues) ================= */
/* keep real content above any decorative layers */
.site-header { position: relative; z-index: 10000; }

/* the nav dropdown menu must always be fully opaque and above everything. */
.nav-dropdown-menu {
  background: #1a1510 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
}
.nav-dropdown.open .nav-dropdown-menu { display: block !important; }

/* ================= PAGE-TRANSITION LOADER ================= */
#mo2Loader {
  position: fixed; inset: 0; z-index: 99999;
  background:
    radial-gradient(ellipse at center, rgba(28,22,14,0.98) 0%, rgba(10,8,5,0.99) 70%),
    var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#mo2Loader.hidden { opacity: 0; visibility: hidden; }
#mo2Loader .sigil { width: 86px; height: 86px; }
#mo2Loader .sigil svg { width: 100%; height: 100%; overflow: visible; }
#mo2Loader .ring-outer { transform-origin: 50% 50%; animation: mo2spin 5s linear infinite; }
#mo2Loader .ring-inner { transform-origin: 50% 50%; animation: mo2spin 3.4s linear infinite reverse; }
#mo2Loader .rune { transform-origin: 50% 50%; animation: mo2pulse 1.8s ease-in-out infinite; }
@keyframes mo2spin { to { transform: rotate(360deg); } }
@keyframes mo2pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
#mo2Loader .loader-text {
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent-bright); animation: mo2flicker 2.2s ease-in-out infinite;
}
@keyframes mo2flicker { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* page content fades in after loader (set by JS adding .mo2-ready to body) */
@keyframes mo2fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= REFINED HEADER ================= */
.site-header { padding: 12px 32px; }
/* match the header's inner width to the page content (1200px) so the logo and
   nav line up with the content below instead of stretching out to the edges */
.site-header-inner { max-width: 1200px !important; }
.site-brand h1 { font-size: 19px; letter-spacing: 1.4px; }
.site-sigil { width: 38px; height: 38px; filter: drop-shadow(0 2px 6px rgba(184,137,61,0.25)); }
.site-brand .tagline { font-family: 'EB Garamond', serif; font-style: italic; }

/* ================= HERO BLOCK (reusable) ================= */
.mo2-hero { position: relative; text-align: center; padding: 44px 0 22px; }
.mo2-hero .eyebrow {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; opacity: 0;
  animation: mo2rise 0.7s cubic-bezier(0.2,0.7,0.2,1) 0.05s forwards;
}
.mo2-hero h1 {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: clamp(30px, 5vw, 52px);
  line-height: 1.04; margin: 0 0 14px; letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(180deg, #f0dba8 0%, var(--accent-bright) 55%, var(--accent-deep) 125%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0; animation: mo2rise 0.8s cubic-bezier(0.2,0.7,0.2,1) 0.15s forwards;
}
.mo2-hero p {
  max-width: 600px; margin: 0 auto; color: var(--text-muted);
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 17px;
  opacity: 0; animation: mo2rise 0.8s cubic-bezier(0.2,0.7,0.2,1) 0.28s forwards;
}
.mo2-hero .mo2-stats {
  display: inline-flex; gap: 0; margin-top: 22px; padding: 12px 6px;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(34,28,20,0.4);
  opacity: 0; animation: mo2rise 0.8s cubic-bezier(0.2,0.7,0.2,1) 0.4s forwards;
}
.mo2-hero .mo2-stat { padding: 0 26px; position: relative; }
.mo2-hero .mo2-stat + .mo2-stat::before {
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--border);
}
.mo2-hero .mo2-stat .num {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; color: var(--accent-bright);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mo2-hero .mo2-stat .lbl { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-top: 5px; }
@keyframes mo2rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* decorative divider */
.mo2-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px auto 18px; opacity: 0.55; max-width: 360px; }
.mo2-divider .ln { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--accent-deep)); }
.mo2-divider .ln.r { background: linear-gradient(90deg, var(--accent-deep), transparent); }
.mo2-divider svg { width: 15px; height: 15px; fill: var(--accent); flex-shrink: 0; }

/* ================= STICKY TOOLBAR ================= */
/* keep the redesign content centered to a max width, matching the hero */
.mo2-hero, .mo2-divider, .mo2-toolbar, .mo2-chips, .mo2-count, .mo2-grid {
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.mo2-toolbar {
  position: sticky; top: 0; z-index: 30; padding: 14px 0; margin-bottom: 4px;
  background: transparent; transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease;
}
.mo2-toolbar.stuck {
  /* refined glass bar instead of a flat black rectangle */
  background: linear-gradient(180deg, rgba(20,16,11,0.92) 0%, rgba(13,10,7,0.86) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 1px 0 rgba(184,137,61,0.18), 0 14px 28px -16px rgba(0,0,0,0.9);
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
  border-bottom: 1px solid rgba(184,137,61,0.16);
}
/* full-bleed soft backdrop behind the centered bar so the page content
   doesn't show a hard square edge while scrolling under it */
.mo2-toolbar.stuck::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 100vw; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,10,7,0.96) 0%, rgba(13,10,7,0.78) 70%, rgba(13,10,7,0) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mo2-controls { display: grid; grid-template-columns: 1fr 200px 170px; gap: 12px; align-items: center; }
@media (max-width: 760px) { .mo2-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mo2-controls { grid-template-columns: 1fr; } }

.mo2-search { position: relative; }
.mo2-search input {
  width: 100%; padding: 13px 16px 13px 44px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.mo2-search input::placeholder { color: var(--text-dim); }
.mo2-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,137,61,0.12); }
.mo2-search .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: var(--text-dim); }
.mo2-sel {
  padding: 13px 16px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit;
  outline: none; cursor: pointer; transition: border-color 0.18s;
}
.mo2-sel:hover, .mo2-sel:focus { border-color: var(--accent-deep); }

/* ================= CHIP FILTERS ================= */
.mo2-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.mo2-chip {
  font-size: 12px; padding: 7px 14px; border-radius: 20px; cursor: pointer; user-select: none;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted);
  transition: all 0.18s; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.mo2-chip .c { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-dim); }
.mo2-chip:hover { border-color: var(--accent-deep); color: var(--text); transform: translateY(-1px); }
.mo2-chip.on {
  background: linear-gradient(180deg, rgba(184,137,61,0.18), rgba(184,137,61,0.08));
  border-color: var(--accent); color: var(--accent-bright);
}
.mo2-chip.on .c { color: var(--accent); }

/* ================= GILDED CARDS ================= */
.mo2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding-bottom: 50px; }
@media (max-width: 380px) { .mo2-grid { grid-template-columns: 1fr; } }
.mo2-card {
  position: relative; background: linear-gradient(160deg, var(--bg-elev) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1), border-color 0.22s, box-shadow 0.22s;
  opacity: 0; animation: mo2cardIn 0.5s cubic-bezier(0.2,0.7,0.2,1) forwards;
}
@keyframes mo2cardIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.mo2-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep)); opacity: 0.7;
  transition: opacity 0.22s, width 0.22s;
}
.mo2-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(212,165,87,0.13), transparent 60%);
  transition: opacity 0.3s;
}
.mo2-card:hover {
  transform: translateY(-4px); border-color: var(--accent-deep);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,137,61,0.12) inset;
}
.mo2-card:hover::before { width: 5px; opacity: 1; }
.mo2-card:hover::after { opacity: 1; }
.mo2-card-body { padding: 17px 18px 16px 21px; }
.mo2-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.mo2-card-title {
  font-family: 'Cinzel', serif; font-size: 15.5px; font-weight: 600; color: var(--accent-bright);
  letter-spacing: 0.2px; line-height: 1.25; text-transform: uppercase;
}
.mo2-badge { font-size: 11px; padding: 3px 10px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mo2-badge.price { background: rgba(184,137,61,0.13); color: var(--accent-bright); border: 1px solid var(--accent-deep); }
.mo2-badge.drop { background: rgba(176,53,34,0.14); color: var(--blood-bright); border: 1px solid var(--blood); }
.mo2-badge.nyi { background: rgba(176,53,34,0.12); color: var(--blood-bright); border: 1px solid var(--blood); text-transform: uppercase; letter-spacing: 0.5px; font-size: 9px; }
.mo2-rows { display: flex; flex-direction: column; gap: 8px; }
.mo2-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 12.5px; align-items: start; }
.mo2-row .lbl { color: var(--text-dim); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.6px; padding-top: 2px; }
.mo2-row .val { color: var(--text); }
.mo2-row .val.loc { color: var(--text-muted); }
.mo2-row .val.drop { color: var(--blood-bright); }
.mo2-cat-tag {
  display: inline-block; font-size: 10px; padding: 2px 9px; border-radius: 4px; margin-top: 2px;
  background: rgba(125,146,168,0.1); color: #9db4cc; border: 1px solid rgba(125,146,168,0.25);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.mo2-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text-dim); font-style: italic; font-family: 'EB Garamond', serif; font-size: 16px; }
.mo2-count { font-size: 14px; color: var(--text-dim); margin: 14px 2px; font-family: 'EB Garamond', serif; font-style: italic; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #mo2Loader .ring-outer, #mo2Loader .ring-inner, #mo2Loader .rune,
  .mo2-hero .eyebrow, .mo2-hero h1, .mo2-hero p, .mo2-hero .mo2-stats, .mo2-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ================= GLOBAL COMPONENT UPGRADES =================
   These override each page's local styles (redesign.css loads after the page's
   inline <style>), giving every tool page the refined look without touching
   any page's HTML structure or JS. */

/* Refined panels — gilded top accent + subtle gradient */
.panel, .preset-panel, .cook-summary, .best-pick {
  background: linear-gradient(165deg, var(--bg-elev) 0%, var(--bg-card) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  position: relative;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35), 0 0 0 1px rgba(184,137,61,0.04) inset !important;
}
.panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-deep), var(--accent), var(--accent-deep), transparent);
  opacity: 0.6; border-radius: 10px 10px 0 0;
}

/* Refined tier tabs (cooking, alchemy, butchery sub-tabs) */
.tier-tab.active { color: var(--accent-bright) !important; }
.tier-tab.active::after,
.tier-tab.active { border-bottom-color: var(--accent) !important; }

/* Tables: warmer header, gilded hover */
.results-table thead th, .attr-table thead th, .gr-table thead th {
  background: #1a1510 !important; color: var(--accent-bright) !important;
  border-bottom: 2px solid var(--accent-deep) !important;
}
.results-table tbody tr:hover td, .attr-table tbody tr:hover td, .gr-table tbody tr:hover td {
  background: rgba(184,137,61,0.06) !important;
}

/* Toggle bars (use-my-skills) get the gilded card look */
.skill-toggle-bar, .gr-toggle-bar {
  background: linear-gradient(165deg, var(--bg-elev) 0%, var(--bg-card) 100%) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
}

/* Inputs & selects across pages — match the new rounded style */
.search-box input, .filter-select, select#viewMode, select#rankPick {
  border-radius: 8px !important;
}
.search-box input:focus, .filter-select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(184,137,61,0.12) !important;
}

/* Buttons get a subtle gilded lift on hover */
.btn-primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent)) !important; }
.btn:hover { transform: translateY(-1px); }
.btn { transition: transform 0.15s, background 0.15s, border-color 0.15s !important; }

/* ================= CONSISTENT CONTENT WIDTH =================
   Force every page's main container to the same 1200px as the header & the
   skillbooks page, so content lines up under the nav on every page. Wide data
   tables still scroll horizontally inside their .table-scroll wrappers. */
.ore-container, .gr-container, .char-container, .sg-wrap, .uk-container,
#calcContainer.container, .mat-wrap, .cook-wrap {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}