/**
 * Property Inquiry Manager — Frontend Styles
 *
 * Theme: Villa / Luxury Real Estate — warm amber CTA, crisp white inputs,
 * semi-transparent card on a dark backdrop. Matches reference screenshot.
 *
 * Uses BEM-inspired class naming prefixed with .pim- to avoid conflicts.
 */

/* =========================================================
   CSS Variables — single source of truth for the palette
   ========================================================= */
.pim-form-wrap {
	--pim-amber:        #F5B800;
	--pim-amber-hover:  #e0a900;
	--pim-amber-dark:   #c99200;
	--pim-amber-faded:  rgba(245, 184, 0, 0.18);
	--pim-white:        #ffffff;
	--pim-input-bg:     #ffffff;
	--pim-input-border: rgba(0, 0, 0, 0.12);
	--pim-input-focus:  #F5B800;
	--pim-text:         #1a1a1a;
	--pim-placeholder:  #888888;
	--pim-label:        #ffffff;
	--pim-card-bg:      rgba(20, 18, 14, 0.72);
	--pim-card-border:  rgba(245, 184, 0, 0.25);
	--pim-error:        #e74c3c;
	--pim-success-bg:   rgba(39, 174, 96, 0.15);
	--pim-success-text: #27ae60;
	--pim-radius:       4px;
	--pim-font:         "Georgia", "Times New Roman", serif;
}

/* =========================================================
   1. Form Wrapper
   ========================================================= */
.pim-form-wrap {
	max-width: 560px;
	margin: 0 auto 2rem auto;
	font-family: var(--pim-font);
	font-size: 15px;
	color: var(--pim-text);
}

/* =========================================================
   2. Feedback Messages
   ========================================================= */
.pim-message {
	padding: 13px 18px;
	margin-bottom: 18px;
	border-radius: var(--pim-radius);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	border-left: 4px solid transparent;
}

.pim-success {
	background-color: var(--pim-success-bg);
	border-left-color: var(--pim-success-text);
	color: var(--pim-success-text);
}

.pim-error {
	background-color: rgba(231, 76, 60, 0.12);
	border-left-color: var(--pim-error);
	color: var(--pim-error);
}

/* =========================================================
   3. Form Card — dark translucent panel (matches reference)
   ========================================================= */
.pim-form {
	background: var(--pim-card-bg);
	border: 1px solid var(--pim-card-border);
	border-radius: 6px;
	padding: 32px 30px 28px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(245, 184, 0, 0.08) inset;
}

/* =========================================================
   4. Form Grid — single column (matching reference layout)
   ========================================================= */
.pim-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}

.pim-field--half {
	grid-column: span 1;
}

.pim-field--full {
	grid-column: 1 / -1;
}

@media (max-width: 520px) {
	.pim-form {
		padding: 24px 18px 20px;
	}
	.pim-form-grid {
		grid-template-columns: 1fr;
	}
	.pim-field--half {
		grid-column: span 1;
	}
}

/* =========================================================
   5. Individual Field Wrapper
   ========================================================= */
.pim-field {
	display: flex;
	flex-direction: column;
}

/* =========================================================
   6. Labels — white on dark card
   ========================================================= */
.pim-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pim-required {
	color: var(--pim-amber);
	margin-left: 2px;
}

.pim-optional {
	font-weight: 400;
	color: rgba(255,255,255,0.35);
	font-size: 10px;
	margin-left: 4px;
	text-transform: none;
	letter-spacing: 0;
}

/* =========================================================
   7. Input, Select, Textarea — bright white (like reference)
   ========================================================= */
.pim-input {
	display: block;
	width: 100%;
	padding: 7px 20px;
	font-size: 18px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--pim-text);
	background-color: var(--pim-input-bg);
	border: 1.5px solid var(--pim-input-border);
	border-radius: 0px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.pim-input::placeholder {
	color: var(--pim-placeholder);
	font-size: 14px;
}

.pim-input:focus {
	outline: none;
	border-color: var(--pim-input-focus);
	box-shadow: 0 0 0 3px var(--pim-amber-faded);
}

/* Select arrow — amber chevron to match brand */
select.pim-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23F5B800' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}

.pim-textarea {
	resize: vertical;
	min-height: 100px;
}

/* Invalid state */
.pim-input.pim-invalid {
	border-color: var(--pim-error);
	background-color: #fff8f8;
}

.pim-input.pim-invalid:focus {
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* =========================================================
   8. Inline Field Errors
   ========================================================= */
.pim-field-error {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #ff6b5b;
	min-height: 15px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   9. Submit Section
   ========================================================= */
.pim-submit-wrap {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pim-required-note {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.35);
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
}

/* =========================================================
   10. Submit Button — full-width amber (matches reference)
   ========================================================= */
.pim-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 28px;
	font-size: 15px;
	font-weight: 700;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	background-color: var(--pim-amber);
	border: none;
	border-radius: var(--pim-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
	box-shadow: 0 3px 14px rgba(245, 184, 0, 0.4);
	line-height: 1;
}

.pim-submit-btn:hover:not(:disabled) {
	background-color: var(--pim-amber-hover);
	box-shadow: 0 5px 20px rgba(245, 184, 0, 0.5);
	transform: translateY(-1px);
}

.pim-submit-btn:active:not(:disabled) {
	transform: translateY(0);
	background-color: var(--pim-amber-dark);
	box-shadow: 0 2px 8px rgba(245, 184, 0, 0.3);
}

.pim-submit-btn:disabled {
	background-color: rgba(245, 184, 0, 0.45);
	color: rgba(26, 26, 26, 0.5);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}
button#pim-submit-btn{
	background-color:#F6D167 !important;
	color: #000 !important;
	border:none !important;
	border-radius: 0px !important;
}
.pim-fiel input{
	border-radius:0px !important;
	
}
/* =========================================================
   11. Loading Spinner — dark on amber
   ========================================================= */
.pim-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(26, 26, 26, 0.25);
	border-top-color: #1a1a1a;
	border-radius: 50%;
	animation: pim-spin 0.7s linear infinite;
	flex-shrink: 0;
}

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

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