/*
Theme Name: Bourhil Digital Services
Theme URI: https://bourhil-digital-services.mobo2332.odns.fr
Author: Bourhil Digital Services
Author URI: https://bourhil-digital-services.mobo2332.odns.fr
Description: Theme personnalise pour Bourhil Digital Services - Marketplace de produits digitaux
Version: 4.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bourhil-digital-services
Tags: custom-colors, custom-logo, e-commerce
*/

/* ========================================
   FONT — Identical to digidar.tn approach
   body { font-family: Geologica, system-ui... }
   buttons/inputs inherit from body
======================================== */

/*
 * Override Tailwind Preflight which sets:
 *   html { font-family: ui-sans-serif, system-ui... }
 * We follow the exact same pattern as digidar.tn:
 *   body { font-family: Geologica, system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
 *   button, input, ... { font-family: inherit }
 */
html {
    font-family: Geologica, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

body {
    font-family: Geologica, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: normal;
    font-variation-settings: normal;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* All form elements & interactive elements inherit Geologica from body */
button,
input,
optgroup,
select,
textarea,
label {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Headings inherit from body (same as Digidar compiled Tailwind) */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* Anchor, span, p — all inherit */
a, span, p, li, td, th, div {
    font-family: inherit;
}

/* ========================================
   BASE STYLES
======================================== */

/* Force LTR */
html, body {
    direction: ltr !important;
    text-align: left !important;
}

html {
    scroll-behavior: smooth;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
}

/* WordPress admin bar offset */
body.admin-bar #bds-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #bds-header {
        top: 46px;
    }
    body.admin-bar #bds-header-spacer {
        padding-top: 46px;
    }
}
@media screen and (min-width: 783px) {
    body.admin-bar #bds-header-spacer {
        padding-top: 32px;
    }
}

img {
    max-width: 100%;
    height: auto;
}

details summary::-webkit-details-marker {
    display: none;
}
details summary {
    list-style: none;
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   UTILITIES
======================================== */

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Prose */
.prose h2, .prose h3 { font-weight: 700; color: #070717; }
.prose p { line-height: 1.75; }
.prose ul { list-style-type: disc; padding-left: 1.5em; }
.prose li { margin-bottom: 0.5em; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* Header */
#bds-header { transition: all 0.3s ease-in-out; }
#bds-header.scrolled {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* WordPress */
.wp-block-image img { height: auto; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Focus */
*:focus-visible {
    outline: 2px solid #003399;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection */
::selection {
    background-color: #003399;
    color: #ffffff;
}

/* ========================================
   PRICE RANGE SLIDER — Pure CSS (no Tailwind arbitrary variants)
   Thumb: 20px circle, #003399 fill, 2px white border, shadow
   Track: 8px tall, transparent (we use a custom div overlay)
   Vertical centering: margin-top = -(thumb - track) / 2 = -6px
======================================== */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

/* Track — transparent, height matches the container div */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border-radius: 9999px;
}
input[type="range"]::-moz-range-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 9999px;
}

/* Thumb — Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background-color: #003399;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -6px; /* (20 - 8) / -2 — centers thumb on 8px track */
    position: relative;
    z-index: 2;
}

/* Thumb — Firefox */
input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background-color: #003399;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* Focus ring */
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.3), 0 4px 6px -1px rgba(0,0,0,0.1);
}
input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.3), 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* ========================================
   "TOUT EFFACER" — hidden by default, visible only when filter is active
======================================== */

.bds-clear-search,
.bds-clear-cat,
.bds-drawer-clear-cat,
.bds-reset-price,
.bds-drawer-reset-price,
.bds-clear-stock,
.bds-drawer-clear-stock,
.bds-drawer-clear-all {
    color: #003399;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, color 0.15s ease;
}

/* Show when the corresponding filter is active */
.bds-filter-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hover → yellow on ALL "Tout Effacer" buttons when visible */
.bds-filter-active:hover {
    color: #FFCC00 !important;
}