/*
  Tala Cosmetics unified light/dark theme layer.
  This file intentionally loads after each page's inline CSS through header.php,
  so it can smooth old page-specific colors without breaking layouts.
*/

:root {
  color-scheme: light;
  --tala-bg: #fff9f3;
  --tala-bg-soft: #f7efe7;
  --tala-surface: #ffffff;
  --tala-surface-2: #eef0e0;
  --tala-surface-3: #f5e9e0;
  --tala-text: #2d1a1a;
  --tala-text-soft: #6d5656;
  --tala-muted: #8a7474;
  --tala-border: rgba(139, 35, 50, .13);
  --tala-border-strong: rgba(92, 107, 46, .22);
  --tala-primary: #8b2332;
  --tala-primary-2: #b85c6b;
  --tala-green: #5c6b2e;
  --tala-gold: #c6a66e;
  --tala-shadow: 0 18px 55px rgba(139, 35, 50, .12);
  --tala-shadow-soft: 0 8px 28px rgba(139, 35, 50, .08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --tala-bg: #110b0d;
  --tala-bg-soft: #171012;
  --tala-surface: #1f1517;
  --tala-surface-2: #24191b;
  --tala-surface-3: #2b1d20;
  --tala-text: #f7e7df;
  --tala-text-soft: #d4bcb6;
  --tala-muted: #b99d98;
  --tala-border: rgba(232, 176, 188, .18);
  --tala-border-strong: rgba(198, 166, 110, .28);
  --tala-primary: #e06070;
  --tala-primary-2: #f0a5af;
  --tala-green: #a8b87a;
  --tala-gold: #e2c784;
  --tala-shadow: 0 22px 60px rgba(0, 0, 0, .42);
  --tala-shadow-soft: 0 10px 34px rgba(0, 0, 0, .32);

  --primary: #e06070;
  --primary-light: #f0a5af;
  --primary-dark: #8b2332;
  --secondary: #e2c784;
  --secondary-light: #f3dda1;
  --accent: #e8b0bc;
  --accent-light: #3a2530;
  --neutral: #24191b;
  --neutral-dark: #2b1d20;
  --light: #110b0d;
  --dark: #f7e7df;
  --text: #f7e7df;
  --text-light: #d4bcb6;
  --bg: #110b0d;
  --card: #1f1517;
  --txt: #f7e7df;
  --sub: #d4bcb6;
  --t1: #f7e7df;
  --t2: #d4bcb6;
  --border: rgba(232, 176, 188, .18);
  --rose: #e06070;
  --green: #a8b87a;
  --green-light: rgba(168, 184, 122, .16);
}

html {
  background: var(--tala-bg);
  font-family: var(--font-main, 'Tajawal', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(184, 92, 107, .11), transparent 36%),
    radial-gradient(circle at 90% 2%, rgba(92, 107, 46, .10), transparent 34%),
    var(--tala-bg) !important;
  color: var(--tala-text) !important;
  font-family: var(--font-main, 'Tajawal', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-main, 'Tajawal', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
  letter-spacing: 0;
}

p,
li,
.site-guide-step p,
.about-card p,
.product-desc,
.product-description,
.cart-feature-box,
.checkout-field__hint,
.site-footer-desc {
  font-weight: 500 !important;
  line-height: 1.9 !important;
  color: var(--tala-text-soft) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.site-guide-copy h2,
.site-guide-step h3,
.about-card-title,
.product-name,
.product-title {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

.site-guide-step,
.product-guide__card,
.trust-strip__card,
.home-announcement__inner,
.install-app-card.install-app-card--home,
.about-card,
.product-card,
.cart-item,
.cart-summary,
.checkout-field,
.order-card,
.profile-card,
.site-footer-instagram-card {
  border: 1px solid rgba(119, 132, 154, .18) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 38px rgba(40, 50, 70, .06) !important;
}

.site-guide-step {
  background: rgba(255, 255, 255, .82) !important;
  padding: 20px 22px !important;
}

.site-guide-step__num {
  color: #7b8799 !important;
  background: #f7f9fc !important;
  border: 1px solid rgba(119, 132, 154, .18) !important;
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -10%, rgba(224, 96, 112, .14), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(198, 166, 110, .10), transparent 30%),
    linear-gradient(135deg, rgba(17, 11, 13, .98), rgba(25, 16, 18, .98)) !important;
}

[data-theme="dark"] body::before {
  opacity: .22 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .section-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .product-name,
[data-theme="dark"] .product-title,
[data-theme="dark"] .login-header h2,
[data-theme="dark"] .register-header h2,
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
  color: var(--tala-text) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] small,
[data-theme="dark"] .sub,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .product-desc,
[data-theme="dark"] .product-description,
[data-theme="dark"] .login-header p,
[data-theme="dark"] .register-header p,
[data-theme="dark"] .results-card-desc,
[data-theme="dark"] .info-card-lbl {
  color: var(--tala-text-soft) !important;
}

[data-theme="dark"] .login-container,
[data-theme="dark"] .register-container,
[data-theme="dark"] .login-right,
[data-theme="dark"] .register-right,
[data-theme="dark"] .card,
[data-theme="dark"] .prof-card,
[data-theme="dark"] .prof-nav,
[data-theme="dark"] .coupon-card,
[data-theme="dark"] .coupons-empty,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .cart-item,
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-card,
[data-theme="dark"] .points-card,
[data-theme="dark"] .points-panel,
[data-theme="dark"] .wishlist-card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .site-guide-inner,
[data-theme="dark"] .products-carousel-bg,
[data-theme="dark"] .results-carousel-bg,
[data-theme="dark"] .product-card,
[data-theme="dark"] .mood-card,
[data-theme="dark"] .benefit-item,
[data-theme="dark"] .info-card,
[data-theme="dark"] .item-row,
[data-theme="dark"] .order-row {
  background: linear-gradient(180deg, rgba(36, 25, 27, .96), rgba(31, 21, 23, .98)) !important;
  border-color: var(--tala-border) !important;
  box-shadow: var(--tala-shadow-soft) !important;
  color: var(--tala-text) !important;
}

[data-theme="dark"] .login-left,
[data-theme="dark"] .register-left,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .points-hero,
[data-theme="dark"] .prof-hero,
[data-theme="dark"] .coupons-hero,
[data-theme="dark"] .prize-banner {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .10), transparent 34%),
    linear-gradient(135deg, #6b1520, #3d0a12 68%, #241016) !important;
  color: #fff !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .modal-input,
[data-theme="dark"] .search-input,
[data-theme="dark"] .orders-search,
[data-theme="dark"] .orders-filter-select {
  background: #2a1d20 !important;
  color: var(--tala-text) !important;
  border-color: var(--tala-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(247, 231, 223, .50) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .search-input:focus {
  border-color: var(--tala-primary-2) !important;
  box-shadow: 0 0 0 4px rgba(224, 96, 112, .18) !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] button,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-save,
[data-theme="dark"] .btn-pw {
  border-color: rgba(232, 176, 188, .18);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-p,
[data-theme="dark"] .btn-save,
[data-theme="dark"] .btn-pw,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .add-cart-btn {
  background: linear-gradient(135deg, #8b2332, #5b101b) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(139, 35, 50, .30) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-google,
[data-theme="dark"] .login-tab,
[data-theme="dark"] .chip,
[data-theme="dark"] .qty-box,
[data-theme="dark"] .qty-btn,
[data-theme="dark"] .wish-btn,
[data-theme="dark"] .share-btn {
  background: #24191b !important;
  color: var(--tala-text) !important;
  border-color: var(--tala-border) !important;
}

[data-theme="dark"] a:not(.btn):not(.nav-item):not(.sb-link):not(.social-btn):not(.topbar-chip) {
  color: var(--tala-primary-2);
}

[data-theme="dark"] .divider::before,
[data-theme="dark"] .divider::after,
[data-theme="dark"] hr,
[data-theme="dark"] .product-footer,
[data-theme="dark"] .card-head,
[data-theme="dark"] .table th,
[data-theme="dark"] .tbl th,
[data-theme="dark"] .table td,
[data-theme="dark"] .tbl td {
  border-color: var(--tala-border) !important;
}

[data-theme="dark"] .divider span {
  background: var(--tala-surface) !important;
  color: var(--tala-muted) !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .tbl-wrap {
  background: var(--tala-surface) !important;
  color: var(--tala-text) !important;
}

[data-theme="dark"] thead,
[data-theme="dark"] th {
  background: #271c1f !important;
  color: var(--tala-text) !important;
}

[data-theme="dark"] .badge,
[data-theme="dark"] .skin-type-badge,
[data-theme="dark"] .orders-pay-badge {
  border: 1px solid rgba(232, 176, 188, .16);
}

[data-theme="dark"] .alert,
[data-theme="dark"] .msg,
[data-theme="dark"] .form-message {
  background: rgba(36, 25, 27, .96) !important;
  border-color: var(--tala-border) !important;
  color: var(--tala-text) !important;
}

[data-theme="dark"] .password-toggle,
[data-theme="dark"] .pw-toggle,
[data-theme="dark"] .input-icon,
[data-theme="dark"] .search-icon {
  color: var(--tala-muted) !important;
}

[data-theme="dark"] .remember-me label,
[data-theme="dark"] .terms-check,
[data-theme="dark"] .terms-check label {
  color: var(--tala-text-soft) !important;
}

[data-theme="dark"] ::selection {
  background: rgba(224, 96, 112, .32);
  color: #fff;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #160f11;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b1520, #8b2332);
  border-color: #160f11;
}

.icon-btn--theme-toggle,
.nav-theme-btn {
  isolation: isolate;
}

[data-theme="dark"] .icon-btn--theme-toggle,
[data-theme="dark"] .nav-theme-btn {
  background: rgba(224, 96, 112, .16) !important;
  color: #f7d9df !important;
  border-color: rgba(224, 96, 112, .24) !important;
}

[data-theme="dark"] img {
  filter: saturate(.92) brightness(.92);
}

[data-theme="dark"] .brand img,
[data-theme="dark"] .sb-logo,
[data-theme="dark"] .product-card img,
[data-theme="dark"] .product-images img {
  filter: none;
}

/* Premium polish layer */
html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

a,
button,
.btn,
.icon-btn,
.product-card,
.card,
.site-footer-action,
.nav-item {
  transition-duration: .2s !important;
}

.card,
.product-card,
.faq-item,
.cart-item,
.cart-summary,
.order-card,
.wishlist-card,
.points-card,
.prof-card,
.modal-box,
.site-guide-inner,
.about-card {
  border-radius: 18px !important;
  border-color: var(--tala-border) !important;
  box-shadow: var(--tala-shadow-soft) !important;
}

.product-card:hover,
.card:hover,
.site-guide-step:hover,
.site-footer-action:hover {
  transform: translateY(-2px);
}

input,
textarea,
select,
.form-control,
.modal-input,
.search-input,
.orders-search,
.orders-filter-select {
  border-radius: 14px !important;
  min-height: 44px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  vertical-align: middle;
}

img {
  content-visibility: auto;
}

.home-install-section {
  padding: clamp(28px, 5vw, 56px) 16px;
  background:
    radial-gradient(circle at 18% 20%, rgba(198, 166, 110, .14), transparent 28%),
    linear-gradient(180deg, rgba(255,249,243,.92), rgba(247,239,231,.72));
}

.install-app-card.install-app-card--home {
  width: min(100%, 1080px);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: center;
  gap: clamp(18px, 4vw, 44px);
  padding: clamp(22px, 4vw, 42px) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,240,224,.94)) !important;
  border: 1px solid rgba(139, 35, 50, .12) !important;
  box-shadow: 0 22px 60px rgba(58, 14, 24, .12) !important;
}

.install-app-copy {
  min-width: 0;
}

.install-app-eyebrow {
  display: inline-flex !important;
  width: max-content;
  margin: 0 0 12px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #5c6b2e !important;
  background: rgba(92, 107, 46, .12);
  border: 1px solid rgba(92, 107, 46, .16);
  font-size: 12px !important;
  font-weight: 900 !important;
}

.install-app-card.install-app-card--home strong {
  font-size: clamp(24px, 4vw, 38px) !important;
  line-height: 1.2;
  margin-bottom: 12px !important;
  color: var(--tala-primary) !important;
}

.install-app-card.install-app-card--home span:not(.install-app-eyebrow) {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--tala-text-soft) !important;
}

.install-app-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.install-app-btn {
  min-height: 48px;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b2332, #6b1520) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(139, 35, 50, .24) !important;
}

.install-app-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #5c6b2e, #3d4a1e) !important;
}

.install-app-video {
  display: flex;
  justify-content: center;
}

.install-app-phone {
  width: min(100%, 260px);
  aspect-ratio: 9 / 16;
  border-radius: 30px;
  padding: 14px;
  background: linear-gradient(145deg, #2d1a1a, #111);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .18);
  position: relative;
}

.install-app-phone-top {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 72px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  z-index: 2;
}

.install-app-video-placeholder {
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,249,243,.94), rgba(238,240,224,.92)),
    url('../images/app-icon.svg') center 34% / 88px 88px no-repeat;
  color: #6b1520;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.35);
}

.install-app-video-placeholder span {
  margin-top: 92px;
  font-size: 13px !important;
  color: #6b1520 !important;
}

.install-app-demo-video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  background: #120b0d;
}

[data-theme="dark"] .home-install-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(224, 96, 112, .12), transparent 28%),
    linear-gradient(180deg, rgba(17,11,13,.95), rgba(26,18,18,.92));
}

[data-theme="dark"] .install-app-card.install-app-card--home {
  background: linear-gradient(135deg, rgba(36,25,27,.98), rgba(31,21,23,.96)) !important;
  border-color: rgba(232,176,188,.18) !important;
}

[data-theme="dark"] .install-app-eyebrow {
  color: #e2c784 !important;
  background: rgba(226, 199, 132, .12);
  border-color: rgba(226, 199, 132, .24);
}

[data-theme="dark"] .install-app-video-placeholder {
  background:
    linear-gradient(180deg, rgba(42,29,32,.96), rgba(31,21,23,.96)),
    url('../images/app-icon.svg') center 34% / 88px 88px no-repeat;
  color: var(--tala-text);
  border-color: rgba(232,176,188,.14);
}

[data-theme="dark"] .install-app-video-placeholder span {
  color: var(--tala-text) !important;
}

[data-theme="dark"] .site-guide-copy h2,
[data-theme="dark"] .about-card-title,
[data-theme="dark"] .about-card h3 {
  color: #f3d7dc !important;
}

[data-theme="dark"] .about-card p,
[data-theme="dark"] .site-guide-copy p,
[data-theme="dark"] .site-guide-step p {
  color: #dcc7c1 !important;
}

[data-theme="dark"] tr,
[data-theme="dark"] td {
  color: var(--tala-text) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .help-text,
[data-theme="dark"] .hint {
  color: #cdb6b0 !important;
}

@media (max-width: 760px) {
  .install-app-card.install-app-card--home {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .install-app-eyebrow,
  .install-app-actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .install-app-phone {
    width: min(78vw, 250px);
  }
}