/**
 * YOLYC Custom Auth - Styles
 */

.yolyc-auth-wrap {
	display: flex;
	justify-content: center;
	padding: 2em 1em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.yolyc-auth-box {
	width: 100%;
	max-width: 440px;
	padding: 2em;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #00171F
}

.yolyc-auth-heading {
	font-size: 1.4em;
	margin: 0 0 0.6em;
	color: #00171f;
	display: flex;
	align-items: center;
	gap: 8px;
}

.yolyc-auth-heading svg {
	flex-shrink: 0;
}

.yolyc-auth-description {
	font-size: 0.9em;
	color: #555;
	margin: 0 0 1.2em;
	line-height: 1.5;
}

.yolyc-auth-info {
	font-size: 0.95em;
	color: #333;
	margin: 0;
}

.yolyc-auth-info a {
	color: #246eb9;
	font-weight: 500;
}

.yolyc-auth-form {
	margin-top: 0.5em;
}

.yolyc-auth-field {
	margin-bottom: 1.2em;
}

.yolyc-auth-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
	color: #00171f;
	margin-bottom: 6px;
}

.yolyc-auth-required {
	color: #dc3545;
}

.yolyc-auth-field input[type="text"],
.yolyc-auth-field input[type="email"],
.yolyc-auth-field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
	transition: border-color 0.2s ease;
}

.yolyc-auth-field input:focus {
	border-color: #246eb9;
	outline: none;
	box-shadow: 0 0 0 2px rgba(36, 110, 185, 0.15);
}

.yolyc-auth-field-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.yolyc-auth-field-half {
	flex: 1;
	min-width: 140px;
}

.yolyc-auth-pw-wrapper {
	position: relative;
}

.yolyc-auth-pw-wrapper input {
	padding-right: 50px;
}

.yolyc-auth-pw-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: #246eb9;
	font-size: 0.8em;
	font-weight: 600;
	padding: 2px 4px;
}

.yolyc-auth-pw-toggle:hover {
	color: #1a5a9a;
}

.yolyc-auth-pw-toggle:focus {
	outline: 2px solid #246eb9;
	outline-offset: 2px;
	border-radius: 3px;
}

.yolyc-auth-checkbox {
	margin-bottom: 1.2em;
}

.yolyc-auth-checkbox label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	cursor: pointer;
}

.yolyc-auth-checkbox input[type="checkbox"] {
	margin: 0;
}

.yolyc-auth-strength-meter {
	height: 6px;
	background: #e9ecef;
	border-radius: 3px;
	margin-top: 8px;
	overflow: hidden;
}

.yolyc-auth-strength-bar {
	height: 100%;
	width: 0;
	border-radius: 3px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.yolyc-auth-strength-text {
	display: block;
	font-size: 0.8em;
	font-weight: 600;
	margin-top: 4px;
	min-height: 1.2em;
}

.yolyc-auth-field-hint {
	display: block;
	font-size: 0.8em;
	color: #666;
	margin-top: 4px;
}

.yolyc-auth-match-success {
	color: #28a745;
	font-weight: 500;
}

.yolyc-auth-match-error {
	color: #dc3545;
	font-weight: 500;
}

.yolyc-auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	border: none;
	padding: 12px 16px;
	border-radius: 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95em;
	transition: background 0.3s ease, transform 0.15s ease;
}

.yolyc-auth-btn:hover {
	transform: translateY(-1px);
}

.yolyc-auth-btn:active {
	transform: translateY(0);
}

.yolyc-auth-btn:focus {
	outline: 2px solid #246eb9;
	outline-offset: 2px;
}

.yolyc-auth-btn-primary {
	background: #246eb9;
	color: #fff;
}

.yolyc-auth-btn-primary:hover {
	background: #1a5a9a;
}

.yolyc-auth-error {
	color: #721c24;
	background: #f8d7da;
	padding: 12px 14px;
	border-left: 4px solid #dc3545;
	margin-bottom: 1em;
	border-radius: 4px;
	font-size: 0.9em;
	animation: yolycAuthFadeIn 0.4s ease-in-out;
}

.yolyc-auth-error a {
	color: #721c24;
	font-weight: 600;
	text-decoration: underline;
}

.yolyc-auth-success {
	color: #155724;
	background: #dff3e4;
	padding: 12px 14px;
	border-left: 4px solid #28a745;
	margin-bottom: 1em;
	border-radius: 4px;
	font-size: 0.9em;
	animation: yolycAuthFadeIn 0.4s ease-in-out;
}

.yolyc-auth-success a {
	color: #155724;
	font-weight: 600;
	text-decoration: underline;
}

.yolyc-auth-links {
	margin-top: 1.5em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.yolyc-auth-links a {
	color: #246eb9;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: 500;
	transition: color 0.2s ease;
}

.yolyc-auth-links a:hover {
	color: #1a5a9a;
	text-decoration: underline;
}

.yolyc-auth-links a:focus {
	outline: 2px solid #246eb9;
	outline-offset: 2px;
	border-radius: 2px;
}

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

@media (max-width: 480px) {
	.yolyc-auth-box {
		padding: 1.2em;
	}

	.yolyc-auth-heading {
		font-size: 1.2em;
	}

	.yolyc-auth-field-group {
		flex-direction: column;
		gap: 0;
	}

	.yolyc-auth-links {
		flex-direction: column;
		align-items: center;
	}
}

/* =============================================================
   YOLYC Custom Auth — Cloudflare Turnstile widget styles
   Add these rules to your plugin's assets/style.css file.
   ============================================================= */

/* ----------------------------------------------------------
   Wrapper field
   Sits in the same .yolyc-auth-field stack as every other
   form row so spacing is automatic.
   ---------------------------------------------------------- */
.yolyc-auth-turnstile {
    /* Full width so the flexible widget can expand to fit */
    width: 100%;

    /* Vertical rhythm: match the gap used between other fields */
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------
   The cf-turnstile container itself
   Cloudflare injects an <iframe> inside this div. We make
   the container full-width so the flexible widget fills it,
   but enforce the 300 px minimum Cloudflare requires so the
   widget is never clipped on very narrow viewports.
   ---------------------------------------------------------- */
.yolyc-auth-turnstile .cf-turnstile {
    width: 100%;
    min-width: 300px;

    /* Prevent horizontal overflow from breaking the layout */
    overflow: hidden;

    /* Smooth border-radius to match the form card's style */
    border-radius: 6px;
}

/* ----------------------------------------------------------
   The iframe Cloudflare injects
   Force it to fill the container and never overflow.
   ---------------------------------------------------------- */
.yolyc-auth-turnstile .cf-turnstile iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}

/* ----------------------------------------------------------
   Responsive breakpoints
   ---------------------------------------------------------- */

/* Narrow mobile (< 360 px)
   The flexible widget has a hard 300 px minimum enforced by
   Cloudflare. On very small screens we scale the whole
   wrapper down proportionally using transform so nothing
   overflows the form box. The layout shifts up to compensate
   for the gap introduced by scaling.
   ---------------------------------------------------------- */
@media (max-width: 359px) {
    .yolyc-auth-turnstile .cf-turnstile {
        transform-origin: top left;
        transform: scale(0.88);

        /* Pull the space back in after scaling shrinks the element */
        margin-bottom: calc((65px * (1 - 0.88)) * -1);
    }
}

/* Standard mobile (360 px – 479 px)
   The form box is wide enough; flexible size handles the rest.
   Just ensure the wrapper stays full-width and aligned.
   ---------------------------------------------------------- */
@media (min-width: 360px) and (max-width: 479px) {
    .yolyc-auth-turnstile {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* Tablet and up (≥ 480 px)
   Plenty of room — no special overrides needed.
   The flexible widget fills the container naturally.
   ---------------------------------------------------------- */
@media (min-width: 480px) {
    .yolyc-auth-turnstile {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* ----------------------------------------------------------
   Reduced-motion: Cloudflare's own animations inside the
   iframe are unaffected by this rule, but any CSS transitions
   we add on the wrapper will be suppressed for users who
   prefer reduced motion.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .yolyc-auth-turnstile,
    .yolyc-auth-turnstile .cf-turnstile {
        transition: none;
        animation: none;
    }
}

/* ----------------------------------------------------------
   High-contrast mode support
   Add a visible border around the widget container so it
   remains identifiable when Windows High Contrast or
   Forced Colors mode strips backgrounds and colours.
   ---------------------------------------------------------- */
@media (forced-colors: active) {
    .yolyc-auth-turnstile .cf-turnstile {
        outline: 2px solid ButtonText;
        outline-offset: 2px;
    }
}

/* =============================================================
   YOLYC Custom Auth — Dark mode overrides
   Triggered when the <html> element carries data-theme="dark"
   (set by the site-wide theme toggle).
   ============================================================= */

/* Auth card / wrapper */
[data-theme="dark"] .yolyc-auth-box {
	background-color: #012a38 !important;
	border-color:     #246EB9 !important;
	color:            #FFFFFF !important;
}

/* Heading */
[data-theme="dark"] .yolyc-auth-heading {
	color: #DFF3E4 !important;
}

/* Description & generic info text */
[data-theme="dark"] .yolyc-auth-description,
[data-theme="dark"] .yolyc-auth-info {
	color: #c8dfe5 !important;
}

/* Info links inside the box */
[data-theme="dark"] .yolyc-auth-info a {
	color: #DFF3E4 !important;
}
[data-theme="dark"] .yolyc-auth-info a:hover {
	color: #246EB9 !important;
}

/* Field labels */
[data-theme="dark"] .yolyc-auth-field label {
	color: #DFF3E4 !important;
}

/* Text / email / password inputs */
[data-theme="dark"] .yolyc-auth-field input[type="text"],
[data-theme="dark"] .yolyc-auth-field input[type="email"],
[data-theme="dark"] .yolyc-auth-field input[type="password"] {
	background-color: #00171F !important;
	color:            #FFFFFF !important;
	border-color:     #246EB9 !important;
}

[data-theme="dark"] .yolyc-auth-field input:focus {
	border-color: #246EB9 !important;
	box-shadow:   0 0 0 2px rgba(36, 110, 185, 0.35) !important;
}

/* Checkbox label */
[data-theme="dark"] .yolyc-auth-checkbox label {
	color: #DFF3E4 !important;
}

/* Password show/hide toggle button */
[data-theme="dark"] .yolyc-auth-pw-toggle {
	color: #DFF3E4 !important;
}
[data-theme="dark"] .yolyc-auth-pw-toggle:hover {
	color: #246EB9 !important;
}

/* Strength meter track */
[data-theme="dark"] .yolyc-auth-strength-meter {
	background: #00171F !important;
}

/* Field hints (generic) */
[data-theme="dark"] .yolyc-auth-field-hint {
	color: #a8cdd6 !important;
}

/* Primary submit button */
[data-theme="dark"] .yolyc-auth-btn-primary {
	background-color: #246EB9 !important;
	color:            #FFFFFF !important;
}
[data-theme="dark"] .yolyc-auth-btn-primary:hover {
	background-color: #1a5a9a !important;
}
[data-theme="dark"] .yolyc-auth-btn:focus {
	outline-color: #DFF3E4 !important;
}

/* Error notice */
[data-theme="dark"] .yolyc-auth-error {
	background-color: #2a0a0e !important;
	color:            #f5c6cb !important;
	border-left-color:#dc3545 !important;
}
[data-theme="dark"] .yolyc-auth-error a {
	color: #f5c6cb !important;
}

/* Success notice */
[data-theme="dark"] .yolyc-auth-success {
	background-color: #0a2412 !important;
	color:            #DFF3E4 !important;
	border-left-color:#28a745 !important;
}
[data-theme="dark"] .yolyc-auth-success a {
	color: #DFF3E4 !important;
}

/* Nav links below the form */
[data-theme="dark"] .yolyc-auth-links a {
	color: #DFF3E4 !important;
}
[data-theme="dark"] .yolyc-auth-links a:hover {
	color: #246EB9 !important;
}
[data-theme="dark"] .yolyc-auth-links a:focus {
	outline-color: #DFF3E4 !important;
}

/* Turnstile widget wrapper — subtle dark border */
[data-theme="dark"] .yolyc-auth-turnstile .cf-turnstile {
	border: 1px solid #246EB9;
}