﻿/* All styles scoped to the Gedian modal. No global layout overrides. */
#gedianLandingAdRoot {
    font-family: Tajawal,system-ui,sans-serif
}

    #gedianLandingAdRoot .gla-overlay {
        position: fixed;
        inset: 0;
        z-index: 2147482000;
        background: rgba(9,25,18,.70);
        backdrop-filter: blur(8px);
        display: grid;
        place-items: center;
        padding: 16px;
        animation: gla-in .26s ease both
    }

    #gedianLandingAdRoot .gla-card {
        --gla-green: #5B8C3B;
        position: relative;
        width: min(660px,100%);
        max-height: 96dvh;
        overflow: auto;
        overscroll-behavior: contain;
        background: linear-gradient(145deg,#fff 0%,#f6faef 70%,#fff 100%);
        border: 1px solid rgba(240,250,232,.7);
        border-radius: 26px;
        box-shadow: 0 24px 90px rgba(0,0,0,.40);
        color: #1f2937;
        direction: rtl;
        text-align: right;
        scrollbar-width: thin
    }

    #gedianLandingAdRoot .gla-close {
        position: sticky;
        top: 12px;
        float: left;
        z-index: 3;
        margin: 12px 0 0 12px;
        width: 39px;
        height: 39px;
        display: grid;
        place-items: center;
        border: 1px solid #d9e4d3;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
        color: #35582a;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 2px 9px rgba(0,0,0,.09)
    }

    #gedianLandingAdRoot .gla-content {
        padding: 22px 26px 27px;
        clear: both
    }

    #gedianLandingAdRoot .gla-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 100px;
        background: #eaf4e3;
        color: #426c31;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .02em
    }

    #gedianLandingAdRoot .gla-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #5B8C3B
    }

    #gedianLandingAdRoot h2 {
        font-family: inherit;
        font-size: clamp(24px,4.5vw,32px);
        line-height: 1.42;
        font-weight: 900;
        letter-spacing: -.04em;
        margin: 14px 0 10px;
        color: #244528
    }

    #gedianLandingAdRoot .gla-desc {
        font-size: 15px;
        line-height: 1.9;
        white-space: pre-line;
        overflow-wrap: anywhere;
        margin: 0 0 16px;
        color: #4b5d4b
    }

    #gedianLandingAdRoot .gla-media {
        margin: 0 16px;
        overflow: hidden;
        border-radius: 18px;
        background: #edf2ea
    }

        #gedianLandingAdRoot .gla-media img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 320px;
            object-fit: contain
        }

        #gedianLandingAdRoot .gla-media .gla-second {
            margin-top: 8px
        }

        #gedianLandingAdRoot .gla-media video {
            display: block;
            width: 100%;
            height: auto;
            max-height: min(55dvh,550px);
            object-fit: contain;
            background: #152b1b
        }

    #gedianLandingAdRoot .gla-has-video .gla-media {
        position: relative;
        background: #101d15
    }

    #gedianLandingAdRoot .gla-sound {
        display: block;
        position: relative;
        z-index: 1;
        margin: 8px auto;
        padding: 8px 15px;
        background: #fff;
        border: 1px solid #d7e5d0;
        border-radius: 30px;
        color: #2f5324;
        font: 700 13px Tajawal,system-ui,sans-serif;
        cursor: pointer;
        min-height: 36px
    }

        #gedianLandingAdRoot .gla-sound:focus-visible {
            outline: 3px solid #5B8C3B;
            outline-offset: 2px
        }

    #gedianLandingAdRoot .gla-secondary {
        border-top: 1px solid #e1ebdd;
        margin-top: 10px;
        padding-top: 12px
    }

        #gedianLandingAdRoot .gla-secondary h3 {
            font-size: 18px;
            margin: 0 0 6px;
            font-weight: 800;
            color: #315e30
        }

    #gedianLandingAdRoot .gla-cta {
        display: block;
        text-align: center;
        border-radius: 14px;
        background: #5B8C3B;
        color: white !important;
        text-decoration: none;
        padding: 12px 18px;
        font-size: 15px;
        font-weight: 900;
        margin-top: 15px;
        transition: transform .15s ease,background .15s ease
    }

        #gedianLandingAdRoot .gla-cta:hover {
            background: #466f2d;
            transform: translateY(-1px)
        }

    #gedianLandingAdRoot .gla-contact-heading {
        font-size: 15px;
        font-weight: 900;
        color: #355c2d;
        margin: 22px 0 11px
    }

    #gedianLandingAdRoot .gla-contacts {
        display: flex;
        flex-wrap: nowrap;
        gap: 9px;
        overflow-x: auto;
        padding: 3px 1px 10px;
        scrollbar-width: thin;
        scroll-snap-type: x proximity
    }

    #gedianLandingAdRoot .gla-contact {
        flex: 0 0 auto;
        min-width: 72px;
        max-width: 102px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        padding: 10px 8px;
        border: 1px solid #dce8d5;
        background: #fff;
        border-radius: 13px;
        text-decoration: none !important;
        color: #355b33;
        font-size: 11px;
        font-weight: 800;
        scroll-snap-align: start
    }

        #gedianLandingAdRoot .gla-contact:hover {
            border-color: #5B8C3B;
            background: #f1f7eb
        }

        #gedianLandingAdRoot .gla-contact img {
            width: 27px;
            height: 27px;
            object-fit: contain
        }

        #gedianLandingAdRoot .gla-contact .gla-icon-fallback {
            font-size: 21px;
            line-height: 27px
        }

    #gedianLandingAdRoot .gla-sponsor {
        font-size: 11px;
        color: #728070;
        margin-top: 14px;
        text-align: center
    }

    #gedianLandingAdRoot .gla-note {
        font-size: 11px;
        text-align: center;
        color: #8b9887;
        margin-top: 9px
    }

@keyframes gla-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(max-width:480px) {
    #gedianLandingAdRoot .gla-overlay {
        padding: 10px
    }

    #gedianLandingAdRoot .gla-card {
        border-radius: 20px;
        max-height: 97dvh
    }

    #gedianLandingAdRoot .gla-content {
        padding: 17px 18px 19px
    }

    #gedianLandingAdRoot .gla-media {
        margin: 0 10px
    }

    #gedianLandingAdRoot .gla-desc {
        font-size: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    #gedianLandingAdRoot .gla-overlay {
        animation: none
    }

    #gedianLandingAdRoot .gla-cta {
        transition: none
    }
}

@media(max-width:480px) {
    #gedianLandingAdRoot .gla-has-video .gla-media video {
        max-height: 52dvh
    }

    #gedianLandingAdRoot .gla-sound {
        font-size: 12px;
        margin: 6px auto
    }

    #gedianLandingAdRoot .gla-has-video h2 {
        font-size: clamp(20px,6vw,25px)
    }
}

@media(min-width:900px) {
    #gedianLandingAdRoot .gla-card {
        width: min(720px,90vw)
    }

    #gedianLandingAdRoot .gla-has-video .gla-media video {
        max-height: 58dvh
    }
}

/* Audible playback is gesture-restricted in many browsers. Show clear action. */
#gedianLandingAdRoot .gla-audio-gate {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: calc(100% - 24px);
    width: max-content;
    padding: 13px 18px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 999px;
    background: rgba(18,49,30,.94);
    color: #fff;
    font: 800 clamp(13px,3.5vw,16px) Tajawal,system-ui,sans-serif;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    cursor: pointer;
    text-align: center
}

    #gedianLandingAdRoot .gla-audio-gate[hidden] {
        display: none !important
    }

    #gedianLandingAdRoot .gla-audio-gate:focus-visible {
        outline: 3px solid #d1ffba;
        outline-offset: 3px
    }

#gedianLandingAdRoot .gla-sound {
    background: #edf8e8;
    border: 1px solid #84ac70;
    font-weight: 900;
    min-height: 44px;
    padding: 10px 16px
}

@media(max-width:480px) {
    #gedianLandingAdRoot .gla-audio-gate {
        padding: 12px 13px;
        white-space: normal
    }

    #gedianLandingAdRoot .gla-sound {
        width: calc(100% - 20px)
    }
}
