/* Mobile/Handheld Specific Styles */

/* Base mobile adjustments for all pages */
@media (max-width: 768px) {
    body {
        background-color: hsl(39, 100%, 50%);  /* Slightly refined orange */
        overflow-y: auto;                       /* Allow vertical scrolling on mobile */
        overflow-x: hidden;                     /* Prevent horizontal scrolling */
    }
    
    /* Navbar adjustments with subtle rounding */
    .navbar {
        border-radius: 5px;                    /* Subtle rounding for all corners */
        overflow: hidden;                      /* Ensure content doesn't overflow rounded corners */
    }
    
    .nav-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .title-hero {
        font-size: 40px;
        text-align: center;
        color: #FFA500; /* Orange fill color */
        font-family: 'Luckiest Guy', cursive;
        margin-bottom: 20px;

        /* Use a WHITE text-stroke for high contrast */
        -webkit-text-stroke: 1px white; /* White stroke */
        -webkit-text-stroke: 1px white;         /* White stroke */

        /* Ensure no shadow interferes */
        text-shadow: none;
    }
    
    /* Add subtle rounding to the nav links as well */
    .nav-link {
        border-radius: 3px;                  /* Subtle rounding for nav links */
    }
    
    /* Home page specific adjustments */
    .home-page::after {
        display: none;                          /* Remove vertical divider */
    }

    /* Add this rule to enable scrolling on home page for mobile */
    .home-page {
        overflow-y: auto;                       /* Enable vertical scrolling */
        overflow-x: hidden;                     /* Prevent horizontal scrolling */
        height: auto;                           /* Allow content to determine height */
        position: relative;                     /* Ensure proper positioning context */
    }

    /* Fix the animation keyframes for static positioning */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    /* Logo positioning - centered above login form */
    .home-page .astro-logo {
        position: static;
        display: block;
        width: 50%;
        max-width: 220px;
        margin: 30px auto;                 /* Center horizontally with space above and below */
        padding: 0;
        top: auto;
        left: auto;
        transform: none;                   /* Reset transform initially */
        opacity: 0.95;
        filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
        animation: float 6s ease-in-out infinite; /* Use the updated animation */
    }
    
    /* Fix the login container positioning */
    .home-page .right-side-container {
        position: relative;
        width: 92%;
        height: auto;
        padding: 30px 20px;
        margin: 20px auto;                 /* Simple auto margin instead of the large top margin */
        margin-top: 10px;                  /* Small top margin to create space after the logo */
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(8px);
        border-radius: 12px;
        animation: fadeRise 0.7s ease-out;
    }
    
    /* Elevated typography */
    .home-page .right-side-container h1 {
        font-size: 32px;
        font-weight: 300;
        letter-spacing: 0.2px;
        margin-bottom: 25px;
        color: rgba(0,0,0,0.85);                /* Slightly softer than pure black */
    }
    
    /* Enhanced form elements for touch */
    #authForm {
        width: 100%;
        max-width: none;                        /* Use percentage-based sizing */
    }
    
    #authForm input {
        height: 56px;                           /* Material Design touch target */
        font-size: 18px;
        padding: 0 16px;                        /* Side padding */
        margin: 8px 0 16px;
        border-radius: 6px;                     /* Slightly softer corners */
        border: 1px solid rgba(0,0,0,0.2);
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    #authForm input:focus {
        border-color: #3B82F6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* Focus glow effect */
        transform: translateY(-1px);
    }
    
    .button-container {
        margin-top: 24px;                       /* Increased spacing */
        gap: 16px;                              /* More space between buttons */
    }
    
    .button-container button {
        height: 60px;                           /* Larger touch target */
        font-size: 18px;
        letter-spacing: 0.5px;                  /* Subtle letter spacing */
        border-radius: 8px;                     /* Slightly rounder corners */
        transition: transform 0.15s, background-color 0.3s; /* Refined transitions */
    }
    
    .button-container button:active {
        transform: scale(0.98);                 /* More pronounced press effect */
    }
    
    /* Security indicator below form */
    .button-container::after {
        content: "Secure login • Privacy protected";
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 16px;
        font-size: 12px;
        color: rgba(0,0,0,0.6);
        letter-spacing: 0.3px;
    }
}

/* Chat page mobile optimization */
@media (max-width: 768px) {
    .chat-container {
        margin: 10px;
        padding: 10px;
        width: auto;
    }
    
    .message {
        padding: 6px;
    }
    
    .message.self {
        margin-left: 10%;
    }
    
    .message.other {
        margin-right: 10%;
    }
    
    .message-input {
        flex-direction: column;
        gap: 5px;
    }
    
    #messageInput {
        width: 100%;
    }
    
    .message-input button {
        width: 100%;
        margin-top: 5px;
    }
}

/* Currency converter mobile optimization */
@media (max-width: 600px) {
    .converter-container {
        margin: 10px;
        padding: 15px;
    }
    
    .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .input-group select {
        width: 100%;
    }
    
    .price-cards {
        grid-template-columns: 1fr;
    }
    
    .tabs {
        flex-wrap: wrap;
    }
    
    .tab {
        flex-grow: 1;
        text-align: center;
    }
}

/* Marketplace mobile optimization */
@media (max-width: 768px) {
    .listing {
        flex-direction: column;
    }
    
    .listing-image-container {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .listing-image {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    
    .search-sort-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .sort-container {
        margin-left: 0;
        width: 100%;
    }
    
    #sortSelect {
        width: 100%;
    }
    
    .filter-controls {
        flex-wrap: wrap;
    }
}

/* Profile page mobile optimization */
@media (max-width: 768px) {
    .profile-container {
        margin: 10px;
        padding: 15px;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-avatar {
        margin: 0 auto 15px;
    }
    
    .transaction-item {
        padding: 10px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
    }
    
    .completed-deal {
        flex-direction: column;
    }
    
    .deal-actions {
        margin-top: 10px;
    }
    
    /* Fix for wallet address overflow */
    #walletAddress, .monospace {
        word-break: break-all;
        font-size: 0.85em;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    
    /* Ensure rating value text stays properly aligned on profile */
    .rating-value {
        display: inline-block;
        margin-left: 5px;
    }
}

/* My Listings & Interests mobile optimization */
@media (max-width: 768px) {
    .listings-table {
        font-size: 14px;
    }
    
    .listings-table th, .listings-table td {
        padding: 8px 5px;
    }
    
    .chat-btn, .cancel-btn, .accept-btn {
        padding: 5px;
        font-size: 12px;
    }
    
    .listing-container {
        margin: 10px;
        padding: 10px;
    }
    
    .user-card {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .user-card button {
        width: 100%;
    }
}

/* Seller page mobile optimization */
@media (max-width: 768px) {
    .seller-form {
        margin: 10px;
        padding: 15px;
    }
    
    .image-upload {
        padding: 15px;
    }
    
    .upload-info p {
        font-size: 12px;
    }
}

/* Rating page mobile optimization */
@media (max-width: 768px) {
    .rating-container {
        margin: 15px;
        padding: 15px;
    }
    
    .stars {
        gap: 5px;
    }
    
    .star {
        font-size: 24px;
    }
}

/* Animation keyframes for mobile */
@keyframes fadeRise {
    0% { 
        opacity: 0;
        transform: translateY(20px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Marketplace mobile optimization - Fix for squeezed content */
@media (max-width: 768px) {
    /* Fix for seller rating display */
    .seller-rating {
        display: block;
        margin-top: 5px;
    }
    
    /* Fix for "No Ratings" display */
    .rating-value {
        display: inline-block;
        text-align: left;
        width: 100%;
        margin-top: 5px;
    }
    
    /* Improve detail layout on smaller screens */
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15px;
    }
    
    .detail-row .label {
        margin-bottom: 5px;
        width: 100%;
    }
    
    .detail-row .value {
        width: 100%;
    }
    
    /* Specific fix for the public address display */
    .detail-row .value.monospace {
        font-size: 0.85em;
        background-color: rgba(245, 245, 245, 0.7);
        padding: 5px;
        border-radius: 3px;
        max-width: 100%;
    }
}