/* ==============================================
   MOBILE RESPONSIVENESS FIXES - Habituz v1.0
   Auditoria Mobile-First - Janeiro 2026
   ============================================== */

/* Remove ellipse from hero section on mobile */
@media (max-width: 768px) {
    .hero-section {
        border-radius: 0 !important;
        /* Override any curve */
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 32px;
    }
}

/* ==============================================
   MOBILE NAVIGATION - Critical Accessibility Fix
   ============================================== */
@media (max-width: 991.98px) {

    /* Mobile menu background when expanded */
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.98) !important;
        border-radius: 12px;
        margin-top: 12px;
        padding: 16px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Nav links stack vertically with proper spacing */
    .navbar-nav {
        gap: 4px !important;
    }

    .navbar-nav .nav-link {
        padding: 12px 16px !important;
        color: #161313 !important;
        border-radius: 8px;
        font-weight: 600;
    }

    .navbar-nav .nav-link:hover {
        background-color: #F4F6F9;
        color: #9E5A53 !important;
    }

    /* Login button full width on mobile */
    .navbar-collapse .btn-terracotta {
        width: 100%;
        margin-top: 12px;
        text-align: center;
    }

    /* Align search and user elements */
    .navbar-collapse .d-flex {
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Hide desktop search on mobile menu */
    .navbar-collapse .dropdown.d-none.d-lg-block {
        display: none !important;
    }
}

/* ==============================================
   CALCULATOR FORMS - Touch-Friendly Inputs
   ============================================== */
@media (max-width: 576px) {

    /* Larger touch targets for form controls */
    .tool-form-control,
    .tool-form-select {
        min-height: 48px;
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }

    /* Ensure buttons are easy to tap */
    .btn-terracotta {
        min-height: 52px;
        font-size: 1rem;
    }

    /* Better spacing for dimension rows */
    .dimension-row .card-body,
    .area-row .card-body {
        padding: 16px !important;
    }

    /* Make step badges more visible */
    .tool-step-badge {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Terms checkbox easier to tap */
    .tool-terms-box {
        padding: 16px;
    }

    .tool-terms-box .form-check-input {
        width: 20px;
        height: 20px;
    }

    /* Results card adjustments */
    .result-main-box h2 {
        font-size: 2.2rem;
    }

    /* Ad cards in results */
    .tool-ad-card__title {
        font-size: 0.6rem;
    }

    /* ====== ACCESSIBILITY IMPROVEMENTS ====== */

    /* Increase label font sizes for better readability */
    .form-label.x-small,
    .form-label.xx-small,
    .x-small.fw-bold.text-muted {
        font-size: 0.7rem !important;
        letter-spacing: 0.03em;
    }

    /* Make secondary buttons (Add Area) more tappable */
    .tool-btn-add {
        padding: 10px 14px !important;
        min-height: 44px;
        font-size: 0.8rem !important;
        background-color: rgba(158, 90, 83, 0.1);
        border-radius: 8px;
    }

    /* Improve "ADD" button for openings */
    .btn-outline-secondary.btn-sm {
        min-height: 36px;
        min-width: 60px;
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }

    /* Tool info box adjustments */
    .tool-info-box {
        flex-direction: column;
        text-align: center;
    }

    .tool-info-box__icon {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px;
    }

    .tool-info-box__content {
        padding: 12px;
    }

    .tool-info-box__value {
        font-size: 0.9rem;
    }

    /* Delete buttons easier to tap */
    .dimension-row .btn-link,
    .area-row .btn-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==============================================
   RESULT PANEL - Mobile Scroll Behavior
   ============================================== */
@media (max-width: 991.98px) {

    /* Remove sticky on mobile - allow natural scroll */
    #resultsBox {
        position: relative !important;
        top: 0 !important;
    }
}

/* ==============================================
   FOOTER - Mobile Optimization
   ============================================== */
@media (max-width: 768px) {
    footer .row>div {
        text-align: center;
        margin-bottom: 24px;
    }
}