/* ============================================================
   NFT PAGES MOBILE FIXES
   Shared by: all /nft/ pages (tier-1 through tier-9-test,
   index.html, bundle-template.html, promo-claim.html, nft-smart.html)

   Loaded LAST as final stylesheet so it wins the cascade.
   Target minimum width: 375px (iPhone SE)
   ============================================================ */

/* ==========================================================
   1. GLOBAL OVERFLOW PREVENTION
   ========================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
}

img, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   2. BODY PADDING — Reduce from 40px on narrow phones
   ========================================================== */

@media (max-width: 600px) {
    body {
        padding: 20px 12px !important;
    }
}

@media (max-width: 375px) {
    body {
        padding: 12px 8px !important;
    }
}

/* ==========================================================
   3. MAIN CONTAINER — gap + padding reduction on phones
   The 900px breakpoint already stacks card + info vertically.
   These rules refine spacing for smaller phones.
   ========================================================== */

@media (max-width: 600px) {
    .main-container {
        gap: 28px !important;
        padding: 16px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Kill the catastrophic desktop padding values */
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 375px) {
    .main-container {
        gap: 16px !important;
        padding: 8px !important;
    }
}

/* ==========================================================
   4. CARD SECTION — Release fixed flex-basis (655px → fluid)
   The 900px breakpoint already does flex-direction: column,
   but the fixed flex:0 0 655px can still escape on wide phones.
   ========================================================== */

@media (max-width: 900px) {
    /* Belt-and-suspenders: ensure card never demands 655px */
    .card-section {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: min(555px, 100%) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .card-section {
        max-width: 100% !important;
    }
}

/* ==========================================================
   5. INFO SECTION — Release fixed flex-basis (320px → fluid)
   Also release the padding-top: 80px that's meant for
   desktop side-by-side alignment only.
   ========================================================== */

@media (max-width: 900px) {
    .info-section {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: min(440px, 100%) !important;
        min-width: 0 !important;
        padding-top: 0 !important;       /* Was 80px: aligned with desktop card */
        padding-right: 0 !important;     /* Was 200px in bundle-template */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .info-section {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* ==========================================================
   6. BUNDLE-TEMPLATE SPECIFIC — Fix catastrophic paddings
   padding-right: 500px and padding-top: 250px break the
   layout completely on any screen < 1400px.
   ========================================================== */

@media (max-width: 1400px) {
    /* Override bundle-template's massive padding-right on .main-container */
    .main-container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    /* Override info-section's 250px top padding and 200px right padding */
    .info-section {
        padding-top: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================
   7. PROMO CLAIM GRID — Add missing 480px/375px breakpoints
   The 1400px breakpoint already collapses to 1fr.
   These rules refine padding/gaps for narrow phones.
   ========================================================== */

@media (max-width: 600px) {
    .promo-claim-grid {
        padding: 1rem !important;
        gap: 1rem !important;
        min-height: unset !important;
    }
}

@media (max-width: 375px) {
    .promo-claim-grid {
        padding: 0.625rem !important;
        gap: 0.75rem !important;
    }
}

/* ==========================================================
   8. HOLOFOIL CARD — Ensure breathing room at exact 375px
   card-base.css sets max-width: 370px on .holo-card.
   At exactly 375px with 0 margin, this leaves 5px.
   Force a proper margin buffer.
   ========================================================== */

@media (max-width: 400px) {
    .holo-card {
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================
   9. PAGE HEADER — Scale h1 down on small phones
   ========================================================== */

@media (max-width: 480px) {
    .page-header h1 {
        font-size: 1.5em !important;
    }

    .page-header p {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 375px) {
    .page-header h1 {
        font-size: 1.25em !important;
    }
}

/* ==========================================================
   10. NFT INFO BOXES — Reduce padding on phones
   ========================================================== */

@media (max-width: 480px) {
    .nft-info {
        padding: 16px !important;
    }

    .nft-info h2 {
        font-size: 1em !important;
    }
}

/* ==========================================================
   11. CONTRACT ADDRESS BOX — Allow wrap and full width
   ========================================================== */

@media (max-width: 480px) {
    .contract-address-box {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .copy-btn,
    .add-metamask-btn,
    .btn-blockchain {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   12. BUTTONS — Accessible touch targets
   ========================================================== */

@media (hover: none) and (pointer: coarse) {
    .copy-btn,
    .add-metamask-btn,
    .btn-blockchain,
    button {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================
   13. INPUT FIELDS — Prevent iOS zoom on focus
   ========================================================== */

@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ==========================================================
   14. PROMO CLAIM PAGE — promo-claim.html specific
   Simple single-column layout, just needs padding/sizing tweaks.
   ========================================================== */

@media (max-width: 480px) {
    .promo-container,
    .claim-container,
    .redemption-box {
        padding: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}