/* ═══════════════════════════════════════════════
   Ztoona - Global Site CSS
   Hides Astra theme chrome, injects consistent
   nav and base typography across all pages.
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

/* ── Base ── */
body {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    direction: rtl !important;
    background: #ffffff !important;
}

/* ── Hide Astra header, footer, sidebar ── */
.site-header,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header,
#ast-fixed-header,
.ast-desktop-header,
.ast-mobile-header-wrap,
.site-footer,
.ast-site-footer-wrap,
footer.site-footer,
.ast-footer-copyright,
.widget-area,
aside.secondary,
#secondary,
.ast-breadcrumbs-wrapper,
.woocommerce-breadcrumb {
    display: none !important;
}

/* ── Remove Astra body padding from header ── */
body,
body.ast-header-break-point,
.ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ── Main content - remove Astra's container constraints ── */
.ast-container,
.site-content,
#content,
.content-area,
#primary {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}
.ast-page-builder-template .site-content {
    padding: 0 !important;
}

/* ── Custom Global Nav ── */
.zpb-gnav {
    padding: 14px 28px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 999;
    font-family: 'Cairo', Tahoma, sans-serif;
    direction: rtl;
}

.zpb-gnav-logo {
    font-size: 20px;
    font-weight: 900;
    color: #D85A30;
    text-decoration: none;
}

.zpb-gnav-r {
    display: flex;
    align-items: center;
    gap: 16px;
}

.zpb-gnav-r a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    font-family: 'Cairo', Tahoma, sans-serif;
}

.zpb-gnav-r a:hover {
    color: #D85A30;
}

.zpb-gnav-cart {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.zpb-gnav-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 17px;
    height: 17px;
    background: #D85A30;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', Tahoma, sans-serif;
}

/* ── WooCommerce page base styles ── */
.woocommerce,
.woocommerce-page {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    direction: rtl !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}

/* RTL fix for WooCommerce elements */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
    float: left !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: right;
}

/* ── WooCommerce buttons ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
    background: #D85A30 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'Cairo', Tahoma, sans-serif !important;
    font-weight: 700 !important;
    border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page a.button:hover {
    background: #b84820 !important;
    color: #fff !important;
}

/* ── Cart page ── */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    padding: 28px 24px 100px;
}

.woocommerce table.shop_table {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    border-radius: 8px;
    overflow: hidden;
}

/* ── Checkout ── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    font-weight: 700;
}

.woocommerce form .form-row label {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    font-weight: 600;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    direction: rtl;
    border-radius: 6px;
}

/* ── Notices ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    font-family: 'Cairo', Tahoma, sans-serif !important;
    direction: rtl;
    border-top-color: #D85A30 !important;
}

/* ── Page bottom padding for sticky bars ── */
body {
    padding-bottom: 0 !important;
}

/* ── Astra Scroll To Top Button ── */
.ast-scroll-to-top-right.ast-scroll-top-icon,
#ast-scroll-top,
.ast-scroll-top-icon {
    background: #D85A30 !important;
    border-color: #D85A30 !important;
    color: #fff !important;
    border-radius: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    bottom: 76px !important;
    box-shadow: 0 4px 16px rgba(216,90,48,0.35) !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
}
/* Only apply flex when Astra makes it visible */
.ast-scroll-top-icon[style*="display: block"],
.ast-scroll-top-icon[style*="display:block"] {
    display: flex !important;
}
.ast-scroll-to-top-right.ast-scroll-top-icon:hover,
#ast-scroll-top:hover,
.ast-scroll-top-icon:hover {
    background: #9e3d1a !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(216,90,48,0.45) !important;
}
/* Arrow icon - centered and smaller */
.ast-scroll-top-icon .ast-arrow-svg,
.ast-scroll-top-icon svg {
    width: 14px !important;
    height: 8px !important;
    display: block !important;
    margin: 0 auto !important;
    fill: #fff !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.ast-scroll-top-icon .ast-arrow-svg path,
.ast-scroll-top-icon svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Astra handles show/hide natively via display - no override needed */

/* ── Currency symbol: hide EGP, show ج ── */
.woocommerce-Price-currencySymbol {
    font-size: 0 !important;
}
.woocommerce-Price-currencySymbol::after {
    content: 'ج';
    font-size: 13px !important;
    font-family: 'Cairo', Tahoma, sans-serif;
}
/* hero card - slightly smaller */
.zh-hero-card-price .woocommerce-Price-currencySymbol::after,
.zh-hero-card-old .woocommerce-Price-currencySymbol::after {
    font-size: 11px !important;
}


/* ═══════════════════════════════════════════════
   zpb-nav - Shared Header (light, white)
   Injected on all pages except home/cart/checkout
═══════════════════════════════════════════════ */
.zpb-nav {
    padding: 14px 28px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 9990;
    font-family: 'Cairo', Tahoma, sans-serif;
    direction: rtl;
    gap: 14px;
}
.zpb-logo {
    font-size: 20px;
    font-weight: 900;
    color: #D85A30;
    text-decoration: none;
    flex-shrink: 0;
}
.zpb-logo:hover { opacity: .85; }
.zpb-nav-r {
    display: flex;
    align-items: center;
    gap: 16px;
}
.zpb-nav-r a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    font-family: 'Cairo', Tahoma, sans-serif;
    white-space: nowrap;
    transition: color .15s;
}
.zpb-nav-r a:hover { color: #D85A30; }
.zpb-cart-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color .15s;
    flex-shrink: 0;
}
.zpb-cart-btn:hover { border-color: #D85A30; }
.zpb-cart-count {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 17px;
    height: 17px;
    background: #D85A30;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', Tahoma, sans-serif;
}

/* Auth btn fixed in bar */
.zpb-nav-auth-area {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Fixed right: auth + burger */
.zpb-nav-fixed-r {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: auto;
    margin-left: 0;
}

/* Hamburger */
.zpb-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
}
.zpb-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #555;
    border-radius: 2px;
    transition: all .25s;
}
.zpb-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zpb-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.zpb-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer overlay */
#zpb-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9988;
    backdrop-filter: blur(2px);
}
#zpb-nav-overlay.open { display: block; }

/* Mobile drawer */
@media (max-width: 700px) {
    .zpb-nav { padding: 13px 16px; }
    .zpb-burger { display: flex; }
    .zpb-nav-r {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 250px;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 70px 22px 32px;
        gap: 0;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow: -4px 0 24px rgba(0,0,0,.1);
        z-index: 9989;
        overflow-y: auto;
        border-right: 1px solid #eee;
        justify-content: flex-start;
    }
    .zpb-nav-r.open { transform: translateX(0); }
    .zpb-nav-r a {
        font-size: 15px;
        color: #333;
        padding: 13px 0;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
        transition: color .15s, padding-right .15s;
    }
    .zpb-nav-r a:last-child { border: none; }
    .zpb-nav-r a:hover { color: #D85A30; padding-right: 6px; }
    .zpb-cart-btn {
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 13px 0 !important;
        justify-content: flex-start !important;
        gap: 10px;
        font-size: 15px;
        color: #333;
    }
    .zpb-cart-btn:hover { border-color: #f0f0f0 !important; color: #D85A30; }
    .zpb-cart-count { position: static; margin-right: 4px; }
    #zh-auth-nav-btn { border-bottom: 1px solid #f0f0f0; padding-bottom: 13px; width: 100%; }
    #zh-auth-nav-btn .zh-nav-auth-btn {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px;
        font-size: 15px;
        color: #333 !important;
    }
}

/* ═══════════════════════════════════════════════
   zpb-footer - Shared Footer (dark #1a1a1a)
   Same design across all custom templates + WP pages
═══════════════════════════════════════════════ */
.zpb-footer {
    background: #1a1a1a;
    padding: 36px 28px 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    font-family: 'Cairo', Tahoma, sans-serif;
    direction: rtl;
}
@media (max-width: 600px) { .zpb-footer { grid-template-columns: 1fr; } }

.zpb-footer-logo {
    font-size: 20px;
    font-weight: 900;
    color: #D85A30;
    margin-bottom: 8px;
}
.zpb-footer-desc {
    font-size: 12px;
    color: rgba(255,255,255,.32);
    line-height: 1.8;
}
.zpb-footer h4 {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.zpb-footer a {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.38);
    margin-bottom: 8px;
    text-decoration: none;
    transition: color .15s;
}
.zpb-footer a:hover { color: #D85A30; }

.zpb-foot-bottom {
    background: #1a1a1a;
    padding: 14px 28px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.07);
    font-family: 'Cairo', Tahoma, sans-serif;
    direction: rtl;
    flex-wrap: wrap;
    gap: 10px;
}
.zpb-foot-copy {
    font-size: 11px;
    color: rgba(255,255,255,.2);
}
.zpb-foot-socials {
    display: flex;
    gap: 8px;
}
.zpb-foot-soc {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255,255,255,.3);
    text-decoration: none;
    transition: all .15s;
    font-family: 'Cairo', Tahoma, sans-serif;
}
.zpb-foot-soc:hover { border-color: #D85A30; color: #D85A30; }


/* ── Shared Footer (zn-footer) ── */
.zn-footer{background:#141414;padding:36px 28px 0;margin-top:40px;font-family:'Cairo',Tahoma,sans-serif;direction:rtl}
.zn-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;padding-bottom:28px;max-width:1060px;margin:0 auto}
@media(max-width:640px){.zn-footer-grid{grid-template-columns:1fr}}
.zn-footer-logo{font-size:22px;font-weight:900;color:#D85A30;margin-bottom:10px}
.zn-footer-desc{font-size:12px;color:rgba(255,255,255,.3);line-height:1.8}
.zn-footer h4{font-size:12px;font-weight:700;color:#fff;margin-bottom:12px;margin-top:0}
.zn-footer a{display:block;font-size:12px;color:rgba(255,255,255,.35);margin-bottom:8px;text-decoration:none;transition:color .15s}
.zn-footer a:hover{color:#D85A30}
.zn-foot-bottom{max-width:1060px;margin:0 auto;border-top:1px solid rgba(255,255,255,.07);padding:16px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:#141414;font-family:'Cairo',Tahoma,sans-serif;direction:rtl}
.zn-foot-copy{font-size:11px;color:rgba(255,255,255,.2)}
.zn-foot-socials{display:flex;gap:8px}
.zn-soc{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.35);text-decoration:none;transition:all .15s}
.zn-soc:hover{border-color:#D85A30;color:#D85A30}