/*
 * FXNook brand - the FXNook AI Code Lab look, across the whole marketplace
 * =============================================================================
 *
 * The same design system as lab.fxnook.com and the FXNook Brand plugin: the
 * same tokens, the same Poppins, the same buttons, cards, tables, badges and
 * notices - carried into the places that plugin does not reach: the Dokan
 * vendor dashboard, the store pages, and every FXNook panel (licensing,
 * backtests, verification, payouts, the product page).
 *
 * LOOKS ONLY. Nothing here changes what a page does or says. Every rule is
 * colour, type, spacing, radius or shadow, and switching the Brand module off
 * puts everything back as it was.
 *
 * THE LAB'S RULES, AS APPLIED HERE
 *   - Primary actions are brand 600 #3a7d1e with WHITE text; hover 700.
 *   - The logo green #8dc63f is for accents - dots, bars, ticks, the active
 *     mark, the menu bar - never for text on white.
 *   - Text is slate: headings ink 900, body ink 700-800, muted ink 500.
 *     Borders ink 200, page surfaces ink 50.
 *   - Radius: controls 7px, cards 10px, feature cards 16px, pills 999px.
 *   - Depth is quiet: hairline borders, soft shadows.
 *
 * HOW EVERY FXNOOK PLUGIN PICKS IT UP
 * Every FXNook stylesheet reads its colours from --fxn-green, --fxn-ink,
 * --fxn-line and the rest, defined below. Those names are kept and given the
 * Lab's values, so all of them move to the Lab palette at once without a
 * line of their own CSS changing. The Lab's own token names are defined too,
 * identical to the FXNook Brand plugin, so the two agree when both are on.
 *
 * THE LAYERS, IN ORDER
 *   1. Font and tokens
 *   2. Theme (WoodMart's variables) and Dokan's variables
 *   3. WooCommerce
 *   4. Header
 *   5. Dokan vendor dashboard and store pages
 *   6. FXNook primary buttons
 *   7. Landing page
 *
 * `html:root` / `html body` rather than `:root` / `body`, so these win over
 * the theme and over stylesheets printed later in the page, whatever order a
 * cache plugin combines them in.
 */

/* 1. Font and tokens ======================================================== */

/* Poppins, served from this plugin - the same files as the Lab, no Google request. */
@font-face { font-family: 'FXN Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'FXN Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'FXN Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'FXN Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-700-normal.woff2) format('woff2'); }

html:root {
	/* The Lab's tokens - identical to the FXNook Brand plugin. */
	--fxn-brand-50:  #f5fbee;
	--fxn-brand-100: #e8f5d6;
	--fxn-brand-200: #d1ebae;
	--fxn-brand-300: #b3dc7d;
	--fxn-brand-400: #9dd05a;
	--fxn-brand-500: #8dc63f;
	--fxn-brand-600: #3a7d1e;
	--fxn-brand-700: #2f6618;
	--fxn-brand-800: #275316;
	--fxn-brand-900: #214414;
	--fxn-brand-950: #10240a;

	--fxn-ink-50:  #f8fafc;
	--fxn-ink-100: #f1f5f9;
	--fxn-ink-200: #e2e8f0;
	--fxn-ink-300: #cbd5e1;
	--fxn-ink-400: #94a3b8;
	--fxn-ink-500: #64748b;
	--fxn-ink-600: #475569;
	--fxn-ink-700: #334155;
	--fxn-ink-800: #1e293b;
	--fxn-ink-900: #0f172a;
	--fxn-ink-950: #020617;

	--fxn-success-50:  #ecfdf5;
	--fxn-success-600: #059669;
	--fxn-success-700: #047857;
	--fxn-warning-50:  #fffbeb;
	--fxn-warning-600: #d97706;
	--fxn-warning-700: #b45309;
	--fxn-danger-50:   #fef2f2;
	--fxn-danger-600:  #dc2626;
	--fxn-danger-700:  #b91c1c;
	--fxn-info-50:     #f0f9ff;
	--fxn-info-600:    #0284c7;

	--fxn-night: #050b07;

	--fxn-radius-control: 7px;
	--fxn-radius-card:    10px;
	--fxn-radius-modal:   14px;
	--fxn-radius-pill:    999px;

	--fxn-shadow-xs:      0 1px 2px rgb(15 23 42 / 0.05);
	--fxn-shadow-card:    0 1px 2px rgb(15 23 42 / 0.04), 0 1px 1px rgb(15 23 42 / 0.02);
	--fxn-shadow-raised:  0 1px 2px rgb(15 23 42 / 0.05), 0 8px 20px -12px rgb(15 23 42 / 0.18);
	--fxn-shadow-overlay: 0 16px 40px -12px rgb(15 23 42 / 0.28), 0 2px 6px -2px rgb(15 23 42 / 0.08);
	--fxn-shadow-hover:   0 24px 50px -24px rgb(58 125 30 / 0.35);
	--fxn-ease:           cubic-bezier(0.2, 0.7, 0.2, 1);

	--fxn-font: 'FXN Poppins', 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fxn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	 * The names every FXNook plugin reads, given the Lab's values. These are
	 * what move the licensing box, the backtest panels, verification, payouts
	 * and the product page across in one place.
	 */
	--fxn-green:        var(--fxn-brand-500);   /* accents: dots, bars, the active mark */
	--fxn-green-hover:  var(--fxn-brand-400);
	--fxn-green-press:  #7fb83a;
	--fxn-green-soft:   var(--fxn-brand-200);
	--fxn-green-deep:   var(--fxn-brand-700);   /* green TEXT on white */
	--fxn-green-deeper: var(--fxn-brand-800);
	--fxn-green-tint:   var(--fxn-brand-50);
	--fxn-green-line:   var(--fxn-brand-200);

	--fxn-ink:          var(--fxn-ink-900);
	--fxn-ink-2:        var(--fxn-ink-800);
	--fxn-text:         var(--fxn-ink-700);
	--fxn-muted:        var(--fxn-ink-500);
	--fxn-subtle:       var(--fxn-ink-400);
	--fxn-line:         var(--fxn-ink-200);
	--fxn-line-strong:  var(--fxn-ink-300);
	--fxn-surface:      var(--fxn-ink-50);
	--fxn-surface-2:    var(--fxn-ink-100);
	--fxn-white:        #FFFFFF;

	--fxn-danger:       var(--fxn-danger-700);
	--fxn-danger-tint:  var(--fxn-danger-50);
	--fxn-warn:         var(--fxn-warning-700);
	--fxn-warn-tint:    var(--fxn-warning-50);
	--fxn-star:         #f59e0b;

	--fxn-radius:       var(--fxn-radius-card);
	--fxn-radius-sm:    var(--fxn-radius-control);
	--fxn-radius-btn:   var(--fxn-radius-control);
	--fxn-shadow:       var(--fxn-shadow-raised);
	--fxn-focus:        0 0 0 3px rgb(141 198 63 / 0.25);

	/* 2. WoodMart ----------------------------------------------------------- */

	--wd-primary-color:              var(--fxn-brand-600);
	--wd-alternative-color:          var(--fxn-ink-900);
	--wd-link-color:                 var(--fxn-brand-700);
	--wd-link-color-hover:           var(--fxn-brand-800);
	--wd-title-color:                var(--fxn-ink-900);
	--wd-text-color:                 var(--fxn-ink-700);
	--wd-entities-title-color:       var(--fxn-ink-900);
	--wd-entities-title-color-hover: var(--fxn-brand-700);
	--wd-widget-title-color:         var(--fxn-ink-900);

	--btn-accented-bgcolor:          var(--fxn-brand-600);
	--btn-accented-bgcolor-hover:    var(--fxn-brand-700);
	--btn-accented-color:            #FFFFFF;
	--btn-accented-color-hover:      #FFFFFF;
	--btn-accented-brd-radius:       var(--fxn-radius-control);

	--btn-default-bgcolor:           #FFFFFF;
	--btn-default-bgcolor-hover:     var(--fxn-ink-50);
	--btn-default-color:             var(--fxn-ink-800);
	--btn-default-color-hover:       var(--fxn-ink-900);
	--btn-default-brd-radius:        var(--fxn-radius-control);

	--wd-form-brd-radius:            var(--fxn-radius-control);
	--wd-form-brd-color:             var(--fxn-ink-200);
	--wd-form-brd-color-focus:       var(--fxn-brand-500);
	--wd-brd-radius:                 var(--fxn-radius-card);

	/*
	 * Dokan. The sidebar stays dark: Dokan's newer React dashboard draws its
	 * menu text white on top of this colour, so a light sidebar there would
	 * leave the menu unreadable. Slate rather than Dokan's purple, with the
	 * Lab's green marking the page you are on.
	 */
	--dokan-button-background-color:        var(--fxn-brand-600);
	--dokan-button-border-color:            var(--fxn-brand-600);
	--dokan-button-text-color:              #FFFFFF;
	--dokan-button-hover-background-color:  var(--fxn-brand-700);
	--dokan-button-hover-border-color:      var(--fxn-brand-700);
	--dokan-button-hover-color:             #FFFFFF;
	--dokan-button-hover-text-color:        #FFFFFF;
	--dokan-sidebar-background-color:       var(--fxn-ink-900);
	--dokan-sidebar-hover-background-color: var(--fxn-brand-600);
	--dokan-sidebar-hover-text-color:       #FFFFFF;
	--dokan-sidebar-text-color:             rgb(255 255 255 / 0.74);
	--dokan-sidebar-active-background:      var(--fxn-brand-600);
	--dokan-sidebar-active-text:            #FFFFFF;
	--dokan-link-color:                     var(--fxn-brand-700);
	--dokan-link-hover-color:               var(--fxn-brand-800);
	--dokan-toggle-active-color:            var(--fxn-brand-600);
	--dokan-toggle-color:                   #FFFFFF;
	--dokan-toggle-inactive-color:          var(--fxn-ink-300);
	--dokan-success-background-color:       var(--fxn-success-50);
	--dokan-success-border-color:           #a7f3d0;
	--dokan-success-text-color:             #065f46;
	--dokan-info-background-color:          var(--fxn-info-50);
	--dokan-info-border-color:              #bae6fd;
	--dokan-info-text-color:                #075985;
	--dokan-warning-background-color:       var(--fxn-warning-50);
	--dokan-warning-border-color:           #fde68a;
	--dokan-warning-text-color:             #92400e;
	--dokan-danger-background-color:        var(--fxn-danger-50);
	--dokan-danger-border-color:            #fecaca;
	--dokan-danger-text-color:              #991b1b;

	accent-color: var(--fxn-brand-600);
}

html body.fxn-brand-font {
	--wd-text-font:            var(--fxn-font);
	--wd-title-font:           var(--fxn-font);
	--wd-entities-title-font:  var(--fxn-font);
	--wd-widget-title-font:    var(--fxn-font);
	--wd-header-el-font:       var(--fxn-font);
	--wd-alternative-font:     var(--fxn-font);
	--wd-title-font-weight:          600;
	--wd-entities-title-font-weight: 600;
	--wd-header-el-font-weight:      500;
	--wd-text-font-size:             15px;
	-webkit-font-smoothing: antialiased;
}

html body.fxn-brand-font,
html body.fxn-brand-font button,
html body.fxn-brand-font input,
html body.fxn-brand-font select,
html body.fxn-brand-font textarea {
	font-family: var(--fxn-font);
}

html body.fxn-brand-font h1,
html body.fxn-brand-font h2,
html body.fxn-brand-font h3,
html body.fxn-brand-font h4 {
	letter-spacing: -0.012em;
}

::selection {
	background: var(--fxn-brand-100);
	color: var(--fxn-ink-900);
}

/* Keyboard focus: the Lab's ring - a white gap, then brand 600. */
html body a:focus-visible,
html body button:focus-visible,
html body .button:focus-visible,
html body .btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fxn-brand-600);
}

html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
	outline: none;
	box-shadow: var(--fxn-focus);
}

/* 3. WooCommerce ============================================================ */

html body .price,
html body .price .amount,
html body .woocommerce-Price-amount,
html body .wd-price,
html body .product-grid-item .price {
	color: var(--fxn-ink-900);
	font-variant-numeric: tabular-nums;
}

html body .price del,
html body .price del .amount {
	color: var(--fxn-ink-400);
}

html body .price ins,
html body .price ins .amount {
	color: var(--fxn-brand-700);
	text-decoration: none;
}

html body .wd-entities-title a:hover,
html body .woocommerce-breadcrumb a:hover,
html body .wd-breadcrumbs a:hover,
html body .product_meta a:hover,
html body .wd-product-cats a:hover,
html body .wd-product-brands-links a:hover {
	color: var(--fxn-brand-700);
}

/* Notices: the Lab's - green for done, blue for information, red for errors. */
html body .woocommerce-message,
html body .wc-block-components-notice-banner.is-success {
	background-color: var(--fxn-success-50);
	border-color: #a7f3d0;
	color: #065f46;
	border-radius: var(--fxn-radius-card);
}

html body .woocommerce-message::before {
	color: var(--fxn-success-600);
}

html body .woocommerce-info,
html body .wc-block-components-notice-banner.is-info {
	background-color: var(--fxn-info-50);
	border-color: #bae6fd;
	color: #075985;
	border-radius: var(--fxn-radius-card);
}

html body .woocommerce-info::before {
	color: var(--fxn-info-600);
}

html body .woocommerce-error,
html body .wc-block-components-notice-banner.is-error {
	background-color: var(--fxn-danger-50);
	border-color: #fecaca;
	color: #991b1b;
	border-radius: var(--fxn-radius-card);
}

html body .onsale,
html body .product-label.onsale,
html body .product-label.featured,
html body .product-label.new {
	background-color: var(--fxn-brand-600);
	color: #FFFFFF;
	border-radius: var(--fxn-radius-pill);
}

html body .star-rating span::before,
html body .star-rating::before {
	color: var(--fxn-star);
}

/* Fields: hairline, brand 500 border and a soft ring on focus. */
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="search"]:focus,
html body input[type="number"]:focus,
html body input[type="tel"]:focus,
html body input[type="url"]:focus,
html body select:focus,
html body textarea:focus {
	border-color: var(--fxn-brand-500);
	box-shadow: var(--fxn-focus);
}

/* Primary WooCommerce actions: brand 600, white text. */
html body .woocommerce a.button.alt,
html body .woocommerce button.button.alt,
html body .woocommerce input.button.alt,
html body .single_add_to_cart_button,
html body .checkout-button,
html body #place_order {
	background-color: var(--fxn-brand-600);
	border-color: var(--fxn-brand-600);
	color: #FFFFFF;
	border-radius: var(--fxn-radius-control);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(33 68 20 / 0.3);
	font-weight: 500;
}

html body .woocommerce a.button.alt:hover,
html body .woocommerce button.button.alt:hover,
html body .woocommerce input.button.alt:hover,
html body .single_add_to_cart_button:hover,
html body .checkout-button:hover,
html body #place_order:hover {
	background-color: var(--fxn-brand-700);
	border-color: var(--fxn-brand-700);
	color: #FFFFFF;
}

/* Tables: the Lab's - hairline, a light header row, quiet row hover. */
html body .woocommerce table.shop_table {
	border: 1px solid rgb(226 232 240 / 0.8);
	border-radius: var(--fxn-radius-card);
	border-collapse: separate;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--fxn-shadow-card);
}

html body .woocommerce table.shop_table th {
	background: rgb(248 250 252 / 0.8);
	color: var(--fxn-ink-500);
	font-size: 12.5px;
	font-weight: 500;
}

html body .woocommerce table.shop_table td,
html body .woocommerce table.shop_table th {
	border-color: var(--fxn-ink-100);
}

/* My Account: the Lab's side menu - a white card, the page you are on in brand 50. */
html body .woocommerce-MyAccount-navigation ul {
	padding: 6px;
	background: #FFFFFF;
	border: 1px solid var(--fxn-ink-200);
	border-radius: var(--fxn-radius-card);
	box-shadow: var(--fxn-shadow-card);
}

html body .woocommerce-MyAccount-navigation-link > a {
	border-radius: var(--fxn-radius-control);
	color: var(--fxn-ink-600);
	font-weight: 500;
}

html body .woocommerce-MyAccount-navigation-link > a:hover {
	background-color: var(--fxn-ink-100);
	color: var(--fxn-ink-900);
}

html body .woocommerce-MyAccount-navigation-link.is-active > a {
	color: var(--fxn-brand-800);
	background-color: var(--fxn-brand-50);
	box-shadow: inset 3px 0 0 var(--fxn-brand-600);
}

/* 4. Header ================================================================= */

/*
 * The menu bar in the logo green, an accent the Lab allows, with ink text:
 * white on the light green is hard to read. Only rows that actually have
 * the green behind them are touched.
 */
html body.fxn-brand-header .whb-header-bottom.whb-with-bg,
html body.fxn-brand-header .whb-header-bottom.whb-with-bg .whb-row,
html body.fxn-brand-header .whb-sticked .whb-header-bottom.whb-with-bg {
	background-color: var(--fxn-brand-500);
}

html body.fxn-brand-header .whb-header-bottom.whb-color-light {
	--wd-header-el-color: var(--fxn-ink-900);
	--wd-header-el-color-hover: rgb(15 23 42 / 0.72);
	--nav-color: var(--fxn-ink-900);
	--nav-color-hover: rgb(15 23 42 / 0.72);
	--nav-color-active: var(--fxn-ink-900);
	color: var(--fxn-ink-900);
}

html body.fxn-brand-header .whb-header-bottom.whb-color-light a,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-nav > li > a,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-tools-element > a,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-tools-icon,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-tools-text,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-nav-img,
html body.fxn-brand-header .whb-header-bottom.whb-color-light [class*="icon"] {
	color: var(--fxn-ink-900);
}

html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-nav > li > a:hover,
html body.fxn-brand-header .whb-header-bottom.whb-color-light .wd-tools-element > a:hover {
	color: rgb(15 23 42 / 0.72);
}

/* The dark top row: the Lab's slate rather than pure black. */
html body.fxn-brand-header .whb-general-header.whb-with-bg.whb-color-light {
	background-color: var(--fxn-ink-900);
}

html body.fxn-brand-header .whb-header .searchform .searchsubmit {
	color: var(--fxn-ink-900);
}

/* 5. Dokan ================================================================== */

/* -- Buttons ---------------------------------------------------------------- */

html body.fxn-brand-dokan .dokan-btn {
	border-radius: var(--fxn-radius-control);
	font-family: var(--fxn-font);
	font-weight: 500;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* The ordinary button: the Lab's secondary - white, hairline, ink text. */
html body.fxn-brand-dokan .dokan-btn-default,
html body.fxn-brand-dokan a.dokan-btn-default {
	background-color: #FFFFFF;
	border-color: var(--fxn-ink-200);
	color: var(--fxn-ink-800);
	box-shadow: var(--fxn-shadow-xs);
}

html body.fxn-brand-dokan .dokan-btn-default:hover,
html body.fxn-brand-dokan a.dokan-btn-default:hover {
	background-color: var(--fxn-ink-50);
	border-color: var(--fxn-ink-300);
	color: var(--fxn-ink-900);
}

/* The theme button: the Lab's primary. */
html body.fxn-brand-dokan input[type="submit"].dokan-btn-theme,
html body.fxn-brand-dokan a.dokan-btn-theme,
html body.fxn-brand-dokan .dokan-btn-theme,
html body.fxn-brand-dokan button.dokan-btn-theme {
	background-color: var(--fxn-brand-600) !important;
	border-color: var(--fxn-brand-600) !important;
	color: #FFFFFF !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(33 68 20 / 0.3);
}

html body.fxn-brand-dokan input[type="submit"].dokan-btn-theme:hover,
html body.fxn-brand-dokan a.dokan-btn-theme:hover,
html body.fxn-brand-dokan .dokan-btn-theme:hover,
html body.fxn-brand-dokan .dokan-btn-theme:focus,
html body.fxn-brand-dokan .dokan-btn-theme:active,
html body.fxn-brand-dokan button.dokan-btn-theme:hover {
	background-color: var(--fxn-brand-700) !important;
	border-color: var(--fxn-brand-700) !important;
	color: #FFFFFF !important;
}

html body.fxn-brand-dokan .dokan-btn-theme .badge {
	background-color: #FFFFFF;
	color: var(--fxn-brand-700);
}

html body.fxn-brand-dokan .dokan-btn-success {
	background-color: var(--fxn-brand-700) !important;
	border-color: var(--fxn-brand-700) !important;
	color: #FFFFFF !important;
}

html body.fxn-brand-dokan .dokan-btn-danger {
	background-color: var(--fxn-danger-600) !important;
	border-color: var(--fxn-danger-600) !important;
	color: #FFFFFF !important;
}

html body.fxn-brand-dokan .dokan-btn-danger:hover {
	background-color: var(--fxn-danger-700) !important;
	border-color: var(--fxn-danger-700) !important;
}

html body.fxn-brand-dokan .dokan-btn-info {
	background-color: var(--fxn-ink-900);
	border-color: var(--fxn-ink-900);
	color: #FFFFFF;
}

/* -- Labels: the Lab's badges ------------------------------------------------ */

html body.fxn-brand-dokan .dokan-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	border-radius: var(--fxn-radius-pill);
	font-family: var(--fxn-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	background: var(--fxn-ink-100);
	color: var(--fxn-ink-700);
	box-shadow: inset 0 0 0 1px var(--fxn-ink-200);
}

html body.fxn-brand-dokan .dokan-label-success {
	background: var(--fxn-success-50);
	color: var(--fxn-success-700);
	box-shadow: inset 0 0 0 1px #a7f3d0;
}

html body.fxn-brand-dokan .dokan-label-warning {
	background: var(--fxn-warning-50);
	color: var(--fxn-warning-700);
	box-shadow: inset 0 0 0 1px #fde68a;
}

html body.fxn-brand-dokan .dokan-label-danger {
	background: var(--fxn-danger-50);
	color: var(--fxn-danger-700);
	box-shadow: inset 0 0 0 1px #fecaca;
}

html body.fxn-brand-dokan .dokan-label-info,
html body.fxn-brand-dokan .dokan-label-primary {
	background: var(--fxn-brand-50);
	color: var(--fxn-brand-700);
	box-shadow: inset 0 0 0 1px var(--fxn-brand-200);
}

html body.fxn-brand-dokan .dokan-product-listing .dokan-product-listing-area table.product-listing-table td.post-status label.pending {
	background: var(--fxn-warning-50);
	color: var(--fxn-warning-700);
	box-shadow: inset 0 0 0 1px #fde68a;
}

html body.fxn-brand-dokan .dokan-product-listing .dokan-product-listing-area table.product-listing-table td.post-status label.online {
	background: var(--fxn-brand-50);
	color: var(--fxn-brand-700);
	box-shadow: inset 0 0 0 1px var(--fxn-brand-200);
}

/* -- Alerts: the Lab's notices ------------------------------------------------ */

html body.fxn-brand-dokan .dokan-alert {
	border-radius: var(--fxn-radius-card);
	font-size: 13.5px;
	box-shadow: none;
}

html body.fxn-brand-dokan .dokan-alert-success { background: var(--fxn-success-50); border-color: #a7f3d0; color: #065f46; }
html body.fxn-brand-dokan .dokan-alert-info    { background: var(--fxn-info-50);    border-color: #bae6fd; color: #075985; }
html body.fxn-brand-dokan .dokan-alert-warning { background: var(--fxn-warning-50); border-color: #fde68a; color: #92400e; }
html body.fxn-brand-dokan .dokan-alert-danger  { background: var(--fxn-danger-50);  border-color: #fecaca; color: #991b1b; }

/* -- The vendor dashboard menu ----------------------------------------------- */

/*
 * Slate, not purple, with the Lab's green marking the page you are on.
 * Dokan puts .dokan-dashboard on <body> itself, so these do not look for it
 * as a parent - they would never match.
 */
html body.fxn-brand-dokan .dokan-dash-sidebar {
	border-radius: var(--fxn-radius-card);
	overflow: visible;
}

html body.fxn-brand-dokan .dokan-dash-sidebar,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li {
	background-color: var(--fxn-ink-900) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu {
	padding: 6px !important;
	border-radius: var(--fxn-radius-card);
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li {
	border-radius: var(--fxn-radius-control);
	margin: 1px 0;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li > a {
	color: rgb(255 255 255 / 0.74) !important;
	font-family: var(--fxn-font);
	font-size: 13.5px;
	font-weight: 500;
	border-radius: var(--fxn-radius-control);
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li > a i,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li > a svg {
	color: rgb(255 255 255 / 0.5) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a:hover {
	background: rgb(255 255 255 / 0.06) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover > a,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover > a i {
	color: #FFFFFF !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.active {
	background: var(--fxn-brand-600) !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(0 0 0 / 0.3);
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a i,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a svg {
	color: #FFFFFF !important;
	font-weight: 600;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li.active::after,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover:not(.active).has-submenu::after {
	display: none;
}

/* Flyout submenus. */
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu {
	border-radius: var(--fxn-radius-card);
	box-shadow: var(--fxn-shadow-overlay);
	padding: 6px 0;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li a {
	color: rgb(255 255 255 / 0.74) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li:hover a,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li.current a {
	color: #FFFFFF !important;
}

html body.fxn-brand-dokan .navigation-submenu li:hover::before,
html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li.current::before {
	border-color: var(--fxn-brand-500) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.sub-menu {
	background: #FFFFFF;
	border: 1px solid var(--fxn-ink-200);
	border-radius: var(--fxn-radius-card);
	box-shadow: var(--fxn-shadow-overlay);
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.sub-menu a {
	color: var(--fxn-ink-700) !important;
}

html body.fxn-brand-dokan .dokan-dash-sidebar ul.dokan-dashboard-menu li ul.sub-menu a:hover {
	background: var(--fxn-brand-50);
	color: var(--fxn-brand-800) !important;
}

/* The menu as it opens on a phone. */
html body.fxn-brand-dokan .dokan-dash-sidebar #dokan-navigation > input:checked + ul.dokan-dashboard-menu {
	background: var(--fxn-ink-900) !important;
}

html body.fxn-brand-dokan .dokan-dashboard-wrap a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fxn-brand-600);
}

/* -- The content area --------------------------------------------------------- */

html body.fxn-brand-dokan .dokan-dashboard-content {
	font-family: var(--fxn-font);
	color: var(--fxn-ink-800);
}

html body.fxn-brand-dokan .dokan-dashboard-content h1,
html body.fxn-brand-dokan .dokan-dashboard-content h2,
html body.fxn-brand-dokan .dokan-dashboard-content h3,
html body.fxn-brand-dokan .dokan-dashboard-content .entry-title,
html body.fxn-brand-dokan .dokan-dashboard-header h1 {
	color: var(--fxn-ink-900);
	font-weight: 600;
	letter-spacing: -0.012em;
}

/* Cards: Dokan's panels and widgets as the Lab's. */
html body.fxn-brand-dokan .dokan-dashboard-content .dashboard-widget,
html body.fxn-brand-dokan .dokan-dashboard-content .dokan-panel {
	background: #FFFFFF;
	border: 1px solid rgb(226 232 240 / 0.8);
	border-radius: var(--fxn-radius-card);
	box-shadow: var(--fxn-shadow-card);
	overflow: hidden;
}

html body.fxn-brand-dokan .dokan-dashboard-content .dashboard-widget .widget-title,
html body.fxn-brand-dokan .dokan-dashboard-content .dokan-panel .dokan-panel-heading {
	background: transparent;
	border-bottom: 1px solid var(--fxn-ink-100);
	color: var(--fxn-ink-900);
	font-size: 14.5px;
	font-weight: 600;
}

/* Fields. */
html body.fxn-brand-dokan .dokan-dashboard-content .dokan-form-control,
html body.fxn-brand-dokan .dokan-dashboard-content input[type="text"],
html body.fxn-brand-dokan .dokan-dashboard-content input[type="email"],
html body.fxn-brand-dokan .dokan-dashboard-content input[type="number"],
html body.fxn-brand-dokan .dokan-dashboard-content input[type="url"],
html body.fxn-brand-dokan .dokan-dashboard-content input[type="tel"],
html body.fxn-brand-dokan .dokan-dashboard-content input[type="password"],
html body.fxn-brand-dokan .dokan-dashboard-content select,
html body.fxn-brand-dokan .dokan-dashboard-content textarea {
	border: 1px solid var(--fxn-ink-200);
	border-radius: var(--fxn-radius-control);
	background-color: #FFFFFF;
	color: var(--fxn-ink-900);
	box-shadow: var(--fxn-shadow-xs);
	font-family: var(--fxn-font);
	transition: border-color .15s, box-shadow .15s;
}

html body.fxn-brand-dokan .dokan-dashboard-content .dokan-form-control:hover,
html body.fxn-brand-dokan .dokan-dashboard-content select:hover,
html body.fxn-brand-dokan .dokan-dashboard-content textarea:hover {
	border-color: var(--fxn-ink-300);
}

html body.fxn-brand-dokan .dokan-dashboard-content .dokan-form-control:focus,
html body.fxn-brand-dokan .dokan-dashboard-content input:focus,
html body.fxn-brand-dokan .dokan-dashboard-content select:focus,
html body.fxn-brand-dokan .dokan-dashboard-content textarea:focus {
	border-color: var(--fxn-brand-500);
	box-shadow: var(--fxn-focus);
	outline: none;
}

html body.fxn-brand-dokan .dokan-dashboard-content .dokan-input-group-addon {
	background: var(--fxn-ink-50);
	border-color: var(--fxn-ink-200);
	color: var(--fxn-ink-600);
}

html body.fxn-brand-dokan .dokan-dashboard-content label,
html body.fxn-brand-dokan .dokan-dashboard-content .dokan-control-label {
	color: var(--fxn-ink-700);
	font-weight: 500;
}

/* Tables: the Lab's. */
html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table {
	border: 1px solid rgb(226 232 240 / 0.8);
	border-radius: var(--fxn-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--fxn-shadow-card);
	font-variant-numeric: tabular-nums;
}

html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table th {
	background: rgb(248 250 252 / 0.8);
	color: var(--fxn-ink-500);
	font-size: 12px;
	font-weight: 500;
	border-color: rgb(226 232 240 / 0.8);
}

html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table td {
	color: var(--fxn-ink-800);
	border-color: var(--fxn-ink-100);
}

html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table tbody tr:hover td {
	background: rgb(248 250 252 / 0.8);
}

html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table a {
	color: var(--fxn-ink-900);
}

html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table a:hover {
	color: var(--fxn-brand-700);
}

/*
 * Dokan turns its tables into blocks below 1199px so they can scroll
 * sideways. Where the screen is still wide enough to show the whole table,
 * that left the rows shorter than the table around them; there it is a table
 * again. On phones Dokan's scrolling stays exactly as it was.
 */
@media (min-width: 769px) and (max-width: 1199px) {
	html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table {
		display: table !important;
		width: 100%;
	}
}

/*
 * Phones: the rounded card above clips with overflow:hidden, which would
 * also stop Dokan's sideways scroll and cut the right-hand columns off.
 * Here the table scrolls inside its card instead.
 */
@media (max-width: 768px) {
	html body.fxn-brand-dokan .dokan-dashboard-content table.dokan-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/* Tabs: the Lab's - flat, the open tab underlined in ink. */
html body.fxn-brand-dokan .dokan-dashboard-content ul.dokan_tabs,
html body.fxn-brand-dokan ul.dokan_tabs {
	border-bottom: 1px solid var(--fxn-ink-200);
}

html body.fxn-brand-dokan .dokan-dashboard-content ul.dokan_tabs li,
html body.fxn-brand-dokan ul.dokan_tabs li {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
}

html body.fxn-brand-dokan .dokan-dashboard-content ul.dokan_tabs li a,
html body.fxn-brand-dokan ul.dokan_tabs li a {
	color: var(--fxn-ink-500);
	font-weight: 500;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
}

html body.fxn-brand-dokan ul.dokan_tabs li a:hover {
	color: var(--fxn-ink-800);
	box-shadow: inset 0 -2px 0 var(--fxn-ink-300);
}

html body.fxn-brand-dokan .dokan-dashboard-content ul.dokan_tabs li.active a,
html body.fxn-brand-dokan ul.dokan_tabs li.active a {
	color: var(--fxn-ink-900);
	box-shadow: inset 0 -2px 0 var(--fxn-ink-900);
}

/* Status filters above the product and order lists. */
html body.fxn-brand-dokan .dokan-dashboard-content ul.subsubsub li a,
html body.fxn-brand-dokan .dokan-dashboard-content ul.list-inline.subsubsub li a {
	color: var(--fxn-ink-500);
}

html body.fxn-brand-dokan .dokan-dashboard-content ul.subsubsub li.active a,
html body.fxn-brand-dokan .dokan-dashboard-content ul.list-inline.subsubsub li.active a {
	color: var(--fxn-brand-700);
	font-weight: 600;
}

/* Pagination: the Lab's - the current page in ink. */
html body.fxn-brand-dokan .dokan-pagination-container .dokan-pagination li a {
	border-radius: var(--fxn-radius-control);
	border-color: var(--fxn-ink-200);
	color: var(--fxn-ink-700);
}

html body.fxn-brand-dokan .dokan-pagination-container .dokan-pagination li.active a {
	background: var(--fxn-ink-900);
	border-color: var(--fxn-ink-900);
	color: #FFFFFF;
}

html body.fxn-brand-dokan .dokan-progress {
	background: var(--fxn-ink-100);
	border-radius: var(--fxn-radius-pill);
	box-shadow: none;
}

html body.fxn-brand-dokan .dokan-progress > .dokan-progress-bar {
	background-color: var(--fxn-brand-600);
	color: #FFFFFF;
}

html body.fxn-brand-dokan .dokan-announcement-uread {
	border-color: var(--fxn-brand-500) !important;
}

html body.fxn-brand-dokan .dokan-announcement-uread .dokan-annnouncement-date,
html body.fxn-brand-dokan .dokan-announcement-bg-uread,
html body.fxn-brand-dokan .dokan-dashboard-content article.dashboard-content-area .dokan-announcement-widget ul li .dokan-dashboard-announce-unread {
	background-color: var(--fxn-brand-600) !important;
	color: #FFFFFF;
}

html body.fxn-brand-dokan .product-edit-container .dokan-product-title-alert,
html body.fxn-brand-dokan .product-edit-container .dokan-product-cat-alert,
html body.fxn-brand-dokan .product-edit-container .dokan-product-less-price-alert {
	color: var(--fxn-danger-700);
}

html body.fxn-brand-dokan .dokan-withdraw-content .dokan-withdraw-area .dokan-panel-body .dokan-panel-inner-container .dokan-w8 strong a {
	color: var(--fxn-brand-700);
}

/* -- Store pages ---------------------------------------------------------------- */

html body.fxn-brand-dokan .dokan-store-info .tips,
html body.fxn-brand-dokan .dokan-store-info .fa-check-circle,
html body.fxn-brand-dokan .profile-info-summery .tips,
html body.fxn-brand-dokan .profile-info .fa-check-circle,
html body.fxn-brand-dokan .store-name .fa-check-circle,
html body.fxn-brand-dokan .dokan-single-store .tips .fa-check-circle {
	color: var(--fxn-brand-600);
}

html body.fxn-brand-dokan .dokan-store-tabs ul li a {
	color: var(--fxn-ink-500);
	font-weight: 500;
}

html body.fxn-brand-dokan .dokan-store-tabs ul li a:hover,
html body.fxn-brand-dokan .dokan-store-tabs ul li.active a {
	color: var(--fxn-ink-900);
	box-shadow: inset 0 -2px 0 var(--fxn-ink-900);
}

/* 6. FXNook primary buttons ================================================== */

/*
 * The FXNook panels drew their main button in the brand green with ink text.
 * In the Lab, the one action that matters is brand 600 with white text - so
 * those buttons, and only those, are moved across here. Everything else the
 * plugins colour green is an accent and keeps the logo green.
 */
html body .fxnbt-download:not(.fxnbt-download--alt):not(.fxnbt-download--off):not(.fxnbt-download--mfb),
html body .fxn-lic__btn,
html body .fxn-acc-btn--primary,
html body .fxnver-gate__go,
html body .fxnob-btn--go,
html body .fxnvo-btn--primary,
html body .fxnpp-buy .single_add_to_cart_button,
html body .fxnook-specs-table td.spec-val a.fxnmt-spec-btn {
	background: var(--fxn-brand-600) !important;
	border-color: var(--fxn-brand-600) !important;
	color: #FFFFFF !important;
	border-radius: var(--fxn-radius-control);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(33 68 20 / 0.3);
}

html body .fxnbt-download:not(.fxnbt-download--alt):not(.fxnbt-download--off):not(.fxnbt-download--mfb):hover,
html body .fxn-lic__btn:hover,
html body .fxn-acc-btn--primary:hover,
html body .fxnver-gate__go:hover,
html body .fxnob-btn--go:hover,
html body .fxnvo-btn--primary:hover,
html body .fxnpp-buy .single_add_to_cart_button:hover,
html body .fxnook-specs-table td.spec-val a.fxnmt-spec-btn:hover {
	background: var(--fxn-brand-700) !important;
	border-color: var(--fxn-brand-700) !important;
	color: #FFFFFF !important;
}

/* Their icons follow the text. */
html body .fxnbt-download:not(.fxnbt-download--alt):not(.fxnbt-download--off):not(.fxnbt-download--mfb) svg,
html body .fxnpp-buy .single_add_to_cart_button svg {
	fill: currentColor;
	color: #FFFFFF;
}

/* 7. Landing page ============================================================= */

/*
 * The landing page's hero was sized for a narrower font. Poppins at the same
 * size pushed "EAs" onto a line of its own; a touch smaller keeps the title
 * on two lines.
 */
html body.fxn-brand-font .fxnook-text h1 {
	font-size: clamp(38px, 4.4vw, 60px);
	letter-spacing: -.02em;
	text-wrap: balance;
}

html body.fxn-brand-font .fxn-h1 {
	letter-spacing: -.02em;
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	html body.fxn-brand-dokan .dokan-btn,
	html body.fxn-brand-dokan .dokan-dashboard-content input,
	html body.fxn-brand-dokan .dokan-dashboard-content select,
	html body.fxn-brand-dokan .dokan-dashboard-content textarea {
		transition: none;
	}
}