/* ============================================================ */
/* AGENDAR.HTML — MOBILE VANTABLACK & GOLD (max-width: 768px)   */
/* Ajuste preciso da estética original para Mobile              */
/* ============================================================ */
@media (max-width: 768px) {

    /* --- RESET & FIXES --- */
    * {
        -webkit-tap-highlight-color: transparent !important; /* Remove o glow neon azul nativo do celular ao tocar */
    }
    
    .screen {
        background: #070505 !important;
        opacity: 0 !important;
        display: none !important;
        transition: opacity 0.3s ease !important;
    }
    .screen.active {
        display: block !important;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    /* --- NAV BAR --- */
    .booking-nav {
        padding: 15px 15px !important;
        background: rgba(7, 5, 5, 0.95) !important;
    }
    .back-btn {
        text-align: left !important;
        font-size: 1.1rem !important;
        padding: 0 !important;
    }
    .classic-stepper {
        font-size: 0.85rem !important;
        flex: 1 !important;
        justify-content: flex-end !important;
    }

    /* --- LAYOUT GLOBAL --- */
    .shop-profile-container, .booking-content-wrapper {
        padding: 20px 15px !important;
    }
    .shop-profile-layout {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .shop-main, .shop-sidebar {
        width: 100% !important;
    }

    /* --- HERO --- */
    .shop-hero {
        margin: -10px -15px 20px -15px !important; /* Edge-to-edge com menos margem extra */
        position: relative !important;
    }
    .shop-hero-img {
        height: 160px !important; /* Reduzido de 220px para não dominar a tela */
        background-position: top center !important; /* Ancora a imagem no topo, cortando apenas a parte de baixo */
        border-radius: 0 0 24px 24px !important;
        box-shadow: inset 0 -40px 60px rgba(7,5,5, 0.9) !important; /* Gradiente ajustado */
    }
    .shop-hero-content {
        margin-top: -70px !important; /* Puxa o avatar e textos mais para cima sobre a foto */
        padding: 0 15px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .shop-avatar {
        width: 110px !important;
        height: 110px !important;
        margin-bottom: 15px !important;
        border: 4px solid #070505 !important; /* Corta a imagem com o fundo preto */
        box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; /* Sombra elegante sem neon */
    }
    .shop-hero-text .shop-name {
        font-size: 2.3rem !important;
        color: #fff !important;
        line-height: 1 !important;
        margin-bottom: 8px !important;
    }
    .shop-hero-text p {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
    }
    .absolute-right {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        margin: 0 !important;
        background: rgba(14, 12, 10, 0.8) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        color: #fff !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- TABS --- */
    .shop-tabs {
        position: relative !important;
        z-index: 20 !important; /* Força as abas ficarem acima da imagem para não perder o clique */
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 0 15px 15px 15px !important;
        margin: 0 -15px 20px -15px !important; /* Sangria para scroll horizontal */
        gap: 6px !important; /* Diminuído para caber na tela */
        justify-content: flex-start !important;
        border-bottom: none !important; /* Remove a linha rígida do desktop */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .shop-tabs::-webkit-scrollbar { display: none !important; }
    .tab-btn {
        font-family: var(--font-body) !important; /* Muda de Bebas para Sans-serif mais limpo */
        font-size: 0.8rem !important; /* Menor para caber tudo */
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        padding: 8px 16px !important; /* Padding reduzido */
        border-radius: 50px !important; /* Formato de pílula moderno */
        background: rgba(255, 255, 255, 0.05) !important;
        color: #999 !important;
        border: 1px solid transparent !important;
        transition: all 0.3s ease !important;
    }
    .tab-btn.active {
        background: var(--primary) !important;
        color: #000 !important;
        border-color: var(--primary) !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    }

    /* --- AMENITIES --- */
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .amenity-card {
        padding: 15px 10px !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
    }
    .amenity-card i { font-size: 2rem !important; color: var(--primary) !important; }
    .amenity-card span { font-size: 0.9rem !important; color: #ccc !important; }

    /* --- PRICE BOARD (SERVIÇOS) --- */
    .price-board-container {
        padding: 15px 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .price-board-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 15px !important;
        gap: 15px !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
    }
    .price-board-img {
        margin-right: 0 !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px !important;
    }
    .price-board-info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
    }
    .price-board-dots { display: none !important; }
    .service-row-title {
        font-size: 1.6rem !important;
        color: #fff !important;
        background: transparent !important;
        padding: 0 !important;
        white-space: normal !important;
    }
    .service-row-price {
        font-size: 1.6rem !important;
        color: var(--primary) !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .service-row-meta {
        text-align: center !important;
        font-size: 0.95rem !important;
        color: #888 !important;
    }
    .price-board-row .gold-btn {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* --- FOOTER AVANÇAR (QUICK BUTTON) --- */
    .screen, .shop-tab-content { 
        animation: none !important; 
        transform: none !important; 
        transition: none !important;
    } /* Fix crucial para position: fixed funcionar ignorando transform contexts */
    
    .shop-main {
        padding-bottom: 20px !important;
    }
    .shop-sidebar, .booking-content-wrapper {
        padding-bottom: 120px !important; /* Previne que o botão cubra o último item absoluto da página */
    }

    .action-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(to top, rgba(7,5,5,1) 40%, rgba(7,5,5,0.8) 80%, transparent) !important;
        padding: 40px 20px 20px !important;
        margin: 0 !important;
        z-index: 99999 !important;
        pointer-events: none !important;
        transform: none !important;
    }
    .action-footer p { display: none !important; }
    .action-footer .gold-btn {
        pointer-events: auto !important;
        width: 100% !important;
        padding: 16px !important;
        font-size: 1.2rem !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4) !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        opacity: 1 !important;
    }
    .action-footer .gold-btn.disabled {
        opacity: 0 !important;
        transform: translateY(50px) !important;
        pointer-events: none !important;
    }
    .action-footer .gold-btn:not(.disabled) {
        transform: translateY(0) !important;
    }

    /* --- SIDEBAR --- */
    .shop-sidebar {
        padding: 20px 15px !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
    }
    .vintage-hours-list li {
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        text-align: center !important;
        border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
    }

    /* --- PROFISSIONAIS --- */
    .premium-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .pro-card {
        padding: 15px !important;
        flex-direction: row !important;
        align-items: center !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 12px !important;
    }
    .pro-avatar {
        width: 70px !important;
        height: 70px !important;
        margin-right: 15px !important;
    }
    .pro-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Alinha o texto à esquerda */
        text-align: left !important;
        gap: 3px !important;
        padding-right: 25px !important; /* Espaço para não encostar na seta dourada */
    }
    .pro-info h4 { 
        font-family: var(--font-body) !important; /* Fonte moderna para não quebrar linha */
        font-size: 1.15rem !important; 
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin: 0 !important; 
        color: #fff !important; 
        line-height: 1.2 !important;
    }
    .pro-info p { 
        font-family: var(--font-body) !important;
        font-size: 0.85rem !important; 
        margin: 0 !important; 
        color: #999 !important; 
        font-style: normal !important; /* Tira o itálico confuso */
    }
    .pro-arrow,
    .pro-card > div:last-child.pro-arrow {
        display: none !important; /* Remove estritamente a seta original do JS e evita conflitos de borda tracejada */
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .vintage-page-title {
        font-size: 2.6rem !important; /* Aumentado para um meio-termo ideal (estava 2.2rem) */
        line-height: 1 !important;
        margin-bottom: 10px !important;
    }
    .pro-card {
        position: relative !important; /* Para a seta absoluta funcionar */
    }
    .pro-card::after {
        content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
        position: absolute !important; 
        right: 20px !important; 
        font-size: 16px !important; 
        color: var(--primary) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* --- DATE & TIME --- */
    .date-time-container {
        padding: 15px 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .month-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 5px !important;
    }
    .month-header::after {
        content: 'Deslize ⟶';
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 0.9rem;
        color: #888;
    }
    .date-slider-premium {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding-bottom: 15px !important;
        padding-right: 20px !important; /* Espaço pro hint visual */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .date-slider-premium::-webkit-scrollbar { display: none !important; }
    .date-box {
        min-width: 80px !important;
        flex-shrink: 0 !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
    }
    .date-box.selected {
        background: var(--primary) !important;
        color: #000 !important;
    }
    .date-box.selected span, .date-box.selected small {
        color: #000 !important;
    }
    .time-slots-premium {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .time-btn {
        font-size: 1.1rem !important;
        padding: 12px 0 !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        color: #fff !important;
    }
    .time-btn.selected {
        background: var(--primary) !important;
        color: #000 !important;
        border-color: var(--primary) !important;
    }

    /* --- CONFIRMATION --- */
    .split-confirm {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .vintage-receipt-card {
        padding: 20px 15px !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.5) !important;
        border-top: 5px solid var(--primary) !important;
        color: #fff !important;
        background-image: none !important;
    }
    .receipt-title { font-size: 2rem !important; color: #fff !important; }
    .receipt-item span { color: #ccc !important; }
    .receipt-item strong { font-size: 1.1rem !important; color: #fff !important; }
    .receipt-total span { color: #fff !important; }
    .receipt-total strong { font-size: 1.8rem !important; color: var(--primary) !important; }
    .receipt-divider { border-bottom: 1px dashed rgba(212, 175, 55, 0.3) !important; }

    /* --- REGISTRO & LOGIN --- */
    .success-card, .form-card {
        padding: 25px 20px !important;
        background: rgba(14, 12, 10, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        border-top: 5px solid var(--primary) !important;
    }
    #login-screen .success-card {
        max-width: 100% !important;
    }
    #login-screen .vintage-page-title {
        color: #fff !important;
        font-size: 2.5rem !important;
    }
    #login-screen .vintage-body-text, 
    #login-screen .vintage-italic {
        color: #ccc !important;
    }
    
    .premium-input-group label {
        font-size: 1rem !important;
        color: #ccc !important;
    }
    .premium-input-group input {
        font-size: 1rem !important;
        padding: 12px !important;
        background: transparent !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
    }

    /* GREETING E NAVBAR DA TELA 1 */
    #client-flow-1 .booking-nav {
        padding: 20px 20px 15px 20px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: transparent !important;
        border-bottom: none !important;
        position: relative !important;
        z-index: 200 !important; /* Garante que o botão Sair receba os cliques e não seja bloqueado pelo hero */
    }
    #client-flow-1 .booking-nav .user-profile-mini {
        width: auto !important;
        margin-top: 0 !important;
        flex: 1 !important;
        justify-content: flex-start !important;
    }
    #client-flow-1 .booking-nav .classic-stepper {
        display: none !important; /* Esconde "Menu de Serviços" repetitivo */
    }
    #client-flow-1 #btn-logout {
        margin-left: auto !important;
        font-size: 1rem !important;
        color: #999 !important;
        padding: 5px 15px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 20px !important;
    }
}