/* 
 * SecureVault Smart-Theme Engine 
 * Automatically detects and inherits colors from Elementor, Astra, or WP Theme-JSON
 */
:root {
	/* Universal Defaults (Light Theme) */
	--uog-bg: #ffffff;
	--uog-text: #1a1a1a;
	--uog-accent: #007cba; /* Standard WordPress Blue */
	--uog-field-bg: rgba(0,0,0,0.03);
	--uog-border: rgba(0,0,0,0.15);
}

/* Framework Auto-Detection: Elementor */
[data-elementor-device-mode], .elementor-default {
	--uog-bg: var(--e-global-color-accent, #ffffff);
	--uog-text: var(--e-global-color-text, #1a1a1a);
	--uog-accent: var(--e-global-color-primary, #007cba);
	--uog-field-bg: rgba(0,0,0,0.05);
	--uog-border: var(--e-global-color-primary, rgba(0,0,0,0.1));
}

/* Framework Auto-Detection: Astra */
.ast-separate-container {
	--uog-bg: var(--ast-global-color-5, #ffffff);
	--uog-text: var(--ast-global-color-3, #1a1a1a);
	--uog-accent: var(--ast-global-color-0, #007cba);
}

/* Framework Auto-Detection: WP Core / Block Themes */
body[class*="wp-block-"] {
	--uog-bg: var(--wp--preset--color--background, #ffffff);
	--uog-text: var(--wp--preset--color--text, #1a1a1a);
	--uog-accent: var(--wp--preset--color--primary, #007cba);
}

.uog-cc-form {
	padding: 15px;
	background: transparent;
	border: 1px solid var(--uog-border);
	border-radius: 4px;
	margin-bottom: 20px;
}

.uog-input-container {
	position: relative;
}

.uog-card-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 25px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.6;
}

/* Card Logos - Keep branding intact */
.uog-card-icon.visa { background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg'); opacity: 1; }
.uog-card-icon.mastercard { background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg'); opacity: 1; }
.uog-card-icon.amex { background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/30/American_Express_logo.svg'); opacity: 1; }
.uog-card-icon.discover { background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Discover_Card_logo.svg'); opacity: 1; }

#uog-card-number {
	padding-right: 55px;
}

.uog-cc-form .form-row label {
	font-weight: 500;
	margin-bottom: 5px;
	display: block;
}

.uog-cc-form .input-text {
	width: 100%;
}

/* Standalone Modal Styles */
.uog-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
}

.uog-modal-container {
	background: var(--uog-bg) !important;
	color: var(--uog-text) !important;
	padding: 35px;
	border-radius: 12px;
	width: 90%;
	max-width: 500px;
	position: relative;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	border: 1px solid var(--uog-border);
}

.uog-close-modal {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 32px;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.uog-close-modal:hover {
	opacity: 1;
}

.uog-modal-container h3 {
	margin-top: 0;
	border-bottom: 2px solid var(--uog-accent) !important;
	padding-bottom: 15px;
	margin-bottom: 25px;
	font-family: inherit;
}

.uog-field-group {
	margin-bottom: 20px;
}

.uog-field-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 0.9em;
	opacity: 0.8;
}

.uog-field-group input.input-text,
.uog-field-group textarea.input-text,
.uog-field-group input[type="text"],
.uog-field-group input[type="email"],
.uog-field-group input[type="password"],
.uog-field-group textarea {
	width: 100% !important;
	padding: 12px !important;
	border: 1px solid var(--uog-border) !important;
	border-radius: 6px !important;
	background: var(--uog-field-bg) !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-sizing: border-box !important;
}

.uog-field-group input:focus,
.uog-field-group textarea:focus {
	border-color: var(--uog-accent) !important;
	outline: none;
}

.uog-field-group input::placeholder,
.uog-field-group textarea::placeholder {
	opacity: 0.3 !important;
	color: inherit !important;
}

.uog-field-group-row {
	display: flex;
	gap: 15px;
}

.uog-field-group-row .uog-field-group {
	flex: 1;
}

/* Button: Inherits theme styles from .button.alt */
.uog-submit-payment {
	width: 100% !important;
	margin-top: 15px !important;
	padding: 15px !important;
	font-weight: 600 !important;
}

.uog-sa-msg {
	margin-top: 15px;
	text-align: center;
	font-weight: 500;
	font-size: 0.95em;
}

.uog-sa-msg.success { color: #4CAF50; }
.uog-sa-msg.error { color: #f44336; }