/* Mobile Optimization for SvetSalonPro */
/* Applies only to screens smaller than 768px */

@media (max-width: 767px) {

    /* Navigation Optimization */
    nav .glass-panel {
        padding: 0.5rem 0.75rem !important;
    }

    nav img {
        width: 32px !important;
        height: 32px !important;
    }

    nav .space-x-4>* {
        font-size: 0.875rem !important;
    }

    nav .nav-link {
        font-size: 0.8rem !important;
        /* 13px approx */
        padding: 0.25rem 0.5rem !important;
    }

    nav .logo-container {
        width: 3rem !important;
        /* 48px */
        height: 3rem !important;
        padding: 0 !important;
        /* Reset padding for logo container to keep it circular and centered */
    }

    /* Typography - Reduce font sizes */
    .ios-title,
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    .ios-subtitle,
    p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* Hero Section */
    .hero-glass-panel {
        padding: 1.5rem !important;
        border-radius: 24px !important;
    }

    .hero-stats-card {
        padding: 1rem !important;
    }

    /* Service Cards */
    .service-glass-card {
        padding: 1.25rem !important;
        border-radius: 20px !important;
    }

    .service-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 1rem !important;
    }

    .service-icon-wrapper i {
        font-size: 1.25rem !important;
    }

    /* Master Cards */
    .glass-card {
        padding: 0.75rem !important;
        border-radius: 20px !important;
    }

    .master-image-container {
        border-radius: 16px !important;
    }

    /* Buttons */
    .ios-button,
    button {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.875rem !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }

    /* Forms */
    .booking-glass-form {
        padding: 1.5rem !important;
        border-radius: 24px !important;
    }

    .glass-input {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }

    /* Review Cards */
    .review-glass-card {
        padding: 1.25rem !important;
        min-width: 280px !important;
        border-radius: 16px !important;
    }

    /* Shop Page */
    .shop-hero-full {
        height: 300px !important;
        border-radius: 24px !important;
    }

    .shop-hero-title-large {
        font-size: 2rem !important;
    }

    .shop-hero-subtitle-light {
        font-size: 1rem !important;
    }

    .glass-product-card {
        border-radius: 16px !important;
    }

    .product-info {
        padding: 0.875rem !important;
    }

    .product-actions {
        padding: 0.875rem !important;
        padding-top: 0 !important;
    }

    /* Portfolio Page */
    .portfolio-card {
        border-radius: 16px !important;
    }

    .filter-button {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }

    /* Modals */
    .glass-modal-content {
        border-radius: 24px !important;
        padding: 1rem !important;
    }

    /* Container Padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Grid Adjustments */
    .grid-cols-2,
    .grid-cols-3,
    .md\\:grid-cols-2,
    .md\\:grid-cols-3,
    .lg\\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Spacing */
    .space-y-6>*+* {
        margin-top: 1rem !important;
    }

    .gap-8 {
        gap: 1rem !important;
    }

    .gap-6 {
        gap: 0.75rem !important;
    }

    /* Text Overflow Prevention */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Footer */
    footer {
        padding: 2rem 1rem !important;
    }

    footer .grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    /* Hide elements on mobile if needed */
    .hidden-mobile {
        display: none !important;
    }

    /* Ensure touch targets are large enough */
    a,
    button,
    input,
    select,
    textarea {
        min-height: 44px !important;
    }

    /* Optimize images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }

    * {
        max-width: 100% !important;
    }

    /* Navigation spacing fix */
    nav .space-x-8 {
        gap: 1rem !important;
    }

    nav .space-x-6 {
        gap: 0.75rem !important;
    }

    /* Shop specific */
    .btn-add-cart {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .btn-details {
        width: 44px !important;
        height: 44px !important;
    }

    /* Portfolio specific */
    #portfolioGrid {
        gap: 1rem !important;
    }

    /* Account page */
    .profile-header {
        padding: 0.5rem 1rem !important;
    }

    /* Contacts page */
    .contact-info {
        padding: 1rem !important;
    }

    /* Logo Fix */
    #mobileMenuLogo {
        border-radius: 9999px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #mobileMenuLogo img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 9999px !important;
    }
}

/* Extra small devices (phones in portrait, less than 375px) */
@media (max-width: 374px) {

    .ios-title,
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .hero-glass-panel {
        padding: 1rem !important;
    }

    nav .glass-panel {
        padding: 0.5rem !important;
    }

    .review-glass-card {
        min-width: 260px !important;
    }
}

/* Landscape orientation optimization */
@media (max-width: 767px) and (orientation: landscape) {
    .shop-hero-full {
        height: 250px !important;
    }

    .hero-glass-panel {
        padding: 1rem !important;
    }
}