/**
 * Frontend Styles for Lagnaya Service Custom Fields.
 *
 * Inherits global site typography and adapts cleanly to both dark and light modes.
 *
 * @package Custom_Astro_Handler_By_Hewabahithage
 */

:root {
	--lsf-font-family: var(--e-global-typography-text-font-family, var(--e-global-typography-primary-font-family, var(--wp--preset--font-family--primary, inherit)));
	--lsf-border-color: rgba(200, 162, 74, 0.25);
	--lsf-border-focus: #c8a24a;
	--lsf-bg-input: rgba(18, 26, 43, 0.6);
	--lsf-text-color: #f1f5f9;
	--lsf-text-muted: #94a3b8;
	--lsf-danger-color: #ef4444;
	--lsf-radius: 8px;
	--lsf-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container */
.lagnaya-service-fields-container {
	margin: 1.5rem 0;
	padding: 1.5rem;
	background: rgba(18, 26, 43, 0.45);
	border: 1px solid rgba(200, 162, 74, 0.2);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--lsf-font-family);
}

.lagnaya-fields-inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Single Field Wrapper */
.lagnaya-field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	width: 100%;
	box-sizing: border-box;
}

/* Label */
.lagnaya-field-label {
	display: inline-block;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #f8fafc;
	margin-bottom: 0.15rem;
	cursor: pointer;
	letter-spacing: 0.02em;
}

.lagnaya-field-label .required {
	color: #f87171;
	margin-left: 3px;
	text-decoration: none;
	border-bottom: none;
	font-weight: 700;
}

/* Inputs, Textareas, and Selects */
.lagnaya-input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--lsf-font-family);
	font-size: 0.95rem;
	line-height: 1.5;
	padding: 0.75rem 1rem;
	border: 1px solid var(--lsf-border-color);
	border-radius: var(--lsf-radius);
	background-color: var(--lsf-bg-input);
	color: #f8fafc;
	transition: var(--lsf-transition);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}

.lagnaya-input::placeholder {
	color: #64748b;
}

.lagnaya-input:hover {
	border-color: rgba(200, 162, 74, 0.5);
}

.lagnaya-input:focus {
	outline: none;
	border-color: var(--lsf-border-focus);
	box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.2);
}

.lagnaya-input-textarea {
	resize: vertical;
	min-height: 90px;
}

.lagnaya-input-select {
	appearance: auto;
	cursor: pointer;
	background-color: #0d1527;
}

.lagnaya-input-select option {
	background-color: #0d1527;
	color: #f8fafc;
}

/* Radio Group */
.lagnaya-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.25rem 0;
}

.lagnaya-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
	color: #e2e8f0;
}

.lagnaya-radio-option input[type="radio"] {
	margin: 0;
	cursor: pointer;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: #c8a24a;
}

/* File Upload */
.lagnaya-file-uploader-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.lagnaya-input-file {
	padding: 0.6rem 0.8rem;
	cursor: pointer;
	border: 1px dashed rgba(200, 162, 74, 0.4);
	background: rgba(18, 26, 43, 0.5);
	color: #e2e8f0;
}

.lagnaya-input-file::file-selector-button {
	font-family: var(--lsf-font-family);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 1rem;
	margin-right: 0.85rem;
	border: 1px solid rgba(200, 162, 74, 0.4);
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(200, 162, 74, 0.2), rgba(200, 162, 74, 0.05));
	color: #f6d884;
	cursor: pointer;
	transition: var(--lsf-transition);
}

.lagnaya-input-file::file-selector-button:hover {
	background: linear-gradient(135deg, rgba(200, 162, 74, 0.35), rgba(200, 162, 74, 0.15));
	border-color: #c8a24a;
}

.lagnaya-file-guide {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	color: var(--lsf-text-muted);
}

/* Hints and Placeholders */
.lagnaya-field-hint {
	margin: 0.35rem 0 0 0;
	font-size: 0.84rem;
	line-height: 1.4;
	color: var(--lsf-text-muted);
	font-style: italic;
}

/* Error feedback indicator */
.lagnaya-field-wrapper.has-error .lagnaya-input {
	border-color: var(--lsf-danger-color);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.lagnaya-error-message {
	color: #f87171;
	font-size: 0.84rem;
	margin-top: 0.3rem;
	font-weight: 500;
}

/* ==========================================================================
   Smooth Astrological WooCommerce & WordPress Alert / Notice Overrides
   ========================================================================== */
.woocommerce-notices-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-notices-wrapper:empty,
.woocommerce-notices-wrapper:not(:has(*)) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	border: none !important;
}

.woocommerce-notices-wrapper:has(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	display: block !important;
	margin: 1.5rem auto !important;
	max-width: 1200px;
	padding: 0 1rem;
}

@keyframes lsfNoticeSlideDown {
	0% {
		opacity: 0;
		transform: translateY(-12px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 1.5rem 0 !important;
	padding: 1.15rem 1.5rem 1.15rem 3.5rem !important;
	border-radius: var(--lsf-radius, 10px) !important;
	font-family: var(--lsf-font-family, inherit) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	list-style: none !important;
	animation: lsfNoticeSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
}

/* Error Notices */
.woocommerce-error {
	background: linear-gradient(135deg, rgba(32, 12, 12, 0.95) 0%, rgba(16, 8, 10, 0.98) 100%) !important;
	border: 1px solid rgba(242, 92, 5, 0.45) !important;
	border-left: 5px solid #f25c05 !important;
	color: #ffffff !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(242, 92, 5, 0.18) !important;
}

.woocommerce-error::before {
	content: "\f534" !important;
	font-family: dashicons !important;
	position: absolute !important;
	left: 1.25rem !important;
	top: 1.15rem !important;
	font-size: 1.35rem !important;
	color: #f25c05 !important;
	text-shadow: 0 0 12px rgba(242, 92, 5, 0.6) !important;
	line-height: 1 !important;
}

/* Success Messages */
.woocommerce-message {
	background: linear-gradient(135deg, rgba(8, 30, 20, 0.95) 0%, rgba(4, 18, 14, 0.98) 100%) !important;
	border: 1px solid rgba(16, 185, 129, 0.45) !important;
	border-left: 5px solid #10b981 !important;
	color: #ffffff !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(16, 185, 129, 0.18) !important;
}

.woocommerce-message::before {
	content: "\f147" !important;
	font-family: dashicons !important;
	position: absolute !important;
	left: 1.25rem !important;
	top: 1.15rem !important;
	font-size: 1.35rem !important;
	color: #10b981 !important;
	text-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
	line-height: 1 !important;
}

/* Information Notices */
.woocommerce-info {
	background: linear-gradient(135deg, rgba(16, 26, 42, 0.95) 0%, rgba(8, 16, 28, 0.98) 100%) !important;
	border: 1px solid rgba(229, 169, 60, 0.45) !important;
	border-left: 5px solid #e5a93c !important;
	color: #ffffff !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(229, 169, 60, 0.18) !important;
}

.woocommerce-info::before {
	content: "\f348" !important;
	font-family: dashicons !important;
	position: absolute !important;
	left: 1.25rem !important;
	top: 1.15rem !important;
	font-size: 1.35rem !important;
	color: #e5a93c !important;
	text-shadow: 0 0 12px rgba(229, 169, 60, 0.6) !important;
	line-height: 1 !important;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0 0 0.4rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
	color: #ffffff !important;
}

.woocommerce-error li:last-child,
.woocommerce-message li:last-child,
.woocommerce-info li:last-child {
	margin-bottom: 0 !important;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: #ffd166 !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

.woocommerce-message a.button,
.woocommerce-message .button.wc-forward,
.woocommerce-info a.button {
	float: right !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: -0.25rem 0 0 1rem !important;
	padding: 0.45rem 1.1rem !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: #ffffff !important;
	background: linear-gradient(135deg, #f25c05 0%, #ff8533 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 12px rgba(242, 92, 5, 0.35) !important;
	transition: all 0.25s ease !important;
}

.woocommerce-message a.button:hover,
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info a.button:hover {
	background: linear-gradient(135deg, #ff8533 0%, #f25c05 100%) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(242, 92, 5, 0.5) !important;
}