/* Moved from templates/base.html inline styles */
/* Minor inline additions */
.ep-nav .ep-cart-badge {
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .65rem;
    font-weight: 600;
    margin-left: 4px;
}

.ep-lang-select {
    border: 1px solid var(--ep-border);
    background: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
}

.ep-layout-wrapper {
    width: 90%;
    margin: 28px auto 0;
    padding: 0;
}

.ep-content-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 70px;
}

@media (max-width: 680px) {
    .ep-layout-wrapper {
        width: 100%;
        margin-top: 0;
    }
}

/* Hide desktop user menu on small screens, show mobile user block inside nav */
@media (max-width: 680px) {
    .ep-user-menu {
        display: none !important;
    }

    /* desktop user actions hidden */
    .ep-nav-user--mobile {
        display: block !important;
    }

    /* ensure mobile block visible */
}

/* On desktop ensure mobile user block hidden */
@media (min-width: 781px) {
    .ep-nav-user--mobile {
        display: none !important;
    }
}

/* Suggestions dropdown basic styles moved here (if any existed inline) */
.ep-search-suggestions {
    position: absolute;
    z-index: 90;
    background: #fff;
    border: 1px solid var(--ep-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
    max-width: 420px;
    margin-top: 6px;
    display: none;
    padding: 8px;
}

.ep-search-suggestions.ep-show {
    display: block;
}

.ep-suggestions-section {
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 6px
}

.ep-suggestions-header {
    font-weight: 700;
    padding: 6px 8px;
    color: var(--ep-text-soft)
}

.ep-suggestion-item {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    color: var(--ep-text);
    text-decoration: none
}

.ep-suggestion-item:hover {
    background: var(--ep-bg-hover);
    border-radius: 6px
}

/* Floating FAB moved here */
.ep-feedback-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: var(--ep-primary);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* Card clickable focus styles */
.ep-card-clickable[role="link"] {
    cursor: pointer
}

.ep-card-clickable:focus {
    outline: 2px solid var(--ep-primary-soft);
    outline-offset: 2px
}

/* User menu / auth controls styling (moved from inline styles in templates) */
.ep-nav-auth form.ep-logout-form {
    display: inline;
    margin-left: 8px
}

.ep-nav-auth .ep-btn {
    margin-left: 8px
}

.ep-user-compact {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ep-text-soft);
    text-decoration: none
}

.ep-user-logout-btn {
    background: var(--ep-gradient-primary);
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer
}

.ep-user-login-link {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ep-primary);
    text-decoration: none
}

.ep-user-register-btn {
    font-size: .75rem;
    font-weight: 600;
    background: var(--ep-gradient-primary);
    color: #000000;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none
}

/* Utility */
.ep-hidden-mobile {
    display: none
}

/* Container for centered content pages (Terms, Privacy, Cookie) */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 32px 64px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.container h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ep-text);
    margin: 0 0 24px;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.container h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ep-text);
    margin: 32px 0 16px;
    letter-spacing: 0.2px;
}

.container h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ep-text);
    margin: 24px 0 12px;
    letter-spacing: 0.1px;
}

.container p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ep-text-soft);
    margin: 0 0 20px;
}

.container ul {
    margin: 0 0 20px;
    padding-left: 24px;
}

.container li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ep-text-soft);
    margin-bottom: 8px;
}

.container a {
    color: var(--ep-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.container a:hover {
    color: var(--ep-primary-accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 32px 20px 48px;
        border-radius: 0;
    }

    .container h1 {
        font-size: 1.8rem;
    }

    .container h2 {
        font-size: 1.2rem;
    }
}

/* Mobile search bar styling improvements - Fix overflow */
@media (max-width: 980px) {
    .ep-header-inner {
        height: auto !important;
        min-height: 64px;
        padding: 8px 16px !important;
    }

    /* Ensure header inner is relative for menu positioning */
    .ep-header-inner {
        position: relative;
    }

    .ep-search-bar {
        margin-top: 8px;
        padding-bottom: 8px;
    }

    .ep-search-bar input {
        padding: 10px 100px 10px 14px !important;
        font-size: 0.85rem !important;
    }

    .ep-search-bar button {
        padding: 7px 14px !important;
        font-size: 0.7rem !important;
    }
}

@media (max-width: 640px) {
    .ep-header-inner {
        padding: 6px 12px !important;
    }

    .ep-search-bar {
        margin-top: 6px;
        padding-bottom: 6px;
    }

    .ep-search-bar input {
        padding: 9px 90px 9px 12px !important;
        font-size: 0.8rem !important;
    }

    .ep-search-bar button {
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   Categories Dropdown Menu in Header
   ══════════════════════════════════════════════════════════ */

/* Ensure the Header Inner is the positioning context */
.ep-header-inner {
    position: relative;
}

.ep-nav-dropdown {
    position: static;
    display: inline-block;
    height: 100%;
    display: flex;
    align-items: center;
}

.ep-nav-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 100%;
    position: relative;
    z-index: 101;
}

.ep-nav-dropdown__menu {
    position: absolute;
    top: 100%;

    /* CRITICAL: Use Margin Centering instead of Transform 
       Transform creates a containing block that traps 'position: fixed' */
    left: 50%;
    margin-left: -300px;
    /* -50% of 600px width */
    margin-top: 10px;
    /* Initial animation offset */

    background: #fff;
    width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--ep-border);

    display: flex;
    align-items: stretch;

    opacity: 0;
    visibility: hidden;

    /* Remove transforms from transition */
    transition: opacity 0.2s ease, margin-top 0.2s ease, visibility 0.2s;

    z-index: 100;
    padding: 0;
    height: 65vh;
    overflow: hidden;
    /* Local scroll containment */
}

.ep-nav-dropdown:hover .ep-nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
    /* Slide up effect via margin */
}

/* === LEFT COLUMN: SCROLLABLE LIST === */
.ep-nav-l1-list {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--ep-border);

    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;

    scrollbar-width: thin;
    scrollbar-color: rgba(160, 160, 128, 0.5) transparent;
}

.ep-nav-l1-list::-webkit-scrollbar {
    width: 3px;
}

.ep-nav-l1-list::-webkit-scrollbar-thumb {
    background: rgba(160, 160, 128, 0.6);
    border-radius: 4px;
}

.ep-nav-l1-list::-webkit-scrollbar-track {
    background: transparent;
}


/* === RIGHT COLUMN: STATIC CONTENT === */
.ep-nav-l2-container {
    width: 300px;
    flex-shrink: 0;
    position: relative;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 8px 0;

    scrollbar-width: thin;
    scrollbar-color: rgba(160, 160, 128, 0.5) transparent;
}

.ep-nav-l2-container::-webkit-scrollbar {
    width: 3px;
}

.ep-nav-l2-container::-webkit-scrollbar-thumb {
    background: rgba(160, 160, 128, 0.6);
    border-radius: 4px;
}

.ep-nav-l2-container::-webkit-scrollbar-track {
    background: transparent;
}

/* L2 Panels */
.ep-nav-l2-panel {
    display: none;
    width: 100%;
}

.ep-nav-l2-panel.active {
    display: block;
    /* Use fade in without transform to be safe? 
       Actually children inside panel are not fixed, but the L3 popup is. 
       Animation on panel is fine as long as L3 is fixed viewport relative. */
    animation: fadeInPanel 0.2s ease;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        margin-top: 5px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}

.ep-nav-l2-placeholder {
    display: none;
}


/* === ITEMS STYLING === */
.ep-nav-dropdown__subcategory-item {
    width: 100%;
    position: relative;
}

.ep-nav-dropdown__subcategory-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    color: var(--ep-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.15s ease;
    max-width: 100%;
}

.ep-nav-dropdown__subcategory-link:hover,
.ep-nav-dropdown__subcategory-item.hovered>.ep-nav-dropdown__subcategory-link {
    background-color: var(--ep-bg-hover);
    color: var(--ep-primary);
}

.ep-nav-dropdown__subcategory-link>span,
.ep-nav-dropdown__subcategory-link>div {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-nav-dropdown__subcategory-link>div {
    display: flex !important;
}

.ep-nav-dropdown__subcategory-link>div>span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-nav-dropdown__sub-arrow {
    width: 14px;
    height: 14px;
    min-width: 14px;
    color: var(--ep-text-soft);
    opacity: 0.6;
    margin-left: 8px;
}

/* === LEVEL 3 FLYOUT (Handling via Fixed Position in JS) === */
.ep-nav-dropdown__third-level {
    display: block;
    position: absolute;
    /* Take out of flow to prevent pushing siblings */
    top: 0;
    left: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    width: 300px;
    background: #fff;
    border: 1px solid var(--ep-border);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 12px 0;

    z-index: 1000;

    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(160, 160, 128, 0.5) transparent;
}

.ep-nav-dropdown__third-level::-webkit-scrollbar {
    width: 3px;
}

.ep-nav-dropdown__third-level::-webkit-scrollbar-thumb {
    background: rgba(160, 160, 128, 0.6);
    border-radius: 4px;
}

.ep-nav-dropdown__third-level::-webkit-scrollbar-track {
    background: transparent;
}

.ep-nav-dropdown__third-level-header {
    font-weight: 700;
    color: var(--ep-primary);
    margin-bottom: 8px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--ep-border);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-nav-dropdown__third-level-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ep-nav-dropdown__third-level-link {
    display: block;
    padding: 4px 16px;
    color: var(--ep-text);
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-nav-dropdown__third-level-link:hover {
    background: var(--ep-bg-hover);
    color: var(--ep-primary);
}

/* Hide category dropdown on mobile devices */
@media (max-width: 980px) {
    .ep-nav .ep-nav-dropdown {
        display: none !important;
    }
}