/* ── MOBILE BOTTOM NAV (ΕΜΦΑΣΗ) ────────────────── */
@media (max-width: 768px) {
    body { 
        padding-bottom: 75px; /* Χώρος για να μη κρύβεται το περιεχόμενο πίσω από τη nav */
    }

    .mobile-bottom-nav {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--header-bg);
        border-top: 1px solid var(--tab-border);
        /* Υποστήριξη για safe areas σε iPhone (Home Indicator) */
        padding-bottom: clamp(10px, env(safe-area-inset-bottom), 20px);
        padding-top: 8px;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .mobile-bottom-nav .nav-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 500px;
        margin: 0 auto;
        gap: 5px;
    }

    .mobile-bottom-nav .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
        transition: all 0.3s ease;
        border: none;
        background: none;
        position: relative;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 22px;
        transition: transform 0.2s ease;
    }

    .mobile-bottom-nav .nav-item span {
        font-size: 10px;
        font-weight: 600;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--gold);
    }

    .mobile-bottom-nav .nav-item.active i {
        transform: translateY(-2px);
    }

    /* Indicator dot για το ενεργό item */
    .mobile-bottom-nav .nav-item.active::after {
        content: '';
        position: absolute;
        top: -8px;
        width: 4px;
        height: 4px;
        background: var(--gold);
        border-radius: 50%;
    }
    .pro-form-section { padding: 32px 20px 36px; border-radius: 16px; margin-top: 36px; }
    .pro-form-title{ font-size: clamp(20px,5vw,28px); }
    .pf-plan-cards{ grid-template-columns: 1fr; gap: 10px; }
    .pf-plan-card{ padding: 14px; text-align: left; }
    .pf-plan-badge-sm { left: auto; right: 12px; top: -10px; transform: none; }
    .pf-plan-price{ font-size: 18px; }
    .pf-question{ font-size: clamp(16px,4vw,20px); }
    .pf-options-grid  { gap: 8px; }
    .pf-option-pill{ font-size: 13px; padding: 9px 14px; }
    .pf-nav{ gap: 12px; }
    .pf-btn-next, .pf-btn-submit { padding: 12px 22px; font-size: 14px; }
    .header-inner{height:56px;padding:0 10px;gap:6px;}
    #logo-text img{width:80px;}
    .search-wrap{display:none;}
    .mobile-search-btn{display:none;}
    .mobile-search-wrap{top:56px;}
    .action-pill .loc-btn{display:none;}
    .action-pill .pill-divider{display:none;}
    .action-pill{border-radius:20px;background:transparent;padding:0;}
    .lang-toggle{margin:0;width:52px;}
    .header-icons{display:none;}
    .theme-toggle-btn{display:none;}
    #hdr-join{padding:7px 10px;font-size:10px;letter-spacing:0;}
    #hdr-login{padding:7px 10px;font-size:10px;}
    #hero{padding:32px 16px 30px;}
    #hero p{font-size:14px;}
    .cat-card{padding:18px 12px;}
    .icon-square{width:46px;height:46px;margin-bottom:12px;}
    .icon-square i{font-size:18px;}
    .cat-name{font-size:13px;}
    #categories-section{padding:24px 12px 36px;}
    .stories-inner{padding:0 12px 24px;}
    .stories-label{font-size:18px;margin-bottom:18px;}
    .story-ring{width:64px;height:64px;}
    .story-name{font-size:11px;max-width:60px;}
    #proposals-section{padding:24px 12px;}
    .prof-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .prof-img-wrap{height:130px;}
    .prof-body{padding:10px 12px 14px;}
    .prof-name{font-size:13px;}
    .prof-title{font-size:11px;margin-bottom:6px;}
    .prof-meta{gap:4px;margin-bottom:6px;}
    .rating-num{font-size:11px;}
    .reviews-cnt{font-size:10px;}
    .distance{font-size:10px;}
    .price-from{font-size:12px;}
    .price-from strong{font-size:14px;}
    .book-btn{padding:6px 10px;font-size:11px;}
    .section-head{margin-bottom:16px;}
    #pro-banner{padding:36px 16px;}
    #pro-banner .btn-gold{padding:11px 28px;font-size:14px;}
    #search-page{padding:16px 12px;}
    .search-layout{flex-direction:column;}
    #sidebar{display:none !important;}
    .open-filters-btn{display:inline-block !important;}
    .breadcrumb{font-size:13px;gap:6px;margin-bottom:14px;}
    .subcat-hero{padding:28px 14px 26px;}
    .subcat-hero-icon{width:50px;height:50px;border-radius:13px;}
    .subcat-hero-icon i{font-size:22px;}
    .subcat-hero-title{font-size:clamp(20px,5vw,32px);}
    .subcat-hero-subtitle{font-size:13px;}
    .subcat-grid-section{padding:24px 14px 50px;}
    .subcat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .subcat-card{padding:16px 12px;}
    .subcat-card-icon{width:42px;height:42px;border-radius:11px;margin-bottom:10px;}
    .subcat-card-icon i{font-size:18px;}
    .subcat-card-name{font-size:13px;}
    .subcat-cta{flex-direction:column;text-align:center;}
    .subcat-cta .btn-gold{width:100%;}
    #profile-page{padding:14px 10px 80px;}
    .profile-hero{border-radius:14px;margin-bottom:16px;}
    .profile-cover{height:130px;margin-bottom:40px;}
    .profile-info{padding:0 14px 18px;}
    .avatar-row{gap:10px;margin-top:-30px;}
    .avatar-row img{width:60px;height:60px;border-width:3px;}
    .profile-name-block h2{font-size:17px;}
    .profile-name-block .subtitle{font-size:12px;}
    .profile-stats{gap:10px;}
    .stat-item .stat-label{font-size:9px;letter-spacing:.6px;}
    .stat-item .stat-val{font-size:13px;}
    .tabs-wrap{border-radius:14px;}
    .tabs-nav{gap:0;}
    .tab-btn{padding:11px 12px;font-size:12px;}
    .tab-content{padding:14px 12px;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .gallery-grid img{border-radius:8px;}
    .price-table{font-size:12px;}
    .price-table th,.price-table td{padding:10px 8px;}
    .booking-summary{max-width:100%;}
    .service-opt-btn{font-size:12px;padding:8px 12px;}
    .booking-label{font-size:15px;margin-bottom:10px;}
    .dates-scroll{gap:6px;}
    .date-btn{padding:8px 10px;font-size:12px;min-width:44px;border-radius:8px;}
    .time-btn{padding:9px 14px;font-size:13px;border-radius:8px;}
    .footer-page{padding:40px 16px 80px;padding-bottom: 120px;}
    .footer-page-inner{padding:0;}
    .footer-page h1{font-size:clamp(22px,5vw,36px);margin-bottom:6px;}
    .footer-page-content{font-size:14px;line-height:1.7;}
    .footer-page-content h2{font-size:17px;margin:20px 0 8px;}
    #page-pros{padding-top:36px;padding-bottom:80px;}
    .pros-page-inner{padding:0 12px;}
    .pros-hero-text{margin-bottom:32px;}
    .pros-hero-text h1{font-size:clamp(22px,5vw,36px);}
    .pros-hero-text p{font-size:14px;line-height:1.6;}
    .pricing-grid{gap:16px;margin-bottom:36px;}
    .plan-card{padding:22px 18px 26px;border-radius:16px;}
    .plan-price .amount{font-size:32px;}
    .plan-price .currency{font-size:16px;}
    .plan-price .period{font-size:12px;}
    .plan-desc{font-size:12px;min-height:auto;margin-bottom:16px;}
    .plan-features li{font-size:12px;padding:6px 0;gap:8px;}
    .feat-icon{width:16px;height:16px;}
    .plan-cta{padding:12px;font-size:13px;border-radius:10px;}
    .plan-badge{font-size:10px;padding:3px 12px;top:-11px;}
    .plan-name{font-size:13px;margin-bottom:8px;}
    .plan-divider{margin-bottom:14px;}
    .comp-table-wrap{margin-bottom:32px;}
    .comp-table{font-size:11px;min-width:480px;}
    .comp-table thead th{padding:10px 8px;font-size:11px;}
    .comp-table td{padding:9px 8px;}
    .pros-faq{margin-top:4px;}
    .pros-faq h2{font-size:18px;margin-bottom:18px;}
    .faq-q{font-size:13px;gap:12px;}
    .faq-q .faq-icon{font-size:16px;}
    .faq-a{font-size:12px;line-height:1.6;}
    .faq-item{padding:14px 0;}
    .pros-ready-banner{flex-direction:column;text-align:center;padding:20px 16px;margin-top:28px;gap:12px;}
    .pros-ready-title{font-size:15px;}
    .pros-ready-sub{font-size:12px;}
    .pros-ready-btn{width:100%;padding:12px 20px;font-size:13px;}
    #footer{padding:28px 14px 16px;}
    .footer-top{flex-direction:column;gap:16px;align-items:flex-start;}
    .footer-links{gap:12px;}
    .footer-links a{font-size:12px;}
    .footer-bottom{font-size:11px;flex-direction:column;gap:4px;align-items:center;text-align:center;}
    .modal{padding:24px 18px;border-radius:16px;max-width:calc(100vw - 32px);}
    #booking-modal .modal,#booking-modal2 .modal{border-radius:16px;max-width:calc(100vw - 32px);}
    .booking-modal-body iframe,
    .booking-modal2-body iframe{width:100% !important;height:440px;}
    .modal-title{font-size:18px;}
    .modal-sub{font-size:13px;margin-bottom:18px;}
    .city-suggestions{gap:6px;}
    .city-pill{font-size:11px;padding:5px 11px;}
    #story-prev{left:2%;}
    #story-next{right:2%;}
    .story-nav{width:36px;height:36px;font-size:20px;}
    .story-cap-text{font-size:13px;}
    .story-cap-prof strong{font-size:13px;}
    
    #hero h1 {
        font-size: 28px;
        padding: 0 10px;
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 στήλες στα κινητά */
        gap: 12px;
    }

    .prof-grid {
        grid-template-columns: 1fr; /* 1 στήλη για να φαίνονται μεγάλες οι κάρτες επαγγελματιών */
        gap: 16px;
    }

    /* Βελτίωση Sidebar στα Φίλτρα (Drawer mode) */
    #sidebar {
        display: none; /* Κρύβεται το κανονικό sidebar */
    }
    
    .search-layout {
        flex-direction: column;
    }

    .search-wrap {
        display: none; /* Κρύβουμε το μεγάλο search bar */
    }

    .mobile-search-btn {
        display: flex; /* Εμφανίζουμε το εικονίδιο αναζήτησης */
    }

    .action-pill {
        width: auto;
        background: transparent;
    }

    .header-actions {
        gap: 4px;
    }

    #hdr-join, #hdr-login, .header-actions {
        display: none !important;
    }

    /* 2. Κεντράρουμε το λογότυπο */
    .header-inner {
        justify-content: center; /* Σπρώχνει το περιεχόμενο στο κέντρο */
        position: relative;
    }

    #logo-text {
        margin: 0 auto;
        display: block;
    }

    /* 3. Κρύβουμε το παλιό pill προφίλ από το header */
    .user-profile-pill {
        display: none !important;
    }

    /* Στυλ για το avatar στην κάτω μπάρα */
    .mobile-avatar-wrapper {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid var(--gold);
    }
    .btn-gold.hero {
        width: 100%; /* Τα κουμπιά στο hero γίνονται full width */
    }
    /* Κρύβουμε το lang-toggle από το header στα κινητά */
    #header .lang-toggle {
        display: none !important;
    }


    #hdr-join {
        padding: 7px 12px; /* Πιο μαζεμένο padding[cite: 4] */
        font-size: 11px;    /* Ελαφρώς μικρότερο font για να χωράει[cite: 4] */
    }

    #hdr-login {
        padding: 7px 12px;
        font-size: 11px;
    }

    /* ── Mobile profile icon (same size as other nav icons) ── */
    .mobile-bottom-nav #mobile-profile-icon {
        font-size: 22px;
        transition: transform 0.2s ease;
    }
    .mobile-profile-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--gold);
    }

    /* ── Mobile dropdown overlay (dark background) ── */
    .mobile-dropdown-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    .mobile-dropdown-overlay.show {
        display: block;
    }

    /* ── Mobile user dropdown menu ── */
    .mobile-user-dropdown {
        display: none;
        position: fixed;
        bottom: 75px;
        right: 10px;
        background: var(--card-bg);
        border: 1px solid var(--tab-border);
        border-radius: 12px;
        padding: 8px 0;
        min-width: 200px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 1001;
    }
    .mobile-user-dropdown.show {
        display: block;
    }
    .mobile-user-dropdown a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        color: var(--text-primary);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .mobile-user-dropdown a:active {
        background: var(--pill-bg);
    }
    .mobile-user-dropdown a i {
        width: 18px;
        text-align: center;
        color: var(--gold);
    }

}