/* ==========================================================================
   Vehicle Price Lookup — Front-End Styles
   ========================================================================== */

/* ------------------------------------------------------------------
   Variables
   ------------------------------------------------------------------ */
.vpl-widget-wrap {
	--vpl-primary:       #1a56db;
	--vpl-primary-dark:  #1342af;
	--vpl-success:       #0e9f6e;
	--vpl-error:         #e02424;
	--vpl-bg:            #ffffff;
	--vpl-surface:       #f9fafb;
	--vpl-border:        #d1d5db;
	--vpl-text:          #111827;
	--vpl-muted:         #6b7280;
	--vpl-radius:        10px;
	--vpl-radius-sm:     6px;
	--vpl-shadow:        0 4px 24px rgba(0,0,0,.08);
	--vpl-transition:    .2s ease;
}

/* ------------------------------------------------------------------
   Wrapper
   ------------------------------------------------------------------ */
.vpl-widget-wrap {
	background:    var(--vpl-bg);
	border-radius: var(--vpl-radius);
	box-shadow:    var(--vpl-shadow);
	padding:       32px;
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color:         var(--vpl-text);
	box-sizing:    border-box;
}

/* ------------------------------------------------------------------
   Title & Subtitle
   ------------------------------------------------------------------ */
.vpl-widget-title {
	font-size:     1.5rem;
	font-weight:   700;
	margin:        0 0 6px;
	line-height:   1.2;
}

.vpl-widget-subtitle {
	color:         var(--vpl-muted);
	margin:        0 0 24px;
	font-size:     .925rem;
}

/* ------------------------------------------------------------------
   Form — Vertical Layout (default)
   ------------------------------------------------------------------ */
.vpl-layout-vertical .vpl-form-fields {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.vpl-layout-vertical .vpl-field-group {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

/* ------------------------------------------------------------------
   Form — Horizontal Layout
   ------------------------------------------------------------------ */
.vpl-layout-horizontal .vpl-form-fields {
	display:     flex;
	flex-wrap:   wrap;
	gap:         12px;
	align-items: flex-end;
}

.vpl-layout-horizontal .vpl-field-group {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	flex:           1 1 140px;
	min-width:      130px;
}

.vpl-layout-horizontal .vpl-btn-group {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Labels
   ------------------------------------------------------------------ */
.vpl-field-group label {
	font-size:   .8125rem;
	font-weight: 600;
	color:       var(--vpl-text);
	letter-spacing: .01em;
}

/* ------------------------------------------------------------------
   Selects
   ------------------------------------------------------------------ */
.vpl-select {
	width:            100%;
	padding:          10px 36px 10px 12px;
	border:           1.5px solid var(--vpl-border);
	border-radius:    var(--vpl-radius-sm);
	background-color: var(--vpl-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 10px center;
	background-size:     16px;
	-webkit-appearance:  none;
	appearance:          none;
	font-size:           .9375rem;
	color:               var(--vpl-text);
	cursor:              pointer;
	transition:          border-color var(--vpl-transition), box-shadow var(--vpl-transition);
	outline:             none;
}

.vpl-select:focus {
	border-color: var(--vpl-primary);
	box-shadow:   0 0 0 3px rgba(26,86,219,.15);
}

.vpl-select:disabled {
	background-color: var(--vpl-surface);
	color:            var(--vpl-muted);
	cursor:           not-allowed;
	opacity:          .7;
}

/* ------------------------------------------------------------------
   Submit Button
   ------------------------------------------------------------------ */
.vpl-submit-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	background:      var(--vpl-primary);
	color:           #fff;
	border:          none;
	border-radius:   var(--vpl-radius-sm);
	padding:         11px 24px;
	font-size:       .9375rem;
	font-weight:     600;
	cursor:          pointer;
	width:           100%;
	transition:      background var(--vpl-transition), transform var(--vpl-transition), box-shadow var(--vpl-transition);
	position:        relative;
	overflow:        hidden;
	letter-spacing:  .01em;
}

.vpl-submit-btn:hover:not(:disabled) {
	background:   var(--vpl-primary-dark);
	box-shadow:   0 4px 12px rgba(26,86,219,.3);
	transform:    translateY(-1px);
}

.vpl-submit-btn:active:not(:disabled) {
	transform: translateY(0);
}

.vpl-submit-btn:disabled {
	opacity: .55;
	cursor:  not-allowed;
}

/* Spinner */
.vpl-btn-spinner {
	display: none;
	width:   16px;
	height:  16px;
	border:  2.5px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius:    50%;
}

.vpl-submit-btn.vpl-loading .vpl-btn-spinner {
	display:   inline-block;
	animation: vpl-spin .7s linear infinite;
}

.vpl-submit-btn.vpl-loading .vpl-btn-text {
	opacity: .6;
}

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

/* ------------------------------------------------------------------
   Result Box
   ------------------------------------------------------------------ */
.vpl-result-box {
	margin-top:    24px;
	background:    linear-gradient(135deg, #f0f7ff 0%, #e8f5e9 100%);
	border:        1.5px solid #b6d9f7;
	border-radius: var(--vpl-radius);
	padding:       24px 28px;
}

.vpl-result-vehicle {
	font-size:   .875rem;
	color:       var(--vpl-muted);
	font-weight: 500;
	margin-bottom: 6px;
}

.vpl-result-price-row {
	display:     flex;
	align-items: baseline;
	flex-wrap:   wrap;
	gap:         8px;
}

.vpl-price-label {
	font-size:   1rem;
	color:       var(--vpl-text);
	font-weight: 600;
}

.vpl-price-amount {
	font-size:   2.5rem;
	font-weight: 800;
	color:       var(--vpl-success);
	line-height: 1;
	letter-spacing: -.02em;
}

.vpl-price-suffix {
	font-size:   1rem;
	color:       var(--vpl-muted);
}

.vpl-result-cta {
	margin-top: 12px;
	border-top: 1px solid rgba(0,0,0,.06);
	padding-top: 12px;
}

.vpl-cta-text {
	margin:    0;
	font-size: .875rem;
	color:     var(--vpl-muted);
}

/* ------------------------------------------------------------------
   Error Box
   ------------------------------------------------------------------ */
.vpl-error-box {
	margin-top:    16px;
	background:    #fef2f2;
	border:        1.5px solid #fca5a5;
	border-radius: var(--vpl-radius-sm);
	padding:       12px 16px;
	font-size:     .875rem;
	color:         var(--vpl-error);
	font-weight:   500;
}

/* ------------------------------------------------------------------
   Disclaimer
   ------------------------------------------------------------------ */
.vpl-disclaimer {
	margin:    16px 0 0;
	font-size: .78rem;
	color:     var(--vpl-muted);
	font-style: italic;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.vpl-widget-wrap {
		padding: 20px;
	}

	.vpl-layout-horizontal .vpl-form-fields {
		flex-direction: column;
	}

	.vpl-layout-horizontal .vpl-field-group {
		flex: 1 1 100%;
	}

	.vpl-price-amount {
		font-size: 2rem;
	}
}