/* ==========================================================================
   NDN Store - Master Stylesheet
   ========================================================================== */

:root {
  /* Copy your custom variables */
  --ndn-primary: #1A1A1A;
  --ndn-secondary: #DDA7A5;
  --ndn-background: #FDFDFD;

  /* Overwrite Bootstrap theme colors */
  --bs-primary: var(--ndn-primary);
  --bs-secondary: var(--ndn-secondary);
  --bs-body-bg: var(--ndn-background);
  --bs-nav-pills-link-active-bg: #FDFDFD;
  /* Overwrite Bootstrap RGB channels for utility classes */
  --bs-primary-rgb: 26, 26, 26;
  --bs-secondary-rgb: 221, 167, 165;
  --bs-body-bg-rgb: 253, 253, 253;

  /* Force global body text to contrast with your dark primary */
  --bs-body-color: var(--ndn-primary);
   --bg-light-rgb: var(--bs-body-bg-rgb);
   --ndn-gold-pink-gradient: linear-gradient(90deg, #F3A19E 0%, #E6C594 100%);
}

/* --- Global Styles --- */
body {
    background-color: var(--ndn-background);
    color: var(--ndn-primary);
    font-family: 'Assistant', sans-serif;
}

.bg-light {
  --bg-light-rgb: var(--bs-body-bg-rgb) !important;
}
#id_password, #id_shipping_phone, #id_phone_number {
  direction: ltr !important;
}
/* --- Bootstrap Class Overrides --- */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--ndn-primary);
  --bs-btn-border-color: var(--ndn-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #333333;
  --bs-btn-hover-border-color: #333333;
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #000000;
  --bs-btn-active-border-color: #000000;
  --bs-btn-disabled-bg: var(--ndn-primary);
  --bs-btn-disabled-border-color: var(--ndn-primary);
}
.card a,
.text-center.small a {
    color: #000000 !important; /* צבע שחור עם ניגודיות 21:1 מול רקע לבן */
    text-decoration: none !important; /* הדגשת הקישור לנגישות */
    font-weight: bold !important;
}

#address_add {
  color:white !important;
}

.btn-primary {
  color: white !important;
}
#nav-pill > .nav-link.active {
  background-color: var(--bs-secondary);
}
/* חוק נגישות גלובלי או ייעודי לרכיבי דרופדאון */
#langDropdown:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid #000000 !important; /* מסגרת שחורה בולטת בעובי 3 פיקסלים */
    outline-offset: 2px !important;       /* מרווח קטן בין הלחצן למסגרת */
    box-shadow: none !important;
}
/* אפקט Hover מונגש */
.card a:hover,
.text-center.small a:hover {
    color: #333333 !important;
}
.btn-secondary {
  --bs-btn-color: var(--ndn-primary);
  --bs-btn-bg: var(--ndn-secondary);
  --bs-btn-border-color: var(--ndn-secondary);
  --bs-btn-hover-color: var(--ndn-primary);
  --bs-btn-hover-bg: #cca09e;
  --bs-btn-hover-border-color: #cca09e;
  --bs-btn-focus-shadow-rgb: 221, 167, 165;
  --bs-btn-active-color: var(--ndn-primary);
  --bs-btn-active-bg: #bd9290;
  --bs-btn-active-border-color: #bd9290;
}

/* Outline Buttons */
.btn-outline-primary {
  --bs-btn-color: var(--ndn-primary);
  --bs-btn-border-color: var(--ndn-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--ndn-primary);
  --bs-btn-hover-border-color: var(--ndn-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--ndn-primary);
  --bs-btn-active-border-color: var(--ndn-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ndn-secondary);
  --bs-btn-border-color: var(--ndn-secondary);
  --bs-btn-hover-color: var(--ndn-primary);
  --bs-btn-hover-bg: var(--ndn-secondary);
  --bs-btn-hover-border-color: var(--ndn-secondary);
  --bs-btn-active-color: var(--ndn-primary);
  --bs-btn-active-bg: var(--ndn-secondary);
  --bs-btn-active-border-color: var(--ndn-secondary);
}

/* 2. FORM CONTROLS (Inputs, Selects, Checks) */
.form-control:focus, .form-select:focus {
  border-color: var(--ndn-secondary);
  box-shadow: 0 0 0 0.25rem rgba(221, 167, 165, 0.25);
}

.form-check-input:checked {
  background-color: var(--ndn-primary);
  border-color: var(--ndn-primary);
}

.form-check-input:focus {
  border-color: var(--ndn-secondary);
  box-shadow: 0 0 0 0.25rem rgba(221, 167, 165, 0.25);
}

/* 3. NAVIGATION (Navbars, Tabs, Dropdowns) */
.navbar {
  --bs-navbar-color: var(--ndn-primary);
  --bs-navbar-hover-color: var(--ndn-secondary);
  --bs-navbar-active-color: var(--ndn-primary);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--ndn-primary);
  --bs-nav-tabs-link-active-bg: var(--ndn-background);
  --bs-nav-tabs-link-hover-border-color: var(--ndn-secondary) var(--ndn-secondary) transparent;
}

.nav-link:hover {
  color: var(--ndn-secondary) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--ndn-secondary);
  color: var(--ndn-primary);
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--ndn-primary);
  color: #ffffff;
}

/* 4. LIST GROUPS & PAGINATION */
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: rgba(221, 167, 165, 0.15);
  color: var(--ndn-primary);
}

.list-group-item.active {
  background-color: var(--ndn-primary);
  border-color: var(--ndn-primary);
}

.page-link:hover {
  background-color: var(--ndn-secondary);
  color: var(--ndn-primary);
  border-color: var(--ndn-secondary);
}

.page-item.active .page-link {
  background-color: var(--ndn-primary);
  border-color: var(--ndn-primary);
}

/* 5. ACCORDIONS & CARDS */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(221, 167, 165, 0.25);
  --bs-accordion-active-color: var(--ndn-primary);
  --bs-accordion-active-bg: rgba(221, 167, 165, 0.15);
}

.card {
  --bs-card-bg: var(--ndn-background);
  --bs-card-border-color: rgba(26, 26, 26, 0.15);
}

.card, .accordion-item, .modal-content, .form-control, .form-select {
  border: 1px solid;
  border-image: var(--ndn-gold-pink-gradient) 1;
}

/* 2. Specific Bootstrap Utility Classes */
.border, .border-top, .border-bottom, .border-start, .border-end {
  border-image: var(--ndn-gold-pink-gradient) 1 !important;
}

/* 3. Input Focus State */
.form-control:focus, .form-select:focus {
  border-image: var(--ndn-gold-pink-gradient) 1;
  box-shadow: 0 0 0 0.25rem rgba(243, 161, 158, 0.2);
  outline: none;
}

/* --- Navbar & Branding --- */
.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* ==========================================================================
   Mega Menu & Offcanvas Navigation
   ========================================================================== */

/* Desktop View (Mega Menu) */
@media (min-width: 992px) {
    
    #mobileMenu {
        display: none; /* Hide mobile menu button on desktop */
    }

    .mega-menu {
        position: absolute !important;
        top: 100%;
        left: 0;
        width: 100% !important;
        margin-top: 0 !important;
        background-color: #ffffff;
        border-top: 2px solid var(--ndn-primary);
        border-radius: 0 0 8px 8px;
        padding: 2rem 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1050;
        
        /* Animation Properties */
        display: block !important; 
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    .mega-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mega-menu .container {
        max-width: 1140px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 auto;
    }

    .mega-menu.h6 {
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .mega-menu ul {
        list-style: none;
        padding: 0;
    }

    .mega-menu ul li a {
        color: #555555;
        text-decoration: none;
        line-height: 2;
        transition: color 0.2s ease;
    }

    .mega-menu ul li a:hover {
        color: var(--ndn-secondary);
    }
}

/* Mobile View (Offcanvas) */
@media (max-width: 991px) {
    .mega-menu {
        display: none !important; /* Force hide mega menu on mobile */
    }
    
    .navbar-collapse {
        display: none !important; /* Prevent standard collapse from interfering */
    }
}