/* ========= Phone Directory 3D Styles ========= */
            .phone-directory-section {
                position: relative;
                padding: 3rem 1rem 4rem;
                overflow: hidden;
                background: linear-gradient(135deg, rgba(10,10,30,0.95), rgba(5,15,40,0.98));
                border-top: 2px solid rgba(0,200,255,0.15);
                border-bottom: 2px solid rgba(0,200,255,0.15);
            }
            .phone-directory-section::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background:
                    radial-gradient(ellipse at 20% 50%, rgba(0,150,255,0.08) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 50%, rgba(0,255,200,0.06) 0%, transparent 60%);
                pointer-events: none;
            }
            /* Animated wire grid background */
            .phone-directory-section::after {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background-image:
                    linear-gradient(rgba(0,200,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,200,255,0.03) 1px, transparent 1px);
                background-size: 40px 40px;
                animation: gridPulse 8s ease-in-out infinite;
                pointer-events: none;
            }
            @keyframes gridPulse {
                0%, 100% { opacity: 0.3; }
                50% { opacity: 0.7; }
            }

            /* Title */
            .phone-dir-title {
                text-align: center;
                margin-bottom: 2rem;
                position: relative;
                z-index: 2;
            }
            .phone-dir-title h3 {
                font-family: 'Aref Ruqaa', serif;
                font-size: 2.2rem;
                color: #fff;
                text-shadow: 0 0 20px rgba(0,200,255,0.5), 0 0 40px rgba(0,200,255,0.2);
                margin-bottom: 0.5rem;
                display: inline-flex;
                align-items: center;
                gap: 0.8rem;
            }
            .phone-dir-title h3 i {
                font-size: 2.5rem;
                color: #00c8ff;
                animation: phoneRing 2s ease-in-out infinite;
                filter: drop-shadow(0 0 10px rgba(0,200,255,0.6));
            }
            @keyframes phoneRing {
                0%, 100% { transform: rotate(0deg); }
                10% { transform: rotate(15deg); }
                20% { transform: rotate(-15deg); }
                30% { transform: rotate(10deg); }
                40% { transform: rotate(-10deg); }
                50% { transform: rotate(0deg); }
            }
            .phone-dir-title .source-links {
                display: flex;
                justify-content: center;
                gap: 1rem;
                flex-wrap: wrap;
                margin-top: 0.8rem;
            }
            .phone-dir-title .source-links a {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.4rem 1rem;
                background: linear-gradient(135deg, rgba(0,200,255,0.15), rgba(0,150,255,0.1));
                border: 1px solid rgba(0,200,255,0.3);
                border-radius: 25px;
                color: #7dd3fc;
                font-size: 0.85rem;
                text-decoration: none;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                perspective: 800px;
            }
            .phone-dir-title .source-links a:hover {
                background: linear-gradient(135deg, rgba(0,200,255,0.3), rgba(0,150,255,0.25));
                transform: translateY(-3px) rotateX(5deg);
                box-shadow: 0 8px 25px rgba(0,200,255,0.3);
                color: #fff;
            }

            /* Alphabet Filter Bar */
            .alphabet-filter-bar {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 6px;
                margin-bottom: 2rem;
                position: relative;
                z-index: 2;
                perspective: 1000px;
            }
            .alpha-btn {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                border: 1px solid rgba(0,200,255,0.25);
                background: linear-gradient(145deg, rgba(15,25,50,0.9), rgba(10,15,35,0.95));
                color: #7dd3fc;
                font-family: 'Cairo', sans-serif;
                font-size: 0.9rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
                position: relative;
                transform-style: preserve-3d;
            }
            .alpha-btn::before {
                content: '';
                position: absolute;
                inset: -1px;
                border-radius: 11px;
                background: linear-gradient(135deg, rgba(0,200,255,0.4), transparent, rgba(0,200,255,0.2));
                opacity: 0;
                transition: opacity 0.3s;
                z-index: -1;
            }
            .alpha-btn:hover, .alpha-btn.active {
                transform: translateY(-4px) rotateX(10deg) scale(1.1);
                background: linear-gradient(145deg, rgba(0,200,255,0.3), rgba(0,100,200,0.3));
                color: #fff;
                box-shadow: 0 8px 25px rgba(0,200,255,0.35), 0 0 15px rgba(0,200,255,0.2);
                border-color: rgba(0,200,255,0.6);
            }
            .alpha-btn:hover::before, .alpha-btn.active::before {
                opacity: 1;
            }
            .alpha-btn.show-all {
                width: auto;
                padding: 0 14px;
                font-size: 0.8rem;
                background: linear-gradient(145deg, rgba(0,200,100,0.2), rgba(0,150,80,0.15));
                border-color: rgba(0,200,100,0.3);
                color: #6ee7b7;
            }
            .alpha-btn.show-all:hover, .alpha-btn.show-all.active {
                background: linear-gradient(145deg, rgba(0,200,100,0.4), rgba(0,150,80,0.3));
                color: #fff;
                box-shadow: 0 8px 25px rgba(0,200,100,0.35);
            }

            /* 3D Phone Carousel */
            .phone-carousel-stage {
                perspective: 1200px;
                width: 100%;
                max-width: 900px;
                margin: 0 auto 2rem;
                position: relative;
                z-index: 2;
                min-height: 420px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .phone-carousel-track {
                display: flex;
                gap: 1.5rem;
                overflow-x: auto;
                scroll-behavior: smooth;
                padding: 2rem 1rem;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .phone-carousel-track::-webkit-scrollbar {
                display: none;
            }

            /* Phone Card (3D Booth Style) */
            .phone-card-3d {
                flex: 0 0 260px;
                height: 340px;
                perspective: 900px;
                scroll-snap-align: center;
                cursor: pointer;
            }
            .phone-card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                background: linear-gradient(160deg, rgba(10,20,45,0.95), rgba(5,10,30,0.98));
                border: 1px solid rgba(0,200,255,0.2);
                padding: 1.5rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transform-style: preserve-3d;
                overflow: hidden;
                box-shadow:
                    0 10px 40px rgba(0,0,0,0.4),
                    0 0 20px rgba(0,200,255,0.05),
                    inset 0 1px 0 rgba(255,255,255,0.05);
            }
            .phone-card-inner::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: conic-gradient(from 0deg, transparent 0%, rgba(0,200,255,0.05) 25%, transparent 50%, rgba(0,200,255,0.03) 75%, transparent 100%);
                animation: cardGlow 6s linear infinite;
                pointer-events: none;
            }
            @keyframes cardGlow {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .phone-card-3d:hover .phone-card-inner {
                transform: translateY(-10px) rotateY(5deg) rotateX(-3deg);
                box-shadow:
                    0 20px 60px rgba(0,200,255,0.2),
                    0 0 40px rgba(0,200,255,0.1),
                    inset 0 1px 0 rgba(255,255,255,0.1);
                border-color: rgba(0,200,255,0.5);
            }

            /* Phone booth top decoration */
            .booth-top {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 4px;
                background: linear-gradient(90deg, transparent, #00c8ff, transparent);
                border-radius: 0 0 10px 10px;
            }

            /* Avatar circle */
            .phone-avatar {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                background: linear-gradient(135deg, #0ea5e9, #06b6d4, #22d3ee);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
                color: #fff;
                margin-bottom: 1rem;
                box-shadow: 0 4px 20px rgba(0,200,255,0.3);
                position: relative;
                z-index: 1;
                animation: avatarFloat 4s ease-in-out infinite;
            }
            @keyframes avatarFloat {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-5px); }
            }

            .phone-name {
                font-family: 'Cairo', sans-serif;
                font-size: 1rem;
                font-weight: 700;
                color: #e0f2fe;
                text-align: center;
                margin-bottom: 0.8rem;
                line-height: 1.4;
                position: relative;
                z-index: 1;
            }
            .phone-number {
                font-family: 'Tajawal', sans-serif;
                font-size: 1.2rem;
                font-weight: 600;
                color: #00c8ff;
                direction: ltr;
                letter-spacing: 1.5px;
                background: rgba(0,200,255,0.08);
                padding: 0.5rem 1.2rem;
                border-radius: 12px;
                border: 1px solid rgba(0,200,255,0.15);
                position: relative;
                z-index: 1;
                text-shadow: 0 0 10px rgba(0,200,255,0.3);
            }

            /* Call button on card */
            .phone-call-btn {
                margin-top: 1rem;
                padding: 0.4rem 1.2rem;
                border-radius: 20px;
                border: 1px solid rgba(0,200,100,0.4);
                background: linear-gradient(135deg, rgba(0,200,100,0.15), rgba(0,150,80,0.1));
                color: #6ee7b7;
                font-size: 0.85rem;
                cursor: pointer;
                transition: all 0.3s;
                display: flex;
                align-items: center;
                gap: 0.4rem;
                position: relative;
                z-index: 1;
                text-decoration: none;
            }
            .phone-call-btn:hover {
                background: linear-gradient(135deg, rgba(0,200,100,0.3), rgba(0,150,80,0.25));
                color: #fff;
                transform: scale(1.05);
                box-shadow: 0 4px 15px rgba(0,200,100,0.3);
            }

            /* Carousel Navigation */
            .phone-carousel-nav {
                display: flex;
                justify-content: center;
                gap: 1rem;
                margin-bottom: 2rem;
                position: relative;
                z-index: 2;
            }
            .phone-nav-btn {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 2px solid rgba(0,200,255,0.3);
                background: linear-gradient(145deg, rgba(10,20,45,0.9), rgba(5,10,30,0.95));
                color: #00c8ff;
                font-size: 1.3rem;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            }
            .phone-nav-btn:hover {
                transform: scale(1.15) rotateZ(5deg);
                background: linear-gradient(145deg, rgba(0,200,255,0.2), rgba(0,100,200,0.2));
                box-shadow: 0 8px 25px rgba(0,200,255,0.3);
                color: #fff;
            }

            /* Counter display */
            .phone-counter {
                text-align: center;
                color: rgba(255,255,255,0.4);
                font-size: 0.85rem;
                margin-bottom: 1.5rem;
                position: relative;
                z-index: 2;
            }
            .phone-counter span {
                color: #00c8ff;
                font-weight: 700;
            }

            /* Add your number CTA */
            .add-number-cta {
                display: flex;
                justify-content: center;
                margin: 2rem 0;
                position: relative;
                z-index: 2;
            }
            .add-number-cta a {
                display: inline-flex;
                align-items: center;
                gap: 0.8rem;
                padding: 0.8rem 2rem;
                background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(139,92,246,0.15));
                border: 1px solid rgba(168,85,247,0.4);
                border-radius: 30px;
                color: #c4b5fd;
                font-size: 1rem;
                font-weight: 600;
                text-decoration: none;
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                perspective: 800px;
                animation: ctaPulse 3s ease-in-out infinite;
            }
            @keyframes ctaPulse {
                0%, 100% { box-shadow: 0 0 20px rgba(168,85,247,0.1); }
                50% { box-shadow: 0 0 40px rgba(168,85,247,0.3), 0 0 60px rgba(168,85,247,0.1); }
            }
            .add-number-cta a:hover {
                transform: translateY(-5px) rotateX(5deg) scale(1.05);
                background: linear-gradient(135deg, rgba(168,85,247,0.35), rgba(139,92,246,0.3));
                color: #fff;
                box-shadow: 0 15px 40px rgba(168,85,247,0.35);
            }
            .add-number-cta a i {
                font-size: 1.4rem;
                animation: iconBounce 2s ease-in-out infinite;
            }
            @keyframes iconBounce {
                0%, 100% { transform: translateY(0) scale(1); }
                50% { transform: translateY(-3px) scale(1.1); }
            }

            /* Personal Directory Mini Section */
            .personal-dir-section {
                max-width: 600px;
                margin: 2rem auto 0;
                padding: 2rem;
                background: linear-gradient(160deg, rgba(15,25,50,0.9), rgba(10,15,35,0.95));
                border: 1px solid rgba(0,200,255,0.15);
                border-radius: 20px;
                position: relative;
                z-index: 2;
                box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            }
            .personal-dir-section h4 {
                text-align: center;
                color: #e0f2fe;
                font-family: 'Cairo', sans-serif;
                font-size: 1.2rem;
                margin-bottom: 1.2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
            }
            .personal-dir-section h4 i {
                color: #fbbf24;
                font-size: 1.4rem;
            }
            .personal-dir-form {
                display: flex;
                gap: 0.8rem;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 1.2rem;
            }
            .personal-dir-form input {
                flex: 1;
                min-width: 150px;
                padding: 0.7rem 1rem;
                border-radius: 12px;
                border: 1px solid rgba(0,200,255,0.2);
                background: rgba(0,0,0,0.3);
                color: #e0f2fe;
                font-family: 'Cairo', sans-serif;
                font-size: 0.9rem;
                outline: none;
                transition: all 0.3s;
            }
            .personal-dir-form input:focus {
                border-color: rgba(0,200,255,0.5);
                box-shadow: 0 0 15px rgba(0,200,255,0.15);
            }
            .personal-dir-form input::placeholder {
                color: rgba(255,255,255,0.3);
            }
            .personal-dir-form button {
                padding: 0.7rem 1.5rem;
                border-radius: 12px;
                border: 1px solid rgba(0,200,100,0.4);
                background: linear-gradient(135deg, rgba(0,200,100,0.2), rgba(0,150,80,0.15));
                color: #6ee7b7;
                font-family: 'Cairo', sans-serif;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s;
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }
            .personal-dir-form button:hover {
                background: linear-gradient(135deg, rgba(0,200,100,0.35), rgba(0,150,80,0.3));
                color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(0,200,100,0.25);
            }

            /* Personal entries list */
            .personal-entries {
                display: flex;
                flex-direction: column;
                gap: 0.6rem;
                max-height: 250px;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: rgba(0,200,255,0.3) transparent;
            }
            .personal-entry {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.6rem 1rem;
                background: rgba(0,0,0,0.2);
                border-radius: 10px;
                border: 1px solid rgba(0,200,255,0.08);
                transition: all 0.3s;
            }
            .personal-entry:hover {
                background: rgba(0,200,255,0.05);
                border-color: rgba(0,200,255,0.2);
            }
            .personal-entry .pe-info {
                display: flex;
                align-items: center;
                gap: 0.8rem;
            }
            .personal-entry .pe-name {
                color: #e0f2fe;
                font-weight: 600;
                font-size: 0.9rem;
            }
            .personal-entry .pe-phone {
                color: #00c8ff;
                direction: ltr;
                font-size: 0.85rem;
            }
            .personal-entry .pe-delete {
                background: none;
                border: none;
                color: #f87171;
                cursor: pointer;
                font-size: 1.1rem;
                transition: all 0.3s;
                padding: 0.2rem;
            }
            .personal-entry .pe-delete:hover {
                color: #ef4444;
                transform: scale(1.2);
            }
            .no-entries-msg {
                text-align: center;
                color: rgba(255,255,255,0.3);
                font-size: 0.85rem;
                padding: 1rem;
            }

            /* Search box */
            .phone-search-box {
                max-width: 400px;
                margin: 0 auto 1.5rem;
                position: relative;
                z-index: 2;
            }
            .phone-search-box input {
                width: 100%;
                padding: 0.8rem 1.2rem 0.8rem 3rem;
                border-radius: 15px;
                border: 1px solid rgba(0,200,255,0.2);
                background: rgba(5,10,25,0.8);
                color: #e0f2fe;
                font-family: 'Cairo', sans-serif;
                font-size: 0.95rem;
                outline: none;
                transition: all 0.3s;
            }
            .phone-search-box input:focus {
                border-color: rgba(0,200,255,0.5);
                box-shadow: 0 0 20px rgba(0,200,255,0.15);
            }
            .phone-search-box input::placeholder {
                color: rgba(255,255,255,0.3);
            }
            .phone-search-box i {
                position: absolute;
                right: auto;
                left: 1rem;
                top: 50%;
                transform: translateY(-50%);
                color: rgba(0,200,255,0.5);
                font-size: 1.1rem;
            }

            /* Responsive */
            @media (max-width: 768px) {
                .phone-dir-title h3 {
                    font-size: 1.6rem;
                }
                .phone-card-3d {
                    flex: 0 0 220px;
                    height: 300px;
                }
                .alpha-btn {
                    width: 32px;
                    height: 32px;
                    font-size: 0.75rem;
                }
                .personal-dir-section {
                    margin: 2rem 0.5rem 0;
                    padding: 1.5rem 1rem;
                }
            }