/* ==========================================================================
   HARAVAN THEME UNIFIED BLACK & WHITE DESIGN TOKENS
   Version: 2.0.0
   Scope: Storefront Palette Bridge & Universal Component Theming
   ========================================================================== */

:root {
  --color-background: #ffffff;
  --color-text: #000000;
  --color-border: #000000;
  --color-button-background: #000000;
  --color-button-text: #ffffff;

  /* Aliases for backwards compatibility with legacy theme variables */
  --f1z-color-background: var(--color-background);
  --f1z-color-text: var(--color-text);
  --f1z-color-border: var(--color-border);
  --f1z-color-button-bg: var(--color-button-background);
  --f1z-color-button-text: var(--color-button-text);

  --pinon-bg: var(--color-background);
  --pinon-white: var(--color-background);
  --pinon-text: var(--color-text);
  --pinon-text-light: rgba(0, 0, 0, 0.65);
  --pinon-accent: var(--color-button-background);
  --pinon-accent-hover: var(--color-background);
  --pinon-accent-light: var(--color-background);
  --pinon-border: var(--color-border);
}

/* ==========================================================================
   1. BASE LAYOUT & BODY
   ========================================================================== */
html,
body,
.main-body,
.mainContent-theme,
.mainContent-index,
.scroller,
.scroller-inner,
.pinon-homepage,
.pinon-prod-page {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

/* ==========================================================================
   2. TYPOGRAPHY & LINKS
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.main-body h1, .main-body h2, .main-body h3, .main-body h4, .main-body h5, .main-body h6,
.pinon-sec-title, .pinon-hero-title, .pinon-room-name, .pinon-cat-name,
.pinon-promo-value, .pinon-promo-title, .pinon-guide-title, .pinon-material-title,
.pinon-prod-title, .pinon-prod-price, .pinon-footer-heading, .pinon-search-title,
.pinon-cart-title, .pinon-cart-subtotal-value {
  color: var(--color-text) !important;
}

.main-body a,
.main-body a:visited {
  color: var(--color-text);
  text-decoration: none;
}

.main-body a:hover,
.main-body a:focus {
  color: var(--color-text);
}

.pinon-sec-link,
.pinon-room-card,
.pinon-cat-card,
.pinon-dropdown-link,
.pinon-nav-link {
  color: var(--color-text) !important;
}

/* Muted / Secondary Typography */
del,
.pro-price span.pro-price-del,
.pinon-prod-compare,
.pinon-room-count,
.pinon-cat-count,
.pinon-guide-desc,
.pinon-promo-desc,
.pinon-promo-label,
.breadcrumb,
.breadcrumb a,
.pinon-breadcrumbs,
.pinon-breadcrumbs a,
.sitebox-recaptcha,
.product-price del,
.pinon-cart-empty,
.pinon-search-results-content .dataEmpty {
  color: rgba(0, 0, 0, 0.65) !important;
}

p.pro-price,
.pro-price.highlight,
.line-item-total,
.pinon-prod-price,
.pinon-cart-item-price {
  color: var(--color-text) !important;
}

/* ==========================================================================
   3. HEADER, MENU & NAVIGATION
   ========================================================================== */
.pinon-header-wrap,
.pinon-topbar,
.main-body header.main-header,
.list-submenu-large,
.smart-search-wrapper,
.breadcrumb-shop,
.promo-bar,
.header-transparent {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.promo-bar a,
.main-body .menuList-links > li > a,
ul.list-mainmenu > li > a,
ul.list-submenu li a {
  color: var(--color-text) !important;
}

.pinon-dropdown,
.pinon-dropdown-sub {
  background-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.pinon-dropdown-link:hover {
  background-color: #F6F6F6 !important;
  color: #000000 !important;
  text-decoration: none !important;
}

.pinon-hamburger span {
  background-color: var(--color-text) !important;
}

.pinon-action-icon {
  color: var(--color-text) !important;
}

.pinon-cart-badge,
.js-wl-counter {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
}

/* ==========================================================================
   4. BUTTONS (PRIMARY, SECONDARY, DISABLED)
   ========================================================================== */
/* Primary Buttons: Black bg, White text, Black border */
.main-body .button,
.main-body button.buy-now,
.main-body button.btn-addtocart,
.main-body a.btn-check,
.main-body .checkout-btn,
.main-body .btn-product-gift,
.main-body .article-comment .comment_form button.btn-rb,
.main-body .content-newsletter button,
.main-body .popup-form-customer .input-group .input-group-addon,
.main-body .pinon-prod-btn,
.main-body a.pinon-prod-btn,
.main-body .pinon-promo-btn,
.main-body a.pinon-promo-btn,
.main-body .pinon-custom-banner-btn,
.main-body a.pinon-custom-banner-btn,
.main-body .pinon-mat-banner-btn,
.main-body a.pinon-mat-banner-btn,
.main-body .pinon-sticky-buy-btn,
.main-body a.pinon-sticky-buy-btn,
.main-body .pinon-cart-btn.primary,
.main-body a.pinon-cart-btn.primary,
.main-body .pinon-search-results-content .resultsMore a,
.main-body .pinon-cart-empty-btn,
.main-body a.pinon-cart-empty-btn,
.main-body .btn-primary,
.main-body a.btn-primary,
.main-body .btn-submit,
.main-body input[type="submit"].btn,
.main-body .btn-buy-now,
.main-body a.btn-buy-now,
.main-body .btn-add-cart,
.main-body a.btn-add-cart,
.pinon-prod-btn,
.pinon-promo-btn,
.pinon-custom-banner-btn,
.pinon-mat-banner-btn,
.pinon-sticky-buy-btn {
  background-color: var(--color-button-background) !important;
  border: 1px solid var(--color-button-background) !important;
  color: var(--color-button-text) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Primary Button Hover: White bg, Black text, Black border */
.main-body .button:hover,
.main-body .button:focus,
.main-body button.buy-now:hover,
.main-body button.buy-now:focus,
.main-body button.btn-addtocart:hover,
.main-body button.btn-addtocart:focus,
.main-body a.btn-check:hover,
.main-body a.btn-check:focus,
.main-body .checkout-btn:hover,
.main-body .checkout-btn:focus,
.main-body .btn-product-gift:hover,
.main-body .btn-product-gift:focus,
.main-body .article-comment .comment_form button.btn-rb:hover,
.main-body .article-comment .comment_form button.btn-rb:focus,
.main-body .content-newsletter button:hover,
.main-body .content-newsletter button:focus,
.main-body .popup-form-customer .input-group .input-group-addon:hover,
.main-body .popup-form-customer .input-group .input-group-addon:focus,
.main-body .pinon-prod-btn:hover,
.main-body .pinon-prod-btn:focus,
.main-body a.pinon-prod-btn:hover,
.main-body a.pinon-prod-btn:focus,
.main-body .pinon-promo-btn:hover,
.main-body .pinon-promo-btn:focus,
.main-body a.pinon-promo-btn:hover,
.main-body a.pinon-promo-btn:focus,
.main-body .pinon-custom-banner-btn:hover,
.main-body .pinon-custom-banner-btn:focus,
.main-body a.pinon-custom-banner-btn:hover,
.main-body a.pinon-custom-banner-btn:focus,
.main-body .pinon-mat-banner-btn:hover,
.main-body .pinon-mat-banner-btn:focus,
.main-body a.pinon-mat-banner-btn:hover,
.main-body a.pinon-mat-banner-btn:focus,
.main-body .pinon-sticky-buy-btn:hover,
.main-body .pinon-sticky-buy-btn:focus,
.main-body a.pinon-sticky-buy-btn:hover,
.main-body a.pinon-sticky-buy-btn:focus,
.main-body .pinon-cart-btn.primary:hover,
.main-body .pinon-cart-btn.primary:focus,
.main-body a.pinon-cart-btn.primary:hover,
.main-body a.pinon-cart-btn.primary:focus,
.main-body .pinon-search-results-content .resultsMore a:hover,
.main-body .pinon-search-results-content .resultsMore a:focus,
.main-body .pinon-cart-empty-btn:hover,
.main-body .pinon-cart-empty-btn:focus,
.main-body a.pinon-cart-empty-btn:hover,
.main-body a.pinon-cart-empty-btn:focus,
.main-body .btn-primary:hover,
.main-body .btn-primary:focus,
.main-body a.btn-primary:hover,
.main-body a.btn-primary:focus,
.main-body .btn-submit:hover,
.main-body .btn-submit:focus,
.main-body input[type="submit"].btn:hover,
.main-body input[type="submit"].btn:focus,
.main-body .btn-buy-now:hover,
.main-body a.btn-buy-now:hover,
.main-body .btn-add-cart:hover,
.main-body a.btn-add-cart:hover,
.pinon-prod-btn:hover,
.pinon-promo-btn:hover,
.pinon-custom-banner-btn:hover,
.pinon-mat-banner-btn:hover,
.pinon-sticky-buy-btn:hover {
  background-color: var(--color-background) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Secondary / Outline Buttons: White bg, Black text, Black border */
.main-body .btn-secondary,
.main-body a.btn-secondary,
.main-body .btn-outline,
.main-body a.btn-outline,
.main-body .pinon-cart-btn.secondary,
.main-body a.pinon-cart-btn.secondary,
.main-body .btn-more,
.main-body a.btn-more,
.main-body .pinon-search-tag,
.main-body a.pinon-search-tag,
.main-body .tab-buttons li,
.main-body .pagination li a,
.main-body .btn-default,
.main-body a.btn-default,
.main-body .pinon-opt-zalo-btn,
.main-body a.pinon-opt-zalo-btn,
.main-body .pinon-sticky-consult-btn,
.main-body a.pinon-sticky-consult-btn,
.btn-secondary,
.btn-outline,
.pinon-cart-btn.secondary,
.pinon-opt-zalo-btn,
.pinon-sticky-consult-btn,
.pinon-search-tag {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Secondary Button Hover: Black bg, White text, Black border */
.main-body .btn-secondary:hover,
.main-body .btn-secondary:focus,
.main-body a.btn-secondary:hover,
.main-body a.btn-secondary:focus,
.main-body .btn-outline:hover,
.main-body .btn-outline:focus,
.main-body a.btn-outline:hover,
.main-body a.btn-outline:focus,
.main-body .pinon-cart-btn.secondary:hover,
.main-body .pinon-cart-btn.secondary:focus,
.main-body a.pinon-cart-btn.secondary:hover,
.main-body a.pinon-cart-btn.secondary:focus,
.main-body .btn-more:hover,
.main-body .btn-more:focus,
.main-body a.btn-more:hover,
.main-body a.btn-more:focus,
.main-body .pinon-search-tag:hover,
.main-body .pinon-search-tag:focus,
.main-body a.pinon-search-tag:hover,
.main-body a.pinon-search-tag:focus,
.main-body .tab-buttons li.active,
.main-body .tab-buttons li:hover,
.main-body .pagination li.active a,
.main-body .pagination li a:hover,
.main-body .btn-default:hover,
.main-body .btn-default:focus,
.main-body a.btn-default:hover,
.main-body a.btn-default:focus,
.main-body .pinon-opt-zalo-btn:hover,
.main-body .pinon-opt-zalo-btn:focus,
.main-body a.pinon-opt-zalo-btn:hover,
.main-body a.pinon-opt-zalo-btn:focus,
.main-body .pinon-sticky-consult-btn:hover,
.main-body .pinon-sticky-consult-btn:focus,
.main-body a.pinon-sticky-consult-btn:hover,
.main-body a.pinon-sticky-consult-btn:focus,
.pinon-cart-btn.secondary:hover,
.pinon-opt-zalo-btn:hover,
.pinon-sticky-consult-btn:hover,
.pinon-search-tag:hover {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
  border-color: var(--color-button-background) !important;
}

/* Disabled State: Strict opacity fallback without adding hard gray */
.main-body button:disabled,
.main-body button.disabled,
.main-body .button.disabled,
.main-body .checkout-btn.disable,
.btn:disabled,
.btn.disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Focus-visible Accessibility: 2px solid outline */
.main-body button:focus-visible,
.main-body a:focus-visible,
.main-body input:focus-visible,
.main-body select:focus-visible,
.main-body textarea:focus-visible,
.form-control:focus-visible {
  outline: 2px solid var(--color-border) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   5. FORMS, INPUTS & TABLES
   ========================================================================== */
.main-body input[type="text"],
.main-body input[type="password"],
.main-body input[type="email"],
.main-body input[type="tel"],
.main-body input[type="number"],
.main-body input[type="search"],
.main-body select,
.main-body textarea,
.main-body .form-control,
.contact-form .input-group input,
.contact-form .input-group textarea,
.popup-form-customer .input-group input,
.popup-form-customer .input-group textarea {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.main-body input:focus,
.main-body select:focus,
.main-body textarea:focus,
.main-body .form-control:focus {
  border-color: var(--color-border) !important;
  box-shadow: 0 0 0 1px var(--color-border) !important;
}

/* Header & Drawer Search Inputs: Clean soft border, no harsh black borders or double outlines */
.main-body .pinon-search-input-wrapper,
.pinon-search-input-wrapper {
  background-color: #F8F8F8 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

.main-body .pinon-search-input-wrapper:hover,
.main-body .pinon-search-input-wrapper:focus-within,
.pinon-search-input-wrapper:hover,
.pinon-search-input-wrapper:focus-within {
  background-color: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.main-body input[type="text"].pinon-search-input,
.main-body .pinon-search-input,
.pinon-search-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.main-body input[type="text"].pinon-search-input:hover,
.main-body input[type="text"].pinon-search-input:focus,
.main-body .pinon-search-input:hover,
.main-body .pinon-search-input:focus,
.pinon-search-input:hover,
.pinon-search-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.main-body input[type="text"].pinon-search-bar-input,
.main-body .pinon-search-bar-input,
.pinon-search-bar-input {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: #F8F8F8 !important;
  border-radius: 24px !important;
  outline: none !important;
  box-shadow: none !important;
}

.main-body input[type="text"].pinon-search-bar-input:hover,
.main-body input[type="text"].pinon-search-bar-input:focus,
.main-body .pinon-search-bar-input:hover,
.main-body .pinon-search-bar-input:focus,
.pinon-search-bar-input:hover,
.pinon-search-bar-input:focus {
  border-color: rgba(0, 0, 0, 0.25) !important;
  background-color: #FFFFFF !important;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Tables */
.main-body table tr td,
.main-body table tr th,
.table,
.table-bordered,
.table-bordered td,
.table-bordered th,
#cartformpage .table-cart,
#customer_orders table,
#order_details,
#order_details tr,
.customer-table-wrap,
.address_table {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ==========================================================================
   6. PRODUCT LISTINGS & CARDS
   ========================================================================== */
.pro-loop,
.pinon-product-card,
.pinon-room-card,
.pinon-cat-card,
.pinon-promo-card,
.pinon-guide-card,
.pinon-material-card,
.pinon-services-bar {
  background-color: var(--color-background) !important;
  border-color: var(--color-border) !important;
}

.pro-loop .product-img .product-sale,
.pinon-prod-badge {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
}

.pinon-prod-wishlist {
  background-color: var(--color-background) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.pinon-prod-wishlist:hover {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
}

/* Filter checks & Swatches UI frames */
.main-body .filter-size li label,
.main-body .bl-filter label:before,
.main-body .product-gallery__thumb,
.main-body .product-gallery__thumb a,
.pinon-swatch-card {
  border-color: var(--color-border) !important;
}

.pinon-swatch-card.active,
.pinon-swatch-card:hover {
  outline: 2px solid var(--color-border) !important;
  outline-offset: 1px !important;
}

/* ==========================================================================
   7. MODALS, DRAWERS & SIDEBARS
   ========================================================================== */
.modal-content,
.drawer-content,
.popup-form-customer .modal-content,
.pinon-search-drawer,
.pinon-cart-drawer,
.popup-contact,
.shop-social-sidebar,
.news-latest,
.menu-blog,
.group-menu--aside,
.customer-table-bg {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.pinon-search-header,
.pinon-cart-header,
.pinon-cart-footer,
.pinon-cart-item,
.pinon-search-results-content .item-ult {
  border-color: var(--color-border) !important;
}

.shop-social-sidebar a,
.shop-social-sidebar button,
.back-to-top a,
.btt-back {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
  border: 1px solid var(--color-border) !important;
  transition: all .25s ease;
}

.shop-social-sidebar a:hover,
.shop-social-sidebar button:hover,
.shop-social-sidebar a:focus,
.shop-social-sidebar button:focus,
.back-to-top a:hover .btt-back {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.pinon-footer,
.pinon-footer a,
.pinon-footer input,
.pinon-footer textarea {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.pinon-footer .pinon-footer-social-link,
.pinon-footer .pinon-footer-social-link:hover,
.pinon-footer .pinon-footer-social-link:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   9. SVGS & ICONS
   ========================================================================== */
.pinon-topbar-close svg,
.pinon-action-icon svg,
.pinon-search-close svg,
.pinon-search-submit svg,
.pinon-cart-close svg,
.pinon-cart-item-remove svg,
.pinon-policy-icon svg,
.pinon-service-icon svg {
  color: var(--color-text) !important;
}