/**
 * Authentry — Public Stylesheet
 *
 * @package Authentry
 * @since   1.0.0
 * @author  Hossein <hi@hossein.uk>
 */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
	--authentry-primary:    #2271b1;
	--authentry-primary-h:  #135e96;
	--authentry-success:    #00a32a;
	--authentry-error:      #d63638;
	--authentry-radius:     6px;
	--authentry-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	--authentry-shadow:     0 2px 8px rgba( 0, 0, 0, 0.12 );
	--authentry-bg:         #ffffff;
	--authentry-text:       #1d2327;
	--authentry-border:     #c3c4c7;
	--authentry-muted:      #646970;
	--authentry-transition: 180ms ease;
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media ( prefers-color-scheme: dark ) {
	:root {
		--authentry-bg:      #1d2327;
		--authentry-text:    #f0f0f1;
		--authentry-border:  #3c434a;
		--authentry-muted:   #a7aaad;
		--authentry-shadow:  0 2px 8px rgba( 0, 0, 0, 0.4 );
	}
}

/* Utility: hide elements toggled by JS without inline styles. */
.authentry-is-hidden {
	display: none !important;
}

/* ============================================================
   BUTTON — BASE
   ============================================================ */
.authentry-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         10px 18px;
	font-family:     var( --authentry-font );
	font-size:       14px;
	font-weight:     500;
	line-height:     1.4;
	color:           #ffffff;
	background:      var( --authentry-primary );
	border:          2px solid var( --authentry-primary );
	border-radius:   var( --authentry-radius );
	cursor:          pointer;
	text-decoration: none;
	transition:      background var( --authentry-transition ),
	                 border-color var( --authentry-transition ),
	                 opacity var( --authentry-transition ),
	                 transform var( --authentry-transition );
	user-select:     none;
	box-sizing:      border-box;
	position:        relative;
	overflow:        hidden;
}

.authentry-btn:hover,
.authentry-btn:focus {
	background:   var( --authentry-primary-h );
	border-color: var( --authentry-primary-h );
	outline:      none;
	box-shadow:   0 0 0 3px rgba( 34, 113, 177, 0.3 );
}

@supports (color: color-mix(in srgb, red, blue)) {
	.authentry-btn:hover,
	.authentry-btn:focus {
		box-shadow: 0 0 0 3px color-mix( in srgb, var( --authentry-primary ) 28%, transparent );
	}
}

.authentry-btn:active {
	transform: scale( 0.98 );
}

.authentry-btn:disabled,
.authentry-btn--loading {
	opacity: 0.7;
	cursor:  not-allowed;
	pointer-events: none;
}

/* OUTLINE VARIANT */
.authentry-btn--outline {
	color:      var( --authentry-primary );
	background: transparent;
}

.authentry-btn--outline:hover,
.authentry-btn--outline:focus {
	background: var( --authentry-primary );
	color:      #ffffff;
}

/* GHOST VARIANT */
.authentry-btn--ghost {
	color:        var( --authentry-primary );
	background:   transparent;
	border-color: transparent;
}

.authentry-btn--ghost:hover,
.authentry-btn--ghost:focus {
	background:   rgba( 34, 113, 177, 0.08 );
	border-color: transparent;
	box-shadow:   none;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.authentry-btn--ghost:hover,
	.authentry-btn--ghost:focus {
		background: color-mix( in srgb, var( --authentry-primary ) 11%, transparent );
	}
}

/* ============================================================
   PASSKEY ICON — ANIMATED
   ============================================================ */
.authentry-icon {
	flex-shrink: 0;
	animation:   authentry-pulse 3s ease-in-out infinite;
}

@keyframes authentry-pulse {
	0%, 100% { opacity: 1;    transform: scale( 1 ); }
	50%       { opacity: 0.75; transform: scale( 0.95 ); }
}

/* ============================================================
   SPINNER
   ============================================================ */
.authentry-spinner {
	display:       none;
	width:         16px;
	height:        16px;
	border:        2px solid rgba( 255, 255, 255, 0.4 );
	border-top:    2px solid #ffffff;
	border-radius: 50%;
	animation:     authentry-spin 0.7s linear infinite;
	flex-shrink:   0;
}

.authentry-btn--loading .authentry-spinner {
	display: inline-block;
}

.authentry-btn--outline .authentry-spinner,
.authentry-btn--ghost   .authentry-spinner {
	border-color:     rgba( 34, 113, 177, 0.3 );
	border-top-color: var( --authentry-primary );
}

@keyframes authentry-spin {
	to { transform: rotate( 360deg ); }
}

/* ============================================================
   DIVIDER
   ============================================================ */
.authentry-divider {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin:      16px 0;
	color:       var( --authentry-muted );
	font-size:   12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.authentry-divider::before,
.authentry-divider::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: var( --authentry-border );
}

/* ============================================================
   MESSAGES
   ============================================================ */
.authentry-message {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       10px 14px;
	margin-top:    10px;
	border-radius: var( --authentry-radius );
	font-size:     13px;
	font-family:   var( --authentry-font );
	line-height:   1.4;
}

.authentry-message--loading {
	background: rgba( 34, 113, 177, 0.08 );
	color:      var( --authentry-primary );
	border:     1px solid rgba( 34, 113, 177, 0.2 );
}

.authentry-message--success {
	background: rgba( 0, 163, 42, 0.08 );
	color:      var( --authentry-success );
	border:     1px solid rgba( 0, 163, 42, 0.2 );
	animation:  authentry-fadein 0.3s ease;
}

.authentry-message--error {
	background: rgba( 214, 54, 56, 0.08 );
	color:      var( --authentry-error );
	border:     1px solid rgba( 214, 54, 56, 0.2 );
	animation:  authentry-shake 0.4s ease;
}

.authentry-message--error strong {
	font-weight: 700;
}

.authentry-msg-spinner {
	display:       inline-block;
	width:         14px;
	height:        14px;
	border:        2px solid currentColor;
	border-top:    2px solid transparent;
	border-radius: 50%;
	animation:     authentry-spin 0.7s linear infinite;
	opacity:       0.6;
	flex-shrink:   0;
}

.authentry-msg-icon {
	font-style:  normal;
	font-weight: bold;
	font-size:   15px;
	flex-shrink: 0;
}

@keyframes authentry-fadein {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes authentry-shake {
	0%, 100% { transform: translateX( 0 ); }
	20%      { transform: translateX( -5px ); }
	40%      { transform: translateX( 5px ); }
	60%      { transform: translateX( -4px ); }
	80%      { transform: translateX( 4px ); }
}

/* ============================================================
   PROFILE TABLE
   ============================================================ */
.authentry-profile-section {
	margin-top:    30px;
	padding:       20px;
	background:    var( --authentry-bg );
	border:        1px solid var( --authentry-border );
	border-radius: var( --authentry-radius );
	box-shadow:    var( --authentry-shadow );
}

.authentry-profile-section h2 {
	margin-top:    0;
	font-size:     16px;
	font-weight:   600;
	color:         var( --authentry-text );
	border-bottom: 1px solid var( --authentry-border );
	padding-bottom: 10px;
	margin-bottom:  16px;
}

.authentry-credentials-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       13px;
	font-family:     var( --authentry-font );
}

.authentry-credentials-table th,
.authentry-credentials-table td {
	padding:     10px 12px;
	text-align:  left;
	border-bottom: 1px solid var( --authentry-border );
	vertical-align: middle;
}

.authentry-credentials-table th {
	font-weight: 600;
	background:  rgba( 0, 0, 0, 0.03 );
	color:       var( --authentry-muted );
	text-transform: uppercase;
	font-size:   11px;
	letter-spacing: 0.06em;
}

.authentry-credentials-table tbody tr:last-child td {
	border-bottom: none;
}

.authentry-credentials-table tbody tr:nth-child( even ) {
	background: rgba( 0, 0, 0, 0.02 );
}

.authentry-credentials-table tbody tr:hover {
	background: rgba( 34, 113, 177, 0.04 );
}

.authentry-name-input {
	font-size:     13px;
	padding:       4px 8px;
	border:        1px solid var( --authentry-primary );
	border-radius: 4px;
	outline:       none;
	width:         180px;
	font-family:   var( --authentry-font );
}

.authentry-actions {
	white-space: nowrap;
}

.authentry-actions .button {
	margin-right: 6px;
}

.authentry-add-new {
	margin-top: 16px;
}

/* ============================================================
   NOT-SUPPORTED NOTICE
   ============================================================ */
.authentry-not-supported-notice {
	margin-bottom: 12px;
}

/* ============================================================
   MANAGE SHORTCODE (front-end passkey list)
   ============================================================ */
.authentry-manage-shortcode-wrap {
	margin:    1.5rem 0;
	max-width: 100%;
}

.authentry-manage-shortcode-wrap .authentry-profile-section {
	margin-top: 0;
}

.authentry-manage-intro {
	margin:      0 0 1em;
	color:       var( --authentry-muted );
	font-size:   0.95rem;
	line-height: 1.5;
}

.authentry-manage-not-supported,
.authentry-manage-limit-notice {
	margin:    0 0 1em;
	padding:   0.75em 1em;
	color:     var( --authentry-text );
	background: rgba( 0, 0, 0, 0.04 );
	border:    1px solid var( --authentry-border );
	border-radius: var( --authentry-radius );
	font-size: 0.95rem;
}

.authentry-manage-shortcode-wrap--notice .authentry-manage-shortcode-notice {
	margin: 0;
}

.authentry-profile-section .authentry-actions .authentry-btn {
	margin: 0 0.35rem 0.35rem 0;
}

/* ============================================================
   SHORTCODE WRAP
   ============================================================ */
.authentry-shortcode-wrap {
	display:   inline-block;
	max-width: 400px;
	width:     100%;
}

.authentry-login-wrap,
.authentry-wc-wrap {
	margin:    16px 0;
	max-width: 100%;
}

/* Align passkey block with wp-login.php layout (full width inside #loginform or #registerform). */
body.login #loginform .authentry-login-wrap {
	width: 100%;
}

/* Same passkey button metrics on login and register screens (register form is #registerform, not #loginform). */
body.login #loginform .authentry-btn,
body.login #registerform .authentry-btn {
	min-height: 40px;
	font-size:  14px;
	font-weight: 500;
	border-radius: 4px;
}

body.login #loginform .authentry-divider {
	margin-top: 18px;
}

/* Before form: passkey button is first; “or” sits beneath it toward the username/password fields. */
body.login #authentry-login-wrap[data-authentry-button-position="before"] .authentry-divider {
	margin-top:    14px;
	margin-bottom: 4px;
}

/* After form: “or” is the first row above the passkey button (under the closed form). */
body.login #authentry-login-wrap[data-authentry-button-position="after"] > .authentry-divider:first-child {
	margin-top: 0;
}

/* WooCommerce login: same divider rhythm as wp-login.php for each data-authentry-button-position value. */
.woocommerce #authentry-wc-login-wrap[data-authentry-button-position="before"] .authentry-divider {
	margin-top:    14px;
	margin-bottom: 4px;
}

.woocommerce #authentry-wc-login-wrap[data-authentry-button-position="after"] > .authentry-divider:first-child {
	margin-top: 0;
}

/* Passkey block moved after the closing </form> on wp-login.php (Button position: After form). */
body.login.authentry-position-after #authentry-login-wrap {
	width:     100%;
	max-width: 320px;
	margin:    18px auto 0;
}

/* “Replace password field” hides the password row until the user opts back in via the script-injected link. */
#loginform .user-pass-wrap[ data-authentry-replaced-hidden="1" ],
form.woocommerce-form-login p[ data-authentry-replaced-hidden="1" ] {
	display: none !important;
}

/* Text links toggling between passkey-first and password login on wp-login / WooCommerce. */
.authentry-login-mode-toggle {
	margin:    10px 0 0;
	font-size:   13px;
	text-align:  center;
}

.authentry-login-mode-toggle a {
	text-decoration: underline;
}

/* WooCommerce: passkey wrap rendered after the form then moved next to fields by script. */
.woocommerce .authentry-wc-wrap.authentry-wc-position-before {
	margin-top:    0;
	margin-bottom: 12px;
}

.woocommerce .authentry-wc-wrap.authentry-wc-position-after {
	margin-top: 18px;
}

/* ============================================================
   REGISTER NOTICE
   ============================================================ */
.authentry-register-notice,
.authentry-wc-register-notice {
	padding:       10px 14px;
	margin-top:    10px;
	border-left:   3px solid var( --authentry-primary );
	background:    rgba( 34, 113, 177, 0.06 );
	border-radius: 0 var( --authentry-radius ) var( --authentry-radius ) 0;
	font-size:     13px;
	color:         var( --authentry-muted );
}

.authentry-icon-sm {
	margin-right: 4px;
}

/* Hidden fields for signup credential POST (visually hidden, not display:none for some screen readers). */
.authentry-signup-hidden-fields {
	position: absolute;
	width:    1px;
	height:   1px;
	padding:  0;
	margin:   -1px;
	overflow: hidden;
	clip:     rect( 0, 0, 0, 0 );
	border:   0;
}

.authentry-signup-hidden-fields textarea {
	width:  1px;
	height: 1px;
}

.authentry-register-actions {
	margin-top: 8px;
	margin-bottom: 0;
}

/* ============================================================
   DARK MODE ADJUSTMENTS
   ============================================================ */
@media ( prefers-color-scheme: dark ) {
	.authentry-credentials-table th {
		background: rgba( 255, 255, 255, 0.04 );
	}

	.authentry-credentials-table tbody tr:nth-child( even ) {
		background: rgba( 255, 255, 255, 0.02 );
	}

	.authentry-credentials-table tbody tr:hover {
		background: rgba( 34, 113, 177, 0.1 );
	}

	.authentry-register-notice,
	.authentry-wc-register-notice {
		background: rgba( 34, 113, 177, 0.12 );
	}
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media ( max-width: 600px ) {
	.authentry-btn {
		font-size: 15px;
		padding:   12px 16px;
	}

	.authentry-credentials-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.authentry-actions .button {
		display:    block;
		margin-top: 4px;
		width:      100%;
		text-align: center;
	}
}

/* [authentry_register] shortcode */
.authentry-register-shortcode-wrap {
	margin: 1em 0;
}

.authentry-register-shortcode-not-supported {
	display: none;
	margin-bottom: 0.75em;
}

.authentry-register-shortcode-message {
	margin-top: 0.75em;
}

.authentry-register-shortcode-wrap--notice .authentry-register-shortcode-notice {
	margin: 0;
}

/* ============================================================
   WOOCOMMERCE MY ACCOUNT — passkeys endpoint
   ============================================================ */
.woocommerce-account .authentry-wc-account-passkeys {
	margin:     0 0 2rem;
	clear:      both;
	max-width:  100%;
}

.woocommerce-account .authentry-wc-account-passkeys > h2 {
	margin:    0 0 0.75rem;
	font-size: 1.5rem;
}

.woocommerce-account .authentry-wc-account-passkeys__intro {
	margin:      0 0 1em;
	color:       var( --authentry-muted );
	font-size:   0.95rem;
	line-height: 1.5;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-profile-message {
	margin-bottom: 1em;
}

.woocommerce-account .authentry-wc-account-passkeys .shop_table {
	margin-top: 0;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-actions .woocommerce-button {
	margin:  0 0.35rem 0.35rem 0;
	display: inline-block;
	width:   auto;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-delete-btn--wc {
	color:            var( --wc-red, #a00 );
	border-color:     var( --wc-red, #a00 );
	background-color: transparent;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-delete-btn--wc:hover,
.woocommerce-account .authentry-wc-account-passkeys .authentry-delete-btn--wc:focus {
	color:            #fff;
	background-color: var( --wc-red, #a00 );
	border-color:     var( --wc-red, #a00 );
}

.woocommerce-account .authentry-wc-account-passkeys__actions {
	margin-top: 1.25rem;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-btn {
	width:     auto;
	display:   inline-block;
	min-width: 12rem;
}

.woocommerce-account .authentry-wc-account-passkeys .authentry-wc-empty {
	margin: 1em 0;
}

/* ============================================================
   PASSKEY SETUP REMINDER (1.1.0)
   ============================================================ */
.authentry-passkey-reminder-panel {
	margin:       0 0 1.25rem;
	padding:      12px 16px;
	border-radius: var( --authentry-radius );
	background:   rgba( 34, 113, 177, 0.08 );
	border:       1px solid rgba( 34, 113, 177, 0.25 );
	color:        var( --authentry-text );
	font-family:  var( --authentry-font );
	box-sizing:   border-box;
}

.authentry-passkey-reminder-panel__text,
.authentry-passkey-reminder-notice__text {
	margin:      0;
	font-size:   14px;
	line-height: 1.5;
	white-space: pre-line;
}

.authentry-passkey-reminder-panel__link,
.authentry-passkey-reminder-panel__dismiss,
.authentry-passkey-reminder-notice__dismiss {
	margin-left:     0.75em;
	font-weight:     600;
	text-decoration: underline;
}

.woocommerce-account .authentry-passkey-reminder-panel--woocommerce {
	margin-bottom: 1.5rem;
}

@media ( max-width: 600px ) {
	.woocommerce-account .authentry-wc-account-passkeys .authentry-actions .woocommerce-button {
		display: block;
		width:   100%;
		margin:  0.35rem 0;
	}
}

/* Passkeys embedded in WooCommerce Account details (edit profile) form. */
.woocommerce-account .authentry-wc-edit-account-passkeys {
	margin:    2rem 0 0;
	padding:   1.5rem 0 0;
	border-top: 1px solid var( --authentry-border, rgba( 0, 0, 0, 0.1 ) );
	clear:     both;
}

.woocommerce-account .authentry-wc-edit-account-passkeys .authentry-wc-account-passkeys {
	margin-bottom: 0;
}

/* ============================================================
   VISITOR DISPLAY (General settings: device / browser)
   ============================================================ */
.authentry--visitor-hidden {
	display: none !important;
}