/* ─────────────────────────────────────────────────────────────────
 *  DystopianDarkRP — Summit override CSS
 *
 *  Forked from Summit's app.css. The base structure (selectors, layout
 *  rules, animations) stays intact so all of Summit's HTML continues to
 *  render correctly. Visual identity is rebuilt around the in-game brand:
 *  apocalyptic crimson + dark crimson gradient, stacked text-shadows for
 *  "engraved metal" feel, subtle outer red bloom on focal elements.
 *
 *  CSS variables (--primary-color, --secondary-color, etc.) come from the
 *  template's schema config — set them in schema.json defaults and the
 *  whole site re-themes for free.
 * ───────────────────────────────────────────────────────────────── */

 #appBg,
 #appBg .fade,
 .card-loading {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }
 
 /* ── Typography ──────────────────────────────────────────────────── */
 
 @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
 
 body {
     font-family: 'BR Omny', sans-serif;
     background: var(--background-color);
     background-image:
         radial-gradient(ellipse at top, rgba(214, 40, 40, 0.08) 0%, transparent 55%),
         radial-gradient(ellipse at bottom, rgba(122, 15, 15, 0.10) 0%, transparent 65%);
     background-attachment: fixed;
 }
 
 h1, h2, .hero-title, .brand-text {
     font-family: 'Black Ops One', 'BR Omny', sans-serif;
     letter-spacing: 0.5px;
     color: #d62828;
     /* Stacked text-shadow gradient — bright crimson at top, fading through
        progressively darker reds to near-black at the bottom, plus an outer
        red bloom. Same technique as the in-game DystopianRP brand. */
     text-shadow:
         0 1px 0  #a01616,
         0 2px 0  #7a0f0f,
         0 3px 0  #570808,
         0 4px 0  #340404,
         0 5px 4px rgba(0, 0, 0, 0.85),
         0 0 14px rgba(214, 40, 40, 0.45);
 }
 
 [x-cloak] { display: none !important; }
 
 /* ── Layout primitives ───────────────────────────────────────────── */
 
 .container { max-width: var(--content-width) !important; }
 .bg-content { background: var(--content-color); }
 .bg-content-light { background: var(--content-light-color); }
 .bg-secondary { background: var(--secondary-color); }
 .bg-primary { background: var(--primary-color); }
 .text-primary { color: var(--primary-color); }
 
 .border-content-light {
     border-color: rgba(255, 255, 255, 0.10) !important;
 }
 
 /* Subtle red-edged borders on key content blocks */
 .bg-content {
     border: 1px solid rgba(214, 40, 40, 0.10);
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.40) inset;
 }
 
 /* ── Buttons ─────────────────────────────────────────────────────── */
 
 .btn-shine {
     position: relative;
     overflow: hidden;
     transition: box-shadow 0.18s ease, transform 0.08s ease;
 }
 
 .btn-shine:hover {
     box-shadow: 0 0 18px rgba(214, 40, 40, 0.55);
 }
 
 .btn-shine:hover:before {
     animation: 0.5s linear shine;
     background-color: rgba(255, 80, 80, 0.18);
     content: "";
     height: 300px;
     left: -100px;
     position: absolute;
     top: -100px;
     transform: rotate(30deg);
     width: 10%;
 }
 
 .btn-shine:active { transform: translateY(1px); }
 
 button, .btn { cursor: pointer; }
 
 /* Primary-action buttons get the engraved red gradient + glow */
 .bg-primary,
 .btn-primary {
     background: linear-gradient(180deg, #d62828 0%, #a01616 55%, #7a0f0f 100%);
     box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, 0.12),
         0 2px 6px rgba(0, 0, 0, 0.45),
         0 0 0 1px rgba(122, 15, 15, 0.40);
     color: #fff;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
 }
 
 .bg-primary:hover,
 .btn-primary:hover {
     background: linear-gradient(180deg, #e83838 0%, #b41818 55%, #8a1212 100%);
 }
 
 /* ── Avatar / branding ───────────────────────────────────────────── */
 
 .custom-avatar {
     overflow: hidden;
     border-radius: 10px;
     border: 1px solid rgba(214, 40, 40, 0.25);
 }
 
 #paynow {
     max-width: 38px;
     margin: 0 auto;
     padding-top: 5px;
     opacity: 0.6;
 }
 
 #paynow path { fill: #ffffff; }
 
 /* ── Hero (background image + gradient fade) ─────────────────────── */
 
 #appBg {
     position: absolute;
     max-height: 400px;
     overflow: hidden;
     opacity: var(--hero-opacity);
 }
 
 #appBg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: var(--hero-position);
     /* Slight red tint over the hero photo */
     filter: contrast(1.05) saturate(0.85) hue-rotate(-8deg);
 }
 
 #appBg .fade {
     position: absolute;
     /* Stronger fade with a hint of crimson at the bottom for atmosphere */
     background:
         linear-gradient(0deg, var(--background-color) 0%, rgba(60, 8, 8, 0.65) 35%, transparent 100%);
 }
 
 /* Hero overlay text glow */
 #storeApp {
     position: relative;
     z-index: 5;
 }
 
 /* ── Gift cards / floating chips ─────────────────────────────────── */
 
 .gift-icon {
     box-shadow: 0 0 20px rgba(214, 40, 40, 0.40), 0 2px 8px rgba(0, 0, 0, 0.65);
     cursor: pointer;
     background: rgba(122, 15, 15, 0.30);
     font-size: 14px !important;
     backdrop-filter: blur(15px);
     border: 1px solid rgba(214, 40, 40, 0.35);
 }
 
 /* ── Modal navigation scrollbar ──────────────────────────────────── */
 
 .modal-nav {
     padding-right: 15px !important;
     padding-left: 5px !important;
 }
 
 .modal-nav::-webkit-scrollbar {
     width: 8px !important;
     border-radius: 100px !important;
     overflow: hidden;
 }
 
 .modal-nav::-webkit-scrollbar-track {
     background: #2a0808;
     border-radius: 100px !important;
 }
 
 .modal-nav::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #d62828 0%, #7a0f0f 100%);
     border-radius: 100px !important;
 }
 
 .modal-nav i { color: #fff; }
 
 /* ── Loading overlay + spinner ───────────────────────────────────── */
 
 .card-loading {
     position: absolute;
     background: var(--background-color);
     z-index: 5;
     opacity: 0.85;
 }
 
 .loader {
     width: 48px;
     height: 48px;
     border: 5px solid #d62828;
     border-bottom-color: transparent;
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
     animation: 1s linear infinite rotation;
     box-shadow: 0 0 12px rgba(214, 40, 40, 0.55);
 }
 
 /* ── Notifications ───────────────────────────────────────────────── */
 
 #notification-alert .font-medium {
     text-transform: capitalize;
 }
 
 /* ── Sidebar module ordering (unchanged from Summit) ─────────────── */
 
 .sidebar .top-customer    { order: 2; }
 .sidebar .recent-payments { order: 3; }
 .sidebar .giftcards       { order: 10; }
 .sidebar .text-block      { order: 15; }
 
 /* ── Animations ──────────────────────────────────────────────────── */
 
 @keyframes shine {
     0%   { left: -100px; }
     100% { left: calc(100% + 100px); }
 }
 
 @keyframes rotation {
     0%   { transform: rotate(0); }
     100% { transform: rotate(360deg); }
 }
 
 /* Subtle pulse for primary call-to-action buttons drawing attention */
 @keyframes apocalyptic_pulse {
     0%, 100% { box-shadow: 0 0 8px  rgba(214, 40, 40, 0.35); }
     50%      { box-shadow: 0 0 18px rgba(214, 40, 40, 0.65); }
 }
 
 .btn-pulse {
     animation: apocalyptic_pulse 2.4s ease-in-out infinite;
 }
 
 /* ── Mobile responsiveness (unchanged) ───────────────────────────── */
 
 @media only screen and (max-width: 768px) {
     .sidebar .store-menu-toggle,
     .view--home #mobile-secondary {
         display: none !important;
     }
 }