/**
 * File Name: frontend-global-design.css
 * File Location: /assets/css/frontend/design/frontend-global-design.css
 *
 * Purpose:
 * Frontend global design CSS for DAF Marketplace. Consumes CSS variables
 * generated from Settings > Design & Layout and applies plugin design settings
 * safely without disturbing Wishlist, Compare, Cart, or existing page-specific
 * layouts.
 *
 * Settings Source:
 * - /includes/admin/settings/design/class-settings-design.php
 *
 * Important:
 * Width rules are intentionally scoped to specific layout wrappers only. Do not
 * apply broad width overrides to .daf-marketplace-master or .daf-marketplace-layout
 * because Wishlist/Compare pages use those wrappers and have their own page CSS.
 */

/* ==========================================================================
   DAF Global Background
   ========================================================================== */

body.daf-marketplace-active,
body.daf-single-product-active,
body.daf-wishlist-page-active,
body.daf-compare-page-active {
    background-color: var(--daf-color-bg-global, #f8fafc) !important;
}

/* ==========================================================================
   Safe Marketplace Widths
   ========================================================================== */

/*
 * Global width utility only.
 * Do not target .daf-marketplace-master or .daf-marketplace-layout globally.
 */
.daf-layout-global {
    max-width: var(--daf-width-global, 1400px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/*
 * Shop/archive width only.
 * Wishlist and Compare pages are intentionally excluded so their balance stays
 * controlled by frontend-wishlist-page.css and frontend-compare-page.css.
 */
body:not(.daf-wishlist-page-active):not(.daf-compare-page-active) .daf-shop-container,
body:not(.daf-wishlist-page-active):not(.daf-compare-page-active) .daf-shop-layout,
body:not(.daf-wishlist-page-active):not(.daf-compare-page-active) .daf-layout-shop {
    max-width: var(--daf-width-shop, 1500px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Wishlist / Compare Page Protection
   ========================================================================== */

/*
 * These pages already have dedicated CSS. Keep their existing balance intact.
 * Only allow page CSS to control width/grid/spacing.
 */
body.daf-wishlist-page-active .daf-marketplace-master,
body.daf-wishlist-page-active .daf-marketplace-layout,
body.daf-wishlist-page-active .daf-marketplace-content,
body.daf-wishlist-page-active .daf-shop-container,
body.daf-wishlist-page-active .daf-elite-grid,
body.daf-compare-page-active .daf-marketplace-master,
body.daf-compare-page-active .daf-marketplace-layout,
body.daf-compare-page-active .daf-marketplace-content,
body.daf-compare-page-active .daf-shop-container,
body.daf-compare-page-active .daf-compare-page-grid,
body.daf-compare-page-active .daf-elite-grid {
    box-sizing: border-box !important;
}

/* ==========================================================================
   Single Product Theme Breakout
   ========================================================================== */

.daf-single-product-active .site-content,
.daf-single-product-active .ast-container,
.daf-single-product-active .container,
.daf-single-product-active #content,
.daf-single-product-active .site-main,
.daf-single-product-active .entry-content {
    max-width: var(--daf-width-single, 1300px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.daf-layout-breakout .site {
    max-width: 100% !important;
}

/* ==========================================================================
   Header Width + Header Color Variables
   ========================================================================== */

.daf-header-container,
.daf-header-inner,
.daf-header-row-inner {
    max-width: var(--daf-width-header, 1400px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.daf-header-main,
.daf-header-main-row {
    background-color: var(--daf-color-bg-header-main, #ffffff) !important;
    color: var(--daf-color-header-text, #0f172a) !important;
}

.daf-header-topbar,
.daf-header-secondary,
.daf-header-category-row {
    background-color: var(--daf-color-bg-header-alt, #f1f5f9) !important;
    color: var(--daf-color-header-text, #0f172a) !important;
}

.daf-header-main a,
.daf-header-main-row a,
.daf-header-topbar a,
.daf-header-secondary a,
.daf-header-category-row a,
.daf-menu-hook-wrapper {
    color: var(--daf-color-header-text, #0f172a) !important;
}

/* ==========================================================================
   Primary Buttons & Accents
   ========================================================================== */

.daf-btn-primary,
.daf-btn-gallery-elite,
.daf-badge-primary,
.daf-btn-checkout,
.daf-wishlist-add-cart-btn,
.daf-compare-widget-add-cart,
.daf-compare-page-add-cart,
.daf-cart-checkout-btn {
    background-color: var(--daf-color-primary, #8cc63f) !important;
    color: var(--daf-color-btn-text, #ffffff) !important;
}

.daf-btn-primary:hover,
.daf-btn-gallery-elite:hover,
.daf-btn-checkout:hover,
.daf-wishlist-add-cart-btn:hover,
.daf-compare-widget-add-cart:hover,
.daf-compare-page-add-cart:hover,
.daf-cart-checkout-btn:hover {
    filter: brightness(0.94);
    color: var(--daf-color-btn-text, #ffffff) !important;
}

/* ==========================================================================
   Links
   ========================================================================== */

.daf-marketplace-active a,
.daf-single-product-active a {
    color: var(--daf-color-link, #2563eb);
}

.daf-marketplace-active a:hover,
.daf-single-product-active a:hover {
    color: var(--daf-color-link-hover, #1d4ed8);
}

/* ==========================================================================
   Product Gallery + Containers
   ========================================================================== */

.daf-product-gallery-ultimate {
    width: 100% !important;
}

.daf-product-gallery-ultimate,
.daf-marketplace-content,
.daf-shop-top-bar,
.daf-elite-grid {
    box-sizing: border-box !important;
}

/* ==========================================================================
   Badge Primary Color
   ========================================================================== */

.daf-badge,
.daf-cart-badge,
.daf-wl-count-badge,
.daf-compare-count-badge {
    background-color: var(--daf-color-primary, #8cc63f) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .daf-single-product-active .site-content,
    .daf-single-product-active .ast-container,
    .daf-single-product-active .container,
    .daf-single-product-active #content,
    .daf-single-product-active .site-main,
    .daf-single-product-active .entry-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}