/* ================================
   Author: Tom special for Unishop 2 theme
   Styles distributed "as is" with no warranty.
   Use at your own risk.
================================= */


/* ==========================
   Basic Load Animations
========================== */
body {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

body.loaded {
  visibility: visible;
  opacity: 1;
}

/* ==========================
   Dark Theme Variables
========================== */
body.dark-theme {
  --base-bg: #1a1a1a;
  --base-text: #e0e0e0;
  --base-border: #4b4646;
  --primary-color: #4a9cff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --component-bg: #292929;
  --component-text: #d0d0d0;
  --checked-bg: yellow;
  --checked-color: black;
  --input-warning-c: #ff6e6e;
  --input-warning-border-c: #ff6e6e;
  --fly-contacts-btn-c-dark: #e0e0e0;
  --fly-contacts-btn-bg-dark: #292929;
  --fly-contacts-item-bg-dark: #333333;
  --fly-contacts-item-c-dark: #e0e0e0;
  --fly-contacts-icon-bg-dark: #404040;
  --fly-contacts-icon-c-dark: #e0e0e0;
  background: var(--base-bg) !important;
  color: var(--base-text) !important;
}

/* Apply theme to all elements except specific ignores */
body.dark-theme *:not(.dark-ignore) {
  background-color: inherit !important;
  color: inherit !important;
  border-color: var(--base-border) !important;
}

/* ==========================
   Theme Toggle Button
========================== */
#darkmode-toggle {
  cursor: pointer;
  position: fixed;
  right: 18px;
  bottom: 8px;
  z-index: 9999;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  transition: all 0.3s ease, right 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.modal-open #darkmode-toggle {
  right: 35px;
}

#darkmode-toggle i {
  font-size: 1.5rem;
}

#darkmode-toggle .fa-sun {
  color: yellow !important;
}

/* ==========================
   Specific Component Styles
========================== */
body.dark-theme .btn,
body.dark-theme .header-search__input,
body.dark-theme #darkmode-toggle,
body.dark-theme .fly-block__contacts-icons,
body.dark-theme .fly-block__scrollup.visible,
body.dark-theme .subscribe__inputs,
body.dark-theme .menu__level-1-li,
body.dark-theme .product-banner__item,
body.dark-theme button.product-page__wishlist-btn,
body.dark-theme button.product-page__compare-btn,
body.dark-theme .uni-alert,
body.dark-theme #quickedit {
  color: var(--component-text) !important;
  background-color: var(--component-bg) !important;
  border: 1px solid var(--base-border) !important;
}

/* Preload Styles for Dark Theme */
html.preload-dark body {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}

html.preload-dark button,
html.preload-dark .btn,
html.preload-dark input[type="button"],
html.preload-dark input[type="submit"] {
  background-color: #292929 !important;
  color: #d0d0d0 !important;
  border-color: #4b4646 !important;
}

/* ==========================
   Element-specific Styling
========================== */
body.dark-theme .fly-block__contacts-icons { 
  border-radius: 50%; 
}

body.dark-theme .subscribe { 
  border-top: 1px solid var(--base-border); 
}

body.dark-theme .top-menu { 
  border-bottom: 1px solid var(--base-border); 
}

body.dark-theme .menu-wrapper.new { 
  border: 1px solid var(--base-border); 
}

body.dark-theme .product-thumb__addit-item { 
  background-color: transparent !important;
  transition: none !important;
  filter: none !important;
}

body.dark-theme .product-thumb__addit-item[data-img] {
  background-image: url(attr(data-img));
  background-size: cover;
  background-position: center;
}

/* Media & Images */
body.dark-theme img:not([data-no-invert]),
body.dark-theme video:not([data-no-invert]),
body.dark-theme iframe:not([data-no-invert]) { 
  filter: none !important; 
}

/* Links */
body.dark-theme a { 
  color: var(--primary-color) !important; 
}

/* Buttons */
body.dark-theme .btn-primary {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

/* States */
body.dark-theme .add_to_cart.in_cart,
body.dark-theme .option input:checked + .option__name,
body.dark-theme .uni-item-bg {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

/* Modals */
body.dark-theme .modal { 
  background-color: rgba(0, 0, 0, 0.5) !important; 
}

body.dark-theme .modal-content {
  background-color: rgba(40, 40, 40, 0.9) !important;
  border: 1px solid var(--base-border) !important;
}

body.dark-theme .mfp-wrap {
  background-color: rgba(0, 0, 0, 0.2) !important; 
}

/* Contact Block */
body.dark-theme .fly-block__contacts {
  color: var(--fly-contacts-btn-c-dark) !important;
  background: var(--fly-contacts-btn-bg-dark) !important;
}

body.dark-theme .fly-block__contacts-item {
  background: var(--fly-contacts-item-bg-dark) !important;
  color: var(--fly-contacts-item-c-dark) !important;
}

body.dark-theme .fly-block__contacts-icon {
  background: var(--fly-contacts-icon-bg-dark) !important;
  color: var(--fly-contacts-icon-c-dark) !important;
}

/* Alert Box Shadows */
body.dark-theme .alert-success {
  background-color: var(--success-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body.dark-theme .alert-danger {
  background-color: var(--danger-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Radio Button States */
body.dark-theme .option input[type="radio"]:checked + .option__name {
  background-color: var(--checked-bg) !important;
  color: var(--checked-color) !important;
}

body.dark-theme .option input[type="radio"]:not(:checked) + .option__name {
  background-color: transparent !important;
  color: var(--component-text) !important;
}

body.dark-theme .option input[type="radio"]:disabled + .option__name {
  background-color: var(--fly-contacts-item-bg-dark) !important;
  color: var(--fly-contacts-item-c-dark) !important;
}

body.dark-theme .option__item {
  background-color: transparent !important;
  color: var(--component-text) !important;
}

/* Wishlist & Compare States */
body.dark-theme .wishlist:hover,
body.dark-theme .wishlist a:hover,
body.dark-theme .wishlist.active {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

body.dark-theme .compare,
body.dark-theme .compare a {
  color: var(--compare-btn-c);
  background: var(--compare-btn-bg);
}

body.dark-theme .compare:hover,
body.dark-theme .compare a:hover,
body.dark-theme .compare.active {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

body.dark-theme .header-cart__total-items {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

body.dark-theme .header-compare__total-items {
  color: var(--checked-color) !important;
  background: var(--checked-bg) !important;
}

body.dark-theme .form-control.input-warning {
  border-color: var(--input-warning-border-c) !important;
}

body.dark-theme .uni-alert {
  box-shadow: 0px 9px 30px rgba(255, 149, 5, 0.3);
}

body.dark-theme .main-menu.set-before:before { 
    background: none; 
}

/* ==========================
   Fly Block Positioning
========================== */
.fly-block {
  position: fixed;
  z-index: 1061;
  right: 20px;
  bottom: 75px;
}

/* ==========================
   Media Queries
========================== */
@media (max-width: 768px) {
  #darkmode-toggle {
    right: 10px;
    bottom: 10px;
    width: 2.5rem;
    height: 2.5rem;
  }

  .fly-block {
    right: 10px;
    bottom: 60px;
  }
}