/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
    /* Header */
    .header-logo {
        max-width: 150px;
        padding: 0.75rem;
    }

    .app-header {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
    }

    .app-header h1 {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    .info-btn {
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
    }

    /* Navigation */
    .main-nav {
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }

    .nav-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    /* Map */
    .map-container {
        height: 400px !important;
    }

    #interactive-map {
        height: 400px !important;
        min-height: 400px;
    }

    .map-header h2 {
        font-size: 1.4rem;
    }

    .map-description {
        font-size: 0.9rem;
    }

    .marker-pin {
        width: 35px;
        height: 35px;
    }

    .marker-icon {
        font-size: 1.3rem;
    }

    .marker-label {
        font-size: 0.7rem;
        bottom: -22px;
    }

    /* Agency Panel */
    .agency-panel {
        padding: var(--spacing-md);
    }

    .agency-info {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .info-card {
        padding: 0.75rem;
    }

    .agency-actions {
        gap: 0.75rem;
    }

    /* Passport */
    .stamps-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-sm);
    }

    /* Comparator */
    .btn-info-toggle {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
    }

    .orbit-info {
        grid-template-columns: 1fr;
    }

    .orbit-item {
        flex-direction: column;
        text-align: center;
    }

    .orbit-icon {
        font-size: 2.5rem;
    }

    .comparison-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .vs-separator {
        display: none;
    }

    /* Agency Panel */
    .agency-info {
        grid-template-columns: 1fr;
    }

    .agency-actions {
        flex-direction: column;
    }

    /* Buttons */
    .btn-primary, .btn-secondary {
        width: 100%;
    }

    /* Footer */
    .app-footer {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    /* Further optimizations for very small screens */
    .header-logo {
        max-width: 120px;
        padding: 0.5rem;
    }

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

    .app-header h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.85rem;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .info-btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    /* Navigation */
    .nav-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Map */
    .map-container {
        height: 350px !important;
    }

    #interactive-map {
        height: 350px !important;
        min-height: 350px;
    }

    .map-header h2 {
        font-size: 1.2rem;
    }

    .map-description {
        font-size: 0.85rem;
    }

    .marker-pin {
        width: 30px;
        height: 30px;
    }

    .marker-icon {
        font-size: 1.1rem;
    }

    .marker-label {
        font-size: 0.65rem;
        bottom: -20px;
        padding: 2px 6px;
    }

    .popup-title {
        font-size: 1rem;
    }

    .popup-btn {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    /* Agency Panel */
    .agency-panel {
        padding: var(--spacing-sm);
    }

    .agency-title {
        font-size: 1.5rem;
    }

    .agency-rocket {
        font-size: 1rem;
    }

    .agency-info {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .info-card {
        padding: 0.6rem;
    }

    .info-label {
        font-size: 0.75rem;
    }

    .info-value {
        font-size: 1rem;
    }

    .timeline-item {
        padding: 0.6rem;
    }

    .agency-actions {
        gap: 0.5rem;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        padding: var(--spacing-sm);
    }

    .modal-content h2 {
        font-size: 1.5rem;
    }

    .code-modal-content {
        max-width: 95%;
    }

    .code-input {
        font-size: 1rem;
        padding: var(--spacing-sm);
        letter-spacing: 1px;
    }

    .code-input-section .btn-primary {
        padding: var(--spacing-sm);
        font-size: 1rem;
    }

    .code-help h3,
    .available-codes h3 {
        font-size: 1rem;
    }

    .code-help-list {
        font-size: 0.9rem;
        padding-left: var(--spacing-md);
    }

    .codes-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .code-item {
        padding: 0.75rem;
    }

    .code-item-name {
        font-size: 0.85rem;
    }

    .code-item-code {
        font-size: 0.7rem;
    }

    /* Quiz Success */
    .quiz-score-perfect {
        font-size: 3rem;
    }

    .quiz-perfect-text {
        font-size: 1.2rem;
    }

    .quiz-congrats {
        font-size: 0.95rem;
    }

    .stamp-icon-large {
        font-size: 4rem;
    }

    .stamp-validated-text {
        font-size: 1rem;
    }

    .quiz-encouragement {
        font-size: 0.9rem;
    }

    /* Info Modal */
    .info-modal-content {
        max-width: 95%;
        max-height: 90vh;
    }

    .info-modal-content h2 {
        font-size: 1.5rem;
    }

    .info-section h3 {
        font-size: 1.1rem;
    }

    .info-methods {
        grid-template-columns: 1fr;
    }

    .method-icon {
        font-size: 2.5rem;
    }

    /* Stamps */
    .stamps-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .stamp-icon {
        font-size: 2.5rem;
    }

    /* Comparator - Small screens */
    .btn-info-toggle {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }

    .orbit-explanation {
        padding: var(--spacing-md);
    }

    .orbit-explanation h3 {
        font-size: 1.2rem;
    }

    .orbit-content h4 {
        font-size: 1rem;
    }

    .orbit-content p {
        font-size: 0.85rem;
    }

    .orbit-example {
        font-size: 0.8rem !important;
    }

    .orbit-summary {
        font-size: 0.85rem;
        padding: var(--spacing-sm);
    }

    /* Footer */
    .app-footer {
        font-size: 0.8rem;
        padding: var(--spacing-md) var(--spacing-sm);
    }
}