/**
 * CS Biometric Login styles (popup, dialog, account UI).
 *
 * @package  CSBISEBI_Biometric_Login
 */

#csbisebi-overlay *,
#csbisebi-overlay *::before,
#csbisebi-overlay *::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

#csbisebi-overlay button { cursor: pointer; }

@keyframes csbisebi-spin {
	to { transform: rotate(360deg); }
}
@keyframes csbisebi-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0);    }
}

#csbisebi-inline-wrap { animation: csbisebi-in .25s ease; }

#csbisebi-dialog-overlay {
	position: fixed; inset: 0;
	z-index: 2147483648;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: rgba(0,0,0,.65);
	opacity: 0; transition: opacity .22s ease;
}
#csbisebi-dialog-overlay.csbisebi-visible { opacity: 1; }

.csbisebi-dialog {
	background: #fff; border-radius: 4px;
	box-shadow: 0 4px 24px rgba(0,0,0,.22);
	max-width: 420px; width: 100%; overflow: hidden;
	transform: scale(.95) translateY(8px); opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}
.csbisebi-dialog.csbisebi-visible { transform: scale(1) translateY(0); opacity: 1; }

.csbisebi-dialog-header {
	padding: 22px 22px 0;
	display: flex; gap: 14px; align-items: flex-start;
}
.csbisebi-dialog-icon {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.csbisebi-dialog-icon-confirm { background: #eff6ff; color: #2271b1; }
.csbisebi-dialog-icon-error   { background: #fef2f2; color: #d63638; }
.csbisebi-dialog-icon-success { background: #f0fdf4; color: #00a32a; }
.csbisebi-dialog-icon-warning { background: #fffbeb; color: #d97706; }

.csbisebi-dialog-text { flex: 1; }
.csbisebi-dialog-title   { font-size: 15px; font-weight: 700; color: #1d2327; margin-bottom: 4px; line-height: 1.4; }
.csbisebi-dialog-message { font-size: 13px; color: #646970; line-height: 1.6; }

.csbisebi-dialog-input-wrap { padding: 14px 22px 0; }
.csbisebi-dialog-input {
	display: block; width: 100%; padding: 8px 11px;
	border: 1px solid #8c8f94; border-radius: 3px;
	font-size: 14px; color: #2c3338; outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.csbisebi-dialog-input:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }

.csbisebi-dialog-footer {
	display: flex; gap: 8px; justify-content: flex-end;
	padding: 16px 22px 20px;
}
.csbisebi-dialog-btn {
	display: inline-flex; align-items: center; height: 30px;
	padding: 0 14px; border-radius: 3px;
	font-size: 13px; cursor: pointer; line-height: 1;
}
.csbisebi-dialog-btn-cancel {
	background: #f6f7f7; border: 1px solid #8c8f94; color: #2c3338;
}
.csbisebi-dialog-btn-cancel:hover { background: #f0f0f1; border-color: #2271b1; color: #2271b1; }
.csbisebi-dialog-btn-ok {
	background: #2271b1; border: 1px solid #2271b1; color: #fff;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}
.csbisebi-dialog-btn-ok:hover { background: #135e96; border-color: #135e96; }
.csbisebi-dialog-btn-ok-danger { background: #d63638; border-color: #d63638; }
.csbisebi-dialog-btn-ok-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.csbisebi-account-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 2em;
	border-bottom: 1px solid rgba(0,0,0,.12);
}
.csbisebi-account-icon {
	flex-shrink: 0;
	margin-top: .15em;
	opacity: .7;
}
.csbisebi-account-title {
	font-size: 1.2em ;
	margin: 0 0 .3em ;
	padding: 0 ;
	border: none ;
}
.csbisebi-account-desc {
	margin: 0;
	font-size: .9em;
	opacity: .75;
}

.csbisebi-section-title {
	font-size: 1em ;
	font-weight: 600;
	margin: 0 0 .9em ;
	display: flex;
	align-items: center;
	gap: .5em;
}
.csbisebi-device-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 11px;
	background: currentColor;
	font-size: 11px; font-weight: 700; line-height: 1;
	/* invert so text is readable on any bg */
	color: #fff;
	filter: none;
}
/* Make count badge use primary / accent color via a light tint approach */
.csbisebi-section-title .csbisebi-device-count {
	background: rgba(0,0,0,.55);
}

.csbisebi-device-list {
	list-style: none;
	margin: 0 0 1.5em ;
	padding: 0 ;
	display: flex;
	flex-direction: column;
	gap: .6em;
}

.csbisebi-device-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: .9em 1em;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 4px;
	background: rgba(0,0,0,.02);
}

.csbisebi-device-icon {
	flex-shrink: 0;
	opacity: .5;
	display: flex;
}

.csbisebi-device-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .2em;
}

.csbisebi-device-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.csbisebi-device-detail {
	font-size: .8em;
	opacity: .6;
}

.csbisebi-device-meta {
	font-size: .78em;
	opacity: .5;
}

/* Remove button: theme supplies base styles via .button */
.csbisebi-remove-btn {
	flex-shrink: 0;
	display: inline-flex ;
	align-items: center;
	gap: 5px;
	color: #d63638 ;
	border-color: rgba(214,54,56,.35) ;
	background: rgba(214,54,56,.04) ;
}
.csbisebi-remove-btn:hover {
	color: #fff ;
	background: #d63638 ;
	border-color: #d63638 ;
}

.csbisebi-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.5em 1em;
	border: 2px dashed rgba(0,0,0,.12);
	border-radius: 4px;
	margin-bottom: 1.5em;
	opacity: .7;
}
.csbisebi-empty-icon { margin-bottom: .6em; }
.csbisebi-empty-state p { margin: 0 0 .3em; }
.csbisebi-empty-hint   { font-size: .85em; opacity: .7; }

#csbisebi-register-status {
	padding: .75em 1em;
	border-radius: 3px;
	font-size: .9em;
	margin-bottom: 1em;
	border-left: 4px solid currentColor;
}

.csbisebi-add-section { margin-top: 1.75em; }

.csbisebi-add-card { padding: 1.25em; border: 1px solid rgba(0,0,0,.1); border-radius: 4px; }

/* Make "Add" button include the icon naturally */
.csbisebi-add-card > .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Brand the primary call-to-action buttons on the WooCommerce account page:
   these use WooCommerce's own .button.alt class, which the active theme would
   otherwise color instead of the plugin's configured brand colors. */
.csbisebi-account-wrap .woocommerce-Button.button.alt {
	background-color: var(--bio-primary, #7f54b3) ;
	border-color: var(--bio-secondary, #6b4593) ;
	color: var(--bio-text, #fff) ;
}
.csbisebi-account-wrap .woocommerce-Button.button.alt:hover,
.csbisebi-account-wrap .woocommerce-Button.button.alt:focus {
	background-color: var(--bio-secondary, #6b4593) ;
	border-color: var(--bio-secondary, #6b4593) ;
	color: var(--bio-text, #fff) ;
}

#csbisebi-register-form {
	margin-top: 1.25em;
	padding-top: 1.25em;
	border-top: 1px solid rgba(0,0,0,.08);
}

.csbisebi-browser-tip {
	font-size: .82em;
	opacity: .65;
	margin-top: .75em ;
	line-height: 1.6;
}

.csbisebi-privacy-note {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: .8em;
	opacity: .55;
	margin-top: 2em ;
	line-height: 1.5;
}
.csbisebi-privacy-note svg { flex-shrink: 0; margin-top: .15em; }

.entry-content .csbisebi-device-list,
.wp-block-group .csbisebi-device-list,
.wp-block-post-content .csbisebi-device-list,
.csbisebi-account-wrap .csbisebi-device-list,
.csbisebi-shortcode-wrap .csbisebi-device-list {
	list-style: none ;
	padding: 0 ;
	margin: 0 0 1.5em ;
}

.csbisebi-device-list li::before,
.csbisebi-device-card::before {
	display: none ;
	content: none ;
}

.csbisebi-shortcode-wrap,
.csbisebi-shortcode-wrap * {
	box-sizing: border-box ;
}

.csbisebi-shortcode-wrap h3,
.csbisebi-shortcode-wrap .csbisebi-shortcode-header h3 {
	font-size: 1.25rem ;
	font-weight: 700 ;
	margin: 0 0 .5em ;
	padding: 0 ;
	border: none ;
	color: inherit ;
	line-height: 1.4 ;
}
.csbisebi-shortcode-wrap p.description {
	font-size: .9em ;
	opacity: .75 ;
	margin: 0 0 1.25em ;
	line-height: 1.6 ;
}

/* Buttons: self-contained, do not rely on .button from WC or wp-admin */
.csbisebi-shortcode-wrap .button,
.csbisebi-shortcode-wrap button.button,
.csbisebi-shortcode-wrap input[type="submit"] {
	display: inline-flex ;
	align-items: center ;
	gap: 6px ;
	padding: 8px 16px ;
	height: auto ;
	border: 1px solid #8c8f94 ;
	border-bottom-color: #787c82 ;
	border-radius: 3px ;
	background: #f6f7f7 ;
	color: #2c3338 ;
	font-size: 14px ;
	font-weight: 400 ;
	line-height: 1.5 ;
	cursor: pointer ;
	text-decoration: none ;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.08) ;
	transition: background .12s ease, border-color .12s ease ;
	font-family: inherit ;
	letter-spacing: normal ;
	text-transform: none ;
}
.csbisebi-shortcode-wrap .button:hover,
.csbisebi-shortcode-wrap button.button:hover {
	background: #f0f0f1 ;
	border-color: #2271b1 ;
	color: #2271b1 ;
	text-decoration: none ;
}
.csbisebi-shortcode-wrap .button-primary,
.csbisebi-shortcode-wrap button.button-primary,
.csbisebi-shortcode-wrap #csbisebi-register-btn,
.csbisebi-shortcode-wrap #csbisebi-start-register-btn {
	background: #2271b1 ;
	border-color: #2271b1 ;
	border-bottom-color: #135e96 ;
	color: #fff ;
	font-weight: 600 ;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15) ;
}
.csbisebi-shortcode-wrap .button-primary:hover,
.csbisebi-shortcode-wrap button.button-primary:hover,
.csbisebi-shortcode-wrap #csbisebi-register-btn:hover,
.csbisebi-shortcode-wrap #csbisebi-start-register-btn:hover {
	background: #135e96 ;
	border-color: #135e96 ;
	color: #fff ;
}
.csbisebi-shortcode-wrap .csbisebi-remove-btn,
.csbisebi-shortcode-wrap button.csbisebi-remove-btn {
	background: rgba(214,54,56,.05) ;
	border-color: rgba(214,54,56,.4) ;
	color: #d63638 ;
}
.csbisebi-shortcode-wrap .csbisebi-remove-btn:hover {
	background: #d63638 ;
	border-color: #d63638 ;
	color: #fff ;
}

/* Text inputs: block themes may not style these */
.csbisebi-shortcode-wrap input[type="text"],
.csbisebi-shortcode-wrap #csbisebi-device-name-input {
	display: block ;
	width: 100% ;
	max-width: 400px ;
	padding: 8px 12px ;
	border: 1px solid #8c8f94 ;
	border-radius: 3px ;
	background: #fff ;
	color: #2c3338 ;
	font-size: 14px ;
	font-family: inherit ;
	line-height: 1.5 ;
	margin-top: 4px ;
	outline: none ;
	box-shadow: none ;
	-webkit-appearance: none ;
}
.csbisebi-shortcode-wrap input[type="text"]:focus,
.csbisebi-shortcode-wrap #csbisebi-device-name-input:focus {
	border-color: #2271b1 ;
	box-shadow: 0 0 0 1px #2271b1 ;
}

/* Table: block themes may strip table styles */
.csbisebi-shortcode-wrap table {
	width: 100% ;
	border-collapse: collapse ;
	margin: 16px 0 ;
	font-size: inherit ;
}
.csbisebi-shortcode-wrap table th {
	text-align: left ;
	padding: 8px 12px ;
	border-bottom: 2px solid #e0e0e0 ;
	font-weight: 600 ;
	font-size: .85em ;
	color: inherit ;
	background: none ;
}
.csbisebi-shortcode-wrap table td {
	padding: 10px 12px ;
	border-bottom: 1px solid #f0f0f0 ;
	vertical-align: middle ;
	background: none ;
}
.csbisebi-shortcode-wrap table tr:last-child td {
	border-bottom: none ;
}

/* Status box */
.csbisebi-shortcode-wrap .csbisebi-status,
.csbisebi-shortcode-wrap #csbisebi-register-status {
	padding: 10px 12px ;
	border-radius: 3px ;
	font-size: 13px ;
	line-height: 1.5 ;
	margin-bottom: 12px ;
}

/* Browser tips box */
.csbisebi-shortcode-wrap .csbisebi-browser-tips {
	margin-top: 12px ;
	padding: 10px 12px ;
	background: #f0f6fc ;
	border-radius: 6px ;
	font-size: 12px ;
	line-height: 1.7 ;
	color: #444 ;
}

.csbisebi-device-card a,
.csbisebi-account-wrap a {
	text-decoration: none;
}

.entry-content .csbisebi-account-title,
.entry-content .csbisebi-section-title,
.wp-block-post-content .csbisebi-account-title,
.wp-block-post-content .csbisebi-section-title {
	margin-top: 0 ;
}

.csbisebi-sc-wrap {
	all: revert;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #1d2327;
	box-sizing: border-box;
	max-width: 680px;
}
.csbisebi-sc-wrap *,
.csbisebi-sc-wrap *::before,
.csbisebi-sc-wrap *::after {
	box-sizing: border-box;
}

/* Header */
.csbisebi-sc-header {
	display: flex ;
	align-items: flex-start ;
	gap: 12px ;
	padding-bottom: 1.25em ;
	margin-bottom: 1.5em ;
	border-bottom: 1px solid rgba(0,0,0,.1) ;
}
.csbisebi-sc-header-icon {
	flex-shrink: 0 ;
	opacity: .6 ;
	margin-top: 3px ;
}

/* Heading */
.csbisebi-sc-heading {
	all: unset ;
	display: block ;
	font-size: 1.15rem ;
	font-weight: 700 ;
	color: #1d2327 ;
	line-height: 1.3 ;
	margin: 0 0 .25em ;
	padding: 0 ;
}

/* Description */
.csbisebi-sc-desc {
	all: unset ;
	display: block ;
	font-size: .875rem ;
	color: #646970 ;
	line-height: 1.5 ;
	margin: 0 ;
}

/* Status box */
#csbisebi-register-status:not(:empty) {
	display: block;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: .875rem;
	margin-bottom: 1em;
	border-left: 4px solid #2271b1;
	background: #eff6ff;
	color: #1e40af;
}

/* Empty state */
.csbisebi-sc-empty {
	display: flex ;
	flex-direction: column ;
	align-items: center ;
	text-align: center ;
	padding: 2.5em 1em ;
	border: 2px dashed rgba(0,0,0,.12) ;
	border-radius: 6px ;
	margin-bottom: 1.5em ;
	color: #646970 ;
	opacity: .8 ;
}
.csbisebi-sc-empty p   { margin: .5em 0 .25em ; font-size: .95rem ; }
.csbisebi-sc-empty small { font-size: .8rem ; opacity: .75 ; }

/* Device list: override ALL list styles block themes apply */
.csbisebi-sc-device-list {
	all: unset ;
	display: flex ;
	flex-direction: column ;
	gap: .6em ;
	margin-bottom: 1.5em ;
	padding: 0 ;
	list-style: none ;
}
.csbisebi-sc-device-list::before,
.csbisebi-sc-device-list::after { display: none ; }

.csbisebi-sc-device {
	all: unset ;
	display: flex ;
	align-items: center ;
	gap: 12px ;
	padding: .85em 1em ;
	border: 1px solid rgba(0,0,0,.1) ;
	border-radius: 6px ;
	background: rgba(0,0,0,.02) ;
	list-style: none ;
}
.csbisebi-sc-device::before { display: none ; content: none ; }

.csbisebi-sc-device-icon {
	flex-shrink: 0 ;
	opacity: .5 ;
	display: flex ;
}
.csbisebi-sc-device-info {
	flex: 1 ;
	min-width: 0 ;
	display: flex ;
	flex-direction: column ;
	gap: .15em ;
}
.csbisebi-sc-device-name {
	all: unset ;
	display: block ;
	font-weight: 600 ;
	font-size: .9rem ;
	white-space: nowrap ;
	overflow: hidden ;
	text-overflow: ellipsis ;
	color: #1d2327 ;
}
.csbisebi-sc-device-detail {
	display: block ;
	font-size: .78rem ;
	color: #646970 ;
}
.csbisebi-sc-device-meta {
	display: block ;
	font-size: .75rem ;
	color: #a0aab4 ;
}

/* Add section */
.csbisebi-sc-add-section {
	margin-top: 1.25em ;
}

/* Register form */
.csbisebi-sc-register-form {
	margin-top: 1em ;
	padding: 1.25em ;
	border: 1px solid rgba(0,0,0,.1) ;
	border-radius: 6px ;
	background: rgba(0,0,0,.015) ;
}
.csbisebi-sc-label {
	all: unset ;
	display: block ;
	font-size: .875rem ;
	font-weight: 600 ;
	color: #1d2327 ;
	margin-bottom: .4em ;
}
.csbisebi-sc-input {
	all: unset ;
	display: block ;
	width: 100% ;
	max-width: 420px ;
	padding: 9px 13px ;
	border: 1px solid #8c8f94 ;
	border-radius: 4px ;
	background: #fff ;
	color: #1d2327 ;
	font-size: .9rem ;
	font-family: inherit ;
	line-height: 1.5 ;
	transition: border-color .15s ;
	-webkit-appearance: none ;
}
.csbisebi-sc-input:focus {
	outline: none ;
	border-color: var(--bio-primary, #2271b1) ;
	box-shadow: 0 0 0 2px rgba(var(--bio-primary-rgb, 34,113,177), .2) ;
}
.csbisebi-sc-register-actions {
	display: flex ;
	gap: .5em ;
	margin-top: .85em ;
	flex-wrap: wrap ;
}

/* Tips box */
.csbisebi-sc-tips {
	margin-top: 1em ;
	padding: .85em 1em ;
	background: #f0f6fc ;
	border-radius: 5px ;
	font-size: .8rem ;
	line-height: 1.75 ;
	color: #3c434a ;
	border: 1px solid #c5d9ed ;
}

/* Privacy notice */
.csbisebi-sc-privacy {
	all: unset ;
	display: flex ;
	align-items: center ;
	gap: 6px ;
	margin-top: 1.5em ;
	font-size: .78rem ;
	color: #a0aab4 ;
	line-height: 1.5 ;
}

/* Guest box */
.csbisebi-sc-guest {
	max-width: 400px ;
	padding: 2.5em 2em ;
	text-align: center ;
	border: 1px solid rgba(0,0,0,.1) ;
	border-radius: 8px ;
	background: rgba(0,0,0,.02) ;
}
.csbisebi-sc-guest-icon {
	width: 52px ; height: 52px ;
	margin: 0 auto 1em ;
	background: rgba(var(--bio-primary-rgb, 34,113,177), .08) ;
	border-radius: 50% ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	color: var(--bio-primary, #2271b1) ;
}

.csbisebi-sc-btn-primary,
.csbisebi-sc-btn-secondary,
.csbisebi-sc-btn-danger {
	all: unset ;
	display: inline-flex ;
	align-items: center ;
	justify-content: center ;
	gap: 6px ;
	padding: 9px 18px ;
	border-radius: 4px ;
	font-size: .875rem ;
	font-weight: 600 ;
	font-family: inherit ;
	line-height: 1 ;
	cursor: pointer ;
	white-space: nowrap ;
	transition: background .15s, border-color .15s, color .15s ;
	text-decoration: none ;
	letter-spacing: normal ;
	text-transform: none ;
	-webkit-appearance: none ;
}

/* Primary: brand */
.csbisebi-sc-btn-primary {
	background: var(--bio-primary, #2271b1) ;
	color: var(--bio-text, #fff) ;
	border: 1px solid var(--bio-secondary, #1d6099) ;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15) ;
}
.csbisebi-sc-btn-primary:hover,
.csbisebi-sc-btn-primary:focus {
	background: var(--bio-secondary, #135e96) ;
	border-color: var(--bio-secondary, #0e4f80) ;
	color: var(--bio-text, #fff) ;
	text-decoration: none ;
	outline: none ;
}

/* Secondary: grey, accented with the brand color on hover */
.csbisebi-sc-btn-secondary {
	background: #f6f7f7 ;
	color: #2c3338 ;
	border: 1px solid #8c8f94 ;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.08) ;
}
.csbisebi-sc-btn-secondary:hover,
.csbisebi-sc-btn-secondary:focus {
	background: #f0f0f1 ;
	border-color: var(--bio-primary, #2271b1) ;
	color: var(--bio-primary, #2271b1) ;
	text-decoration: none ;
	outline: none ;
}

/* Danger: red */
.csbisebi-sc-btn-danger {
	background: rgba(214,54,56,.05) ;
	color: #d63638 ;
	border: 1px solid rgba(214,54,56,.3) ;
	font-size: .8rem ;
	padding: 6px 12px ;
	font-weight: 500 ;
	flex-shrink: 0 ;
}
.csbisebi-sc-btn-danger:hover,
.csbisebi-sc-btn-danger:focus {
	background: #d63638 ;
	color: #fff ;
	border-color: #d63638 ;
	outline: none ;
}

@media (max-width: 480px) {
	.csbisebi-account-header { flex-direction: column; gap: 8px; }
	.csbisebi-device-card    { flex-wrap: wrap; }
	.csbisebi-remove-btn     { width: 100% ; justify-content: center; }
	.csbisebi-dialog-footer  { flex-direction: column-reverse; }
	.csbisebi-dialog-btn     { width: 100%; justify-content: center; }
	.csbisebi-sc-device      { flex-wrap: wrap ; }
	.csbisebi-sc-btn-danger  { width: 100% ; }
	.csbisebi-sc-register-actions { flex-direction: column ; }
	.csbisebi-sc-btn-primary,
	.csbisebi-sc-btn-secondary { width: 100% ; }
}

/* [csbisebi_login_button] shortcode trigger button. */
.csbisebi-login-shortcode-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--bio-secondary, #135e96) ;
	border-radius: 3px;
	background: var(--bio-primary, #2271b1) ;
	color: var(--bio-text, #fff) ;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	font-family: inherit;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}
.csbisebi-login-shortcode-btn:hover,
.csbisebi-login-shortcode-btn:focus {
	background: var(--bio-secondary, #135e96) ;
	border-color: var(--bio-secondary, #135e96) ;
	color: var(--bio-text, #fff) ;
}

/**
 * Admin-only: Security Logs screen (toolbar, Columns dropdown, CSV export progress).
 */

/* Title left, native search box right, on the same row: WP core already
   floats `.search-box` right, so floating the heading left puts them on one
   line with nothing extra needed. Clearfix keeps the container's height
   correct and stops the tablenav below from trying to wrap the floats. */
#csbisebi-logs-app > h2,
#csbisebi-users-app > h2 {
	float: left;
	margin: 4px 0;
}
#csbisebi-logs-app::after,
#csbisebi-users-app::after {
	content: "";
	display: table;
	clear: both;
}

/* Filters row (Columns dropdown, date range, Filter/Reset, Download CSV,
   Clear Logs): rendered above the table via
   WP_List_Table::extra_tablenav( 'top' ), same place WP core puts filter
   dropdowns on CPT/Post list screens. */
.csbisebi-logs-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.csbisebi-logs-filters label {
	font-weight: 600;
	margin: 0 -4px 0 4px;
}
.csbisebi-logs-filters input[type="date"] {
	line-height: 2;
}
.csbisebi-logs-export-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.csbisebi-columns-dropdown {
	position: relative;
}
.csbisebi-columns-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: 260px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	padding: 14px;
}
.csbisebi-columns-panel .csbisebi-toggle-row:last-child {
	margin-bottom: 0;
}
.csbisebi-columns-apply {
	display: block;
	width: 50%;
	margin-top: 12px;
	text-align: center;
}

.csbisebi-filter-drawer-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin-bottom: 8px;
}
.csbisebi-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #787c82;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: help;
	flex-shrink: 0;
}
.csbisebi-info-icon:hover,
.csbisebi-info-icon:focus {
	background: #2271b1;
	outline: none;
}
.csbisebi-info-icon::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 260px;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: 4px;
	background: #1d2327;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
}
.csbisebi-info-icon:hover::after,
.csbisebi-info-icon:focus::after {
	visibility: visible;
	opacity: 1;
}

/* Batched CSV export progress dialog (Download CSV button, Security Logs).
   Appended to document.body like the other .csbisebi-dialog popups, so
   colors are hardcoded here rather than relying on --brand-* custom
   properties scoped to .csbisebi-admin-wrap. */
.csbisebi-dialog-progress-wrap {
	padding: 18px 22px 0;
}
.csbisebi-export-progress-bar {
	display: block;
	width: 100%;
	height: 10px;
	border-radius: 5px;
	background: #dcdcde;
	overflow: hidden;
}
.csbisebi-export-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #e63946, #00a3ff);
	transition: width .2s ease;
}
.csbisebi-export-progress-label {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #646970;
	text-align: center;
}

/**
 * Admin-only: brand palette + toggle-switch component + slide panel + tables.
 */
.csbisebi-admin-wrap {
	--brand-red: #e63946;
	--brand-blue: #00a3ff;
	--brand-gradient: linear-gradient(90deg, var(--brand-red), var(--brand-blue));
	--bio-admin-primary: var(--brand-red);
	--bio-admin-primary-text: #fff;
	--bio-admin-secondary: var(--brand-blue);
	--bio-admin-secondary-rgb: 0,163,255;
}

.csbisebi-admin-wrap .nav-tab.nav-tab-active {
	background: var(--brand-gradient);
	border: none;
	color: var(--bio-admin-primary-text);
	transition: transform .15s ease;
}
.csbisebi-admin-wrap .nav-tab.nav-tab-active:hover {
	transform: scale(1.03);
}
.csbisebi-admin-wrap .nav-tab:hover {
	color: var(--bio-admin-secondary);
}

body .csbisebi-admin-wrap .nav-tab.nav-tab-active:hover {
	color: var(--bio-admin-primary-text);
}
.csbisebi-admin-wrap .nav-tab.csbisebi-nav-tab-gated {
	opacity: .5;
	cursor: not-allowed;
}

/* Gradient branding is opt-in, not "every .button": the Security Logs and
   User Management screens (WP_List_Table toolbars, bulk-action buttons, row
   actions) and the wp-color-picker's own "Select Color" button all keep
   their normal wp-admin look. Only these specific settings-tab actions are
   branded. Hover is a small zoom, not a color inversion (that read as
   left/right red/blue "borders" and looked broken). */
.csbisebi-admin-wrap .button-primary,
.csbisebi-admin-wrap .csbisebi-copy-shortcode-btn {
	background: var(--brand-gradient);
	border: none;
	color: var(--bio-admin-primary-text);
	box-shadow: none;
	text-shadow: none;
	transition: transform .15s ease;
}
.csbisebi-admin-wrap .button-primary:hover,
.csbisebi-admin-wrap .button-primary:focus,
.csbisebi-admin-wrap .csbisebi-copy-shortcode-btn:hover,
.csbisebi-admin-wrap .csbisebi-copy-shortcode-btn:focus {
	background: var(--brand-gradient);
	color: var(--bio-admin-primary-text);
	transform: scale(1.04);
}

/* UI Settings color fields: the raw text input stays hidden until
   wp-color-picker enhances it — that init adds the `wp-color-picker` class
   directly onto this same <input>, so once that class shows up we stop
   overriding and defer entirely to the widget's own visibility handling
   (e.g. its "Select Color" toggle). A pure-CSS spinner fills the gap in the
   meantime; admin-logs.js adds `.is-ready` once wpColorPicker() has run (or
   failed) to remove it. */
.csbisebi-color-field {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.csbisebi-color-field .csbisebi-color-picker:not(.wp-color-picker) {
	visibility: hidden;
}
.csbisebi-color-loader {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border: 2px solid #dcdcde;
	border-top-color: var(--bio-admin-primary, #2271b1);
	border-radius: 50%;
	animation: csbisebi-color-loader-spin .6s linear infinite;
}
.csbisebi-color-field.is-ready .csbisebi-color-loader {
	display: none;
}
@keyframes csbisebi-color-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Danger Zone: Global Reset stays solid red, never the gradient. */
.csbisebi-admin-wrap .csbisebi-admin-global-reset,
.csbisebi-admin-wrap .csbisebi-admin-global-reset:hover,
.csbisebi-admin-wrap .csbisebi-admin-global-reset:focus {
	background: var(--brand-red);
	border-color: var(--brand-red);
	color: var(--bio-admin-primary-text);
}
.csbisebi-admin-wrap .csbisebi-admin-global-reset:hover,
.csbisebi-admin-wrap .csbisebi-admin-global-reset:focus {
	background: #c62330;
	border-color: #c62330;
}

/* Radio inputs (e.g. Popup Behavior, Implementation tab): brand gradient once checked.
   ("background-color" can't hold a gradient, only "background" can, so that
   longhand is dropped rather than set to the same value.) */
.csbisebi-admin-wrap input[type="radio"]:checked  {
	background: var(--brand-gradient);
	border-color: var(--bio-admin-primary);
}
.csbisebi-admin-wrap input[type="radio"]:focus
{
	box-shadow: 0 0 0 2px #fff,0 0 0 4px var(--bio-admin-primary);
	outline: 2px solid transparent;
}

/* Toggle switch: replaces bare <input type="checkbox"> on settings screens. */
.csbisebi-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 40px;
	height: 22px;
	cursor: pointer;
	vertical-align: middle;
}
.csbisebi-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.csbisebi-toggle-slider {
	position: absolute;
	inset: 0;
	background: #c3c4c7;
	border-radius: 22px;
	transition: background-color .15s ease;
}
.csbisebi-toggle-slider::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
	transition: transform .15s ease;
}
.csbisebi-toggle input[type="checkbox"]:checked + .csbisebi-toggle-slider {
	background: var(--brand-gradient);
}
.csbisebi-toggle input[type="checkbox"]:checked + .csbisebi-toggle-slider::before {
	transform: translateX(18px);
}
.csbisebi-toggle input[type="checkbox"]:focus-visible + .csbisebi-toggle-slider {
	box-shadow: 0 0 0 2px rgba(var(--bio-admin-secondary-rgb), .35);
}
.csbisebi-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.csbisebi-toggle-row:last-child {
	margin-bottom: 0;
}

/* Settings-table layout: a consistent 25% label / 75% field split across
   every tab, instead of wp-admin core's cramped fixed-width label column
   (which wraps longer labels awkwardly). */
.csbisebi-admin-wrap .form-table {
	width: 100%;
}
.csbisebi-admin-wrap .form-table tr {
	display: grid;
	grid-template-columns: 25% 75%;
	column-gap: 24px;
	align-items: start;
}
.csbisebi-admin-wrap .form-table th,
.csbisebi-admin-wrap .form-table td {
	display: block;
	width: auto;
	padding: 15px 0;
}

.csbisebi-admin-logs h2, .csbisebi-admin-users h2 {
	display: inline-block;
}

/* A few descriptions (Force Biometric Login, the shortcode box, Global
   Reset) run long enough to wrap past 2 lines in the normal 75%-wide field
   column. Keep every row on the same 25:75 grid (so labels/fields still line
   up down the page) and instead flow just the long text into two CSS
   columns within that field column, so it reads as two side-by-side blocks
   rather than 3-4 stacked lines. */
.csbisebi-admin-wrap .csbisebi-description-wide {
	width: 50%;
	column-gap: 2em;
}

body.wp-core-ui .button.csbisebi-copy-shortcode-btn .dashicons-clipboard{
	color: #fff;
}

/* Hide the entire "Roles to Restrict" row, label and field alike, while
   the "Restrict Roles" master toggle is off. Pure CSS (:has() re-evaluates
   live against :checked), so it stays in sync with no JS involved. */
.csbisebi-admin-wrap .form-table:has(#csbisebi_restrict_roles_enabled:not(:checked)) tr:has(#csbisebi-restricted-roles-panel) {
	display: none;
}

/* Rows hidden by the "Enable Biometric Login" master toggle (JS-driven). */
.csbisebi-hidden-by-toggle {
	display: none ;
}

/* Shortcode-display box (Implementation tab). */
.csbisebi-shortcode-box {
	display: flex;
	align-items: center;
	gap: 8px;
}
.csbisebi-shortcode-box input[readonly] {
	font-family: Consolas, Monaco, monospace;
	background: #f6f7f7;
}
/* The button itself is a filled gradient button (opt-in rule above); the
   clipboard icon just inherits that white text color. */
.csbisebi-copy-shortcode-btn .dashicons {
	vertical-align: middle;
	color: inherit;
}

/* Security Logs and User Management (WP_List_Table screens) intentionally
   keep the stock wp-admin table look, unbranded — see the opt-in gradient
   rule above. */

/* Dismissible review notice. */
.csbisebi-review-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
/* Rendered via admin_notices, outside .csbisebi-admin-wrap, so it needs its
   own copy of the brand gradient rather than inheriting the scoped one. */
.csbisebi-review-notice .button-primary {
	background: linear-gradient(90deg, #e63946, #00a3ff);
	border: none;
	color: #fff;
	transition: transform .15s ease;
}
.csbisebi-review-notice .button-primary:hover,
.csbisebi-review-notice .button-primary:focus {
	color: #fff;
	transform: scale(1.04);
}

/* Inline settings-field error (e.g. Force Biometric Login guard): fades out
   on its own a couple of seconds after appearing. */
.csbisebi-inline-error {
	width: 50%;
	margin: 8px 0 0;
	color: #d63638;
	font-size: 13px;
	line-height: 1.5;
	opacity: 1;
	transition: opacity .4s ease;
}
.csbisebi-inline-error.is-fading {
	opacity: 0;
}

/* Footer branding: shown under every tab on the plugin's settings page. */
.csbisebi-footer-brand {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid #dcdcde;
	text-align: center;
	font-size: 14px;
	color: #646970;
}
.csbisebi-footer-brand .dashicons-heart {
	color: var(--bio-admin-primary);
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.csbisebi-footer-brand-name {
	font-weight: 700;
	text-decoration: none;
	/* Left half (Concat) bold red fading to light red, right half (String)
	   light blue fading to bold blue: one continuous left-to-right gradient. */
	background: linear-gradient(90deg, var(--bio-admin-primary) 0%, #f3a9b0 54%, #a8d4ff 46%, var(--bio-admin-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.csbisebi-footer-brand-name:hover,
.csbisebi-footer-brand-name:focus {
	text-decoration: underline;
}