/* WEBHOST SOLUTIONS — native WHMCS email-verification banner.
   v1.1 fixes the real Six/WHMCS Bootstrap row/column markup on mobile.
   Presentation only: resend action and close control remain native. */

.email-verification {
    margin:0 !important;
    padding:10px 0 8px !important;
    border:0 !important;
    color:#dfe5f6 !important;
    background:#071122 !important;
    box-shadow:none !important;
}

.email-verification > .container {
    position:relative !important;
    width:calc(100% - 30px) !important;
    max-width:1040px !important;
    margin:0 auto !important;
    padding:14px 16px !important;
    border:1px solid rgba(221,174,83,.24) !important;
    border-radius:16px !important;
    background:
        radial-gradient(circle at 96% 0,rgba(143,88,223,.12),transparent 34%),
        linear-gradient(145deg,#121a31,#0b1427) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
}

/* WHMCS Six uses a Bootstrap .row with pushed/pulled columns here.
   Reset those layout rules before applying the WEBHOST layout. */
.email-verification > .container > .row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto 38px !important;
    grid-template-areas:"message action close" !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
}

.email-verification > .container > .row > [class*="col-"] {
    position:static !important;
    float:none !important;
    left:auto !important;
    right:auto !important;
    width:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* Message column — icon + verification text. */
.email-verification > .container > .row > div:has(.text) {
    grid-area:message !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:0 !important;
}

.email-verification > .container > .row > div:has(.text) > i,
.email-verification > .container > .row > div:has(.text) > .fa,
.email-verification > .container > .row > div:has(.text) > .fas,
.email-verification > .container > .row > div:has(.text) > .far {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    margin:0 !important;
    border:1px solid rgba(255,205,112,.28) !important;
    border-radius:11px !important;
    color:#ffd27c !important;
    background:linear-gradient(145deg,rgba(179,127,43,.24),rgba(99,72,32,.14)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-size:16px !important;
    line-height:1 !important;
}

.email-verification .text {
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#e3e8f6 !important;
    font-size:14px !important;
    line-height:1.5 !important;
    overflow-wrap:anywhere;
}

/* Resend button column. */
.email-verification > .container > .row > div:has(#btnResendVerificationEmail),
.email-verification > .container > .row > div:has(.btn-resend-verify-email) {
    grid-area:action !important;
}

.email-verification #btnResendVerificationEmail,
.email-verification .btn-resend-verify-email {
    display:block !important;
    width:auto !important;
    min-width:190px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:10px 16px !important;
    border:1px solid rgba(168,145,255,.42) !important;
    border-radius:11px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#665bdf,#9456d6) !important;
    box-shadow:none !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    text-shadow:none !important;
}

.email-verification #btnResendVerificationEmail:hover,
.email-verification #btnResendVerificationEmail:focus,
.email-verification .btn-resend-verify-email:hover,
.email-verification .btn-resend-verify-email:focus {
    border-color:rgba(187,169,255,.58) !important;
    color:#fff !important;
    background:linear-gradient(135deg,#7565ea,#a05fe2) !important;
    outline:none !important;
}

/* Close column. */
.email-verification > .container > .row > div:has(.close) {
    grid-area:close !important;
    display:flex !important;
    justify-content:flex-end !important;
}

.email-verification .close,
.email-verification button.close {
    position:static !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(142,154,212,.18) !important;
    border-radius:11px !important;
    color:#9da8c2 !important;
    background:#101b31 !important;
    box-shadow:none !important;
    opacity:1 !important;
    text-shadow:none !important;
    font-size:21px !important;
    line-height:1 !important;
}

.email-verification .close:hover,
.email-verification .close:focus,
.email-verification button.close:hover,
.email-verification button.close:focus {
    border-color:rgba(162,145,255,.30) !important;
    color:#fff !important;
    background:#15213a !important;
    outline:none !important;
}

.email-verification .btn[disabled],
.email-verification .btn.disabled {
    opacity:.58 !important;
    cursor:not-allowed;
}

/* Fallback for older Six markup where controls are direct children of .container. */
.email-verification > .container:not(:has(> .row)) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto 38px !important;
    align-items:center !important;
    gap:12px !important;
}

.email-verification > .container:not(:has(> .row)) > .text {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}

@media (max-width:767px) {
    .email-verification {
        padding:10px 0 8px !important;
    }

    .email-verification > .container {
        width:calc(100% - 24px) !important;
        padding:14px !important;
        border-radius:15px !important;
    }

    .email-verification > .container > .row {
        grid-template-columns:minmax(0,1fr) 36px !important;
        grid-template-areas:
            "message close"
            "action action" !important;
        gap:12px 10px !important;
    }

    .email-verification > .container > .row > div:has(.text) {
        align-items:flex-start !important;
        gap:11px !important;
    }

    .email-verification > .container > .row > div:has(.text) > i,
    .email-verification > .container > .row > div:has(.text) > .fa,
    .email-verification > .container > .row > div:has(.text) > .fas,
    .email-verification > .container > .row > div:has(.text) > .far {
        width:36px !important;
        height:36px !important;
        flex-basis:36px !important;
        border-radius:10px !important;
        font-size:15px !important;
    }

    .email-verification .text {
        font-size:13px !important;
    }

    .email-verification #btnResendVerificationEmail,
    .email-verification .btn-resend-verify-email {
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;
        white-space:normal !important;
    }

    .email-verification .close,
    .email-verification button.close {
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        min-height:36px !important;
        border-radius:10px !important;
    }

    .email-verification > .container:not(:has(> .row)) {
        grid-template-columns:minmax(0,1fr) 36px !important;
    }
}

@media (max-width:360px) {
    .email-verification > .container {
        width:calc(100% - 18px) !important;
        padding:12px !important;
    }
}

/* Centre only the warning triangle within its existing flex tile. */
.email-verification > .container > .row > div:has(.text) > .fa-exclamation-triangle {
    padding:0 !important;
}