@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #F5F5F7;
            color: #1A1A1E;
            -webkit-font-smoothing: antialiased;
        }

        /* Apple-like segmented control */
        .segmented-control {
            background-color: #E5E5EA;
            padding: 4px;
            border-radius: 12px;
            display: flex;
            position: relative;
        }

        .segment {
            flex: 1;
            text-align: center;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 600;
            color: #8E8E93;
            cursor: pointer;
            border-radius: 8px;
            transition: color 0.2s;
            position: relative;
            z-index: 10;
        }

        .segment.active {
            color: #000;
        }

        .segment-pill {
            position: absolute;
            top: 4px;
            bottom: 4px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
            transition: transform 0.3s cubic-bezier(0.85, 0, 0.15, 1);
            z-index: 5;
            width: calc(33.33% - 2.66px);
            /* 3 sections */
        }

        .time-slot {
            border: 1px solid #E5E5EA;
            color: #1A1A1E;
            font-weight: 600;
            padding: 12px;
            text-align: center;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .time-slot:hover {
            border-color: #000;
        }

        .time-slot.active {
            background: #000;
            color: white;
            border-color: #000;
        }

        .time-slot.disabled {
            opacity: 0.3;
            pointer-events: none;
            background: #fafafa;
        }

        .service-card {
            border: 2px solid transparent;
            transition: all 0.2s;
            cursor: pointer;
        }

        .service-card:hover {
            border-color: #E5E5EA;
            transform: translateY(-2px);
        }

        .service-card.active {
            border-color: #000;
            background: #000;
            color: white;
        }

        .service-card.active p.text-gray-500 {
            color: #a1a1aa;
        }

        .service-card.active .bg-gray-100 {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }
    

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }