*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f5f7fa;--accent-primary:#3498db;--accent-secondary:#34495e;--highlight:#27ae60;--highlight-light:#d5f4e6;--success-color:#27ae60;--warning-color:#f39c12;--pending-color:#f39c12;--danger-color:#e74c3c;--light-bg:#f5f7fa;--white:#fff;--text-dark:#34495e;--text-light:#7f8c8d;--border-color:#ecf0f1;--shadow:0 2px 10px #0000001a;--shadow-lg:0 5px 20px #00000026;--border-radius:8px;--transition:all .3s ease}body{background-color:var(--bg-primary);color:var(--text-dark);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.page-container{background:linear-gradient(135deg, var(--bg-primary) 0%, #e8eef7 100%);min-height:100vh;padding:40px 20px}.card{background:var(--white);border-radius:var(--border-radius);box-shadow:var(--shadow);transition:var(--transition);margin-bottom:20px;padding:30px}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}h1,h2,h3,h4,h5,h6{color:var(--accent-secondary);margin-bottom:15px;font-weight:600}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}p{color:var(--text-dark);margin-bottom:10px}.form-group{margin-bottom:20px}label{color:var(--text-dark);margin-bottom:8px;font-weight:500;display:block}input,textarea,select{border:1px solid var(--border-color);border-radius:var(--border-radius);width:100%;transition:var(--transition);padding:12px;font-family:inherit;font-size:1rem}input:focus,textarea:focus,select:focus{border-color:var(--secondary-color);outline:none;box-shadow:0 0 0 3px #3498db1a}textarea{resize:vertical;min-height:100px}.btn{border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);text-align:center;border:none;width:100%;margin-bottom:10px;padding:12px 24px;font-size:1rem;font-weight:600;text-decoration:none;display:inline-block}.btn:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary{background-color:var(--accent-primary);color:var(--white)}.btn-primary:hover{background-color:#2980b9}.btn-secondary{background-color:var(--accent-secondary);color:var(--white)}.btn-secondary:hover{background-color:#1a252f}.btn-success{background-color:var(--success-color);color:var(--white)}.btn-success:hover{background-color:#229954}.btn-danger{background-color:var(--danger-color);color:var(--white)}.btn-danger:hover{background-color:#c0392b}.btn-outline{color:var(--accent-primary);border:2px solid var(--accent-primary);background-color:#0000}.btn-outline:hover{background-color:var(--accent-primary);color:var(--white)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.grid{gap:20px;margin-bottom:20px;display:grid}.grid-2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.court-card{cursor:pointer;transition:var(--transition);border:2px solid #0000}.court-card:hover{border-color:var(--accent-primary);background-color:#fafbfc}.court-card.selected{border-color:var(--highlight);background-color:var(--highlight-light)}.court-card.unavailable{opacity:.6;cursor:not-allowed}.court-card h3{margin-bottom:10px}.court-info{color:var(--text-light);margin-bottom:10px;font-size:.9rem}.court-price{color:var(--highlight);font-size:1.5rem;font-weight:700}.availability-badge{border-radius:20px;margin-top:10px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-block}.badge-available{color:#155724;background-color:#d4edda}.badge-unavailable{color:#721c24;background-color:#f8d7da}.calendar-container{max-width:500px;margin:0 auto}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.calendar-header button{background-color:var(--accent-primary);color:var(--white);border-radius:var(--border-radius);cursor:pointer;border:none;padding:8px 16px;font-weight:600}.weekdays{grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:10px;display:grid}.weekday{text-align:center;color:var(--accent-secondary);padding:10px;font-weight:600}.days{grid-template-columns:repeat(7,1fr);gap:5px;display:grid}.day{aspect-ratio:1;border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);background-color:var(--white);justify-content:center;align-items:center;font-weight:500;display:flex}.day:hover:not(.other-month):not(:disabled){border-color:var(--accent-primary);background-color:#fafbfc}.day.other-month{opacity:.3;cursor:not-allowed}.day.today{background-color:var(--accent-primary);color:var(--white);border-color:var(--accent-primary);font-weight:700}.day.selected{background-color:var(--highlight);color:var(--white);border-color:var(--highlight)}.day:disabled{opacity:.5;cursor:not-allowed;background-color:var(--light-bg)}.day-occupancy-grid{grid-template-columns:repeat(4,1fr);gap:2px;width:100%;margin-top:6px;display:grid}.occupancy-slot{background-color:#d5f4e6;border-radius:2px;height:6px}.occupancy-slot.available{border:1px solid var(--highlight);background-color:#d5f4e6}.occupancy-slot.pending{background-color:var(--pending-color)}.occupancy-slot.occupied{background-color:var(--danger-color)}.day.fully-occupied{opacity:.5;cursor:not-allowed}.day.fully-occupied:hover{border-color:var(--border-color);background-color:var(--light-bg)}.time-slots-container{max-width:600px;margin:0 auto}.time-slot{border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);background-color:var(--white);border:2px solid #e0e6ed;align-items:center;margin-bottom:12px;padding:15px;display:flex}.time-slot:hover{border-color:var(--accent-primary);background-color:#fafbfc}.time-slot.selected{border-color:var(--highlight);background-color:var(--highlight-light)}.time-slot.unavailable{opacity:.6;cursor:not-allowed;background-color:var(--light-bg)}.time-slot input[type=checkbox]{cursor:pointer;width:auto;accent-color:var(--highlight);margin-right:15px}.slot-time{color:var(--accent-secondary);flex:1;font-weight:600}.slot-status{border-radius:20px;padding:4px 12px;font-size:.85rem;font-weight:600}.status-available{color:#155724;background-color:#d4edda}.status-unavailable{color:#721c24;background-color:#f8d7da}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background-color:var(--white);border-radius:var(--border-radius);width:90%;max-width:600px;box-shadow:var(--shadow-lg);max-height:90vh;padding:30px;overflow-y:auto}.modal-header{margin-bottom:20px}.modal-close{float:right;cursor:pointer;color:var(--text-light);transition:var(--transition);font-size:28px;font-weight:700}.modal-close:hover{color:var(--text-dark)}.payment-section{max-width:600px;margin:0 auto}.receipt-details{border-radius:var(--border-radius);background-color:#fafbfc;margin-bottom:20px;padding:20px}.receipt-item{border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:12px;padding-bottom:12px;display:flex}.receipt-item.total{border-bottom:2px solid var(--accent-secondary);color:var(--highlight);font-size:1.2rem;font-weight:700}.receipt-label{color:var(--text-light)}.receipt-value{color:var(--text-dark);font-weight:600}.file-upload{border:2px dashed var(--border-color);border-radius:var(--border-radius);text-align:center;transition:var(--transition);cursor:pointer;padding:30px}.file-upload:hover{border-color:var(--accent-primary);background-color:#fafbfc}.file-upload input[type=file]{display:none}.file-upload p{color:var(--text-light);margin:0}.file-name{color:var(--highlight);margin-top:10px;font-weight:600}.confirmation-card{text-align:center;max-width:600px;margin:0 auto}.booking-id{color:var(--highlight);border-radius:var(--border-radius);word-break:break-all;background-color:#fafbfc;margin:20px 0;padding:20px;font-size:2rem;font-weight:700}.confirmation-icon{margin-bottom:20px;font-size:4rem}.lookup-container{max-width:500px;margin:0 auto}.lookup-form{margin-bottom:30px}.lookup-result{margin-top:30px}.result-card{background-color:var(--white);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:20px}.result-item{border-bottom:1px solid var(--border-color);justify-content:space-between;padding:12px 0;display:flex}.result-item:last-child{border-bottom:none}.result-label{color:var(--accent-secondary);font-weight:600}.result-value{color:var(--text-dark)}.status-badge{border-radius:20px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-block}.status-pending{color:#856404;background-color:#fff3cd}.status-approved{color:#155724;background-color:#d4edda}.status-rejected{color:#721c24;background-color:#f8d7da}.alert{border-radius:var(--border-radius);align-items:center;gap:10px;margin-bottom:20px;padding:15px;display:flex}.alert-success{color:#155724;border-left:4px solid var(--success-color);background-color:#d4edda}.alert-error{color:#721c24;border-left:4px solid var(--danger-color);background-color:#f8d7da}.alert-warning{color:#856404;border-left:4px solid var(--warning-color);background-color:#fff3cd}.alert-info{color:#0c5460;border-left:4px solid var(--accent-primary);background-color:#d1ecf1}.spinner{border:4px solid #e8eef7;border-top:4px solid var(--accent-primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container{justify-content:center;align-items:center;min-height:400px;display:flex}.navbar{background-color:var(--accent-secondary);color:var(--white);box-shadow:var(--shadow);margin-bottom:30px;padding:20px}.navbar a{color:var(--white);transition:var(--transition);margin-right:20px;font-weight:600;text-decoration:none}.navbar a:hover{color:var(--accent-primary)}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.text-center{text-align:center}.text-success{color:var(--success-color)}.text-danger{color:var(--danger-color)}.text-muted{color:var(--text-light)}@media (width<=768px){.page-container,.card{padding:20px}h1{font-size:2rem}h2{font-size:1.5rem}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.modal{width:95%}.navbar a{margin-bottom:10px;display:block}}