/**
 * SolClaim Responsive & Mobile Optimization System
 * Comprehensive support for all viewports: 320px, 375px, 480px, 768px, 1024px
 */

/* Global Mobile Safety */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Mobile Bottom Navigation Bar (Floating iOS / Android Web3 Native Bar) */
.sc-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 13, 20, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    align-items: center;
    justify-content: space-around;
    padding-left: 6px;
    padding-right: 6px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
}

.sc-mob-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94a3b8;
    text-decoration: none;
    height: 100%;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 2px;
}

.sc-mob-item.active,
.sc-mob-item:hover {
    color: #14F195;
}

.sc-mob-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.sc-mob-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: stroke 0.2s ease, transform 0.2s ease;
}

.sc-mob-item:hover .sc-mob-icon svg,
.sc-mob-item.active .sc-mob-icon svg {
    transform: scale(1.1);
}

.sc-mob-flag-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
}

.sc-mob-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    max-width: 68px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* ==========================================================================
   Tablets & Small Laptops (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .sc-header .sc-container {
        padding: 0 24px;
    }

    .sc-hero-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 0;
    }

    .sc-hero-center {
        margin-bottom: 52px;
    }

    .sc-wallet-search-wrap {
        margin-bottom: 64px;
    }

    .sc-hero-title {
        font-size: 2.3rem;
        text-align: center;
        max-width: 100%;
    }

    .sc-hero-desc {
        text-align: center;
        max-width: 620px;
    }

    .sc-stats-section {
        padding: 50px 0;
    }

    .sc-stats-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sc-stat-card {
        padding: 20px 16px;
    }

    .sc-stat-value {
        font-size: 1.6rem;
    }

    .sc-dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sc-wallet-search-wrap {
        max-width: 100%;
    }
}

/* ==========================================================================
   Mobile Tablets & Large Phones (max-width: 768px)
   ========================================================================== */
@media (max-width: 992px) {
    .sc-navbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .sc-nav-menu {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)); /* Clearance for bottom bar */
    }

    .sc-rec-modal-card {
        padding: 24px 18px 20px 18px;
        border-radius: 16px;
        max-height: 94vh;
    }

    .sc-rec-modal-card .sc-rec-close-btn {
        top: 14px;
        right: 14px;
    }

    .sc-rec-title {
        font-size: 1.2rem;
    }

    .sc-rec-metrics-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sc-rec-input-row {
        flex-direction: column;
    }

    .sc-btn-rec-scan {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .sc-rec-modal-footer {
        flex-direction: column;
        width: 100%;
    }

    .sc-rec-modal-footer button,
    .sc-rec-modal-footer a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .sc-mobile-nav {
        display: flex;
    }

    /* Header & Navigation */
    .sc-header {
        height: auto;
        min-height: 64px;
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .sc-header .sc-container {
        padding: 0 16px;
    }

    .sc-navbar {
        height: 56px;
    }

    .sc-brand-title {
        font-size: 1.25rem;
    }

    .sc-brand-sub {
        font-size: 0.54rem;
        letter-spacing: 0.12em;
    }

    .sc-brand-svg {
        width: 34px;
        height: 34px;
    }

    .sc-nav-actions {
        gap: 10px;
    }

    .sc-btn-wallet {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    /* Hero Section */
    .sc-hero {
        padding: 30px 0 20px 0;
        min-height: auto;
    }

    .sc-hero-center {
        margin-bottom: 30px;
    }

    .sc-wallet-search-wrap {
        margin-bottom: 36px;
    }

    .sc-hero-badge-tag {
        font-size: 0.72rem;
        padding: 5px 12px;
        margin-bottom: 14px;
    }

    .sc-hero-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
        line-height: 1.18;
        margin-bottom: 14px;
    }

    .sc-hero-desc {
        font-size: 0.95rem;
        line-height: 1.55;
        padding: 0 4px;
        margin-bottom: 20px;
    }

    .sc-hero-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 0;
    }

    .sc-hero-mini-card {
        padding: 14px 12px;
    }

    .sc-mini-card-title {
        font-size: 0.88rem;
    }

    .sc-mini-card-desc {
        font-size: 0.78rem;
    }

    /* Wallet Search Box Mobile Adaptation */
    .sc-wallet-search-wrap {
        margin-bottom: 34px;
    }

    .sc-wallet-search-box {
        border-radius: 18px;
    }

    .sc-search-inner {
        flex-direction: column;
        padding: 12px 10px;
        gap: 10px;
        border-radius: 16px;
    }

    .sc-search-prefix {
        display: none;
    }

    .sc-wallet-input {
        width: 100%;
        text-align: center;
        padding: 8px 0;
        font-size: 16px !important; /* CRITICAL: Prevents iOS Safari automatic zoom */
    }

    .sc-wallet-input::placeholder {
        font-size: 0.86rem;
    }

    .sc-btn-find {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 0.95rem;
    }

    /* Telemetry Stats Banner */
    .sc-stats-banner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sc-stat-card {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .sc-stat-value {
        font-size: 1.55rem;
    }

    .sc-stat-label {
        font-size: 0.8rem;
    }

    /* Sections General */
    .sc-section {
        padding: 60px 0;
    }

    .sc-suite-section-wrap {
        padding: 60px 0 48px 0;
    }

    .sc-section-title {
        font-size: 1.55rem;
        margin-bottom: 24px;
    }

    .sc-steps-grid,
    .sc-token-features-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sc-feature-card,
    .sc-step-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .sc-step-watermark {
        font-size: 3.4rem;
        top: 8px;
        right: 14px;
    }

    /* FAQ Accordion Mobile */
    .sc-faq-q {
        padding: 16px 18px;
        font-size: 0.95rem;
    }

    .sc-faq-a {
        padding: 0 18px 16px 18px;
        font-size: 0.88rem;
        line-height: 1.6;
    }

    /* Footer Mobile */
    .sc-footer {
        padding: 44px 0 20px 0;
    }

    .sc-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .sc-footer-col ul {
        align-items: center;
    }

    .sc-footer-desc {
        max-width: 100%;
        margin: 10px auto;
        font-size: 0.88rem;
    }

    .sc-footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding-top: 20px;
    }

    /* Dashboard View Mobile */
    .sc-dash-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 14px;
        gap: 12px;
        border-radius: 16px;
    }

    .sc-dash-wallet-info {
        width: 100%;
    }

    .sc-dash-wallet-badge {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .sc-dash-wallet-badge strong {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sc-dash-topbar-actions {
        width: 100%;
    }

    .sc-btn-back-home,
    .sc-btn-rescan {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.86rem;
    }

    .sc-dash-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 14px;
    }

    .sc-dash-tabs {
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }

    .sc-tab-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .sc-dash-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }

    .sc-btn-scan {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }

    /* Dashboard Accounts Table Mobile */
    .sc-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 180px;
    }

    .sc-table th {
        padding: 10px 12px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .sc-table td {
        padding: 12px 12px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .sc-token-mint {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Summary Bar Mobile (2x2 Metrics Grid) */
    .sc-summary-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 14px;
    }

    .sc-summary-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
    }

    .sc-metric-val {
        font-size: 1.15rem;
    }

    .sc-btn-reclaim {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
        font-size: 1rem;
    }

    /* Scanning Overlay Mobile */
    .sc-scan-overlay {
        padding: 14px;
    }

    .sc-scan-card {
        padding: 26px 18px 22px 18px;
        border-radius: 22px;
        max-width: calc(100vw - 28px);
    }

    .sc-scan-title {
        font-size: 1.3rem;
    }

    .sc-scan-subtitle {
        font-size: 0.82rem;
        margin-bottom: 16px;
    }

    .sc-scan-wallet-pill {
        max-width: 100%;
        padding: 5px 12px;
        font-size: 0.76rem;
    }

    .sc-scan-wallet-addr {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sc-scan-stat-card {
        padding: 8px 6px;
    }

    .sc-scan-stat-val {
        font-size: 1.1rem;
    }

    /* Toast Notification Mobile Reposition */
    .sc-toast-container {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        left: 14px;
        right: 14px;
        max-width: 100%;
    }

    .sc-toast {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Small Smartphones (max-width: 480px / iPhone SE / Galaxy S)
   ========================================================================== */
@media (max-width: 480px) {
    .sc-header .sc-container {
        padding: 0 12px;
    }

    .sc-brand {
        gap: 8px;
    }

    .sc-brand-title {
        font-size: 1.15rem;
    }

    .sc-brand-sub {
        display: none; /* Hide micro label to maximize space on tiny screens */
    }

    .sc-brand-svg {
        width: 30px;
        height: 30px;
    }

    .sc-nav-actions {
        gap: 6px;
    }

    .sc-lang-btn {
        padding: 6px 8px;
        font-size: 0.78rem;
    }

    .sc-lang-name {
        display: none; /* Only show country flag + chevron on small screens */
    }

    .sc-btn-wallet {
        padding: 8px 12px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .sc-hero-title {
        font-size: 1.68rem;
    }

    .sc-hero-cards-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 22px;
    }

    .sc-hero-mini-card {
        padding: 12px 12px;
    }

    .sc-dash-kpi-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sc-summary-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sc-metric-item {
        background: rgba(255, 255, 255, 0.03);
        padding: 8px 12px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Telemetry Banner, Suite Cards & Page Wrappers (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .sc-stats-banner,
    .sc-hero-stats-banner {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 4px !important;
    }

    .sc-stat-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    .sc-stat-value {
        font-size: 1.45rem !important;
    }

    .sc-stat-subvalue {
        font-size: 0.85rem !important;
    }

    .sc-stat-label {
        font-size: 0.78rem !important;
    }

    /* Suite Cards Mobile */
    .sc-suite-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .sc-suite-card-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .sc-suite-card-title {
        font-size: 1.15rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .sc-suite-item {
        padding: 12px 10px !important;
    }

    .sc-suite-item-name {
        font-size: 0.9rem !important;
    }

    .sc-suite-item-desc {
        font-size: 0.78rem !important;
    }

    /* Page Wrappers Mobile Padding */
    .sc-result-page,
    .sc-completed-wrapper,
    .sc-wrc-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}