/* ==========================================================================
   JunkieLists — Premium theme layer ("Obsidian & Gold")
   Se încarcă ultimul, peste template.css / web.css. Nu schimbă structura
   paginilor, doar aspectul: spațiere, colțuri, tipografie, butoane, carduri.
   ========================================================================== */

:root {
  --jl-bg: #0a0704;
  --jl-panel: #140d06;
  --jl-panel-2: #1b1209;
  --jl-panel-3: #22170b;
  --jl-gold: #ffb808;
  --jl-gold-2: #f0a400;
  --jl-gold-soft: #ffd56a;
  --jl-ember: #f26332;
  --jl-line: rgba(255, 184, 8, 0.16);
  --jl-line-strong: rgba(255, 184, 8, 0.38);
  --jl-text: #efe6d6;
  --jl-muted: #a8987c;
  --jl-radius: 14px;
  --jl-radius-sm: 10px;
  --jl-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --jl-glow: 0 0 0 1px rgba(255, 184, 8, 0.35), 0 10px 30px rgba(255, 166, 0, 0.18);
  --jl-display: 'Cinzel', 'Times New Roman', serif;
  --jl-body: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
}

/* ---------- Bază ---------- */
body {
  font-family: var(--jl-body);
  color: var(--jl-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 184, 8, 0.35); color: #fff; }
a { transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }

/* scrollbar discret */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0905; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a3f0a, #2e2006); border-radius: 10px; border: 2px solid #0d0905; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8a6100, #4a3305); }

/* ---------- Titluri ---------- */
.shop-header h2,
.title-small span, .title-large span,
.web-title, .web-container .main-top .box-login .title,
.cs-title, .jl-display {
  font-family: var(--jl-display);
  letter-spacing: 1.5px;
}
.shop-header { margin-bottom: 28px; }
.shop-header h2 {
  font-weight: 700;
  font-size: 30px;
  background: linear-gradient(180deg, #fff3cf 0%, #ffcf4d 45%, #d68a00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.shop-header h2 span { -webkit-text-fill-color: var(--jl-ember); }
.shop-header p { color: var(--jl-muted); font-size: 14px; }
.shop-header .title-divider {
  width: 90px; height: 2px; margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--jl-gold), transparent);
  border: 0;
}

/* ---------- Panouri (aspect comun pentru toate cutiile) ---------- */
.web-container .main-top .box-login,
.web-container .main-top .slider,
.web-container .box-notice,
.web-container .box-events,
.web-container .box-info,
.web-container .main-ranking-staff .box-ranking,
.web-container .main-ranking-staff .box-staff,
.castle-siege-new,
.jl-promo,
.page-container-view > .content {
  border: 1px solid var(--jl-line) !important;
  border-radius: var(--jl-radius) !important;
  box-shadow: var(--jl-shadow);
  overflow: hidden;
}
.web-container .main-top .box-login,
.web-container .box-notice,
.web-container .box-events,
.web-container .box-info,
.web-container .main-ranking-staff .box-ranking,
.web-container .main-ranking-staff .box-staff {
  background: linear-gradient(180deg, rgba(31, 21, 9, 0.96) 0%, rgba(16, 10, 5, 0.97) 100%) !important;
}
.page-container-view > .content > .box-web { border: 0 !important; }

/* Aer între cutii (doar pe desktop; pe mobil rămâne aranjarea originală) */
@media (min-width: 1200px) {
  .web-container .main-top,
  .web-container .main-notice-info,
  .web-container .main-ranking-staff { gap: 18px !important; }
  .web-container .main-top { margin-bottom: 22px !important; height: auto !important; align-items: stretch !important; }
  .web-container .main-top .slider { min-height: 250px; height: auto !important; }
  .web-container .main-top > *,
  .web-container .main-notice-info > *,
  .web-container .main-ranking-staff > * { box-sizing: border-box; min-width: 0 !important; }
  .web-container .main-top .box-login { flex: 0 0 272px !important; width: 272px !important; height: auto !important; min-height: 250px; }
  .web-container .main-top .fast-buttons { flex: 0 0 272px !important; width: 272px !important; }
  .web-container .main-top .fast-buttons a, .web-container .main-top .fast-buttons img { max-width: 100% !important; }
  .web-container .main-top .slider { flex: 1 1 0 !important; width: auto !important; margin: 0 !important; }
  .web-container .box-notice { flex: 1 1 0 !important; width: auto !important; }
  .web-container .box-events,
  .web-container .box-info { flex: 0 0 266px !important; width: 266px !important; }
  .web-container .main-ranking-staff .box-ranking { flex: 1 1 0 !important; }
  .web-container .main-ranking-staff .box-staff { flex: 0 0 266px !important; width: 266px !important; }
  .page-container-view > * + * { margin-top: 22px !important; }
}

/* ---------- Liste din cutii ---------- */
.web-container .box-notice ul li a,
.web-container .box-events ul li,
.web-container .box-info ul li { border-radius: 8px; }
.web-container .box-notice ul li a:hover { background: rgba(255, 184, 8, 0.07); }

/* ---------- Butoane ---------- */
.web-container .box-info a,
.web-container .main-ranking-staff .box-staff a.btn-support,
.btn-large, .jl-btn {
  border-radius: var(--jl-radius-sm) !important;
  background: linear-gradient(180deg, #ffc93a 0%, #f0a400 55%, #c47c00 100%) !important;
  color: #1d1200 !important;
  font-weight: 800 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(240, 164, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.web-container .box-info a:hover,
.web-container .main-ranking-staff .box-staff a.btn-support:hover,
.btn-large:hover, .jl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(240, 164, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #000 !important;
}
.jl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-size: 12px; text-decoration: none !important; cursor: pointer; }
.jl-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--jl-radius-sm);
  border: 1px solid var(--jl-line-strong); color: var(--jl-gold-soft) !important; text-decoration: none !important;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; background: rgba(255, 184, 8, 0.04);
}
.jl-btn-ghost:hover { background: rgba(255, 184, 8, 0.12); border-color: var(--jl-gold); color: #fff !important; }

/* ---------- Tabele ---------- */
.online-table, .rankings-table table, .jl-table {
  border-radius: var(--jl-radius-sm); overflow: hidden;
}
.online-table thead tr, .jl-table thead tr { background: linear-gradient(180deg, #2a1c0a, #1a1107) !important; border-bottom: 1px solid var(--jl-line-strong) !important; }
.online-table tbody tr:nth-child(even), .jl-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.online-table tbody tr:hover, .jl-table tbody tr:hover { background: rgba(255, 184, 8, 0.06) !important; }

/* ---------- Formulare ---------- */
.page-container-view input[type="text"],
.page-container-view input[type="email"],
.page-container-view input[type="password"],
.page-container-view input[type="number"],
.page-container-view select,
.page-container-view textarea {
  border-radius: var(--jl-radius-sm);
  border: 1px solid var(--jl-line) ;
  transition: border-color .2s, box-shadow .2s;
}
.page-container-view input:focus,
.page-container-view select:focus,
.page-container-view textarea:focus {
  outline: none;
  border-color: var(--jl-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 184, 8, 0.15);
}

/* ==========================================================================
   STORE (pagina Packages)
   ========================================================================== */
.jl-store { padding: 34px 34px 40px; }
.jl-store-section { margin-top: 34px; }
.jl-store-section:first-of-type { margin-top: 6px; }
.jl-section-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.jl-section-head .jl-section-icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 184, 8, 0.1); border: 1px solid var(--jl-line-strong); color: var(--jl-gold); font-size: 16px;
}
.jl-section-head h3 {
  margin: 0; font-family: var(--jl-display); font-size: 18px; letter-spacing: 1.5px; color: #fff3d6; text-transform: uppercase;
}
.jl-section-head small { display: block; color: var(--jl-muted); font-size: 12px; letter-spacing: .2px; text-transform: none; font-family: var(--jl-body); }
.jl-section-head::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--jl-line-strong), transparent);
}

.jl-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.jl-pack {
  --tier: var(--jl-gold);
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1e140a 0%, #120c06 100%);
  border: 1px solid var(--jl-line); border-radius: var(--jl-radius);
  padding: 22px 20px 20px; color: var(--jl-text) !important; text-decoration: none !important;
  overflow: hidden; isolation: isolate; min-height: 270px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.jl-pack::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--tier), transparent);
}
.jl-pack::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--tier) 28%, transparent) 0%, transparent 70%);
  opacity: .55; transition: opacity .25s ease;
}
.jl-pack:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tier) 60%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--tier) 35%, transparent); }
.jl-pack:hover::after { opacity: 1; }

.jl-pack-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.jl-pack-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  color: var(--tier); background: color-mix(in srgb, var(--tier) 12%, #120c06);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--tier) 18%, transparent);
}
.jl-pack-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 30px;
  color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); background: color-mix(in srgb, var(--tier) 10%, transparent);
}
.jl-pack h4 { margin: 0 0 6px; font-family: var(--jl-display); font-size: 17px; font-weight: 700; letter-spacing: .8px; color: #fff; line-height: 1.3; }
.jl-pack-desc { color: var(--jl-muted); font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; }
.jl-pack-perks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; }
.jl-pack-perks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #e5d8bf; }
.jl-pack-perks li i { color: var(--tier); width: 14px; text-align: center; font-size: 11px; }
.jl-pack-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.jl-pack-price { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.jl-pack-price .jl-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.jl-pack-price .jl-price del { margin-right: 0 !important; }
.jl-pack-price .jl-cd-chip { align-self: flex-start; }
.jl-pack-buy { justify-content: center; }
.jl-pack-price .jl-from { font-size: 10px; color: var(--jl-muted); text-transform: uppercase; letter-spacing: 1px; }
.jl-pack-buy {
  display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-radius: 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: #1d1200; background: linear-gradient(180deg, #ffc93a, #e39a00);
  box-shadow: 0 6px 16px rgba(240, 164, 0, .25);
}
.jl-pack:hover .jl-pack-buy { box-shadow: 0 8px 22px rgba(240, 164, 0, .45); }
.jl-pack.is-featured { border-color: color-mix(in srgb, var(--tier) 55%, transparent); }
.jl-pack-ribbon {
  position: absolute; top: 14px; right: -34px; transform: rotate(45deg); background: var(--jl-ember); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 4px 40px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.jl-tier-bronze { --tier: #d98a45; }
.jl-tier-silver { --tier: #cfd6df; }
.jl-tier-gold { --tier: #ffc400; }
.jl-tier-diamond { --tier: #5fd4ff; }
.jl-tier-coin { --tier: #ffb808; }
.jl-tier-combo { --tier: #ff5f8a; }
.jl-tier-other { --tier: #9fb4ff; }

.jl-store-note {
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.jl-store-note span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--jl-muted);
  padding: 8px 14px; border-radius: 30px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
}
.jl-store-note i { color: var(--jl-gold); }
.jl-empty { text-align: center; padding: 50px 20px; color: var(--jl-muted); }
.jl-empty i { font-size: 34px; color: var(--jl-line-strong); display: block; margin-bottom: 12px; }

/* ==========================================================================
   NEWS
   ========================================================================== */
.jl-news { padding: 34px 34px 40px; }
.jl-news-feature {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px solid var(--jl-line); border-radius: var(--jl-radius);
  overflow: hidden; text-decoration: none !important; color: var(--jl-text) !important; margin-bottom: 22px;
  background: linear-gradient(180deg, #1e140a, #120c06); transition: border-color .25s, box-shadow .25s, transform .25s;
}
.jl-news-feature:hover { border-color: var(--jl-line-strong); box-shadow: var(--jl-glow); transform: translateY(-2px); }
.jl-news-media {
  position: relative; min-height: 220px; background-size: cover; background-position: center;
  background-color: #1a1108;
}
.jl-news-media.is-empty {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 184, 8, 0.25), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(242, 99, 50, 0.22), transparent 50%),
    linear-gradient(135deg, #24170a, #0f0904);
  display: grid; place-items: center;
}
.jl-news-media.is-empty i { font-size: 42px; color: rgba(255, 213, 106, 0.55); }
.jl-news-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 7, 4, 0.55)); }
.jl-news-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.jl-news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--jl-muted); }
.jl-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 30px; color: #fff; background: var(--chip, #8a5b00);
}
.jl-news-title { font-family: var(--jl-display); font-size: 20px; line-height: 1.3; color: #fff; margin: 0; letter-spacing: .5px; }
.jl-news-feature .jl-news-title { font-size: 24px; }
.jl-news-excerpt { color: #cdbfa5; font-size: 13.5px; line-height: 1.65; margin: 0; }
.jl-news-more { margin-top: auto; color: var(--jl-gold); font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.jl-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.jl-news-card {
  display: flex; flex-direction: column; border: 1px solid var(--jl-line); border-radius: var(--jl-radius); overflow: hidden;
  background: linear-gradient(180deg, #1c1309, #110b05); text-decoration: none !important; color: var(--jl-text) !important;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.jl-news-card:hover { transform: translateY(-4px); border-color: var(--jl-line-strong); box-shadow: var(--jl-glow); }
.jl-news-card .jl-news-media { min-height: 140px; }
.jl-news-card .jl-news-body { padding: 18px 18px 20px; }
.jl-news-card .jl-news-title { font-size: 16px; }
.jl-news-card .jl-news-excerpt { font-size: 12.5px; }

/* articol */
.jl-article { padding: 0 0 40px; }
.jl-article-hero { position: relative; min-height: 260px; background-size: cover; background-position: center; background-color: #1a1108; display: flex; align-items: flex-end; }
.jl-article-hero.is-empty { background-image: radial-gradient(circle at 25% 30%, rgba(255,184,8,.22), transparent 55%), radial-gradient(circle at 85% 75%, rgba(242,99,50,.2), transparent 50%), linear-gradient(135deg, #24170a, #0f0904); min-height: 200px; }
.jl-article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,4,.15) 0%, rgba(10,7,4,.92) 100%); }
.jl-article-head { position: relative; z-index: 1; padding: 30px 38px 26px; width: 100%; }
.jl-article-head h1 { font-family: var(--jl-display); font-size: 32px; line-height: 1.25; color: #fff; margin: 12px 0 10px; letter-spacing: .6px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.jl-article-content { padding: 30px 38px 0; font-size: 15px; line-height: 1.85; color: #e6dcc8; max-width: 860px; }
.jl-article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.jl-article-content h1, .jl-article-content h2, .jl-article-content h3 { font-family: var(--jl-display); color: #fff3d6; margin: 26px 0 10px; }
.jl-article-content a { color: var(--jl-gold); }
.jl-article-content blockquote { border-left: 3px solid var(--jl-gold); margin: 18px 0; padding: 6px 18px; color: #cdbfa5; background: rgba(255,184,8,.04); border-radius: 0 8px 8px 0; }
.jl-article-foot { padding: 28px 38px 0; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .jl-store, .jl-news { padding: 22px 16px 28px; }
  .jl-news-feature { grid-template-columns: 1fr; }
  .jl-article-head, .jl-article-content, .jl-article-foot { padding-left: 18px; padding-right: 18px; }
  .jl-article-head h1 { font-size: 24px; }
  .shop-header h2 { font-size: 24px; }
}

/* link Logout lizibil */
.web-container .main-top .box-login .info-account ul li a.logout { color: #fff !important; }

/* butoanele din footer (Privacy / Terms / Refund) */
#openFooterPrivacy, #openFooterTerms, #openFooterRefund {
  background: rgba(10, 7, 4, 0.55) !important; border: 1px solid var(--jl-line-strong) !important; color: var(--jl-gold-soft) !important;
  border-radius: 30px !important; padding: 9px 20px !important; letter-spacing: .8px; backdrop-filter: blur(4px);
}
#openFooterPrivacy:hover, #openFooterTerms:hover, #openFooterRefund:hover { background: rgba(255, 184, 8, 0.15) !important; color: #fff !important; }