/* Fonts */
/* Match TKBio main site typography */

/* ===============================
   Variables
   =============================== */
:root {
  /* ===== Core layout ===== */
  --border-radius: 12px;
  --gutter-x: 0.5rem;
  --gutter-y: 1rem;
  --sidebar-width: 300px;

  /* ===== Typography ===== */
  --default-text-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --default-text-size: 15px;
  --default-line-height: 1.4;
  --default-text-color: rgba(255,255,255,0.92);
  --link-text-color: rgba(255,255,255,0.92);

  /* ===== TKBio colour palette ===== */
  --site-background-color: #0b0f19;
  --default-background-color: rgba(15,20,35,0.95);
  --whitespace-color: transparent;

  --default-border-color: rgba(255,255,255,0.14);
  --shadow-color: rgba(0,0,0,0.55);

  /* ===== Header & notices ===== */
  --header-background-color: transparent;
  --header-text-color: var(--default-text-color);

  --important-notice-background-color: rgba(15,20,35,0.95);
  --important-notice-text-color: rgba(255,255,255,0.92);

  /* ===== Cookie notice ===== */
  --cookie-notice-background-color: rgba(45,45,56,0.75);
  --cookie-notice-text-color: rgba(255,255,255,0.92);

  /* ===== Navigation ===== */
  --navigation-background-color: rgba(15,20,35,0.95);
  --navigation-background-color-hover: rgba(255,255,255,0.06);
  --navigation-background-color-active: rgba(255,255,255,0.12);
  --navigation-text-color: rgba(255,255,255,0.92);
  --navigation-text-color-hover: rgba(255,255,255,0.92);
  --navigation-text-color-active: rgba(255,255,255,0.92);

  --offcanvas-background-color: var(--navigation-background-color);
  --offcanvas-text-color: var(--navigation-text-color);

  /* ===== Buttons ===== */
  --default-button-background-color: rgba(255,255,255,0.05);
  --default-button-background-color-hover: rgba(255,255,255,0.08);
  --default-button-background-color-active: rgba(255,255,255,0.08);
  --default-button-border-color: rgba(255,255,255,0.14);
  --default-button-text-color: rgba(255,255,255,0.92);

  --primary-button-background-color: #3b4a6b;
  --primary-button-background-color-hover: #4a5a7d;
  --primary-button-background-color-active: #374462;
  --primary-button-border-color: rgba(255,255,255,0.14);
  --primary-button-text-color: #fff;

  /* ===== Cards ===== */
  --card-background-color: rgba(15,20,35,0.95);
  --card-text-color: var(--default-text-color);
  --card-border-color: rgba(255,255,255,0.14);
  --card-footer-background-color: rgba(255,255,255,0.03);

  /* ===== Inputs ===== */
  --input-background-color: rgba(255,255,255,0.06);
  --input-text-color: rgba(255,255,255,0.92);
  --input-border-radius: 999px;

  /* ===== Tables ===== */
  --table-striped-row-background-odd: rgba(255,255,255,0.03);
  --table-striped-row-background-even: rgba(255,255,255,0.02);
  --table-row-hover-background: rgba(255,255,255,0.06);

  /* ===== Footer ===== */
  --footer-background-color: rgba(11,15,25,0.85);
  --footer-title-color: rgba(255,255,255,0.92);
  --footer-text-color: rgba(255,255,255,0.70);

  --copyright-background-color: rgba(11,15,25,0.90);
  --copyright-text-color: rgba(255,255,255,0.55);
}

/* Responsive gutters */
@media (min-width: 768px) {
  :root { --gutter-x: 1rem; --gutter-y: 1rem; }
}
@media (min-width: 992px) {
  :root { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
}
@media (min-width: 1200px) {
  :root { --gutter-x: 2rem; --gutter-y: 2rem; }
}

/* ===============================
   Dropdown readability
   =============================== */
.navbar .dropdown-menu,
.offcanvas .dropdown-menu,
.dropdown-menu {
  background: rgba(15,20,35,0.98) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dropdown-menu a.nav-link,
.dropdown-menu a,
.dropdown-menu .nav-link {
  color: rgba(255,255,255,0.92) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.25 !important;
}

.dropdown-menu a.nav-link:hover,
.dropdown-menu a.nav-link:focus {
  background: rgba(255,255,255,0.06) !important;
}

.dropdown-menu a.nav-link.active,
.dropdown-menu a.nav-link[aria-current="page"] {
  background: rgba(255,255,255,0.10) !important;
  border-left: 3px solid rgba(255,255,255,0.35) !important;
  padding-left: 14px !important;
}

/* ===============================
   Product cards
   =============================== */
.card,
.product,
.product-card,
.listing .item,
.box {
  background: rgba(15,20,35,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
}

.card a,
.product a,
.product-card a,
.price,
.product-price {
  color: rgba(255,255,255,0.92) !important;
}

/* ===============================
   Checkout
   =============================== */
form,
fieldset,
.checkout,
#checkout,
.cart,
#cart,
.order-summary,
.box-checkout {
  background: rgba(15,20,35,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;
}

input,
select,
textarea {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

/* ===============================
   Header spacing (Sign In)
   =============================== */
.container,
.container-fluid,
.header .container,
.header .container-fluid,
.navbar .container,
.navbar .container-fluid,
.header .navbar-nav,
.navbar .navbar-nav,
.header .nav,
.navbar .nav {
  padding-right: 16px !important;
}

/* ===============================
   Glass search bar
   =============================== */
input[type="search"],
.search input,
.header-search input {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  color: #111 !important;
}

input[type="search"]::placeholder,
.search input::placeholder,
.header-search input::placeholder {
  color: rgba(0,0,0,0.55) !important;
}

input[type="search"]:focus,
.search input:focus,
.header-search input:focus {
  outline: none;
  background: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.35),
    0 12px 40px rgba(0,0,0,0.35) !important;
}

.header-search svg,
.header-search i {
  opacity: 0.75;
}
/* =========================================
   Hero/banner image: darken + improve tone
   (targets LiteCart slides/carousels/banners)
   ========================================= */

/* 1) Darken common slideshow/banner images (img-based) */
#box-slides img,
.box-slides img,
.slides img,
.carousel img,
.carousel-item img,
.banner img,
.box-banner img,
#box-banner img,
main > img:first-of-type {
  filter: brightness(0.78) contrast(1.08) !important;
}

/* 2) If the hero is a background-image on a container (not an <img>) */
#box-slides [style*="background-image"],
.box-slides [style*="background-image"],
.slides [style*="background-image"],
.carousel [style*="background-image"],
.banner [style*="background-image"],
.box-banner [style*="background-image"],
#box-banner [style*="background-image"] {
  filter: brightness(0.78) contrast(1.08) !important;
}

/* 3) Add a subtle dark overlay to common hero containers */
#box-slides,
.box-slides,
.slides,
.carousel,
.banner,
.box-banner,
#box-banner {
  position: relative;
  overflow: hidden;
}

#box-slides::after,
.box-slides::after,
.slides::after,
.carousel::after,
.banner::after,
.box-banner::after,
#box-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,15,25,0.35),
    rgba(11,15,25,0.55)
  );
  pointer-events: none;
}
/* === Mobile: reduce hero height (keep desktop unchanged) === */
@media (max-width: 700px) {
  #box-slides img,
  .box-slides img,
  .slides img,
  .carousel img,
  .carousel-item img,
  .banner img,
  .box-banner img,
  #box-banner img {
    max-height: 240px !important;   /* tweak 200–320px */
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }
}
/* === FIX: textarea content hidden by rounded/glass styling === */
textarea {
  min-height: 160px !important;
  height: auto !important;
  padding: 16px 20px !important;

  border-radius: 16px !important;   /* NOT fully pill-shaped */
  line-height: 1.45 !important;

  resize: vertical !important;
  overflow-y: auto !important;

  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
}

textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}
textarea:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 12px 40px rgba(0,0,0,0.35) !important;
}
/* === Logo sizing: proportional + responsive === */
#logotype img,
.logotype img {
  transform: none !important;     /* prevent compounded scaling */
  width: auto !important;
  height: 72px !important;        /* desktop default */
  max-height: none !important;
  max-width: none !important;
}

/* Tablets / smaller laptops */
@media (max-width: 900px) {
  #logotype img,
  .logotype img {
    height: 64px !important;
  }
}
/* =========================================
   Maintenance mode: force readable dark theme
   ========================================= */

/* Most LiteCart maintenance pages use <body class="maintenance"> */
body.maintenance,
.maintenance body,
#maintenance,
.page-maintenance,
main.maintenance {
  background: #0b0f19 !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Ensure headings and general text are visible */
body.maintenance h1,
body.maintenance h2,
body.maintenance h3,
body.maintenance p,
body.maintenance li,
body.maintenance label,
body.maintenance small,
body.maintenance a {
  color: rgba(255,255,255,0.92) !important;
}

/* If the maintenance template uses a central panel/card */
body.maintenance .card,
body.maintenance .box,
body.maintenance .content,
body.maintenance .container,
body.maintenance .container-fluid,
#maintenance .card,
#maintenance .box,
#maintenance .content {
  background: rgba(15,20,35,0.95) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;
}

/* Links */
body.maintenance a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.maintenance a:hover {
  color: rgba(255,255,255,0.98) !important;
}


/* Phones */
@media (max-width: 600px) {
  #logotype img,
  .logotype img {
    height: 52px !important;
  }
}
/* === Maintenance mode: override inline white box === */
body #box-maintenance-mode{
  background: rgba(15,20,35,0.95) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0px 0px 60px rgba(0,0,0,0.55) !important;
}

body #box-maintenance-mode h1,
body #box-maintenance-mode p{
  color: rgba(255,255,255,0.92) !important;
}

body #box-maintenance-mode hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.14) !important;
}