/* ---------------------------------------------------------------------------
 * ADNOC approved-vendor notice — AOS Bolts & Steel
 * Paired with inc_adnoc.php. Every placement lives in this one file.
 * Brand: AOS red #ea2127, AOS navy #051829, ADNOC blue #0a4e9b
 *
 * ELEMENT ORDER follows the reference graphic, in every stacked block:
 *      1. lead      "AOS is now an"
 *      2. headline   "ADNOC-Approved Manufacturer"
 *      3. tail       "of Bolts & Nuts in all steel Grades"
 *      4. logo       centred
 *      5. vendor     "ADNOC Vendor ID: 0010084410"  — one line
 *
 * The supplied ADNOC lockup is a PORTRAIT mark (214x347, ratio 0.617) on an
 * OPAQUE WHITE background. So: size it by height with room to spare, and on
 * any dark or blue surface sit it on a white tile. Its own blue (#0547ba)
 * has almost no contrast against the footer navy, so knocking the white out
 * is not an option. A white panel is also the brand-safe placement.
 * ------------------------------------------------------------------------- */

/* Visually-hidden page heading. The site had no <h1> anywhere; this carries
 * one without altering the design. Not display:none — that would hide it
 * from search engines and screen readers alike. */
.aos-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adnoc-logo { display: block; height: auto; max-width: 100%; }

.adnoc-lead { margin: 0; font-size: 15px; line-height: 1.45; }
.adnoc-headline {
    margin: 4px 0 0;
    font-family: Montserrat, Muli, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.adnoc-tail { margin: 3px 0 0; font-size: 15px; line-height: 1.4; }
.adnoc-vendor { margin: 16px 0 0; }
.adnoc-vendor-full {
    font-family: Montserrat, Muli, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.adnoc-vendor-full strong { font-weight: 700; letter-spacing: 0.08em; }
.adnoc-vendor-inline { font-family: Montserrat, Muli, sans-serif; font-size: 13px; font-weight: 600; }
.adnoc-vendor-inline strong { font-weight: 700; letter-spacing: 0.06em; }

.adnoc-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 15px 36px;
    background: #ea2127;
    border-radius: 3px;
    color: #fff;
    font-family: Montserrat, Muli, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.adnoc-btn:hover, .adnoc-btn:focus { background: #aa2128; color: #fff; text-decoration: none; }


/* ---- Credentials strip, in the topbar, every page ----------------------- */
/* Desktop only: the theme hides .topbar-style-2 below 992px. */

.adnoc-strip,
.topbar .adnoc-strip {
    margin: 3px 0 0;
    font-family: Montserrat, Muli, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: #7fb2e8;
}
.adnoc-strip span,
.topbar .adnoc-strip span { letter-spacing: 0.12em; color: #fff; }


/* ---- A. Full-width bar, between the navigation and the hero -------------- */

.adnoc-bar { background: #0a4e9b; padding: 14px 0; }
.adnoc-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
/* Row layout: no logo. A 2:3 lockup shrunk to strip height makes the
 * wordmark ~8px tall. The bar stays typographic; the logo appears where
 * there is vertical room. Swap this in if you get the HORIZONTAL lockup. */
.adnoc-bar .adnoc-logo-bar { display: none; }
.adnoc-bar-text { margin: 0; color: #fff; font-size: 16px; line-height: 1.4; }
.adnoc-bar-text strong {
    font-family: Montserrat, Muli, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.adnoc-bar-rule { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.4); }
/* Stated explicitly, including on the <strong>, so the number can never
 * pick up a colour from anywhere else. It sits on #0a4e9b. */
.adnoc-bar-vendor,
.adnoc-bar-vendor .adnoc-vendor-inline,
.adnoc-bar-vendor .adnoc-vendor-inline strong { margin: 0; color: #fff; }
.adnoc-bar-vendor .adnoc-vendor-inline { font-size: 14px; }

@media (max-width: 767px) {
    .adnoc-bar { padding: 16px 0; }
    .adnoc-bar-inner { flex-direction: column; gap: 12px; text-align: center; }
    /* Stacked layout has the vertical room, so the lockup comes back — and
     * `order` puts it after the text, per the reference graphic, without
     * changing the markup that the row layout needs. */
    .adnoc-bar-text   { order: 1; font-size: 14px; }
    .adnoc-bar-vendor { order: 3; }
    .adnoc-bar .adnoc-logo-bar {
        order: 2;
        display: block;
        height: 64px;
        width: auto;
        box-sizing: content-box;
        background: #fff;
        border-radius: 4px;
        padding: 8px 10px;
    }
    .adnoc-bar-rule { display: none; }
    .adnoc-bar-vendor .adnoc-vendor-inline { font-size: 13px; }
}


/* ---- B. Badge inside the hero slider ------------------------------------ */

.adnoc-hero-badge {
    position: absolute;
    right: 56px;
    bottom: 76px;
    z-index: 30;
    width: 336px;
    padding: 26px 26px 24px;
    background: #fff;
    border-top: 5px solid #0a4e9b;
    border-radius: 6px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
    text-align: center;
}
.adnoc-hero-badge .adnoc-lead { color: #2c3a47; }
.adnoc-hero-badge .adnoc-headline { font-size: 22px; line-height: 1.22; color: #0a4e9b; }
.adnoc-hero-badge .adnoc-tail { color: #2c3a47; }
.adnoc-hero-badge .adnoc-logo-badge { height: 96px; width: auto; margin: 18px auto 0; }
.adnoc-hero-badge .adnoc-vendor { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e9ef; }
.adnoc-hero-badge .adnoc-vendor-full { color: #4a5560; }
.adnoc-hero-badge .adnoc-vendor-full strong { color: #051829; }

/* The badge is a desktop-only treatment. Measured on the live homepage at
 * 375px: the hero is 450px tall, .slide-caption ends 90px above .slick-dots,
 * and the badge needs far more than that — so it would cover both the hero
 * CTA buttons and the dots. Below 992px the 'hero' placement shows
 * .adnoc-bar--mobile instead. 991px is also where the theme itself hides
 * .topbar-style-2. */
@media (max-width: 991px) {
    .adnoc-hero-badge { display: none; }
}

/* Bar rendered as the small-screen half of the 'hero' placement */
@media (min-width: 992px) {
    .adnoc-bar--mobile { display: none; }
}


/* ---- C. Popup modal ----------------------------------------------------- */

.adnoc-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.adnoc-modal[hidden] { display: none; }
.adnoc-modal-backdrop {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(3, 14, 26, 0.74);
}
.adnoc-modal-card {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.adnoc-modal-head { position: relative; padding: 32px 36px 28px; background: #0a4e9b; text-align: center; }
.adnoc-modal-head .adnoc-lead { color: rgba(255, 255, 255, 0.95); font-size: 18px; }
.adnoc-modal-head .adnoc-headline { font-size: 28px; line-height: 1.2; color: #fff; }
.adnoc-modal-head .adnoc-tail { color: rgba(255, 255, 255, 0.95); font-size: 16px; }
.adnoc-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.adnoc-modal-close:hover, .adnoc-modal-close:focus { background: rgba(255, 255, 255, 0.34); }
.adnoc-modal-body { padding: 30px 36px 32px; text-align: center; }
.adnoc-modal-body .adnoc-logo-modal { height: 124px; width: auto; margin: 0 auto; }
.adnoc-modal-body .adnoc-vendor { margin-top: 22px; }
.adnoc-modal-body .adnoc-vendor-full { color: #4a5560; font-size: 15px; }
.adnoc-modal-body .adnoc-vendor-full strong { color: #051829; }
.adnoc-dismiss {
    display: block;
    margin: 14px auto 0;
    padding: 6px 10px;
    background: none;
    border: 0;
    color: #4a5560;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.adnoc-dismiss:hover, .adnoc-dismiss:focus { color: #051829; }

@media (max-width: 767px) {
    .adnoc-modal-head { padding: 24px 22px 20px; }
    .adnoc-modal-head .adnoc-lead { font-size: 13px; }
    .adnoc-modal-head .adnoc-headline { font-size: 21px; }
    .adnoc-modal-head .adnoc-tail { font-size: 13px; }
    .adnoc-modal-body { padding: 22px 22px 24px; }
    .adnoc-modal-body .adnoc-logo-modal { height: 98px; }
    .adnoc-modal-body .adnoc-vendor-full { font-size: 13px; }
    .adnoc-btn { display: block; margin-top: 20px; padding: 15px 0; }
}


/* ---- D. Floating card, bottom right ------------------------------------- */
/* Clears the theme's .back-to-top button, which is 45px tall at bottom: 15px.
 * Stays a horizontal card: a vertical stack this size would be a dialog. */

.adnoc-float {
    position: fixed;
    right: 30px;
    bottom: 72px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 312px;
    padding: 18px 20px;
    background: #fff;
    border-left: 5px solid #0a4e9b;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}
.adnoc-float[hidden] { display: none; }
.adnoc-float .adnoc-logo-float { height: 62px; width: auto; flex-shrink: 0; }
.adnoc-float-text { flex-grow: 1; min-width: 0; }
.adnoc-float .adnoc-lead { font-size: 12px; color: #2c3a47; }
.adnoc-float .adnoc-headline { font-size: 15px; line-height: 1.22; color: #0a4e9b; }
.adnoc-float .adnoc-tail { font-size: 12px; color: #2c3a47; }
.adnoc-float .adnoc-vendor { margin-top: 6px; }
.adnoc-float .adnoc-vendor-inline { font-size: 11px; color: #4a5560; }
.adnoc-float .adnoc-vendor-inline strong { color: #051829; }
.adnoc-float-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #051829;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.adnoc-float-close:hover, .adnoc-float-close:focus { background: #ea2127; }

@media (max-width: 767px) {
    .adnoc-float { right: 14px; left: 14px; bottom: 70px; width: auto; padding: 15px 16px; }
    .adnoc-float .adnoc-logo-float { height: 54px; }
    .adnoc-float .adnoc-headline { font-size: 15px; }
}


/* ---- E. Footer block ---------------------------------------------------- */
/* Centred stack at every width — same order as the reference graphic. */

.adnoc-footer-block {
    padding: 26px 24px 24px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(127, 178, 232, 0.32);
    border-radius: 6px;
    text-align: center;
}
.adnoc-footer-block .adnoc-lead { color: #c7d2dd; font-size: 14px; }
.adnoc-footer-block .adnoc-headline { font-size: 19px; line-height: 1.24; color: #fff; }
.adnoc-footer-block .adnoc-tail { color: #c7d2dd; font-size: 13px; }
.adnoc-footer-block .adnoc-logo-footer {
    height: 80px;
    width: auto;
    margin: 18px auto 0;
    box-sizing: content-box;
    background: #fff;
    border-radius: 4px;
    padding: 10px 12px;
}
.adnoc-footer-block .adnoc-vendor {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.adnoc-footer-block .adnoc-vendor-full { color: #9fb3c6; font-size: 13px; }
.adnoc-footer-block .adnoc-vendor-full strong { color: #7fb2e8; }

@media (max-width: 767px) {
    .adnoc-footer-block { padding: 22px 20px 20px; }
    .adnoc-footer-block .adnoc-headline { font-size: 17px; }
    .adnoc-footer-block .adnoc-logo-footer { height: 76px; margin-top: 16px; }
}


/* ---- Motion ------------------------------------------------------------- */

.adnoc-in { animation: adnocFade 0.28s ease-out both; }
@keyframes adnocFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .adnoc-in { animation: none; }
}