/* Mobile-specific styles */

/* Small phones (up to 480px) */
@media screen and (max-width: 480px) {
    /* Small phone styles */
    .about-container,
    .faq-container {
        padding: 0 !important;
    }
    .main-container {
        gap: 8px !important;
    }
    .about-grid {
        gap: 8px !important;
    }
    .url-history-container {
        padding: 20px !important;
    }
    .url-item {
        max-width: 100% !important;
    }
    .url-details, .url-details p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }
    .url-details a, .long-url {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    .auth-container {
        margin-bottom: 20px !important;
        display: contents;
    }
    .user-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .user-name {
        max-width: 125px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .profile-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .result {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .result a {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .result button {
        margin-left: 0 !important;
    }
    .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .input-group > div {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 4px 0px !important;
    }

    .input-icon {
        font-size: 12px !important;
    }

    .input-group .url-input {
        font-size: 12px !important;
        flex: 1 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .input-group .shorten-btn {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .terms-text {
        font-size: 10px !important;
    }

    .page-info {
        font-size: 12px !important;
    }

    .page-btn {
        font-size: 10px !important;
    }
}

/* Desktops and large laptops (1281px - 1440px) */
@media screen and (min-width: 1281px) and (max-width: 1440px) {
    /* Desktop styles */
}

/* Large screens (1441px and above) */
@media screen and (min-width: 1441px) {
    /* Large screen styles */
}

/* Portrait orientation for mobile devices */
@media screen and (max-width: 768px) and (orientation: portrait) {
    /* Portrait styles */
    .about-container,
    .faq-container {
        padding: 0 !important;
    }
    .main-container {
        gap: 8px !important;
    }
    .about-grid {
        gap: 8px !important;
    }
    .url-history-container {
        padding: 20px !important;
    }
    .url-item {
        max-width: 100% !important;
    }
    .url-details, .url-details p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }
    .url-details a, .long-url {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    .auth-container {
        margin-bottom: 20px !important;
    }
    .user-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .profile-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .result {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .result a {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .result button {
        margin-left: 0 !important;
    }
    .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .input-group > div {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 4px 0px !important;
    }

    .input-icon {
        font-size: 12px !important;
    }

    .input-group .url-input {
        flex: 1 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .input-group .shorten-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .terms-text {
        font-size: 10px !important;
    }

    .page-info {
        font-size: 12px !important;
    }

    .page-btn {
        font-size: 10px !important;
    }
}

/* Landscape orientation for mobile devices */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Landscape styles */
    .about-container,
    .faq-container {
        padding: 0 !important;
    }
    .main-container {
        gap: 8px !important;
    }
    .about-grid {
        gap: 8px !important;
    }
    .url-history-container {
        padding: 20px !important;
    }
    .url-item {
        max-width: 100% !important;
    }
    .url-details, .url-details p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }
    .url-details a, .long-url {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    .auth-container {
        margin-bottom: 20px !important;
    }
    .user-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .profile-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .result {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .result a {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .result button {
        margin-left: 0 !important;
    }
    .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .input-group > div {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 4px 0px !important;
    }

    .input-icon {
        font-size: 12px !important;
    }

    .input-group .url-input {
        flex: 1 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .input-group .shorten-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .terms-text {
        font-size: 10px !important;
    }

    .page-info {
        font-size: 12px !important;
    }

    .page-btn {
        font-size: 10px !important;
    }
}

/* High-DPI/Retina displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    /* High-DPI styles */
}