@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Unbounded:wght@200..900&display=swap');

:root {
  /* Custom theme vars */
  --accent-color: oklch(70.4% 0.191 22.216);
  --bg-accent-color: oklch(70.4% 0.191 22.216);
  --bg-opacity: 0.25;
  --faded-accent-color: oklch(70.4% 0.191 22.216 / .1);
  --theme-bg: #0A0D12;
  --theme-text: #ffffff;
  --theme-muted-text: #8D8D8D;
  --theme-card-bg: #1A1D24;
  --theme-card-ring: #2A2D34;
  --theme-input-bg: #13161C;
  --theme-input-placeholder: #5A5D64;
  --theme-payment-unselected-bg: #1A1D24;
  --theme-payment-text: #E0E0E0;
  --theme-payment-subtext: #8D8D8D;
  --theme-sidebar-bg: #1A1D24;
  --theme-sidebar-text: #ffffff;
  --theme-server-card-bg: #1A1D24;
  --theme-server-card-ring: #2A2D34;
  
  --footer-icon-light-display: none;
  --footer-icon-dark-display: block;

  /* Font mappings for tailwind */
  --next-font-unbounded: 'Unbounded', sans-serif;
  --next-font-onest: 'Onest', sans-serif;
  --font-sans: 'Onest', sans-serif;
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: 'Onest', sans-serif;
}

#main-background {
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  padding: 0px;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-image: url('../img/bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--theme-card-ring);
}

/* Glassmorphism for card containers like shop and purchases list */
.bg-glass {
  background-color: rgba(26, 29, 36, 0.65) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--theme-card-ring) !important;
}

/* Selection styles */
::selection {
  background: var(--accent-color);
  color: white;
}

.font-sf-pro {
  font-family: 'Onest', sans-serif;
}

/* Smooth transitions */
.f-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide scrollbar */
.scrollbar-hidden {
  scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Custom live purchase animation */
@keyframes live-pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}
.live-pulse {
  animation: live-pulse 2s ease-in-out infinite;
}

/* Circular progress bars styling */
.CircularProgressbar {
  vertical-align: middle;
  width: 100%;
}
.CircularProgressbar .CircularProgressbar-path {
  stroke: var(--accent-color);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s;
}
.CircularProgressbar .CircularProgressbar-trail {
  stroke: var(--theme-card-ring);
  stroke-linecap: round;
}
.CircularProgressbar .CircularProgressbar-text {
  fill: var(--theme-text);
  dominant-baseline: middle;
  text-anchor: middle;
  font-size: 20px;
}
.CircularProgressbar .CircularProgressbar-background {
  fill: var(--theme-card-bg);
}

/* Category item backgrounds gradient */
.category-item-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
}

/* Custom premium hover shadows */
.hover-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Modal styling */
.modal-open {
  overflow: hidden;
}
.checkout-modal-backdrop {
  background-color: rgba(4, 5, 8, 0.72) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
}

/* Precise Checkout Modal Overrides to match Screenshot 2 */
#checkout-modal {
  background-color: rgba(4, 5, 8, 0.72) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
}

.modal-content-card {
  background-color: #111319 !important; /* Solid deeper dark slate background */
  border: 1px solid #1f232e !important; /* Thin subtle dark border matching screenshot 2 */
  outline: none !important;
  border-radius: 1.25rem !important; /* 20px rounded corners */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8) !important;
  width: 100% !important;
  max-width: 440px !important; /* Compact width matching screenshot 2 */
  padding: 2rem !important; /* p-8 */
  box-sizing: border-box !important;
}

/* Modal text fields */
.modal-input-field {
  width: 100% !important;
  background-color: #13151c !important; /* Tighter dark inputs background */
  border: 1px solid #1f232e !important; /* Dark input border */
  outline: none !important;
  border-radius: 0.625rem !important; /* 10px rounded-lg corners */
  padding: 1.05rem 1.25rem !important; /* Taller padding */
  color: #ffffff !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.modal-input-field:focus {
  border-color: #ff5f5f !important;
  box-shadow: 0 0 10px rgba(255, 95, 95, 0.15) !important;
}

.modal-input-field::placeholder {
  color: #4a5264 !important; /* Muted cool-grey blueish placeholders */
}

/* Payment Grid and Methods */
.payment-methods-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
}

.payment-method-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.95rem 1rem !important; /* Restored size and taller padding */
  border-radius: 0.625rem !important; /* 10px rounded-lg corners */
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  text-align: left !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.payment-method-card.active {
  background-color: #fc5f5f !important; /* Vibrant coral-salmon pink active bg */
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(252, 95, 95, 0.3) !important;
}

.payment-method-card.active p {
  color: #ffffff !important;
}

.payment-method-card.active span, .payment-method-card.active svg {
  opacity: 1 !important;
}

.payment-method-card.inactive {
  background-color: #13151c !important; /* Dark inactive background matching input fields */
  border: 1px solid #1f232e !important; /* Subtle dark border */
  color: #8d919e !important; /* Muted color text */
  outline: none !important;
}

.payment-method-card.inactive:hover {
  background-color: #171922 !important;
  border-color: #2b303e !important;
}

.payment-method-card.inactive p {
  color: #ffffff !important;
}

.payment-method-card.inactive span, .payment-method-card.inactive svg {
  opacity: 0.7 !important;
}

/* Pay Submit Button */
.modal-submit-button {
  width: 100% !important;
  color: #f5f5f7 !important;
  background-color: #ab4e4e !important; /* Brick terracotta red matching Screenshot 2 */
  font-weight: 700 !important;
  padding: 1.125rem !important; /* Taller submit button */
  border-radius: 1rem !important; /* 16px corners */
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  text-align: center !important;
}

.modal-submit-button:hover {
  background-color: #b85757 !important;
}

.modal-submit-button.ready {
  background-color: #ff3b30 !important; /* Brighter pure red */
  color: #ffffff !important; /* Pure white text */
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4) !important;
}

.modal-submit-button.ready:hover {
  background-color: #ff453a !important; /* Brighter red hover state */
}

.modal-submit-button:active {
  transform: scale(0.98) !important;
}

/* Red Close Button */
#modal-close {
  color: #ff5f5f;
  transition: all 0.2s ease;
}
#modal-close:hover {
  color: #ff3b30;
  transform: scale(1.1);
}

/* Legal Terms styling at bottom of checkout modal */
.modal-footer-text {
  color: #8d919e !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.modal-footer-text a {
  color: #fc5f5f !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: opacity 0.2s ease !important;
}

.modal-footer-text a:hover {
  opacity: 0.8 !important;
}

/* Header Navigation Links with Underline and Dark Hover Background */
.nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: 0.5rem !important;
  color: #8d8d8d !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
}

.nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important; /* Slight darkening / overlay highlight */
  border-bottom-color: var(--accent-color) !important; /* Red underline */
}

.nav-link.active {
  color: var(--accent-color) !important; /* Active page red text */
  border-bottom-color: var(--accent-color) !important; /* Underlined */
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Category Card Hover & Active State Design */
.category-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important; /* rounded-2xl */
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              filter 0.3s ease, 
              border-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 2px solid transparent !important;
  outline: none !important;

  /* Restored Layout & Dimension Rules */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  aspect-ratio: 16 / 9 !important; /* aspect-video */
  padding: 0.875rem !important; /* p-3 fallback */
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .category-card {
    padding: 1.5rem !important; /* md:p-6 */
  }
}

.category-card:hover {
  transform: translateY(-6px) scale(1.02) !important; /* lifts up slightly - "стает чуть выше" */
  filter: brightness(1.15) !important; /* becomes lighter - "светлее" */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important;
}

.category-card.active {
  border-color: var(--accent-color) !important; /* beautiful smooth active outline */
  box-shadow: 0 0 25px rgba(255, 95, 95, 0.35) !important;
}

.category-card .category-overlay-ring {
  background-color: rgba(0, 0, 0, 0.55) !important;
  transition: background-color 0.3s ease !important;
}

.category-card:hover .category-overlay-ring {
  background-color: rgba(0, 0, 0, 0.3) !important; /* makes card background look lighter */
}

.category-card.active .category-overlay-ring {
  background-color: transparent !important; /* clear background when active */
}

/* Product Item Card and Selection Styles */
.product-item-card {
  border: 2px solid transparent !important;
  border-radius: 1.25rem !important; /* rounded-2xl */
  background-color: rgba(26, 29, 36, 0.4) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease, 
              background-color 0.25s ease !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.product-item-card:hover {
  background-color: rgba(26, 29, 36, 0.7) !important;
  transform: translateY(-2px) !important;
}

.product-item-card.active {
  background-color: rgba(26, 29, 36, 0.85) !important;
  border-color: oklch(70.4% 0.191 22.216 / 0.4) !important; /* modern softer outline frame */
  box-shadow: 0 0 12px rgba(255, 95, 95, 0.15) !important; /* smooth softer red glow */
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
  .modal-content-card {
    padding: 1.25rem !important;
    border-radius: 1rem !important;
  }
  
  .payment-method-card {
    padding: 0.75rem 0.65rem !important;
    gap: 0.5rem !important;
  }
  
  .payment-method-card p {
    font-size: 11px !important;
  }
  
  .payment-method-card span {
    font-size: 8px !important;
  }
}