/* Game information page. Scoped so the PS Plus rent page, which shares
   booking classes, keeps its own layout. Width matches the homepage. */

body.gp-redesign .gd-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 2rem 3rem;
  box-sizing: border-box;
}

body.gp-redesign .gp-crumb { margin: 14px 0 10px; color: #a8a8a8; font-size: 13px; }
body.gp-redesign .gp-crumb a { color: #a8a8a8; text-decoration: none; }
body.gp-redesign .gp-crumb a:hover { color: var(--theme-btn, #F5B800); }
body.gp-redesign .gp-crumb b { color: #fff; font-weight: 700; }

body.gp-redesign .gp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: 28px;
  row-gap: 22px;
  align-items: start;
}
body.gp-redesign .gp-grid > * { min-width: 0; }
body.gp-redesign .gp-hero { grid-column: 1; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 22px; align-items: start; }
body.gp-redesign .gp-panel { grid-column: 2; grid-row: 1 / span 3; align-self: start; height: fit-content; }
body.gp-redesign [data-film],
body.gp-redesign .rsv-gallery-section[data-film],
body.gp-redesign .gp-gal { grid-column: 1; margin: 0; }
body.gp-redesign .gp-tabs { grid-column: 1; }
body.gp-redesign .gp-related { grid-column: 1 / -1; }

body.gp-redesign .gd-cover-col { min-width: 0; }
body.gp-redesign .gd-cover-col .gpm,
body.gp-redesign .gd-cover.gdh-poster,
body.gp-redesign .gd-cover-placeholder {
  width: 100%;
  height: 225px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #262626;
  background: #000;
}
body.gp-redesign .gpm-stage { height: 225px; border-radius: 14px; }
body.gp-redesign .gpm-slide img,
body.gp-redesign .gpm-slide video { width: 100%; height: 225px; object-fit: cover; }
body.gp-redesign .gpm-thumbs { display: none; }
body.gp-redesign .gd-platform-badge,
body.gp-redesign .gc-slot-banner { display: none; }

body.gp-redesign .gp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
body.gp-redesign .gp-tag {
  border: 1px solid #333; border-radius: 7px; padding: 5px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #ddd;
}
body.gp-redesign .gp-tag-y { background: var(--theme-btn, #F5B800); color: #0a0a0a; border-color: var(--theme-btn, #F5B800); }
body.gp-redesign h1.usd-title { font-size: 27px; line-height: 1.15; letter-spacing: -0.4px; font-weight: 800; margin: 0; }
body.gp-redesign .gpa-headline { margin-top: 6px; }
body.gp-redesign .gpa-rating { font-size: 14px; }
body.gp-redesign .gp-clamp,
body.gp-redesign .gd-desc.gdh-poster-desc {
  color: #cfcfcf; font-size: 14px; line-height: 1.55; margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.gp-redesign .gp-more {
  background: none; border: 0; padding: 0; margin-top: 4px; color: var(--theme-btn, #F5B800);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
body.gp-redesign .gp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.gp-redesign .gp-chips span {
  background: #141414; border: 1px solid #262626; border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; color: #ddd;
}
body.gp-redesign .gp-chips b { color: #8a8a8a; font-weight: 500; margin-right: 4px; }

body.gp-redesign .gdh-card {
  background: #141414;
  border: 1.5px solid var(--theme-btn, #F5B800);
  border-radius: 16px;
  padding: 16px 18px;
}
body.gp-redesign .gd-price-header { display: none; }
body.gp-redesign .gd-type-guide { margin: 0 0 8px; font-size: 12px; text-align: right; }
body.gp-redesign .gd-type-guide a { color: var(--theme-btn, #F5B800); font-weight: 600; text-decoration: none; }

body.gp-redesign .gp-mode {
  display: grid; grid-template-columns: 1fr 1fr; background: #0d0d0d;
  border: 1px solid #262626; border-radius: 12px; padding: 4px; margin-bottom: 12px; gap: 4px;
}
body.gp-redesign .gp-mode button {
  border: 0; background: transparent; color: #a8a8a8; border-radius: 9px;
  padding: 7px; font-weight: 700; font-size: 13px; cursor: pointer;
}
body.gp-redesign .gp-mode button.on { background: var(--theme-btn, #F5B800); color: #0a0a0a; }

body.gp-redesign #typeOptions { display: flex; flex-direction: column; gap: 6px; flex-wrap: nowrap; }
body.gp-redesign #typeOptions .gd-type-pill { flex: none; width: 100%; }
body.gp-redesign .gd-type-card.gd-type-pill {
  display: flex; align-items: center; gap: 10px; margin: 0;
  border: 1px solid #2e2e2e; border-radius: 12px; padding: 8px 12px; background: #101010;
}
body.gp-redesign .gd-type-card.gd-type-selected {
  border: 2px solid var(--theme-btn, #F5B800); background: #161204;
}
body.gp-redesign .gd-type-name { font-size: 15px; }
body.gp-redesign .gd-duration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px !important; }
body.gp-redesign .gd-dur-btn { align-items: flex-start; text-align: left; padding: 8px 12px; border-radius: 12px; background: #101010; border: 1px solid #2e2e2e; }
body.gp-redesign .gd-dur-btn.active { border: 2px solid var(--theme-btn, #F5B800); background: #161204; }
body.gp-redesign .gd-dur-days { font-size: 12px; color: #a8a8a8; }
body.gp-redesign .gd-dur-price { font-size: 19px; font-weight: 800; }

body.gp-redesign .gp-hint { margin-top: 8px; font-size: 13px; color: var(--theme-btn, #F5B800); }
body.gp-redesign .gp-hint code { font-size: 12px; }

body.gp-redesign .vc { margin-top: 12px; }
body.gp-redesign .vc .lb { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #8a8a8a; text-transform: uppercase; }
body.gp-redesign .vrow { display: flex; gap: 8px; }
body.gp-redesign .vin {
  flex: 1; height: 46px; border: 1px solid #333; background: #0d0d0d; border-radius: 10px;
  padding: 0 14px; color: #fff; font-size: 15px;
}
body.gp-redesign .vin::placeholder { color: #777; }
body.gp-redesign .vin.f { font-weight: 700; letter-spacing: 1px; }
body.gp-redesign .vin.err { border-color: #E5243B; }
body.gp-redesign .vbtn {
  height: 46px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--theme-btn, #F5B800); color: #0a0a0a; font-weight: 800;
}
body.gp-redesign .vbtn.dis, body.gp-redesign .vbtn:disabled { background: #2a2a2a; color: #777; cursor: default; }
body.gp-redesign .vok {
  display: flex; align-items: center; gap: 10px; background: #0f2a17; border: 1px solid #2f8f50;
  border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; color: #a9f0bf;
}
body.gp-redesign .vok code { background: #0a0a0a; padding: 1px 4px; border-radius: 4px; }
body.gp-redesign .vok button { margin-left: auto; background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 600; }
body.gp-redesign .verr {
  margin-top: 8px; background: #2a0d11; border: 1px solid #E5243B; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; color: #ffb3bc; line-height: 1.45;
}
body.gp-redesign .verr .vact {
  background: none; border: 0; padding: 0; color: var(--theme-btn, #F5B800);
  font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 14px;
}
body.gp-redesign .vfine { font-size: 12px; color: #8a8a8a; margin-top: 6px; line-height: 1.45; }
body.gp-redesign .vmore { display: block; margin-top: 8px; background: none; border: 0; padding: 0; color: var(--theme-btn, #F5B800); font-weight: 700; font-size: 13px; cursor: pointer; }
body.gp-redesign [hidden] { display: none !important; }

body.gp-redesign .gd-total-box { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #333; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; }
body.gp-redesign .gd-total-label { display: none; }
body.gp-redesign .gd-total-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 14px; color: #cfcfcf; }
body.gp-redesign .gd-total-disc { color: #7ee2a0; }
body.gp-redesign .gd-total-final { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 8px; border-top: 1px solid #2a2a2a; font-size: 18px; font-weight: 800; }
body.gp-redesign #totalFinal { color: var(--theme-btn, #F5B800); font-size: 22px; }
body.gp-redesign .gd-total-refund { font-size: 12px; color: #a8a8a8; margin-top: 4px; }

body.gp-redesign .gd-msg-primary {
  background: var(--theme-btn, #F5B800); color: #0a0a0a; box-shadow: none; border-radius: 12px; margin-top: 10px;
}
body.gp-redesign .gd-msg-main { color: #0a0a0a; }
body.gp-redesign .gd-msg-sub { color: #3a2a00; }
body.gp-redesign .gd-msg-preview { margin-top: 8px; }
body.gp-redesign .gd-alt-order { margin-top: 8px; }

body.gp-redesign .gp-gal-h,
body.gp-redesign [data-film] .gp-gal-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
body.gp-redesign .gp-gal-h h2 { font-size: 16px; margin: 0; }
body.gp-redesign .gp-gal-count { color: #a8a8a8; font-size: 13px; }
body.gp-redesign .gp-viewall { margin-left: auto; background: none; border: 0; color: var(--theme-btn, #F5B800); font-weight: 700; font-size: 13px; cursor: pointer; }
body.gp-redesign [data-film] .gd-slider { position: relative; }
body.gp-redesign [data-film] { align-self: start; height: auto; }
body.gp-redesign [data-film] .gd-slider { height: auto; overflow: visible; }
body.gp-redesign [data-film] .gd-slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 200px; grid-template-rows: 112px;
  gap: 10px; height: 112px; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
body.gp-redesign [data-film] .gd-slider-track::-webkit-scrollbar { display: none; }
body.gp-redesign .gp-shot {
  width: 200px; height: 112px; padding: 0; background: none; cursor: pointer; scroll-snap-align: start; border-radius: 10px; overflow: hidden;
}
body.gp-redesign .gp-shot img { width: 200px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid #262626; display: block; }
body.gp-redesign .gp-shot.on img { border: 2px solid var(--theme-btn, #F5B800); }
body.gp-redesign [data-film] .gd-slider-arrow {
  position: static; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #333;
  background: transparent; color: #fff; display: grid; place-items: center;
}
body.gp-redesign [data-film] .gd-slider-dots {
  position: static; bottom: auto; left: auto; right: auto; z-index: auto;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%; margin: 12px 0 0; padding: 0;
}
body.gp-redesign [data-film] .gd-dot {
  width: 28px; height: 8px; border-radius: 4px; background: #5a5a5a; border: 0; padding: 0; cursor: pointer;
}
body.gp-redesign [data-film] .gd-dot.active { background: var(--theme-btn, #F5B800); }
body.gp-redesign .gp-lb {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(0, 0, 0, 0.92); color: #fff;
}
body.gp-redesign .gp-lb::backdrop { background: rgba(0, 0, 0, 0.92); }
body.gp-redesign .gp-lb-frame {
  height: 100%; box-sizing: border-box; padding: 16px 12px 24px;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px 10px;
}
body.gp-redesign .gp-lb-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 16px; }
body.gp-redesign .gp-lb-x, body.gp-redesign .gp-lb-nav {
  background: #1a1a1a; color: #fff; border: 1px solid #444; border-radius: 10px; cursor: pointer; font-weight: 800;
}
body.gp-redesign .gp-lb-x { padding: 8px 14px; font-size: 14px; }
body.gp-redesign .gp-lb-nav { width: 52px; height: 52px; font-size: 28px; }
body.gp-redesign .gp-lb img { grid-column: 2; justify-self: center; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 8px; }

body.gp-redesign .gp-tabs { background: #141414; border: 1px solid #262626; border-radius: 16px; overflow: hidden; }
body.gp-redesign .gp-tablist { display: flex; border-bottom: 1px solid #262626; }
body.gp-redesign .gp-tab {
  background: none; border: 0; padding: 13px 20px; font-weight: 700; font-size: 14px; color: #a8a8a8; cursor: pointer;
}
body.gp-redesign .gp-tab.on { color: #fff; box-shadow: inset 0 -3px var(--theme-btn, #F5B800); }
body.gp-redesign .gp-pane { padding: 16px 20px; }
body.gp-redesign .gp-before { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body.gp-redesign .gp-bi { display: flex; gap: 10px; font-size: 14px; color: #ddd; line-height: 1.45; }
body.gp-redesign .gp-bi span { font-size: 20px; }
body.gp-redesign .gp-bi b { display: block; color: #fff; }
body.gp-redesign .gp-before-ft { margin: 12px 0 0; font-size: 13px; color: #a8a8a8; }
body.gp-redesign .gp-before-ft b,
body.gp-redesign .gp-before-ft a { color: var(--theme-btn, #F5B800); }
body.gp-redesign .gp-details-copy { color: #cfcfcf; font-size: 14px; line-height: 1.55; }
body.gp-redesign #gpPaneDetails .gpa { max-width: none; margin: 0; padding: 0; }

body.gp-redesign .gp-related-h { display: flex; align-items: center; margin: 6px 0 12px; }
body.gp-redesign .gp-related-h h2 { font-size: 22px; margin: 0; }
body.gp-redesign .gp-o { color: var(--theme-btn, #F5B800); }
body.gp-redesign .gp-related-h a { margin-left: auto; color: var(--theme-btn, #F5B800); font-weight: 700; font-size: 13px; text-decoration: none; }
body.gp-redesign .gp-related-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; min-width: 0; }
body.gp-redesign .gp-rel {
  display: flex; gap: 10px; align-items: center; background: #141414; border: 1px solid #262626;
  border-radius: 12px; padding: 8px; text-decoration: none; color: #fff; min-width: 0;
}
body.gp-redesign .gp-rel img, body.gp-redesign .gp-rel-ph { width: 46px; height: 60px; object-fit: cover; border-radius: 7px; flex: none; background: #222; }
body.gp-redesign .gp-rel b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
body.gp-redesign .gp-rel small { font-size: 12px; color: #a8a8a8; }

@media (max-width: 900px) {
  body.gp-redesign .gd-page { padding: 8px 16px 6rem; }
  body.gp-redesign .gp-grid { grid-template-columns: 1fr; }
  body.gp-redesign .gp-hero { grid-template-columns: 1fr; gap: 12px; order: 1; }
  body.gp-redesign .gp-panel { grid-column: 1; grid-row: auto; order: 2; }
  body.gp-redesign [data-film],
  body.gp-redesign .rsv-gallery-section[data-film],
  body.gp-redesign .gp-gal { order: 3; }
  body.gp-redesign .gp-tabs { order: 4; }
  body.gp-redesign .gp-related { order: 5; }
  body.gp-redesign .gd-cover-col .gpm,
  body.gp-redesign .gd-cover.gdh-poster,
  body.gp-redesign .gpm-stage,
  body.gp-redesign .gpm-slide img,
  body.gp-redesign .gpm-slide video { height: 200px; }
  body.gp-redesign h1.usd-title { font-size: 24px; }
  body.gp-redesign [data-film] .gd-slider-arrow { display: none; }
  body.gp-redesign [data-film] .gd-slider-track { grid-auto-columns: 250px; grid-template-rows: 140px; height: 140px; }
  body.gp-redesign .gp-shot, body.gp-redesign .gp-shot img { width: 250px; height: 140px; }
  body.gp-redesign .gp-before { grid-template-columns: 1fr; gap: 10px; }
  body.gp-redesign .gp-tab { padding: 12px 10px; font-size: 12.5px; white-space: nowrap; }
  body.gp-redesign .gp-tablist { overflow-x: auto; }
  body.gp-redesign .gp-related-row { grid-auto-flow: column; grid-auto-columns: 220px; grid-template-columns: none; overflow-x: auto; max-width: 100%; }
  body.gp-redesign .gd-sticky-bar { border-top: 1.5px solid var(--theme-btn, #F5B800); background: #111; }
  body.gp-redesign .gd-sb-btn { background: var(--theme-btn, #F5B800); color: #0a0a0a; }
  body.gp-redesign .gd-sb-amount { color: #fff; font-size: 20px; }
  body.gp-redesign .gd-sb-code { color: #7ee2a0; font-size: 12px; font-weight: 700; }
}