/* OHELP_ANDROID_WEB_MATCH_V1 */

/*
   Android-inspired mobile landing page.
   Visual overrides only.
   No application or payment logic is modified.
*/

@media screen and (max-width: 767px) {

    /* 1. Android mint / blue background */

    html:has(.landing-content) {
        min-height: 100%;
        background: #dceee6;
    }

    body:has(.landing-content) {
        min-height: 100vh;

        background:
            radial-gradient(
                ellipse at 95% 12%,
                rgba(104, 178, 218, .82),
                transparent 56%
            ),
            radial-gradient(
                ellipse at 6% 52%,
                rgba(239, 232, 182, .65),
                transparent 52%
            ),
            linear-gradient(
                115deg,
                #dcefe4 0%,
                #cde7e3 43%,
                #8bbdd7 100%
            ) !important;

        background-attachment: fixed !important;
    }

    /* 2. Landing content */

    .landing-content {
        width: 100% !important;
        max-width: none !important;
        padding: 16px 16px 125px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: clip;
    }

    /* 3. Glass effect matching Android */

    .landing-content .landing-account,
    .landing-content .landing-main-actions,
    .landing-content .landing-feed-grid > *,
    .landing-content .ohelp-market-stories,
    .landing-content .ohelp-marketplace-stories-host
        > section {

        background:
            linear-gradient(
                125deg,
                rgba(255,255,255,.46),
                rgba(255,255,255,.15)
            ) !important;

        border: 1.5px solid
            rgba(255,255,255,.82) !important;

        border-radius: 30px !important;

        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);

        box-shadow:
            0 9px 20px rgba(20,67,61,.11),
            inset 0 1px 0 rgba(255,255,255,.62) !important;
    }

    /* 4. Wallet: large Android-style card */

    .landing-content .landing-account {
        padding: 24px 20px 18px !important;
        margin: 10px 0 0 !important;
        min-height: 175px;
        color: #123f39 !important;
    }

    .landing-account p {
        color: #234b47 !important;
        font-size: 16px !important;
        opacity: 1 !important;
    }

    .landing-account .landing-balance {
        display: block;
        font-size: clamp(30px, 9vw, 43px) !important;
        font-weight: 850 !important;
        letter-spacing: -.8px;
        line-height: 1.3;
        color: #075c45 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    /* 5. Top Up / Withdraw */

    .landing-account-actions {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px !important;
        margin-top: 18px !important;
    }

    .landing-account-actions button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 56px !important;

        padding: 10px 8px !important;

        border: 1.5px solid
            rgba(255,255,255,.86) !important;

        border-radius: 28px !important;

        background:
            rgba(255,255,255,.30) !important;

        color: #075c45 !important;

        font-size: 17px !important;
        font-weight: 750 !important;

        box-shadow:
            0 5px 11px rgba(16,63,52,.12) !important;

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    /* 6. Four Android quick-action tiles */

    .landing-content .landing-main-actions {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr));
        align-items: stretch !important;

        gap: 9px !important;
        padding: 14px 10px !important;

        margin: 0 0 24px !important;

        border-top: 0 !important;
        border-radius: 0 0 30px 30px !important;
    }

    .landing-content .landing-account {
        border-radius: 30px 30px 0 0 !important;
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .landing-main-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 112px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        padding: 12px 5px !important;

        border: 1.5px solid
            rgba(255,255,255,.88) !important;

        border-radius: 23px !important;

        background:
            rgba(255,255,255,.23) !important;

        color: #184f43 !important;

        font-size: 13px !important;
        font-weight: 650 !important;

        text-align: center !important;
        white-space: normal !important;

        box-shadow:
            0 5px 11px rgba(16,63,52,.09) !important;
    }

    .landing-main-actions svg {
        width: 29px !important;
        height: 29px !important;
        flex-shrink: 0;
    }

    /* 7. Marketplace heading and button */

    .ohelp-marketplace-stories-host {
        display: block !important;
        width: 100% !important;
        min-width: 0;
        margin: 8px 0 20px !important;
    }

    .ohelp-marketplace-stories-host > section {
        padding: 12px 0 16px !important;
        overflow: hidden;
    }

    .ohelp-marketplace-stories-host h2 {
        display: inline-block;
        max-width: calc(100% - 155px);
        margin: 4px 0 16px 0 !important;

        font-size: clamp(21px,5.7vw,29px) !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;

        color: #153f39 !important;
        vertical-align: middle;
    }

    .ohelp-stories-marketplace-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: auto !important;
        max-width: 145px;
        min-height: 58px;

        margin: 0 0 14px 8px !important;
        padding: 10px 13px !important;

        border: 1.5px solid
            rgba(255,255,255,.85) !important;

        border-radius: 25px !important;

        background:
            rgba(255,255,255,.26) !important;

        color: #075c45 !important;
        font-size: 16px !important;
        font-weight: 750 !important;

        box-shadow:
            0 5px 12px rgba(16,63,52,.12) !important;

        vertical-align: middle;
    }

    /* 8. Marketplace story cards */

    .ohelp-marketplace-stories-host img {
        border-radius: 21px !important;
        object-fit: cover;
    }

    .ohelp-marketplace-stories-host
    button:focus-visible {
        outline: 3px solid #075c45 !important;
        outline-offset: 3px;
    }

    /* 9. Feed: no additional outer white card */

    .landing-content .landing-feed {
        margin-top: 10px !important;
        padding: 8px 0 16px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .landing-feed-heading {
        padding: 12px 0 !important;
        border: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .landing-feed-heading h2 {
        color: #153f39 !important;
        font-weight: 800 !important;
    }

    /* Preserve the existing mobile Feed grid */

    .landing-feed-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }

    .landing-feed-grid > * {
        min-width: 0 !important;
        overflow: hidden;
    }

    /* 10. Buttons */

    .landing-content button {
        -webkit-tap-highlight-color: transparent;
        transition:
            transform .15s ease,
            background-color .15s ease;
    }

    .landing-content button:active {
        transform: scale(.97);
    }

    /* 11. Bottom navigation */

    .landing-content nav,
    .landing-content [class*="bottom-nav"] {
        border-radius: 28px;
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
    }

    /* 12. Small phones */

    @media (max-width: 390px) {

        .landing-content {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .landing-main-actions > * {
            font-size: 12px !important;
            padding: 10px 3px !important;
        }

        .ohelp-marketplace-stories-host h2 {
            font-size: 21px !important;
        }

        .ohelp-stories-marketplace-button {
            font-size: 14px !important;
            padding: 9px 10px !important;
        }
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .landing-content button {
        transition: none !important;
    }
}