/* ==========================================
   Loqta Real Estate
   Responsive Styles
========================================== */

/* ==========================================
   Large Tablets
========================================== */

@media (max-width: 1024px) {
    .container {
        max-width: 900px;
    }

    .hero-card {
        padding: 50px 40px;
        min-height: 400px;
    }

    .hero-card h1 {
        font-size: 2.4rem;
    }

    .offer-card {
        padding: 30px;
    }

    .form-card {
        padding: 30px;
    }
}

/* ==========================================
   Tablets
========================================== */

@media (max-width: 768px) {
    :root {
        --header-height: 74px;
        --container-padding: 18px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .logo {
        width: 180px;
    }

    .hero-card {
        padding: 40px 28px;
        min-height: 350px;
        border-radius: var(--radius-lg);
    }

    .hero-card h1 {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem !important;
    }

    .choice-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .plans-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .offer-card {
        padding: 26px;
    }

    .form-card {
        padding: 26px;
    }

    .about-card {
        padding: 26px;
    }

    .quick-contact {
        gap: 12px;
    }

    .offer-contact {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-btn {
        width: 100%;
    }

    .primary-btn {
        min-height: 56px;
    }

    .feature-item {
        align-items: flex-start;
    }

    /* Back Button Responsive */
    .back-btn {
        padding: 8px 14px;
        font-size: var(--font-xs);
    }

    .back-btn i {
        font-size: 0.8rem;
    }
}

/* ==========================================
   Mobile Devices
========================================== */

@media (max-width: 576px) {
    body {
        font-size: .95rem;
    }

    main {
        padding-bottom: 120px;
    }

    .progress-section {
        padding: 18px 0;
    }

    .progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hero-card {
        padding: 30px 20px;
        min-height: 300px;
        border-radius: var(--radius-md);
    }

    .hero-card h1 {
        font-size: 1.6rem;
    }

    .hero-card .highlight-text {
        font-size: 1.4rem;
    }

    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
    }

    .hero-card .badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .badge {
        font-size: .82rem;
        padding: 8px 14px;
    }

    .choice-card {
        padding: 28px 20px;
    }

    .choice-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }

    .offer-card {
        padding: 22px 18px;
    }

    .feature-item {
        padding: 16px;
    }

    .feature-item i {
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }

    .form-card {
        padding: 22px 18px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 54px;
        font-size: 16px;
    }

    .form-group textarea {
        min-height: 120px;
    }

    .success-card {
        padding: 32px 20px;
    }

    .success-icon {
        width: 74px;
        height: 74px;
        font-size: 2rem;
    }

    .about-card {
        padding: 24px 18px;
    }

    .social-icons {
        gap: 14px;
    }

    .social-icons a {
        width: 48px;
        height: 48px;
    }

    /* Back Button Responsive */
    .back-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 6px;
    }

    .back-btn i {
        font-size: 0.7rem;
    }
}

/* ==========================================
   Small Mobile Devices
========================================== */

@media (max-width: 400px) {
    :root {
        --container-padding: 14px;
    }

    .logo {
        width: 155px;
    }

    .hero-card {
        padding: 24px 16px;
        min-height: 260px;
    }

    .hero-card h1 {
        font-size: 1.3rem;
    }

    .hero-card .highlight-text {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: 0.85rem !important;
    }

    .choice-card {
        padding: 24px 16px;
    }

    .choice-icon {
        width: 58px;
        height: 58px;
        font-size: 1.4rem;
    }

    .offer-card {
        padding: 18px 16px;
    }

    .feature-item {
        gap: 12px;
    }

    .feature-item strong {
        font-size: .92rem;
    }

    .feature-item span {
        font-size: .82rem;
    }

    .form-card {
        padding: 20px 16px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
    }

    .floating-bar {
        padding: 10px;
        gap: 10px;
    }

    .floating-bar .floating-btn {
        min-height: 52px;
        font-size: .9rem;
    }

    .toast {
        right: 12px;
        left: 12px;
        bottom: 92px;
        width: auto;
        font-size: .9rem;
    }
}

/* ==========================================
   Touch Devices
========================================== */

@media (hover: none) {
    .choice-card:hover,
    .plan-card:hover,
    .offer-card:hover,
    .primary-btn:hover,
    .contact-btn:hover,
    .social-icons a:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .hero-card:hover {
        background-size: cover;
    }
}

/* ==========================================
   Landscape Phones
========================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-card {
        padding: 20px;
        min-height: 200px;
    }

    .hero-card h1 {
        font-size: 1.4rem;
    }

    .hero-description {
        font-size: 0.85rem !important;
    }

    .footer {
        padding-bottom: 100px;
    }
}

/* ==========================================
   Overflow Protection
========================================== */

img,
video,
iframe {
    max-width: 100%;
}

table {
    display: block;
    overflow-x: auto;
}

/* ==========================================
   Safe Area (iPhone)
========================================== */

.floating-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ==========================================
   End Of File
========================================== */