/* Mobile Optimization & Overrides */

/* Core Mobile Layout */
@media (max-width: 768px) {
    body {
        /* Ensure full screen usage */
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        -webkit-text-size-adjust: 100%;
    }

    /* Container adjustments */
    .t-records,
    .t-rec,
    .t123,
    .t-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Card/Main Content Area */
    #root,
    .first-screen {
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px !important;
    }

    /* Typography */
    h1.title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    h2.subtitle {
        font-size: 16px !important;
        margin-top: 10px !important;
    }

    p,
    .text,
    .content {
        font-size: 16px !important;
        /* Readable size */
        line-height: 1.5;
    }

    /* Form Elements */
    input[type="text"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom */
        height: 48px !important;
        /* Touch target */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Buttons */
    .btn,
    button,
    a.btn {
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        /* Full width on mobile usually better for CTAs */
        font-size: 18px !important;
        touch-action: manipulation;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Spacing */
    .section,
    .block {
        margin-bottom: 20px !important;
        padding: 10px !important;
    }
}

/* Utilities */
.hidden {
    display: none !important;
}

#cookie-banner {
    display: none !important;
}