/*
Theme Name: Lisatuled Flatsome Child v5
Theme URI: https://lisatuled.com/
Description: Child theme for Flatsome – site-wide Cloud/SaaS style (dark gradient background + glass UI).
Author: Lisatuled
Template: flatsome
Version: 1.4.0
Text Domain: lisatuled-flatsome-child-v5
*/

/* =========
   Variables
   ========= */
:root{
  --lis-text: rgba(255,255,255,.92);
  --lis-muted: rgba(255,255,255,.72);
  --lis-border: rgba(255,255,255,.12);
  --lis-card: rgba(255,255,255,.045);
  --lis-card-strong: rgba(255,255,255,.07);
  --lis-shadow: 0 16px 60px rgba(0,0,0,.35);
  --lis-accent: #38bdf8;
  --lis-accent-2: #1d4ed8;

  /* Menu/header opacity (less transparent) */
  --lis-header-bg: rgba(2, 8, 24, .84);
  --lis-header-bg-stuck: rgba(2, 8, 24, .95);
  --lis-menu-bg: rgba(3, 14, 34, .97);
  --lis-menu-bg-strong: rgba(3, 14, 34, .985);
}

/* Tell browsers this is a dark UI */
html{ color-scheme: dark; }

/* =========
   Background
   ========= */
body{
  background-color: #020818;
  /* Fallback (works everywhere) */
  background-image: linear-gradient(180deg, rgba(2,8,24,.72), rgba(2,8,24,.78)), url("assets/lisatuled-bg.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--lis-text);
}

/* Prefer WebP when supported */
@supports (background-image: image-set(url("a") type("image/webp"))){
  body{
    background-image: linear-gradient(180deg, rgba(2,8,24,.72), rgba(2,8,24,.78)),
      image-set(
        url("assets/lisatuled-bg.webp") type("image/webp"),
        url("assets/lisatuled-bg.jpg") type("image/jpeg")
      );
  }
}


/* Remove white wrappers */
#wrapper, #main, #content,
.off-canvas-content,
.page-wrapper, .shop-page-title, .page-title, .page-header-wrapper,
.blog-wrapper, .shop-container{
  background: transparent !important;
}

/* Default text/link colors on dark bg */
a{ color: var(--lis-accent); }
a:hover{ color: rgba(255,255,255,.96); }

/* =========
   Typography
   ========= */
body, p, .entry-content, .woocommerce{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6,
.nav > li > a,
.header .nav-dropdown > li > a,
.button, button, input[type="submit"]{
  font-family: Orbitron, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}

h1,h2,h3{ color: rgba(255,255,255,.96); }
p, li, .widget, .nav>li>a{ color: var(--lis-text); }
small, .is-muted, .secondary, .byline{ color: var(--lis-muted) !important; }

/* =========
   Header (glass)
   ========= */
.header-wrapper, .header-main{
  background: var(--lis-header-bg) !important;
  border-bottom: 1px solid var(--lis-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.stuck .header-wrapper, .stuck .header-main{
  background: var(--lis-header-bg-stuck) !important;
}

/* Nav */
.nav > li > a{
  color: rgba(255,255,255,.92) !important;
  text-transform: uppercase;
  font-weight: 600;
}
.nav > li > a:hover,
.nav > li.current-menu-item > a,
.nav > li.active > a{
  color: var(--lis-accent) !important;
}

/* Dropdown (desktop) */
.nav-dropdown,
.nav-dropdown-default,
.nav-dropdown.nav-dropdown-default{
  background: var(--lis-menu-bg) !important;
  border: 1px solid var(--lis-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav-dropdown a{ color: rgba(255,255,255,.92) !important; }

/* Mobile / off-canvas menu (less transparent) */
#mobile-menu,
#mobile-menu.mobile-sidebar,
#mobile-menu .sidebar-menu,
.mfp-content #mobile-menu{
  background: var(--lis-menu-bg-strong) !important;
  border: 1px solid var(--lis-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.mobile-sidebar .nav-sidebar > li > a,
.mobile-sidebar .nav-sidebar a{
  color: rgba(255,255,255,.92) !important;
}

/* =========
   Cards / widgets / content boxes
   ========= */
.widget,
.article-inner,
.post-item .box-text,
.ux-box .box-text,
.woocommerce .product-small .box-text,
.woocommerce .product-info,
.woocommerce .product-main,
.woocommerce-cart-form,
.cart_totals,
.checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.comment-respond, .comments-area{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--lis-border);
  border-radius: 18px;
  box-shadow: var(--lis-shadow);
}

.widget, .article-inner, .comments-area{ padding: 18px; }
.woocommerce-MyAccount-navigation{ padding: 12px; }

/* Make sidebar widgets breathe */
#secondary .widget{ margin-bottom: 18px; }

/* Tables on dark */
table, .shop_table{
  background: rgba(255,255,255,.03) !important;
  border-color: var(--lis-border) !important;
}
table th, table td,
.shop_table th, .shop_table td{
  border-color: var(--lis-border) !important;
}

/* =========
   Forms / inputs
   ========= */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"],
textarea, select,
.woocommerce input.input-text{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--lis-border) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }

/* =========
   Buttons
   ========= */
.button, button, input[type="submit"], .woocommerce button.button{
  border-radius: 999px !important;
  border: 1px solid rgba(56,189,248,.34) !important; /* matches bg cyan */
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(29,78,216,.18)) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.button:hover, button:hover, input[type="submit"]:hover{
  border-color: rgba(56,189,248,.65) !important;
  background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(29,78,216,.24)) !important;
  transform: translateY(-1px);
}

/* Secondary button look */
.button.is-outline{
  background: transparent !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* =========
   Footer
   ========= */
.footer-wrapper, .absolute-footer{
  background: rgba(2, 8, 24, .45) !important;
  border-top: 1px solid var(--lis-border);
}
.footer-wrapper, .absolute-footer,
.footer-wrapper a, .absolute-footer a{
  color: rgba(255,255,255,.84) !important;
}

/* =========
   Small quality fixes
   ========= */
.page-title{
  background: transparent !important;
}
.page-title .title{
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Woo badges */
.woocommerce span.onsale{
  background: rgba(29,78,216,.88) !important;
  border: 1px solid rgba(255,255,255,.25);
}

/* Make sure images don't get weird on dark bg */
img{ height: auto; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; transform: none !important; }
}