/*
Theme Name: Flatsome Child
Description: Child theme for Flatsome (z4eg.com). Design is controlled from Theme Options and UX Builder.
Author: UX Themes
Template: flatsome
Version: 3.3.1
Text Domain: flatsome-child
*/

/* =====================================================================
   z4eg.com child theme CSS (cleaned up 2026-10-11)
   ---------------------------------------------------------------------
   Colours, fonts, buttons, header / top bar / footer sizes and colours are
   set in Appearance > Customize (Flatsome Theme Options). The home page,
   FAQ, policy pages, footer columns, product-page note and 404 page are
   native UX Builder elements / UX Blocks. Nothing below overrides those
   settings. Only small, necessary rules are kept here:
     1. Product description design (.z4k-desc) - used inside product
        descriptions, works in Arabic (RTL) and English (LTR).
     2. Product page: share buttons under the tabs, tighter gap.
     3. RTL / Arabic fixes.
     4. Small usability fixes.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Product description design (.z4k-desc)
   Wrap a description in <div class="z4k-desc"> ... </div>; optional
   accent class: z4k-green, z4k-blue, z4k-red, z4k-orange, z4k-purple,
   z4k-teal, z4k-netflix, z4k-ms. Uses logical properties so it mirrors
   correctly in Arabic.
   --------------------------------------------------------------------- */
.z4k-desc {
    background: #f7f7f8;
    color: #333;
    padding: 28px 24px;
    border: 1px solid #e2e2e5;
    border-radius: 12px;
    font-family: inherit;
    line-height: 1.6;
    max-width: 760px;
}
.z4k-desc h2 {
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 700;
    border-inline-start: 4px solid var(--z4k-accent, #ff0000);
    padding-inline-start: 12px;
    margin: 28px 0 14px;
}
.z4k-desc h2:first-child {
    margin-top: 0;
}
.z4k-desc h3 {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
    margin: 18px 0 8px;
}
.z4k-desc ul {
    padding-inline-start: 0;
    list-style: none;
    margin: 0 0 20px;
}
.z4k-desc ul li {
    padding: 7px 0;
    border-bottom: 1px solid #e8e8eb;
    font-size: 14px;
    color: #555;
}
.z4k-desc ul li:last-child {
    border-bottom: none;
}
.z4k-desc ul li strong {
    color: #1d1d1f;
}
.z4k-desc p {
    color: #555;
    font-size: 14px;
    margin: 0 0 14px;
}
.z4k-desc a {
    color: var(--z4k-accent, #d93025);
    text-decoration: underline;
}
.z4k-desc a:hover {
    color: var(--z4k-accent-dark, #b71c1c);
}
.z4k-desc hr {
    border: none;
    border-top: 1px solid #e2e2e5;
    margin: 24px 0;
}

/* Info box */
.z4k-desc .z4k-info {
    background: #eeeef0;
    border: 1px solid #dddde0;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 13.5px;
    color: #666;
    line-height: 1.7;
}
.z4k-desc .z4k-info strong {
    color: #1d1d1f;
}

/* Warning box */
.z4k-desc .z4k-warn {
    background: rgba(255,0,0,0.04);
    border: 1px solid rgba(255,0,0,0.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 13.5px;
    color: #c42b1c;
    line-height: 1.7;
}
.z4k-desc .z4k-warn strong {
    color: #a11c0f;
}

/* Table */
.z4k-desc table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 20px;
    font-size: 13px;
}
.z4k-desc thead tr {
    background: #eeeef0;
}
.z4k-desc th {
    padding: 10px 12px;
    text-align: start;
    color: #1d1d1f;
    font-weight: 600;
    border-bottom: 2px solid var(--z4k-accent, #ff0000);
}
.z4k-desc td {
    padding: 10px 12px;
    border-bottom: 1px solid #e8e8eb;
    color: #555;
}
.z4k-desc tbody tr:hover {
    background: #f0f0f2;
}

/* Feature grid */
.z4k-desc .z4k-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 14px 0 20px;
}
.z4k-desc .z4k-grid-item {
    background: #fff;
    border: 1px solid #e2e2e5;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.z4k-desc .z4k-grid-item h3 {
    color: #1d1d1f;
    font-size: 14px;
    margin: 0 0 6px;
}
.z4k-desc .z4k-grid-item p {
    color: #888;
    font-size: 12.5px;
    margin: 0;
}

/* CTA button */
.z4k-desc .z4k-cta {
    text-align: center;
    margin: 20px 0;
}
.z4k-desc .z4k-cta a {
    display: inline-block;
    background: linear-gradient(135deg, var(--z4k-accent, #ff0000), var(--z4k-accent-dark, #cc0000));
    color: #fff !important;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.z4k-desc .z4k-cta a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* Accent color variants */
.z4k-desc.z4k-green  { --z4k-accent: #1DB954; --z4k-accent-dark: #169c46; }
.z4k-desc.z4k-blue   { --z4k-accent: #4687ff; --z4k-accent-dark: #2b5aad; }
.z4k-desc.z4k-red    { --z4k-accent: #ff0000; --z4k-accent-dark: #cc0000; }
.z4k-desc.z4k-orange  { --z4k-accent: #e25813; --z4k-accent-dark: #c04a0e; }
.z4k-desc.z4k-purple { --z4k-accent: #7c3aed; --z4k-accent-dark: #6025c9; }
.z4k-desc.z4k-teal   { --z4k-accent: #00b4d8; --z4k-accent-dark: #0096b7; }
.z4k-desc.z4k-netflix { --z4k-accent: #e50914; --z4k-accent-dark: #b20710; }
.z4k-desc.z4k-ms     { --z4k-accent: #0078d4; --z4k-accent-dark: #005ea2; }

/* Video embed */
.z4k-desc .z4k-video {
    text-align: center;
    margin: 20px 0;
}
.z4k-desc .z4k-video iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border: none;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 600px) {
    .z4k-desc {
        padding: 20px 16px;
    }
    .z4k-desc .z4k-grid {
        grid-template-columns: 1fr;
    }
    .z4k-desc table {
        font-size: 12px;
    }
    .z4k-desc th, .z4k-desc td {
        padding: 8px;
    }
}



/* ---------------------------------------------------------------------
   2. Product page
   --------------------------------------------------------------------- */
/* Share buttons are moved below the description tabs (functions.php). */
.z4k-share-below-tabs {
	padding: 15px 0 10px;
	border-top: 1px solid #ececec;
}
.z4k-share-below-tabs .share-icons {
	margin-bottom: 0;
}
/* Smaller gap between the product summary and the description tabs. */
.product-main {
	padding-bottom: 0 !important;
}
.product-footer .woocommerce-tabs {
	padding-top: 15px;
}


/* ---------------------------------------------------------------------
   3. RTL / Arabic fixes
   --------------------------------------------------------------------- */
/* Phone numbers and other Latin snippets keep their order inside Arabic text. */
[dir="ltr"] {
	unicode-bidi: isolate;
}


/* ---------------------------------------------------------------------
   4. Small usability fixes
   --------------------------------------------------------------------- */
/* Mobile menu drawer: fully opaque so page text never shows through it. */
.off-canvas-left:not(.dark) .mfp-content,
.off-canvas-right:not(.dark) .mfp-content {
	background-color: #fff;
}
/* Checkout payment methods: long titles wrap aligned with the title, not under the radio. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: inline-block;
	max-width: calc(100% - 32px);
	vertical-align: top;
}


/* ---------------------------------------------------------------------
   5. Storefront polish (2026-10-11)
   --------------------------------------------------------------------- */
/* WhatsApp chat button (Orders Manager): sits on the LEFT (set in Orders
   Manager > WhatsApp), stays under Flatsome's off-canvas menu / lightboxes
   (.mfp-bg = 1042) and is hidden on cart, checkout and order-pay pages so it
   never covers totals or the Place order button. Still shown on the
   "order received" page (customers send payment proof on WhatsApp). */
html body #z4k-wa {
	z-index: 1040;
}
body.woocommerce-cart #z4k-wa,
body.woocommerce-checkout:not(.woocommerce-order-received) #z4k-wa {
	display: none;
}

/* Checkout errors: keep the red box clear of the sticky header and wrap
   long lines inside the box. */
.woocommerce-checkout .woocommerce-NoticeGroup {
	padding-top: 14px;
	scroll-margin-top: 90px;
}
.woocommerce-NoticeGroup .woocommerce-error .message-container,
.woocommerce-checkout .woocommerce-error li {
	overflow-wrap: anywhere;
	white-space: normal;
}
.woocommerce-NoticeGroup .woocommerce-error .message-container {
	padding-left: 14px;
	padding-right: 14px;
}

/* "خصم" sale badge: text always fits inside the circle. */
.badge-inner .onsale {
	white-space: nowrap;
	font-size: .9em;
	line-height: 1;
}

/* Delivery-areas cards on phones: inner padding (Flatsome's table rules
   remove the side padding of the first/last cell). */
@media (max-width: 599px) {
	.z4eg-da-areas .z4eg-da-areas__table th,
	.z4eg-da-areas .z4eg-da-areas__table td {
		padding: 10px 14px;
	}
}

/* Phone numbers never break in the middle. */
a span[dir="ltr"],
a[href^="tel:"] {
	white-space: nowrap;
}

/* Touch targets of at least 40px on phones and tablets. */
@media (max-width: 849px) {
	.social-icons a.icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}
	.quantity .ux-quantity__button {
		min-width: 40px;
	}
	.header .nav-icon > a,
	.header .header-cart-link {
		min-width: 40px;
		justify-content: center;
	}
}