/************************************************************
 * PICKEENOO x DJ-CLASSIFIEDS
 * Style global harmonisé avec le Boarding Pass
 ************************************************************/

/* ---------- VARIABLES DE BASE (fallback si non définies) ---------- */
:root {
    --color-rouge-piment: #dc3545;
    --color-rouge-piment-fonce: #c82333;
    --color-orange-epice: #ff8f00;
    --color-vert-coriandre: #28a745;
    --color-blanc-coco: #ffffff;
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-border: #e0e0e0;
    --font-primary: Arial, Helvetica, sans-serif;
    --font-headings: "Helvetica Neue", Arial, sans-serif;
    --border-radius: 6px;
    --transition-standard: 0.18s ease-in-out;
    --box-shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
    --box-shadow-strong: 0 6px 18px rgba(0,0,0,0.12);
}

/************************************************************
 * STRUCTURE GÉNÉRALE
 ************************************************************/

#dj-classifieds {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

#dj-classifieds a {
    color: var(--color-rouge-piment);
    text-decoration: none;
    transition: color var(--transition-standard);
}

#dj-classifieds a:hover {
    color: var(--color-rouge-piment-fonce);
    text-decoration: underline;
}

/* boîtes et modules */
.djcf_menu .module_content,
.dj_cf_search,
.djcf_module_box,
#dj-classifieds .djcf_box {
    background: var(--color-blanc-coco);
    border-radius: 12px;
    box-shadow: var(--box-shadow-soft);
    padding: 15px;
    margin-bottom: 20px;
}

/************************************************************
 * BOUTONS – STYLE BOARDING PASS (ROUGE UNI)
 ************************************************************/

/* Boutons principaux */
#dj-classifieds .button,
#dj-classifieds button.button,
#dj-classifieds a.button,
#dj-classifieds input[type="submit"].button,
.dj_cf_search button.button,
.dj_cf_search a.button,
.dj_cf_regions_selects button.button {
    background-color: var(--color-rouge-piment);
    border: 1px solid #b02132;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    color: var(--color-blanc-coco);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    padding: 8px 18px 8px 30px; /* place pour icône piment */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    position: relative;
    display: inline-block;
    white-space: normal;
    overflow: visible;
    cursor: pointer;
}

/* Icône piment intégrée aux boutons */
#dj-classifieds .button::before,
.dj_cf_search button.button::before,
.dj_cf_search a.button::before,
.dj_cf_regions_selects button.button::before {
    content: "🌶️";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Hover boutons */
#dj-classifieds .button:hover,
#dj-classifieds button.button:hover,
#dj-classifieds a.button:hover,
#dj-classifieds input[type="submit"].button:hover,
.dj_cf_search button.button:hover,
.dj_cf_search a.button:hover,
.dj_cf_regions_selects button.button:hover {
    background-color: var(--color-rouge-piment-fonce);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.4);
    color: var(--color-blanc-coco);
    text-decoration: none;
}

#dj-classifieds .button:hover::before,
.dj_cf_search button.button:hover::before,
.dj_cf_search a.button:hover::before,
.dj_cf_regions_selects button.button:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(1px);
}

/* Focus accessible */
#dj-classifieds .button:focus,
.dj_cf_search button.button:focus,
.dj_cf_search a.button:focus {
    outline: 2px solid var(--color-orange-epice);
    outline-offset: 2px;
}

/* État désactivé */
#dj-classifieds .button:disabled,
.dj_cf_search button.button:disabled,
.dj_cf_search a.button.disabled {
    background-color: #cccccc;
    border-color: #aaaaaa;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

#dj-classifieds .button:disabled::before,
.dj_cf_search button.button:disabled::before {
    opacity: 0;
}

/* Bouton "close" / annuler */
#dj-classifieds .button.close,
.dj_cf_search button.button.close,
.dj_cf_search a.button.close {
    float: none;
    opacity: 0.85;
    padding: 6px 14px 6px 14px;
    background-color: #6c757d;
    border-color: #5a6268;
    box-shadow: none;
    text-transform: none;
}

#dj-classifieds .button.close:hover {
    background-color: #5a6268;
}

/************************************************************
 * MODULE MENU "MY ACCOUNT" – STYLE BOARDING PASS
 ************************************************************/

.djcf_menu .module_content ul.menu {
    border: none;
    background: var(--color-blanc-coco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--box-shadow-strong);
}

.djcf_menu ul.menu,
.djcf_menu ul#mainlevel {
    list-style: none outside;
    margin: 0;
    padding: 0;
}

.djcf_menu ul.menu li,
.djcf_menu ul#mainlevel li {
    list-style: none outside;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Item normal */
.djcf_menu ul.menu li a,
.djcf_menu ul#mainlevel li a {
    background: #ffffff;
    border-right: 0;
    color: var(--color-rouge-piment);
    display: block;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 10px 16px 10px 42px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    position: relative;
}

/* Piment du menu */
.djcf_menu ul.menu li a::before,
.djcf_menu ul#mainlevel li a::before {
    content: "🌶️";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Hover / actif */
.djcf_menu ul.menu li a:hover,
.djcf_menu ul.menu li.active > a,
.djcf_menu ul#mainlevel li a:hover,
.djcf_menu ul#mainlevel li a#active_menu {
    background: var(--color-rouge-piment);
    color: var(--color-blanc-coco);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
    transform: translateY(-1px);
}

.djcf_menu ul.menu li a:hover::before,
.djcf_menu ul.menu li.active > a::before,
.djcf_menu ul#mainlevel li a:hover::before,
.djcf_menu ul#mainlevel li a#active_menu::before {
    opacity: 1;
    transform: translateY(-50%) translateX(1px);
}

/* Sous-niveaux */
.djcf_menu ul.menu li.active li a,
.djcf_menu ul.menu li.active li.active li a,
.djcf_menu ul.menu li.active li.active li.active li a,
.djcf_menu ul.menu li.active li.active li.active li.active li a {
    background: #f9f9f9;
    color: var(--color-text-secondary);
    padding-left: 50px;
    box-shadow: none;
}

.djcf_menu ul.menu li.active li ul li a {
    padding-left: 60px;
}

/* Bouton "Add new advert" en haut / bas */
.djcf_menu .newad_link_top,
.djcf_menu .newad_link_bottom {
    background-color: var(--color-vert-coriandre);
    color: var(--color-blanc-coco);
    text-align: center;
    padding: 12px 10px;
    font-family: var(--font-headings);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius);
    margin: 10px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}

.djcf_menu .newad_link_top:hover,
.djcf_menu .newad_link_bottom:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(76, 175, 80, 0.4);