/* ==========================================================================
   Y99 site-wide header & footer rebrand — mint #39ff88 on near-black #050505.
   Non-destructive overrides on the existing Printo/trx_addons markup.
   Scope: header wrapper `.top_panel`, footer template `.elementor-16742`.
   ========================================================================== */

:root{ --y99a:#39ff88; --y99a2:#6dffab; --y99dk:#050505; --y99ink:#f7f6f1; --y99mut:#aab3ad; --y99line:#26312b; }

/* ---------------- HOMEPAGE (page 22665): kill white theme wrappers behind the dark design ---------------- */
body.page-id-22665{ background-color:var(--y99dk) !important; overflow-x:hidden !important; }
.page-id-22665 .page_wrap,
.page-id-22665 .page_content_wrap,
.page-id-22665 .content_wrap_fullscreen,
.page-id-22665 .content_wrap,
.page-id-22665 .content,
.page-id-22665 article.post_item_single,
.page-id-22665 .post_content,
.page-id-22665 .entry-content{
	background-color:var(--y99dk) !important;
	padding-left:0 !important; padding-right:0 !important;
	max-width:100% !important; width:auto !important;
}
/* the design provides its own top spacing; remove theme content padding that showed as bands */
.page-id-22665 .content_wrap_fullscreen{ margin:0 !important; }

/* Headings inside the Arabic homepage were dark-on-dark: the Printo theme targets
   h1..h4 directly (element selector beats the inherited .y99h light colour), so the
   section titles / card titles disappeared. Force them back to the brand ink. */
.page-id-22665 .y99h h1,
.page-id-22665 .y99h h2,
.page-id-22665 .y99h h3,
.page-id-22665 .y99h h4,
.page-id-22665 .y99h .khead h2,
.page-id-22665 .y99h .card h3,
.page-id-22665 .y99h .step h4,
.page-id-22665 .y99h .foot h2{ color:var(--y99ink) !important; }
.page-id-22665 .y99h h1 .g{ color:var(--y99a) !important; }
/* keep the muted sub-lines / body copy legible too */
.page-id-22665 .y99h .sub,
.page-id-22665 .y99h .card p,
.page-id-22665 .y99h .card li,
.page-id-22665 .y99h .step p,
.page-id-22665 .y99h .khead p{ color:#c3ccc6 !important; }
.page-id-22665 .y99h .tag,
.page-id-22665 .y99h .stat b{ color:var(--y99a) !important; }

/* ---------------- HEADER ---------------- */
.top_panel,
.top_panel.top_panel_custom{ background-color:var(--y99dk) !important; }
/* neutralise any per-row background bars (white/colored) so the dark wrapper shows */
.top_panel .sc_layouts_row,
.top_panel .elementor-section:not(.elementor-section-stretched)>.elementor-background-overlay,
.top_panel .elementor-top-section{ background-color:transparent !important; }
/* sticky / fixed header keeps the dark brand */
.sc_layouts_row_fixed,
.top_panel.sticky_on,
.sc_layouts_row_fixed_on,
.top_panel_fixed .sc_layouts_row_fixed_on{ background-color:var(--y99dk) !important; box-shadow:0 6px 24px rgba(0,0,0,.5) !important; }
/* subtle brand hairline under the header */
.top_panel{ border-bottom:1px solid rgba(57,255,136,.16) !important; }

/* logo -> force to white (the header ships a dark logo PNG) */
.top_panel .logo_image,
.top_panel .sc_layouts_logo img{ filter:brightness(0) invert(1) !important; }

/* main menu links */
.top_panel .sc_layouts_menu_nav > li > a{ color:var(--y99ink) !important; }
.top_panel .sc_layouts_menu_nav > li > a > span{ color:inherit !important; }
.top_panel .sc_layouts_menu_nav > li > a:hover,
.top_panel .sc_layouts_menu_nav > li.current-menu-item > a,
.top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a,
.top_panel .sc_layouts_menu_nav > li.sfHover > a{ color:var(--y99a) !important; }
/* animated hover underline */
.top_panel .sc_layouts_menu_nav > li > a:before,
.top_panel .sc_layouts_menu_nav > li > a:after{ background-color:var(--y99a) !important; }

/* dropdown submenu */
.sc_layouts_menu_nav ul.sub-menu,
.sc_layouts_menu_popup ul.sc_layouts_menu_nav{ background-color:#0e0f0e !important; border:1px solid var(--y99line) !important; }
.sc_layouts_menu_nav ul.sub-menu li a{ color:var(--y99mut) !important; }
.sc_layouts_menu_nav ul.sub-menu li a:hover,
.sc_layouts_menu_nav ul.sub-menu li.current-menu-item > a{ color:var(--y99a) !important; background-color:rgba(57,255,136,.06) !important; }

/* header text bits: phone/email/title/free text */
.top_panel .sc_layouts_iconed_text,
.top_panel .sc_layouts_iconed_text a,
.top_panel .sc_layouts_title,
.top_panel .elementor-widget-text-editor,
.top_panel .elementor-widget-text-editor p{ color:var(--y99mut) !important; }
.top_panel .sc_layouts_iconed_text .sc_layouts_iconed_text_icon{ color:var(--y99a) !important; }

/* header icons: search, socials, burger */
.top_panel .search_wrap .search_icon,
.top_panel .sc_layouts_item .socials_wrap a,
.top_panel .social_item a,
.top_panel .search_submit:before{ color:var(--y99ink) !important; }
.top_panel .sc_layouts_item .socials_wrap a:hover,
.top_panel .social_item a:hover{ color:var(--y99a) !important; }
.top_panel .sc_layouts_menu_mobile_button_burger .sc_layouts_iconed_text_icon,
.top_panel .sc_layouts_menu_mobile_button_burger:before,
.top_panel .sc_layouts_menu_mobile_button_burger:after,
.top_panel .sc_layouts_menu_mobile_button_burger span{ background-color:var(--y99ink) !important; color:var(--y99ink) !important; }

/* page-title + breadcrumbs bar (inner pages: Shop/About/etc.) — was black-on-black, make it light */
.top_panel .elementor-widget-trx_sc_layouts_title,
.top_panel .sc_layouts_title,
.top_panel .sc_layouts_title_title,
.top_panel .sc_layouts_title_caption,
.top_panel .sc_layouts_title_title h1,
.top_panel .sc_layouts_title_title h2,
.top_panel .sc_layouts_title_breadcrumbs,
.top_panel .sc_layouts_title_breadcrumbs a,
.top_panel .breadcrumbs,
.top_panel .breadcrumbs a,
.top_panel .breadcrumbs .breadcrumbs_item{ color:var(--y99ink) !important; }
.top_panel .sc_layouts_title_breadcrumbs a:hover,
.top_panel .breadcrumbs a:hover{ color:var(--y99a) !important; }
.top_panel .breadcrumbs .breadcrumbs_delimiter,
.top_panel .breadcrumbs_item.current,
.top_panel .sc_layouts_title_breadcrumbs .breadcrumbs_item_current{ color:var(--y99mut) !important; }
/* the large page-title heading in the header bar is a trx_sc_title widget */
.top_panel .sc_title .sc_item_title,
.top_panel .sc_item_title_text,
.top_panel .sc_title_title,
.top_panel .sc_layouts_title .sc_item_title{ color:var(--y99ink) !important; opacity:1 !important; }

/* header CTA button -> green */
.top_panel .sc_button,
.top_panel .sc_button.sc_button_default{
	background:linear-gradient(90deg,var(--y99a),var(--y99a2)) !important;
	background-color:var(--y99a) !important;
	color:#04140b !important; border-color:transparent !important;
	box-shadow:0 8px 22px rgba(57,255,136,.28) !important;
}
.top_panel .sc_button:hover{ filter:brightness(1.06); color:#04140b !important; }

/* fullscreen mobile menu panel */
.menu_mobile,
.menu_mobile_inner{ background-color:var(--y99dk) !important; }
.menu_mobile .menu_mobile_nav_area a{ color:var(--y99ink) !important; }
.menu_mobile .menu_mobile_nav_area a:hover,
.menu_mobile .menu_mobile_nav_area li.current-menu-item > a{ color:var(--y99a) !important; }
.menu_mobile .menu_mobile_close:before,
.menu_mobile .menu_mobile_close:after{ background-color:var(--y99a) !important; }

/* ---------------- FOOTER ---------------- */
.elementor-16742,
.elementor-16742 .elementor-top-section,
.elementor-16742 .elementor-element-070611a:not(.elementor-motion-effects-element-type-background){
	background-color:var(--y99dk) !important;
}
.elementor-16742{ border-top:1px solid rgba(57,255,136,.18) !important; }
/* footer logo -> white */
.elementor-16742 .logo_image,
.elementor-16742 .sc_layouts_logo img{ filter:brightness(0) invert(1) !important; }
/* footer links + hover */
.elementor-16742 a:not(.sc_button):hover{ color:var(--y99a) !important; }
.elementor-16742 .sc_layouts_menu_nav > li > a:hover,
.elementor-16742 .menu-item a:hover{ color:var(--y99a) !important; }
/* footer social icons */
.elementor-16742 .socials_wrap a:hover,
.elementor-16742 .social_item a:hover{ color:var(--y99a) !important; }
/* footer accent widgets: titles underline / dividers */
.elementor-16742 .sc_item_title:after,
.elementor-16742 .elementor-widget-divider .elementor-divider-separator{ border-color:var(--y99a) !important; background-color:var(--y99a) !important; }
/* footer CTA button -> green */
.elementor-16742 .sc_button,
.elementor-16742 .elementor-button{
	background:linear-gradient(90deg,var(--y99a),var(--y99a2)) !important;
	color:#04140b !important; border-color:transparent !important;
}

/* ---- Homepage form click-through fix (2026-07-08) ----
   The hero section is `position:relative` (for its grid overlay + .wrap), while
   the content sections below it (including .formsec that holds the quote form)
   are `position:static`. Per CSS paint rules, a positioned sibling paints ABOVE
   non-positioned siblings, so the hero swallowed pointer events over the form —
   none of the input fields could be clicked/focused. Put every full-bleed
   section in the same positioning context so they paint in DOM order (later
   sections on top), keep the decorative grid overlay non-interactive, and lift
   the form section explicitly. */
.page-id-22665 .y99h .full{ position:relative !important; }
.page-id-22665 .y99h .hero:before{ pointer-events:none !important; }
.page-id-22665 .y99h .formsec{ z-index:2 !important; }