/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* General */
    body {
        font-size: 14px;
    }
    
    /* Navigation */
    nav {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }
    
    .nav-links a {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    
    /* Dashboard Container */
    .dashboard-container, .main-container {
        padding: 0.5rem;
        margin: 0.5rem auto;
    }
    
    /* Store Link Card - Fix overflow */
    .store-link-card {
        padding: 0.5rem;
        word-break: break-all;
    }
    
    .store-link-url {
        font-size: 0.7rem;
        word-break: break-all;
        overflow-x: auto;
    }
    
    .store-link-url a {
        font-size: 0.65rem;
        display: inline-block;
        word-break: break-all;
    }
    
    /* Link Container - Fix buttons and link */
    .link-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .link-code {
        font-size: 0.65rem;
        padding: 0.5rem;
        word-break: break-all;
        overflow-x: auto;
        white-space: normal;
    }
    
    .copy-btn, .share-btn {
        justify-content: center;
        padding: 0.5rem;
        font-size: 0.7rem;
    }
    
    /* Share Cards */
    .share-card {
        padding: 0.5rem;
    }
    
    .caption-box {
        font-size: 0.65rem;
        padding: 0.5rem;
        overflow-x: auto;
        white-space: normal;
        word-break: break-word;
    }
    
    .caption-box a {
        word-break: break-all;
    }
    
    /* Two Columns Layout */
    .two-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Form Cards */
    .form-card, .products-card {
        padding: 0.75rem;
    }
    
    /* Product Items */
    .product-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .product-thumb {
        width: 70px;
        height: 70px;
        margin: 0 auto;
    }
    
    .product-details {
        text-align: center;
    }
    
    .product-actions {
        justify-content: center;
    }
    
    /* Analytics Card */
    .analytics-stats {
        justify-content: center;
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
    
    /* Store Page - Products Grid */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .product-card {
        margin: 0;
    }
    
    .product-image-container {
        height: 200px;
    }
    
    /* Store Header */
    .store-header {
        padding: 0.75rem;
    }
    
    .store-name {
        font-size: 1.2rem;
        word-break: break-word;
    }
    
    .store-logo {
        width: 60px;
        height: 60px;
    }
    
    .store-phone {
        font-size: 0.7rem;
        word-break: break-all;
    }
    
    .whatsapp-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    
    /* Forms */
    .form-container {
        margin: 0.5rem;
        padding: 0.75rem;
    }
    
    input, textarea, button, select {
        font-size: 14px;
    }
    
    /* Buttons */
    .btn-large, .order-btn, .whatsapp-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    
    /* Hero Section */
    .hero {
        padding: 1.5rem 0.75rem;
    }
    
    .hero h1 {
        font-size: 1.4rem;
    }
    
    .hero p {
        font-size: 0.85rem;
    }
    
    /* Steps Section */
    .steps {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .step {
        width: 100%;
        max-width: 260px;
        padding: 0.75rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .step h3 {
        font-size: 1rem;
    }
    
    .step p {
        font-size: 0.75rem;
    }
    
    /* Store Settings */
    .settings-container {
        margin: 0.5rem;
        padding: 0.75rem;
    }
    
    /* Media Gallery */
    .media-grid {
        justify-content: center;
    }
    
    .image-gallery {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Header Top */
    .header-top {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .plan-badge {
        text-align: center;
        font-size: 0.6rem;
    }
    
    /* Store Link in Dashboard */
    .store-link-url {
        word-break: break-all;
    }
    
    .store-link-url a {
        font-size: 0.65rem;
        display: inline-block;
        word-break: break-all;
    }
    
    /* Buttons group */
    .button-group {
        flex-direction: column;
    }
    
    .btn-save, .btn-reset {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Color picker group */
    .color-input-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    
    .color-input-group input {
        width: 50px;
        height: 35px;
    }
    
    .color-label {
        font-size: 0.65rem;
    }
    
    /* Stats grid */
    .stats-grid {
        gap: 0.5rem;
    }
    
    .stat-number {
        font-size: 1.1rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
    
    /* Welcome card */
    .welcome-card {
        padding: 0.75rem;
    }
    
    .welcome-title {
        font-size: 1rem;
    }
    
    /* Upgrade warning */
    .upgrade-warning {
        font-size: 0.65rem;
        padding: 0.5rem;
    }
    
    /* Plan info on register page */
    .plan-info {
        padding: 0.5rem;
    }
    
    .plan-info strong {
        font-size: 0.8rem;
    }
    
    .counter {
        font-size: 0.65rem;
    }
    
    .slot-badge {
        font-size: 0.55rem;
    }
    
    /* Phone group */
    .phone-group {
        flex-direction: column;
    }
    
    .phone-group select {
        width: 100%;
    }
    
    .phone-group input {
        width: 100%;
    }
    
    /* Add Product Button */
    .add-product-btn {
        padding: 0.6rem;
        font-size: 0.85rem;
    }
    
    /* Section Title */
    .section-title {
        font-size: 0.95rem;
    }
    
    /* Product Form */
    .product-form {
        padding: 0.75rem;
    }
    
    /* Submit Button */
    .submit-btn {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Products List */
    .products-list {
        font-size: 0.8rem;
    }
    
    .product-name {
        font-size: 0.8rem;
    }
    
    .product-price {
        font-size: 0.75rem;
    }
}

/* Extra small devices (phones under 480px) */
@media (max-width: 480px) {
    .product-name {
        font-size: 0.8rem;
    }
    
    .product-price {
        font-size: 0.75rem;
    }
    
    .store-name {
        font-size: 1rem;
    }
    
    .hero h1 {
        font-size: 1.2rem;
    }
    
    .stat-number {
        font-size: 1rem;
    }
    
    .analytics-stats {
        gap: 0.5rem;
    }
    
    .link-code {
        font-size: 0.55rem;
    }
    
    .caption-box {
        font-size: 0.55rem;
    }
    
    .nav-links a {
        font-size: 0.6rem;
        padding: 0.25rem 0.4rem;
    }
    
    .logo {
        font-size: 1rem;
    }
}

/* For very long URLs - add this class */
.word-break-all {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}