/* 
 * PhonxLab Booking Frontend SPA CSS
 */

#phonxlab-booking-root {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background: #fff;
    min-height: 400px;
}

.pxl-loader {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
    color: #666;
}

.pxl-error {
    background: #FFf0f0;
    color: #FF0000;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #FF0000;
    margin-bottom: 20px;
}

/* Steps */
.pxl-step-header {
    margin-bottom: 30px;
    text-align: center;
}

.pxl-step-header h2 {
    font-family: 'Fredoka', sans-serif;
    color: #000;
    margin: 0;
    font-size: 2rem;
}

.pxl-step-header p {
    color: #666;
    margin-top: 5px;
}

/* Grid layout for Service/Brand */
.pxl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.pxl-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.pxl-card:hover {
    border-color: #FFD700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px);
}

.pxl-card.selected {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.05);
    font-weight: 600;
}

/* Models List */
.pxl-search {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
}
.pxl-search:focus { outline: none; border-color: #FFD700; }

.pxl-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.pxl-list-item {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.pxl-list-item:last-child { border-bottom: none; }
.pxl-list-item:hover { background: #f9f9f9; }

/* Calendar/Time */
.pxl-calendar {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 30px;
}

.pxl-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.pxl-slot {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

.pxl-slot:hover { border-color: #FFD700; background: #fffdf0; }
.pxl-slot.selected { background: #FFD700; border-color: #FFD700; color: #000; font-weight: bold; }

/* Form Fields */
.pxl-form-group { margin-bottom: 20px; }
.pxl-form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.pxl-form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
}
.pxl-form-control:focus { outline: none; border-color: #FFD700; }

.pxl-phone-group { display: flex; gap: 10px; }
.pxl-phone-group select { width: 120px; }
.pxl-phone-group input { flex: 1; }

.pxl-error-text { color: #FF0000; font-size: 0.85rem; margin-top: 5px; display: block; }
.pxl-input-error { border-color: #FF0000; }

/* Buttons */
.pxl-actions { display: flex; justify-content: space-between; margin-top: 30px; }
.pxl-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.2s;
}

.pxl-btn-back { background: #f0f0f0; color: #333; }
.pxl-btn-back:hover { background: #e0e0e0; }

.pxl-btn-next, .pxl-btn-primary { background: #FFD700; color: #000; font-weight: 600; }
.pxl-btn-next:hover, .pxl-btn-primary:hover { background: #000; color: #fff; }

.pxl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Review Summary */
.pxl-summary {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.pxl-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.pxl-summary-row:last-child { border-bottom: none; }
.pxl-summary-label { font-weight: 600; color: #555; }
.pxl-summary-value { text-align: right; }
.pxl-edit-link { color: #0066cc; text-decoration: underline; cursor: pointer; font-size: 0.85rem; margin-left: 10px; }

/* Confirmation */
.pxl-success {
    text-align: center;
    padding: 40px 20px;
}
.pxl-success h2 { color: #28a745; font-family: 'Fredoka', sans-serif; }
.pxl-booking-number { font-size: 1.5rem; font-weight: bold; padding: 15px; background: #f0f0f0; border-radius: 8px; display: inline-block; margin: 20px 0; letter-spacing: 1px; }

/* Honeypot */
.pxl-hp { display: none !important; }