/*
  Tala Cosmetics — Brand identity layer (2026)
  Loads last via header.php — overrides legacy inline colors
*/

:root {
  --tala-burgundy: #941A2E;
  --tala-burgundy-dark: #781323;
  --tala-burgundy-light: #B33A4E;

  --tala-cream: #F8F0E5;
  --tala-cream-light: #FFF9F2;
  --tala-cream-dark: #EADCCD;

  --tala-olive: #62632D;
  --tala-olive-dark: #4F5124;
  --tala-olive-light: #7A7C42;

  --tala-text: #3C2928;
  --tala-text-muted: #786866;
  --tala-white: #FFFFFF;

  --tala-success: #657339;
  --tala-error: #B52B3D;
  --tala-border: rgba(148, 26, 46, 0.16);
  --tala-shadow: rgba(76, 44, 38, 0.10);

  --tala-blush: #FBECEF;
  --tala-gold: #C9A56A;

  /* Legacy aliases */
  --primary: var(--tala-burgundy);
  --primary-light: var(--tala-burgundy-light);
  --primary-dark: var(--tala-burgundy-dark);
  --secondary: var(--tala-olive);
  --secondary-light: var(--tala-olive-light);
  --accent: var(--tala-blush);
  --accent-light: var(--tala-cream);
  --light: var(--tala-cream-light);
  --dark: var(--tala-text);
  --text: var(--tala-text);
  --text-light: var(--tala-text-muted);
  --tala-primary: var(--tala-burgundy);
  --tala-primary-2: var(--tala-burgundy-light);
  --tala-bg: var(--tala-cream-light);
  --tala-bg-soft: var(--tala-cream);
  --tala-surface: var(--tala-white);
  --tala-surface-2: var(--tala-cream);
  --tala-text-soft: var(--tala-text-muted);
  --tala-green: var(--tala-olive);
}

html {
  background: var(--tala-cream-light);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(148, 26, 46, 0.05), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(98, 99, 45, 0.06), transparent 32%),
    var(--tala-cream-light) !important;
  color: var(--tala-text) !important;
}

/* ===== Promo bar — single strip ===== */
.tala-promo {
  background: linear-gradient(
    90deg,
    var(--tala-burgundy-dark),
    var(--tala-burgundy),
    var(--tala-burgundy-light)
  ) !important;
  color: var(--tala-cream-light) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0;
}

.tala-promo__track {
  color: var(--tala-cream-light);
}

body .topbar {
  display: none !important;
}

/* ===== Header ===== */
body .sitebar {
  background: var(--tala-cream-light) !important;
  border-bottom: 1px solid var(--tala-border) !important;
  box-shadow: 0 4px 18px rgba(76, 44, 38, 0.06) !important;
  padding: 10px 0 !important;
}

.brand-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(148, 26, 46, 0.1) !important;
  padding: 0 !important;
}

.brand__logo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.brand strong {
  color: var(--tala-burgundy) !important;
}

.hamburger {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--tala-cream) !important;
  border: 1px solid var(--tala-border) !important;
  color: var(--tala-burgundy) !important;
  box-shadow: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 1023px) {
  .hamburger {
    display: inline-flex !important;
  }
}

.hamburger:hover {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
  border-color: var(--tala-burgundy) !important;
}

.lang-icon-wrap {
  background: var(--tala-cream-dark) !important;
  border: 1px solid var(--tala-border) !important;
  color: var(--tala-burgundy) !important;
  border-radius: 10px !important;
  min-height: 36px;
  padding: 0 10px !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-icon-wrap:hover,
.lang-icon-wrap.open {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
}

.lang-icon-dropdown {
  background: var(--tala-white) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 12px 32px rgba(76, 44, 38, 0.12) !important;
}

.lang-icon-dropdown a {
  color: var(--tala-text) !important;
}

.lang-icon-dropdown a:hover {
  background: var(--tala-cream) !important;
  color: var(--tala-burgundy) !important;
}

/* Header icons — outline burgundy on cream */
.icon-btn,
.header-actions-mobile .icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--tala-cream) !important;
  color: var(--tala-burgundy) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 2px 8px rgba(76, 44, 38, 0.06) !important;
}

.icon-btn:hover,
.header-actions-mobile .icon-btn:hover {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
  border-color: var(--tala-burgundy) !important;
  transform: translateY(-1px);
}

.icon-btn--cart::before {
  display: none !important;
}

.icon-btn--cart,
.icon-btn--wishlist,
.icon-btn--login {
  background: var(--tala-cream) !important;
  color: var(--tala-burgundy) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 2px 8px rgba(76, 44, 38, 0.06) !important;
}

.icon-btn--cart:hover,
.icon-btn--wishlist:hover,
.icon-btn--login:hover {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
}

.icon-btn .badge,
.header-actions-mobile .badge {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
  border: 2px solid var(--tala-cream-light);
}

.icon-btn--labeled {
  background: var(--tala-cream) !important;
  color: var(--tala-burgundy) !important;
  border: 1px solid var(--tala-border) !important;
}

.icon-btn--labeled:hover {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
}

.icon-btn--labeled.icon-btn--login {
  background: var(--tala-olive) !important;
  color: var(--tala-cream-light) !important;
  border-color: transparent !important;
}

.icon-btn--labeled.icon-btn--login:hover {
  background: var(--tala-olive-dark) !important;
  color: var(--tala-cream-light) !important;
}

.sitebar__nav-links a {
  color: var(--tala-text) !important;
}

.sitebar__nav-links a:hover,
.sitebar__nav-links a.active {
  background: var(--tala-cream) !important;
  color: var(--tala-burgundy) !important;
}

.tala-header-search input {
  background: var(--tala-cream-light) !important;
  border-color: var(--tala-border) !important;
  color: var(--tala-text) !important;
}

.tala-header-search input:focus {
  border-color: var(--tala-burgundy) !important;
  box-shadow: 0 0 0 3px rgba(148, 26, 46, 0.12) !important;
  outline: none;
}

.tala-header-search input::placeholder {
  color: var(--tala-text-muted);
}

.tala-header-search svg {
  color: var(--tala-burgundy) !important;
}


/* ===== Hero ===== */
.tala-hero {
  background: linear-gradient(180deg, var(--tala-cream) 0%, var(--tala-cream-light) 100%) !important;
}

.tala-hero__title {
  color: var(--tala-burgundy-dark) !important;
}

.tala-hero__desc {
  color: var(--tala-text-muted) !important;
}

.tala-hero__btn--primary {
  background: linear-gradient(135deg, var(--tala-burgundy), var(--tala-burgundy-dark)) !important;
  color: var(--tala-cream-light) !important;
  border-color: transparent !important;
}

.tala-hero__btn--primary:hover {
  background: var(--tala-burgundy-dark) !important;
}

.tala-hero__btn--secondary {
  background: var(--tala-olive) !important;
  color: var(--tala-cream-light) !important;
  border-color: transparent !important;
}

.tala-hero__btn--secondary:hover {
  background: var(--tala-olive-dark) !important;
}

.tala-hero__media {
  background: linear-gradient(145deg, var(--tala-blush), var(--tala-cream-light)) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 16px 40px rgba(76, 44, 38, 0.1) !important;
}

.tala-hero__arrow {
  background: var(--tala-cream-light) !important;
  color: var(--tala-burgundy) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 6px 16px rgba(76, 44, 38, 0.08) !important;
}

.tala-hero__dot::after {
  background: var(--tala-cream-dark) !important;
}

.tala-hero__dot.is-active::after {
  background: var(--tala-burgundy) !important;
}

/* ===== Product cards ===== */
.product-card,
.products-section .product-card,
.featured-section .product-card {
  background: var(--tala-white) !important;
  border: 1px solid var(--tala-border) !important;
  box-shadow: 0 8px 24px rgba(76, 44, 38, 0.06) !important;
}

.product-name,
.product-title {
  color: var(--tala-burgundy-dark) !important;
}

.product-desc,
.product-description {
  color: var(--tala-text-muted) !important;
}

.product-price,
.price {
  color: var(--tala-burgundy) !important;
}

.btn-cart,
.add-to-cart,
.tala-btn--primary {
  background: linear-gradient(135deg, var(--tala-burgundy), var(--tala-burgundy-dark)) !important;
  color: var(--tala-cream-light) !important;
  border: none !important;
}

.btn-cart:hover,
.add-to-cart:hover,
.tala-btn--primary:hover {
  background: var(--tala-burgundy-dark) !important;
}

.share-btn,
.wish-btn,
.wishlist-btn {
  background: var(--tala-white) !important;
  color: var(--tala-burgundy) !important;
  border: 1px solid var(--tala-border) !important;
}

.wish-btn.wished,
.wishlist-btn.active {
  background: rgba(148, 26, 46, 0.1) !important;
}

.wish-btn.wished svg,
.wishlist-btn.active svg {
  fill: var(--tala-burgundy) !important;
}

.badge-cat,
.stock-badge.in {
  background: rgba(98, 99, 45, 0.12) !important;
  color: var(--tala-olive-dark) !important;
}

.section-title,
.tala-section__head h2 {
  color: var(--tala-burgundy) !important;
}

/* ===== Bottom nav ===== */
.nav-dock {
  background: rgba(255, 249, 242, 0.96) !important;
  border-top: 1px solid var(--tala-border) !important;
  box-shadow: 0 -4px 20px rgba(76, 44, 38, 0.06) !important;
}

.nav-dock .nav-item {
  color: rgba(148, 26, 46, 0.55) !important;
}

.nav-dock .nav-item.active,
.nav-dock .nav-item:hover {
  color: var(--tala-burgundy-dark) !important;
}

/* Removed active ::after dot — looked like stray red pill on page */

.nav-dock-badge {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
}

/* ===== Footer — see css/tala-footer.css ===== */

/* ===== Forms & inputs ===== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.search-input,
.checkout-field input {
  background: var(--tala-cream-light) !important;
  border-color: var(--tala-border) !important;
  color: var(--tala-text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--tala-burgundy) !important;
  box-shadow: 0 0 0 3px rgba(148, 26, 46, 0.1) !important;
  outline: none;
}

/* ===== Chat widget ===== */
.tala-chat-launcher {
  background: linear-gradient(135deg, var(--tala-burgundy), var(--tala-burgundy-dark)) !important;
  color: var(--tala-cream-light) !important;
}

.tala-chat-ui .tala-chat-send {
  background: var(--tala-olive) !important;
}

.tala-chat-ui .tala-chat-bubble--bot {
  background: var(--tala-cream) !important;
  color: var(--tala-text) !important;
}

.tala-chat-ui .tala-chat-bubble--user {
  background: var(--tala-burgundy) !important;
  color: var(--tala-cream-light) !important;
}

/* ===== Sections alternating ===== */
.tala-section--brand {
  background: var(--tala-cream) !important;
}

.tala-section--reviews {
  background: var(--tala-cream-light) !important;
}

.featured-section {
  background: var(--tala-cream) !important;
}

.home-announcement {
  background: var(--tala-cream-light) !important;
}

.home-announcement__inner {
  background: var(--tala-white) !important;
  border-color: var(--tala-border) !important;
}

.home-announcement__text,
.home-announcement__text strong {
  color: var(--tala-text) !important;
}

.home-announcement__text strong {
  color: var(--tala-burgundy) !important;
}

.home-announcement__icon {
  background: var(--tala-burgundy) !important;
}

.back-to-top {
  background: var(--tala-burgundy) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: var(--tala-cream-light) !important;
}

/* ===== Cart & checkout ===== */
.btn-checkout,
.checkout-submit,
.order-complete-btn {
  background: linear-gradient(135deg, var(--tala-burgundy), var(--tala-burgundy-dark)) !important;
  color: var(--tala-cream-light) !important;
  border-color: transparent !important;
}

.btn-checkout:hover,
.checkout-submit:hover {
  background: var(--tala-burgundy-dark) !important;
  color: var(--tala-cream-light) !important;
}

.btn-shop,
.btn-continue {
  background: var(--tala-cream) !important;
  color: var(--tala-olive-dark) !important;
  border: 1px solid rgba(98, 99, 45, 0.25) !important;
}

.btn-shop:hover,
.btn-continue:hover {
  background: rgba(98, 99, 45, 0.12) !important;
  color: var(--tala-olive-dark) !important;
}

.checkout-step.active,
.checkout-step.is-active {
  color: var(--tala-burgundy) !important;
  border-color: var(--tala-burgundy) !important;
}

.checkout-step.done,
.checkout-step.is-complete {
  color: var(--tala-olive) !important;
  border-color: var(--tala-olive) !important;
}

.cart-total,
.summary-total,
.grand-total {
  color: var(--tala-burgundy) !important;
}

/* ===== Auth pages ===== */
.btn-login,
.btn-register,
.auth-btn,
.login-btn {
  background: linear-gradient(135deg, var(--tala-burgundy), var(--tala-burgundy-dark)) !important;
  color: var(--tala-cream-light) !important;
}

.btn-login:hover,
.btn-register:hover,
.auth-btn:hover {
  background: var(--tala-burgundy-dark) !important;
}

.profile-tab.active,
.account-tab.active {
  color: var(--tala-burgundy) !important;
  border-color: var(--tala-burgundy) !important;
}

.order-status.completed,
.status-delivered {
  color: var(--tala-olive) !important;
}

.order-status.cancelled,
.status-cancelled {
  color: var(--tala-burgundy-dark) !important;
}

/* ===== Routine / olive sections ===== */
.tala-routine-section,
.routine-cta,
.tala-section--routine {
  background: linear-gradient(135deg, rgba(98, 99, 45, 0.92), rgba(79, 81, 36, 0.96)) !important;
  color: var(--tala-cream-light) !important;
}

.tala-routine-section h2,
.routine-cta h2 {
  color: var(--tala-cream-light) !important;
}