/**
 * Maavelus Suite - Frontend Styles
 * Minimal, clean design
 */

/* Base Variables */
:root {
 --maavelus-primary: #2563eb;
 --maavelus-primary-hover: #1d4ed8;
 --maavelus-success: #10b981;
 --maavelus-error: #ef4444;
 --maavelus-warning: #f59e0b;
 --maavelus-text: #1f2937;
 --maavelus-text-light: #6b7280;
 --maavelus-border: #e5e7eb;
 --maavelus-bg: #f9fafb;
 --maavelus-radius: 8px;
}

/* Location Selector */
.maavelus-location-selector {
 margin-bottom: 1.5rem;
}

.maavelus-location-selector select {
 width: 100%;
 padding: 0.75rem 1rem;
 border: 1px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
 font-size: 1rem;
 background: #fff;
 cursor: pointer;
}

.maavelus-location-selector select:focus {
 outline: none;
 border-color: var(--maavelus-primary);
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.maavelus-location-selector .location-address {
 margin-top: 0.5rem;
 color: var(--maavelus-text-light);
 font-size: 0.875rem;
}

/* Service Selector */
.maavelus-service-selector {
 margin-bottom: 1.5rem;
}

.maavelus-service-selector .service-options {
 display: flex;
 gap: 0.75rem;
}

.maavelus-service-selector .service-option {
 flex: 1;
 padding: 1rem;
 border: 2px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
 background: #fff;
 font-size: 1rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 text-align: center;
}

.maavelus-service-selector .service-option:hover {
 border-color: var(--maavelus-primary);
}

.maavelus-service-selector .service-option.active {
 border-color: var(--maavelus-primary);
 background: var(--maavelus-primary);
 color: #fff;
}

.maavelus-service-selector .notice {
 padding: 1rem;
 background: var(--maavelus-bg);
 border-radius: var(--maavelus-radius);
 color: var(--maavelus-text-light);
}

/* Checkout */
.maavelus-checkout {
 max-width: 800px;
 margin: 0 auto;
}

.maavelus-checkout .checkout-loading {
 text-align: center;
 padding: 3rem;
 color: var(--maavelus-text-light);
}

.maavelus-checkout .checkout-section {
 margin-bottom: 2rem;
 padding: 1.5rem;
 background: #fff;
 border: 1px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
}

.maavelus-checkout .checkout-section h3 {
 margin: 0 0 1rem;
 font-size: 1.125rem;
 font-weight: 600;
}

.maavelus-checkout .form-row {
 margin-bottom: 1rem;
}

.maavelus-checkout .form-row label {
 display: block;
 margin-bottom: 0.5rem;
 font-weight: 500;
}

.maavelus-checkout .form-row input,
.maavelus-checkout .form-row select {
 width: 100%;
 padding: 0.75rem 1rem;
 border: 1px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
 font-size: 1rem;
}

.maavelus-checkout .form-row input:focus,
.maavelus-checkout .form-row select:focus {
 outline: none;
 border-color: var(--maavelus-primary);
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.maavelus-checkout .form-row.has-error input {
 border-color: var(--maavelus-error);
}

.maavelus-checkout .form-row .error-message {
 margin-top: 0.25rem;
 color: var(--maavelus-error);
 font-size: 0.875rem;
}

.maavelus-checkout .submit-btn {
 width: 100%;
 padding: 1rem;
 background: var(--maavelus-primary);
 color: #fff;
 border: none;
 border-radius: var(--maavelus-radius);
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.2s;
}

.maavelus-checkout .submit-btn:hover {
 background: var(--maavelus-primary-hover);
}

.maavelus-checkout .submit-btn:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

/* Order Tracking */
.maavelus-order-tracking .tracking-form {
 max-width: 400px;
 margin: 0 auto;
}

.maavelus-order-tracking .tracking-form label {
 display: block;
 margin-bottom: 0.5rem;
 font-weight: 500;
}

.maavelus-order-tracking .tracking-form input {
 width: 100%;
 padding: 0.75rem 1rem;
 margin-bottom: 1rem;
 border: 1px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
 font-size: 1rem;
}

.maavelus-order-tracking .tracking-form button {
 width: 100%;
 padding: 0.75rem 1rem;
 background: var(--maavelus-primary);
 color: #fff;
 border: none;
 border-radius: var(--maavelus-radius);
 font-size: 1rem;
 font-weight: 500;
 cursor: pointer;
}

.maavelus-order-tracking .tracking-result {
 margin-top: 2rem;
 padding: 1.5rem;
 background: var(--maavelus-bg);
 border-radius: var(--maavelus-radius);
 display: none;
}

.maavelus-order-tracking .tracking-result.visible {
 display: block;
}

.maavelus-order-tracking .tracking-result .status {
 display: inline-block;
 padding: 0.25rem 0.75rem;
 border-radius: 9999px;
 font-size: 0.875rem;
 font-weight: 500;
}

.maavelus-order-tracking .tracking-result .status.processing {
 background: #dbeafe;
 color: #1d4ed8;
}

.maavelus-order-tracking .tracking-result .status.preparing {
 background: #fef3c7;
 color: #d97706;
}

.maavelus-order-tracking .tracking-result .status.ready {
 background: #d1fae5;
 color: #059669;
}

.maavelus-order-tracking .tracking-result .status.completed {
 background: #d1fae5;
 color: #059669;
}

/* Booking Form */
.maavelus-booking-form {
 max-width: 600px;
 margin: 0 auto;
}

.maavelus-booking-form .booking-loading {
 text-align: center;
 padding: 3rem;
 color: var(--maavelus-text-light);
}

/* Dashboard */
.maavelus-dashboard {
 padding: 1rem;
}

.maavelus-dashboard .dashboard-loading {
 text-align: center;
 padding: 3rem;
 color: var(--maavelus-text-light);
}

/* Postcode Checker */
.maavelus-postcode-checker {
 margin-bottom: 1.5rem;
}

.maavelus-postcode-checker .checker-input {
 display: flex;
 gap: 0.5rem;
}

.maavelus-postcode-checker input {
 flex: 1;
 padding: 0.75rem 1rem;
 border: 1px solid var(--maavelus-border);
 border-radius: var(--maavelus-radius);
}

.maavelus-postcode-checker button {
 padding: 0.75rem 1rem;
 background: var(--maavelus-primary);
 color: #fff;
 border: none;
 border-radius: var(--maavelus-radius);
 cursor: pointer;
}

.maavelus-postcode-checker .checker-result {
 margin-top: 0.75rem;
 padding: 0.75rem;
 border-radius: var(--maavelus-radius);
 font-size: 0.875rem;
}

.maavelus-postcode-checker .checker-result.success {
 background: #d1fae5;
 color: #059669;
}

.maavelus-postcode-checker .checker-result.error {
 background: #fee2e2;
 color: #dc2626;
}

/* Utility Classes */
.maavelus-hidden {
 display: none !important;
}

.maavelus-loading {
 opacity: 0.6;
 pointer-events: none;
}

/* Mobile Responsive */
@media (max-width: 640px) {
 .maavelus-service-selector .service-options {
 flex-direction: column;
 }
 
 .maavelus-checkout .checkout-section {
 padding: 1rem;
 }
}