/* ===========================================
   CATEGORIES DROPDOWN - MEGA MENU
   Layout 3 colonnes selon maquette Lovable
   Grid: 3/12 (25%) | 5/12 (42%) | 4/12 (33%)
   =========================================== */

/* ===========================================
   MOBILE: Reset mega menu styles
   =========================================== */

/* Image de catégorie circulaire */
.categories-mega-menu .bwa-menu__category-img {
  width         : 36px;
  height        : 36px;
  border-radius : 50%;
  object-fit    : cover;
  flex-shrink   : 0;
}

@media (max-width : 1199px) {
  .categories-dropdown {
    display : none;
  }

  /* Le conteneur mega menu doit être transparent sur mobile */
  .categories-mega-menu {
    display    : contents;
    position   : static;
    background : transparent;
    box-shadow : none;
  }

  /* Reset le pseudo-element Catégories sur mobile */
  .categories-mega-menu .bwa-menu__top::before {
    display : none !important;
  }

  /* Reset le chevron après le lien sur mobile */
  .categories-mega-menu .bwa-menu__main-item .bwa-menu__link-title::after {
    display : none !important;
  }
}

/* ===========================================
   DESKTOP ONLY STYLES (>= 1200px)
   =========================================== */

@media (min-width : 1200px) {

  .categories-dropdown {
    position : static;
    height   : stretch;
  }

  .categories-dropdown__trigger {
    position         : relative;
    display          : flex;
    align-items      : center;
    gap              : 8px;
    padding          : 12px 16px;
    font-size        : 1rem;
    font-weight      : 500;
    color            : var(--color-white-default);
    background-color : var(--color-primary);
    border           : none;
    cursor           : pointer;
    transition       : background-color 0.2s ease;
    line-height      : 1.5;
    height           : stretch;
  }

  .categories-dropdown__trigger:hover,
  .categories-dropdown.--is-open .categories-dropdown__trigger {
    background-color : var(--color-primary-40);
  }

  .categories-dropdown__trigger:focus {
    outline : none;
  }

  .categories-dropdown__icon {
    width       : 20px;
    height      : 20px;
    flex-shrink : 0;
  }

  .categories-dropdown__chevron {
    width       : 16px;
    height      : 16px;
    flex-shrink : 0;
    transition  : transform 0.2s ease;
  }

  .categories-dropdown.--is-open .categories-dropdown__chevron {
    transform : rotate(180deg);
  }

  /* ===========================================
     MEGA MENU CONTAINER
     =========================================== */
  .categories-mega-menu {
    position   : absolute;
    left       : 0;
    right      : 0;
    top        : 100%;
    background : var(--color-white-default);
    box-shadow : 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity    : 0;
    visibility : hidden;
    transform  : translateY(-10px);
    transition : opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index    : 100;
  }

  .categories-dropdown.--is-open .categories-mega-menu {
    opacity    : 1;
    visibility : visible;
    transform  : translateY(0);
  }

  /* ===========================================
     MEGA MENU INNER WRAPPER
     =========================================== */
  .categories-mega-menu .bwa-menu__top__wrapper {
    position   : relative;
    width      : 100%;
    margin     : 0 auto;
    padding    : 12px var(--container-primary-margin) 24px;
    background : transparent;
    border     : none;
    overflow   : visible;
    max-height : 70vh;
    height     : 100%;
    display    : flex;
    gap        : 0;
    z-index    : 20;
  }

  .categories-mega-menu .mobile_only,
  .categories-mega-menu #tab_initial,
  .categories-mega-menu #tab_back,
  .categories-mega-menu .menu_mobile_back,
  .categories-mega-menu .see-all-btn__container,
  .categories-mega-menu .js-tab_back {
    display : none !important;
  }

  /* ===========================================
     COLUMN 1: SIDEBAR CATEGORIES (col-span-3 = 25%)
     =========================================== */
  .categories-mega-menu .bwa-menu__top {
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    margin         : 0;
    padding        : 0 16px 0 0;
    list-style     : none;
    flex-shrink    : 0;
    height         : 100%;
    border-right   : 2px solid var(--color-grey-default);
    overflow-y     : auto;
  }

  /* Sidebar title "Catégories" */
  .categories-mega-menu .bwa-menu__top::before {
    content        : 'Catégories';
    display        : block;
    padding        : 0 12px 8px;
    line-height    : 3rem;
    font-size      : 0.75rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : var(--color-grey-font-default);
  }

  /* Category items in sidebar */
  .categories-mega-menu .bwa-menu__main-item {
    position : static;
    margin   : 0;
  }

  .categories-mega-menu .bwa-menu__main-item .bwa-menu__link-title {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    padding         : 8px 12px;
    font-size       : 0.875rem;
    font-weight     : 500;
    color           : var(--color-black-default);
    text-decoration : none;
    background      : transparent;
    border-radius   : var(--radius-md);
    transition      : all 0.15s ease;
    letter-spacing  : 0.02em;
  }

  .categories-mega-menu .bwa-menu__main-item .bwa-menu__link-title:hover,
  .categories-mega-menu .bwa-menu__main-item.--is-active .bwa-menu__link-title {
    background-color : var(--color-primary);
    color            : var(--color-white-default);
  }

  .categories-mega-menu .bwa-menu__main-item .sub-menu__trigger {
    display : none;
  }

  .categories-mega-menu .bwa-menu__main-item .bwa-menu__title__wrapper {
    display     : flex;
    align-items : center;
    gap         : 12px;
    flex        : 1;
  }

  .categories-mega-menu .bwa-menu__main-item .bwa-menu__title {
    font-size   : 0.875rem;
    font-weight : 500;
  }

  /* Chevron right for items with children */
  .categories-mega-menu .bwa-menu__main-item.hasSub .bwa-menu__link-title::after {
    content      : '';
    display      : inline-block;
    width        : 6px;
    height       : 6px;
    border-top   : 2px solid currentColor;
    border-right : 2px solid currentColor;
    transform    : rotate(45deg);
    flex-shrink  : 0;
  }

  /* ===========================================
     SUBMENU PANEL (Columns 2 + 3)
     =========================================== */
  /* Sous-menus positionnés à côté de la colonne des catégories */
  .categories-mega-menu .bwa-menu__sub-menu__wrapper {
    background     : transparent;
    opacity        : 0;
    visibility     : hidden;
    transition     : opacity 0.15s ease;
    z-index        : 10;
    overflow       : visible;
    pointer-events : none;
    display        : flex;
    flex-direction : row;
    gap            : 24px;
  }

  .categories-mega-menu .bwa-menu__sub-menu__wrapper.--is-active {
    opacity        : 1 !important;
    visibility     : visible !important;
    pointer-events : all !important;
    width          : 75% !important;
  }

  /* ===========================================
     TEMPLATE-3 INSIDE MEGA MENU
     Grid: 5/12 (subcategories) | 4/12 (highlights)
     =========================================== */
  .categories-mega-menu .bwa-menu__sub-menu[data-template="template-3"] {
    display        : flex;
    flex-direction : row;
    gap            : 24px;
    width          : 100%;
    height         : 100%;
  }

  /* Colonne 2: Sous-catégories (5/9 de l'espace restant ≈ 55%) */
  .categories-mega-menu .bwa-menu__sub-menu[data-template="template-3"] .bwa-menu__sub-menu__part--main-list {
    flex   : 2;
    height : 100%;
  }

  /* Colonne 3: Highlights (4/9 de l'espace restant ≈ 45%) */
  .categories-mega-menu .bwa-menu__sub-menu[data-template="template-3"] .bwa-menu__sub-menu__part--sub-col {
    flex   : 4;
    height : 100%;
  }

  /* ===========================================
     COLUMN 2: SUBCATEGORIES (col-span-5 = 42%)
     =========================================== */
  .categories-mega-menu .bwa-menu__sub-menu__part--main-list {
    display        : flex;
    flex-direction : column;
    background     : transparent;
    min-width      : 0;
    padding-left   : 16px;
    overflow-y     : auto;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-title {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0 0 12px;
    font-size       : 0.75rem;
    font-weight     : 600;
    text-transform  : uppercase;
    letter-spacing  : 0.1em;
    color           : var(--color-grey-font-default);
    text-decoration : none;
    border-bottom   : none;
    background      : transparent;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-title:hover {
    color : var(--color-grey-font-default);
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-title__text {
    font-size      : 0.75rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : var(--color-grey-font-default);
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-title__link {
    font-size      : 0.875rem;
    font-weight    : 500;
    text-transform : none;
    letter-spacing : 0;
    color          : var(--color-primary);
    display        : flex;
    align-items    : center;
    gap            : 4px;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-title:hover .bwa-menu__sub-menu__main-title__link {
    text-decoration : underline;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-list__wrapper {
    flex       : 1;
    overflow-y : auto;
    padding    : 0;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-list__item {
    padding : 0;
  }

  /* Grid 2 columns for subcategories */
  .categories-mega-menu .bwa-menu__sub-menu__main-list__item > ul {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 0;
    margin                : 0;
    padding               : 0;
    list-style            : none;
  }

  .categories-mega-menu .bwa-menu__sub-menu__main-list__item > ul > .bwa-menu__sub-menu__item {
    margin  : 0;
    padding : 0;
  }

  .categories-mega-menu .bwa-menu__sub-menu__item {
    position : static;
  }

  .categories-mega-menu .bwa-menu__sub-menu__link-title[data-depth="1"] {
    display         : block;
    font-size       : 0.875rem;
    font-weight     : 500;
    color           : var(--color-black-default);
    text-decoration : none;
    transition      : background-color 0.15s ease;
  }

  .categories-mega-menu .bwa-menu__sub-menu__link-title[data-depth="1"]:hover {
    background-color : rgba(var(--color-grey-default-rgb, 229, 229, 229), 0.2);
  }

  .categories-mega-menu .bwa-menu__sub-menu__title[data-depth="1"] {
    font-size      : 0.875rem;
    font-weight    : 500;
    text-transform : none;
  }

  .categories-mega-menu .bwa-menu__sub-menu__title__wrapper[data-depth="1"] {
    display : block;
  }

  /* Hide chevron in subcategories */
  .categories-mega-menu .bwa-menu__sub-menu__item .sub-menu__trigger {
    display : none;
  }

  /* ===========================================
     COLUMN 3: HIGHLIGHTS (col-span-4 = 33%)
     =========================================== */
  .categories-mega-menu .bwa-menu__sub-menu__part--sub-col {
    padding        : 0;
    background     : transparent;
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    min-width      : 0;
    overflow       : hidden;
    height         : 100%;
  }

  /* Grid of highlighted items */
  .categories-mega-menu .links-list__with-img__wrapper {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    height         : 100%;
  }

  .categories-mega-menu .links-list__with-img {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    margin         : 0;
    padding        : 0;
    list-style     : none;
    height         : 100%;
  }

  /* Highlight card */
  .categories-mega-menu .links-list__with-img__item {
    position      : relative;
    flex          : 1;
    border-radius : var(--radius-xl);
    overflow      : hidden;
    background    : var(--color-grey-default);
  }

  /* Limit to 2 highlight items */
  .categories-mega-menu .links-list__with-img__item:nth-child(n+3) {
    display : none;
  }

  .categories-mega-menu .links-list__with-img__item a,
  .categories-mega-menu .links-list__with-img__item > div {
    display         : flex;
    flex-direction  : column;
    justify-content : flex-end;
    height          : 100%;
    text-decoration : none;
    color           : inherit;
    padding         : 24px;
  }

  /* Image as background */
  .categories-mega-menu .links-list__with-img__item__img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    z-index    : 0;
    transition : transform 0.5s ease;
  }

  .categories-mega-menu .links-list__with-img__item:hover .links-list__with-img__item__img {
    transform : scale(1.1);
  }

  /* Content wrapper */
  .categories-mega-menu .links-list__with-img__item__content {
    position : relative;
    z-index  : 2;
  }

  /* ===========================================
     HIDE OVERLAY
     =========================================== */
  .overlay_global--nav,
  .categories-mega-menu .overlay_global {
    display : none !important;
  }

  .categories-mega-menu .bwa-menu__top__wrapper.is--active + .overlay_global {
    display        : none !important;
    pointer-events : none;
    background     : transparent;
  }

}

/* End @media (min-width: 1200px) */

/* ===========================================
   XL SCREENS (>= 1400px)
   =========================================== */

@media (min-width : 1400px) {
  .categories-mega-menu .bwa-menu__category-img {
    width  : 50px;
    height : 50px;
  }
}