/* =========================================================================
   theme-components.css
   Central stylesheet for CSS that used to live inline in PHP templates.
   Enqueued after style.css (see functions.php > theme_add_bootstrap()).

   Each section is scoped to its component's root so nothing leaks site-wide.
   Dynamic, PHP-generated styles (VC custom colours, WP custom-header,
   admin fixes) intentionally stay inline in their templates.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Header — language switcher   (was: header.php <head>)
   ---------------------------------------------------------------------- */
.lang-icon {
    width: 15px;
    height: 15px;
    pointer-events: none;
    position: relative !important;
}

#lang-select {
    border: unset;
    border-radius: 1rem;
    font-size: 14px;
    padding: .2rem 0.25rem .2rem .5rem;
    margin-left: .25rem;
    background-color: #fff;
}

div.lang-select-wrapper {
    margin-left: .5rem;
}


/* -------------------------------------------------------------------------
   "Unsere Klinik" — mobile stats   (was: templates_vc/unsere_klinik-mobile.php)
   ---------------------------------------------------------------------- */
.unsere-klinik-mobile h2 {
    text-align: center;
    padding-top: 3rem;
}

.unsere-klinik-mobile {
    padding-bottom: 3rem;
}

.unsere-klinik-mobile p {
    font-family: GibsonLight, sans-serif;
    text-align: center;
}

.unsere-klinik-mobile .stat-row-num {
    font-size: 70px;
}

.unsere-klinik-mobile .ukc-first,
.unsere-klinik-mobile .ukc-second {
    display: flex;
    justify-content: space-between;
}

.unsere-klinik-mobile .ukc-first .stat-row-text,
.unsere-klinik-mobile .ukc-second .stat-row-text {
    font-size: 17px;
    font-family: GibsonLight, sans-serif;
    hyphens: auto;
}

.unsere-klinik-mobile .ukc_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}


/* -------------------------------------------------------------------------
   "[Custom] Video Upload" — plain <video> tag with a loading spinner
   (see functions.php > custom_video_* and templates_vc/custom_video.php)
   ---------------------------------------------------------------------- */
.video-element-wrap {
    position: relative;
    display: block;
    line-height: 0; /* kill the inline-video whitespace gap */
}

.video-element-wrap__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: video-element-spin 0.8s linear infinite;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Set by JS (js/video-element.js) once the video is ready (or on error). */
.video-element-wrap.is-loaded .video-element-wrap__loader {
    opacity: 0;
}

.video-element {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes video-element-spin {
    to {
        transform: rotate(360deg);
    }
}


/* More components (timelines, gallery, sidewidget, job accordion, blog
   single, tabbed form) will be migrated here in the follow-up pass. */
