/**
 * WA Contact Button – Admin Styles
 *
 * @package SourceCodeEs_Floating_Contact_Widget
 * @since   1.0.0
 */

/* ── Utility ─────────────────────────────────────────────────────────────────*/
.scefcw-hidden {
	display: none;
}

/* ── Page header ─────────────────────────────────────────────────────────────*/
.scefcw-wrap {
	max-width: 900px;
}

.scefcw-page-title {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin-bottom: 0 !important;
}

.scefcw-page-icon {
	display:     flex;
	font-size:   1.6rem;
	color:       #25D366;
	line-height: 1;
}

.scefcw-page-icon svg {
	width:  1em;
	height: 1em;
	fill:   currentColor;
}

/* ── Tab navigation ─────────────────────────────────────────────────────────*/
.scefcw-tabs {
	display:       flex;
	flex-wrap:     wrap;
	gap:           2px;
	margin:        20px 0 0;
	border-bottom: 1px solid #c3c4c7;
}

.scefcw-tab {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 16px;
	font-size:       0.875rem;
	font-weight:     500;
	color:           #50575e;
	text-decoration: none;
	border:          1px solid transparent;
	border-bottom:   none;
	border-radius:   3px 3px 0 0;
	background:      #f0f0f1;
	transition:      color 0.15s ease, background-color 0.15s ease;
}

.scefcw-tab:hover {
	color:            #2271b1;
	background-color: #fff;
}

.scefcw-tab--active {
	color:      #2271b1;
	background: #fff;
	border-color: #c3c4c7;
	position:     relative;
	bottom:       -1px;
}

.scefcw-tab .dashicons {
	font-size:   1rem;
	line-height: 1.2;
}

/* ── Tab panels ─────────────────────────────────────────────────────────────*/
.scefcw-tab-panel {
	display:          none;
	background:       #fff;
	border:           1px solid #c3c4c7;
	border-top:       none;
	padding:          24px;
	border-radius:    0 0 4px 4px;
}

.scefcw-tab-panel--active {
	display: block;
}

/* ── Section headings within panels ────────────────────────────────────────*/
.scefcw-section-title {
	font-size:     1rem;
	font-weight:   600;
	color:         #1d2327;
	margin:        24px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e2e4e7;
}

.scefcw-section-title:first-child {
	margin-top: 0;
}

/* ── Toggle switch ─────────────────────────────────────────────────────────*/
.scefcw-toggle {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	vertical-align:  middle;
	cursor:          pointer;
	margin-right:    8px;
}

.scefcw-toggle input[type="checkbox"] {
	opacity:  0;
	width:    0;
	height:   0;
	position: absolute;
}

.scefcw-toggle-slider {
	display:       inline-block;
	width:         44px;
	height:        24px;
	background:    #8c8f94;
	border-radius: 24px;
	transition:    background-color 0.2s ease;
	position:      relative;
	flex-shrink:   0;
}

.scefcw-toggle-slider::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	background:    #fff;
	box-shadow:    0 1px 3px rgba(0, 0, 0, .3);
	transition:    transform 0.2s ease;
}

.scefcw-toggle input:checked + .scefcw-toggle-slider {
	background: #2271b1;
}

.scefcw-toggle input:checked + .scefcw-toggle-slider::after {
	transform: translateX(20px);
}

.scefcw-toggle input:focus-visible + .scefcw-toggle-slider {
	outline:        2px solid #2271b1;
	outline-offset: 2px;
}

/* ── Radio labels ─────────────────────────────────────────────────────────*/
.scefcw-radio-label {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin:      5px 0;
	cursor:      pointer;
}

/* ── Colour preset swatches ────────────────────────────────────────────────*/
.scefcw-color-preset-label {
	display:     inline-flex;
	align-items: center;
	gap:         7px;
	margin:      4px 12px 4px 0;
	cursor:      pointer;
}

.scefcw-color-swatch {
	display:       inline-block;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        2px solid rgba(0, 0, 0, .15);
	flex-shrink:   0;
}

.scefcw-custom-color-wrap {
	margin-top: 10px;
}

/* ── Working hours table ────────────────────────────────────────────────────*/
.scefcw-hours-table {
	border-collapse: separate;
	border-spacing:  0;
	min-width:       360px;
}

.scefcw-hours-table th,
.scefcw-hours-table td {
	padding: 6px 12px;
	text-align: left;
	border-bottom: 1px solid #f0f0f1;
}

.scefcw-hours-table thead th {
	font-size:    0.8rem;
	font-weight:  600;
	text-transform: uppercase;
	color:        #50575e;
	padding-bottom: 8px;
}

.scefcw-hours-table tbody tr:last-child td {
	border-bottom: none;
}

.scefcw-hours-table input[type="time"] {
	width: 110px;
}

/* ── Stats card ─────────────────────────────────────────────────────────────*/
.scefcw-stats-card {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	background:     #f0f8ff;
	border:         1px solid #c5d9f0;
	border-radius:  8px;
	padding:        24px 32px;
	margin:         12px 0 20px;
	max-width:      280px;
}

.scefcw-stats-number {
	font-size:   2.8rem;
	font-weight: 700;
	color:       #2271b1;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.scefcw-stats-label {
	font-size:  0.875rem;
	color:      #50575e;
	margin-top: 6px;
}

/* ── Preview container ──────────────────────────────────────────────────────*/
.scefcw-preview-container {
	margin:        28px 0 8px;
	padding:       20px;
	background:    #f9f9f9;
	border:        1px dashed #c3c4c7;
	border-radius: 6px;
}

.scefcw-preview-container h3 {
	margin: 0 0 14px;
	font-size: 0.9rem;
	color: #50575e;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.scefcw-preview-viewport {
	min-height:  80px;
	display:     flex;
	align-items: center;
	justify-content: flex-start;
	padding:     16px;
	background:  #fff;
	border:      1px solid #e2e4e7;
	border-radius: 4px;
}

/* Override fixed positioning for the preview */
.scefcw-preview-viewport .scefcw-wrapper {
	position:   relative !important;
	top:        auto !important;
	right:      auto !important;
	bottom:     auto !important;
	left:       auto !important;
	opacity:    1 !important;
	visibility: visible !important;
	transform:  none !important;
}

/* ── Conditional rows ───────────────────────────────────────────────────────*/
.scefcw-conditional {
	/* Show/hide toggled by JS */
}

/* ── Import status ──────────────────────────────────────────────────────────*/
.scefcw-import-status {
	margin-top: 8px;
	font-size:  0.875rem;
}

.scefcw-import-status.success { color: #00a32a; }
.scefcw-import-status.error   { color: #d63638; }

/* ── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 782px) {
	.scefcw-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.scefcw-hours-table {
		min-width: unset;
	}

	.scefcw-hours-table input[type="time"] {
		width: 90px;
	}
}