/**
 * Representative theme: dark (default) + light color modes.
 * Tokens keep mint accents; light mode flips surfaces and ink for contrast.
 */

:root,
html[data-webraan-theme="dark"] {
	--webraan-surface: var(--webraan-black, #0f0f0f);
	--webraan-surface-2: #191919;
	--webraan-ink: #ffffff;
	--webraan-ink-muted: #b7b7b7;
	--webraan-card: #ffffff08;
	--webraan-border: #ffffff1a;
	--webraan-input-bg: #191919;
	--webraan-ghost: #ffffff08;
}

html[data-webraan-theme="light"] {
	--webraan-surface: #f3f6f5;
	--webraan-surface-2: #ffffff;
	--webraan-ink: #12201c;
	--webraan-ink-muted: #4a5c56;
	--webraan-card: #ffffff;
	--webraan-border: #d7e0dc;
	--webraan-input-bg: #ffffff;
	--webraan-ghost: #12201c0d;
	--webraan-black: #f3f6f5;
	--blackColor: #f3f6f5 !important;
	--e-global-color-text: #12201c !important;
	color-scheme: light;
}

html[data-webraan-theme="dark"] {
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
   Toggle
   ------------------------------------------------------------------------- */

#site-header,
.elementor-location-header {
	position: relative;
}

.webraan-theme-toggle {
	position: absolute;
	top: 12px;
	left: 38%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 10px 4px 4px;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	border: 1px solid var(--webraan-border);
	border-radius: 999px;
	background: var(--webraan-surface-2);
	color: var(--webraan-ink);
	cursor: pointer;
	line-height: 1;
	flex: 0 0 auto;
	z-index: 40;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
	transition: background .2s, color .2s, border-color .2s;
}

.webraan-theme-toggle:hover,
.webraan-theme-toggle:focus-visible {
	border-color: var(--webraan-primary);
	outline: none;
}

.webraan-theme-toggle__track {
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: #2a2a2a;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px;
	box-sizing: border-box;
}

html[data-webraan-theme="light"] .webraan-theme-toggle__track {
	background: #dce8e4;
}

.webraan-theme-toggle__sun,
.webraan-theme-toggle__moon {
	width: 14px;
	height: 14px;
	display: inline-flex;
	z-index: 1;
}

.webraan-theme-toggle__sun {
	color: #f5c542;
}

.webraan-theme-toggle__moon {
	color: var(--webraan-primary);
}

.webraan-theme-toggle__knob {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform .2s ease;
}

html[data-webraan-theme="light"] .webraan-theme-toggle__knob {
	transform: translateX(-20px);
	background: #12201c;
}

.webraan-theme-toggle__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--webraan-ink);
}

@media (max-width: 782px) {
	.webraan-theme-toggle__label {
		display: none;
	}

	.webraan-theme-toggle {
		top: 10px;
		left: 10px;
		margin: 0;
		padding: 3px;
	}
}

/* -------------------------------------------------------------------------
   Light surfaces
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"],
html[data-webraan-theme="light"] body,
html[data-webraan-theme="light"] body.elementor-page,
html[data-webraan-theme="light"] #accountino-main,
html[data-webraan-theme="light"] .site-header,
html[data-webraan-theme="light"] .site-footer,
html[data-webraan-theme="light"] #site-header,
html[data-webraan-theme="light"] #site-footer,
html[data-webraan-theme="light"] .elementor-location-header,
html[data-webraan-theme="light"] .elementor-location-footer,
html[data-webraan-theme="light"] .elementor-kit-content {
	background-color: var(--webraan-surface) !important;
	background-image: none !important;
	color: var(--webraan-ink);
}

html[data-webraan-theme="light"] .e-con,
html[data-webraan-theme="light"] .elementor-section,
html[data-webraan-theme="light"] .elementor-element.e-flex {
	--background-color: var(--webraan-surface) !important;
	--background-overlay: transparent;
}

html[data-webraan-theme="light"] .e-con.e-flex,
html[data-webraan-theme="light"] .elementor-section,
html[data-webraan-theme="light"] .elementor-top-section,
html[data-webraan-theme="light"] .elementor-inner-section {
	background-color: var(--webraan-surface) !important;
}

/* -------------------------------------------------------------------------
   Light text — skip filled buttons and mint accents
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] h1,
html[data-webraan-theme="light"] h2,
html[data-webraan-theme="light"] h3,
html[data-webraan-theme="light"] h4,
html[data-webraan-theme="light"] h5,
html[data-webraan-theme="light"] h6,
html[data-webraan-theme="light"] p,
html[data-webraan-theme="light"] li,
html[data-webraan-theme="light"] label,
html[data-webraan-theme="light"] td,
html[data-webraan-theme="light"] th,
html[data-webraan-theme="light"] .elementor-heading-title,
html[data-webraan-theme="light"] .elementor-icon-list-text,
html[data-webraan-theme="light"] .elementor-icon-list-item,
html[data-webraan-theme="light"] .elementor-text-editor,
html[data-webraan-theme="light"] .elementor-widget-text-editor,
html[data-webraan-theme="light"] .accountino-custom-heading__title1,
html[data-webraan-theme="light"] .accountino-dual-heading__title,
html[data-webraan-theme="light"] .accountino-dual-heading__title1,
html[data-webraan-theme="light"] .accountino-support-widget,
html[data-webraan-theme="light"] .accountino-support-widget__text,
html[data-webraan-theme="light"] .woo-wallet-menu-contents,
html[data-webraan-theme="light"] .accountino-dashboard-navigation a,
html[data-webraan-theme="light"] .breadcrumb,
html[data-webraan-theme="light"] .woocommerce,
html[data-webraan-theme="light"] .woocommerce-Price-amount,
html[data-webraan-theme="light"] .product_title,
html[data-webraan-theme="light"] .accountino-single-meta__text,
html[data-webraan-theme="light"] .accountino-footer,
html[data-webraan-theme="light"] .accountino-form .field-column label {
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .elementor-nav-menu a,
html[data-webraan-theme="light"] .elementor-nav-menu--main .elementor-item,
html[data-webraan-theme="light"] .elementor-nav-menu--dropdown a {
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .elementor-nav-menu a:hover,
html[data-webraan-theme="light"] .elementor-item:hover,
html[data-webraan-theme="light"] .elementor-item.elementor-item-active,
html[data-webraan-theme="light"] .accountino-dual-heading__title1 span,
html[data-webraan-theme="light"] .accountino-custom-heading__title2,
html[data-webraan-theme="light"] .accountino-support-widget__text__tel_number,
html[data-webraan-theme="light"] .woocommerce-Price-amount,
html[data-webraan-theme="light"] span.price {
	color: var(--webraan-primary-deep, #094e3d) !important;
}

html[data-webraan-theme="light"] .elementor-icon-list-icon i,
html[data-webraan-theme="light"] .elementor-icon,
html[data-webraan-theme="light"] .elementor-search-form__icon,
html[data-webraan-theme="light"] .woo-wallet-icon-wallet {
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .accountino-ink-muted,
html[data-webraan-theme="light"] .elementor-widget-text-editor p,
html[data-webraan-theme="light"] .accountino-customer-review,
html[data-webraan-theme="light"] .accountino-price-plans-items-top-text,
html[data-webraan-theme="light"] .accountino-price-plans-items li {
	color: var(--webraan-ink-muted) !important;
}

html[data-webraan-theme="light"] .accountino-price-plans-items-top-text__title,
html[data-webraan-theme="light"] .accountino-customer-review .elementor-heading-title {
	color: var(--webraan-ink) !important;
}

/* -------------------------------------------------------------------------
   Buttons — mint fill keeps dark ink; outline/ghost stay readable
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] .accountino-btn {
	background-color: var(--webraan-ghost) !important;
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .accountino-btn:hover,
html[data-webraan-theme="light"] .accountino-btn:active,
html[data-webraan-theme="light"] .accountino-btn.active,
html[data-webraan-theme="light"] .accountino-fill-btn,
html[data-webraan-theme="light"] .accountino-outline-btn:hover,
html[data-webraan-theme="light"] .accountino-outline-btn:active,
html[data-webraan-theme="light"] .accountino-form button,
html[data-webraan-theme="light"] .accountino-form input[type="submit"],
html[data-webraan-theme="light"] .elementor-button,
html[data-webraan-theme="light"] .hatchery-button,
html[data-webraan-theme="light"] body.woocommerce .button,
html[data-webraan-theme="light"] body.woocommerce-page .button,
html[data-webraan-theme="light"] body .accountino-digits .digits-form_button {
	background-color: var(--webraan-primary) !important;
	color: var(--webraan-on-primary) !important;
	border-color: var(--webraan-primary) !important;
}

html[data-webraan-theme="light"] .accountino-outline-btn,
html[data-webraan-theme="light"] .elementor-button[class*="outline"] {
	background-color: transparent !important;
	color: var(--webraan-ink) !important;
	border: 1px solid var(--webraan-primary) !important;
}

html[data-webraan-theme="light"] .accountino-form button.dark-btn {
	background-color: var(--webraan-ghost) !important;
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .accountino-fill-btn:hover,
html[data-webraan-theme="light"] .elementor-button:hover,
html[data-webraan-theme="light"] body.woocommerce .button:hover {
	opacity: 0.88;
	color: var(--webraan-on-primary) !important;
}

/* -------------------------------------------------------------------------
   Forms / inputs
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] .accountino-form input,
html[data-webraan-theme="light"] .accountino-form textarea,
html[data-webraan-theme="light"] .accountino-form select,
html[data-webraan-theme="light"] .accountino-form .select2-selection,
html[data-webraan-theme="light"] .elementor-search-form__input,
html[data-webraan-theme="light"] .elementor-field-textual,
html[data-webraan-theme="light"] input[type="text"],
html[data-webraan-theme="light"] input[type="email"],
html[data-webraan-theme="light"] input[type="search"],
html[data-webraan-theme="light"] input[type="tel"],
html[data-webraan-theme="light"] input[type="password"],
html[data-webraan-theme="light"] textarea {
	background: var(--webraan-input-bg) !important;
	color: var(--webraan-ink) !important;
	border: 1px solid var(--webraan-border) !important;
}

html[data-webraan-theme="light"] .elementor-search-form__input::placeholder,
html[data-webraan-theme="light"] input::placeholder,
html[data-webraan-theme="light"] textarea::placeholder {
	color: var(--webraan-ink-muted) !important;
	opacity: 1;
}

html[data-webraan-theme="light"] .select2-container .select2-selection--single .select2-selection__arrow b {
	filter: invert(1);
}

/* -------------------------------------------------------------------------
   Cards, tables, menus
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] .accountino-price-plans-items,
html[data-webraan-theme="light"] .accountino-dt-content,
html[data-webraan-theme="light"] .accountino-cart-page-items,
html[data-webraan-theme="light"] .accountino-table,
html[data-webraan-theme="light"] .accountino-woo-archive-sidebar,
html[data-webraan-theme="light"] .accountino-archive-sidebar,
html[data-webraan-theme="light"] .elementor-nav-menu--dropdown,
html[data-webraan-theme="light"] .elementor-nav-menu--dropdown .elementor-nav-menu,
html[data-webraan-theme="light"] .select2-dropdown {
	background: var(--webraan-surface-2) !important;
	color: var(--webraan-ink) !important;
	border-color: var(--webraan-border) !important;
	box-shadow: 0 8px 28px rgba(18, 32, 28, 0.06);
}

html[data-webraan-theme="light"] .accountino-table thead tr {
	color: var(--webraan-on-primary) !important;
}

html[data-webraan-theme="light"] .accountino-table td,
html[data-webraan-theme="light"] .accountino-table th,
html[data-webraan-theme="light"] .woocommerce table.shop_table th,
html[data-webraan-theme="light"] .woocommerce table.shop_table td {
	color: var(--webraan-ink) !important;
	border-color: var(--webraan-border) !important;
}

html[data-webraan-theme="light"] .accountino-woo-ordering .accountino-btn {
	background-color: var(--webraan-ghost) !important;
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .accountino-woo-ordering .accountino-btn.active {
	background-color: var(--webraan-primary) !important;
	color: var(--webraan-on-primary) !important;
}

/* -------------------------------------------------------------------------
   Header / footer chrome
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] #site-header .elementor-heading-title,
html[data-webraan-theme="light"] #site-header .elementor-item,
html[data-webraan-theme="light"] .elementor-location-header .elementor-item,
html[data-webraan-theme="light"] #site-header a,
html[data-webraan-theme="light"] .elementor-location-header a,
html[data-webraan-theme="light"] #site-footer a,
html[data-webraan-theme="light"] .elementor-location-footer a,
html[data-webraan-theme="light"] .accountino-footer a {
	color: var(--webraan-ink);
}

html[data-webraan-theme="light"] #site-header a:hover,
html[data-webraan-theme="light"] #site-footer a:hover,
html[data-webraan-theme="light"] .accountino-footer a:hover,
html[data-webraan-theme="light"] .accountino-footer a.elementor-item-active {
	color: var(--webraan-primary-deep, #094e3d) !important;
}

html[data-webraan-theme="light"] .elementor-menu-toggle {
	color: var(--webraan-ink) !important;
	background: var(--webraan-ghost);
}

/* -------------------------------------------------------------------------
   Particles: light mode should not wash out text
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] .accountino-particle-widget__overlay {
	mix-blend-mode: multiply !important;
	opacity: 0.35 !important;
	filter: blur(72px) !important;
}

html[data-webraan-theme="light"] .accountino-particle-widget__shape {
	opacity: 0.28;
}

html[data-webraan-theme="light"] img[src*="Ellipse" i],
html[data-webraan-theme="light"] img[src*="Rectangle-30" i],
html[data-webraan-theme="light"] img[src*="Rectangle-31" i] {
	opacity: 0.28 !important;
}

/* -------------------------------------------------------------------------
   Inline Elementor whites / blacks
   ------------------------------------------------------------------------- */

html[data-webraan-theme="light"] [style*="color:#fff" i],
html[data-webraan-theme="light"] [style*="color: #fff" i],
html[data-webraan-theme="light"] [style*="color:#ffffff" i],
html[data-webraan-theme="light"] [style*="color:rgb(255, 255, 255)" i] {
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .accountino-fill-btn[style],
html[data-webraan-theme="light"] .elementor-button[style],
html[data-webraan-theme="light"] .hatchery-button[style] {
	color: var(--webraan-on-primary) !important;
}

html[data-webraan-theme="light"] [style*="background-color:#0f0f0f" i],
html[data-webraan-theme="light"] [style*="background-color:#000" i],
html[data-webraan-theme="light"] [style*="background-color:#191919" i],
html[data-webraan-theme="light"] [style*="background:#0f0f0f" i],
html[data-webraan-theme="light"] [style*="background:#000" i] {
	background-color: var(--webraan-surface) !important;
}

/* Beat Elementor post CSS (.elementor-2 .elementor-element.X .widget) */
html[data-webraan-theme="light"] .elementor-element .accountino-heading-with-image-title,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-heading__title,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-heading__title1,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-heading__title2,
html[data-webraan-theme="light"] .elementor-element .accountino-woo-cat-box__text,
html[data-webraan-theme="light"] .elementor-element .product-box .product-box-main__title,
html[data-webraan-theme="light"] .elementor-element .product-box .price,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-variations-item__title,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-product-price-title_box__persian,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-top-text__product_name,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-main__price,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-main__details li,
html[data-webraan-theme="light"] .elementor-element .ordering-ways-item-content__title,
html[data-webraan-theme="light"] .elementor-element .accountino-blog-box-main__title,
html[data-webraan-theme="light"] .elementor-element .accountino-blog-box-main-details__description,
html[data-webraan-theme="light"] .elementor-element .accountino-cr-items-left__description,
html[data-webraan-theme="light"] .elementor-element .elementor-heading-title,
html[data-webraan-theme="light"] .elementor-element.elementor-widget-text-editor {
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .elementor-element .elementor-button,
html[data-webraan-theme="light"] .elementor-element .product-box__button,
html[data-webraan-theme="light"] .elementor-element .accountino-blog-box-main__button,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-main__button a {
	background-color: var(--webraan-ghost) !important;
	color: var(--webraan-ink) !important;
	fill: var(--webraan-ink) !important;
	border: 1px solid var(--webraan-border) !important;
}

html[data-webraan-theme="light"] .elementor-element .elementor-button:hover,
html[data-webraan-theme="light"] .elementor-element .elementor-button:focus,
html[data-webraan-theme="light"] .elementor-element .product-box__button:hover,
html[data-webraan-theme="light"] .elementor-element .accountino-blog-box-main__button:hover,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-main__button a:hover {
	background-color: var(--webraan-primary) !important;
	color: var(--webraan-on-primary) !important;
	fill: var(--webraan-on-primary) !important;
	border-color: var(--webraan-primary) !important;
}

html[data-webraan-theme="light"] .elementor-element .accountino-woo-cat-box,
html[data-webraan-theme="light"] .elementor-element .accountino-custom-variations-item,
html[data-webraan-theme="light"] .elementor-element .accountino-ordering-ways-item,
html[data-webraan-theme="light"] .elementor-element .accountino-price-plans-items-main,
html[data-webraan-theme="light"] .elementor-element .product-box-main,
html[data-webraan-theme="light"] .elementor-element .accountino-blog-box-main,
html[data-webraan-theme="light"] .elementor-element .accountino-cr-items-left {
	background-color: var(--webraan-surface-2) !important;
	border: 1px solid var(--webraan-border);
	color: var(--webraan-ink) !important;
}

html[data-webraan-theme="light"] .elementor-element .accountino-particle-widget__overlay[style],
html[data-webraan-theme="light"] .elementor-element .accountino-particle-widget__overlay {
	background-image: none !important;
}
