:root {
    --accent-color: #9F0136 !important;         /* un accent cald, spre roșu-piersică */
    --dark-color: #222222 !important;
    --light-dark-color: #727272 !important;
    --light-color: #fff !important;
    --grey-color: #dbdbdb !important;
    --light-grey-color: #fafafa !important;
    --primary-color: #9F0136 !important;         /* ROȘU principal Bootstrap-like */
    --light-primary-color: #f8d7da !important;     /* Roșu foarte deschis pentru fundaluri/hover */
    --bs-primary-rgb: 159, 1, 54 !important;
    --light-color-rgb: 255, 255, 255 !important;
    --bs-text-opacity: 1 !important;
    --success-color: #28a745 !important;
    --success-color-rgb: 40, 167, 69 !important;
}

.form-check-input{
    border: 1px solid #9F0136; !important;
}

#banner{
    background-color: #9F0136;
    color: var(--light-color);
}

#banner h2{
    color: var(--light-color);
}

.breadcrumb-item.active {
    color: var(--light-color);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light-color);
}

iconify-icon.send-icon {
    color: var(--light-color);
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.bg-primary {
    background-color: rgb(159, 1, 54) !important;
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--light-color-rgb), var(--bs-text-opacity)) !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--light-color);
    background: var(--light-color);
}

.swiper-pagination-bullet {
    border: 1px solid var(--light-color);
}

iconify-icon.category-icon {
    color: var(--primary-color);
}

.text-custom{
    --bs-text-opacity: 1;
    color: var(--primary-color);
}

li.social:hover iconify-icon.social-icon {
    color: #FFF;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.breadcrumb .nav-link:hover {
    color: var(--light-color);
    text-decoration: underline;
}

.widget-product-brands .nav-link.active{
    color: var(--primary-color);
}

.text-danger {
    color: var(--primary-color) !important;
}

.form-control{
    text-transform: initial !important;
}

.text-success{
    color: rgba(var(--success-color-rgb), var(--bs-text-opacity)) !important;
}

.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-hover-bg: var(--accent-color);
    --bs-btn-active-bg: var(--accent-color);
    --bs-btn-disabled-bg: var(--accent-color);
}

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

.alert-notification{
    z-index: 1055;
    min-width: 300px;
}

a:hover{
    cursor: pointer;
}

.icon-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    font-size: 1em; /* ajustează după dimensiunea textului */
}

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* maxim 2 linii */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.2em; /* asigură alinierea cardurilor */
}

a.categories-item:hover iconify-icon.category-icon {
    color: var(--bs-body-color);
}

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

.address-card, .company-card {
    border: 2px solid #dc3545;  /* bordură roșie */
    border-radius: 10px;        /* colțuri rotunjite */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow subtil */
    padding: 15px;
    background-color: #fff;      /* fundal alb */
    transition: transform 0.2s, box-shadow 0.2s;
}

.address-card:hover, .company-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#ajaxAlertContainer .alert {
    min-width: 300px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

.btn-sm{
    padding: 0.4rem 2rem;
}

.dropdown-item:active {
    color: var(--light-color);
    text-decoration: none;
    background-color: var(--primary-color);
}

.btn-outline-danger{
    --bs-btn-color: #9F0136;
    --bs-btn-border-color: #9F0136;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9F0136;
    --bs-btn-hover-border-color: #9F0136;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9F0136;
    --bs-btn-active-border-color: #9F0136;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #9F0136;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #9F0136;
    --bs-gradient: none;
}

.btn-danger{
    --bs-btn-color: #fff;
    --bs-btn-bg: #9F0136;
    --bs-btn-border-color: #9F0136;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9F0136;
    --bs-btn-disabled-border-color: #9F0136;
}

a.cart-add:hover h5, a#cart-add-page-product:hover h5{
    color: #9F0136;
    border-color: #9F0136;
}

a.wishlist-add:hover iconify-icon {
    color: #9F0136;
}

/* --- Start Meniu hamburger ---*/
    /* --- STILURI ESENȚIALE PENTRU SUBMENIURI (Nivel 2 și 3) --- */
    /* Poziționarea relativă pe elementul părinte */
    .dropdown-submenu {
        position: relative;
    }

    /* Poziționarea submeniul la dreapta elementului părinte și ascunderea inițială */
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none; /* Ascunde submeniul inițial */
    }

    /* Afișează submeniul când i se adaugă clasa 'show' de către jQuery/JS */
    .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }

    /* --- CORECȚII PENTRU ÎNĂLȚIME ȘI SCROLL --- */

    /* Forțează meniul principal și submeniurile să aibă înălțime automată (fără scroll) */
    /* Selectorii ultra-specifici folosiți pentru a suprascrie stilurile Bootstrap/Temă */
    .offcanvas-body .custom-vertical-menu,
    .offcanvas-body .custom-vertical-menu-sub {
        /* Elimină orice scrolling forțat */
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;

        /* Asigură înălțimea completă a conținutului */
        height: auto !important;
        max-height: none !important;
    }

    /* Stilul butonului principal al meniului */
    .btn-custom-menu {
        background-color: #9F0136;
        color: #FFFFFF; /* Text alb */
        border: none;
        /* Asigură că textul rămâne alb chiar și la hover/focus,
           deoarece Bootstrap poate schimba culoarea link-urilor */
    }

    /* Stil la hover/focus pentru un efect subtil */
    .btn-custom-menu:hover,
    .btn-custom-menu:focus {
        background-color: #8C002F; /* O nuanță puțin mai închisă */
        color: #FFFFFF;
    }

    /* ---------------------------------------------------------------------- */
    /* HOVER PE MENIURILE VERTICALE (CATEGORII ȘI SUBCATEGORII) */
    /* ---------------------------------------------------------------------- */

    /* Aplică stilul la HOVER pe link-urile din meniul vertical principal */
    .custom-vertical-menu .dropdown-item:hover,
        /* Aplică stilul pe link-urile din submeniurile deschise (nivel 2 și 3) */
    .custom-vertical-menu-sub .dropdown-item:hover {
        background-color: #9F0136 !important;
        color: #FFFFFF !important;
    }

    /* De asemenea, aplicați stilul și pe starea "focus" pentru accesibilitate (tab) */
    .custom-vertical-menu .dropdown-item:focus,
    .custom-vertical-menu-sub .dropdown-item:focus {
        background-color: #9F0136 !important;
        color: #FFFFFF !important;
    }

    /* Asigură că săgeata de dropdown (dropdown-toggle) este tot albă la hover */
    .custom-vertical-menu .dropdown-item:hover.dropdown-toggle::after,
    .custom-vertical-menu-sub .dropdown-item:hover.dropdown-toggle::after {
        filter: brightness(0) invert(1); /* Transformă săgeata în alb */
    }

    /* Stilul butonului principal al meniului (stare normală) */
    .btn-custom-menu {
        background-color: #9F0136;
        color: #FFFFFF;
        border: none;
    }

    /* Stil la HOVER și FOCUS (când folosiți tasta Tab) */
    .btn-custom-menu:hover,
    .btn-custom-menu:focus {
        background-color: #8C002F; /* O nuanță puțin mai închisă la hover */
        color: #FFFFFF;
        box-shadow: none; /* Elimină box-shadow-ul de focus al Bootstrap */
    }

    /* NOU: Stil la STAREA ACTIVĂ (ținut apăsat sau după click) */
    .btn-custom-menu:active,
    .btn-custom-menu.show { /* Clasa 'show' este adăugată de Bootstrap când dropdown-ul e deschis */
        background-color: #9F0136 !important; /* Forțează culoarea originală */
        color: #FFFFFF !important;
        box-shadow: none !important;
    }
/* --- End Meniu hamburger ---*/


/* ---------------------------------------------------------------------- */
/* 1. CORECȚII DIMENSIUNE ȘI CULOARE (QUOTE ICON & TEXT) */
/* ---------------------------------------------------------------------- */

/* Reducerea dimensiunii iconiței de ghilimele */
#testimonial .quote-icon {
    font-size: 3rem !important; /* Ajustați de la fs-4 (4rem) la 3rem */
    color: #9F0136 !important; /* Culoarea iconiței, conform dorinței de accent */
}

/* Reducerea dimensiunii textului testimonial */
#testimonial .testimonial-content.fs-2 {
    font-size: 1.5rem !important; /* Redus de la fs-2 (3rem) la 1.5rem (sau 2rem, ajustați după nevoie) */
    line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* 2. CORECȚII BACKGROUND ȘI CULOARE TEXT (SLIDE-URI) */
/* ---------------------------------------------------------------------- */

/* Aplică fundalul pe elementul care conține recenzia (dacă doriți un fundal colorat) */
/* Țintim .swiper-slide pentru a ne asigura că fiecare recenzie are un fundal colorat */
#testimonial .swiper-slide > .row {
    background-color: #9F0136; /* Fundalul tău dorit */
    color: #FFFFFF; /* Text alb pentru lizibilitate */
    padding: 30px; /* Adaugă padding în jurul conținutului */
    border-radius: 8px;
}

/* Forțează culoarea albă pe conținutul care folosește clase specifice de culoare */
#testimonial .testimonial-content {
    color: #FFFFFF !important;
}

/* Schimbă culoarea numelui (care folosește clasa text-black) la alb */
#testimonial .text-black {
    color: #FFFFFF !important;
    font-weight: bold;
}

/* ---------------------------------------------------------------------- */
/* 3. PAGINAREA SWIPER (PUNCTELE DE NAVIGARE) - Culoarea ta principală */
/* ---------------------------------------------------------------------- */

/* Stilul pentru punctele inactive */
#testimonial .swiper-pagination-bullet {
    background: #9F0136; /* Fundalul punctului */
    opacity: 0.5;
}

/* Stilul pentru punctul ACTIV */
#testimonial .swiper-pagination-bullet-active {
    background: #9F0136;
    opacity: 1;
    transform: scale(1.2);
}

/* ---------------------------------------------------------------------- */
/* 1. CORECȚII DIMENSIUNE ȘI CULOARE (QUOTE ICON & TEXT) */
/* ---------------------------------------------------------------------- */

/* Reducerea dimensiunii iconiței de ghilimele ȘI forțarea culorii ALBE */
#testimonial .quote-icon {
    font-size: 3rem !important;
    color: #FFFFFF !important; /* CULOAREA ICONIȚEI ESTE ACUM ALBĂ */
}

/* Reducerea dimensiunii textului testimonial */
#testimonial .testimonial-content.fs-2 {
    font-size: 1.5rem !important;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* 2. CORECȚII BACKGROUND ȘI CULOARE TEXT (SLIDE-URI) */
/* Acestea asigură că textul și numele sunt albe pe fundalul #9F0136 */
/* ---------------------------------------------------------------------- */

#testimonial .swiper-slide > .row {
    background-color: #9F0136;
    color: #FFFFFF;
    padding: 30px;
    border-radius: 8px;
}

#testimonial .testimonial-content,
#testimonial .text-black {
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------- */
/* 3. PAGINAREA SWIPER (PUNCTELE DE NAVIGARE) */
/* ---------------------------------------------------------------------- */

#testimonial .swiper-pagination-bullet {
    background: #9F0136;
    opacity: 0.5;
}

#testimonial .swiper-pagination-bullet-active {
    background: #9F0136;
    opacity: 1;
    transform: scale(1.2);
}


/* Definirea culorii de accent pentru utilizare mai ușoară */
:root {
    --accent-color: #9F0136;
    --text-color-normal: #FFFFFF;
}

/* ---------------------------------------------------------------------- */
/* STILURI PENTRU CARDURILE DE SERVICII (#service) */
/* ---------------------------------------------------------------------- */

#service .card {
    /* Asigură o tranziție lină între stări */
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--accent-color); /* Adaugă o bordură cu culoarea accentului */
    min-height: 180px; /* Asigură o înălțime minimă uniformă (opțional) */
    padding: 15px;
    text-align: center;
}

/* STAREA NORMALĂ: Fundal Culoarea Ta, Text Alb */
#service .card.service-card-color {
    background-color: var(--accent-color);
    color: var(--text-color-normal);
}

/* Țintește toate elementele de text din interior (Titlu și Paragraf) */
#service .card.service-card-color * {
    color: var(--text-color-normal) !important;
}


/* STAREA HOVER: Fundal Alb, Text Culoarea Ta */
#service .card.service-card-color:hover {
    background-color: var(--text-color-normal);
    color: var(--accent-color); /* Culoarea textului de bază devine accentul */
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Efect de umbră la hover (opțional) */
}

/* Țintește toate elementele de text din interior la hover pentru a le face de culoarea accentului */
#service .card.service-card-color:hover * {
    color: var(--accent-color) !important;
}

/* 1. Face cardul să se întindă pe toată înălțimea coloanei */
#service .col-md-3 .card {
    height: 100%;
    /* Menține stilurile anterioare (border, padding etc.) */
    border: 2px solid var(--accent-color);
    padding: 15px;
    text-align: center;
}

/* 2. Aplică Flexbox pe rândul container (Bootstrap 5 face acest lucru implicit, dar e bine de asigurat) */
#service .row {
    display: flex;
    align-items: stretch; /* Asigură că articolele se întind pe înălțimea maximă */
}

/* Stil pentru dropdown cu icon */
.dropdown-item.dropdown-toggle.has-icon {
    position: relative;
    padding-right: 2rem; /* spațiu pentru icon în dreapta */
}

/* Icon-ul efectiv */
.dropdown-item.dropdown-toggle.has-icon iconify-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* mărimea icon-ului */
    color: #555; /* culoare subtilă */
    transition: color 0.3s;
}

.dropdown-item.dropdown-toggle.has-icon:hover iconify-icon {
    color: #000; /* hover mai vizibil */
}

/* Eliminăm săgeata default Bootstrap */
.dropdown-item.dropdown-toggle::after {
    display: none;
}

/* Stil pentru dropdown cu icon */
.dropdown-item.dropdown-toggle.has-icon {
    position: relative;
    padding-right: 2rem; /* spațiu pentru icon în dreapta */
}

/* Iconul Iconify */
.dropdown-item.dropdown-toggle.has-icon iconify-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* mărimea icon-ului */
    color: #555;     /* culoare normală */
    transition: color 0.3s;
}

/* La hover să devină alb */
.dropdown-item.dropdown-toggle.has-icon:hover iconify-icon {
    color: #fff;
}

.phone-float {
    position: fixed;
    bottom: 20px; /* pune mai sus decât cookie banner */
    right: 20px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 1050; /* deasupra banner */
    text-decoration: none;
    transition: transform 0.2s;
}

.phone-float:hover {
    transform: scale(1.1);
    background-color: #218838;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: none; /* ascuns implicit */
}

.new-tag-custom {
    background-color: rgb(159, 1, 54) !important;
    color: white !important;
    /* Opțional: Adăugăm o umbră subtilă pentru un plus de vizibilitate */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Media Query pentru dispozitivele mobile (extra small, până la 576px) */
@media (max-width: 576px) {
    .quantity-btn-mobile-100 {
        /* Aplică lățimea de 100% și forțează afișarea ca bloc pentru a ocupa rândul */
        width: 100% !important;
        display: block !important;
        /* Opțional: Adăugăm o mică margine pentru a separa butoanele pe mobil */
        margin-bottom: 5px;
    }

    /* Dacă vrei ca inputul să ocupe și el lățimea completă pe mobil (recomandat) */
    .product-qty .form-control {
        margin: 5px 0 !important; /* Sus/Jos 5px, Stânga/Dreapta 0 */
    }
}

.payment-list {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.payment-list div {
    text-align: left;
    padding: 0px 0;
    width:100%;
}

.widget-title{
    color: #9F0136;
    font-weight: bold;
}

.remove-badge {
    font-size: 1.2rem;
    line-height: 1;
}

.badge-flex {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.mobile-sidebar-toggle .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.mobile-sidebar-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg); /* săgeata în sus când e deschis */
}

.btn-reset-filter{
    background-color: #f90 !important;
    color: #FFFFFF;
    border: none;
}

.form-control {
    padding: .375rem .75rem !important;
}

button.filter-button {
    color: var(--bs-body-color) !important;
}

.slide-item {
    position: relative;
}

.banner-img {
    width: 100%;
    height: auto;
}

.banner-box {
    position: absolute;
    bottom: 20px;
    padding: 15px 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.7rem;
}

.banner-box h3 {
    font-size: 1.5rem;
    margin: 0 0 5px;
    font-weight: bold;
    color: #ffffff;
}

.banner-box p {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 800px) {
    .banner-box{
        top: 25%;
        left: 40%;
    }

    .swiper-slide h3{
        font-size: 0.9rem;
    }

    .swiper-slide p{
        font-size: 0.6rem;
        line-height: 110%;
    }

    #banner .swiper-pagination {
        display: none;
    }
}