/**
 * CaptWiki Dual Button Widget
 *
 * @since 1.0.0
 */

/* Outer wrapper — badge ka reference point */
.cw-dual-btn {
	display:  inline-flex;
	position: relative;
	align-items: center;
}

/* Inner pill — overflow hidden sirf buttons ke liye */
.cw-dual-btn-inner {
	display:          inline-flex;
	align-items:      stretch;
	position:         relative;
	height:           40px;
	background-color: #ffffff;
	border:           1px solid #dddddd;
	border-radius:    20px;
	overflow:         hidden;  /* buttons ke hover clip ke liye */
}

.cw-dual-btn-left,
.cw-dual-btn-right {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          0 30px;
	min-width:        150px;
	color:            #444444;
	text-decoration:  none;
	text-transform:   uppercase;
	font-size:        12px;
	font-weight:      700;
	font-family:      Helvetica, Arial, sans-serif;
	white-space:      nowrap;
	background-color: transparent;
	transition:       background-color 0.18s ease, color 0.18s ease;
}

.cw-dual-btn-divider {
	display:          block;
	width:            1px;
	flex-shrink:      0;
	background-color: #dddddd;
	align-self:       stretch;
}

/* Hover */
.cw-dual-btn-left:hover,
.cw-dual-btn-right:hover {
	background-color: #EE4E44;
	color:            #ffffff;
}

/* Active */
.cw-dual-btn-left:active,
.cw-dual-btn-right:active {
	background-color: #444444;
	color:            #ffffff;
}

/* Center OR badge
   — position: absolute on .cw-dual-btn (not .cw-dual-btn-inner)
   — overflow:hidden se bahar hai isliye clip nahi hoga */
.cw-dual-btn-badge {
	position:         absolute;
	top:              50%;
	left:             50%;
	/* translateX(-50%) = badge ki half width ka static offset.
	   Jab user slider se left change kare to translateX nahi hona chahiye
	   isliye margin-left use kar rahe hain — ye static rehta hai */
	transform:        translateY(-50%);
	margin-left:      -13px; /* half of 26px badge width */
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            26px;
	height:           26px;
	border-radius:    50%;
	background-color: #ffffff;
	border:           1px solid #dddddd;
	font-style:       italic;
	font-size:        11px;
	font-weight:      400;
	color:            #666666;
	z-index:          10;
	pointer-events:   none;
}

/* Focus */
.cw-dual-btn-left:focus-visible,
.cw-dual-btn-right:focus-visible {
	outline:        2px solid #EE4E44;
	outline-offset: -2px;
}

/* Equal Width — dono buttons same width lete hain */
.cw-dual-btn--equal .cw-dual-btn-left,
.cw-dual-btn--equal .cw-dual-btn-right {
	flex: 1;
	min-width: 0;
}