.font-cairo {
        font-family: Cairo, sans-serif !important;
    }

    /* =========================
       INLINE ARTICLE VIDEO
       shortcode: [video:ID]
    ========================== */
    .article-video-card {
        width: 100%;
        max-width: 760px;
        margin: 32px auto;
        direction: rtl;
    }
    .article-video-card__trigger {
        position: relative;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        display: block;
        cursor: pointer;
        text-align: inherit;
    }
    .article-video-card__frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 12px;
        border: 2px solid #4ac8de;
        background: #000;
        box-shadow: 0 8px 22px rgba(0,0,0,.18);
    }
    .article-video-card__thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .3s ease;
    }
    .article-video-card__trigger:hover .article-video-card__thumb { transform: scale(1.025); }
    .article-video-card__shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.78) 100%);
        pointer-events: none;
    }
    .article-video-card__top,
    .article-video-card__bottom {
        position: absolute;
        z-index: 2;
        right: 18px;
        left: 18px;
        color: #fff;
    }
    .article-video-card__top { top: 13px; text-align: center; }
    .article-video-card__title {
        display: block;
        color: #fff;
        font-size: 20px;
        line-height: 1.45;
        font-weight: 800;
        text-shadow: 0 2px 7px rgba(0,0,0,.65);
    }
    .article-video-card__author {
        display: block;
        color: #dff7ff;
        font-size: 14px;
        font-weight: 700;
        margin-top: 3px;
    }
    .article-video-card__bottom {
        bottom: 13px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
    }
    .article-video-card__brand {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: #fff;
        font-size: 13px;
        line-height: 1.4;
        text-align: right;
        font-weight: 700;
    }
    .article-video-card__youtube {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        padding: 7px 11px;
        border-radius: 999px;
        background: rgba(0,0,0,.48);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
    }
    .article-video-card__youtube i { color: #ff0000; font-size: 20px; }
    .article-video-card__play {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        width: 72px;
        height: 50px;
        transform: translate(-50%, -50%);
        border-radius: 13px;
        background: #ff0000;
        display: grid;
        place-items: center;
        box-shadow: 0 7px 18px rgba(0,0,0,.3);
        transition: transform .25s ease, background .25s ease;
    }
    .article-video-card__play::before {
        content: '';
        width: 0;
        height: 0;
        margin-left: 4px;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 15px solid #fff;
    }
    .article-video-card__trigger:hover .article-video-card__play {
        transform: translate(-50%, -50%) scale(1.08);
        background: #e60000;
    }
    .article-video-card iframe { width: 100%; height: 100%; border: 0; display: block; }
    @media (max-width: 767.98px) {
        .article-video-card { margin: 24px auto; }
        .article-video-card__frame { border-radius: 9px; }
        .article-video-card__top,
        .article-video-card__bottom { right: 10px; left: 10px; }
        .article-video-card__top { top: 9px; }
        .article-video-card__bottom { bottom: 9px; }
        .article-video-card__title { font-size: 14px; }
        .article-video-card__author,
        .article-video-card__brand,
        .article-video-card__youtube { font-size: 11px; }
        .article-video-card__play { width: 58px; height: 40px; }
        .article-video-card__play::before {
            border-top-width: 7px;
            border-bottom-width: 7px;
            border-left-width: 12px;
        }
    }
    @media (max-width: 767px) {

    /* العمودين نفس العرض */
    .social-connect .row > div {
        display: flex;
    }

    /* زر WhatsApp و Call Us نفس المقاس */
    .social-connect .btn-responsive-action {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

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

        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* المحتوى جوه الزر */
    .social-connect .btn-responsive-action .icon-container {
        width: 100% !important;
        height: 100% !important;

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

        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* النص ماينزلش سطر تاني */
    .social-connect .btn-responsive-action .icon-container p {
        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        width: auto !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }

    /* الأيقونات نفس الحجم */
    .social-connect .btn-responsive-action .icon-container i {
        font-size: 20px !important;
        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   ARTICLE DETAILS PAGE - WIDTH, SCROLLING, IMAGES
   Restricted to article details. Do not alter the site layout.
   ========================================================= */
/* Keep the entire article + sidebar centered at desktop/large viewport widths.
   The previous max-width: 100% on .container cancelled Bootstrap's
   normal centered max-width and stretched the layout on browser zoom-out. */
.blog-article-page > .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    box-sizing: border-box;
    min-width: 0;
}

.blog-article-page,
.blog-article-page .article-details-column,
.blog-article-page .article-details-content,
.blog-article-page .article-details-body {
    max-width: 100%;
    min-width: 0;
}

.blog-article-page .article-details-content,
.blog-article-page .article-details-body {
    width: 100%;
    overflow-wrap: anywhere;
}

/* Prevent large editor-inserted elements from stretching the article. */
.blog-article-page .article-details-body > *:not(.article-table-scroll) {
    max-width: 100%;
}

.blog-article-page .article-doctor-heading { gap: 10px; }
.blog-article-page .article-captcha-image { width: 180px; max-width: 100%; }

/* The article cover was naturally very tall on small screens. */
.blog-article-page .article-main-photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Keep images embedded in the article responsive (not YouTube cards). */
.blog-article-page .article-details-body img:not(.article-video-card__thumb) {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto;
}

/* Only rich-text article tables get a horizontal scrollbar. */
.blog-article-page .article-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 18px 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border: 1px solid #dce5ed;
    border-radius: 6px;
}

.blog-article-page .article-table-scroll:focus-visible {
    outline: 2px solid #3a899e;
    outline-offset: 2px;
}

.blog-article-page .article-table-scroll table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: auto !important;
    border-collapse: collapse;
    direction: inherit;
}

.blog-article-page .article-table-scroll th,
.blog-article-page .article-table-scroll td {
    box-sizing: border-box;
    border: 1px solid #c9d3dd;
    padding: 10px 12px;
    text-align: start;
    vertical-align: middle;
    white-space: normal !important;
    overflow-wrap: break-word;
}

.blog-article-page .article-table-scroll p { margin: 0; }

@media (max-width: 767px) {
    /* The table scrolls; article and adjacent elements stay inside viewport. */
    .blog-article-page .article-details-column,
    .blog-article-page .article-details-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .blog-article-page .article-details-content { overflow-x: clip; }

    .blog-article-page .article-table-scroll {
        max-width: 100% !important;
        width: 100% !important;
        margin-block: 16px;
    }

    /* Make comparison columns readable, but scroll only inside the table. */
    .blog-article-page .article-table-scroll table {
        min-width: max(100%, 600px) !important;
    }

    .blog-article-page .article-table-scroll th,
    .blog-article-page .article-table-scroll td {
        min-width: 155px;
        padding: 9px 10px;
        font-size: 13px;
        line-height: 1.65;
    }

    .blog-article-page .article-main-photo {
        width: 100% !important;
        height: min(58vw, 240px) !important;
        max-height: 240px !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 10px;
    }

    /* CKEditor can set inline dimensions on its article images. */
    .blog-article-page .article-details-body img:not(.article-video-card__thumb) {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 320px !important;
        object-fit: contain !important;
    }

    .blog-article-page .article-details-body video { max-width: 100%; }
}

/* =========================================================
   LAPTOP / DESKTOP RESPONSIVE ARTICLE LAYOUT — 2026-11-05
   Fix oversized article images & squeezed sidebar when narrowing
   the browser window. Mobile rules above remain untouched.
   ========================================================= */
@media (min-width: 768px) {
    /* The article and sidebar must share only the available width. */
    .blog-article-page > .container > .row.font-cairo {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    .blog-article-page > .container > .row.font-cairo > .article-details-column {
        flex: 0 0 66.666667% !important;
        width: 66.666667% !important;
        max-width: 66.666667% !important;
        min-width: 0 !important;
    }

    .blog-article-page > .container > .row.font-cairo > .col-lg-4 {
        flex: 0 0 33.333333% !important;
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        min-width: 0 !important;
    }

    .blog-article-page .article-details-content,
    .blog-article-page .article-details-body {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Limit both cover and CKEditor images without cropping them. */
    .blog-article-page .article-main-photo,
    .blog-article-page .article-details-body img:not(.article-video-card__thumb) {
        display: block !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: min(100%, 760px) !important;
        height: auto !important;
        max-height: 440px !important;
        object-fit: contain !important;
        margin-inline: auto !important;
    }

    .blog-article-page .article-video-card {
        max-width: min(100%, 760px) !important;
    }
}

/* Tablet & small laptop: stack article and sidebar instead of squeezing. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .blog-article-page > .container > .row.font-cairo > .article-details-column,
    .blog-article-page > .container > .row.font-cairo > .col-lg-4 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .blog-article-page .article-main-photo,
    .blog-article-page .article-details-body img:not(.article-video-card__thumb) {
        max-width: min(100%, 680px) !important;
        max-height: 370px !important;
    }
}