/* =============================================================================
   CSS Variables (Apple Color Palette)
   ============================================================================= */
:root {
  /* Primary Colors */
  --apple-blue: #007AFF;
  --apple-blue-dark: #0056CC;
  --apple-gray-1: #F5F5F7;
  --apple-gray-2: #E8E8ED;
  --apple-gray-3: #D2D2D7;
  --apple-gray-4: #86868B;
  --apple-gray-5: #515154;
  --apple-gray-6: #1D1D1F;
  
  /* Semantic Colors */
  --background-primary: #FFFFFF;
  --background-secondary: #F5F5F7;
  --background-tertiary: #E8E8ED;
  --text-primary: #1D1D1F;
  --text-secondary: #515154;
  --text-tertiary: #86868B;
  --border-color: #E8E8ED;
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* Border Radius */
  --border-radius-xs: 3px
  --border-radius-sm: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 48px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* =============================================================================
   Reset & Base Styles
   ============================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  background-color: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-sm);
}

p {
  margin-bottom: var(--spacing-md);
  line-height: 1.47059;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-success {
  color: #34C759;
}

.text-warning {
  color: #FF9500;
}

.text-error {
  color: #FF3B30;
}

.text-muted {
  color: var(--text-tertiary);
}

/* =============================================================================
   Layout & Containers
   ============================================================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-md);
  }
}

/* =============================================================================
   Header
   ============================================================================= */
header {
  background: var(--background-primary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: var(--spacing-sm) 0;
}

header h1 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
/* Header styles */
header {
    background: linear-gradient(180deg, #cbcccf 0%, #e3e4e6 100%);
    border-bottom: 1px solid #c0c0c0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 0px 0;
}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
 

/* Logo container */
.nav-logo {
    display: flex;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
}

.nav-slogan {
    font-size: 0.85rem;
    font-weight: 400;
    color: #000;
    margin-top: 0px;
    text-shadow:
        1px 1px 1px rgba(0,0,0,0.15),
        -1px -1px 1px rgba(255,255,255,0.9);
}

/* Navigation in header */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-nav-links {
    display: flex;
    list-style: none;
    gap: 0;
    padding: 0;
    margin: 0;
    align-items: stretch;
    height: 40px;
}

.header-nav-links li {
    margin: 0;
    position: relative;
}

.header-nav-links a {
    text-decoration: none;
    color: #4a4a4a;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0 20px;
    position: relative;
    transition: all 0.2s ease;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 100%;
    border-bottom: 2px solid transparent;
}
.header-nav-links a:hover {
    border-bottom: 2px solid #007aff; /* Голубой цвет подчеркивания */
}

/* Navigation Icons */
.header-nav-links a::before {
    content: '';
    font-size: 1rem;
    display: inline-block;
}

.header-nav-links a[href*="home"]::before { content: "\01F3E0"; }
.header-nav-links a[href*="customer-orders"]::before { content: "\01F4E6"; }
.header-nav-links a[href*="terms"]::before { content: "\01F4C4"; }
.header-nav-links a[href*="privacy"]::before { content: "\01F512"; }
.header-nav-links a[href*="about"]::before { content: "\02139\0FE0F"; } /* ℹ️ */
.header-nav-links a[href*="contact"]::before { content: "\02709\0FE0F"; } /* ✉️ */
.header-nav-links a[href*="faq"]::before { content: "\01F4D6"; }

.header-nav-links a:hover {
    color: #007aff;
    background: rgba(255,255,255,0.5);
}

.header-nav-links a.active {
    color: #007aff;
    background: rgba(255,255,255,0.5);
    border-bottom-color: #007aff;
    font-weight: 600;
}

/* Payments section */
.payments {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Card logos */
.card-logo {
    width: 36px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
}


/* Hide the old separate nav */
nav:not(.header-nav) {
    display: none;
}

/* =============================================================================
   MOBILE STICKY NAVIGATION
   ============================================================================= */
@media (max-width: 768px) {
    header .container {
        flex-wrap: wrap;
        gap: 15px;
        padding: 0px 15px;
    }
    
    .nav-logo {
        flex: 1;
        min-width: 0;
    }
    
    .payments {
        flex: 1;
        justify-content: flex-end;
        min-width: 0;
    }
    
    /* Mobile sticky navigation */
    .header-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #cbcccf 0%, #e3e4e6 100%);
        border-top: 1px solid #c0c0c0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        order: 3;
        flex: none;
        width: 100%;
        margin-top: 0;
        padding: 8px 0;
    }
    
    .header-nav-links {
        display: flex;
        justify-content: space-around;
        height: auto;
        padding: 0 10px;
    }
    
    .header-nav-links li {
        flex: 1;
        text-align: center;
    }
    
    .header-nav-links a {
        flex-direction: column;
        height: auto;
        padding: 8px 5px;
        font-size: 0.75rem;
        gap: 4px;
        border-bottom: none;
        border-radius: 6px;
        margin: 0 2px;
    }
    
    .header-nav-links a::before {
        font-size: 1.2rem;
        margin-bottom: 2px;
    }
    
    .header-nav-links a:hover,
    .header-nav-links a.active {
        background: rgba(255,255,255,0.7);
        border-bottom: none;
    }
    
    /* Add padding to body to account for sticky nav */
    body {
        padding-bottom: 70px;
    }
    
    /* Adjust card logos for mobile */
    .card-logo {
        width: 28px;
        height: 18px;
    }
    
    .nav-slogan {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.0rem;
    }
    
    .nav-slogan {
        font-size: 0.65rem;
    }
    
    .payments {
        gap: 4px;
    }
    
    .card-logo {
        width: 24px;
        height: 16px;
    }
    
    .header-nav-links a {
        font-size: 0.7rem;
        padding: 6px 28px;
    }
    
    .header-nav-links a::before {
        font-size: 1.1rem;
    }
    
    body {
        padding-bottom: 65px;
    }
}

/* For very small screens */
@media (max-width: 360px) {
    .header-nav-links a {
        font-size: 0.65rem;
    }
    
    .header-nav-links a::before {
        font-size: 1rem;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    body {
        padding-bottom: 60px;
    }
}
/* =============================================================================
   Main Content
   ============================================================================= */
main {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-xxl) 0;
}

/* =============================================================================
   Footer
   ============================================================================= */
footer {
  background: var(--background-primary);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.footer-grid h3,
.footer-grid h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.footer-grid a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-fast);
  font-size: var(--font-size-sm);
}

.footer-grid a:hover {
  color: var(--apple-blue);
}

.footer-bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
} 
/* Overlay */
.email-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Card */
.email-form-container {
    background: #ffffff;
    width: 100%;
    max-width: 460px;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.08),
        0 2px 6px rgba(0,0,0,0.04);
    animation: fadeIn 0.25s ease;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.email-form-container h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 28px;
}

/* Product Box */
.product-info {
    background: #f9fafb;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 28px;
    border: 1px solid #f1f3f5;
}

.product-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.product-info-row:last-child {
    margin-bottom: 0;
    font-weight: 600;
}

/* Input */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
}

.form-control:focus {
    border-color: #635bff;
    box-shadow: 0 0 0 3px rgba(99,91,255,0.15);
}

/* Button */
.btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    background: #635bff;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: #5148e5;
}

/* Security Footer */
.security-info {
    margin-top: 24px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.6;
}

/* Step indicator */
.step {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
    font-weight: 500;
}
            
            .product-info {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                text-align: left;
            }
            
            .form-actions {
                display: flex;
                gap: 10px;
                justify-content: center;
                margin-top: 20px;
            }
            
            .btn-cancel {
                background: #6c757d;
                color: white;
            }
            
            .btn-cancel:hover {
                background: #5a6268;
            } 
/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--apple-blue);
  color: white;
}

.btn-primary:hover {
  background: var(--apple-blue-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--background-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--background-secondary);
  border-color: var(--apple-gray-3);
  transform: translateY(-1px);
}

.btn-success {
  background: #34C759;
  color: white;
}

.btn-success:hover {
  background: #30B753;
  transform: translateY(-1px);
}

.btn-danger {
  background: #FF3B30;
  color: white;
}

.btn-danger:hover {
  background: #E6352B;
  transform: translateY(-1px);
}

.btn-sm {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-md);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* =============================================================================
   Forms
   ============================================================================= */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-control {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--background-primary);
  transition: all var(--transition-fast);
  font-family: var(--font-family);
}

.form-control:focus {
  outline: none;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.form-control::placeholder {
  color: var(--text-tertiary);
}

label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-primary);
}

small {
  display: block;
  margin-top: var(--spacing-xs);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.cancelled-content {
  max-width: 600px;
  margin: 0 auto;
}
.cancelled-content a {
  color: var(--link-color, #007bff);
  text-decoration: underline;
}

.cancelled-content a:hover {
  text-decoration: none;
}
/* =============================================================================
   Alerts
   ============================================================================= */
.alert {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid transparent;
  position: relative;
}
.alert-success a {
  color: var(--link-color, #007bff);
  text-decoration: underline;
}

.alert-success a:hover {
  text-decoration: none;
}
.order-details-grid a {
  color: var(--link-color, #007bff);
  text-decoration: underline;
}
.order-details-grid a:hover {
  text-decoration: none;
}
.alert-success {
  background: rgba(52, 199, 89, 0.1);
  border-color: rgba(52, 199, 89, 0.2);
  color: #2D9A4A;
}

.alert-error {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.2);
  color: #D70015;
}

.alert-warning {
  background: rgba(255, 149, 0, 0.1);
  border-color: rgba(255, 149, 0, 0.2);
  color: #CC7A00;
}

/* =============================================================================
   Brands Grid & Cards
   ============================================================================= */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.brand-card {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--apple-blue);
}

.brand-image {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
}

.brand-image img {
  max-width: 80px;
  max-height: 50px;
  object-fit: contain;
  border-radius: var(--border-radius-xs);
  transition: var(--transition-normal);
}

.brand-card:hover .brand-image img {
  transform: scale(1.05);
}

.brand-image-large {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.brand-image-large img {
  max-width: 120px;
  max-height: 70px;
  object-fit: contain;
  border-radius: var(--border-radius-xs);
}

/* =============================================================================
   Brand Stats & Information
   ============================================================================= */
.brand-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.stat-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.brand-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
  flex-grow: 1;
}

.brand-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  flex-shrink: 0;
}

.brand-card .btn {
  margin-top: auto;
  flex-shrink: 0;
}

/* =============================================================================
   Responsive Design for Brand Cards
   ============================================================================= */
@media (max-width: 768px) {
  .brands-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .brand-card {
    padding: var(--spacing-lg);
  }
  
  .brand-stats {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }
  
  .stat-item {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .brands-grid {
    grid-template-columns: 1fr;
  }
  
  .brand-card {
    padding: var(--spacing-md);
  }
  
  .brand-stats {
    margin: var(--spacing-sm) 0;
  }
}
/* =============================================================================
   Products Grid
   ============================================================================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.product-card {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
  position: relative;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--apple-blue);
}

/* =============================================================================
   Categories
   ============================================================================= */
.category-section {
  margin-bottom: var(--spacing-xxl);
  padding: var(--spacing-xl);
  background: var(--background-secondary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

.category-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  position: relative;
  display: inline-block;
}

.category-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--apple-blue);
  border-radius: 2px;
}

.category-description {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
}

/* =============================================================================
   Order Cards
   ============================================================================= */
.order-card {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  transition: var(--transition-normal);
}

.order-card:hover {
  border-color: var(--apple-blue);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   Status Badges
   ============================================================================= */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: capitalize;
}

.status-completed {
  background: rgba(52, 199, 89, 0.1);
  color: #2D9A4A;
  border: 1px solid rgba(52, 199, 89, 0.2);
}
.status-succeeded {
    background: #d1ecf1;
    color: #2e7d32;
}
.status-pending {
  background: rgba(255, 149, 0, 0.1);
  color: #CC7A00;
  border: 1px solid rgba(255, 149, 0, 0.2);
}

.status-cancelled {
  background: rgba(255, 59, 48, 0.1);
  color: #D70015;
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.status-pending_key {
  background: rgba(0, 122, 255, 0.1);
  color: var(--apple-blue);
  border: 1px solid rgba(0, 122, 255, 0.2);
}

/* =============================================================================
   Data Tables
   ============================================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--background-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-table th {
  background: var(--background-secondary);
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover {
  background: var(--background-secondary);
}

.data-table code {
  background: var(--background-tertiary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: var(--font-size-sm);
}

/* =============================================================================
   Admin Layout
   ============================================================================= */
.admin-container {
  display: flex;
  min-height: 100vh;
  background: var(--background-secondary);
}

.admin-nav {
  width: 200px;
  background: var(--background-primary);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-md) 0;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  text-decoration: none;
  color: var(--text-secondary);
  margin-bottom: 0;
  transition: all var(--transition-fast);
  font-weight: 500;
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  border-left: 3px solid transparent;
}

.admin-nav a::before {
  content: '';
  font-size: var(--font-size-md);
  display: inline-block;
  min-width: 20px;
  text-align: center;
}

.admin-nav a[href*="admin"]::before { content: "📊"; }
.admin-nav a[href*="brands"]::before { content: "🏷️"; }
.admin-nav a[href*="categories"]::before { content: "📁"; }
.admin-nav a[href*="products"]::before { content: "📦"; }
.admin-nav a[href*="orders"]::before { content: "🛒"; }
.admin-nav a[href*="keys"]::before { content: "🔑"; }
.admin-nav a[href*="pages"]::before { content: "📄"; }
.admin-nav a[href*="settings"]::before { content: "⚙️"; }

.admin-nav a:hover {
  background: var(--background-secondary);
  color: var(--text-primary);
  border-left-color: var(--apple-gray-3);
}

.admin-nav a.active {
  background: var(--apple-blue);
  color: white;
  border-left-color: var(--apple-blue);
  font-weight: 600;
}

.admin-nav a.active::before {
  filter: brightness(0) invert(1);
}

.admin-main {
  flex: 1;
  margin-left: 200px;
  padding: var(--spacing-lg);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}
.content-box {
  background: var(--background-secondary, #f9f9f9);
  padding: 30px;
  border-radius: 10px;
  max-width: 1100px; /* было 900px → стало шире */
  margin: 20px auto;
  line-height: 1.7;
  font-size: 16px;
  color: var(--text-primary, #333);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-item {
    margin-bottom: 20px;
}

.faq-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a73e8;
    margin-bottom: 5px;
}

.faq-item p,
.faq-item ol,
.faq-item ul {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    margin-left: 15px;
}

.faq-item ol,
.faq-item ul {
    margin-top: 5px;
    margin-bottom: 5px;
}

.faq-item ol li,
.faq-item ul li {
    margin-bottom: 5px;
}
.grid-2col .content-box {
    max-width: 100% !important;
    margin: 0 !important;      /* фикс №1 */
    width: 100% !important;    /* фикс №2 — растягивает по колонке */
    box-sizing: border-box;
}
@media (max-width: 768px) {
  .grid-2col {
    grid-template-columns: 1fr !important; /* принудительно */
    gap: 20px !important;
    padding: 0 10px;
  }
}

/* Заголовки */
.content-box h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--text-title, #111);
  text-align: center;
}

.content-box h2 {
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text-heading, #222);
  border-bottom: 2px solid var(--border-color, #ddd);
  padding-bottom: 5px;
}

/* Параграфы */
.content-box p {
  margin-bottom: 15px;
}

/* Списки */
.content-box ul {
  margin: 10px 0 20px 20px;
  padding-left: 0;
  list-style-type: disc;
}

.content-box li {
  margin-bottom: 8px;
}

/* Ссылки */
.content-box a {
  color: var(--link-color, #007bff);
  text-decoration: underline;
}

.content-box a:hover {
  text-decoration: none;
}


.admin-content {
  background: var(--background-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

/* =============================================================================
   Image Previews
   ============================================================================= */
.image-preview {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius-md);
  text-align: center;
  border: 1px dashed var(--border-color);
}

.image-preview img {
  max-width: 100px;
  max-height: 60px;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

/* =============================================================================
   Payment Processing
   ============================================================================= */
.loading-spinner {
  border: 3px solid var(--background-tertiary);
  border-top: 3px solid var(--apple-blue);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: var(--spacing-lg) auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.payment-info {
  background: var(--background-secondary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  margin: var(--spacing-xl) 0;
  border: 1px solid var(--border-color);
}

.loading-spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #007cba;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: 20px auto;
}
            
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
.payment-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: left;
}

/* =============================================================================
   Thank You Page
   ============================================================================= */
.thankyou-content {
  max-width: 600px;
  margin: 0 auto;
}

.order-details {
  background: var(--background-secondary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  margin: var(--spacing-xl) 0;
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 15px; margin-top: 15px;}
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; margin-bottom: 30px;}

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* =============================================================================
   Responsive Design
   ============================================================================= */
@media (max-width: 1024px) {
  .brands-grid,
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-xxxl: 36px;
    --font-size-xxl: 28px;
    --font-size-xl: 22px;
    --font-size-lg: 16px;
  }
  
  /* Mobile Navigation */
  .nav-links {
    height: 44px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--spacing-sm);
  }
  
  .nav-links a {
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-xs);
    flex-direction: line;
    gap: 6px;
    min-width: 60px;
  }
  
  .nav-links a::before {
    font-size: var(--font-size-sm);
  }
  
  .nav-links a span {
    font-size: 10px;
    line-height: 1;
  }
  
  /* Hide text on very small screens */
  @media (max-width: 480px) {
    .nav-links a span {
      display: none;
    }
    
    .nav-links a {
      min-width: 50px;
      padding: 0 var(--spacing-sm);
    }
  }
  
  /* Mobile Admin Navigation */
  .admin-container {
    flex-direction: column;
  }
  
  .admin-nav {
    width: 100%;
    height: auto;
    position: static;
    padding: var(--spacing-sm) 0;
  }
  
  .admin-nav a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    min-width: auto;
    flex: 1;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  
  .admin-nav a.active {
    border-left: none;
    border-bottom-color: var(--apple-blue);
  }
  
  .admin-main {
    margin-left: 0;
    padding: var(--spacing-md);
  }
  
  .brands-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  main {
    padding: var(--spacing-xl) 0;
  }
  
  .brand-card,
  .product-card,
  .admin-content {
    padding: var(--spacing-lg);
  }
  
  .btn {
    width: 100%;
    justify-content: center;
    margin: 5px;
  }
}



/* =============================================================================
   Scrollbar Styling
   ============================================================================= */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--apple-gray-3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--apple-gray-4);
}

/* =============================================================================
   Focus States for Accessibility
   ============================================================================= */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--apple-blue);
  outline-offset: 2px;
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
  .nav-links,
  .admin-nav,
  .btn {
    display: none !important;
  }
  
  .container {
    max-width: none;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* =============================================================================
   Loading Animations
   ============================================================================= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* =============================================================================
   Selection Styling
   ============================================================================= */
::selection {
  background: rgba(0, 122, 255, 0.2);
  color: var(--text-primary);
}

::-moz-selection {
  background: rgba(0, 122, 255, 0.2);
  color: var(--text-primary);
}
            .payment-icons {
                position: absolute;
                top: 50%;
                right: 200px;  
                transform: translateY(-50%);
                display: flex;
                gap: 15px;  
            }

            .card-logo {
                width: 16px;
                height: 16px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
             
            @media (max-width: 768px) {
                .payment-icons {
                    right: 20px;  
                    gap: 10px;
                }
            }
            .products-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 25px;
                align-items: stretch;
            }
            
            .product-card {
                background: #f9f9f9;
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                padding: 25px;
                display: flex;
                flex-direction: column;
                height: 100%;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            
            .product-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            
            .product-header {
                margin-bottom: 0px;
            }
            
            .product-title {
                font-size: 1.4em;
                font-weight: 600;
                margin: 0 0 8px 0;
                color: #000;
                text-transform: capitalize;
            }
            
            .product-price {
                font-size: 1.8em;
                font-weight: 700;
                color: #27ae60;
                margin: 0 0 8px 0;
            }
            
            .product-duration {
                color: #7f8c8d;
                font-weight: 500;
                margin: 0 0 15px 0;
            }
            
            .product-description {
                flex: 1;
                color: #000;
                line-height: 1.5;
                margin-bottom: 20px;
                overflow-y: auto;
                max-height: 120px;
                padding-right: 5px;
            }
            
            .product-description::-webkit-scrollbar {
                width: 4px;
            }
            
            .product-description::-webkit-scrollbar-thumb {
                background: #bdc3c7;
                border-radius: 2px;
            }
            
            .product-actions {
                margin-top: auto;
            }
            
            .btn-primary {
                width: 100%;
                padding: 12px 20px;
                font-size: 1.1em;
                font-weight: 600;
                  border-radius:4px 4px 4px 4px;
  border-radius:100px 100px 100px 100px;
            }
            .btn-orders {
              background: var(--apple-blue);
              color: white;
            }

            .btn-orders:hover {
              background: var(--apple-blue-dark);
              transform: translateY(-1px);
            }
            /* Модальное окно */
            .modal {
                display: none;
                position: fixed;
                top: 0; left: 0;
                width: 100%; height: 100%;
                background: rgba(0,0,0,0.5);
                justify-content: center;
                align-items: center;
                z-index: 10000;
            }
            .modal-content {
                background: #fff;
                padding: 25px;
                border-radius: 12px;
                max-width: 400px;
                width: 90%;
                position: relative;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            }
            .modal .close {
                position: absolute;
                top: 15px;
                right: 20px;
                font-size: 24px;
                cursor: pointer;
                color: #7f8c8d;
            }
            .modal .close:hover {
                color: #34495e;
            }

            @media (max-width: 768px) {
                .products-grid {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }
                
                .product-card {
                    padding: 20px;
                }
            } .payments {
    display: flex;
    align-items: center;
    gap: 6px;
}
.block-content {
    line-height: 1.6;
    font-size: 14px;
}

.block-content ul {
    margin: 0 0 15px 0;
    padding-left: 20px;
}

.block-content li {
    
    position: relative;
}

.block-content b {
    font-weight: 600;
}

.block-content h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 8px 0;
}

.block-content a {
    color: #007cba;
    text-decoration: none;
}

.block-content a:hover {
    text-decoration: underline;
}

        .order-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
            flex-wrap: wrap;
        }

        .btn-pay {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 0.9em;
        }

        .btn-pay:hover {
            background-color: #218838;
        }

        .btn-copy {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 0.9em;
        }

        .btn-copy:hover {
            background-color: #5a6268;
        }

        .btn-copy.copied {
            background-color: #28a745;
        }

        .payment-pending {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }

        .order-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }

        .premium-key-section {
            margin-bottom: 10px;
        }

        .date-info {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .payment-info-block {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        @media (max-width: 768px) {
            .order-details-grid {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            
            .order-details-grid > div {
                padding: 5px 0;
                border-bottom: 1px solid #f0f0f0;
            }
            
            .order-details-grid > div:last-child {
                border-bottom: none;
            }
            
            .order-details-grid .premium-key-section {
                grid-column: 1 / -1 !important;
                display: block !important;
                margin-bottom: 15px;
            }
            
            .order-details-grid .premium-key-section div {
                margin-bottom: 10px;
            }
            
            .btn-copy {
                width: 100%;
                margin-top: 10px;
            }
        } 

            .description-content {
                line-height: 1.5;
            }
            
            .product-duration {
                background: #e8f4fd;
                color: #2c3e50;
                padding: 6px 12px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: 600;
                display: inline-block;
                margin-bottom: 8px;
            }
            
            .category-section {
                margin-bottom: 40px;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                overflow: hidden;
            }
            
            .category-header {
                background: linear-gradient(180deg, #cbcccf 0%, #e3e4e6 100%);
                color: black;
                padding: 20px 25px;
                margin: 0;
            }
            
            .category-header h2 {
                margin: 0;
                font-size: 1.5em;
                font-weight: 600;
            }
            
            .subcategory-section {
                margin: 0;
                border-bottom: 1px solid #e9ecef;
            }
            
            .subcategory-section:last-child {
                border-bottom: none;
            }
            
            .subcategory-header {
                background: #f8f9fa;
                padding: 15px 25px;
                margin: 0;
                border-bottom: 1px solid #e9ecef;
            }
            
            .subcategory-header h3 {
                margin: 0;
                font-size: 1.2em;
                color: #495057;
                font-weight: 500;
            }
            
            .products-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
                padding: 25px;
            }
            
            .product-card {
                background: #fff;
                border: 1px solid #e9ecef;
                border-radius: 8px;
                padding: 20px;
                transition: all 0.3s ease;
                position: relative;
            }
            
            .product-card:hover {
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                transform: translateY(-2px);
            }
            
            .product-header {
                margin-bottom: 15px;
            }
            
            .product-title {
                font-size: 1.1em;
                font-weight: 600;
                color: #2c3e50;
                margin: 0 0 8px 0;
                line-height: 1.3;
            }
            
            .product-price {
                font-size: 1.3em;
                font-weight: 700;
                color: #27ae60;
                margin-bottom: 8px;
            }
            
            .product-description {
                color: #6c757d;
                font-size: 0.9em;
                line-height: 1.4;
                margin-bottom: 15px;
                max-height: 60px;
                overflow: hidden;
                position: relative;
            }
            
            .product-description::after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 30%;
                height: 20px;
                background: linear-gradient(90deg, transparent, #fff 50%);
            }
            
            .product-actions {
                margin-top: auto;
            }
            
            .no-products {
                text-align: center;
                padding: 40px 20px;
                color: #6c757d;
            }
            
            /* Модальное окно для описания */
            .description-modal {
                display: none;
                position: fixed;
                z-index: 1001;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            
            .description-modal-content {
                background-color: #fefefe;
                margin: 5% auto;
                padding: 0;
                border-radius: 12px;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            }
            
            .description-modal-header {
                padding: 20px 24px;
                border-bottom: 1px solid #e9ecef;
                background: #f8f9fa;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .description-modal-body {
                padding: 24px;
                overflow-y: auto;
                flex: 1;
                font-size: 14px;
                line-height: 1.6;
            }
            
            .close-description-modal {
                color: #6c757d;
                font-size: 24px;
                font-weight: bold;
                cursor: pointer;
                line-height: 1;
                padding: 4px;
                border-radius: 4px;
                transition: all 0.2s ease;
            }
            
            .close-description-modal:hover {
                color: #495057;
                background-color: #e9ecef;
            }
            
            /* Стили для навигации по категориям */
            .brand-categories {
                background: #f8f9fa;
                border-bottom: 1px solid #dee2e6;
                margin-bottom: 20px;
            }
            
            .categories-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 15px 20px;
            }
            
            .categories-container h3 {
                margin: 0 0 15px 0;
                color: #495057;
                font-size: 1.2em;
            }
            
            .categories-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 10px;
            }
            
            .category-item {
                position: relative;
            }
            
            .category-link, .category-main-link {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 15px;
                background: white;
                border: 1px solid #dee2e6;
                border-radius: 6px;
                text-decoration: none;
                color: #495057;
                transition: all 0.2s ease;
            }
            
            .category-link:hover, .category-main-link:hover {
                background: #007bff;
                color: white;
                border-color: #007bff;
                text-decoration: none;
            }
            
            .category-item.active .category-link,
            .category-item.active .category-main-link {
                background: #007bff;
                color: white;
                border-color: #007bff;
            }
            
            .category-name {
                font-weight: 500;
            }
            
            .product-count {
                font-size: 0.85em;
                opacity: 0.7;
            }
            
            .category-with-subgroups {
                position: relative;
            }
            
            .subcategories-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                border: 1px solid #dee2e6;
                border-radius: 0 0 6px 6px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                z-index: 1000;
                display: none;
                max-height: 300px;
                overflow-y: auto;
            }
            
            .category-with-subgroups:hover .subcategories-dropdown {
                display: block;
            }
            
            .subcategory-link {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;
                text-decoration: none;
                color: #495057;
                border-bottom: 1px solid #f1f1f1;
                transition: all 0.2s ease;
            }
            
            .subcategory-link:hover,
            .subcategory-link.active {
                background: #007bff;
                color: white;
                text-decoration: none;
            }
            
            .subcategory-link:last-child {
                border-bottom: none;
            }
            
            /* Хлебные крошки */
            .breadcrumbs {
                background: #f8f9fa;
                padding: 10px 0;
                border-bottom: 1px solid #dee2e6;
                font-size: 0.9em;
            }
            
            .breadcrumb-link {
                color: #007bff;
                text-decoration: none;
            }
            
            .breadcrumb-link:hover {
                text-decoration: underline;
            }
            
            .breadcrumb-current {
                color: #6c757d;
                font-weight: 500;
            }
            
            .breadcrumb-separator {
                color: #6c757d;
                margin: 0 5px;
            }
            
            /* Адаптивность */
            @media (max-width: 768px) {
                .description-modal-content {
                    width: 95%;
                    margin: 10% auto;
                    max-height: 85vh;
                }
                
                .description-modal-body {
                    padding: 20px;
                }
                
                .categories-grid {
                    grid-template-columns: 1fr;
                }
                
                .subcategories-dropdown {
                    position: static;
                    box-shadow: none;
                    border-radius: 0 0 6px 6px;
                }
                
                .products-grid {
                    grid-template-columns: 1fr;
                    padding: 15px;
                }
                
                .category-header {
                    padding: 15px 20px;
                }
                
                .category-header h2 {
                    font-size: 1.3em;
                }
                
                .subcategory-header {
                    padding: 12px 20px;
                }
                
                .subcategory-header h3 {
                    font-size: 1.1em;
                }
            }
.card-logo.visa{background-image: url('data:image/png;base64,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') }
.card-logo.mastercard{background-image: url('data:image/png;base64,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') }
.card-logo.amex {background-image: url('data:image/png;base64,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') }
.card-logo.discover {background-image: url('data:image/png;base64,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') }
.card-logo.bitcoin {background-image: url('data:image/svg+xml;base64,PCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNjQiIHdpZHRoPSI2NCIgdmVyc2lvbj0iMS4xIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwNjMwODc2LC0wLjAwMzAxOTg0KSI+CjxwYXRoIGZpbGw9IiNmNzkzMWEiIGQ9Im02My4wMzMsMzkuNzQ0Yy00LjI3NCwxNy4xNDMtMjEuNjM3LDI3LjU3Ni0zOC43ODIsMjMuMzAxLTE3LjEzOC00LjI3NC0yNy41NzEtMjEuNjM4LTIzLjI5NS0zOC43OCw0LjI3Mi0xNy4xNDUsMjEuNjM1LTI3LjU3OSwzOC43NzUtMjMuMzA1LDE3LjE0NCw0LjI3NCwyNy41NzYsMjEuNjQsMjMuMzAyLDM4Ljc4NHoiLz4KPHBhdGggZmlsbD0iI0ZGRiIgZD0ibTQ2LjEwMywyNy40NDRjMC42MzctNC4yNTgtMi42MDUtNi41NDctNy4wMzgtOC4wNzRsMS40MzgtNS43NjgtMy41MTEtMC44NzUtMS40LDUuNjE2Yy0wLjkyMy0wLjIzLTEuODcxLTAuNDQ3LTIuODEzLTAuNjYybDEuNDEtNS42NTMtMy41MDktMC44NzUtMS40MzksNS43NjZjLTAuNzY0LTAuMTc0LTEuNTE0LTAuMzQ2LTIuMjQyLTAuNTI3bDAuMDA0LTAuMDE4LTQuODQyLTEuMjA5LTAuOTM0LDMuNzVzMi42MDUsMC41OTcsMi41NSwwLjYzNGMxLjQyMiwwLjM1NSwxLjY3OSwxLjI5NiwxLjYzNiwyLjA0MmwtMS42MzgsNi41NzFjMC4wOTgsMC4wMjUsMC4yMjUsMC4wNjEsMC4zNjUsMC4xMTctMC4xMTctMC4wMjktMC4yNDItMC4wNjEtMC4zNzEtMC4wOTJsLTIuMjk2LDkuMjA1Yy0wLjE3NCwwLjQzMi0wLjYxNSwxLjA4LTEuNjA5LDAuODM0LDAuMDM1LDAuMDUxLTIuNTUyLTAuNjM3LTIuNTUyLTAuNjM3bC0xLjc0Myw0LjAxOSw0LjU2OSwxLjEzOWMwLjg1LDAuMjEzLDEuNjgzLDAuNDM2LDIuNTAzLDAuNjQ2bC0xLjQ1Myw1LjgzNCwzLjUwNywwLjg3NSwxLjQzOS01Ljc3MmMwLjk1OCwwLjI2LDEuODg4LDAuNSwyLjc5OCwwLjcyNmwtMS40MzQsNS43NDUsMy41MTEsMC44NzUsMS40NTMtNS44MjNjNS45ODcsMS4xMzMsMTAuNDg5LDAuNjc2LDEyLjM4NC00LjczOSwxLjUyNy00LjM2LTAuMDc2LTYuODc1LTMuMjI2LTguNTE1LDIuMjk0LTAuNTI5LDQuMDIyLTIuMDM4LDQuNDgzLTUuMTU1em0tOC4wMjIsMTEuMjQ5Yy0xLjA4NSw0LjM2LTguNDI2LDIuMDAzLTEwLjgwNiwxLjQxMmwxLjkyOC03LjcyOWMyLjM4LDAuNTk0LDEwLjAxMiwxLjc3LDguODc4LDYuMzE3em0xLjA4Ni0xMS4zMTJjLTAuOTksMy45NjYtNy4xLDEuOTUxLTkuMDgyLDEuNDU3bDEuNzQ4LTcuMDFjMS45ODIsMC40OTQsOC4zNjUsMS40MTYsNy4zMzQsNS41NTN6Ii8+CjwvZz4KPC9zdmc+') }

.vpn-box {
  position: relative;
  margin-bottom: 5px; 
}

.vpn-box::before {
  display: none;
}

.vpn-card {
  position: relative;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  padding: 10px 25px;
  border-radius: 16px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vpn-card:hover {
  transform: translateY(-2px);
}

.vpn-text {
  font-size: 14px;
  line-height: 1.5;
}

.vpn-btn {
  font-weight: bold;
  white-space: nowrap;
}

.vpn-card:hover .vpn-btn {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .vpn-card {
    flex-direction: column;
    text-align: center;
  }

  .vpn-btn {
    margin-top: 10px;
  }
}