/*
Theme Name: Woodmart Child
Theme URI: https://phonehubiraq.com/
Description: WoodMart child theme with PhoneHub Iraq product-page customisation.
Author: PhoneHub Iraq
Template: woodmart
Version: 1.1.0
Text Domain: phonehub-woodmart
*/

/* Global PhoneHub header utilities. Text is managed from Appearance > PhoneHub Settings. */
.ph-marquee {
	position: relative;
	z-index: 1000;
	width: 100%;
	overflow: hidden;
	min-height: 44px;
	background: #171717;
	color: #fff;
	direction: rtl;
	font-family: inherit;
}

/* WoodMart's top-bar row keeps its own background and column widths. Make the
 * row a genuine full-width PhoneHub announcement bar instead of leaving a
 * theme-coloured empty area beside the marquee. */
.whb-top-bar,
.whb-top-bar .whb-row,
.whb-top-bar .whb-color-light,
.whb-top-bar .whb-color-dark {
	background-color: #171717 !important;
}

.whb-top-bar .container,
.whb-top-bar .whb-row > .container,
.whb-top-bar .whb-general-header-inner,
.whb-top-bar .whb-row > .whb-general-header-inner {
	width: 100% !important;
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.whb-top-bar .whb-col-left,
.whb-top-bar .whb-col-center,
.whb-top-bar .whb-col-right {
	background-color: #171717 !important;
}

/* The marquee is output automatically. The Header Builder top bar must not
 * leave a second empty strip above the header. */
.whb-top-bar { display: none !important; }

/* The marquee is in the left Text/HTML slot of this header layout. */
.whb-top-bar .whb-col-left {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.whb-top-bar .whb-col-center,
.whb-top-bar .whb-col-right {
	display: none !important;
}

.whb-top-bar .whb-col-left:has(.ph-marquee),
.whb-top-bar .whb-col-center:has(.ph-marquee),
.whb-top-bar .whb-col-right:has(.ph-marquee) {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.ph-marquee-track {
	display: flex;
	width: max-content;
	min-width: 100%;
	align-items: center;
	animation: ph-marquee-scroll 30s linear infinite;
	will-change: transform;
}

.ph-marquee-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.ph-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 42px;
	border-inline-start: 1px solid rgba(255, 255, 255, .22);
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.ph-marquee-item:first-child { border-inline-start: 0; }
.ph-marquee-icon { display: inline-grid; width: 18px; height: 18px; place-items: center; color: #ff6b1a; font-size: 18px; line-height: 1; }
.ph-marquee:hover .ph-marquee-track { animation-play-state: paused; }

@keyframes ph-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

.ph-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid #f15a0b;
	border-radius: 3px;
	background: #fff;
	color: #d94d05 !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}
.ph-whatsapp-link:hover { background: #fff6f0; color: #b83e00 !important; }
.ph-whatsapp-link span { font-size: 18px; line-height: 1; }

@media (max-width: 767px) {
	.ph-marquee { min-height: 40px; }
	.ph-marquee-item { min-height: 40px; padding: 0 28px; font-size: 12px; gap: 8px; }
	.ph-marquee-icon { width: 16px; height: 16px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ph-marquee-track { animation: none; width: 100%; justify-content: center; }
	.ph-marquee-group[aria-hidden="true"] { display: none; }
}