/* ============================================================
   BRAND FIXES 2 - contact icons, side menu, search,
   single product, payment badges.
   Loads last.
   ============================================================ */

/* ------------------------------------------------------------
   1. Footer contact / social icons
   The icon was disappearing on hover because both the chip and
   the glyph turned red. Keep the glyph white on a red chip.
   ------------------------------------------------------------ */
.store-footer-contact-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.store-contact-icon {
	width: 42px;
	height: 42px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #ffffff !important;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.store-contact-icon svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor !important;
	color: #ffffff !important;
}
.store-contact-icon:hover {
	background: var(--store-red) !important;
	border-color: var(--store-red) !important;
	transform: translateY(-2px);
}
.store-contact-icon:hover svg,
.store-contact-icon:hover {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* ------------------------------------------------------------
   2. Side menu (categories drawer)
   ------------------------------------------------------------ */
.store-side-menu__content {
	background: #0d0d10 !important;
	border-inline-end: 1px solid var(--store-border) !important;
	color: var(--store-text) !important;
}
.store-side-menu__backdrop {
	background: rgba(0, 0, 0, 0.7) !important;
}
.store-side-menu__header {
	background: #0d0d10 !important;
	border-bottom: 1px solid var(--store-border) !important;
}
.store-side-menu__title {
	color: #ffffff !important;
}
.store-side-menu__close {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #ffffff !important;
	border-radius: 10px;
}
.store-side-menu__close:hover {
	background: var(--store-red) !important;
	border-color: var(--store-red) !important;
	color: #ffffff !important;
}
.store-side-menu__nav,
.store-side-menu__nav .store-category-list {
	background: transparent !important;
}
.store-side-menu .store-category-list a {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	color: #e6e6ee !important;
	border-radius: 10px;
}
.store-side-menu .store-category-list a:hover {
	background: var(--store-surface-2) !important;
	border-color: var(--store-red) !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   3. Search modal
   The red focus ring was doubling up into a hard red frame.
   ------------------------------------------------------------ */
.store-search-modal {
	background: rgba(6, 6, 8, 0.92) !important;
	backdrop-filter: blur(8px);
}
.store-live-search-form {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.store-live-search__input {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #ffffff !important;
}
.store-live-search__input:focus {
	background: var(--store-surface-2) !important;
	outline: none !important;
	border-color: var(--store-red) !important;
	box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18) !important;
}
.store-live-search__input::placeholder {
	color: #6f6f80 !important;
}
.store-live-search__submit {
	background: var(--store-red) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}
.store-live-search__submit:hover {
	background: var(--store-red-soft) !important;
}
.store-search-modal__close,
.store-live-search__close {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #ffffff !important;
	border-radius: 10px;
}
.store-search-modal__close:hover,
.store-live-search__close:hover {
	background: var(--store-red) !important;
	border-color: var(--store-red) !important;
}
.store-live-search-results {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
}

/* ------------------------------------------------------------
   4. Single product page
   ------------------------------------------------------------ */
.woocommerce div.product .summary,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.store-single-product-card,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	color: var(--store-text) !important;
}
.woocommerce div.product .product_title,
.woocommerce div.product .summary h1,
.woocommerce div.product .summary h2 {
	color: #ffffff !important;
}
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce div.product div.images img {
	background: #101014 !important;
	border-radius: 12px;
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
	color: #8a8a99 !important;
}
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--store-red) !important;
}
.product_meta,
.product_meta a,
.posted_in,
.posted_in a {
	color: #a3a3b2 !important;
}
.posted_in a:hover {
	color: var(--store-red) !important;
}
/* Category chip under the price */
.woocommerce div.product .product_meta .posted_in a,
.store-single__cats a {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 8px;
	padding: 3px 10px;
	display: inline-block;
}

/* Review tabs + form on the product page */
.woocommerce div.product .woocommerce-tabs,
.woocommerce #reviews,
.woocommerce #review_form_wrapper,
.woocommerce #respond {
	background: var(--store-surface) !important;
	border-color: var(--store-border) !important;
	color: var(--store-text) !important;
}
.woocommerce #reviews h2,
.woocommerce #reviews h3,
.woocommerce #respond .comment-reply-title,
.woocommerce #review_form label {
	color: #ffffff !important;
}
.woocommerce p.stars a {
	color: #f5a623 !important;
}

/* ------------------------------------------------------------
   5. Front-page review cards: drop the harsh glowing frame
   ------------------------------------------------------------ */
.store-demo-comment__orbit,
.store-demo-comment__orbit::before {
	display: none !important;
}
.store-demo-comment__panel {
	margin: 0 !important;
	height: auto !important;
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 14px !important;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.store-demo-comment:hover .store-demo-comment__panel {
	border-color: rgba(229, 9, 20, 0.5) !important;
	transform: translateY(-3px);
}

/* ------------------------------------------------------------
   6. Payment badges (Egyptian wallets)
   ------------------------------------------------------------ */
.store-trust-row-left {
	gap: 10px !important;
}
.asr-pay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffffff;
	padding: 7px 14px;
	border-radius: 8px;
	border: 1px solid var(--store-border);
	background: var(--store-surface-2);
	white-space: nowrap;
	line-height: 1;
}
.asr-pay::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.asr-pay[data-pay="vodafone"]::before {
	background: #e60000;
}
.asr-pay[data-pay="orange"]::before {
	background: #ff7900;
}
.asr-pay[data-pay="etisalat"]::before {
	background: #a3d43b;
}
.asr-pay[data-pay="instapay"]::before {
	background: #7b3fe4;
}
.asr-pay-note {
	color: #8a8a99 !important;
	font-size: 0.85rem;
	font-weight: 600;
}
@media (max-width: 767px) {
	.asr-pay {
		font-size: 0.72rem;
		padding: 6px 10px;
	}
}

/* ------------------------------------------------------------
   7. Logo plate: kill the white box behind a dark-brand logo
   ------------------------------------------------------------ */
.store-site-logo,
.store-site-logo a,
.store-footer-logo,
.store-footer-logo a {
	background: transparent !important;
}

/* ------------------------------------------------------------
   8. Product meta box (Category: ...) — had a white gradient
   ------------------------------------------------------------ */
.woocommerce div.product .store-product-summary .product_meta,
.woocommerce div.product .product_meta,
.store-single__meta {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #a3a3b2 !important;
}
.woocommerce div.product .store-product-summary .product_meta > span {
	border-bottom-color: var(--store-border) !important;
	color: #a3a3b2 !important;
}
.woocommerce div.product .store-product-summary .product_meta a,
.store-single__meta a {
	background: rgba(229, 9, 20, 0.14) !important;
	color: #ff6b74 !important;
	border: 1px solid rgba(229, 9, 20, 0.28) !important;
}
.woocommerce div.product .store-product-summary .product_meta a:hover,
.woocommerce div.product .store-product-summary .product_meta a:focus,
.store-single__meta a:hover {
	background: var(--store-red) !important;
	color: #ffffff !important;
	border-color: var(--store-red) !important;
}

/* ------------------------------------------------------------
   9. Product gallery placeholder (WooCommerce default image)
   ------------------------------------------------------------ */
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img,
img.woocommerce-placeholder {
	background: #101014 !important;
	opacity: 0.9;
}
img.woocommerce-placeholder {
	filter: invert(1) hue-rotate(180deg) brightness(0.85) !important;
}

/* ------------------------------------------------------------
   10. Logo: never paint a plate behind it
   ------------------------------------------------------------ */
.store-site-logo,
.store-site-logo a,
.store-site-logo img,
.custom-logo-link,
.custom-logo,
.store-footer-logo,
.store-footer-logo a,
.store-footer-logo img {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* ------------------------------------------------------------
   11. Product tabs bar (wc-tabs) — was a white/lavender strip
   ------------------------------------------------------------ */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	box-shadow: none !important;
}

/* Top accent stripe: purple -> brand red */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper::before {
	background: linear-gradient(
		90deg,
		var(--store-red-soft),
		var(--store-red),
		#7a0009,
		var(--store-red)
	) !important;
}

/* The tab strip itself */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.wc-tabs,
ul.wc-tabs {
	background: #0d0d10 !important;
	border-bottom: 1px solid var(--store-border) !important;
}

/* Inactive tab chips */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
ul.wc-tabs li a {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #a3a3b2 !important;
	box-shadow: none !important;
}

/* Active / hovered tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
ul.wc-tabs li.active a {
	background: var(--store-red) !important;
	border-color: var(--store-red) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(229, 9, 20, 0.3) !important;
}

/* Panel body under the tabs */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel.entry-content {
	background: var(--store-surface) !important;
	border-top: 1px solid var(--store-border) !important;
	color: #d4d4de !important;
}
.woocommerce div.product .woocommerce-tabs .panel h1,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4,
.woocommerce div.product .woocommerce-tabs .panel strong,
.woocommerce div.product .woocommerce-tabs .panel b {
	color: #ffffff !important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel span,
.woocommerce div.product .woocommerce-tabs .panel td {
	color: #c2c2ce !important;
}
.woocommerce div.product .woocommerce-tabs .panel a {
	color: #ff6b74 !important;
}
.woocommerce div.product .woocommerce-tabs .panel a:hover {
	color: var(--store-red-soft) !important;
}
.woocommerce div.product .woocommerce-tabs .panel table,
.woocommerce div.product .woocommerce-tabs .panel th,
.woocommerce div.product .woocommerce-tabs .panel td {
	background: transparent !important;
	border-color: var(--store-border) !important;
}

/* ------------------------------------------------------------
   12. Header account / login button
   ------------------------------------------------------------ */
.store-account-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--store-surface-2);
	border: 1px solid var(--store-border);
	color: #ffffff !important;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.store-account-btn:hover {
	background: var(--store-red);
	border-color: var(--store-red);
	color: #ffffff !important;
}
.store-account-btn svg {
	flex-shrink: 0;
}
.store-account-btn.is-in {
	border-color: rgba(229, 9, 20, 0.45);
}
@media (max-width: 600px) {
	.store-account-btn__label {
		display: none;
	}
	.store-account-btn {
		padding: 9px;
		border-radius: 12px;
	}
}

/* ------------------------------------------------------------
   13. File input on dark (was a white bar)
   ------------------------------------------------------------ */
.asr-wc-form input[type="file"],
input[type="file"] {
	background: var(--store-surface-2) !important;
	border: 1px dashed var(--store-border) !important;
	border-radius: 10px !important;
	color: #a3a3b2 !important;
	padding: 12px !important;
	cursor: pointer;
}
.asr-wc-form input[type="file"]::file-selector-button,
input[type="file"]::file-selector-button {
	background: var(--store-red);
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	margin-inline-end: 12px;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
.asr-wc-form input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:hover {
	background: var(--store-red-soft);
}
/* WebKit fallback */
.asr-wc-form input[type="file"]::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button {
	background: var(--store-red);
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	margin-inline-end: 12px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ------------------------------------------------------------
   14. Submit progress state
   ------------------------------------------------------------ */
.asr-wc-btn.is-loading,
.asr-wc-btn:disabled {
	opacity: 0.75;
	cursor: progress;
	pointer-events: none;
}
.asr-wc-sending {
	margin: 10px 0 0;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ff8a8a !important;
}
.asr-wc-sending[hidden] {
	display: none !important;
}
.asr-wc-sending::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline-end: 8px;
	vertical-align: -2px;
	border: 2px solid rgba(229, 9, 20, 0.3);
	border-top-color: var(--store-red);
	border-radius: 50%;
	animation: asr-wc-spin 0.7s linear infinite;
}
@keyframes asr-wc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Optional-field hint */
.asr-wc-form label span small {
	font-weight: 400;
	color: #8a8a99;
	font-size: 0.8rem;
}

/* ------------------------------------------------------------
   15. Account button — match the search toggle's height/rhythm
   ------------------------------------------------------------ */
.store-header-right-side {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.store-account-btn {
	height: 36px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 0.82rem;
	line-height: 1;
	gap: 6px;
}
.store-account-btn svg {
	width: 16px;
	height: 16px;
}
.store-account-btn.is-in {
	border-color: var(--store-border);
}
.store-account-btn.is-in:hover {
	border-color: var(--store-red);
}
@media (max-width: 700px) {
	.store-account-btn {
		width: 36px;
		padding: 0;
		justify-content: center;
	}
	.store-account-btn__label {
		display: none;
	}
}

/* ------------------------------------------------------------
   16. My account page
   ------------------------------------------------------------ */
.woocommerce-account .woocommerce {
	max-width: 1100px;
	margin: 0 auto;
	padding: 26px 18px 60px;
	display: block;
}
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title {
	text-align: center;
	color: #ffffff !important;
	font-size: 1.7rem;
	margin-bottom: 26px;
}

/* Layout: nav beside content */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 240px !important;
	float: none !important;
	margin: 0 0 20px !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
@media (min-width: 860px) {
	.woocommerce-account .woocommerce::after {
		content: "";
		display: table;
		clear: both;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: inline-start !important;
		margin-inline-end: 24px !important;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		overflow: hidden;
	}
}

/* Nav list as cards, no bullets */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li::marker,
.woocommerce-account .woocommerce-MyAccount-navigation ul li::before {
	content: none !important;
	display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	color: #d4d4de !important;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	border-color: var(--store-red) !important;
	color: #ffffff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--store-red) !important;
	border-color: var(--store-red) !important;
	color: #ffffff !important;
}

/* Content panel */
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 14px !important;
	padding: 22px !important;
	color: #c2c2ce !important;
	line-height: 1.9;
}
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li,
.woocommerce-account .woocommerce-MyAccount-content td {
	color: #c2c2ce !important;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content strong,
.woocommerce-account .woocommerce-MyAccount-content legend {
	color: #ffffff !important;
}
.woocommerce-account .woocommerce-MyAccount-content a {
	color: #ff6b74 !important;
	text-decoration: none;
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
	color: var(--store-red-soft) !important;
	text-decoration: underline;
}
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	background: var(--store-red) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 11px 22px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* Orders table */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	background: transparent !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 12px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	width: 100%;
}
.woocommerce-account table.shop_table thead th {
	background: var(--store-surface-2) !important;
	color: #ffffff !important;
	border: 0 !important;
	padding: 12px !important;
	font-size: 0.85rem;
}
.woocommerce-account table.shop_table tbody td {
	background: transparent !important;
	border-top: 1px solid var(--store-border) !important;
	padding: 12px !important;
	color: #c2c2ce !important;
}

/* Account forms */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"] {
	background: var(--store-surface-2) !important;
	border: 1px solid var(--store-border) !important;
	color: #ffffff !important;
	border-radius: 9px !important;
	padding: 11px 12px !important;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content label {
	color: #d4d4de !important;
	font-weight: 600;
}
.woocommerce-account fieldset {
	border: 1px solid var(--store-border) !important;
	border-radius: 12px;
	padding: 16px;
	margin-top: 18px;
}

/* Login / register form when logged out */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: var(--store-surface) !important;
	border: 1px solid var(--store-border) !important;
	border-radius: 14px !important;
	color: #c2c2ce !important;
}
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
	color: #d4d4de !important;
}