/* ============================================================
   Front-end theme tweaks (loaded after pipui.theme.css)
   ============================================================ */

/* Close (×) for the mobile buy-panel overlay — hidden on desktop (sidebar layout). */
.donate-panel-close {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.06);
	color: #cdd7ee;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	transition: background-color .15s ease, color .15s ease;
}
.donate-panel-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Selected-item artwork — small rounded tile in the top-right corner of the buy
   modal (set by JS on item select). */
.donate-panel .modal-content { position: relative; }
.donate-panel .donate-item-image {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 76px;
	height: 76px;
	margin: 0;
	/* art fills the tile so the border-radius clips its corners (rounded image);
	   clip the art to the padding-box so the border stays visible at the corners */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-clip: padding-box;
	background-color: rgba(125, 211, 252, 0.07);
	border: 1px solid rgba(125, 211, 252, 0.25);
	border-radius: 16px;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
	z-index: 2;
}

/* ---- Stepper (+/- quantity) — one unified dark control ---- */
.donate-panel #input-stepper { margin-top: 2px; }
.donate-panel #input-stepper .stepper-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #9fb0cf;
	margin-bottom: 8px;
}
.donate-panel #input-stepper .stepper-row {
	display: flex;
	align-items: stretch;
	height: 50px;
	max-width: 230px;
	margin: 0 auto;
	border: 1px solid rgba(46, 204, 113, 0.30);
	border-radius: 14px;
	overflow: hidden;
	background: #16223c;
	box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.05);
}
.donate-panel #input-stepper .stepper-btn {
	flex: 0 0 56px;
	margin: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: rgba(46, 204, 113, 0.16);
	color: #34d399;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.donate-panel #input-stepper .stepper-btn:hover {
	background: rgba(46, 204, 113, 0.28);
	color: #5ef0ad;
}
.donate-panel #input-stepper .stepper-btn:active {
	background: rgba(46, 204, 113, 0.38);
}
.donate-panel #input-stepper #stepper-amount {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	/* Override the global .donate-panel input rule (height/line-height: 56px) which made
	   the field taller than the 50px row and pushed the number below centre. */
	height: 50px;
	line-height: 50px;
	border: none;
	border-left: 1px solid rgba(46, 204, 113, 0.18);
	border-right: 1px solid rgba(46, 204, 113, 0.18);
	border-radius: 0;
	background: transparent;
	color: #eaf1ff;
	font-size: 22px;
	font-weight: 800;
	text-align: center;
	box-shadow: none;
	appearance: textfield;
	-moz-appearance: textfield;
}
.donate-panel #input-stepper #stepper-amount:focus { outline: none; box-shadow: none; }
.donate-panel #input-stepper #stepper-amount::-webkit-outer-spin-button,
.donate-panel #input-stepper #stepper-amount::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ============================================================
   Token pack picker (launcher card → modal with pack cards)
   ============================================================ */
/* Blur the page behind the overlay (same glass feel as the buy modal). */
.modal.pack-modal {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Dark modal shell — match the existing dark payment-method modal. pipui's
   default wrapper is a fixed 600px white box, too narrow/light for the grid. */
.modal.pack-modal > .wrapper {
	width: min(1080px, calc(100vw - 32px));
	/* sit below the fixed navbar (≈80px) instead of vertically centering, so a
	   tall modal never tucks its top behind the navbar */
	align-items: start;
	padding: 58px 16px 18px;
}
.modal.pack-modal > .wrapper > .modal-content {
	color: #eaf1ff;
	border: 1px solid rgba(125, 211, 252, 0.22);
	border-radius: 20px;
	background:
		radial-gradient(120% 70% at 50% -10%, rgba(56, 189, 248, 0.12), transparent 60%),
		linear-gradient(180deg, rgba(20, 31, 50, 0.98), rgba(11, 18, 32, 0.99));
	box-shadow:
		0 30px 100px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset,
		0 0 60px rgba(56, 189, 248, 0.10);
	position: relative;
	padding: 14px 26px 16px;
}
/* Corner × (reuses .donate-panel-close) instead of the old "Закрыть" footer button. */
.modal.pack-modal .donate-panel-close { display: flex; }
.modal.pack-modal .modal-header {
	color: #f8fafc;
	font-weight: 900;
	font-size: 27px;
	text-align: center;
	padding-bottom: 4px;
}
/* Kill pipui's structural #eee divider lines (its 4-class selector outranks a
   plain .modal-header rule, so override with the full path). */
.modal.pack-modal > .wrapper > .modal-content > .modal-header { border-bottom: none; }
.modal.pack-modal > .wrapper > .modal-content > .modal-footer { border-top: none; }
.modal.pack-modal .pack-subtitle {
	text-align: center;
	color: #9fb0cf;
	font-size: 14.5px;
	font-weight: 600;
	margin: 6px 0 22px;
}
.modal.pack-modal .pack-subtitle i { color: #34d399; margin-left: 4px; }
.modal.pack-modal .modal-body {
	padding: 10px 0 4px;
	max-height: 78vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.modal.pack-modal .modal-footer {
	border-top: none;
	text-align: center;
	padding-top: 12px;
}
.modal.pack-modal .modal-footer .btn {
	color: #cdd7ee;
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 12px;
	font-size: 15px;
}
.modal.pack-modal .modal-footer .btn:hover { color: #fff; border-color: rgba(148, 163, 184, 0.45); }

.pack-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 760px) { .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .pack-grid { grid-template-columns: 1fr; } }

/* The hidden data payload leaks into the modal (the grid CSS that hides it only
   covers the main shop); hide it here too. */
.pack-grid .pack-card .data { display: none !important; }

/* Layout mirrors concept "Вариант 1": icon top-left + badge top-right, with the
   amount / bonus / price-row anchored to the bottom and left-aligned. */
.pack-grid .pack-card {
	--accent: 56, 189, 248; /* default neutral blue; tiers override below */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 14px 18px 16px;
	text-align: center;
	cursor: pointer;
	overflow: hidden; /* clip the diagonal corner ribbon to the card edge */
	border: 1px solid rgba(125, 211, 252, 0.16);
	border-radius: 20px;
	background:
		radial-gradient(75% 60% at 100% 0%, rgba(125, 211, 252, 0.05), transparent 62%),
		rgba(11, 20, 35, 0.86);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
/* Hover: only the artwork zooms (below). The card itself does NOT scale —
   scaling pushed edge cards' border/ribbon past the modal's clip, and the
   box-shadow got clipped into a broken strip. */
.pack-grid .pack-card:hover {
	border-color: rgba(125, 211, 252, 0.42);
}

.pack-grid .pack-top {
	display: flex;
	justify-content: center;
	width: 100%;
}
.pack-grid .pack-card .image {
	width: 158px;
	height: 158px;
	margin: 2px auto 0;
	flex: none;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/* no frame/border around the artwork — just the image with soft depth */
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
	transition: transform .16s ease;
}
.pack-grid .pack-card:hover .image { transform: scale(1.06); }

/* Diagonal corner ribbon (like "BEST VALUE"). The card's overflow:hidden clips
   the ribbon ends flush to the top-right corner. */
.pack-grid .pack-badge {
	position: absolute;
	top: 24px;
	right: -48px;
	width: 182px;
	padding: 10px 0;
	transform: rotate(45deg);
	/* darkened accent (dark overlay) so the white text always reads, not neon */
	background: linear-gradient(rgba(7, 14, 28, 0.52), rgba(7, 14, 28, 0.52)), rgb(var(--accent));
	color: #fff;
	text-align: center;
	font-weight: 900;
	font-size: 13.5px;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.42);
	z-index: 2;
}

.pack-grid .pack-body {
	width: 100%;
	margin-top: auto;
	padding-top: 8px;
}
.pack-grid .pack-card .title { /* amount */
	font-size: 24px;
	font-weight: 900;
	color: #f1f6ff;
	line-height: 1.05;
}
.pack-grid .pack-card .pack-bonus {
	margin-top: 9px;
	font-size: 14px;
	font-weight: 800;
	color: #5eead4;
}
.pack-grid .pack-price-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}
.pack-grid .pack-card .price {
	font-size: 29px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
}
.pack-grid .pack-card .price span { font-size: 29px; }
/* The ₽ is a FontAwesome icon. In SVG mode FA swaps <i> for <svg>, which sizes
   to 1em (the price size) — so target both <i> and <svg> and keep it small. */
.pack-grid .pack-card .price i,
.pack-grid .pack-card .price svg {
	color: #8b99ba;
	font-size: 15px;
	vertical-align: 1px;
}
.pack-grid .pack-choose {
	width: auto;
	border-radius: 12px;
	padding: 11px 54px;
	background: linear-gradient(135deg, #28a06a, #1c8f5c);
	color: #ffffff;
	font-weight: 900;
	font-size: 14px;
	white-space: nowrap;
	transition: filter .15s ease;
}
.pack-grid .pack-card:hover .pack-choose { filter: brightness(1.07); }

/* Featured cards — coloured per tier via --accent. Glow is a soft accent only in
   the top-right corner (low opacity) so it reads as a tint, not a harsh spotlight. */
.pack-grid .pack-card-featured {
	border-color: rgba(var(--accent), 0.55);
	background:
		radial-gradient(80% 62% at 100% 0%, rgba(var(--accent), 0.12), transparent 60%),
		rgba(12, 22, 38, 0.90);
	box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.14);
}
.pack-grid .pack-card-featured:hover {
	border-color: rgba(var(--accent), 0.78);
}
.pack-grid .pack-card-featured .image {
	/* accent-tinted glow instead of a box/border around the artwork */
	filter: drop-shadow(0 8px 18px rgba(var(--accent), 0.40));
}
.pack-grid .pack-card-featured .pack-bonus { color: rgb(var(--accent)); }

.pack-grid .pack-tier-popular { --accent: 56, 189, 248; }  /* cyan */
.pack-grid .pack-tier-value   { --accent: 251, 146, 60; }  /* orange */
.pack-grid .pack-tier-max     { --accent: 244, 63, 94; }   /* pink-red */
.pack-grid .pack-tier-other   { --accent: 168, 130, 247; } /* purple */

/* Launcher card hint (the single "Токены" card that opens the picker) */
.item-launcher { cursor: pointer; }

/* ===== BEGIN static-page-cards (rules / privacy / oferta) ===== */
.static-page{
    max-width: 960px;
    margin: 0 auto;
}
/* each thematic block becomes a readable frosted card over the bg image */
.static-page .section{
    position: relative;
    background: rgba(11, 17, 31, 0.74);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}
.static-page .section.pt-28{ padding-top: 24px; }
.static-page .section:last-child{ margin-bottom: 0; }

/* block heading with accent bar */
.static-page .section h1{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
}
.static-page .section h1::before{
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 24px;
    border-radius: 4px;
    background: rgb(var(--accent, 125, 211, 252));
}

/* readable body text */
.static-page .section p{
    margin: 0 0 10px;
    color: #d5dae4;
    font-size: 15px;
    line-height: 1.65;
}
.static-page .section p:last-child{ margin-bottom: 0; }
.static-page .section p strong{ color: #eef1f7; font-weight: 600; }

/* punishment / info pills */
.static-page .rad-2{
    display: inline-block;
    border-radius: 8px;
    padding: 2px 12px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.30);
}

@media (max-width: 640px){
    .static-page .section{ padding: 18px 16px; border-radius: 14px; }
    .static-page .section h1{ font-size: 18px; }
    .static-page .section p{ font-size: 14px; }
    .static-page .rad-2{ white-space: normal; }
}
/* ===== END static-page-cards ===== */

/* ===== BEGIN mobile-navbar-panel (readable dropdown menu on phones) ===== */
@media (max-width: 991px) {
    /* When the hamburger menu is open, let the navbar grow into a solid dark
       panel so the links are readable instead of floating over page content. */
    body > .navbar.open {
        height: auto;
        min-height: 46px;
        background-color: rgba(9, 13, 23, 0.98);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
    }
    body > .navbar.open .navbar-wrapper,
    body > .navbar.open .navbar-wrapper > .nav-right,
    body > .navbar.open .navbar-wrapper .navbar-menu {
        height: auto;
        min-height: 46px;
    }
    body > .navbar.open .navbar-wrapper > .nav-right {
        padding-bottom: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    /* subtle divider between items so the list reads as a real menu */
    body > .navbar.open .navbar-menu > .nav-li + .nav-li {
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    /* admin submenu stays readable on the same dark panel */
    body > .navbar.open .nav-submenu {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
    }
}
/* ===== END mobile-navbar-panel ===== */