/* DEZISION SKIN — dark + indigo/rose site-wide override (Kokonut UI palette)
 * Activated via body.dz-skin (set by the plugin). Theme-agnostic.
 * Uses !important sparingly but enough to override modern block themes.
 */

body.dz-skin {
	--dz-bg:        #030303;
	--dz-bg-2:      #0a0a0a;
	--dz-surface:   #0f0f10;
	--dz-surface-2: #161618;
	--dz-ink:       #ffffff;
	--dz-ink-2:     #eeeeee;
	--dz-mute:      rgba(255, 255, 255, 0.6);
	--dz-mute-2:    rgba(255, 255, 255, 0.4);
	--dz-line:      rgba(255, 255, 255, 0.08);
	--dz-line-2:    rgba(255, 255, 255, 0.14);
	--dz-accent:    #a5b4fc;   /* indigo-300 — matches headline gradient */
	--dz-accent-2:  #818cf8;   /* indigo-400 */
	--dz-accent-3:  #fda4af;   /* rose-300 */
	--dz-accent-glow: rgba(165, 180, 252, 0.28);
}

/* ---------- base ---------- */
body.dz-skin {
	background: var(--dz-bg) !important;
	color: var(--dz-ink-2) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.dz-skin::-webkit-scrollbar         { width: 10px; height: 10px; }
body.dz-skin::-webkit-scrollbar-track   { background: var(--dz-bg); }
body.dz-skin::-webkit-scrollbar-thumb   { background: var(--dz-line-2); border-radius: 999px; }
body.dz-skin::-webkit-scrollbar-thumb:hover { background: var(--dz-accent); }

/* Selection colour */
body.dz-skin ::selection { background: var(--dz-accent); color: #0a0807; }

/* ---------- typography ---------- */
body.dz-skin h1, body.dz-skin h2, body.dz-skin h3,
body.dz-skin h4, body.dz-skin h5, body.dz-skin h6 {
	color: var(--dz-ink) !important;
	font-weight: 700 !important;
	letter-spacing: -0.022em;
	line-height: 1.18;
}
body.dz-skin h1 { font-size: clamp(28px, 4.5vw, 44px); }
body.dz-skin h2 { font-size: clamp(24px, 3.5vw, 32px); }
body.dz-skin h3 { font-size: clamp(20px, 2.5vw, 24px); }

body.dz-skin p, body.dz-skin li, body.dz-skin td, body.dz-skin th {
	color: var(--dz-ink-2);
}

body.dz-skin small, body.dz-skin .description, body.dz-skin figcaption {
	color: var(--dz-mute);
}

/* ---------- links ---------- */
body.dz-skin a:not(.dz):not(.dz *):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.dz-cta):not(.dz-run-btn):not(.dz-exit-block) {
	color: var(--dz-accent);
	text-decoration: underline;
	text-decoration-color: rgba(165, 180, 252, 0.35);
	text-underline-offset: 3px;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}
body.dz-skin a:hover:not(.dz):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.dz-cta):not(.dz-run-btn):not(.dz-exit-block) {
	color: var(--dz-accent-2);
	text-decoration-color: var(--dz-accent-2);
}

/* ---------- buttons ---------- */
body.dz-skin button:not(.dz-back):not(.dz-link):not(.dz *),
body.dz-skin .button,
body.dz-skin .wp-element-button,
body.dz-skin .wp-block-button__link,
body.dz-skin input[type="submit"],
body.dz-skin input[type="button"],
body.dz-skin input[type="reset"] {
	background: var(--dz-accent) !important;
	color: #0a0807 !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 13px 22px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -0.005em !important;
	cursor: pointer;
	box-shadow: 0 8px 24px -8px var(--dz-accent-glow);
	transition: background 160ms ease, transform 140ms ease, box-shadow 200ms ease;
	text-decoration: none !important;
	text-transform: none !important;
}
body.dz-skin button:not(.dz-back):not(.dz-link):not(.dz *):hover,
body.dz-skin .button:hover,
body.dz-skin .wp-element-button:hover,
body.dz-skin .wp-block-button__link:hover,
body.dz-skin input[type="submit"]:hover,
body.dz-skin input[type="button"]:hover {
	background: var(--dz-accent-2) !important;
	transform: translateY(-1px);
}
body.dz-skin button:active,
body.dz-skin .button:active,
body.dz-skin .wp-block-button__link:active { transform: scale(0.985); }

/* Outlined button variant */
body.dz-skin .is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--dz-accent) !important;
	border: 1px solid var(--dz-accent) !important;
	box-shadow: none;
}
body.dz-skin .is-style-outline .wp-block-button__link:hover {
	background: var(--dz-accent) !important;
	color: #0a0807 !important;
}

/* ---------- form inputs ---------- */
body.dz-skin input[type="text"],
body.dz-skin input[type="email"],
body.dz-skin input[type="password"],
body.dz-skin input[type="search"],
body.dz-skin input[type="tel"],
body.dz-skin input[type="url"],
body.dz-skin input[type="number"],
body.dz-skin textarea,
body.dz-skin select {
	background: var(--dz-surface) !important;
	color: var(--dz-ink) !important;
	border: 1px solid var(--dz-line-2) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.dz-skin input::placeholder,
body.dz-skin textarea::placeholder { color: var(--dz-mute-2); }
body.dz-skin input:focus,
body.dz-skin textarea:focus,
body.dz-skin select:focus {
	border-color: var(--dz-accent) !important;
	box-shadow: 0 0 0 3px var(--dz-accent-glow) !important;
}
body.dz-skin label { color: var(--dz-ink-2); }

/* ---------- containers / cards ---------- */
body.dz-skin .wp-block-group.has-background,
body.dz-skin .wp-block-cover {
	background-color: var(--dz-surface) !important;
}
body.dz-skin .wp-block-quote,
body.dz-skin blockquote {
	border-left: 3px solid var(--dz-accent) !important;
	color: var(--dz-ink-2) !important;
}

body.dz-skin hr,
body.dz-skin .wp-block-separator {
	border-color: var(--dz-line) !important;
	background: var(--dz-line) !important;
	color: var(--dz-line) !important;
}

body.dz-skin code, body.dz-skin pre {
	background: var(--dz-surface) !important;
	color: var(--dz-ink-2) !important;
	border: 1px solid var(--dz-line) !important;
	border-radius: 8px;
	padding: 2px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body.dz-skin pre { padding: 14px 16px; }

/* ---------- tables ---------- */
body.dz-skin table {
	border-collapse: collapse;
	width: 100%;
}
body.dz-skin table th,
body.dz-skin table td {
	border-bottom: 1px solid var(--dz-line) !important;
	padding: 12px 14px !important;
	color: var(--dz-ink-2) !important;
	background: transparent !important;
}
body.dz-skin table th {
	color: var(--dz-mute) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------- header / footer (theme-agnostic broad selectors) ---------- */
body.dz-skin .site-header,
body.dz-skin header.site-header,
body.dz-skin .wp-block-template-part header,
body.dz-skin .wp-block-template-part[data-type="header"],
body.dz-skin header.wp-block-template-part {
	background: var(--dz-bg-2) !important;
	border-bottom: 1px solid var(--dz-line) !important;
	color: var(--dz-ink) !important;
}

body.dz-skin .site-footer,
body.dz-skin footer.site-footer,
body.dz-skin .wp-block-template-part footer,
body.dz-skin .wp-block-template-part[data-type="footer"],
body.dz-skin footer.wp-block-template-part {
	background: var(--dz-bg-2) !important;
	border-top: 1px solid var(--dz-line) !important;
	color: var(--dz-mute) !important;
}

/* Site title / brand */
body.dz-skin .site-title,
body.dz-skin .wp-block-site-title,
body.dz-skin .wp-block-site-title a {
	color: var(--dz-ink) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
}

/* Navigation */
body.dz-skin .wp-block-navigation,
body.dz-skin .wp-block-navigation a,
body.dz-skin .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--dz-ink-2) !important;
	text-decoration: none !important;
}
body.dz-skin .wp-block-navigation a:hover,
body.dz-skin .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content {
	color: var(--dz-accent) !important;
}
body.dz-skin .wp-block-navigation__submenu-container {
	background: var(--dz-surface) !important;
	border: 1px solid var(--dz-line) !important;
}

/* ---------- WooCommerce overrides ---------- */
body.dz-skin .woocommerce,
body.dz-skin .woocommerce-page,
body.dz-skin .woocommerce ul.products li.product,
body.dz-skin .woocommerce-cart .cart_totals,
body.dz-skin .woocommerce-checkout #order_review,
body.dz-skin .woocommerce-checkout-payment,
body.dz-skin .woocommerce-account .woocommerce-MyAccount-content,
body.dz-skin .woocommerce-order-details,
body.dz-skin .woocommerce-customer-details {
	color: var(--dz-ink-2) !important;
}

/* Product cards */
body.dz-skin .woocommerce ul.products li.product {
	background: var(--dz-surface) !important;
	border: 1px solid var(--dz-line) !important;
	border-radius: 14px;
	padding: 16px;
	transition: border-color 200ms ease;
}
body.dz-skin .woocommerce ul.products li.product:hover {
	border-color: var(--dz-accent) !important;
}
body.dz-skin .woocommerce ul.products li.product .price,
body.dz-skin .woocommerce .price ins,
body.dz-skin .woocommerce-Price-amount {
	color: var(--dz-accent) !important;
	font-weight: 700;
}

/* Tables (cart, checkout) */
body.dz-skin .woocommerce table.shop_table,
body.dz-skin .woocommerce-cart table.cart,
body.dz-skin .woocommerce-checkout-review-order-table {
	background: var(--dz-surface) !important;
	border: 1px solid var(--dz-line) !important;
	border-radius: 14px !important;
	overflow: hidden;
}
body.dz-skin .woocommerce table.shop_table th,
body.dz-skin .woocommerce table.shop_table td {
	background: transparent !important;
	border-bottom: 1px solid var(--dz-line) !important;
	color: var(--dz-ink-2) !important;
}
body.dz-skin .woocommerce table.shop_table tfoot th,
body.dz-skin .woocommerce table.shop_table tfoot td {
	color: var(--dz-ink) !important;
	font-weight: 600;
}

/* Notices */
body.dz-skin .woocommerce-message,
body.dz-skin .woocommerce-info,
body.dz-skin .woocommerce-error {
	background: var(--dz-surface) !important;
	border: 1px solid var(--dz-line-2) !important;
	border-left: 3px solid var(--dz-accent) !important;
	color: var(--dz-ink-2) !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
}
body.dz-skin .woocommerce-message::before,
body.dz-skin .woocommerce-info::before,
body.dz-skin .woocommerce-error::before {
	color: var(--dz-accent) !important;
}

/* Form rows */
body.dz-skin .woocommerce form .form-row label {
	color: var(--dz-mute) !important;
	font-weight: 500;
	font-size: 13px;
}
body.dz-skin .woocommerce form .form-row input.input-text,
body.dz-skin .woocommerce form .form-row textarea,
body.dz-skin .woocommerce-checkout #order_comments,
body.dz-skin .woocommerce form .select2-selection {
	background: var(--dz-bg-2) !important;
	color: var(--dz-ink) !important;
	border: 1px solid var(--dz-line-2) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
}

/* Payment box */
body.dz-skin .woocommerce-checkout #payment {
	background: var(--dz-surface) !important;
	border: 1px solid var(--dz-line) !important;
	border-radius: 14px !important;
}
body.dz-skin .woocommerce-checkout #payment ul.payment_methods {
	background: transparent !important;
	border-bottom: 1px solid var(--dz-line) !important;
}
body.dz-skin .woocommerce-checkout #payment div.payment_box {
	background: var(--dz-bg-2) !important;
	color: var(--dz-mute) !important;
}
body.dz-skin .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--dz-bg-2) !important;
}

/* Order received */
body.dz-skin .woocommerce-thankyou-order-received,
body.dz-skin .woocommerce-order-overview {
	color: var(--dz-ink-2) !important;
}

/* ---------- comments / forms generic ---------- */
body.dz-skin .comment-form-author,
body.dz-skin .comment-form-email,
body.dz-skin .comment-form-url { color: var(--dz-mute); }

/* ---------- exclude DEZISION app from skin overrides ---------- */
body.dz-skin .dz,
body.dz-skin .dz * {
	/* The shortcode is already styled by dezision.css — leave it alone. */
}

/* ============================================================================
 * WOOCOMMERCE CHECKOUT — themed to match the new dark/glass aesthetic.
 * Targets the standard WC checkout markup (works with default theme + most
 * block themes). Uses the same indigo focus accent as the main app.
 * ============================================================================ */

body.dz-skin.woocommerce-checkout,
body.dz-skin.woocommerce-cart,
body.dz-skin.woocommerce-account {
	background: var(--dz-bg) !important;
}

/* Page wrapper — give checkout some breathing room and a soft ambient glow */
body.dz-skin.woocommerce-checkout .woocommerce,
body.dz-skin.woocommerce-cart .woocommerce {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 20px 80px;
	position: relative;
}

/* Section headings */
body.dz-skin .woocommerce h3,
body.dz-skin .woocommerce form .form-row label,
body.dz-skin .woocommerce-billing-fields h3,
body.dz-skin .woocommerce-shipping-fields h3,
body.dz-skin .woocommerce-additional-fields h3,
body.dz-skin #order_review_heading {
	color: var(--dz-ink) !important;
	font-weight: 600 !important;
	letter-spacing: -0.012em;
}

/* All text inputs, selects, textareas — match the search-shell glass style */
body.dz-skin .woocommerce form .form-row input.input-text,
body.dz-skin .woocommerce form .form-row textarea,
body.dz-skin .woocommerce form .form-row select,
body.dz-skin .woocommerce-checkout input[type="text"],
body.dz-skin .woocommerce-checkout input[type="email"],
body.dz-skin .woocommerce-checkout input[type="tel"],
body.dz-skin .woocommerce-checkout input[type="number"],
body.dz-skin .woocommerce-checkout input[type="password"],
body.dz-skin .woocommerce-checkout textarea,
body.dz-skin .woocommerce-checkout select {
	width: 100%;
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--dz-ink) !important;
	background: rgba(15, 15, 20, 0.65) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 4px 16px 0 rgba(0, 0, 0, 0.25) !important;
	outline: none !important;
	transition: border-color 240ms ease, background 240ms ease !important;
}

body.dz-skin .woocommerce form .form-row input.input-text::placeholder,
body.dz-skin .woocommerce-checkout input::placeholder,
body.dz-skin .woocommerce-checkout textarea::placeholder {
	color: rgba(255, 255, 255, 0.35) !important;
}

body.dz-skin .woocommerce form .form-row input.input-text:hover,
body.dz-skin .woocommerce-checkout input:hover,
body.dz-skin .woocommerce-checkout textarea:hover,
body.dz-skin .woocommerce-checkout select:hover {
	border-color: rgba(255, 255, 255, 0.14) !important;
	background: rgba(15, 15, 20, 0.72) !important;
}

body.dz-skin .woocommerce form .form-row input.input-text:focus,
body.dz-skin .woocommerce-checkout input:focus,
body.dz-skin .woocommerce-checkout textarea:focus,
body.dz-skin .woocommerce-checkout select:focus {
	border-color: rgba(165, 180, 252, 0.6) !important;
	background: rgba(15, 15, 20, 0.78) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 0 4px rgba(129, 140, 248, 0.15) !important;
}

/* Labels */
body.dz-skin .woocommerce form .form-row label {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-bottom: 6px !important;
	letter-spacing: 0.01em;
}
body.dz-skin .woocommerce .required {
	color: var(--dz-accent-3) !important;   /* rose-300 */
	text-decoration: none !important;
}

/* Order review / cart totals card */
body.dz-skin .woocommerce-checkout-review-order,
body.dz-skin .woocommerce-cart .cart_totals,
body.dz-skin .woocommerce-MyAccount-content {
	padding: 28px !important;
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 20px !important;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6) !important;
}

body.dz-skin .woocommerce-checkout-review-order-table,
body.dz-skin .woocommerce-cart-form table.cart,
body.dz-skin .shop_table {
	background: transparent !important;
	border: none !important;
}
body.dz-skin .shop_table th,
body.dz-skin .shop_table td {
	padding: 12px 8px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	background: transparent !important;
	color: var(--dz-ink-2) !important;
}
body.dz-skin .shop_table tfoot th,
body.dz-skin .shop_table tfoot td,
body.dz-skin .order-total {
	color: var(--dz-ink) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
body.dz-skin .order-total .amount {
	background: linear-gradient(to right, #a5b4fc 0%, #ffffff 50%, #fda4af 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	font-size: 22px !important;
	font-weight: 700 !important;
}

/* Payment method cards */
body.dz-skin #payment,
body.dz-skin .woocommerce-checkout-payment {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
body.dz-skin .wc_payment_methods,
body.dz-skin ul.payment_methods {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 16px 0 !important;
}
body.dz-skin .wc_payment_method,
body.dz-skin ul.payment_methods li {
	padding: 14px 18px !important;
	margin: 0 0 8px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	transition: border-color 240ms ease, background 240ms ease !important;
}
body.dz-skin .wc_payment_method:hover,
body.dz-skin ul.payment_methods li:hover {
	border-color: rgba(255, 255, 255, 0.18) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}
body.dz-skin .wc_payment_method label,
body.dz-skin ul.payment_methods li label {
	color: var(--dz-ink) !important;
	font-weight: 500 !important;
}
body.dz-skin .payment_box {
	background: rgba(255, 255, 255, 0.03) !important;
	color: var(--dz-mute) !important;
	border-radius: 12px !important;
	margin-top: 10px !important;
}
body.dz-skin .payment_box::before { display: none !important; }

/* Primary checkout button — indigo→rose gradient pill */
body.dz-skin #place_order,
body.dz-skin .checkout-button,
body.dz-skin .wc-block-cart__submit-button,
body.dz-skin .button.alt {
	width: 100% !important;
	padding: 16px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em !important;
	color: #0b0d17 !important;
	background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #fda4af 100%) !important;
	background-size: 200% 100% !important;
	border: none !important;
	border-radius: 9999px !important;
	box-shadow:
		0 10px 28px -8px rgba(129, 140, 248, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1), background-position 320ms ease, box-shadow 320ms ease !important;
	cursor: pointer !important;
	text-transform: none !important;
}
body.dz-skin #place_order:hover,
body.dz-skin .checkout-button:hover,
body.dz-skin .button.alt:hover {
	transform: translateY(-2px) !important;
	background-position: 100% 50% !important;
	box-shadow:
		0 14px 36px -8px rgba(129, 140, 248, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.dz-skin #place_order:active,
body.dz-skin .checkout-button:active { transform: scale(0.985) !important; }

/* Coupon / login notices */
body.dz-skin .woocommerce-info,
body.dz-skin .woocommerce-message,
body.dz-skin .woocommerce-NoticeGroup {
	background: rgba(165, 180, 252, 0.06) !important;
	border: 1px solid rgba(165, 180, 252, 0.2) !important;
	border-left: 3px solid #a5b4fc !important;
	border-radius: 12px !important;
	color: var(--dz-ink-2) !important;
	padding: 14px 18px !important;
}
body.dz-skin .woocommerce-error {
	background: rgba(253, 164, 175, 0.06) !important;
	border: 1px solid rgba(253, 164, 175, 0.2) !important;
	border-left: 3px solid var(--dz-accent-3) !important;
	border-radius: 12px !important;
	color: var(--dz-ink-2) !important;
	padding: 14px 18px !important;
}
body.dz-skin .woocommerce-info::before,
body.dz-skin .woocommerce-message::before,
body.dz-skin .woocommerce-error::before { color: var(--dz-accent) !important; }

/* Coupon form */
body.dz-skin .checkout_coupon,
body.dz-skin .woocommerce-form-coupon {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 16px !important;
	padding: 20px !important;
	margin-bottom: 20px !important;
}

/* Two-column responsive layout for checkout */
@media (min-width: 900px) {
	body.dz-skin.woocommerce-checkout .woocommerce-checkout {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 32px;
	}
	body.dz-skin.woocommerce-checkout #order_review_heading,
	body.dz-skin.woocommerce-checkout #order_review {
		grid-column: 2;
	}
	body.dz-skin.woocommerce-checkout .col2-set,
	body.dz-skin.woocommerce-checkout .woocommerce-billing-fields,
	body.dz-skin.woocommerce-checkout .woocommerce-shipping-fields,
	body.dz-skin.woocommerce-checkout .woocommerce-additional-fields {
		grid-column: 1;
	}
}