/* ============================================
   ClickMalas - Mobile Responsive Stylesheet
   Otimizações para dispositivos móveis (< 480px)
   ============================================ */

/* ============================================
   MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    /* ============================================
       TIPOGRAFIA MOBILE
       ============================================ */

    /* Hero Title: 20px */
    .hero-title {
        font-size: 25px !important;
        line-height: 1.3;
        margin-top: 30px;
        margin-bottom: 25px;
    }

    /* H2: 20px */
    h2,
    .section-title {
        font-size: 20px !important;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    /* H3: 20px */
    h3,
    .card-title,
    .step-title,
    .pricing-card-type,
    .faq-question-text {
        font-size: 20px !important;
        line-height: 1.3;
    }

    /* Parágrafos: 16px */
    p,
    .hero-subtitle,
    .section-subtitle,
    .card-text,
    .step-desc,
    .testimonial-text,
    .faq-answer p,
    .footer-text {
        font-size: 14px !important;
        line-height: 22px;
    }

    /* ============================================
       HERO SECTION
       ============================================ */
    .hero {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 20px;
        min-height: auto;
    }

    .hero-content {
        width: 100%;
        padding: 0 16px;
    }

    .hero-subtitle {
        margin-bottom: 20px;
        max-width: 100%;
    }

    /* Badge de destaque */
    .hero-badge {
        padding: 6px 14px;
        margin-bottom: 16px;
    }

    .badge-text {
        font-size: 12px;
    }

    /* ============================================
       FORMULÁRIO DE BUSCA - ESTILO RENTBERRY
       Clean, pill-shaped, moderno e dinâmico
       ============================================ */
    .search-box {
        max-width: 100%;
        width: 100%;
        margin: 20px auto 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        border-radius: 0;
    }

    .search-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
        padding: 0;
        width: 80%;
        max-width: 320px;
    }

    /* Esconder divisor no mobile */
    .form-divider {
        display: none;
    }

    /* ===== CAMPOS DE DATA - ESTILO RENTBERRY ===== */
    .search-box .mat-form-group {
        width: 100%;
        max-width: 100%;
        min-height: 50px;
        height: 50px;
        position: relative;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.2s ease;
    }

    .search-box .mat-form-group:focus-within {
        box-shadow: 0 2px 12px rgba(139, 92, 246, 0.15);
    }

    /* Input estilo Rentberry */
    .search-box .mat-form-input {
        height: 50px;
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        font-weight: 500;
        color: #1f2937;
        padding: 14px 16px 14px 48px;
        border: none;
        border-radius: 12px;
        background: transparent;
        cursor: pointer;
    }

    .search-box .mat-form-input:focus {
        outline: none;
        border: none;
        padding-left: 48px;
    }

    /* Placeholder transparente (label flutuante faz o trabalho) */
    .search-box .mat-form-input::placeholder {
        color: transparent;
    }

    /* Label flutuante - posição inicial (dentro do input) */
    .search-box .mat-form-label {
        position: absolute;
        left: 48px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        font-weight: 400;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.2s ease;
        background: transparent;
        padding: 0 4px;
        z-index: 2;
    }

    /* Label flutua para o topo quando focado ou preenchido */
    .search-box .mat-form-input:focus + .mat-form-label,
    .search-box .mat-form-input:not(:placeholder-shown) + .mat-form-label {
        top: 4px;
        transform: translateY(0);
        font-size: 9px;
        font-weight: 600;
        color: var(--primary);
        left: 48px;
        background: #ffffff;
        letter-spacing: 0.3px;
    }

    /* Label fica cinza quando preenchido mas não focado */
    .search-box .mat-form-input:not(:placeholder-shown):not(:focus) + .mat-form-label {
        color: #6b7280;
    }

    /* Ajustar padding do input quando label está no topo */
    .search-box .mat-form-input:focus,
    .search-box .mat-form-input:not(:placeholder-shown) {
        padding-top: 18px;
        padding-bottom: 8px;
    }

    /* Ícone do calendário */
    .search-box .mat-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #8b5cf6 !important;
        z-index: 3;
        pointer-events: none;
    }

    .search-box .mat-icon svg {
        width: 18px;
        height: 18px;
        stroke: #8b5cf6 !important;
        display: block !important;
    }

    /* ===== BOTÃO VER DISPONIBILIDADE ===== */
    .btn-search {
        width: 100%;
        max-width: 100%;
        height: 50px;
        min-height: 50px;
        font-size: 16px;
        font-weight: 600;
        padding: 0 24px;
        border-radius: 12px;
        background-color: #8b5cf6 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-search:hover,
    .btn-search:active {
        background-color: #7c3aed !important;
        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45);
        transform: translateY(-2px);
    }

    .btn-search .icon-search {
        width: 20px;
        height: 20px;
        stroke: #ffffff !important;
        color: #ffffff !important;
    }

    /* ===== INFO ITEMS - COMPACTO ===== */
    .search-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
        padding-top: 16px;
        margin-top: 4px;
        width: 80%;
        max-width: 320px;
    }

    .info-item {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .info-item i {
        font-size: 10px;
        color: #22c55e;
    }

    /* Trust badges */
    .trust-badges {
        margin-top: 20px;
    }

    /* ============================================
       MENU HAMBURGUER
       Fonte dos itens: 16px
       ============================================ */
    .nav-menu {
        padding: 16px 20px 24px;
    }

    .nav-menu .nav-link {
        font-size: 16px !important;
        padding: 12px 0;
    }

    .nav-item-cta .btn-reserve-now {
        font-size: 16px !important;
        padding: 14px 20px;
    }

    .nav-item-account .nav-link {
        font-size: 16px !important;
    }

    /* ============================================
       BOTÃO CTA LARANJA
       Tamanho: 315x60
       Fonte: 16px
       ============================================ */
    .btn-cta,
    .section-cta .btn,
    .btn-primary.btn-cta,
    .btn-white.btn-lg {
        width: 315px !important;
        max-width: 100%;
        height: 60px !important;
        min-height: 60px !important;

        padding: 0 24px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .section-cta {
        padding: 40px 16px 0;
    }

    /* ============================================
       BOTÕES DE CATEGORIA (CAT)
       Height: 50px
       Fonte: 14px
       ============================================ */
    .btn-tipo-mala,
    .card-product .btn,
    .product-card .btn {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 14px !important;
        padding: 0 16px;
        border-radius: 8px;
    }

    /* ============================================
       CARDS E GRIDS
       ============================================ */
    .cards-grid,
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px;
        padding: 0 16px;
    }

    .step-card {
        padding: 24px 20px;
    }

    .card,
    .card-benefit {
        padding: 20px;
    }

    .card-icon {
        width: 48px;
        height: 48px;
    }

    .card-icon .icon {
        width: 24px;
        height: 24px;
    }

    /* ============================================
       SEÇÕES
       ============================================ */
    .section {
        padding: 40px 0;
    }

    section .container {
        padding: 0 16px;
    }

    /* Como Funciona */
    .section-como-funciona .header-center {
        margin-bottom: 24px !important;
    }

    .steps-grid {
        gap: 16px;
    }

    .step-badge {
        font-size: 12px;
        height: 28px;
    }

    .step-icon-wrapper {
        width: 56px;
        height: 56px;
    }

    .step-icon {
        width: 28px;
        height: 28px;
    }

    /* ============================================
       CATÁLOGO / TIPOS DE MALAS
       ============================================ */
    #catalogoMalas {
        gap: 20px;
    }

    .product-card,
    .skeleton-product-card {
        border-radius: 12px;
    }

    .product-price-info {
        padding: 16px;
        margin: 16px 0;
    }

    .price-label {
        font-size: 12px;
    }

    .price-value {
        font-size: 20px;
    }

    .tag-type {
        font-size: 20px;
    }

    /* ============================================
       BENEFÍCIOS
       ============================================ */
    .section-beneficios .cards-grid-3 {
        gap: 16px;
    }

    .card-benefit .card-title {
        font-size: 18px !important;
    }

    .card-benefit .card-text {
        font-size: 14px !important;
    }

    /* ============================================
       FAQ
       ============================================ */
    .faq-container {
        margin-top: 24px;
        gap: 12px;
        padding-bottom: 24px;
    }

    .faq-item {
        border-radius: 12px;
    }

    .faq-question {
        padding: 16px;
        gap: 12px;
    }

    .faq-question-text {
        font-size: 16px !important;
    }

    .faq-icon {
        width: 32px;
        height: 32px;
    }

    .faq-answer p {
        padding: 0 16px 16px;
        font-size: 14px !important;
    }

    .faq-cta-text {
        font-size: 16px;
    }

    /* ============================================
       PREÇOS
       ============================================ */
    .pricing-progressive {
        gap: 20px;
        margin-top: 24px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .pricing-card-progressive {
        border-radius: 16px;
        padding: 24px 20px;
    }

    .pricing-card-header {
        padding: 20px 16px;
    }

    .pricing-card-type {
        font-size: 32px !important;
    }

    .pricing-card-subtitle {
        font-size: 14px;
    }

    .pricing-card-period {
        font-size: 12px;
    }

    .pricing-card-price {
        margin: 8px 0;
    }

    .price-currency {
        font-size: 16px;
    }

    .price-amount {
        font-size: 36px !important;
    }

    .price-cents {
        font-size: 16px;
    }

    /* Tabela de preços */
    .pricing-card-table {
        padding: 0 16px 16px;
    }

    .pricing-table-header {
        font-size: 12px;
        padding: 8px 0;
    }

    .pricing-table-body {
        font-size: 14px;
    }

    .pricing-table-row {
        padding: 8px 0;
    }

    /* Info de preços */
    .pricing-info {
        flex-direction: column;
        gap: 12px;
        padding: 20px 16px;
        margin-top: 0;
    }

    .pricing-info-item {
        font-size: 14px;
        gap: 8px;
    }

    .info-icon {
        width: 20px;
        height: 20px;
    }

    /* ============================================
       DEPOIMENTOS
       ============================================ */
    .testimonials-grid {
        gap: 16px;
        margin-top: 24px;
        padding-bottom: 24px;
    }

    .testimonial-card {
        padding: 20px;
        border-radius: 12px;
    }

    .testimonial-rating {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .testimonial-text {
        font-size: 14px !important;
        margin-bottom: 16px;
    }

    .testimonial-author strong {
        font-size: 16px;
    }

    .testimonial-author span {
        font-size: 13px;
    }

    /* ============================================
       CONTATO
       ============================================ */
    .contact-grid {
        gap: 20px;
        margin-top: 24px;
        padding-bottom: 24px;
    }

    .contact-item {
        padding: 16px;
        border-radius: 12px;
    }

    .contact-icon {
        width: 44px;
        height: 44px;
    }

    .contact-item h3 {
        font-size: 16px !important;
    }

    .contact-item p {
        font-size: 14px;
    }

    .contact-form-wrapper {
        padding: 20px;
        border-radius: 12px;
    }

    /* Form inputs de contato */
    .contact-form .mat-form-input,
    .contact-form .mat-form-textarea {
        height: 50px;
        font-size: 16px;
    }

    .contact-form .mat-form-textarea {
        height: auto;
        min-height: 100px;
    }

    .contact-form .mat-form-label {
        font-size: 16px;
    }

    .mat-btn-submit {
        height: 50px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* reCAPTCHA */
    .recaptcha-wrapper {
        transform: scale(0.9);
        transform-origin: center;
        margin: 12px 0;
    }

    /* ============================================
       FINAL CTA SECTION
       ============================================ */
    .section-final-cta {
        padding: 40px 16px;
    }

    .final-cta-content {
        max-width: 100%;
    }

    .final-cta-title {
        font-size: 20px !important;
        margin-bottom: 16px;
    }

    .final-cta-text {
        font-size: 16px !important;
        margin-bottom: 24px;
    }

    /* ============================================
       FOOTER - ESTILO RENTBERRY MOBILE
       Logo centralizado + Grid 2 colunas
       ============================================ */
    .footer {
        padding: 0;
        background-color: #2d2d3a;
    }

    .footer .container {
        padding: 0 20px;
    }

    /* Grid com logo no topo + 2 colunas embaixo */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
        margin-bottom: 24px;
    }

    /* ===== PRIMEIRA COLUNA: Logo, descrição e redes sociais ===== */
    .footer-column:first-child {
        grid-column: 1 / -1; /* Ocupa toda a largura */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }

    /* Logo centralizado */
    .footer-title {
        justify-content: center;
        margin-bottom: 12px;
    }

    /* Descrição centralizada */
    .footer-text {
        font-size: 13px !important;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.6);
        max-width: 280px;
        margin: 0 auto 16px;
    }

    /* Redes sociais centralizadas */
    .social-links {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .social-link {
        height: 36px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-link svg {
        width: 16px;
        height: 16px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* ===== COLUNAS DE LINKS (2, 3, 4) ===== */
    /* Títulos das seções */
    .footer-heading {
        font-size: 14px !important;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 12px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Remover pseudo-elemento de seta */
    .footer-heading::after {
        display: none;
    }

    /* Links visíveis */
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .footer-links li {
        padding: 0;
        line-height: 1.3;
    }

    .footer-links a {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.65);
        padding: 0;
        border-bottom: none;
        transition: color 0.2s ease;
    }

    .footer-links a:hover {
        color: #ffffff;
    }

    /* Divisor */
    .footer-divider {
        display: block;
        background-color: rgba(255, 255, 255, 0.1);
        margin: 0;
    }

    /* Copyright */
    .footer-copyright {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        padding: 16px 20px;
        text-align: center;
        margin: 0;
    }

    /* ============================================
       CALENDÁRIO MOBILE
       ============================================ */
    .calendar-dropdown {
        width: calc(100vw - 32px);
        max-width: 360px;
    }

    .calendar-container {
        padding: 16px;
        border-radius: 12px;
    }

    .calendar-month-year {
        font-size: 16px;
    }

    .calendar-instruction {
        font-size: 13px;
        padding: 8px;
    }

    .calendar-nav {
        width: 32px;
        height: 32px;
    }

    .weekday {
        font-size: 11px;
    }

    .calendar-day {
        font-size: 13px;
    }

    .calendar-info-box {
        padding: 8px;
        margin-top: 12px;
    }

    .calendar-info-item {
        font-size: 11px;
    }

    /* ============================================
       HEADER MOBILE
       ============================================ */
    .header {
        height: 60px;
    }

    .navbar {
        height: 60px;
    }

    .logo {
        height: 40px;
    }

    .menu-toggle {
        padding: 8px;
    }

    .hamburger {
        width: 22px;
        height: 2px;
    }

    /* Ajustar altura do hero considerando header menor */
    :root {
        --header-height: 60px;
    }

    /* ============================================
       UTILITÁRIOS MOBILE
       ============================================ */

    /* Remover hover effects em touch */
    .card:hover,
    .btn:hover,
    .testimonial-card:hover,
    .pricing-card-progressive:hover,
    .faq-item:hover {
        transform: none;
    }

    /* Garantir que textos não fiquem muito pequenos */
    * {
        -webkit-text-size-adjust: 100%;
    }

    /* Scroll suave */
    html {
        scroll-padding-top: 70px;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 375px)
   Para iPhones SE e dispositivos menores
   ============================================ */
@media (max-width: 375px) {
    .hero-title {
        font-size: 25px !important;
    }

    .section-title,
    h2 {
        font-size: 18px !important;
    }

    .search-box {
        max-width: 100%;
        padding: 12px;
    }

    .search-box .mat-form-group {
        width: 100%;
    }

    .search-box .mat-form-input {
        max-width: 100%;
    }

    .btn-cta,
    .section-cta .btn {
        width: 100% !important;
        max-width: 290px !important;
    }

    .btn-search {
        max-width: 100%;
        margin-top: 5px;
    }

    .pricing-card-type {
        font-size: 28px !important;
    }

    .price-amount {
        font-size: 32px !important;
    }

    .footer-title .logo-icon {
        height: 60px;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 480px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 80px 16px 40px;
    }

    .search-box {
        max-width: 400px;
    }

    .form-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .search-box .mat-form-group {
        width: calc(50% - 6px);
    }

    .btn-search {
        width: 100%;
    }
}