/* ============================================================
   DAPPER WPS Tabs — Frontend CSS
   Scoped entirely under .dwps-* — no theme or Elementor leakage.
   Colors driven by CSS custom properties set by JS from settings.
   ============================================================ */

/* ── Base / Reset ────────────────────────────────────────────── */
.dwps-tabs {
	--dwps-accent:       #2196F3;
	--dwps-accent-rgb:   33, 150, 243;
	--dwps-border:       #e2e5ea;
	--dwps-tab-bg:       #f4f6f8;
	--dwps-tab-bg-hover: #eaecf0;
	--dwps-radius:       6px;
	--dwps-ease:         .2s ease;

	font-family: inherit;
	font-size:   inherit;
	color:       inherit;
	line-height: inherit;
	margin:      20px 0 0;
	padding:     0;
}

.dwps-tabs *,
.dwps-tabs *::before,
.dwps-tabs *::after {
	box-sizing: border-box;
}

/* ── Tab Navigation Wrapper ──────────────────────────────────── */
.dwps-nav-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;   /* Firefox */
}
.dwps-nav-wrap::-webkit-scrollbar { display: none; }

.dwps-tabs-list {
	display:     flex;
	flex-wrap:   nowrap;
	margin:      0;
	padding:     0;
	list-style:  none;
	gap:         0;
}

.dwps-tab-item {
	flex-shrink: 0;
}

/* ── Tab Button ──────────────────────────────────────────────── */
.dwps-tab-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	padding:        10px 18px;
	background:     none;
	border:         0;
	font-family:    inherit;
	font-size:      14px;
	font-weight:    500;
	color:          #666;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     color var(--dwps-ease), background var(--dwps-ease), border-color var(--dwps-ease);
	outline:        none;
	line-height:    1.4;
}

.dwps-tab-btn:hover:not(:disabled) {
	color: var(--dwps-accent);
}

.dwps-tab-item.dwps-disabled .dwps-tab-btn {
	opacity: .42;
	cursor:  not-allowed;
}

.dwps-tab-btn:focus-visible {
	outline:        2px solid var(--dwps-accent);
	outline-offset: 2px;
	border-radius:  3px;
}

.dwps-tab-icon {
	font-size: 1em;
	line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   STYLE: DEFAULT  (classic bordered tabs — matches old plugin)
   ══════════════════════════════════════════════════════════════ */
.dwps-style-default .dwps-tabs-list {
	border-bottom: 1px solid var(--dwps-border);
}

.dwps-style-default .dwps-tab-btn {
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding:       11px 18px 10px;
	border-radius: var(--dwps-radius) var(--dwps-radius) 0 0;
	background:    var(--dwps-tab-bg);
	margin-right:  2px;
	color:         #555;
}

.dwps-style-default .dwps-tab-btn:hover:not(:disabled) {
	background: var(--dwps-tab-bg-hover);
	color:      #333;
}

.dwps-style-default .dwps-tab-item.dwps-active .dwps-tab-btn {
	background:          #fff;
	color:               #222;
	font-weight:         600;
	border-bottom-color: var(--dwps-accent);
}

.dwps-style-default .dwps-panels {
	border:        1px solid var(--dwps-border);
	border-top:    none;
	padding:       24px;
	border-radius: 0 0 var(--dwps-radius) var(--dwps-radius);
	background:    #fff;
}

/* ══════════════════════════════════════════════════════════════
   STYLE: UNDERLINE  (minimal, modern)
   ══════════════════════════════════════════════════════════════ */
.dwps-style-underline .dwps-tabs-list {
	border-bottom: 2px solid var(--dwps-border);
	gap:           4px;
}

.dwps-style-underline .dwps-tab-btn {
	border-bottom:  3px solid transparent;
	margin-bottom: -2px;
	padding:        12px 14px;
}

.dwps-style-underline .dwps-tab-item.dwps-active .dwps-tab-btn {
	color:               var(--dwps-accent);
	border-bottom-color: var(--dwps-accent);
	font-weight:         600;
}

.dwps-style-underline .dwps-panels {
	padding-top: 20px;
}

/* ══════════════════════════════════════════════════════════════
   STYLE: PILLS  (rounded buttons)
   ══════════════════════════════════════════════════════════════ */
.dwps-style-pills .dwps-tabs-list {
	border:  none;
	gap:     6px;
	padding: 4px 0 12px;
	flex-wrap: wrap;
}

.dwps-style-pills .dwps-tab-btn {
	border:        1.5px solid var(--dwps-border);
	border-radius: 100px;
	padding:       8px 18px;
	margin:        0;
	background:    #fff;
}

.dwps-style-pills .dwps-tab-btn:hover:not(:disabled) {
	background:    rgba(var(--dwps-accent-rgb), .07);
	border-color:  var(--dwps-accent);
	color:         var(--dwps-accent);
}

.dwps-style-pills .dwps-tab-item.dwps-active .dwps-tab-btn {
	background:   var(--dwps-accent);
	color:        #fff;
	border-color: var(--dwps-accent);
	font-weight:  600;
}

/* ══════════════════════════════════════════════════════════════
   STYLE: BOXED  (equal-width tab headers)
   ══════════════════════════════════════════════════════════════ */
.dwps-style-boxed .dwps-tabs-list {
	border:        1px solid var(--dwps-border);
	border-bottom: none;
	border-radius: var(--dwps-radius) var(--dwps-radius) 0 0;
	overflow:      hidden;
}

.dwps-style-boxed .dwps-tab-item {
	flex: 1;
}

.dwps-style-boxed .dwps-tab-btn {
	width:            100%;
	justify-content:  center;
	padding:          12px 8px;
	border:           none;
	border-right:     1px solid var(--dwps-border);
	border-bottom:    2px solid var(--dwps-border);
	border-radius:    0;
	margin:           0;
	background:       var(--dwps-tab-bg);
	color:            #555;
	font-size:        13px;
}

.dwps-style-boxed .dwps-tab-item:last-child .dwps-tab-btn {
	border-right: none;
}

.dwps-style-boxed .dwps-tab-item.dwps-active .dwps-tab-btn {
	background:          #fff;
	color:               var(--dwps-accent);
	font-weight:         600;
	border-bottom-color: transparent;
}

.dwps-style-boxed .dwps-panels {
	border:        1px solid var(--dwps-border);
	border-top:    none;
	padding:       24px;
	border-radius: 0 0 var(--dwps-radius) var(--dwps-radius);
	background:    #fff;
}

/* ══════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════ */
.dwps-panels {
	padding-top: 20px;
}

/* Hide all panels by default */
.dwps-panel               { display: none; }
.dwps-panel[hidden]       { display: none !important; }
.dwps-panel.dwps-panel-active { display: block; }

/* Fade-in on panel switch */
@keyframes dwps-fadein {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: translateY(0);   }
}

.dwps-panel-content {
	animation: dwps-fadein .22s ease;
}

/* ══════════════════════════════════════════════════════════════
   ACCORDION HEADER  (hidden on desktop, shown on mobile)
   ══════════════════════════════════════════════════════════════ */
.dwps-accordion-header {
	display:       none; /* hidden on desktop */
	width:         100%;
	text-align:    left;
	align-items:   center;
	gap:           10px;
	padding:       13px 16px;
	background:    var(--dwps-tab-bg);
	border:        1px solid var(--dwps-border);
	border-radius: var(--dwps-radius);
	font-family:   inherit;
	font-size:     14px;
	font-weight:   600;
	color:         inherit;
	cursor:        pointer;
	transition:    background var(--dwps-ease), color var(--dwps-ease);
	line-height:   1.4;
	margin-bottom: 0;
}

.dwps-accordion-header:hover {
	background: var(--dwps-tab-bg-hover);
}

/* Animated chevron arrow */
.dwps-accordion-chevron {
	margin-left:   auto;
	flex-shrink:   0;
	display:       inline-block;
	width:         10px;
	height:        10px;
	border-right:  2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform:     rotate(45deg) translate(-2px, -2px);
	transition:    transform var(--dwps-ease);
}

.dwps-panel.dwps-panel-active .dwps-accordion-header .dwps-accordion-chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ══════════════════════════════════════════════════════════════
   VERTICAL LAYOUT
   ══════════════════════════════════════════════════════════════ */
.dwps-vertical {
	display:     flex;
	gap:         24px;
	align-items: flex-start;
}

.dwps-vertical .dwps-nav-wrap {
	width:       200px;
	min-width:   160px;
	flex-shrink: 0;
	overflow-x:  visible;
	overflow-y:  auto;
}

.dwps-vertical .dwps-tabs-list {
	flex-direction: column;
	border-bottom:  none;
	border-right:   2px solid var(--dwps-border);
	gap:            2px;
}

.dwps-vertical .dwps-tab-btn {
	border-bottom:  none;
	border-right:   3px solid transparent;
	margin-right:   -2px;
	margin-bottom:  0;
	text-align:     left;
	width:          100%;
	padding:        10px 16px;
	border-radius:  var(--dwps-radius) 0 0 var(--dwps-radius);
	background:     none;
}

.dwps-vertical .dwps-tab-btn:hover:not(:disabled) {
	background: rgba(var(--dwps-accent-rgb), .06);
}

.dwps-vertical .dwps-tab-item.dwps-active .dwps-tab-btn {
	background:        rgba(var(--dwps-accent-rgb), .08);
	color:             var(--dwps-accent);
	border-right-color: var(--dwps-accent);
	font-weight:       600;
}

.dwps-vertical .dwps-panels {
	flex:       1;
	padding:    0;
	min-width:  0;
}

/* ══════════════════════════════════════════════════════════════
   ALIGNMENT
   ══════════════════════════════════════════════════════════════ */
.dwps-align-center .dwps-tabs-list { justify-content: center; flex-wrap: wrap; }
.dwps-align-right  .dwps-tabs-list { justify-content: flex-end; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   STICKY TAB NAV (Bonus Feature)
   ══════════════════════════════════════════════════════════════ */
.dwps-sticky-nav.is-stuck {
	position:   sticky;
	top:        0;
	z-index:    99;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
	padding:    0 2px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 1024 px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	/* Collapse vertical layout to horizontal */
	.dwps-vertical {
		flex-direction: column;
	}

	.dwps-vertical .dwps-nav-wrap {
		width:    100%;
		overflow-x: auto;
	}

	.dwps-vertical .dwps-tabs-list {
		flex-direction: row;
		border-right:   none;
		border-bottom:  2px solid var(--dwps-border);
	}

	.dwps-vertical .dwps-tab-btn {
		border-right:  none;
		border-bottom: 3px solid transparent;
		margin-right:  0;
		margin-bottom: -2px;
		width:         auto;
		border-radius: var(--dwps-radius) var(--dwps-radius) 0 0;
	}

	.dwps-vertical .dwps-tab-item.dwps-active .dwps-tab-btn {
		border-right-color: transparent;
		border-bottom-color: var(--dwps-accent);
	}

	.dwps-vertical .dwps-panels {
		padding-top: 16px;
	}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 600 px)  ← Bonus Feature: accordion
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

	/* ── ACCORDION MODE (default) ── */
	.dwps-mobile-accordion .dwps-nav-wrap  { display: none; }

	.dwps-mobile-accordion .dwps-panels    { padding-top: 0; }

	/* All panels visible in accordion mode */
	.dwps-mobile-accordion .dwps-panel,
	.dwps-mobile-accordion .dwps-panel[hidden] {
		display:       block !important;
		margin-bottom: 6px;
	}

	/* Show accordion header buttons */
	.dwps-mobile-accordion .dwps-accordion-header {
		display:     flex;
		margin-bottom: 0;
		border-radius: var(--dwps-radius);
	}

	/* Expand/collapse panel content */
	.dwps-mobile-accordion .dwps-panel .dwps-panel-content {
		display:       none;
		padding:       16px 6px 6px;
		animation:     dwps-fadein .18s ease;
	}

	.dwps-mobile-accordion .dwps-panel.dwps-panel-active .dwps-panel-content {
		display: block;
	}

	/* Active accordion header highlight */
	.dwps-mobile-accordion .dwps-panel.dwps-panel-active .dwps-accordion-header {
		background:   rgba(var(--dwps-accent-rgb), .08);
		color:        var(--dwps-accent);
		border-color: var(--dwps-accent);
	}

	/* Panels without borders in default style on accordion mode */
	.dwps-style-default.dwps-mobile-accordion .dwps-panels,
	.dwps-style-boxed.dwps-mobile-accordion   .dwps-panels {
		border:        none;
		padding:       0;
		background:    transparent;
	}

	/* ── SCROLL MODE ── */
	.dwps-mobile-scroll .dwps-nav-wrap {
		overflow-x: auto;
	}

	.dwps-mobile-scroll .dwps-accordion-header { display: none; }

	.dwps-mobile-scroll .dwps-panel,
	.dwps-mobile-scroll .dwps-panel[hidden] {
		/* Keep normal panel behaviour */
	}

	/* ── TABS MODE (keep as-is, just smaller) ── */
	.dwps-mobile-tabs .dwps-tab-btn {
		padding:   9px 12px;
		font-size: 13px;
	}

	.dwps-mobile-tabs .dwps-accordion-header { display: none; }

	/* Small screens: wrap tabs if needed */
	.dwps-mobile-tabs .dwps-tabs-list {
		flex-wrap: wrap;
	}

	/* List layout: flip cards to column on mobile */
	.dwps-layout-list .dwps-card { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.dwps-panel-content       { animation: none; }
	.dwps-tab-btn,
	.dwps-accordion-header,
	.dwps-accordion-chevron   { transition: none; }
}