/**
 * Vlaams Mobile Sidebar - Mobile Styles
 * Matches POC exactly from sidebar-poc.html
 */

/* Mobile Menu Button - matches POC exactly */
.vms-mobile-menu-btn {
    display: none;
    position: fixed;
    bottom: 60px;
    /* Positioned above back-to-top button */
    right: 18px;
    width: 56px;
    height: 56px;
    background-color: #2c4a8b;
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(44, 74, 139, 0.3);
    cursor: pointer;
    z-index: 997;
    transition: all 0.3s;
    font-size: 24px;
    align-items: center;
    justify-content: center;
}

/* Show button only on mobile screens */
@media (max-width: 768px) {
    .vms-mobile-menu-btn {
        display: flex;
    }
}

.vms-mobile-menu-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(44, 74, 139, 0.4);
}

.vms-mobile-menu-btn:active {
    transform: scale(0.95);
}

.vms-mobile-menu-btn svg {
    width: 36px;
    height: 36px;
    margin-left: -4px;
}

.vms-mobile-menu-btn svg path {
    stroke: #ffeb11;
    stroke-width: 3;
    transition: all 0.3s ease;
}

/* Adjust button position when back-to-top is visible */
.vms-mobile-menu-btn.elevated {
    bottom: 130px;
}

/* Mobile Overlay */
.vms-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.vms-mobile-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: all;
}

/* Mobile Sidebar */
.vms-mobile-sidebar {
    display: none;
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
    transition: right 0.3s ease-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}


@media (max-width: 768px) {
    .vms-mobile-sidebar {
        display: block;
    }
}

.vms-mobile-sidebar.active {
    right: 0;
}

.vms-mobile-sidebar-header {
    background-color: #2c4a8b;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vms-mobile-sidebar-header h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

.vms-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

.vms-mobile-sidebar-content {
    padding: 20px;
    height: calc(100% - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Widget Styles - Match POC */
.vms-mobile-sidebar .widget {
    margin-bottom: 30px;
}

.vms-mobile-sidebar .widget h4,
.vms-mobile-sidebar .widget h3,
.vms-mobile-sidebar .widget .widget-title {
    color: #2c4a8b;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #2c4a8b;
    font-weight: 400;
}

.vms-mobile-sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vms-mobile-sidebar .widget li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.vms-mobile-sidebar .widget a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: color 0.3s;
}

.vms-mobile-sidebar .widget a:hover {
    color: #2c4a8b;
}

.vms-mobile-sidebar .widget strong {
    color: #333;
    font-weight: 700;
}

/* Current/Active page highlight */
.vms-mobile-sidebar .widget li.current-menu-item a,
.vms-mobile-sidebar .widget li.current_page_item a {
    color: #2c4a8b;
    font-weight: bold;
}

/* Body class when menu is open - prevent scroll without layout shift */
body.vms-menu-open {
    overflow: hidden !important;
    /* Don't use position: fixed as it causes issues */
}

/* Screen reader only text */
.vms-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* WooCommerce Product Categories Widget */
.vms-mobile-sidebar .widget_product_categories ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.vms-mobile-sidebar .widget_product_categories ul li a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.vms-mobile-sidebar .widget_product_categories .count {
    flex-shrink: 0;
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

/* Ensure category names and counts stay on same line */
.vms-mobile-sidebar .product-categories li,
.vms-mobile-sidebar .widget_product_categories li {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.vms-mobile-sidebar .product-categories li>a,
.vms-mobile-sidebar .widget_product_categories li>a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Style for the count in parentheses */
.vms-mobile-sidebar .product-categories li .count,
.vms-mobile-sidebar .widget_product_categories li .count {
    flex-shrink: 0;
    padding-left: 5px;
    white-space: nowrap;
}

/* Kleo theme specific adjustments */
.vms-kleo-theme .vms-mobile-sidebar .widget {
    /* Match Kleo widget styling if needed */
}

.vms-kleo-theme .kleo-go-top {
    /* Ensure compatibility with Kleo back-to-top button */
}