/**
 * Dresium Button Components
 *
 * Reusable button styles for all Dresium interfaces
 *
 * @package Dresium
 * @version 2.0.0
 */

/* ============================================
   BASE BUTTON
   ============================================ */

.dresium-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dresium-space-2);

	padding: var(--dresium-space-3) var(--dresium-space-6);

	font-family: var(--dresium-font-primary);
	font-size: var(--dresium-text-base); /* RG-WEBDEV: Default (md) size, overridden by --sm/--lg/--xl */
	font-weight: var(--dresium-weight-medium);
	line-height: var(--dresium-leading-tight); /* RG-WEBDEV: 1.25 for consistent height with settings/switch buttons */
	text-decoration: none;
	white-space: nowrap;

	border: 1px solid transparent;
	border-radius: var(--dresium-radius-lg);

	cursor: pointer;
	user-select: none;

	transition: all var(--dresium-transition-fast) var(--dresium-ease);

	/* RG-WEBDEV: Default (md) height to match settings/switch (36px) */
	height: 36px;

	outline: none !important;
}

.dresium-btn:focus-visible {
	outline: 2px solid var(--dresium-primary);
	outline-offset: 2px;
}

.dresium-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

/* Primary Button */
.dresium-btn--primary {
	background-color: var(--dresium-primary);
	color: var(--dresium-white);
	border-color: var(--dresium-primary);
	font-family: var(--dresium-font-display);
	font-size: var(--dresium-text-lg);
	font-weight: var(--dresium-weight-semibold);
}

.dresium-btn--primary:hover:not(:disabled) {
	background-color: var(--dresium-primary-hover);
	border-color: var(--dresium-primary-hover);
	box-shadow: var(--dresium-shadow-md);
	color: var(--dresium-white);
}

.dresium-btn--primary:focus:not(:disabled),
.dresium-btn--primary:active:not(:disabled) {
	box-shadow: var(--dresium-shadow-sm);
	color: var(--dresium-white);
}

/* Gradient Button */
.dresium-btn--gradient {
	background: var(--dresium-gradient);
	color: var(--dresium-white);
	border: none;
	font-family: var(--dresium-font-display);
	font-size: var(--dresium-text-lg);
	font-weight: var(--dresium-weight-semibold);
}

.dresium-btn--gradient:hover:not(:disabled) {
	background: var(--dresium-gradient-hover);
	color: var(--dresium-white); /* RG-WEBDEV */
	box-shadow: var(--dresium-shadow-lg);
}

.dresium-btn--gradient:focus:not(:disabled),
.dresium-btn--gradient:active:not(:disabled) {
	box-shadow: var(--dresium-shadow-md);
	color: var(--dresium-white);
}

/* Secondary Button */
.dresium-btn--secondary {
	background-color: var(--dresium-white);
	color: var(--dresium-primary);
	border-color: var(--dresium-primary);
}

.dresium-btn--secondary:hover:not(:disabled) {
	background-color: var(--dresium-gray-50);
	border-color: var(--dresium-primary-hover);
	color: var(--dresium-primary-hover);
}

.dresium-btn--secondary:active:not(:disabled) {
	background-color: var(--dresium-gray-100);
}

/* Ghost Button */
.dresium-btn--ghost {
	background-color: transparent;
	color: var(--dresium-gray-700);
	border-color: transparent;
}

.dresium-btn--ghost:hover:not(:disabled) {
	background-color: var(--dresium-gray-100);
	color: var(--dresium-gray-900);
}

.dresium-btn--ghost:active:not(:disabled) {
	background-color: var(--dresium-gray-200);
}

/* Danger/Delete Button */
.dresium-btn--danger {
	background-color: var(--dresium-error);
	color: var(--dresium-white);
	border-color: var(--dresium-error);
}

.dresium-btn--danger:hover:not(:disabled) {
	background-color: #dc2626;
	border-color: #dc2626;
}

/* Success Button */
.dresium-btn--success {
	background-color: var(--dresium-success);
	color: var(--dresium-white);
	border-color: var(--dresium-success);
}

.dresium-btn--success:hover:not(:disabled) {
	background-color: #059669;
	border-color: #059669;
}

/* Accent Button */
.dresium-btn--accent {
	background: linear-gradient(90deg, #7C3AED 0%, #9C36ED 100%);
	color: var(--dresium-white);
	border: none;
}

.dresium-btn--accent:hover:not(:disabled) {
	opacity: 0.9;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Outline Button */
.dresium-btn--outline {
	background: transparent;
	color: var(--dresium-primary);
	border: 2px solid var(--dresium-primary);
}

.dresium-btn--outline:hover:not(:disabled) {
	background: var(--dresium-primary);
	color: var(--dresium-white);
}

/* ============================================
   BUTTON SIZES
   ============================================ */

.dresium-btn--sm {
	padding: var(--dresium-space-2) var(--dresium-space-4); /* 8px 16px */
	font-size: var(--dresium-text-xs);
	line-height: var(--dresium-leading-tight); /* RG-WEBDEV: 1.25 instead of 1.5 to match settings/switch height (32px) */
	height: 32px; /* RG-WEBDEV: Fixed height to match settings/switch --sm (32px) */
}

.dresium-btn--lg {
	padding: var(--dresium-space-3) var(--dresium-space-6); /* 12px 24px - RG-WEBDEV: Ridotto per proporzione con settings/switch */
	font-size: var(--dresium-text-base);
	line-height: var(--dresium-leading-tight); /* RG-WEBDEV: Explicit 1.25 for consistency */
	height: 44px; /* RG-WEBDEV: Fixed height to match settings/switch --lg (44px) */
}

.dresium-btn--xl {
	padding: var(--dresium-space-4) var(--dresium-space-8); /* 16px 32px - RG-WEBDEV: Ridotto per proporzione con settings/switch */
	font-size: var(--dresium-text-lg);
	line-height: 1.11; /* RG-WEBDEV: 18px × 1.11 = 20px → total height 32px + 20px = 52px (matches settings/switch) */
	height: 52px; /* RG-WEBDEV: Fixed height to match settings/switch --xl (52px) */
}

/* Full width */
.dresium-btn--block {
	width: 100%;
}

/* RG-WEBDEV: Alias for --block (used in main modal) */
.dresium-btn--full {
	width: 100%;
}

/* ============================================
   BUTTON STATES
   ============================================ */

/* Loading State */
.dresium-btn--loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.dresium-btn--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: dresium-btn-spin 0.8s linear infinite;
	transform: translate(-50%, -50%);
}

@keyframes dresium-btn-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.dresium-btn--ghost.dresium-btn--loading::after,
.dresium-btn--secondary.dresium-btn--loading::after {
	border-color: rgba(var(--dresium-primary-rgb, 9, 105, 218), 0.3);
	border-top-color: var(--dresium-primary, #0969da);
}

/* ============================================
   BUTTON GROUPS
   ============================================ */

.dresium-btn-group {
	display: inline-flex;
	gap: var(--dresium-space-2);
}

.dresium-btn-group--attached {
	gap: 0;
}

.dresium-btn-group--attached .dresium-btn:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -1px;
}

.dresium-btn-group--attached .dresium-btn:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.dresium-btn-group--attached .dresium-btn:hover {
	z-index: 1;
}

/* ============================================
   ICON BUTTONS
   ============================================ */

.dresium-btn--icon {
	padding: var(--dresium-space-2);
	width: 40px;
	height: 40px;
}

.dresium-btn--icon.dresium-btn--sm {
	width: 32px;
	height: 32px;
}

.dresium-btn--icon.dresium-btn--lg {
	width: 48px;
	height: 48px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
	.dresium-btn {
		padding: var(--dresium-space-2) var(--dresium-space-4);
		font-size: var(--dresium-text-sm);
	}

	.dresium-btn--lg {
		padding: var(--dresium-space-3) var(--dresium-space-6);
	}
}

/* RG-WEBDEV: Removed duplicate LOADING STATE section - already defined at lines 176-204 */

/* RG-WEBDEV: Settings Button (gear icon) */
.dresium-btn--settings {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* RG-WEBDEV: Size now controlled by --sm/--md/--lg/--xl classes, armonizzato con main button */
	width: 36px; /* Default (md) size */
	height: 36px;
	padding: 0;
	background: #ffffff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 2s ease;
	box-shadow: none;
}

/* Settings button size variants - RG-WEBDEV: Armonizzati con main button height */
.dresium-btn--settings.dresium-btn--sm {
	width: 32px;
	height: 32px;
}

.dresium-btn--settings.dresium-btn--sm::before {
	width: 16px;
	height: 16px;
}

.dresium-btn--settings.dresium-btn--lg {
	width: 44px;
	height: 44px;
}

.dresium-btn--settings.dresium-btn--lg::before {
	width: 22px;
	height: 22px;
}

.dresium-btn--settings.dresium-btn--xl {
	width: 52px;
	height: 52px;
}

.dresium-btn--settings.dresium-btn--xl::before {
	width: 26px;
	height: 26px;
}

.dresium-btn--settings:hover {
	background: #d1ced9 !important;
}

.dresium-btn--settings:active,
.dresium-btn--settings:focus,
.dresium-btn--settings:visited {
	background: #ffffff !important;
}

.dresium-btn--settings::before {
	content: "";
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* RG-WEBDEV: Switch Button (for multi-variant cycling) */
.dresium-btn--switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* RG-WEBDEV: Size now controlled by --sm/--md/--lg/--xl classes, armonizzato con main button */
	min-width: 50px; /* Default (md) size */
	max-width: 70px;
	height: 36px;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.95);
	color: rgba(0, 0, 0, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* RG-WEBDEV 2025-10-27: Prevent double-click issues */
	user-select: none;
	-webkit-user-select: none;
}

/* Switch button size variants - RG-WEBDEV: Armonizzati con main button height */
.dresium-btn--switch.dresium-btn--sm {
	min-width: 44px;
	max-width: 62px;
	height: 32px;
	font-size: 11px;
	padding: 0 8px;
}

.dresium-btn--switch.dresium-btn--lg {
	min-width: 58px;
	max-width: 80px;
	height: 44px;
	font-size: 14px;
	padding: 0 12px;
}

.dresium-btn--switch.dresium-btn--xl {
	min-width: 66px;
	max-width: 90px;
	height: 52px;
	font-size: 16px;
	padding: 0 14px;
}

.dresium-btn--switch:hover {
	background: #ffffff !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dresium-btn--switch:active,
.dresium-btn--switch:focus,
.dresium-btn--switch:visited {
	background: rgba(255, 255, 255, 0.95) !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* RG-WEBDEV 2025-10-27: Removed ::before icon - text is now set dynamically via JS */

/*.dresium-btn--switch span {
	display: inline-block;
	transition: transform 0.3s ease;
}

.dresium-btn--switch:hover span {
	transform: translateX(2px);
} RG-WEBDEB: Uniformo con psudoclasse */

/* RG-WEBDEV: B/W Color Pattern Support */
.dresium-pattern-bw .dresium-btn--settings {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.2);
}

.dresium-pattern-bw .dresium-btn--settings:hover {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.4);
}

.dresium-pattern-bw .dresium-btn--settings::before {
	/* RG-WEBDEV 2026-01-24: Apply filter to existing SVG icon only */
	filter: grayscale(100%) brightness(0.3);
}

.dresium-pattern-bw .dresium-btn--switch {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.2);
	color: #000000;
}

.dresium-pattern-bw .dresium-btn--switch:hover {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.4);
}

/* B/W pattern for gradient button */
.dresium-pattern-bw .dresium-btn--gradient {
	background: linear-gradient(135deg, #000000 0%, #333333 100%);
	border: 1px solid #000000;
}

.dresium-pattern-bw .dresium-btn--gradient:hover:not(:disabled) {
	background: linear-gradient(135deg, #1a1a1a 0%, #4d4d4d 100%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/*.dresium-pattern-bw .dresium-btn--gradient::before {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.15) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
} RG-WEBDEV */

/* B/W pattern icons in white */
.dresium-pattern-bw .dresium-btn--gradient {
	color: #ffffff;
}

/* B/W pattern for primary button */
.dresium-pattern-bw .dresium-btn--primary {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

.dresium-pattern-bw .dresium-btn--primary:hover:not(:disabled) {
	background-color: #333333;
	border-color: #333333;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dresium-pattern-bw .dresium-btn--primary:active:not(:disabled) {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
}

/* B/W pattern for secondary button */
.dresium-pattern-bw .dresium-btn--secondary {
	background-color: #ffffff;
	color: #000000;
	border-color: #000000;
}

.dresium-pattern-bw .dresium-btn--secondary:hover:not(:disabled) {
	background-color: #e5e5e5;
	border-color: #333333;
	color: #000000;
}

.dresium-pattern-bw .dresium-btn--secondary:active:not(:disabled) {
	background-color: #d4d4d4;
}

/* B/W pattern for outline button */
.dresium-pattern-bw .dresium-btn--outline {
	background: transparent;
	color: #000000;
	border-color: #000000;
}

.dresium-pattern-bw .dresium-btn--outline:hover:not(:disabled) {
	background: #000000;
	color: #ffffff;
}

/* B/W pattern for ghost button */
.dresium-pattern-bw .dresium-btn--ghost {
	color: #333333;
}

.dresium-pattern-bw .dresium-btn--ghost:hover:not(:disabled) {
	background-color: #e5e5e5;
	color: #000000;
}

/* B/W pattern for accent button */
.dresium-pattern-bw .dresium-btn--accent {
	background: linear-gradient(90deg, #000000 0%, #4d4d4d 100%);
	color: #ffffff;
}

.dresium-pattern-bw .dresium-btn--accent:hover:not(:disabled) {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* RG-WEBDEV: Sepia Color Pattern Support */
.dresium-pattern-sepia .dresium-btn--settings {
	background: rgba(250, 240, 220, 0.95);
	border-color: rgba(112, 66, 20, 0.3);
}

.dresium-pattern-sepia .dresium-btn--settings:hover {
	background: #faf0dc;
	border-color: rgba(112, 66, 20, 0.5);
}

.dresium-pattern-sepia .dresium-btn--settings::before {
	/* RG-WEBDEV 2026-01-24: Apply filter to existing SVG icon only */
	filter: sepia(100%) saturate(50%) hue-rotate(-10deg) brightness(0.5);
}

.dresium-pattern-sepia .dresium-btn--switch {
	background: rgba(250, 240, 220, 0.95);
	border-color: rgba(112, 66, 20, 0.3);
	color: #704214;
}

.dresium-pattern-sepia .dresium-btn--switch:hover {
	background: #faf0dc;
	border-color: rgba(112, 66, 20, 0.5);
}

/* Sepia pattern for gradient button */
.dresium-pattern-sepia .dresium-btn--gradient {
	background: linear-gradient(135deg, #704214 0%, #a0622d 100%);
	border: 1px solid #704214;
	color: #fff3e0;
}

.dresium-pattern-sepia .dresium-btn--gradient:hover:not(:disabled) {
	background: linear-gradient(135deg, #8b531a 0%, #b67233 100%);
	box-shadow: 0 8px 24px rgba(112, 66, 20, 0.4);
}

/* Sepia pattern for primary button */
.dresium-pattern-sepia .dresium-btn--primary {
	background-color: #704214;
	border-color: #704214;
	color: #fff3e0;
}

.dresium-pattern-sepia .dresium-btn--primary:hover:not(:disabled) {
	background-color: #8b531a;
	border-color: #8b531a;
	box-shadow: 0 8px 24px rgba(112, 66, 20, 0.35);
}

.dresium-pattern-sepia .dresium-btn--primary:active:not(:disabled) {
	background-color: #5a350f;
	border-color: #5a350f;
}

/* Sepia pattern for secondary button */
.dresium-pattern-sepia .dresium-btn--secondary {
	background-color: #faf0dc;
	color: #704214;
	border-color: #704214;
}

.dresium-pattern-sepia .dresium-btn--secondary:hover:not(:disabled) {
	background-color: #f5e6cc;
	border-color: #8b531a;
	color: #5a350f;
}

.dresium-pattern-sepia .dresium-btn--secondary:active:not(:disabled) {
	background-color: #efdcbc;
}

/* Sepia pattern for outline button */
.dresium-pattern-sepia .dresium-btn--outline {
	background: transparent;
	color: #704214;
	border-color: #704214;
}

.dresium-pattern-sepia .dresium-btn--outline:hover:not(:disabled) {
	background: #704214;
	color: #fff3e0;
}

/* Sepia pattern for ghost button */
.dresium-pattern-sepia .dresium-btn--ghost {
	color: #704214;
}

.dresium-pattern-sepia .dresium-btn--ghost:hover:not(:disabled) {
	background-color: rgba(112, 66, 20, 0.1);
	color: #5a350f;
}

/* Sepia pattern for accent button */
.dresium-pattern-sepia .dresium-btn--accent {
	background: linear-gradient(90deg, #704214 0%, #a0622d 100%);
	color: #fff3e0;
}

.dresium-pattern-sepia .dresium-btn--accent:hover:not(:disabled) {
	box-shadow: 0 4px 12px rgba(112, 66, 20, 0.4);
}

/* ============================================
   BUTTON POSITION VARIANTS
   ============================================ */

/* RG-WEBDEV: Migrated from dresium.css legacy file
   Position controlled via dresium_button_position option
   RG-WEBDEV 2026-04-17: Removed top-left and top-right, only bottom positions supported */

/* Bottom left corner (default) */
#dresiumWrapper,
#dresiumWrapper.dresium-position-bottom-left {
	top: auto;
	bottom: 12px;
	left: 12px;
	/* justify-content: flex-start inherited from default */
}

/* Bottom right corner */
#dresiumWrapper.dresium-position-bottom-right {
	top: auto;
	bottom: 12px;
	left: auto;
	right: 12px;
	justify-content: flex-end; /* RG-WEBDEV: Align buttons to right edge */
}

/* RG-WEBDEV: Override theme interference on settings button with ID specificity */
#dresiumWrapper .dresium-btn--settings,
#dresiumWrapper .dresium-btn--settings:active,
#dresiumWrapper .dresium-btn--settings:focus,
#dresiumWrapper .dresium-btn--settings:visited {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
}

#dresiumWrapper .dresium-btn--settings:hover {
	background: #d1ced9 !important;
}

/* RG-WEBDEV: Override theme interference on switch button with ID specificity */
#dresiumWrapper .dresium-btn--switch,
#dresiumWrapper .dresium-btn--switch:active,
#dresiumWrapper .dresium-btn--switch:focus,
#dresiumWrapper .dresium-btn--switch:visited {
	background: rgba(255, 255, 255, 0.95) !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
}

#dresiumWrapper .dresium-btn--switch:hover {
	background: #ffffff !important;
	color: rgba(0, 0, 0, 0.9) !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   B/W PATTERN - ID SPECIFICITY OVERRIDES
   ============================================ */

/* B/W settings button with ID specificity */
#dresiumWrapper.dresium-pattern-bw .dresium-btn--settings,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--settings:active,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--settings:focus,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--settings:visited {
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

#dresiumWrapper.dresium-pattern-bw .dresium-btn--settings:hover {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.4) !important;
}

/* B/W switch button with ID specificity */
#dresiumWrapper.dresium-pattern-bw .dresium-btn--switch,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--switch:active,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--switch:focus,
#dresiumWrapper.dresium-pattern-bw .dresium-btn--switch:visited {
	background: rgba(255, 255, 255, 0.95) !important;
	color: #000000 !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
}

#dresiumWrapper.dresium-pattern-bw .dresium-btn--switch:hover {
	background: #ffffff !important;
	color: #000000 !important;
	border-color: rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   SEPIA PATTERN - ID SPECIFICITY OVERRIDES
   ============================================ */

/* Sepia settings button with ID specificity */
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--settings,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--settings:active,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--settings:focus,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--settings:visited {
	background: rgba(250, 240, 220, 0.95) !important;
	border: 1px solid rgba(112, 66, 20, 0.3) !important;
}

#dresiumWrapper.dresium-pattern-sepia .dresium-btn--settings:hover {
	background: #faf0dc !important;
	border-color: rgba(112, 66, 20, 0.5) !important;
}

/* Sepia switch button with ID specificity */
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--switch,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--switch:active,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--switch:focus,
#dresiumWrapper.dresium-pattern-sepia .dresium-btn--switch:visited {
	background: rgba(250, 240, 220, 0.95) !important;
	color: #704214 !important;
	border-color: rgba(112, 66, 20, 0.3) !important;
}

#dresiumWrapper.dresium-pattern-sepia .dresium-btn--switch:hover {
	background: #faf0dc !important;
	color: #5a350f !important;
	border-color: rgba(112, 66, 20, 0.5) !important;
}