/*
 * WePHCHA — Frontend Widget Styles v1.5.5
 *
 * CSS variables injected inline by PHP (saved colour settings).
 * --wephca-icon-color controls the .altcha-logo SVG — applied inside
 * the shadow DOM via JS style injection.
 */

/* ── Default CSS variable values ── */
:root {
	--wephca-blue:          #1D3557;
	--wephca-blue-mid:      #2d6a9f;
	--wephca-red:           #E63946;
	--wephca-widget-bg:     #ffffff;
	--wephca-widget-border: #e5e7eb;
	--wephca-widget-text:   #6b7280;
	--wephca-check:         #9ca3af;
	--wephca-icon-color:    #9ca3af;
}

/* ── Wrapper ── */
.wephca-style-wrap {
	display: block;
	margin:  14px 0;
}

/* ── Base widget ── */
altcha-widget {
	display:       block;
	max-width:     380px;
	width:         100%;
	border-radius: 4px;
	border:        1px solid var(--wephca-widget-border);
	background:    var(--wephca-widget-bg);
	transition:    border-color 0.2s, box-shadow 0.2s;

	--altcha-border-width:       1px;
	--altcha-border-radius:      4px;
	--altcha-color-border:       var(--wephca-widget-border);
	--altcha-color-border-focus: var(--wephca-check);
	--altcha-color-text:         var(--wephca-widget-text);
	--altcha-color-base:         var(--wephca-widget-bg);
	--altcha-color-error-text:   var(--wephca-red);
	--altcha-color-footer-bg:    var(--wephca-widget-bg);
	--altcha-max-width:          380px;
}

/* ── MANUAL mode ── */
.wephca-style-wrap--mode-manual altcha-widget {
	background:    var(--wephca-widget-bg);
	border:        1px solid var(--wephca-widget-border);
	border-radius: 4px;
	box-shadow:    none;

	--altcha-color-base:         var(--wephca-widget-bg);
	--altcha-color-text:         var(--wephca-widget-text);
	--altcha-color-border:       var(--wephca-widget-border);
	--altcha-color-border-focus: var(--wephca-check);
	--altcha-color-footer-bg:    var(--wephca-widget-bg);
	--altcha-color-active:       var(--wephca-check);
}

.wephca-style-wrap--mode-manual altcha-widget:hover {
	border-color: #d1d5db;
	box-shadow:   0 1px 3px rgba(0,0,0,.06);
}

.wephca-style-wrap--mode-manual altcha-widget[data-state="verifying"],
.wephca-style-wrap--mode-manual altcha-widget[data-state="verified"] {
	border-color: var(--wephca-check);
}

.wephca-style-wrap--mode-manual altcha-widget[data-state="error"] {
	border-color: var(--wephca-red);
}

/* ── AUTO mode ── */
.wephca-style-wrap--mode-auto altcha-widget {
	background:    linear-gradient(135deg, var(--wephca-blue) 0%, var(--wephca-blue-mid) 100%);
	border-color:  rgba(255,255,255,0.15);
	border-radius: 6px;
	box-shadow:    0 2px 8px rgba(29,53,87,.25);

	--altcha-color-base:         transparent;
	--altcha-color-text:         #ffffff;
	--altcha-color-border:       rgba(255,255,255,0.25);
	--altcha-color-border-focus: rgba(255,255,255,0.8);
	--altcha-color-footer-bg:    transparent;
	--altcha-color-active:       #ffffff;
}

.wephca-style-wrap--mode-auto altcha-widget:hover {
	border-color: rgba(255,255,255,0.4);
	box-shadow:   0 4px 12px rgba(29,53,87,.35);
}

.wephca-style-wrap--mode-auto altcha-widget[data-state="verified"] {
	border-color: rgba(255,255,255,0.4);
}
.altcha-main{align-items:center;display:flex;gap:.4rem;padding:.7rem;position:relative}

.wephca-style-wrap--mode-auto altcha-widget[data-state="error"] {
	border-color: var(--wephca-red);
	box-shadow:   0 0 0 3px rgba(230,57,70,.2);
}

/* ── Form context spacing ── */
.wephca-style-wrap--login,
.wephca-style-wrap--register,
.wephca-style-wrap--lostpw    { margin: 16px 0 20px; }
.wephca-style-wrap--comment   { margin: 20px 0; }
.wephca-style-wrap--elementor { margin: 8px 0; }