/**
 * WP Simple Tabs - default styles
 *
 * Every visual property is a CSS custom property scoped to .wpst-tabs,
 * with sensible fallbacks baked into each var() call. The shortcode /
 * settings-page path sets these inline per-instance; the Elementor
 * widget instead lets Elementor generate its own CSS against the same
 * selectors (.wpst-tab, .wpst-panel, etc.), which simply wins because
 * it's more specific / loaded later -- no double system to maintain.
 */

.wpst-tabs {
	--wpst-tab-font-size: 0.95rem;
	--wpst-tab-font-weight: 500;
	--wpst-tab-letter-spacing: normal;
	--wpst-tab-text-transform: none;

	--wpst-tab-color: #6B7280;
	--wpst-tab-color-active: #1B4B43;
	--wpst-tab-bg: transparent;
	--wpst-tab-bg-active: transparent;
	--wpst-tab-border-color: #E4E2DC;
	--wpst-indicator-color: #1B4B43;

	--wpst-tab-border-width: 1px;
	--wpst-tab-border-radius: 6px;
	--wpst-tab-padding-top: 0.65rem;
	--wpst-tab-padding-right: 1rem;
	--wpst-tab-padding-bottom: 0.65rem;
	--wpst-tab-padding-left: 1rem;
	--wpst-tab-gap: 0.5rem;
	--wpst-indicator-height: 2px;

	--wpst-icon-size: 1.1rem;
	--wpst-icon-gap: 0.5rem;
	--wpst-icon-margin: 0px;

	--wpst-expanded-bg: transparent;
	--wpst-expanded-color: #4B5563;
	--wpst-expanded-font-size: 0.85rem;
	--wpst-expanded-gap: 0.5rem;
	--wpst-expanded-button-gap: 0.5rem;

	--wpst-button-bg: #1B4B43;
	--wpst-button-color: #ffffff;
	--wpst-button-bg-hover: #14382f;
	--wpst-button-color-hover: #ffffff;
	--wpst-button-font-size: 0.85rem;
	--wpst-button-font-weight: 600;
	--wpst-button-padding-v: 0.5rem;
	--wpst-button-padding-h: 1rem;
	--wpst-button-border-radius: 6px;
	--wpst-button-border-width: 0px;
	--wpst-button-border-style: solid;
	--wpst-button-border-color: transparent;
	--wpst-button-icon-size: 1em;
	--wpst-button-icon-margin: 0px;
	--wpst-button-icon-gap: 0.4rem;

	--wpst-panel-bg: transparent;
	--wpst-panel-color: #1F2430;
	--wpst-panel-border-color: transparent;
	--wpst-panel-border-width: 0px;
	--wpst-panel-border-radius: 0px;
	--wpst-panel-padding-top: 0px;
	--wpst-panel-padding-right: 0px;
	--wpst-panel-padding-bottom: 0px;
	--wpst-panel-padding-left: 0px;

	--wpst-transition-duration: 0.1875s;
	--wpst-panel-animation-speed: 0.3s;

	color: var( --wpst-panel-color );
	max-width: 100%;
}

/* ---------- Overall layout: horizontal vs vertical ---------- */

.wpst-tabs.wpst-orientation-horizontal {
	display: block;
}

.wpst-tabs.wpst-orientation-vertical {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.wpst-tabs.wpst-orientation-vertical .wpst-tablist {
	flex-direction: column;
	flex: 0 0 auto;
	width: var( --wpst-tabs-width, 180px );
}

.wpst-tabs.wpst-orientation-vertical .wpst-panels {
	flex: 1 1 0%;
	min-width: 0;
}

/* ---------- Tab list (the row/column of buttons) ---------- */

.wpst-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wpst-tab-gap );
	margin-bottom: 1.25rem;
}

.wpst-orientation-vertical .wpst-tablist {
	margin-bottom: 0;
}

.wpst-align-left .wpst-tablist { justify-content: left; }
.wpst-align-center .wpst-tablist { justify-content: center; }
.wpst-align-right .wpst-tablist { justify-content: right; }
.wpst-align-justify .wpst-tablist { justify-content: stretch; }
.wpst-align-justify.wpst-orientation-horizontal .wpst-tab { flex: 1 1 0; }

.wpst-orientation-horizontal .wpst-tab {
	min-width: var( --wpst-tabs-width, auto );
}

/* ---------- Tab buttons ---------- */

.wpst-tab {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	font-size: var( --wpst-tab-font-size );
	font-weight: var( --wpst-tab-font-weight );
	letter-spacing: var( --wpst-tab-letter-spacing );
	text-transform: var( --wpst-tab-text-transform );
	line-height: 1.3;
	color: var( --wpst-tab-color );
	background-color: var( --wpst-tab-bg );
	border: var( --wpst-tab-border-width ) solid transparent;
	border-radius: var( --wpst-tab-border-radius );
	padding: var( --wpst-tab-padding-top ) var( --wpst-tab-padding-right ) var( --wpst-tab-padding-bottom ) var( --wpst-tab-padding-left );
	transition: color var( --wpst-transition-duration ) ease,
		background-color var( --wpst-transition-duration ) ease,
		border-color var( --wpst-transition-duration ) ease;
}

.wpst-tab-header {
	display: flex;
	align-items: center;
	gap: var( --wpst-icon-gap );
	width: 100%;
}

.wpst-tab:hover {
	color: var( --wpst-tab-color-active );
}

.wpst-tab:focus-visible {
	outline: 2px solid var( --wpst-indicator-color );
	outline-offset: 2px;
}

.wpst-tab.is-active {
	color: var( --wpst-tab-color-active );
	background-color: var( --wpst-tab-bg-active );
}

/* Title alignment: how the icon+label row is positioned within the
   tab (matters most when the tab has extra width -- vertical
   orientation, "justify" tab alignment, or the boxed style). */
.wpst-title-align-left .wpst-tab-header { justify-content: left; text-align: left; }
.wpst-title-align-center .wpst-tab-header { justify-content: center; text-align: center; }
.wpst-title-align-right .wpst-tab-header { justify-content: right; text-align: right; }

/* Icon position variants -- these apply to the header row only, so the
   expanded block below always stacks the same way regardless of icon
   placement. */
.wpst-icon-before .wpst-tab-header { flex-direction: row; }
.wpst-icon-after .wpst-tab-header { flex-direction: row-reverse; }
.wpst-icon-top .wpst-tab-header { flex-direction: column; }

.wpst-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var( --wpst-icon-size ) !important;
	margin: var( --wpst-icon-margin );
	line-height: 1;
	flex-shrink: 0;
}

.wpst-tab-icon svg {
	width: 1em;
	height: 1em;
}

/* WordPress core's Dashicons uniquely hardcode width/height/font-size
   (all 20px) directly on .dashicons -- confirmed from the WP core
   source. This override is scoped to .dashicons specifically so it
   doesn't interfere with Elementor's own icon rendering (which sizes
   itself from the wrapper's font-size and needs no extra help). */
.wpst-tab-icon .dashicons {
	width: 1em !important;
	height: 1em !important;
	font-size: inherit !important;
	line-height: 1 !important;
}

/* Active/inactive icon swap: both spans are in the DOM, only one shows
   at a time, purely via CSS keyed off the .is-active class already
   toggled by JS for the tab itself -- no extra script needed. */
.wpst-tab-icon-active {
	display: none;
}

.wpst-tab.is-active .wpst-tab-icon-active {
	display: inline-flex;
}

.wpst-tab.is-active .wpst-tab-icon-inactive {
	display: none;
}

/* ---------- Expanded info block (shown only on the active tab) ---------- */

.wpst-tab-expanded {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	margin-top: 0;
	background-color: var( --wpst-expanded-bg );
	transition: max-height var( --wpst-transition-duration ) ease,
		opacity var( --wpst-transition-duration ) ease,
		margin-top var( --wpst-transition-duration ) ease,
		visibility var( --wpst-transition-duration ) ease;
}

.wpst-tab.is-active .wpst-tab-expanded {
	max-height: 400px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	margin-top: var( --wpst-expanded-gap );
}

/* Button alignment: physical left/center/right via text-align, which
   positions both the block text and the inline-block button below --
   robust regardless of any RTL context (unlike align-items, which has
   no true physical left/right equivalent). */
.wpst-button-align-left .wpst-tab-expanded { text-align: left; }
.wpst-button-align-center .wpst-tab-expanded { text-align: center; }
.wpst-button-align-right .wpst-tab-expanded { text-align: right; }

.wpst-tab-expanded-text {
	display: block;
	color: var( --wpst-expanded-color );
	font-size: var( --wpst-expanded-font-size );
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}

.wpst-tab-expanded-text + .wpst-tab-button {
	margin-top: var( --wpst-expanded-button-gap );
}

.wpst-tab-button {
	display: inline-flex;
	align-items: center;
	gap: var( --wpst-button-icon-gap );
	color: var( --wpst-button-color );
	background-color: var( --wpst-button-bg );
	font-size: var( --wpst-button-font-size );
	font-weight: var( --wpst-button-font-weight );
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.2;
	padding: var( --wpst-button-padding-v ) var( --wpst-button-padding-h );
	border-radius: var( --wpst-button-border-radius );
	border: var( --wpst-button-border-width ) var( --wpst-button-border-style ) var( --wpst-button-border-color );
	transition: background-color var( --wpst-transition-duration ) ease,
		color var( --wpst-transition-duration ) ease,
		border-color var( --wpst-transition-duration ) ease;
}

.wpst-tab-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var( --wpst-button-icon-size ) !important;
	margin: var( --wpst-button-icon-margin );
	line-height: 1;
	flex-shrink: 0;
}

.wpst-tab-button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* WordPress core's Dashicons uniquely hardcode width/height/font-size
   (all 20px) directly on .dashicons -- confirmed from the WP core
   source. This override is scoped to .dashicons specifically so it
   doesn't interfere with Elementor's own icon rendering (which sizes
   itself from the wrapper's font-size and needs no extra help). */
.wpst-tab-button-icon .dashicons {
	width: 1em !important;
	height: 1em !important;
	font-size: inherit !important;
	line-height: 1 !important;
}

.wpst-tab-button:hover,
.wpst-tab-button:focus-visible {
	color: var( --wpst-button-color-hover );
	background-color: var( --wpst-button-bg-hover );
	border-color: var( --wpst-button-border-color-hover, var( --wpst-button-border-color ) );
}

.wpst-tab-button:focus-visible {
	outline: 2px solid var( --wpst-button-bg-hover );
	outline-offset: 2px;
}

/* ---------- Style: underline (default) ---------- */

.wpst-style-underline .wpst-tablist {
	border-bottom: var( --wpst-tab-border-width ) solid var( --wpst-tab-border-color );
}

.wpst-style-underline.wpst-orientation-vertical .wpst-tablist {
	border-bottom: none;
	border-right: var( --wpst-tab-border-width ) solid var( --wpst-tab-border-color );
}

.wpst-style-underline .wpst-tab {
	border: none;
	border-bottom: var( --wpst-indicator-height ) solid transparent;
	margin-bottom: calc( -1 * var( --wpst-tab-border-width ) );
}

.wpst-style-underline.wpst-orientation-vertical .wpst-tab {
	border-bottom: none;
	border-right: var( --wpst-indicator-height ) solid transparent;
	margin-bottom: 0;
	margin-right: calc( -1 * var( --wpst-tab-border-width ) );
}

.wpst-style-underline .wpst-tab.is-active {
	border-bottom-color: var( --wpst-indicator-color );
}

.wpst-style-underline.wpst-orientation-vertical .wpst-tab.is-active {
	border-right-color: var( --wpst-indicator-color );
}

/* ---------- Style: pills ---------- */

.wpst-style-pills .wpst-tab {
	border: var( --wpst-tab-border-width ) solid var( --wpst-tab-border-color );
}

.wpst-style-pills .wpst-tab.is-active {
	border-color: var( --wpst-indicator-color );
}

/* ---------- Style: boxed (card-like container around the whole tablist) ---------- */

.wpst-style-boxed .wpst-tablist {
	border: var( --wpst-tab-border-width ) solid var( --wpst-tab-border-color );
	border-radius: var( --wpst-tab-border-radius );
	padding: 0.25rem;
}

.wpst-style-boxed .wpst-tab {
	border: none;
}

.wpst-style-boxed .wpst-tab.is-active {
	background-color: var( --wpst-tab-bg-active, #fff );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}

/* ---------- Panels ---------- */

.wpst-panels {
	position: relative;
	max-width: var( --wpst-content-width, none );
}

/* Fade mode: stack every panel in the same CSS Grid cell so they can
   crossfade via opacity without needing JS to measure heights -- the
   grid row sizes itself to the tallest panel automatically. */
.wpst-panels.wpst-panels-animate-fade {
	display: grid;
}

.wpst-panels.wpst-panels-animate-fade .wpst-panel {
	grid-area: 1 / 1 / 2 / 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --wpst-panel-animation-speed ) ease,
		visibility 0s linear var( --wpst-panel-animation-speed );
}

.wpst-panels.wpst-panels-animate-fade .wpst-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var( --wpst-panel-animation-speed ) ease,
		visibility 0s linear 0s;
}

.wpst-panel {
	background-color: var( --wpst-panel-bg );
	color: var( --wpst-panel-color );
	border: var( --wpst-panel-border-width ) solid var( --wpst-panel-border-color );
	border-radius: var( --wpst-panel-border-radius );
	padding: var( --wpst-panel-padding-top ) var( --wpst-panel-padding-right ) var( --wpst-panel-padding-bottom ) var( --wpst-panel-padding-left );
	font-size: var( --wpst-panel-font-size, inherit );
	line-height: 1.6;
}

.wpst-panel[hidden] {
	display: none;
}

.wpst-panel p:first-child { margin-top: 0; }
.wpst-panel p:last-child { margin-bottom: 0; }

/* Mobile accordion: JS physically relocates each panel to sit right
   after its own tab (and back to .wpst-panels on desktop) rather than
   rendering the content twice. This just adds spacing for whichever
   panel currently happens to be positioned there. */
.wpst-tab + .wpst-panel {
	margin-top: var( --wpst-expanded-gap, 0.5rem );
}

/* When a tab's content is a full Elementor template rather than plain
   text, let the template's own widgets control padding/color/typography
   instead of doubling up with our panel defaults. */
.wpst-panel.wpst-panel-is-template {
	padding: 0;
	color: inherit;
}

/* Image content type: the image (or its link wrapper) is inline-block
   so physical text-align controls its position -- same robust,
   RTL-safe technique used for button alignment. overflow:hidden clips
   the image to the panel's own border-radius (matters when panel
   padding is 0, so the image sits flush against the rounded edges). */
.wpst-panel.wpst-panel-is-image {
	overflow: hidden;
}

.wpst-panel-is-image img,
.wpst-panel-is-image a {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: inherit;
	vertical-align: middle;
}

.wpst-panel-image-align-left { text-align: left; }
.wpst-panel-image-align-center { text-align: center; }
.wpst-panel-image-align-right { text-align: right; }

/* ---------- Motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.wpst-tab,
	.wpst-tab-expanded,
	.wpst-tab-button,
	.wpst-panels-animate-fade .wpst-panel {
		transition: none;
	}
}

/* ---------- Mobile accordion (768px and below) ---------- */
/*
 * Below this width, tabs stack full-width and each one's content
 * expands directly beneath it -- a true accordion -- regardless of
 * the desktop orientation or style setting. JS relocates each panel
 * to sit right after its own tab (see tabs.js); this just handles the
 * layout side. Opt out per-instance with mobile_accordion="no" (adds
 * .wpst-no-mobile-accordion).
 */
@media ( max-width: 768px ) {
	.wpst-tabs:not( .wpst-no-mobile-accordion ) .wpst-tablist {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
	}

	.wpst-tabs:not( .wpst-no-mobile-accordion ) .wpst-tab,
	.wpst-tabs:not( .wpst-no-mobile-accordion ) .wpst-tablist > .wpst-panel {
		width: 100%;
		flex: 1 0 auto;
		box-sizing: border-box;
	}

	/* Vertical orientation's sidebar column width no longer applies --
	   every tab becomes a full-width accordion row instead. */
	.wpst-tabs.wpst-orientation-vertical:not( .wpst-no-mobile-accordion ) .wpst-tablist {
		width: 100%;
	}
}

/* ---------- Responsive typography (768px and below) ---------- */
/*
 * Optional mobile-specific font sizes for the tab label, panel content,
 * button, and expanded-info text. Each falls back to its desktop value
 * automatically when no mobile override is set, so nothing changes
 * until you configure one.
 */
@media ( max-width: 768px ) {
	.wpst-tab {
		font-size: var( --wpst-tab-font-size-mobile, var( --wpst-tab-font-size ) );
	}

	.wpst-panel {
		font-size: var( --wpst-panel-font-size-mobile, var( --wpst-panel-font-size, inherit ) );
	}

	.wpst-tab-button {
		font-size: var( --wpst-button-font-size-mobile, var( --wpst-button-font-size ) );
	}

	.wpst-tab-expanded-text {
		font-size: var( --wpst-expanded-font-size-mobile, var( --wpst-expanded-font-size ) );
	}
}



@media ( max-width: 480px ) {
	.wpst-orientation-horizontal .wpst-tablist {
		gap: 0;
	}

	.wpst-orientation-horizontal .wpst-tab {
		flex: 1 1 auto;
		padding: 0.6rem 0.5rem;
		font-size: 0.875rem;
	}

	.wpst-orientation-vertical.wpst-tabs {
		flex-direction: column;
	}

	.wpst-orientation-vertical .wpst-tablist {
		flex-direction: row;
		min-width: 0;
		border-right: none !important;
	}
}