/*
 * NOVVIA Theme - Legacy Shortcodes Styles
 *
 * Stylesheet fuer alle aus WPBakery / Woodmart importierten Shortcodes,
 * die auf migrierten Inhalten weiterlaufen muessen. Designsystem-konform
 * (--novvia-*-Tokens), keine Inline-Styles in PHP-Renderern.
 *
 * Selektoren:
 *   .nv-legacy-*   neue NOVVIA-Compat-Klassen (eigener Namespace)
 *   .vc_*, .wpb_*  WPBakery-Markup das beim Migrieren oder beim Compat-
 *                  Render entsteht
 *   .wd-*          Woodmart-Klassen die in Theme-Templates / migrierten
 *                  Inhalten vorkommen
 */

/* ========================================================================
   1) WPBakery Layout (vc_row / vc_column / vc_empty_space)
   ======================================================================== */

.vc_row,
.wpb_row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.vc_row::before,
.vc_row::after { display: table; content: ""; }
.vc_row::after { clear: both; }
.vc_row + .vc_row { margin-top: 0; }

.wpb_column,
.vc_column_container {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    flex: 1 1 0;
    max-width: 100%;
}

.vc_column-inner { padding-top: 0; padding-bottom: 0; }

.vc_col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
.vc_col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.vc_col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.vc_col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
.vc_col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.vc_col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.vc_col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
.vc_col-sm-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.vc_col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.vc_col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
.vc_col-sm-2  { flex: 0 0 16.666%; max-width: 16.666%; }

@media (max-width: 768px) {
    .vc_col-sm-6, .vc_col-sm-4, .vc_col-sm-3,
    .vc_col-sm-8, .vc_col-sm-9, .vc_col-sm-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.vc_empty_space { display: block; }

.wpb_text_column,
.wpb_content_element { margin-bottom: 1em; }

.wpb_wrapper > p:first-child { margin-top: 0; }
.wpb_wrapper > p:last-child  { margin-bottom: 0; }

.wpb_single_image { margin-bottom: 1rem; }
.wpb_single_image .vc_single_image-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.vc_align_center { text-align: center; }
.vc_align_right  { text-align: right; }

.vc_custom_heading { margin: 0 0 .6em; }

/* ========================================================================
   2) NOVVIA-Compat-Renderer (.nv-legacy-*)
   ======================================================================== */

/* Banner: Bild mit Overlay-Text + CTA */
.nv-legacy-banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 1rem 0;
}
.nv-legacy-banner > img {
    width: 100%;
    height: auto;
    display: block;
}
.nv-legacy-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background: rgb(0 0 0 / .35);
    color: #fff;
}
.nv-legacy-banner__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.2;
}
.nv-legacy-banner__subtitle {
    margin: 0 0 1rem;
    opacity: .9;
}

/* Title (Headline + Subtitle, optional zentriert) */
.nv-legacy-title {
    margin: 2rem 0;
}
.nv-legacy-title--center { text-align: center; }
.nv-legacy-title--left   { text-align: left; }
.nv-legacy-title--right  { text-align: right; }
.nv-legacy-title__heading {
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.2;
    color: var(--novvia-text);
}
.nv-legacy-title__subtitle {
    color: var(--novvia-muted);
    margin: 0;
}

/* Button */
.nv-legacy-btn {
    display: inline-block;
    margin: .5rem 0;
    padding: .65rem 1.5rem;
    background: var(--novvia-accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease;
}
.nv-legacy-btn:hover,
.nv-legacy-btn:focus {
    background: var(--novvia-accent-hover);
    color: #fff;
}
.nv-legacy-btn--lg { padding: .8rem 2rem; font-size: 1rem; }
.nv-legacy-btn--sm { padding: .4rem 1rem; font-size: .85rem; }

/* Info-Box (Icon + Titel + Text + optional CTA) */
.nv-legacy-info-box {
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--novvia-border);
    border-radius: var(--radius-lg);
    background: var(--novvia-card);
    margin: .5rem 0;
}
.nv-legacy-info-box__icon {
    font-size: 2rem;
    margin-bottom: .5rem;
    color: var(--novvia-accent);
}
.nv-legacy-info-box__title {
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--novvia-text);
}
.nv-legacy-info-box__text {
    color: var(--novvia-muted);
    font-size: .9rem;
    margin: 0;
}

/* Image-Wrapper (mit Alignment) */
.nv-legacy-image {
    margin: .75rem 0;
}
.nv-legacy-image--center { text-align: center; }
.nv-legacy-image--right  { text-align: right; }
.nv-legacy-image > span,
.nv-legacy-image > a {
    display: inline-block;
    max-width: 100%;
}
.nv-legacy-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text-Block-Wrapper (Alignment, content_width) */
.nv-legacy-textblock {
    margin: 1rem 0;
}
.nv-legacy-textblock--left    { text-align: left; }
.nv-legacy-textblock--right   { text-align: right; }
.nv-legacy-textblock--center  { text-align: center; }
.nv-legacy-textblock--justify { text-align: justify; }

/* Liste (Icon-Bullets) — fehlte komplett im alten Compat */
.nv-legacy-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.nv-legacy-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    color: var(--novvia-text);
}
.nv-legacy-list li::before {
    content: "✓";
    color: var(--novvia-accent);
    font-weight: 700;
    flex-shrink: 0;
}
.nv-legacy-list--dash li::before { content: "—"; }
.nv-legacy-list--dot  li::before { content: "•"; }
.nv-legacy-list--num  { counter-reset: nv-li; }
.nv-legacy-list--num li::before {
    counter-increment: nv-li;
    content: counter(nv-li) ".";
}

/* Divider */
.nv-legacy-divider {
    border: 0;
    border-top: 2px solid var(--novvia-border);
    margin: 2rem 0;
}

/* Gallery-Carousel (horizontal scroll-snap) */
.nv-legacy-gallery-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem 0;
    margin: 1rem 0;
    scrollbar-width: thin;
}
.nv-legacy-gallery-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}
.nv-legacy-gallery-carousel img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

/* Nested-Carousel (woodmart_nested_carousel) */
.nv-legacy-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem 0;
    margin: 1rem 0;
    scrollbar-width: thin;
}
.nv-legacy-carousel__item {
    scroll-snap-align: start;
}

/* Video-Embed (woodmart_video, vc_video) */
.nv-legacy-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 1rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}
.nv-legacy-video iframe,
.nv-legacy-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Menu-Price (Restaurant-style) */
.nv-legacy-menu-price {
    display: flex;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--novvia-border);
}
.nv-legacy-menu-price strong { color: var(--novvia-text); }
.nv-legacy-menu-price small  { color: var(--novvia-muted); }

/* Team-Member */
.nv-legacy-team {
    text-align: center;
    padding: 1rem;
}
.nv-legacy-team__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
}
.nv-legacy-team__name {
    font-weight: 700;
    margin: 0;
    color: var(--novvia-text);
}
.nv-legacy-team__position {
    color: var(--novvia-muted);
    font-size: .8rem;
    margin: .25rem 0 0;
}

/* Testimonials-Wrapper */
.nv-legacy-testimonials {
    padding: 1rem;
    background: var(--novvia-bg);
    border-radius: var(--radius-lg);
    margin: 1rem 0;
}

/* Countdown */
.nv-legacy-countdown {
    text-align: center;
    padding: 1rem;
    background: var(--novvia-bg);
    border-radius: var(--radius-lg);
    margin: 1rem 0;
    font-weight: 700;
    color: var(--novvia-text);
}

/* Wishlist-Fallback (kein Plugin) */
.nv-legacy-wishlist {
    padding: 2rem;
    text-align: center;
    background: var(--novvia-bg);
    border-radius: var(--radius-lg);
    margin: 1rem 0;
    color: var(--novvia-muted);
}
.nv-legacy-wishlist .nv-legacy-btn {
    margin-top: 1rem;
}

/* HTML-Block (cms_block) Wrapper */
.nv-legacy-html-block {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.nv-legacy-html-block img { max-width: 100%; height: auto; }

/* Tot-Shortcode-Stub (Instagram, Brands ohne Render etc.) */
.nv-legacy-stub {
    padding: 1.5rem;
    text-align: center;
    color: var(--novvia-muted);
    background: var(--novvia-bg);
    border: 1px dashed var(--novvia-border);
    border-radius: var(--radius-lg);
    font-size: .85rem;
    margin: 1rem 0;
}

/* Plugin-Platzhalter (UAP-Login, Affiliate-Forms etc.) */
.nv-legacy-placeholder {
    padding: 1.5rem;
    border: 1px dashed var(--novvia-border);
    border-radius: var(--radius-md);
    color: var(--novvia-muted);
    font-size: .85rem;
    margin: 1rem 0;
    background: var(--novvia-card);
}

/* ========================================================================
   3) Woodmart-Klassen (auf migrierten Seiten + in Theme-Templates)
   ======================================================================== */

.wd-wpb { position: relative; }
.wd-text-block { display: block; }
.wd-image      { display: block; }
.wd-image img  { max-width: 100%; height: auto; display: block; }

.woodmart-title-container { margin: 0 0 1em; }
.wd-title-style-default   { font-weight: 700; line-height: 1.2; }
.wd-title-color-default   { color: var(--novvia-text); }
.wd-title-color-white     { color: #fff; }
.wd-title-color-primary   { color: var(--novvia-accent); }

.wd-underline-colored {
    position: relative;
    display: inline-block;
    background-image: linear-gradient(transparent calc(100% - 3px), var(--novvia-accent) 3px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
}

.wd-fontsize-xs  { font-size: 12px; }
.wd-fontsize-s   { font-size: 14px; }
.wd-fontsize-m   { font-size: 16px; }
.wd-fontsize-l   { font-size: 20px; }
.wd-fontsize-xl  { font-size: 28px; }
.wd-fontsize-xxl { font-size: 40px; }

.wd-font-weight-400 { font-weight: 400; }
.wd-font-weight-500 { font-weight: 500; }
.wd-font-weight-600 { font-weight: 600; }
.wd-font-weight-700 { font-weight: 700; }

.wd-animation-normal,
.wd-animation-slide-from-bottom,
.wd-animation-zoom-in {
    animation: nv-wd-fadeup .6s ease-out both;
}
@keyframes nv-wd-fadeup {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wpb_animate_when_almost_visible.wpb_fadeInUp {
    animation: nv-wd-fadeup .6s ease-out both;
}

.wd-btn-arrow,
.wd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    color: var(--novvia-text);
    background: transparent;
    border: 1px solid var(--novvia-border);
    text-decoration: none;
    transition: all .2s ease;
}
.wd-btn-arrow:hover,
.wd-action-btn:hover {
    color: #fff;
    background: var(--novvia-accent);
    border-color: var(--novvia-accent);
}

.wd-list { list-style: none; margin: 0; padding: 0; }
.wd-list-type-icon { display: grid; gap: 8px; }
.wd-list-type-icon li { display: flex; align-items: flex-start; gap: 8px; }

.wd-carousel-container { position: relative; margin: 2rem 0; }
.wd-carousel-inner     { overflow: hidden; }
.wd-carousel           { display: flex; gap: 20px; flex-wrap: wrap; }
.wd-carousel-item      { flex: 0 0 calc(33.333% - 14px); }
@media (max-width: 768px) { .wd-carousel-item { flex: 0 0 100%; } }

.wd-grid-g { display: grid; gap: 20px; }
.wd-col    { padding: 0 10px; }

.wd-hide { display: none !important; }
@media (max-width: 768px)  { .wd-hide-sm    { display: none !important; } }
@media (max-width: 1024px) { .wd-hide-md-sm { display: none !important; } }

.wd-info-box {
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--novvia-card);
    border: 1px solid var(--novvia-border);
}

/* Revslider-Reste neutralisieren falls Plugin nicht aktiv */
rs-module-wrap, rs-module, rs-slide, rs-layer, rs-slides {
    display: none !important;
}

/* ========================================================================
   4) NOVVIA-VC-Elements (.nv-vc-el) — Wrapper aus class-novvia-vc-elements
   ======================================================================== */

.nv-vc-el { display: block; }
.nv-vc-el[data-nv-anim="fadeIn"]      { animation: nv-fadeIn      .6s ease-out both; }
.nv-vc-el[data-nv-anim="fadeInUp"]    { animation: nv-fadeInUp    .6s ease-out both; }
.nv-vc-el[data-nv-anim="fadeInLeft"]  { animation: nv-fadeInLeft  .6s ease-out both; }
.nv-vc-el[data-nv-anim="fadeInRight"] { animation: nv-fadeInRight .6s ease-out both; }
.nv-vc-el[data-nv-anim="zoomIn"]      { animation: nv-zoomIn      .6s ease-out both; }
.nv-vc-el[data-nv-anim="bounceIn"]    { animation: nv-bounceIn    .8s ease-out both; }

@keyframes nv-fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes nv-fadeInUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes nv-fadeInLeft  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes nv-fadeInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes nv-zoomIn      { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes nv-bounceIn    { 0%{opacity:0;transform:scale(.7)} 60%{opacity:1;transform:scale(1.05)} 100%{transform:scale(1)} }

@media (min-width: 1024px) { .nv-hide-lg { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .nv-hide-md { display: none !important; } }
@media (max-width: 767px) { .nv-hide-sm { display: none !important; } }