/*
Theme Name: Woodmart Child - Faceban Modern
Theme URI: https://faceban.ir
Description: Modern UI child theme for Faceban beauty store — visual-only overhaul on top of Woodmart.
Author: Faceban
Template: woodmart
Version: 1.0.0
Text Domain: woodmart-child
*/

/* ============================================================
   FACEBAN MODERN UI — Child Theme CSS
   Philosophy: Clean, minimal, modern — RTL Persian beauty store
   Changes: Visual/UI only. Zero workflow or DB changes.
   ============================================================ */

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — override Woodmart defaults
   ---------------------------------------------------------------- */
:root {
  /* Brand palette */
  --fb-primary:        #c0392b;      /* deep rose-red — beauty brand */
  --fb-primary-light:  #e74c3c;
  --fb-primary-subtle: #fdf2f2;
  --fb-accent:         #8e44ad;      /* purple accent */
  --fb-dark:           #1a1a2e;
  --fb-text:           #2d2d2d;
  --fb-text-muted:     #6b7280;
  --fb-border:         #e5e7eb;
  --fb-bg:             #f9fafb;
  --fb-white:          #ffffff;

  /* Typography */
  --fb-font-main:      'iranyekanwebregular', 'Tahoma', sans-serif;
  --fb-font-size-base: 15px;
  --fb-line-height:    1.8;

  /* Radius & shadow */
  --fb-radius-sm:  6px;
  --fb-radius-md:  12px;
  --fb-radius-lg:  18px;
  --fb-radius-xl:  24px;
  --fb-radius-pill:50px;
  --fb-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --fb-shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --fb-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --fb-shadow-hover: 0 12px 40px rgba(192,57,43,.15);

  /* Override Woodmart vars */
  --wd-brd-radius:      var(--fb-radius-sm);
  --wd-text-line-height:var(--fb-line-height);
  --btn-height:         46px;
  --btn-transform:      none;
  --btn-font-weight:    600;
}

/* ----------------------------------------------------------------
   2. GLOBAL BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fb-font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--fb-font-main) !important;
  color: var(--fb-text);
  background-color: var(--fb-white);
  line-height: var(--fb-line-height);
  -webkit-font-smoothing: antialiased;
}

/* IRANYekan is self-hosted on the server — no external font CDN needed */

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wd-title, .product-title, .woocommerce-loop-product__title {
  font-family: var(--fb-font-main) !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fb-dark);
}

p, li, span, a, td, th, label, input, select, textarea {
  font-family: var(--fb-font-main) !important;
}

a {
  color: var(--fb-primary);
  transition: color .2s ease;
}
a:hover { color: var(--fb-primary-light); }

/* ----------------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------------- */
/* Main header — clean white with soft bottom border */
.whb-header,
#site-header,
.site-header {
  background: var(--fb-white) !important;
  border-bottom: 1px solid var(--fb-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}

/* Sticky header */
.whb-sticky-real.whb-sticky-in,
.whb-clone {
  background: var(--fb-white) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}

/* Site logo area */
.whb-logo img {
  max-height: 52px !important;
}

/* Navigation links */
.woodmart-navigation .menu > li > a,
.main-nav .menu > li > a {
  font-family: var(--fb-font-main) !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--fb-text) !important;
  transition: color .2s ease;
  padding: 8px 14px !important;
  border-radius: var(--fb-radius-sm);
}
.woodmart-navigation .menu > li > a:hover,
.main-nav .menu > li > a:hover {
  color: var(--fb-primary) !important;
  background: var(--fb-primary-subtle) !important;
}
.woodmart-navigation .menu > li.current-menu-item > a {
  color: var(--fb-primary) !important;
}

/* Header icons (cart, search, account) */
.wd-header-search .wd-tools-icon svg,
.wd-header-wishlist .wd-tools-icon svg,
.wd-header-cart .wd-tools-icon svg,
.wd-tools-icon svg {
  stroke: var(--fb-text) !important;
  transition: stroke .2s;
}
.wd-tools-element:hover .wd-tools-icon svg {
  stroke: var(--fb-primary) !important;
}

/* Cart count badge */
.wd-header-cart .wd-tools-badge,
.wd-cart-count {
  background-color: var(--fb-primary) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
}

/* Search bar */
.wd-search-form input[type="search"],
.widget_search input[type="search"],
.search-field {
  border-radius: var(--fb-radius-pill) !important;
  border: 1.5px solid var(--fb-border) !important;
  padding: 10px 20px !important;
  font-family: var(--fb-font-main) !important;
  font-size: 14px !important;
  background: var(--fb-bg) !important;
  transition: border-color .2s, box-shadow .2s;
}
.wd-search-form input[type="search"]:focus,
.search-field:focus {
  border-color: var(--fb-primary) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important;
  outline: none !important;
}

/* ----------------------------------------------------------------
   5. MEGA DROPDOWN / NAVIGATION DROPDOWN
   ---------------------------------------------------------------- */
.sub-menu,
.woodmart-navigation .sub-menu,
.whb-navigation .sub-menu {
  border-radius: var(--fb-radius-md) !important;
  border: 1px solid var(--fb-border) !important;
  box-shadow: var(--fb-shadow-lg) !important;
  overflow: hidden;
}

.sub-menu li a {
  font-size: 14px !important;
  padding: 10px 20px !important;
  color: var(--fb-text) !important;
  transition: background .15s, color .15s;
}
.sub-menu li a:hover {
  background: var(--fb-primary-subtle) !important;
  color: var(--fb-primary) !important;
}

/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.btn,
.wd-btn,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--fb-font-main) !important;
  border-radius: var(--fb-radius-pill) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .3px !important;
  transition: all .25s ease !important;
  cursor: pointer;
}

/* Primary button */
.wd-btn-primary,
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--fb-primary) !important;
  border-color: var(--fb-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(192,57,43,.3) !important;
}
.wd-btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: var(--fb-primary-light) !important;
  border-color: var(--fb-primary-light) !important;
  box-shadow: 0 6px 20px rgba(192,57,43,.4) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / outline button */
.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce a.button:not(.alt) {
  border: 1.5px solid var(--fb-primary) !important;
  color: var(--fb-primary) !important;
  background: transparent !important;
}
.button:not(.alt):hover {
  background: var(--fb-primary) !important;
  color: #fff !important;
}

/* Add to cart on product list */
.woocommerce ul.products li.product .button,
.woocommerce-loop-add-to-cart-link {
  border-radius: var(--fb-radius-pill) !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
}

/* ----------------------------------------------------------------
   7. PRODUCT CARDS
   ---------------------------------------------------------------- */
.products .product,
.woocommerce ul.products li.product,
.wd-product {
  border-radius: var(--fb-radius-md) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease !important;
  background: var(--fb-white);
  border: 1px solid var(--fb-border) !important;
}
.products .product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--fb-shadow-hover) !important;
  border-color: rgba(192,57,43,.2) !important;
}

/* Product image */
.woocommerce ul.products li.product img,
.product-image-wrapper img {
  transition: transform .4s ease !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wd-entities-title,
.product-title {
  font-family: var(--fb-font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fb-dark) !important;
  line-height: 1.5 !important;
  margin-top: 10px !important;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: var(--fb-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.woocommerce .price del {
  color: var(--fb-text-muted) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.woocommerce .price ins {
  text-decoration: none !important;
  color: var(--fb-primary) !important;
}

/* Sale badge */
.onsale,
.woocommerce span.onsale {
  background: var(--fb-primary) !important;
  border-radius: var(--fb-radius-sm) !important;
  font-family: var(--fb-font-main) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  min-height: unset !important;
  min-width: unset !important;
  border-radius: var(--fb-radius-pill) !important;
}

/* Product info area inside card */
.product-information,
.wd-product-grid .product-element-bottom {
  padding: 12px 16px 16px !important;
}

/* Star ratings */
.star-rating span::before,
.star-rating::before {
  color: #f59e0b !important;
}

/* ----------------------------------------------------------------
   8. PRODUCT SINGLE PAGE
   ---------------------------------------------------------------- */
.woocommerce div.product .product_title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--fb-dark) !important;
  line-height: 1.3 !important;
}

.woocommerce div.product .price {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fb-primary) !important;
}

/* Product tabs */
.woocommerce .woocommerce-tabs .tabs li a {
  font-family: var(--fb-font-main) !important;
  font-weight: 600 !important;
  color: var(--fb-text-muted) !important;
  border-radius: var(--fb-radius-sm) var(--fb-radius-sm) 0 0 !important;
  transition: color .2s;
}
.woocommerce .woocommerce-tabs .tabs li.active a {
  color: var(--fb-primary) !important;
  border-color: var(--fb-border) var(--fb-border) #fff !important;
}

/* Quantity input */
.quantity input.qty,
.woocommerce .quantity input {
  border-radius: var(--fb-radius-sm) !important;
  border: 1.5px solid var(--fb-border) !important;
  font-family: var(--fb-font-main) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------
   9. SIDEBAR & WIDGETS
   ---------------------------------------------------------------- */
.widget-title,
.widgettitle {
  font-family: var(--fb-font-main) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--fb-dark) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--fb-primary) !important;
  margin-bottom: 20px !important;
}

.widget ul li a {
  font-family: var(--fb-font-main) !important;
  color: var(--fb-text) !important;
  font-size: 14px !important;
  transition: color .2s;
}
.widget ul li a:hover { color: var(--fb-primary) !important; }

/* Price filter widget */
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  background: var(--fb-primary) !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--fb-primary) !important;
  border-color: var(--fb-primary) !important;
}

/* ----------------------------------------------------------------
   10. CATEGORY BLOCKS / BANNERS
   ---------------------------------------------------------------- */
.wd-product-cats .wd-item,
.woodmart-product-categories .wd-item {
  border-radius: var(--fb-radius-lg) !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.wd-product-cats .wd-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--fb-shadow-md) !important;
}

.wd-product-cats .wd-title {
  font-family: var(--fb-font-main) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* ----------------------------------------------------------------
   11. BREADCRUMBS
   ---------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.breadcrumbs {
  font-family: var(--fb-font-main) !important;
  font-size: 13px !important;
  color: var(--fb-text-muted) !important;
  padding: 8px 0 !important;
}
.woocommerce .woocommerce-breadcrumb a,
.breadcrumbs a {
  color: var(--fb-text-muted) !important;
}
.woocommerce .woocommerce-breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--fb-primary) !important;
}

/* ----------------------------------------------------------------
   12. FORMS & INPUTS (checkout, account, contact)
   ---------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
  font-family: var(--fb-font-main) !important;
  border-radius: var(--fb-radius-md) !important;
  border: 1.5px solid var(--fb-border) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--fb-text) !important;
  background: var(--fb-white) !important;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--fb-primary) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1) !important;
  outline: none !important;
}

label {
  font-family: var(--fb-font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fb-text) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* ----------------------------------------------------------------
   13. CHECKOUT & CART
   ---------------------------------------------------------------- */
.woocommerce-checkout h3,
.woocommerce-cart-form h2,
.woocommerce-cart .cart-collaterals h2 {
  font-family: var(--fb-font-main) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--fb-dark) !important;
  border-bottom: 2px solid var(--fb-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

.woocommerce-checkout #payment .payment_methods {
  border-radius: var(--fb-radius-md) !important;
  border: 1.5px solid var(--fb-border) !important;
  overflow: hidden;
}

.cart_totals,
.order-total {
  border-radius: var(--fb-radius-md) !important;
  border: 1.5px solid var(--fb-border) !important;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   14. NOTICES & ALERTS
   ---------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--fb-radius-md) !important;
  font-family: var(--fb-font-main) !important;
  font-size: 14px !important;
}
.woocommerce-message { border-top-color: var(--fb-primary) !important; }
.woocommerce-info    { border-top-color: #3b82f6 !important; }

/* ----------------------------------------------------------------
   15. PAGINATION
   ---------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--fb-radius-sm) !important;
  font-family: var(--fb-font-main) !important;
  font-weight: 600 !important;
  min-width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--fb-primary) !important;
  border-color: var(--fb-primary) !important;
  color: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--fb-primary-subtle) !important;
  border-color: var(--fb-primary) !important;
  color: var(--fb-primary) !important;
}

/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */
.site-footer,
#site-footer,
.footer-container {
  background: #1a1a2e !important;
  color: rgba(255,255,255,.85) !important;
}

.footer-container .widget-title,
.site-footer .widget-title,
.footer-container .widgettitle {
  color: #fff !important;
  border-bottom-color: var(--fb-primary) !important;
  font-family: var(--fb-font-main) !important;
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-family: var(--fb-font-main) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
}
.site-footer a:hover {
  color: #fff !important;
}

/* Bottom bar / copyright */
.footer-bottom,
.site-info,
.copyright {
  background: #11112a !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
  font-family: var(--fb-font-main) !important;
  font-size: 13px !important;
}

/* ----------------------------------------------------------------
   17. MOBILE MENU
   ---------------------------------------------------------------- */
.wd-nav-mobile,
.woodmart-mobile-nav {
  background: var(--fb-white) !important;
}

.mobile-nav-items .menu > li > a,
.wd-nav-mobile .menu > li > a {
  font-family: var(--fb-font-main) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--fb-dark) !important;
  border-bottom: 1px solid var(--fb-border) !important;
}

/* ----------------------------------------------------------------
   18. SECTION TITLES & HEADINGS ON HOMEPAGE
   ---------------------------------------------------------------- */
.wd-block-title .title,
.woodmart-title-block .title {
  font-family: var(--fb-font-main) !important;
  font-weight: 800 !important;
  color: var(--fb-dark) !important;
  position: relative;
  padding-bottom: 12px;
}
.wd-block-title .title::after,
.woodmart-title-block .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 3px;
  background: var(--fb-primary);
  border-radius: 2px;
}

/* ----------------------------------------------------------------
   19. PRODUCT FILTERS AREA
   ---------------------------------------------------------------- */
.woocommerce-ordering select,
.wd-products-filter select {
  border-radius: var(--fb-radius-pill) !important;
  border: 1.5px solid var(--fb-border) !important;
  padding: 8px 36px 8px 16px !important;
  font-family: var(--fb-font-main) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fb-text) !important;
  background: var(--fb-white) !important;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   20. TOPBAR (if present)
   ---------------------------------------------------------------- */
.wd-header-builder .whb-row.whb-type-top,
.top-bar-wrap {
  background: var(--fb-dark) !important;
  color: rgba(255,255,255,.8) !important;
  font-family: var(--fb-font-main) !important;
  font-size: 12px !important;
}

/* ----------------------------------------------------------------
   21. LOADING STATES & MISC
   ---------------------------------------------------------------- */
/* WooCommerce spinner */
.blockUI.blockOverlay::before {
  border-color: var(--fb-primary) transparent transparent !important;
}

/* Cart drawer / side cart */
.wd-side-cart,
.woocommerce-mini-cart {
  font-family: var(--fb-font-main) !important;
  border-radius: var(--fb-radius-lg) 0 0 var(--fb-radius-lg) !important;
}

/* ----------------------------------------------------------------
   22. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fb-font-size-base: 14px;
  }

  .woocommerce div.product .product_title { font-size: 20px !important; }
  .woocommerce div.product .price        { font-size: 18px !important; }

  .whb-logo img { max-height: 40px !important; }
}

/* ----------------------------------------------------------------
   23. RTL SPECIFIC TWEAKS
   ---------------------------------------------------------------- */
[dir="rtl"] .wd-block-title .title::after,
body.rtl .woodmart-title-block .title::after {
  right: 0;
  left: auto;
}

[dir="rtl"] .sub-menu,
body.rtl .sub-menu {
  border-radius: var(--fb-radius-md) !important;
}

/* RTL breadcrumb separator */
body.rtl .woocommerce .woocommerce-breadcrumb,
body.rtl nav.woocommerce-breadcrumb {
  direction: rtl;
}