/* ============ WPP BOOKING SYSTEM STYLES ============ */
/* Matches the pink-to-orange gradient theme of the existing booking page */

.wpp-booking-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
}

.wpp-calendar-col {
    flex: 1 1 320px;
    max-width: 360px;
}

.wpp-form-col {
    flex: 2 1 480px;
    background: #f7eefb;
    border-radius: 12px;
    padding: 30px;
}

/* ---- Calendar ---- */
.wpp-calendar {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.wpp-cal-header {
    background: linear-gradient(90deg, #ec1361, #f9943b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 18px;
}

.wpp-cal-nav {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    font-weight: 700;
}

.wpp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.wpp-cal-grid .wpp-day-name {
    font-weight: 700;
    padding: 10px 0;
    background: #faf5fb;
    color: #555;
    font-size: 13px;
}

.wpp-cal-grid .wpp-day-cell {
    padding: 14px 0;
    cursor: pointer;
    border: 1px solid #f5f5f5;
    font-size: 14px;
    position: relative;
}

.wpp-cal-grid .wpp-day-cell.empty {
    cursor: default;
    background: #fff;
}

.wpp-cal-grid .wpp-day-cell.wpp-past {
    color: #ccc;
    cursor: not-allowed;
}

.wpp-cal-grid .wpp-day-cell:hover:not(.empty):not(.wpp-past) {
    background: #ffe9f0;
}

.wpp-cal-grid .wpp-day-cell.wpp-selected {
    background: linear-gradient(90deg, #ec1361, #f9943b);
    color: #fff;
    font-weight: 700;
    border-radius: 6px;
}

.wpp-cal-grid .wpp-day-cell.wpp-full-booked {
    background: #3b4a6b;
    color: #fff;
}

.wpp-cal-grid .wpp-day-cell.wpp-has-pending {
    background: #7fa8f5;
    color: #fff;
}

.wpp-legend {
    margin-top: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wpp-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-right: 4px;
}
.wpp-dot.wpp-available { background: #fff; }
.wpp-dot.wpp-booked { background: #3b4a6b; }
.wpp-dot.wpp-pending { background: #7fa8f5; }

/* ---- Time slots ---- */
.wpp-form-col h3 {
    margin-top: 0;
}

.req { color: #ec1361; }

.wpp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.wpp-slot-btn {
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s ease;
}

.wpp-slot-btn.available:hover {
    border-color: #ec1361;
}

.wpp-slot-btn.selected {
    background: linear-gradient(90deg, #ec1361, #f9943b);
    color: #fff;
    border-color: transparent;
}

.wpp-slot-btn.booked {
    background: #3b4a6b;
    color: #fff;
    cursor: not-allowed;
}

.wpp-slot-btn.pending {
    background: #7fa8f5;
    color: #fff;
    cursor: not-allowed;
}

.wpp-hint {
    font-size: 13px;
    color: #777;
}

/* ---- Form fields ---- */
#wpp-booking-form label {
    display: block;
    font-weight: 700;
    margin: 16px 0 6px;
}

#wpp-booking-form input[type="text"],
#wpp-booking-form input[type="email"],
#wpp-booking-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
}

.wpp-upi-box {
    margin-top: 24px;
    padding: 20px;
    border: 2px dashed #f9943b;
    border-radius: 10px;
    background: #fff8f3;
    text-align: center;
}

.wpp-upi-box h4 {
    margin-top: 0;
    color: #ec1361;
}

.wpp-qr-img {
    max-width: 180px;
    margin: 10px auto;
    display: block;
    border: 1px solid #eee;
    border-radius: 6px;
}

.wpp-upi-box input[type="text"] {
    text-align: center;
}

.wpp-submit-btn {
    margin-top: 24px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #ec1361, #f9943b);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.wpp-submit-btn:hover {
    opacity: 0.92;
}

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

#wpp-form-msg {
    margin-top: 16px;
    font-weight: 600;
}

#wpp-form-msg.success { color: #2e7d32; }
#wpp-form-msg.error { color: #c62828; }

@media (max-width: 768px) {
    .wpp-booking-wrapper { flex-direction: column; }
    .wpp-calendar-col { max-width: 100%; }
}