:root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --info-color: #17a2b8;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --white: #ffffff;
            --border-radius: 8px;
            --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            font-size: 14px; /* Smaller base font size like Playo */
            line-height: 1.4;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--info-color));
            color: white;
            padding: 0.75rem 0;
            margin-bottom: 1.25rem;
        }

        .header h1 {
            font-size: 1.25rem; /* Smaller header font like Playo */
            font-weight: 600;
        }

        .header p {
            font-size: 0.75rem;
            margin-bottom: 0;
        }

        .booking-container {
            max-width: 850px; /* Narrower container to match Playo */
            margin: 0 auto;
            padding: 0 15px;
        }

        .booking-card {
            background: var(--white);
            border-radius: 6px; /* Smaller border radius like Playo */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Lighter shadow like Playo */
            padding: 1.25rem; /* Compact padding like Playo */
            margin-bottom: 1rem;
        }

        .form-group {
            margin-bottom: 1rem; /* Compact spacing like Playo */
        }

        .form-label {
            font-weight: 500; /* Lighter font weight like Playo */
            color: #333;
            margin-bottom: 0.375rem; /* Compact margin like Playo */
            display: block;
            font-size: 14px; /* Consistent with Playo */
        }

        .form-control, .form-select {
            border: 1px solid #ddd; /* Lighter border like Playo */
            border-radius: 4px; /* Smaller border radius like Playo */
            padding: 0.5rem 0.75rem; /* Compact padding like Playo */
            font-size: 14px; /* Consistent font size like Playo */
            height: 40px; /* Fixed height like Playo */
            transition: all 0.15s ease;
            background-color: #fff;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .sport-select,
        .date-select,
        .time-select {
            border-color: #ced4da; /* Consistent border color */
            background-color: var(--white); /* White background */
        }

        .duration-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem; /* Better spacing like Playo */
        }

        .duration-btn {
            width: 32px; /* Consistent with Playo button size */
            height: 32px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .duration-btn:hover {
            background: #f8f9fa;
            border-color: #007bff;
        }

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

        .duration-display {
            font-size: 16px; /* Consistent with Playo */
            font-weight: 500;
            min-width: 80px;
            text-align: center;
            color: #333;
        }

        /* Per/swimmer section */
        .swimmer-section {
            border: 1px solid #e9ecef;
            border-radius: 4px; /* Smaller border radius like Playo */
            padding: 1rem;
            margin-bottom: 1rem;
            background: #fafafa;
        }

        .swimmer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .swimmer-title {
            font-weight: 500; /* Lighter font weight like Playo */
            color: #333;
            font-size: 14px; /* Consistent with Playo */
        }

        .swimmer-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .quantity-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem; /* Increased gap for better spacing like Playo */
        }

        .quantity-btn {
            width: 32px; /* Consistent with Playo button size */
            height: 32px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .quantity-btn:hover {
            background: #f8f9fa;
            border-color: #007bff;
        }

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

        .quantity-display {
            font-size: 16px; /* Slightly larger for readability like Playo */
            font-weight: 500;
            min-width: 40px;
            text-align: center;
            color: #333;
        }

        .price-info {
            margin-top: 0.75rem;
        }

        .total-price {
            font-size: 16px; /* Consistent with Playo */
            font-weight: 600;
            color: #28a745; /* Green color like Playo */
        }

        .price-per-ticket {
            font-size: 12px; /* Smaller font like Playo */
            color: #666;
            margin-top: 0.25rem;
        }

        .grand-total {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 1rem;
            border-radius: 4px; /* Smaller border radius like Playo */
            text-align: center;
            margin: 1.25rem 0;
        }

        .grand-total-amount {
            font-size: 1.5rem; /* Smaller font like Playo */
            font-weight: 600;
        }

        .add-to-cart-btn {
            padding: 0.75rem 1.5rem; /* Compact padding like Playo */
            font-size: 14px; /* Consistent font size like Playo */
            border-radius: 4px; /* Smaller border radius like Playo */
            background: #007bff;
            border: 1px solid #007bff;
            color: white;
            width: 100%;
            font-weight: 500;
            transition: all 0.15s ease;
        }

        .add-to-cart-btn:hover {
            background: #0056b3;
            border-color: #0056b3;
        }

        .cart-section {
            background: var(--white);
            border-radius: 6px; /* Consistent with main card */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Consistent shadow */
            padding: 1.25rem; /* Consistent padding */
            height: fit-content; /* Adjust height to content */
        }

        .cart-header {
            text-align: center;
            margin-bottom: 1rem;
        }

        .cart-icon {
            font-size: 2rem; /* Smaller icon like Playo */
            color: #6c757d;
            margin-bottom: 0.75rem;
        }

        .cart-title {
            font-size: 16px; /* Consistent with Playo */
            font-weight: 500;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .cart-total-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 0.25rem;
        }

        .cart-total-amount {
            font-size: 1.5rem;
            font-weight: 600;
            color: #007bff;
        }

        .cart-item {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .cart-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .cart-item-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .remove-btn {
            background: none;
            border: none;
            color: #dc3545;
            font-size: 14px;
            cursor: pointer;
            padding: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .remove-btn:hover {
            color: #c82333;
        }

        .cart-total {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 0.75rem;
            margin-top: 0.75rem;
            text-align: center;
        }

        .checkout-btn {
            background: #28a745;
            border: 1px solid #28a745;
            color: white;
            padding: 0.75rem 1.25rem;
            font-size: 14px;
            border-radius: 4px;
            width: 100%;
            margin-top: 0.75rem;
            font-weight: 500;
            transition: all 0.15s ease;
        }

        .checkout-btn:hover {
            background: #218838;
            border-color: #218838;
        }

        .alert {
            padding: 0.8rem; /* Reduced padding */
            margin-bottom: 0.8rem; /* Reduced margin */
            font-size: 0.85rem; /* Smaller font */

        @media (max-width: 768px) {
            .booking-card {
                padding: 0.8rem;
            }
        }