/* ==========================================================================
   TIER-1 MULTI HEADER STYLESHEET (SHOP & CATALOG ARCHIVE)
   Location: css/header-multi.css
   ========================================================================= */

.tm-main-header {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 75px !important; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px; 
    background: rgba(23, 20, 28, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 1010; 
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, top 0.3s ease; 
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.tm-main-header.at-top { top: 0 !important; }
.tm-main-header.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.tm-main-header.scrolled-down { transform: translateY(calc(-100% - 36px)); }
.tm-main-header.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.tm-header-left { display: flex; align-items: center; gap: 14px; }

.tm-back-btn { 
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; 
    border-radius: 50%; background-color: transparent !important; border: none !important; color: #cbd5e1; 
    cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; outline: none;
}
.tm-back-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff; }
.tm-back-svg { width: 22px; height: 22px; transition: transform 0.2s ease; stroke: currentColor; fill: none; }
.tm-back-btn:hover .tm-back-svg { transform: translateX(-3px); }

.tm-store-info { display: flex; align-items: center; gap: 12px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; transition: opacity 0.2s ease; }
.tm-store-info:hover { opacity: 0.85; }

.tm-store-avatar-large { 
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    background-color: transparent; border: none !important; color: #ffffff; flex-shrink: 0; 
}

.tm-store-name-large { font-size: 16px; font-weight: 800; color: #ffffff; letter-spacing: -0.3px; }

.tm-header-right { display: flex; align-items: center; height: 100%; gap: 6px; }

/* Request Button with Hover Arrow */
a.tc-label-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    background-color: transparent; 
    border: 1.5px solid rgba(255, 255, 255, 0.2); 
    color: #ffffff; 
    padding: 9px 20px;
    border-radius: 50px; 
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0; 
    position: relative;
    user-select: none;
    text-decoration: none !important;
    margin-right: 6px; 
}

a.tc-label-btn:hover {
    background-color: #7c3aed; 
    border-color: #7c3aed;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.hrb-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    stroke: currentColor;
    fill: none;
}

a.tc-label-btn:hover .hrb-svg {
    transform: rotate(360deg) scale(1.1);
}

.tc-arrow-hover {
    width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    stroke: currentColor !important;
    display: block !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a.tc-label-btn:hover .tc-arrow-hover {
    width: 16px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    margin-left: 2px !important;
}

.tm-circle-btn, .tm-dots-btn { 
    position: relative; background-color: transparent !important; border: none !important; color: #cbd5e1; 
    cursor: pointer; width: 44px; height: 44px; flex: 0 0 44px; box-sizing: border-box; display: flex; 
    align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; padding: 0; text-decoration: none; outline: none;
}
.tm-circle-btn svg, .tm-dots-svg { width: 22px; height: 22px; color: inherit; }
.tm-circle-btn:hover, .tm-dots-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff; }
.tm-circle-btn.tm-fav-btn:hover { background-color: rgba(239, 68, 68, 0.15) !important; color: #ef4444; }

.tm-fav-counter { position: absolute; top: 0px; right: 0px; background-color: #ef4444; color: #ffffff; font-size: 10px; font-weight: 900; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #17141c; animation: counterPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes counterPop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

.tm-dropdown-container { position: relative; display: flex; align-items: center; height: 100%; }

.tm-dropdown-menu { position: absolute; top: 65px; right: 0; background-color: #17141c; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; box-shadow: 0 15px 35px rgba(0,0,0,0.6); padding: 8px 0; display: flex; flex-direction: column; width: 240px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1100; }
.tm-dropdown-container:hover .tm-dropdown-menu, .tm-dropdown-container.open .tm-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tm-dropdown-menu::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background-color: #17141c; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); transform: rotate(45deg); z-index: 1; }

.tm-dropdown-item { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 14.5px; font-weight: 700; width: 100%; box-sizing: border-box; background-color: transparent; color: #cbd5e1; text-decoration: none; transition: all 0.15s ease; }
.tm-dropdown-item svg { width: 19px; height: 19px; color: #7c3aed; stroke: currentColor; transition: color 0.15s ease; flex-shrink: 0; }
.tm-dropdown-item:hover { background-color: #7c3aed; color: #ffffff; }
.tm-dropdown-item:hover svg { color: #ffffff; stroke: #ffffff; }

.tm-dropdown-item.text-amber { color: #f5bc00; }
.tm-dropdown-item.text-amber svg { color: #f5bc00; stroke: #f5bc00; }
.tm-dropdown-item.text-amber:hover { background-color: #f5bc00; color: #ffffff; }
.tm-dropdown-item.text-amber:hover svg { color: #ffffff; stroke: #ffffff; }

.tm-dropdown-divider { height: 1px; background-color: rgba(255, 255, 255, 0.08); margin: 4px 0; width: 100%; }

@media (max-width: 768px) {
    .tm-main-header { padding: 0 12px; height: 65px !important; }
    .tm-store-info { padding-left: 0; border-left: none; }
    .tm-store-avatar-large { width: 30px; height: 30px; }
    .tm-store-name-large { font-size: 14px; }
    .tm-back-btn, .tm-circle-btn, .tm-dots-btn { width: 38px; height: 38px; flex: 0 0 38px; }
    .tm-back-svg, .tm-circle-btn svg, .tm-dots-svg { width: 20px; height: 20px; }
    .tm-dropdown-menu { width: 220px; right: 0; top: 55px; }
    a.tc-label-btn span, a.tc-label-btn .tc-arrow-hover { display: none !important; }
    a.tc-label-btn {
        width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important;
        flex: 0 0 44px !important; padding: 0 !important; gap: 0 !important; border-radius: 50% !important; margin-right: 0 !important; 
    }
    .tc-label-btn .hrb-svg { width: 20px !important; height: 20px !important; margin: 0 auto !important; }
}