/*
 * Request-specific reference refinements.
 *
 * Loaded after the base template/reference styles so the About Hero RTL order,
 * video card treatment, optional transparent Hero background and Global Header
 * spacing/scroll controls remain deterministic inside Elementor.
 */

/* --------------------------------------------------------------------------
 * About Hero: physical column order must not be reversed by direction: rtl.
 * The grid itself stays LTR (physical left -> right); text direction is then
 * restored on the content column.
 * -------------------------------------------------------------------------- */

.acdh-template-about_video .acdh-template-shell {
    direction: ltr !important;
}

.acdh-template-about_video[dir="rtl"] .acdh-template-shell {
    grid-template-areas: "media content" !important;
}

.acdh-template-about_video[dir="ltr"] .acdh-template-shell {
    grid-template-areas: "content media" !important;
}

.acdh-template-about_video[dir="rtl"] .acdh-template-about-content,
.acdh-template-about_video[dir="rtl"] .acdh-template-content {
    direction: rtl !important;
    text-align: right !important;
}

.acdh-template-about_video[dir="ltr"] .acdh-template-about-content,
.acdh-template-about_video[dir="ltr"] .acdh-template-content {
    direction: ltr !important;
    text-align: left !important;
}

.acdh-template-about_video[dir="rtl"] .acdh-template-eyebrow,
.acdh-template-about_video[dir="rtl"] .acdh-template-title,
.acdh-template-about_video[dir="rtl"] .acdh-template-title-line,
.acdh-template-about_video[dir="rtl"] .acdh-template-description {
    text-align: right !important;
}

.acdh-template-about_video[dir="ltr"] .acdh-template-eyebrow,
.acdh-template-about_video[dir="ltr"] .acdh-template-title,
.acdh-template-about_video[dir="ltr"] .acdh-template-title-line,
.acdh-template-about_video[dir="ltr"] .acdh-template-description {
    text-align: left !important;
}

.acdh-template-about_video[dir="rtl"] .acdh-template-title-line,
.acdh-template-about_video[dir="ltr"] .acdh-template-title-line {
    justify-content: flex-start !important;
}

.acdh-template-about_video[dir="rtl"] .acdh-template-stats {
    direction: rtl !important;
}

.acdh-template-about_video[dir="ltr"] .acdh-template-stats {
    direction: ltr !important;
}

/* Optional transparent Hero background, exposed through Elementor. */
.acdh-about-bg-transparent .acdh-template-about_video {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
 * About Hero video card: match the approved compact white card + blue play.
 * -------------------------------------------------------------------------- */

.acdh-template-about_video .acdh-template-video-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 126px !important;
    min-height: 150px !important;
    padding: 16px 12px 14px !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid rgba(35, 105, 200, .07) !important;
    border-radius: 17px !important;
    box-shadow: 0 16px 38px rgba(31, 55, 83, .12) !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.acdh-template-about_video .acdh-template-video-play.acdh-play {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto 13px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #1769e0 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(23, 105, 224, .28) !important;
    transform: none !important;
}

.acdh-template-about_video .acdh-template-video-play.acdh-play:hover,
.acdh-template-about_video .acdh-template-video-play.acdh-play:focus-visible {
    background: #1257bc !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.acdh-template-about_video .acdh-template-video-play.acdh-play i,
.acdh-template-about_video .acdh-template-video-play.acdh-play svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    color: #ffffff !important;
    fill: currentColor !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.acdh-template-about_video .acdh-template-video-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    direction: rtl !important;
    text-align: center !important;
}

.acdh-template-about_video .acdh-template-video-copy strong {
    margin: 0 !important;
    color: #17243a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.acdh-template-about_video .acdh-template-video-copy span {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

/* --------------------------------------------------------------------------
 * Global Header: manually adjustable brand/menu gap + reliable scroll follow.
 * -------------------------------------------------------------------------- */

.acgh-inner {
    gap: 0 !important;
}

.acgh-menu {
    margin-inline-start: var(--acgh-brand-menu-gap, 28px) !important;
    margin-inline-end: 0 !important;
}

.acgh-actions {
    margin-inline-start: auto !important;
}

.acgh-header.acgh-is-sticky {
    position: var(--acgh-scroll-position, sticky) !important;
    top: var(--acgh-sticky-top, 0px) !important;
    inset-inline: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
}

/* Fixed mode intentionally follows the viewport; keep its visual surface solid. */
.acgh-header.acgh-is-sticky[style*="--acgh-scroll-position: fixed"],
.acgh-header.acgh-is-sticky {
    background-clip: padding-box;
}

/* Never allow scroll-follow rules to block Elementor editor handles. */
.elementor-editor-active .acgh-header.acgh-is-sticky,
.elementor-edit-mode .acgh-header.acgh-is-sticky {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    inset-inline: auto !important;
    width: 100% !important;
    z-index: 0 !important;
}

/* --------------------------------------------------------------------------
 * About Hero height: both the legacy minimum-height control and the dedicated
 * About control can grow the reference Hero. The effective height is the larger
 * value, so changing either control in Elementor has an immediate visible result.
 * This selector is intentionally more specific than the late polish layer.
 * -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video {
        --acdh-about-effective-height: max(680px, var(--acdh-about-min-height, 0px), var(--acdh-min-height, 0px));
        min-height: var(--acdh-about-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-shell,
    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-media {
        min-height: var(--acdh-about-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-image {
        min-height: 0 !important;
        height: calc(var(--acdh-about-effective-height) - var(--acdh-about-media-top-space, 54px)) !important;
        max-height: calc(var(--acdh-about-effective-height) - var(--acdh-about-media-top-space, 54px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-image img {
        height: 100% !important;
        max-height: min(var(--acdh-about-image-max-height, 610px), calc(var(--acdh-about-effective-height) - var(--acdh-about-media-top-space, 54px))) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video {
        --acdh-about-effective-height: max(600px, var(--acdh-about-min-height, 0px), var(--acdh-min-height, 0px));
        min-height: var(--acdh-about-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-shell,
    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-media {
        min-height: var(--acdh-about-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-about_video .acdh-template-image {
        min-height: 0 !important;
        height: calc(var(--acdh-about-effective-height) - var(--acdh-about-media-top-space, 44px)) !important;
        max-height: calc(var(--acdh-about-effective-height) - var(--acdh-about-media-top-space, 44px)) !important;
    }
}

/* When CV display is enabled before a real file URL is supplied, preserve the
 * approved layout with a visibly disabled action instead of hiding the button. */
.elementor-widget-aliclick_about_qualifications .actlq-cv-button-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: .62 !important;
}

.elementor-widget-aliclick_about_qualifications .actlq-actions-placeholder {
    display: flex !important;
    justify-content: center !important;
}

@media (max-width: 1024px) {
    .acdh-template-about_video .acdh-template-video-card {
        width: 116px !important;
        min-height: 140px !important;
        padding: 14px 10px 13px !important;
    }

    .acdh-template-about_video .acdh-template-video-play.acdh-play {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin-bottom: 11px !important;
    }
}

@media (max-width: 767px) {
    .acdh-template-about_video[dir="rtl"] .acdh-template-shell,
    .acdh-template-about_video[dir="ltr"] .acdh-template-shell {
        direction: inherit !important;
        grid-template-areas: none !important;
    }

    .acdh-template-about_video[dir="rtl"] .acdh-template-about-content,
    .acdh-template-about_video[dir="rtl"] .acdh-template-content,
    .acdh-template-about_video[dir="ltr"] .acdh-template-about-content,
    .acdh-template-about_video[dir="ltr"] .acdh-template-content {
        text-align: center !important;
    }

    .acdh-template-about_video[dir="rtl"] .acdh-template-eyebrow,
    .acdh-template-about_video[dir="rtl"] .acdh-template-title,
    .acdh-template-about_video[dir="rtl"] .acdh-template-title-line,
    .acdh-template-about_video[dir="rtl"] .acdh-template-description,
    .acdh-template-about_video[dir="ltr"] .acdh-template-eyebrow,
    .acdh-template-about_video[dir="ltr"] .acdh-template-title,
    .acdh-template-about_video[dir="ltr"] .acdh-template-title-line,
    .acdh-template-about_video[dir="ltr"] .acdh-template-description {
        text-align: center !important;
    }

    .acdh-template-about_video[dir="rtl"] .acdh-template-title-line,
    .acdh-template-about_video[dir="ltr"] .acdh-template-title-line {
        justify-content: center !important;
    }

    .acdh-template-about_video .acdh-template-video-card {
        width: 112px !important;
        min-height: 132px !important;
    }
}

/* --------------------------------------------------------------------------
 * Home Hero geometry: mirror the proven About Hero full-bleed/height strategy.
 *
 * The home_hero template is a reference-specific homepage layout, so its visual
 * surface must escape an Elementor boxed parent while its inner shell remains
 * constrained. The existing responsive `minimum_height` Elementor control owns
 * --acdh-min-height; these late rules make that control drive the actual template
 * shell/media geometry instead of being masked by earlier fixed template values.
 * -------------------------------------------------------------------------- */

.elementor-widget-aliclick_doctor_hero .acdh-template-home_hero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    overflow: clip !important;
}

@media (min-width: 1025px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero {
        --acdh-home-effective-height: max(300px, var(--acdh-min-height, 620px));
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-shell,
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media {
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        min-height: 0 !important;
        height: calc(var(--acdh-home-effective-height) - 48px) !important;
        max-height: calc(var(--acdh-home-effective-height) - 48px) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image img {
        height: 100% !important;
        max-height: min(585px, calc(var(--acdh-home-effective-height) - 48px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero {
        --acdh-home-effective-height: max(300px, var(--acdh-min-height, 570px));
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-shell,
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media {
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        min-height: 0 !important;
        height: calc(var(--acdh-home-effective-height) - 36px) !important;
        max-height: calc(var(--acdh-home-effective-height) - 36px) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image img {
        height: 100% !important;
        max-height: min(545px, calc(var(--acdh-home-effective-height) - 36px)) !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero {
        --acdh-home-effective-height: max(300px, var(--acdh-min-height, 620px));
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-shell {
        min-height: var(--acdh-home-effective-height) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media {
        flex: 1 1 355px !important;
        min-height: 355px !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        min-height: 0 !important;
        height: 100% !important;
    }
}

/* --------------------------------------------------------------------------
 * Home Hero media vertical alignment.
 *
 * The responsive Elementor control writes --acdh-home-media-offset-y. Negative
 * values move the doctor composition upward; positive values move it downward.
 * The image, halo and doctor badge travel together so the approved composition
 * stays coherent. Fallbacks preserve the previously approved desktop/tablet
 * positions for existing widgets that have not yet saved the new control.
 * -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        transform: translateY(var(--acdh-home-media-offset-y, -36px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media-halo {
        bottom: calc(18px - var(--acdh-home-media-offset-y, -36px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-doctor-badge {
        bottom: calc(48px - var(--acdh-home-media-offset-y, -36px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        transform: translateY(var(--acdh-home-media-offset-y, -22px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media-halo {
        bottom: calc(18px - var(--acdh-home-media-offset-y, -22px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-doctor-badge {
        bottom: calc(34px - var(--acdh-home-media-offset-y, -22px)) !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-image {
        transform: translateY(var(--acdh-home-media-offset-y, 0px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-media-halo {
        bottom: calc(8px - var(--acdh-home-media-offset-y, 0px)) !important;
    }

    .elementor-widget-aliclick_doctor_hero .acdh-template-home_hero .acdh-template-doctor-badge {
        bottom: calc(42px - var(--acdh-home-media-offset-y, 0px)) !important;
    }
}