/* VPN deal alerts box.
   Selectors start with "aside.da-box" and key rules use !important, so the site's global styles
   (h2/p colours, input styles, form-control, dark themes) can't override the box. */

aside.da-box {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #4E9AF1 0%, #2A6FD6 60%, #1B4FA8 100%) !important;
    font-family: inherit;
}

    aside.da-box.da-card {
        max-width: 820px;
        margin: 48px auto !important;
        border-radius: 22px;
        padding: 30px 30px 26px;
        box-shadow: 0 18px 40px rgba(27, 79, 168, .28);
    }

    aside.da-box.da-band {
        padding: 46px 20px !important;
    }

    aside.da-box .da-inner {
        max-width: 760px;
        margin: 0 auto;
    }

    /* Header: icon beside the title */
    aside.da-box .da-head {
        display: flex !important;
        align-items: center;
        gap: 16px;
        margin-bottom: 8px;
    }

    aside.da-box .da-icon {
        flex: none;
        display: inline-grid !important;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: #FFD60A !important;
        color: #212529 !important;
        font-size: 1.4rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    }

        aside.da-box .da-icon i {
            color: #212529 !important;
        }

    aside.da-box .da-title {
        color: #fff !important;
        font-size: 1.65rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    aside.da-box .da-text {
        color: #EAF2FF !important;
        font-size: 1.05rem !important;
        margin: 4px 0 18px 72px !important;
    }

    aside.da-box.da-band .da-head {
        justify-content: center;
    }

    aside.da-box.da-band .da-text {
        margin-left: 0 !important;
        text-align: center;
    }

    /* Form */
    aside.da-box .da-form {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 0 72px !important;
    }

    aside.da-box.da-band .da-form {
        margin: 0 auto !important;
        justify-content: center;
        max-width: 640px;
    }

    aside.da-box .da-form input[type=email] {
        flex: 1 1 260px;
        min-height: 54px !important;
        padding: 12px 16px !important;
        font-size: 1.05rem !important;
        color: #212529 !important;
        -webkit-text-fill-color: #212529 !important;
        caret-color: #212529 !important;
        background: #fff !important;
        border: 3px solid transparent !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        position: relative;
        z-index: 3;
    }

        aside.da-box .da-form input[type=email]::placeholder {
            color: #6C757D !important;
            -webkit-text-fill-color: #6C757D !important;
            opacity: 1 !important;
        }

        aside.da-box .da-form input[type=email]:focus {
            border-color: #FFD60A !important;
            outline: none !important;
        }

    aside.da-box .da-btn {
        min-height: 54px !important;
        padding: 12px 26px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #FFD60A !important;
        color: #212529 !important;
        font-weight: 800 !important;
        font-size: 1.05rem !important;
        cursor: pointer;
        pointer-events: auto !important;
        position: relative;
        z-index: 3;
        transition: transform .1s ease, background-color .15s ease;
    }

        aside.da-box .da-btn:hover {
            background: #FFE34D !important;
        }

        aside.da-box .da-btn:active {
            transform: translateY(1px);
        }

        aside.da-box .da-btn[disabled] {
            opacity: .75;
            cursor: wait;
        }

        aside.da-box .da-btn i {
            color: #212529 !important;
        }

    /* Honeypot: off-screen, can't overlap the real field */
    aside.da-box .da-hp {
        position: absolute !important;
        left: -9999px !important;
        top: auto !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    aside.da-box .da-msg {
        margin: 12px 0 0 72px;
        font-weight: 700;
        min-height: 1.4em;
    }

    aside.da-box.da-band .da-msg {
        margin-left: 0;
        text-align: center;
    }

    aside.da-box .da-msg.ok {
        color: #FFFFFF !important;
    }

        aside.da-box .da-msg.ok::before {
            content: "✓ ";
            color: #FFD60A;
        }

    aside.da-box .da-msg.err {
        color: #FFE0DB !important;
    }

        aside.da-box .da-msg.err::before {
            content: "! ";
            color: #FFD60A;
        }

    aside.da-box .da-note {
        display: block;
        margin: 10px 0 0 72px;
        font-size: .85rem !important;
        color: #D6E6FF !important;
    }

    aside.da-box.da-band .da-note {
        margin-left: 0;
        text-align: center;
    }

    aside.da-box .da-note a {
        color: #fff !important;
        text-decoration: underline;
    }

    /* Fallbacks if Bootstrap helpers aren't loaded */
    aside.da-box .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    aside.da-box .da-btn .d-none {
        display: none !important;
    }

/* Mobile */
@media (max-width: 560px) {
    aside.da-box.da-card {
        margin: 32px 12px !important;
        padding: 24px 20px;
    }

    aside.da-box .da-title {
        font-size: 1.35rem !important;
    }

    aside.da-box .da-text, aside.da-box .da-form, aside.da-box .da-msg, aside.da-box .da-note {
        margin-left: 0 !important;
    }

    aside.da-box .da-btn {
        width: 100%;
    }
}