/* Product Page CSS — matches GGV reference */

/* Title */
.game-title { font-family: 'Rajdhani', sans-serif; font-size: 36px; font-weight: 700; color: var(--text); margin-bottom: 20px; margin-top: 12px; letter-spacing: -0.3px; line-height: 1.15; }

/* Top two-col layout */
.top-row { display: flex; gap: 16px; margin-bottom: 24px; align-items: start; }
.viewer-col { flex: 0 0 780px; max-width: 780px; }

/* Main viewer — full image, no blur, no crop */
.viewer-card { background: #07070f; border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; position: relative; width: 100%; }
.viewer-main-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: opacity 0.2s; }
.viewer-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
.viewer-lbl { font-size: 15px; color: var(--muted); font-weight: 500; }

/* Gallery thumbnails — 3-column card layout */
.gal-grid-wrap { margin-top: 16px; }
.gal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gal-counter {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.gal-nav-btns { display: flex; gap: 4px; }
.gal-nav-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid var(--border);
  color: var(--text2);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.gal-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--text); }
.gal-nav-btn:disabled { opacity: 0.3; cursor: default; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gal-card {
  position: relative;
  aspect-ratio: 16/9;
  background: #07070f;
  border: 1.5px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
}
.gal-card:hover { border-color: rgba(100,116,139,0.4); transform: translateY(-1px); }
.gal-card.active { border-color: var(--accent); }
.gal-card.gal-hidden { display: none; }
.gal-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.gal-card-label {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
  pointer-events: none;
}


/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,0.7); cursor: default; }
.lightbox-close { position: absolute; top: 20px; right: 24px; font-size: 28px; color: rgba(255,255,255,0.6); cursor: pointer; line-height: 1; background: none; border: none; transition: color 0.15s; }
.lightbox-close:hover { color: #fff; }
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 36px; color: rgba(255,255,255,0.5); cursor: pointer; background: rgba(255,255,255,0.06); border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; backdrop-filter: blur(4px); }
.lightbox-arrow:hover { color: #fff; background: rgba(255,255,255,0.12); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Purchase panel */
.purchase-card { flex: 1; background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.purchase-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.launcher-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 5px; letter-spacing: 0.3px; }
.badge-steam    { background: #1a2744; color: #93c5fd; }
.badge-platform { background: #1a2744; color: #93c5fd; }
.badge-global   { background: #1a1a2e; color: #94a3b8; }
/* Product type badges — matches catalog card colors */
.badge-type-base    { background: rgba(34,197,94,0.12);  color: #4ade80; border: 0.5px solid rgba(74,222,128,0.25);  text-transform: uppercase; }
.badge-type-edition { background: rgba(59,130,246,0.12); color: #60a5fa; border: 0.5px solid rgba(96,165,250,0.25);  text-transform: uppercase; }
.badge-type-dlc     { background: rgba(245,158,11,0.12); color: #fbbf24; border: 0.5px solid rgba(251,191,36,0.25);  text-transform: uppercase; }
.badge-type-gift    { background: rgba(20,184,166,0.12); color: #2dd4bf; border: 0.5px solid rgba(45,212,191,0.25);  text-transform: uppercase; }
.price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.price-now { font-family: 'Rajdhani', sans-serif; font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.price-was { font-size: 16px; color: #555; text-decoration: line-through; }
.disc-badge { background: #7c1d1d; color: #fca5a5; font-family: 'Rajdhani', sans-serif; font-size: 34px; font-weight: 700; padding: 2px 10px; border-radius: 6px; line-height: 1.1; }
.divider { height: 0.5px; background: var(--border); }


/* Region box */
.region-box { border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; justify-content: center; }
.region-ok      { background: var(--green-bg); border: 0.5px solid var(--green-border); }
.region-warn    { background: rgba(245,158,11,0.08); border: 0.5px solid rgba(245,158,11,0.3); }
.region-loading { background: rgba(255,255,255,0.03); border: 0.5px solid var(--border); animation: regionPulse 1.4s ease-in-out infinite; }
@keyframes regionPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
.rcheck { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.rcheck-ok      { background: #14532d; color: #86efac; }
.rcheck-warn    { background: rgba(245,158,11,0.15); color: #f59e0b; font-weight: 700; font-size: 13px; }
.rcheck-loading { background: rgba(255,255,255,0.06); color: var(--muted); }
.rtext-main { font-size: 14px; font-weight: 500; color: var(--text); }
.region-warn .rtext-main { color: #f59e0b; }
.region-warn .rtext-main strong { color: #fbbf24; }

/* Buttons */
.redeem-anchor { font-size: 12px; color: #94a3b8; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: center; width: 100%; font-family: 'DM Sans', sans-serif; }
.btn-cart { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 14px 0; font-size: 15px; font-weight: 500; cursor: pointer; width: 100%; transition: background 0.15s; text-align: center; font-family: 'DM Sans', sans-serif; }
.btn-cart:hover { background: var(--accent-h); }
.btn-wish { background: transparent; color: var(--text2); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 13px 0; font-size: 14px; cursor: pointer; width: 100%; transition: all 0.2s; text-align: center; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.2px; }
.btn-wish:hover { color: var(--text); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); }
.btn-wish--active { color: #e34; border-color: rgba(238, 51, 68, 0.35); background: rgba(238, 51, 68, 0.07); }
.btn-wish--active:hover { background: rgba(238, 51, 68, 0.14); border-color: rgba(238, 51, 68, 0.55); }
.btn-wish:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.refund-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.refund-text { font-size: 12px; color: #5a5a7a; text-align: center; }
.refund-text a { color: #7070a0; text-decoration: underline; text-underline-offset: 3px; }

/* Tabs */
.tabs-row { display: flex; border-bottom: 0.5px solid var(--border); margin-top: 32px; }
.tab { font-size: 14px; color: var(--muted); padding: 12px 22px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s; white-space: nowrap; font-family: 'DM Sans', sans-serif; }
.tab:hover { color: #c0c0d8; }
.tab.active { color: #94a3b8; border-bottom-color: var(--accent); }
.tab-card { background: var(--surface); border: 0.5px solid var(--border); border-top: none; border-radius: 0 0 14px 14px; padding: 28px; min-height: 180px; }

/* Description — WordPress HTML content */
.desc-text { font-size: 15px; color: var(--text2); line-height: 1.8; }
.desc-text p { margin-bottom: 14px; }
.desc-text p:last-child { margin-bottom: 0; }
.desc-text h1,.desc-text h2,.desc-text h3,.desc-text h4 { font-family:'Rajdhani',sans-serif; color:var(--text); margin: 20px 0 8px; font-weight:600; }
.desc-text h2 { font-size:20px; }
.desc-text h3 { font-size:17px; }
.desc-text ul,.desc-text ol { padding-left:20px; margin-bottom:14px; }
.desc-text li { margin-bottom:6px; }
.desc-text strong, .desc-text b { color:var(--text); font-weight:600; }
.desc-text a { color:#94a3b8; text-decoration:underline; text-underline-offset:2px; }
.desc-text hr { border:none; border-top:0.5px solid var(--border); margin:20px 0; }
.desc-text img { max-width:100%; border-radius:8px; margin:10px 0; }

/* System requirements */
.sysreq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sysreq-col-title { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 12px; }
.sysreq-row { display: flex; gap: 12px; margin-bottom: 8px; }
.sysreq-key { font-size: 13px; color: #5a5a7a; min-width: 70px; flex-shrink: 0; }
.sysreq-val { font-size: 13px; color: var(--text2); line-height: 1.5; }

/* Languages */
.lang-header-row { display: grid; grid-template-columns: 1fr 100px 100px 100px; padding: 8px 0; border-bottom: 0.5px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
.lang-hcell { font-size: 12px; color: #5a5a7a; text-align: center; }
.lang-hcell:first-child { text-align: left; }
.lang-item { display: grid; grid-template-columns: 1fr 100px 100px 100px; padding: 9px 0; border-bottom: 0.5px solid rgba(255,255,255,0.04); }
.lang-name { font-size: 14px; color: #c0c0d8; }
.lang-cell { text-align: center; font-size: 15px; }

/* How to redeem */
.redeem-methods { display: flex; flex-direction: column; gap: 16px; }
.redeem-method { background: #0f0f1a; border: 0.5px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 16px 18px; }
.redeem-method-title { font-size: 13px; font-weight: 500; color: #c0c0e8; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.method-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 500; }
.mb-instant { background: #0f2a1a; color: #6ee7b7; border: 0.5px solid rgba(110,231,183,0.2); }
.mb-desktop { background: #1a1a0f; color: #fde68a; border: 0.5px solid rgba(253,230,138,0.2); }
.mb-pro { background: #1a0f2a; color: #c4b5fd; border: 0.5px solid rgba(196,181,253,0.2); }
.redeem-steps-list { display: flex; flex-direction: column; gap: 8px; }
.redeem-step { display: flex; gap: 10px; align-items: flex-start; }
.step-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(100,116,139,0.15); color: #94a3b8; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.step-txt { font-size: 13px; color: var(--text2); line-height: 1.6; }
.step-txt strong { color: var(--text); font-weight: 500; }
.step-txt a { color: #94a3b8; text-decoration: underline; text-underline-offset: 2px; }
.redeem-notes { background: #0a0a14; border: 0.5px solid rgba(239,68,68,0.15); border-radius: 8px; padding: 12px 14px; margin-top: 4px; }
.redeem-notes-title { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; }
.redeem-note { font-size: 12px; color: #7a7a9a; line-height: 1.6; display: flex; gap: 8px; margin-bottom: 4px; }
.redeem-note:last-child { margin-bottom: 0; }
.redeem-note::before { content: "·"; color: #5a5a7a; flex-shrink: 0; }

/* More from Vault */
.vault-section { margin-top: 32px; padding-bottom: 40px; }
.vault-title { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 16px; letter-spacing: 0.3px; }
.vault-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.vault-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; text-decoration: none; display: block; }
.vault-card:hover { border-color: rgba(100,116,139,0.35); transform: translateY(-2px); }
.vault-art { aspect-ratio: 16/9; background: #1a1a2a; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #3a3a5a; overflow: hidden; }
.vault-info { padding: 10px 12px; }
.vault-game-name { font-size: 13px; color: #c0c0d8; line-height: 1.3; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-price { font-size: 15px; font-weight: 500; color: var(--text); }
.vault-price-was { font-size: 11px; color: #555; text-decoration: line-through; margin-left: 4px; }

html.light-mode .badge-steam { background: #e0ecff; color: #2563eb; }
html.light-mode .badge-global { background: #f1f5f9; color: #64748b; }
html.light-mode .region-ok { background: #f0fdf4; }
html.light-mode .rcheck-ok { background: #bbf7d0; color: #166534; }
html.light-mode .redeem-method { background: #f5f5fa; }
html.light-mode .redeem-notes { background: #fef2f2; }
html.light-mode .lang-name { color: #333; }

/* ── DLC SECTION ── */
.dlc-section {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 28px;
  margin-bottom: 20px;
}
.dlc-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.dlc-badge-label {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
  border: 0.5px solid rgba(251,191,36,0.25);
  letter-spacing: 0.5px;
}
.dlc-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
}
.dlc-list { display: flex; flex-direction: column; }
.dlc-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.dlc-row:last-child { border-bottom: none; }
.dlc-row:hover { background: rgba(255,255,255,0.025); }
.dlc-thumb-link { display: block; flex-shrink: 0; }
.dlc-thumb {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 5px;
  border: 0.5px solid rgba(255,255,255,0.08);
  display: block;
}
.dlc-thumb-empty {
  width: 56px;
  height: 32px;
  background: #1a1a2e;
  border-radius: 5px;
  border: 0.5px solid rgba(255,255,255,0.08);
}
.dlc-title {
  font-size: 14px;
  color: var(--text2);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlc-title:hover { color: #94a3b8; }
.dlc-price-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  justify-content: flex-end;
}
.dlc-price-now {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.dlc-price-was {
  font-size: 12px;
  color: #555;
  text-decoration: line-through;
}
.dlc-cart-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  background: var(--accent-dim);
  border: 0.5px solid rgba(100,116,139,0.35);
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.dlc-cart-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dlc-cart-form { display: contents; }
.dlc-view-btn {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border2);
  color: var(--text2);
}
.dlc-view-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
}
/* Requires section — keep badge amber, same as DLC */
.dlc-requires-section .dlc-badge-label {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.25);
}