/**
 * Custom CSS voor ScooterDiscounter Theme
 * Aanpassingen om RED theme HTML structuur te laten werken met Magento elementen
 */

/* Header aanpassingen */
.header-container {
    /* Verwijder oude header styling */
}

.site__header {
    /* Header wordt gestyled door style.header-classic-variant-three.css */
}

/* Search form aanpassingen */
.search__body {
    position: relative;
}

.search__input {
    width: 100%;
    padding: 10px 50px 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.search__button {
    position: absolute;
    top: 0;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.search__button--start {
    left: 0;
}

.search__button--end {
    right: 0;
}

.search__button-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search__button-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Logo aanpassingen */
.logo__slogan {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

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

/* Mobile header aanpassingen */
.mobile-header__logo img {
    max-width: 130px;
    height: auto;
}

/* Topbar links aanpassingen */
.topbar__item-text a {
    color: inherit;
    text-decoration: none;
}

.topbar__item-text a:hover {
    text-decoration: underline;
}

/* Departments menu - wordt later gevuld met Magento categorieën */
.departments__body {
    /* Styling komt uit style.header-classic-variant-three.css */
}

/* Main menu aanpassingen */
.main-menu {
    /* Styling komt uit style.header-classic-variant-three.css */
}

/* Header indicators (cart, account) */
.header__indicator {
    position: relative;
}

.header__indicator-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.header__indicator-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__indicator-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Minicart aanpassingen */
.header-minicart {
    /* Styling komt uit style.header-classic-variant-three.css */
}

/* Phone number block */
.header__phone {
    /* Styling komt uit style.header-classic-variant-three.css */
}

/* Responsive aanpassingen */
@media (max-width: 1199px) {
    .site__header {
        display: none;
    }
    
    .site__mobile-header {
        display: block;
    }
}

@media (min-width: 1200px) {
    .site__header {
        display: block;
    }
    
    .site__mobile-header {
        display: none;
    }
}