/* Dedicated Pack page stylesheet. Kept separate so this experience remains isolated from the store theme. */
:root {
  --pack-accent: hsl(var(--primary));
  --pack-accent-strong: hsl(var(--primary));
  --pack-violet: hsl(var(--secondary));
  --pack-bg: rgb(var(--background));
  --pack-panel: rgba(11, 13, 20, 0.92);
  --pack-line: rgba(255, 255, 255, 0.13);
}

html.is-pack-page,
html.is-pack-page body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

html.is-pack-page body {
  min-height: 100%;
  background: var(--pack-bg) !important;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), radial-gradient(circle at 78% 0%, hsl(var(--secondary) / 0.07), transparent 27%), radial-gradient(circle at 42% 0%, hsl(var(--primary) / 0.08), transparent 34%), linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 40px 40px, 40px 40px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat !important;
}

body.is-pack-page {
  overflow-x: hidden;
  margin: 0 !important;
  background-color: var(--pack-bg) !important;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), radial-gradient(circle at 78% 0%, hsl(var(--secondary) / 0.07), transparent 27%), radial-gradient(circle at 42% 0%, hsl(var(--primary) / 0.08), transparent 34%), linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 40px 40px, 40px 40px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat !important;
}

body.is-pack-page #gambiarra-navbar {
  display: block !important;
}

body.is-pack-page > footer,
body.is-pack-page #floating-contact-buttons,
body.is-pack-page #dialog-welcome {
  display: none !important;
}

body.is-pack-page > main {
  display: block !important;
  width: 100%;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

.pack-page,
.pack-page * {
  box-sizing: border-box;
}

.pack-page [data-lucide] {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.pack-page .pack-page-kicker [data-lucide],
.pack-page .pack-steam-chip [data-lucide] {
  width: 13px;
  height: 13px;
}

.pack-page .pack-title-icon {
  width: 31px;
  height: 31px;
}

.pack-page-kicker-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 2px solid var(--pack-violet);
  border-radius: 50%;
  box-shadow: 0 0 10px hsl(var(--secondary) / 0.7);
}

.pack-page .pack-card-check [data-lucide],
.pack-page .pack-card-button [data-lucide],
.pack-page .pack-modal-item-remove [data-lucide] {
  width: 14px;
  height: 14px;
}

.pack-page {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background: transparent;
  font-family: 'Geist', Arial, sans-serif;
}

.pack-page::before {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: 0.56;
  background-image: linear-gradient(rgba(47, 64, 91, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 64, 91, 0.18) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
}

.pack-page::after {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 78% 0%, hsl(var(--secondary) / 0.16), transparent 27%), radial-gradient(circle at 42% 0%, hsl(var(--primary) / 0.1), transparent 34%);
}

.pack-page-grid { display: none; }

.pack-container {
  position: relative;
  z-index: 1;
  width: min(1060px, calc(100% - 32px));
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 25px 0 76px;
}

.pack-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: hsl(var(--primary));
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.pack-back-link:hover { color: var(--pack-accent); }

.pack-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px 40px;
  color: var(--pack-violet);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pack-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  min-width: 0;
}

.pack-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f6f8fc;
  font-family: 'Kanit', 'Geist', sans-serif;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.8px;
}

.pack-title span { color: var(--pack-accent); }
.pack-title-icon { width: 30px; height: 30px; color: var(--pack-accent); filter: drop-shadow(0 0 12px hsl(var(--primary) / 0.45)); }

.pack-subtitle {
  margin: 8px 0 0 40px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.pack-subtitle strong { color: #fff; }

.pack-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  border: 1px solid hsl(var(--secondary) / 0.68);
  border-radius: 999px;
  padding: 7px 13px;
  color: hsl(var(--secondary));
  background: hsl(var(--secondary) / 0.08);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pack-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  padding: 11px 13px;
  background: rgba(14, 14, 18, 0.92);
  min-width: 0;
  box-shadow: 0 17px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px hsl(var(--secondary) / 0.05);
}

.pack-selection-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  color: #f6f7fa;
  font-size: 12px;
}

.pack-selection-copy strong { white-space: nowrap; }
#pack-selection-count { color: var(--pack-accent); font-weight: 900; white-space: nowrap; }

.pack-confirm-button,
.pack-checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  transition: 0.2s ease;
}

.pack-confirm-button { flex: 0 0 160px; height: 38px; }
.pack-confirm-button:disabled { cursor: not-allowed; }
.pack-confirm-button.is-ready { border-color: var(--pack-accent); color: rgb(var(--background)); background: var(--pack-accent); box-shadow: 0 10px 26px hsl(var(--primary) / 0.2); cursor: pointer; }
.pack-confirm-button.is-ready:hover, .pack-checkout-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.pack-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 18px; }
.pack-toolbar-meta { display: flex; align-items: center; gap: 10px; }
.pack-steam-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid hsl(var(--primary) / 0.28); border-radius: 999px; padding: 5px 9px; color: var(--pack-accent); background: hsl(var(--primary) / 0.06); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.pack-filters { display: flex; align-items: center; gap: 7px; margin: -3px 0 16px; overflow-x: auto; scrollbar-width: none; }
.pack-filters::-webkit-scrollbar { display: none; }
.pack-filter { flex: 0 0 auto; height: 29px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0 12px; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.035); font-size: 10px; font-weight: 850; transition: 0.2s ease; }
.pack-filter:hover { border-color: hsl(var(--primary) / 0.45); color: #fff; }
.pack-filter.is-active { border-color: hsl(var(--primary) / 0.7); color: rgb(var(--background)); background: var(--pack-accent); box-shadow: 0 7px 18px hsl(var(--primary) / 0.13); }

.pack-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(340px, 100%);
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(4, 8, 18, 0.78);
}

.pack-search:focus-within { border-color: var(--pack-accent); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.11); }
.pack-search input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0; color: #fff; background: transparent; font: inherit; font-size: 12px; }
.pack-search input::placeholder { color: rgba(255, 255, 255, 0.38); }
.pack-result-count { color: rgba(255, 255, 255, 0.42); font-size: 11px; font-weight: 800; }

.pack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; min-width: 0; }

.pack-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(9, 13, 24, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pack-card:hover, .pack-card.is-selected { border-color: hsl(var(--primary) / 0.76); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16), 0 12px 28px rgba(0, 0, 0, 0.22); transform: translateY(-2px); }

.pack-card-image { position: relative; aspect-ratio: 1.82 / 1; overflow: hidden; background: #172133; }
.pack-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pack-card-image::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(to bottom, transparent 38%, rgba(6, 10, 18, 0.42)); }
.pack-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(255, 255, 255, 0.4); }

.pack-card-check { position: absolute; z-index: 1; top: 7px; right: 7px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; color: transparent; background: rgba(0, 0, 0, 0.28); }
.pack-card.is-selected .pack-card-check { border-color: var(--pack-accent); color: rgb(var(--background)); background: var(--pack-accent); }

.pack-card-body { padding: 8px 8px 9px; }
.pack-card-topline { display: none !important; }
.pack-card-body h3 { display: -webkit-box; min-height: 29px; margin: 0 0 5px; overflow: hidden; color: #f0f3f8; font-size: 11px; font-weight: 900; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pack-card-price { display: block; margin-bottom: 8px; color: var(--pack-accent); font-size: 11px; font-weight: 950; }
.pack-card-price small { margin-left: 1px; font-size: 9px; }

.pack-card-button { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 26px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 7px; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.025); font-size: 10px; font-weight: 800; transition: 0.2s ease; }
.pack-card-button:hover, .pack-card.is-selected .pack-card-button { border-color: hsl(var(--primary) / 0.56); color: var(--pack-accent); background: hsl(var(--primary) / 0.08); }

.pack-empty-state { min-height: 260px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: rgba(255, 255, 255, 0.45); }
.pack-empty-state:not(.hidden) { display: flex; }
.pack-empty-state strong { color: #fff; font-size: 14px; }
.pack-empty-state span { font-size: 12px; }

.pack-modal { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100vw; overflow: hidden; padding: 18px; }
.pack-modal.is-open { display: flex; }
.pack-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); }
.pack-modal-panel { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 430px); max-height: min(760px, calc(100vh - 28px)); overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 17px; padding: 15px; background: linear-gradient(180deg, rgb(var(--muted-solid)), rgb(var(--background))); box-shadow: 0 25px 75px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.04); animation: pack-modal-in 0.22s ease both; scrollbar-width: thin; scrollbar-color: hsl(var(--primary) / 0.65) transparent; }
@keyframes pack-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.pack-modal-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.pack-modal-heading-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid hsl(var(--primary) / 0.45); border-radius: 10px; color: var(--pack-accent); background: hsl(var(--primary) / 0.08); }
.pack-kicker { display: block; margin-bottom: 1px; color: var(--pack-accent); font-size: 9px; font-weight: 950; letter-spacing: 0.04em; text-transform: uppercase; }
.pack-modal-heading h2 { margin: 0; color: #fff; font-size: 14px; font-weight: 950; }
.pack-modal-close { display: grid; width: 28px; height: 28px; margin-left: auto; place-items: center; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; color: rgba(255, 255, 255, 0.55); background: transparent; }

.pack-code-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pack-code-label { flex: 0 0 auto; color: rgba(255, 255, 255, 0.4); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.pack-code-row input { width: 100%; height: 30px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 0 10px; color: #e9eef6; background: #080b17; font: inherit; font-size: 11px; font-weight: 800; }
.pack-code-row button { flex: 0 0 96px; height: 30px; border: 0; border-radius: 8px; color: rgb(var(--background)); background: var(--pack-accent); font-size: 10px; font-weight: 950; }
.pack-modal-items { display: grid; gap: 7px; }
.pack-modal-item { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 73px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 11px; padding: 9px; background: rgba(255, 255, 255, 0.018); }
.pack-modal-item-image { display: grid; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; place-items: center; border-radius: 7px; color: rgba(255, 255, 255, 0.4); background: #263042; }
.pack-modal-item-image img { width: 100%; height: 100%; object-fit: cover; }
.pack-modal-item-info { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.pack-modal-item-info > span { display: block; color: var(--pack-accent); font-size: 9px; font-weight: 950; text-transform: uppercase; }
.pack-modal-item-info strong, .pack-modal-item-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-modal-item-info strong { color: #f7f7f7; font-size: 11px; font-weight: 900; }
.pack-modal-item-info small { color: #f1f1f1; font-size: 10px; font-weight: 700; }
.pack-modal-item-info b { display: block; color: var(--pack-accent); font-size: 10px; font-weight: 950; }
.pack-modal-item-remove { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 0; border-radius: 50%; color: rgb(var(--background)); background: var(--pack-accent); }

.pack-promotion-box { margin-top: 11px; border: 1px solid hsl(var(--primary) / 0.65); border-radius: 11px; padding: 10px; background: linear-gradient(135deg, hsl(var(--primary) / 0.06), hsl(var(--secondary) / 0.05)); }
.pack-promotion-title { margin-bottom: 8px; color: var(--pack-accent); font-size: 9px; font-weight: 950; letter-spacing: 0.04em; text-transform: uppercase; }
.pack-promotion-line { display: flex; align-items: flex-start; gap: 8px; color: rgba(255, 255, 255, 0.62); font-size: 10px; line-height: 1.35; }
.pack-promotion-line + .pack-promotion-line { margin-top: 9px; }
.pack-promotion-line strong { color: #fff; }
.pack-promotion-icon { display: grid; flex: 0 0 19px; width: 19px; height: 19px; place-items: center; color: var(--pack-accent); }
.pack-modal-pricing { margin: 12px 2px 10px; color: rgba(255, 255, 255, 0.55); font-size: 11px; }
.pack-modal-pricing > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 3px 0; }
.pack-modal-pricing strong { color: #f4f5f7; font-weight: 900; }
.pack-modal-pricing > div:nth-child(2) strong { color: var(--pack-accent); }
.pack-modal-pricing .pack-modal-total { margin-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 9px; color: #fff; font-size: 13px; }
.pack-modal-total strong { color: var(--pack-accent); font-size: 16px; }
.pack-checkout-button { width: 100%; height: 38px; border-color: hsl(var(--primary) / 0.8); color: rgb(var(--background)); background: var(--pack-accent); box-shadow: 0 10px 24px hsl(var(--primary) / 0.16); cursor: pointer; }
.pack-checkout-button:disabled { opacity: 0.68; cursor: wait; }
.pack-continue-button { display: block; width: 100%; margin-top: 8px; border: 0; color: rgba(255, 255, 255, 0.42); background: transparent; font-size: 10px; font-weight: 700; text-align: center; }
.pack-continue-button:hover { color: #fff; }
.pack-toast { border: 1px solid hsl(var(--primary) / 0.45); border-radius: 9px; color: rgb(var(--background)); background: var(--pack-accent); font-weight: 800; }
body.pack-modal-open { overflow: hidden; }

@media (max-width: 940px) { .pack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pack-container { width: min(100% - 24px, 560px); padding-top: 18px; padding-bottom: 60px; }
  .pack-back-link { margin-bottom: 16px; }
  .pack-header { flex-direction: column; gap: 11px; margin-bottom: 20px; }
  .pack-header > div:first-child { width: 100%; }
  .pack-active-badge { align-self: flex-end; margin-top: 0; padding: 6px 11px; }
  .pack-title { font-size: clamp(30px, 9vw, 39px); }
  .pack-title-icon { width: 25px; height: 25px; }
  .pack-page-kicker { margin-left: 35px; }
  .pack-subtitle { margin: 8px 0 0 35px; max-width: calc(100% - 35px); line-height: 1.4; }
  .pack-selection-bar { align-items: stretch; flex-direction: column; gap: 10px; padding: 11px; }
  .pack-selection-copy { font-size: 11px; }
  .pack-confirm-button { flex: 1; width: 100%; }
  .pack-toolbar-meta { justify-content: space-between; }
  .pack-filters { margin-top: -1px; }
  .pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pack-card-image { aspect-ratio: 1.68 / 1; }
}
@media (max-width: 500px) {
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pack-card-image { aspect-ratio: 1.55 / 1; }
  .pack-toolbar { align-items: center; flex-direction: row; gap: 9px; }
  .pack-search { width: auto; min-width: 0; flex: 1 1 auto; }
  .pack-result-count { text-align: right; }
}

@media (max-width: 380px) {
  .pack-title { font-size: 30px; }
  .pack-title-icon { width: 23px; height: 23px; }
  .pack-subtitle { margin-left: 33px; max-width: calc(100% - 33px); font-size: 12px; }
  .pack-selection-copy { align-items: flex-start; flex-direction: column; gap: 5px; }
  .pack-result-count { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}