/*
File: RafinaStudio/inc/frontend/header/header.css
پورت مستقیم از src/components/Header/Header.css مرجع (rafinastore.com)
متغیرهای رنگ و قوانین لوگو در assets/css/theme-vars.css مشترک هستند.
*/

.rafina-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(14px) saturate(140%);
	background: var(--rafina-header-bg);
	border-bottom: 1px solid var(--rafina-border);
	direction: rtl;
	font-family: 'IRANSansX', Tahoma, sans-serif;
}
.rafina-nav-wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 20px; }

.rafina-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; flex-shrink: 0; text-decoration: none; color: var(--rafina-text); }

.rafina-main-links { display: flex; align-items: center; gap: 30px; }
.rafina-main-links a { font-size: 15px; color: var(--rafina-text-dim); font-weight: 500; text-decoration: none; transition: color .2s ease; }
.rafina-main-links a:hover { color: var(--rafina-text); }

.rafina-nav-search {
	display: flex; align-items: center; gap: 8px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2);
	border-radius: 11px; padding: 9px 14px; flex: 1; max-width: 340px; min-width: 0;
}
.rafina-nav-search svg { width: 16px; height: 16px; color: var(--rafina-text-dimmer); flex-shrink: 0; }
.rafina-nav-search input { background: transparent; border: none; outline: none; color: var(--rafina-text); font-family: inherit; font-size: 14px; width: 100%; min-width: 0; }
@media (max-width: 1100px) { .rafina-nav-search { display: none; } }

.rafina-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.rafina-icon-btn {
	width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg);
	display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rafina-text-dim);
	transition: color .2s ease, border-color .2s ease, background .2s ease; position: relative; flex-shrink: 0; text-decoration: none;
}
.rafina-icon-btn:hover { color: var(--rafina-accent-2); border-color: var(--rafina-accent-2); background: var(--rafina-ghost-bg-hover); }
.rafina-icon-btn svg { width: 19px; height: 19px; }
.rafina-cart-count {
	position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
	background: var(--rafina-accent-2); color: #06210b; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.rafina-btn-ghost {
	border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); border-radius: 10px; padding: 0 18px; height: 42px;
	display: inline-flex; align-items: center; font-weight: 700; font-size: 13.5px; color: var(--rafina-text); text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.rafina-btn-ghost:hover { background: var(--rafina-ghost-bg-hover); border-color: var(--rafina-accent-2); }

@media (max-width: 640px) { .rafina-btn-ghost { display: none; } }

.rafina-burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rafina-burger span, .rafina-burger span::before, .rafina-burger span::after { content: ''; display: block; width: 18px; height: 2px; background: var(--rafina-text); position: relative; transition: .25s ease; }
.rafina-burger span::before { position: absolute; top: -6px; }
.rafina-burger span::after { position: absolute; top: 6px; }
.rafina-burger.open span { background: transparent; }
.rafina-burger.open span::before { transform: rotate(45deg); top: 0; }
.rafina-burger.open span::after { transform: rotate(-45deg); top: 0; }
@media (max-width: 900px) { .rafina-main-links { display: none; } .rafina-burger { display: flex; } }

.rafina-mobile-panel { display: none; flex-direction: column; gap: 4px; padding: 14px 24px 22px; border-top: 1px solid var(--rafina-border); background: var(--rafina-header-bg-solid); }
.rafina-mobile-panel.open { display: flex; }
.rafina-mobile-panel .rafina-mp-link { padding: 12px 6px; color: var(--rafina-text-dim); font-weight: 600; border-bottom: 1px solid var(--rafina-border); text-decoration: none; display: block; }