/* =====================================================
   GEMSTONE INC - Responsive Styles
   ===================================================== */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Mobile Large (max-width: 768px) ----- */
@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
    }

    /* Header */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-bg);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem;
        gap: var(--spacing-sm);
        transition: right var(--transition-normal);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.25rem;
        padding: 0.75rem 0;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .header .btn {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: calc(var(--spacing-lg) + 80px) var(--container-padding) var(--spacing-lg);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Grids */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Steps */
    .steps {
        grid-template-columns: 1fr;
    }

    .step::after {
        display: none;
    }

    /* Stats */
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-number {
        font-size: 2.5rem;
    }

    /* Benefits */
    .benefits {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonials {
        grid-template-columns: 1fr;
    }

    /* Lead Form */
    .lead-form {
        flex-direction: column;
    }

    .lead-form .btn {
        width: 100%;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    /* Forms */
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    /* Modal */
    .modal-content {
        margin: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .modal-buttons {
        flex-direction: column;
    }

    .modal-buttons .btn {
        width: 100%;
    }

    /* Section */
    .section {
        padding: var(--spacing-lg) 0;
    }

    /* Page Header */
    .page-header {
        padding: calc(var(--spacing-lg) + 80px) 0 var(--spacing-md);
    }
}

/* ----- Mobile Small (max-width: 480px) ----- */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .hero-badge {
        font-size: 0.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }

    .btn-large {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .grid-6 {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .stat {
        padding: var(--spacing-sm);
    }

    .stat-number {
        font-size: 2rem;
    }

    .card-content {
        padding: var(--spacing-sm);
    }

    .lead-capture {
        padding: var(--spacing-md);
    }

    .faq-question {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }

    .faq-answer p {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        font-size: 0.9rem;
    }
}

/* ----- Elementor Responsive Fixes ----- */
@media (max-width: 768px) {
    /* Elementor sections padding */
    .elementor-section > .elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Elementor columns - stack on mobile */
    .elementor-column {
        width: 100% !important;
    }

    /* Fix inline flex containers */
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* Inline store cards */
    [style*="padding:50px"],
    [style*="padding: 50px"] {
        padding: 30px 20px !important;
    }

    [style*="padding:40px"],
    [style*="padding: 40px"] {
        padding: 25px 15px !important;
    }

    /* Fix font sizes in inline styles */
    [style*="font-size:48px"],
    [style*="font-size: 48px"] {
        font-size: 36px !important;
    }

    [style*="font-size:36px"],
    [style*="font-size: 36px"] {
        font-size: 28px !important;
    }

    [style*="font-size:24px"],
    [style*="font-size: 24px"] {
        font-size: 20px !important;
    }

    /* Fix max-width issues */
    [style*="max-width:500px"],
    [style*="max-width: 500px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"] {
        max-width: 100% !important;
    }

    /* Partner store cards - stack buttons */
    [style*="gap:15px"],
    [style*="gap: 15px"] {
        gap: 10px !important;
    }

    /* Fix logo sizes on mobile */
    [style*="max-width:200px"],
    [style*="max-width: 200px"],
    [style*="max-width:180px"],
    [style*="max-width: 180px"] {
        max-width: 150px !important;
    }

    /* Store card images */
    [style*="width:120px"][style*="height:120px"] {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    [style*="font-size:36px"],
    [style*="font-size: 36px"] {
        font-size: 24px !important;
    }

    [style*="padding:30px"],
    [style*="padding: 30px"] {
        padding: 20px 15px !important;
    }

    /* Buttons smaller */
    [style*="padding:15px 35px"],
    [style*="padding: 15px 35px"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    [style*="padding:10px 20px"],
    [style*="padding: 10px 20px"] {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* SVG logos smaller */
    svg[width="60"],
    svg[width="50"],
    svg[width="40"] {
        transform: scale(0.8);
    }
}

/* ----- Print Styles ----- */
@media print {
    .header,
    .footer,
    .modal,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        padding: 1rem 0;
    }
}