/**
 * AquaFit Sursee — Element Pack Pro skin (theme-side).
 *
 * Makes BdThemes "Element Pack Pro" widgets match the active AquaFit skin
 * (colours, dark mode, accordions, forms, cards…) by remapping the plugin's
 * hardcoded palette onto the theme's `--af-*` tokens.
 *
 * This lives in the THEME and is enqueued from inc/enqueue.php, gated by the
 * "Element Pack native styling" dashboard toggle (option: element_pack_styles).
 * Because it is a theme asset, it SURVIVES Element Pack plugin updates — no more
 * re-injecting into the plugin's ep-styles.css.
 *
 * RULE when extending: `!important` is fine on colour / background / border, but
 * NEVER on properties a widget animates (height, padding-top/bottom, margin,
 * transform) — that breaks open/close motion (e.g. accordions).
 *
 * @package AquaFit_Sursee
 */

/* 1. Rebind Elementor's GLOBAL design tokens (anything left on "Global"). */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--af-heading);
	--e-global-color-secondary: var(--af-muted);
	--e-global-color-text: var(--af-text);
	--e-global-color-accent: var(--af-primary);
	--e-global-color-bdt-primary: var(--af-primary);
	--e-global-color-bdt-secondary: var(--af-secondary);
	--e-global-typography-primary-font-family: var(--af-font-heading);
	--e-global-typography-secondary-font-family: var(--af-font-heading);
	--e-global-typography-text-font-family: var(--af-font-body);
	--e-global-typography-accent-font-family: var(--af-font-body);
}

/* 2. Surfaces — sections, tiles, cards, background utilities. */
.bdt-section-default,
.bdt-tile-default,
.bdt-background-default { background-color: var(--af-surface) !important; }
.bdt-section-muted,
.bdt-tile-muted,
.bdt-background-muted,
.bdt-navbar-container:not(.bdt-navbar-transparent),
.bdt-navbar-dropdown { background-color: var(--af-bg-alt) !important; }
.bdt-section-primary,
.bdt-tile-primary,
.bdt-background-primary { background-color: var(--af-primary) !important; }
.bdt-section-secondary,
.bdt-tile-secondary,
.bdt-background-secondary { background-color: var(--af-secondary) !important; }
.bdt-card-default { background-color: var(--af-surface) !important; color: var(--af-text) !important; }
.bdt-card-default .bdt-card-title { color: var(--af-heading) !important; }
.bdt-card-default.bdt-card-hover:hover,
.bdt-card-hover:not(.bdt-card-default):not(.bdt-card-primary):not(.bdt-card-secondary):hover { background-color: var(--af-bg-alt) !important; }
.bdt-card-primary { background-color: var(--af-primary) !important; }
.bdt-card-secondary { background-color: var(--af-secondary) !important; }
.bdt-card { border-radius: var(--af-radius); }
.bdt-card,
.bdt-table td, .bdt-table th,
.bdt-nav-divider,
[class*="elementor-widget-bdt-"] hr,
[class*="elementor-widget-bdt-"] .bdt-hr { border-color: var(--af-border) !important; }

/* 3. Text utilities & typography. */
.bdt-text-muted { color: var(--af-muted) !important; }
.bdt-text-meta,
.bdt-article-meta,
.bdt-comment-meta { color: var(--af-muted) !important; }
.bdt-text-lead,
.bdt-text-emphasis { color: var(--af-heading) !important; }
.bdt-text-primary { color: var(--af-primary) !important; }
.bdt-text-secondary { color: var(--af-secondary) !important; }
[class*="elementor-widget-bdt-"] { color: var(--af-text); }
[class*="elementor-widget-bdt-"] .bdt-h1,
[class*="elementor-widget-bdt-"] .bdt-h2,
[class*="elementor-widget-bdt-"] .bdt-h3,
[class*="elementor-widget-bdt-"] .bdt-h4,
[class*="elementor-widget-bdt-"] .bdt-h5,
[class*="elementor-widget-bdt-"] .bdt-h6,
[class*="elementor-widget-bdt-"] .bdt-heading-primary,
[class*="elementor-widget-bdt-"] .bdt-logo { color: var(--af-heading); font-family: var(--af-font-heading); }
.bdt-link-muted, .bdt-link-muted a { color: var(--af-muted) !important; }
.bdt-link-muted:hover, .bdt-link-muted a:hover { color: var(--af-text) !important; }
.bdt-link-heading a:hover, a.bdt-link-heading:hover { color: var(--af-primary) !important; }
.bdt-logo, .bdt-logo:hover { color: var(--af-heading) !important; }

/* 4. Navigation family — nav, navbar/mega-menu, subnav, tabs, breadcrumb. */
.bdt-nav-default > li > a,
.bdt-nav-primary > li > a,
.bdt-nav-secondary .bdt-nav-subtitle,
.bdt-navbar-nav > li > a,
.bdt-navbar-toggle,
.bdt-navbar-dropdown-nav > li > a,
.bdt-subnav > * > :first-child,
.bdt-tab > * > a,
.bdt-breadcrumb > * > *,
.bdt-dropdown-nav .bdt-nav-sub a { color: var(--af-muted) !important; }
.bdt-nav-default > li > a:hover,
.bdt-nav-primary > li > a:hover,
.bdt-navbar-nav > li:hover > a,
.bdt-navbar-nav > li > a[aria-expanded="true"],
.bdt-navbar-item,
.bdt-navbar-toggle:hover,
.bdt-subnav > * > a:hover,
.bdt-tab > * > a:hover,
.bdt-breadcrumb > * > :hover { color: var(--af-text) !important; }
.bdt-nav-default > li.bdt-active > a,
.bdt-nav-primary > li.bdt-active > a,
.bdt-nav-secondary > li.bdt-active > a,
.bdt-navbar-nav > li.bdt-active > a,
.bdt-nav-header,
.bdt-subnav > .bdt-active > a,
.bdt-tab > .bdt-active > a { color: var(--af-heading) !important; }
.bdt-tab > .bdt-active > a { border-color: var(--af-primary) !important; }
.bdt-subnav-pill > .bdt-active > a { background-color: var(--af-primary) !important; color: #fff !important; }
.bdt-subnav-pill > * > a:hover { background-color: var(--af-bg-alt) !important; color: var(--af-text) !important; }
.bdt-dotnav > * > * { background-color: color-mix(in srgb, var(--af-muted) 30%, transparent) !important; }
.bdt-dotnav > .bdt-active > *,
.bdt-dotnav > * > :hover { background-color: var(--af-primary) !important; }
.bdt-slidenav { color: var(--af-heading); }
.bdt-slidenav:hover { color: var(--af-primary); }

/* 5. Base uikit accordion + tables + misc chrome. */
.bdt-accordion-title { color: var(--af-heading) !important; font-family: var(--af-font-heading); }
.bdt-accordion-title:hover { color: var(--af-primary) !important; }
.bdt-open > .bdt-accordion-title { color: var(--af-primary) !important; }
.bdt-table th { color: var(--af-heading) !important; font-family: var(--af-font-heading); }
.bdt-table caption { color: var(--af-muted) !important; }
.bdt-table-striped > tr:nth-of-type(odd),
.bdt-table-striped tbody tr:nth-of-type(odd) { background-color: var(--af-bg-alt) !important; }
.bdt-close, .bdt-totop { color: var(--af-muted); }
.bdt-close:hover, .bdt-totop:hover { color: var(--af-heading); }
.bdt-badge,
.bdt-label,
.bdt-card-badge { background-color: var(--af-primary) !important; color: #fff !important; }
.bdt-marker { background-color: var(--af-secondary) !important; color: #10202b !important; }

/* 6. Buttons — default (unconfigured) buttons match the theme CTA. */
.bdt-button { font-family: var(--af-font-heading); border-radius: var(--af-btn-radius, var(--af-radius)); }
.bdt-button-default { background-color: transparent; color: var(--af-heading); border: 1px solid var(--af-border); }
.bdt-button-default:hover { background-color: var(--af-surface); color: var(--af-heading); border-color: var(--af-primary); }
.bdt-button-primary { background-color: var(--af-btn-bg, var(--af-primary)); color: var(--af-btn-text, #fff); border: 1px solid transparent; }
.bdt-button-primary:hover { background-color: var(--af-btn-bg-hover, var(--af-primary-08)); color: var(--af-btn-text, #fff); }
.bdt-button-secondary { background-color: var(--af-secondary); color: #10202b; border: 1px solid transparent; }
.bdt-button-secondary:hover { background-color: var(--af-secondary-08, var(--af-secondary)); }
.bdt-button-text { color: var(--af-primary); }

/* 7. Form controls. */
.bdt-input, .bdt-select, .bdt-textarea, .bdt-search-input,
[class*="elementor-widget-bdt-"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[class*="elementor-widget-bdt-"] select,
[class*="elementor-widget-bdt-"] textarea {
	background-color: var(--af-bg-alt) !important;
	color: var(--af-text) !important;
	border: 1px solid var(--af-border) !important;
	border-radius: var(--af-radius-sm);
	font-family: var(--af-font-body);
}
.bdt-input:focus, .bdt-select:focus, .bdt-textarea:focus,
[class*="elementor-widget-bdt-"] input:focus,
[class*="elementor-widget-bdt-"] textarea:focus { border-color: var(--af-primary) !important; }
.bdt-form-label { color: var(--af-heading); font-family: var(--af-font-heading); }

/* 8. Progress / blockquote / overlays. */
.bdt-progress { background-color: var(--af-surface) !important; border-radius: var(--af-radius-sm); }
.bdt-progress-bar,
.bdt-progress::-webkit-progress-value { background-color: var(--af-primary) !important; }
.bdt-blockquote,
[class*="elementor-widget-bdt-"] blockquote { border-left-color: var(--af-primary); color: var(--af-text); }
.bdt-overlay-primary,
.bdt-position-cover.bdt-overlay { background-color: var(--af-rollover, rgba(10,20,29,0.72)); }

/* 9. Inverse (light-on-dark) contexts — keep legible on contrasting bg. */
.bdt-light, .bdt-light .bdt-h1, .bdt-light .bdt-h2, .bdt-light .bdt-h3,
.bdt-light .bdt-heading-primary { color: #fff !important; }
.bdt-light a:not(.bdt-button) { color: #fff; }
.bdt-light .bdt-text-muted { color: rgba(255,255,255,0.7) !important; }

/* 10. Per-widget SKIN cards. Only light card surfaces / dark text / blue are
 * touched — whites sitting on member photos & image overlays are left intact. */
[class*="elementor-widget-bdt-"] { --af-ep-shadow: 0 12px 30px -14px rgba(0,0,0,0.45); }
.skin-default .bdt-event-item,
.skin-default .bdt-event-item-inner,
.skin-annal .bdt-event-content,
.skin-acara .bdt-event-image-wrap .bdt-event-date a,
.skin-acara .bdt-event-price a { background-color: var(--af-surface) !important; }
.skin-default .bdt-event-item,
.skin-default .bdt-event-item-inner { box-shadow: var(--af-ep-shadow) !important; }
.skin-default .bdt-event-intro .bdt-event-title,
.skin-annal .bdt-event-content .bdt-event-title-wrap .bdt-event-title { color: var(--af-heading) !important; }
.bdt-ep-featured-box-default .bdt-ep-featured-box-content { background: var(--af-surface) !important; box-shadow: var(--af-ep-shadow) !important; }
.bdt-ep-brand-grid-checkbox,
.bdt-ep-brand-grid-content,
.elementor-widget-bdt-step-flow .bdt-step-flow-badge .bdt-badge { background-color: var(--af-surface) !important; }
/* Circle Info — theme the CONTENT panel (centre circle / list item) so its
 * heading stays readable in dark mode: the plugin gives it a fixed #fff
 * background + #757575 desc, and the title inherits the theme heading (light in
 * dark mode → invisible on white). The ring DOTS (.bdt-ep-circle-info-sub-circle)
 * are deliberately left to the plugin: it highlights the active dot with a
 * coloured circle + white icon, and forcing --af-surface flattened that and hid
 * the active icon. Deferential (.elementor prefix, no !important) — any colour
 * set on the widget in Elementor still wins. */
.elementor .bdt-ep-circle-info-item { background-color: var(--af-surface); }
.elementor .bdt-ep-circle-info-title { color: var(--af-heading); }
.elementor .bdt-ep-circle-info-desc { color: var(--af-muted); }
.bdt-fancy-icons-item { background: var(--af-surface) !important; }
.bdt-fancy-icons-item:hover { background: var(--af-primary) !important; }
.bdt-fancy-icons-item:hover a { color: #fff !important; }
.bdt-testimonial-grid-item-inner { background-color: var(--af-surface) !important; box-shadow: var(--af-ep-shadow) !important; }
.skin-band .bdt-member-role,
.skin-band .bdt-member-text { color: var(--af-muted) !important; }
.bdt-flip-box-front { background-color: var(--af-primary) !important; }
.bdt-ep-image-accordion-button a { background: var(--af-primary) !important; color: #fff !important; }
.bdt-ep-image-accordion-button a:hover { background: #fff !important; color: var(--af-primary) !important; }
.skin-ekip .bdt-member-icon:hover { color: var(--af-primary) !important; }

/* 11. Element Pack Advanced Accordion (.bdt-ep-accordion).
 * NB: no !important on the content's padding/height/margin — the plugin animates
 * those inline to expand/collapse; forcing them breaks the motion. */
.bdt-ep-accordion .bdt-ep-accordion-item { margin-bottom: 10px; }
.bdt-ep-accordion .bdt-ep-accordion-title {
	background: var(--af-surface) !important;
	color: var(--af-heading) !important;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	padding: 15px 20px;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.bdt-ep-accordion .bdt-ep-accordion-title:hover {
	border-color: var(--af-primary);
	color: var(--af-primary) !important;
}
.bdt-ep-accordion .bdt-ep-accordion-icon { color: var(--af-primary); }
.bdt-ep-accordion .bdt-ep-accordion-item.bdt-open > .bdt-ep-accordion-title {
	background: var(--af-primary) !important;
	color: #fff !important;
	border-color: var(--af-primary);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.bdt-ep-accordion .bdt-ep-accordion-item.bdt-open > .bdt-ep-accordion-title .bdt-ep-accordion-icon,
.bdt-ep-accordion .bdt-ep-accordion-item.bdt-open > .bdt-ep-accordion-title .bdt-ep-title-text { color: #fff !important; }
.bdt-ep-accordion .bdt-ep-accordion-content {
	color: var(--af-text);
	background: var(--af-bg-alt);
	border: 1px solid var(--af-border);
	border-top: 0;
	border-radius: 0 0 var(--af-radius-sm) var(--af-radius-sm);
	padding-left: 20px;
	padding-right: 20px;
}

/* 12. Price Table widget — theme touches, fully deferential to the plugin.
 * NO !important anywhere, so nothing is hard-locked: every colour/structure you
 * set in the Element Pack / Elementor controls overrides the theme.
 *
 * How it defers (verified load order on the live site):
 *   pos 6  = this skin (element-pack.css)
 *   pos 11 = plugin defaults (ep-price-table.css)   ← loads AFTER us
 *   pos 12+ = YOUR settings (post-<id>.css / local-<id>…)  ← load LAST
 * Because the plugin defaults load after us, an equal-specificity rule of ours
 * would lose to them — so we prefix each rule with `.elementor` (one extra
 * class). That's enough to beat the plugin's bare-class DEFAULTS, yet it's the
 * SAME specificity as Elementor's own `.elementor-element-<id> …` output, which
 * loads last and therefore wins. Net: we only skin what you haven't set.
 * (The reveal + hover at the end are JS/transform layers — they touch neither
 * configurable colour nor structure.)
 * ---- Branded tick icons (match the native .af-pricing-features ticks) --- *
 * Default the ticks to the brand accent using the SAME selectors Element Pack's
 * own icon-colour control uses — color on <i>, fill on <svg> — so a colour set
 * on the whole widget OR on a single feature item overrides ours (same/greater
 * specificity, and it loads after us). NEVER paint the inner <path> (svg *): in
 * SVG `fill` is inherited, so a direct fill on the path beats the user's
 * inherited value and silently locks the colour. */
.elementor .bdt-price-table-feature-icon i { color: var(--af-primary); }
.elementor .bdt-price-table-feature-icon svg { fill: var(--af-primary); }
/* ---- Price (plugin default is a fixed #555; currency/period muted) ----- */
.elementor .bdt-price-table-price { color: var(--af-heading); }
.elementor .bdt-price-table-currency,
.elementor .bdt-price-table-period { color: var(--af-muted); }
/* ---- Select-Plan button → theme CTA (static control defaults → tokens) - */
.elementor .bdt-price-table-button {
	background-color: var(--af-btn-bg, var(--af-primary));
	color: var(--af-btn-text, #fff);
	border-color: transparent;
}
.elementor .bdt-price-table-button:hover {
	background-color: var(--af-btn-bg-hover, var(--af-primary-08));
	color: var(--af-btn-text, #fff);
}
/* ---- Feature list leading (plugin ships line-height:1 → cramped rows) -- */
.elementor .bdt-price-table-feature-text,
.elementor .bdt-price-table-features-list li { line-height: 1.55; }
/* ---- Card frame — give each column its own identity -------------------- *
 * Columns ship with NO background/border, so the flat #eaeaea header bands of
 * 5 flush columns run together into one connected strip. Frame each column as a
 * theme card (surface + hairline + radius + soft shadow) so they read as
 * separate cards, and blend the grey band into the card so the header adapts to
 * dark mode. Deferential: set a Background / Border / Header colour on the
 * widget and it overrides these (loads later at equal specificity). */
.elementor .bdt-price-table {
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	box-shadow: 0 14px 40px -28px rgba(0, 0, 0, .45);
}
/* Header may carry an accent background (set in Elementor). Round its top
 * corners to the card radius so the accent cap matches the rounded bottom —
 * symmetric top-and-bottom. background-clip keeps the fill inside the border. */
.elementor .bdt-price-table-header {
	background: transparent;
	border-top-left-radius: var(--af-radius);
	border-top-right-radius: var(--af-radius);
	background-clip: padding-box;
}
/* ---- Reveal + subtle hover lift (transform/opacity only, no reflow) ---- *
 * One transition serves both the JS scroll-reveal (opacity + rise) and the
 * hover lift, so the fade-in still works with the higher-specificity rule. */
.elementor .bdt-price-table { transition: opacity .8s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.elementor .bdt-price-table:hover { transform: translateY(-6px); box-shadow: 0 22px 55px -26px rgba(0, 0, 0, .5); }
/* ---- Mobile: stack the columns ---------------------------------------- *
 * The V4 atomic flexbox row (.e-flexbox-base) is flex-direction:row with NO
 * wrap, so on phones the 5 price columns squeeze into one unreadable row.
 * Stack them into a single column of full-width cards with clear vertical
 * spacing. Scoped with :has to ONLY the flexbox that directly holds price-table
 * widgets, so no other container layout is touched. */
@media (max-width: 767.98px) {
	.elementor .e-flexbox-base:has( > .elementor-widget-bdt-price-table ) {
		flex-direction: column;
		gap: 20px;
	}
}