/* VELYA CLINIC — Complete CSS */

/* ═══════════════════════════════
   1. Body & Main Background
═══════════════════════════════ */
body, .app-inner, main#main-content {
  background-color: #F5F0E8 !important;
}

/* ═══════════════════════════════
   2. Header & Navbar
═══════════════════════════════ */
.top-navbar,
header.store-header,
header.store-header .container,
header.store-header > div,
header.store-header > div > div,
header.store-header .flex {
  background-color: #1A1E2E !important;
}

.store-header a,
.store-header nav a,
.store-header span:not([class*="badge"]) {
  color: #BD8653 !important;
  background-color: transparent !important;
}

.store-header i,
.store-header svg path,
.store-header [class*="sicon"]::before {
  color: #BD8653 !important;
  fill: #BD8653 !important;
}

header.store-header i.header-btn__icon.icon.sicon-shopping-bag {
  border: 2px solid #BD8653 !important;
}

b.s-cart-summary-total {
  color: #BD8653 !important;
}

.store-header .s-user-menu-login-btn {
  border: 2px solid #BD8653 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════
   3. Search Bar
═══════════════════════════════ */
.s-search-input {
  background-color: rgba(189,134,83,0.12) !important;
  color: #F5F0E8 !important;
  border: 1px solid #BD8653 !important;
  border-radius: 8px !important;
}

.s-search-input::placeholder {
  color: #BD8653 !important;
  opacity: 0.8;
}

/* ═══════════════════════════════
   4. Mobile Menu (Sidebar)
═══════════════════════════════ */
#mobile-menu,
.s-menu,
[class*="mobile-menu"],
aside {
  background-color: #1A1E2E !important;
}

#mobile-menu li,
#mobile-menu a,
#mobile-menu span {
  color: #BD8653 !important;
  background-color: transparent !important;
}

#mobile-menu .sub-menu,
#mobile-menu .sub-menu ul {
  background-color: #1A1E2E !important;
  border: 1px solid rgba(189,134,83,0.2) !important;
  border-radius: 12px !important;
}

#mobile-menu .sub-menu a,
#mobile-menu .sub-menu li {
  color: #BD8653 !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════
   5. Product Cards
═══════════════════════════════ */
.s-product-card,
[class*="product-card"],
.product-card {
  border: 1px solid rgba(189,134,83,0.3) !important;
  border-radius: 12px !important;
  background-color: #FFFFFF !important;
  box-shadow: none !important;
}

.s-product-card *,
[class*="product-card"] * {
  border-color: transparent !important;
}

.s-product-card .s-product-card__footer,
[class*="product-card__footer"] {
  background-color: #FFFFFF !important;
  border-top: 1px solid rgba(189,134,83,0.15) !important;
}

/* ═══════════════════════════════
   6. Footer
═══════════════════════════════ */
.store-footer__inner {
  background-color: #1A1E2E !important;
  color: #BD8653 !important;
}

.store-footer__inner a,
.store-footer__inner p,
.store-footer__inner span,
.store-footer__inner strong {
  color: #BD8653 !important;
}

span.s-contacts-icon {
  border: 2px solid #BD8653 !important;
  border-radius: 50% !important;
}

.s-social-link a {
  border-color: #BD8653 !important;
}

footer.store-footer,
footer.store-footer > div:last-child {
  background-color: #F5F0E8 !important;
}

footer.store-footer > div:last-child * {
  color: #1A1E2E !important;
}

/* ═══════════════════════════════
   7. Payment Methods
═══════════════════════════════ */
.s-payments-list-item {
  background-color: #F5F0E8 !important;
  border: 1px solid rgba(189,134,83,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}

.s-payments-list {
  gap: 8px !important;
}

/* ═══════════════════════════════
   8. User Menu — Colors Only
═══════════════════════════════ */
.s-user-menu-trigger {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.s-user-menu-dropdown {
  background-color: #1A1E2E !important;
  border: 1px solid rgba(189,134,83,0.3) !important;
  border-radius: 12px !important;
}

.s-user-menu-dropdown-header {
  background-color: #1A1E2E !important;
  border-bottom: 1px solid rgba(189,134,83,0.2) !important;
}

.s-user-menu-dropdown-header span,
.s-user-menu-dropdown-header p {
  color: #BD8653 !important;
}

.s-user-menu-dropdown-item-title {
  color: #BD8653 !important;
}

.s-user-menu-dropdown-item-link svg,
.s-user-menu-dropdown-item-link i {
  color: #BD8653 !important;
  fill: #BD8653 !important;
}

/* ═══════════════════════════════
   8. Product Card Fix
═══════════════════════════════ */

.s-product-card-image {
    min-height: 220px !important;
    height: 220px !important;
}

.s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
}

.s-product-card-image-cover {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

.s-product-card-entry {
    border: 1px solid rgba(189,134,83,0.35) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(189,134,83,0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.s-product-card-entry:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(189,134,83,0.2) !important;
}

.s-product-card-price {
    color: #BD8653 !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════
   9. Mobile Menu Subcategory Fix
═══════════════════════════════ */

.mm-spn li {
    border-bottom: 1px solid rgba(189,134,83,0.2) !important;
}

.mm-spn a {
    padding: 14px 20px !important;
    font-size: 15px !important;
}

.mm-spn.mm-spn--navbar::before {
    color: #BD8653 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-bottom: 2px solid rgba(189,134,83,0.3) !important;
}

.mm-spn.mm-spn--navbar::after {
    border-color: #BD8653 !important;
}

/* ═══════════════════════════════
   10. User Menu Enhanced
═══════════════════════════════ */

.s-user-menu-dropdown-item-link {
    color: #F5F0E8 !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(189,134,83,0.15) !important;
    transition: background 0.2s, color 0.2s !important;
}

.s-user-menu-dropdown-item-link:hover {
    background: rgba(189,134,83,0.15) !important;
    color: #BD8653 !important;
}

.s-user-menu-dropdown-item:last-child .s-user-menu-dropdown-item-link {
    border-bottom: none !important;
}

.s-user-menu-dropdown-header-content h3 {
    color: #BD8653 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Section 11 - Fix Mobile Menu Panel Overlap */
ul.mm-spn--parent {
  left: -100vw !important;
}

/* Section 12 - Mobile Menu Navbar Title Color */
nav.mm-spn::after {
  color: #F5F0E8 !important;
}

/* Section 13 - Loading Page Preloader */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #1A1E2E url('https://cdn.files.salla.network/theme/1464419004/5ae230b0-f633-4bb5-b845-a4c1198e2aac.webp') no-repeat center / 220px auto;
  z-index: 999999;
  animation: velya-preloader-out 0.5s ease 1.5s forwards;
}

@keyframes velya-preloader-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}