@import url('https://cdn.jsdelivr.net/npm/intl-tel-input@16.0.3/build/css/intlTelInput.css');

/* Elements */
button {
    max-width: 100%;
}
button:hover {
    cursor: pointer;
}
button:disabled {
    cursor: wait!important;
    opacity: 0.5;
}

/* Hidden Element Classes */
@media only screen and (min-width: 992px) {
    .hiddenDesktop {
        display: none !important;
    }
}
@media screen and (max-width: 992px) {
    .hiddenTablet {
        display: none !important;
    }
}
@media screen and (max-width: 600px) {
    .hiddenMobile {
        display: none !important;
    }
}

/* Popups */
.popup-layout{
    display:none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0, 0.5);
    z-index: 9;
}
.popup-layout .popup {
    width: 720px;
    top: 120px;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    height: auto;
    background: white;
    border-radius: 10px;
    min-width: 350px;
}
.popup-layout .popup .popup-close-btn {
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 25px;
    color: #cdcdcd;
    z-index: 100;
    text-align: center;
}
.popup-layout .popup .popup-close-btn:hover {
    cursor:pointer;
}
.popup-layout .popup {
    max-height: calc(100% - 120px);
    overflow: auto;
}

/* Sticky Videos CSS */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.video.stuck {
    left: initial;
    z-index: 99;
    position: fixed;
    animation: fade-in .25s ease forwards;
}
.video.top-right {
    top: 10px;
    right: 10px;
}
.video.top-left {
    top: 10px;
    left: 10px;
}
.video.bottom-right {
    right: 10px;
    bottom: 10px;
}
.video.bottom-left {
    left: 10px;
    bottom: 10px;
}
.close-video {
    display: none;
    position: absolute;
    right: 2%;
    top: 2%;
    z-index: 999;
    color: white;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.25em;
}
.close-video.show {
    display: inline;
}

/* Bullet Lists */
.bullet-list-container {
    list-style: none;
    word-wrap: break-word;
}
.bullet-list-container ul {
    padding-inline-start: 0;
}
.bullet-list-container li {
    padding-bottom: 6px;
    list-style-type: none;
    padding-left: 2em;
}
.bullet-list-container ul li i.far, .bullet-list-container ul li i.fas, .bullet-list-container ul li i.fad, .bullet-list-container ul li i.fal {
    margin-left: -2em;
    display: inline-block !important;
    margin-right: 0.71428571em;
}
.bullet-list-container p,
.bullet-list-container li p {
    display: inline !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}
.bullet-list-container li > br {
    display: none;
}

/* Containers */
.container {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    font-family: Lato, sans-serif;
}
.container.container-large {
    max-width: 1120px;
}
.container.container-medium {
    max-width: 960px;
}
.container.container-small {
    max-width: 720px;
}
.container.container-xsmall {
    max-width: 550px;
}
.container .container {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    font-family: Lato, sans-serif;
}
.container.container-fluid {
    max-width: 100%!important;
}
.row {
    padding: 0px;
}

/* Videos */
.video-container {
    min-width: 50px;
    min-height: 50px;
    max-width: 100%;
    position: relative;
    left: 0;
    /*padding-bottom: 56.25%;*/
    /* padding-top: 25px; */
    /*height: 0;*/
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    background: #000;
}
/* New media framing (the S/M/L/XL width + aspect-ratio presets) is opt-in:
   gated on the inline aspect-ratio those presets always set, so videos built
   before this feature keep their original rendering (no crop, no black box). */
.video-container[style*="aspect-ratio"] {
    overflow: hidden;
    background: #000;
}
.video-container[style*="aspect-ratio"] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.video-container[style*="aspect-ratio"] video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-container .wf-video-placeholder {
    width: 100%;
    height: 100%;
    background-color: #2b2b2b;
    background-image: url('/assets/img/builder/video-play-button.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 84px 84px;
}

.video-sound-overlay {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    width: 100%;
    height: 100%;
    background-image: url('/assets/img/builder/video-play-button.png');
    background-repeat: no-repeat;
    margin: auto;
    background-size: 150px;
    background-position: center;
}
.video-unmute-button {
    width: 200px;
    padding: 10px;
    position: absolute;
    margin-top: 5px;
    margin-left: 10px;
    animation: pulse 2s infinite;
    animation-timing-function: ease-out;
}

.audio-container {
    padding: 10px;
}
@media only screen and (max-width: 768px) {
    .video-container{
        position: relative;
        height: auto!important;
        padding-bottom: 56.25% !important;
    }
    .video-container.hosted{
        padding-bottom: 0px !important;
    }
    /* aspect-ratio (new width presets) already keeps 16/9 at any width —
       stacking the padding-bottom hack on top doubles the height */
    .video-container[style*="aspect-ratio"]{
        padding-bottom: 0px !important;
    }
}
@media only screen and (max-width: 320px) {
    .video-container{
        position: relative;
        height: auto!important;
        padding-bottom: 56.25% !important;
    }
    .video-container.hosted{
        padding-bottom: 0px !important;
    }
    /* aspect-ratio (new width presets) already keeps 16/9 at any width —
       stacking the padding-bottom hack on top doubles the height */
    .video-container[style*="aspect-ratio"]{
        padding-bottom: 0px !important;
    }
}
div.video img{
    width: 100%;
}

/* Comments */
.comment_reply_btn{
    position: absolute;
    right: 35px;
    padding: 0px;
}
.comment_reply_form{ overflow: hidden; padding: 0px;
    float:left; width:100%; background:rgba(0,0,0,0.05); max-height:0px;
    -webkit-transition: height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-ms-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
}
.comment_reply_form *{ visibility:hidden; }
.comment_reply_form.opened{ padding: 10px;
    float:left; width:100%; background:rgba(0,0,0,0.05); border-bottom: 3px solid #8985d0; max-height: 500px;
    -webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-ms-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
}
.comment_reply_form.opened *{ visibility:visible; }

.comment_reply_form input, .comment_reply_form textarea{
    padding:0px; border:none; border-radius: 2px; background-color:#fff; border:1px solid #ddd; font-size:16px; padding:5px; margin-bottom: 10px;
    min-width: 400px; padding: 4px 10px;
}
.comment_reply_form form button[type="submit"]{
    padding: 6px 20px 8px 20px; border-radius: 2px; border: 1px solid #5bc0de; background-color: #5bc0de; font-weight: 400; margin-top: 5px; color:white;
    font-size:18px;
}
.comments{
    float:left; width:100%; height:auto; padding:20px; text-align:left;
}
.comment_body{
    float:left; width:100%; height:auto; padding:0px; padding-top:25px; padding-bottom:25px; border-top: 1px solid #eee;
}
.comment_body{
    font-family: "Open Sans";
}
.comment_avatar{
    float:left; width:70px; height:70px; background-color:#f2f2f2; border-radius: 2px; padding:0px;
}
.comment_avatar img{
    width: 100%; height: 100%;
}
.comment_text{
    float:left; font-size:16px!important; width:calc(100% - 70px); height:auto; padding-top:0px; color:#777; padding-top:5px;
}
.comment_reply{
    float:left; font-size:12px!important;
}
.comment_name{
    float:left; font-size:15px!important; font-weight:700; width:calc(100% - 70px); color:#444; padding-top:0px; padding-bottom:0px; font-size:11px;
    text-overflow: ellipsis; overflow: hidden;
}
.comment_date{
    color:#ccc; font-size:11px; display: inline-block; padding: 0px; padding-left: 10px; letter-spacing: 1px;
}
.comment_add{
    float:left; width:100%; height:auto; padding:0px; padding-top:10px; padding-bottom:10px;
}
.comment_add form{
    padding:0px;
}
.comment_add form input, .comment_add form textarea{ font-family: "Open Sans";
    padding:0px; border:none; border-radius: 2px; background-color:#fff; border:1px solid #ddd; font-size:16px; padding:5px; font-size:16px;
}

.comment_add form input{
    min-width: 400px; padding: 4px 10px;
}
.comment_add form button[type="submit"]{ font-family: "Open Sans";
    padding: 6px 20px 8px 20px; border-radius: 2px; border: 1px solid #5bc0de; background-color: #5bc0de; font-weight: 400; margin-top: 5px; color:white;
    font-size:18px;
}
.comment_add form button[type="submit"]:hover{
    background-color: #46b1d1;
}
.comment_post_response{
    display:none; float: left; width:100%; font-weight: 400; color: #31708f; background-color: #d9edf7; border-color: #bce8f1; border-radius:2px; padding:10px;
}
.comment_infos{
    float: left;
    padding: 0px;
    width: calc(100% - 70px);
    padding-left: 15px;
}
@media (max-width: 768px) {
    .comments{padding:10px;}
    section.container, .container {
        padding:5px!important;
    }
    #_popup_content{
        padding:0px!important;
        overflow-y: scroll;
    }

    .comment_avatar{
        width:50px; height:50px;
    }
    .comment_text, .comment_name{
        width:calc(100% - 50px);
    }
    .comment_add form input, .comment_add form textarea{
        width: 100%; min-width:0px;
    }

    .comment_reply_form form input, .comment_reply_form form textarea{
        width: 100%; min-width:0px;
    }
    .comment_add form button[type="submit"], .comment_reply_form form button[type="submit"]{
        width: 100%;
    }

    #comment_reply_form_btn_cancel{
        float: left; width: 100%; text-align:center;
    }
}
@media (max-width: 550px) {
  .comment_body{
    padding-top:15px; padding-bottom:15px;
  }
  #comments{
    padding:0px;
  }
  .comment_infos{
    padding-top:10px;
  }
  .comment_text, .comment_name{ width:100%; padding:0px;}
  .comment_reply_btn{ right:5px; }
}

.completed-nav-link {
    color: black !important;
}

.uncompleted-nav-link i {
    color: lightgrey !important;
    float: right;
    padding-top: .3em;
    padding-left: .3em;
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
    img {
        height: auto!important;
    }
    .popup-layout .popup {
        min-width: 40%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
    .popup-layout .popup {
        min-width: 60%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
    h1 {
        font-size: 26px!important;
    }
    h2 {
        font-size: 24px!important;
    }
    h3 {
        font-size: 22px!important;
    }
    h4 {
        font-size: 20px!important;
    }
    p.text, .bullet-list-container > ul {
        font-size: 16px!important;
    }
    /* Sur mobile, les titres et textes sont resize hard ci-dessus
       (h1=26px, h2=24px... p.text=16px). On contraint les icônes Before/After
       à max 1.2em (du texte parent) pour qu'elles suivent la résize. La taille
       desktop est conservée dans --w-icon-size (cf. BuilderService::buildIconHtml)
       — min() prend la plus petite des deux, donc :
         - desktop : min(50px, 1.2em) = 50px (taille user, intacte)
         - mobile  : min(50px, 1.2em de 26px = 31.2px) = 31.2px (capé) */
    .wolf-text-icon {
        font-size: min(var(--w-icon-size), 1.2em) !important;
    }
}

/* Quand un Text/Title a une iconAfter, on masque le <br> de fin du span
   contenteditable — sinon le saut de ligne final pousse l'icône à la
   ligne suivante. Le <br> reste dans le DOM (le curseur peut s'y positionner
   pendant l'édition), il est juste invisible visuellement.
   Règle hors @media car valable desktop ET mobile. */
[data-has-icon-after] span[contenteditable] > br:last-child {
    display: none !important;
}

/* parameters.text peut contenir un <p> hérité du contenteditable legacy
   (TinyMCE-like) — `display:block` par défaut, ce qui force iconBefore/
   iconAfter à passer à la ligne (l'icône est inline avant un bloc → break).
   On force ce <p> interne en inline pour qu'il flow avec les icônes. Ne
   touche pas aux <p> qui sont eux-mêmes des éléments builder Text/Title
   (ils ont la classe .text/.title sur eux-mêmes, pas en descendant). */
.text > p, .title > p,
.text > span p, .title > span p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    .popup-layout .popup {
        top: 80px;
        height: auto;
        min-width: 70%;
        max-width: 100%;
        overflow: auto;
        border-radius: 10px;
    }
    .popup-layout .popup .popup-close-btn {
        top: 0px;
        right: 15px;
        color: black;
        z-index: 100;
    }

    button .button-text {
        font-size: 16px!important;
    }
    button .button-subtext {
        font-size: 12px!important;
    }

    div.container {
        padding: 10px!important;
    }
    div[class*="col-"] {
        padding: 10px!important;
    }

    div#builder_message_preview {
        padding: 10px;
        font-size: 16px;
    }

    .video-unmute-button {
        width: 150px;
    }
    .video-sound-overlay {
        background-size: 100px;
    }
}

/* Builder editor — mode preview mobile (classe .mobile sur #builder-composer).
   Le viewport reste desktop donc le @media ci-dessus ne match pas, mais on
   veut quand même que les icônes Before/After matchent la taille du texte
   pour montrer fidèlement à l'utilisateur ce que sera le rendu mobile. */
#builder-composer.mobile .wolf-text-icon {
    font-size: min(var(--w-icon-size), 1.2em) !important;
}

/* Responsive Devices */
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    .popup-layout .popup {
        min-width: 100%;
    }
}

.hidden,
.modal-container.hidden {
    display: none;
}

/* Modal payment un progress*/
.modal-container {
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.75);
    width: 100%;
    z-index: 1;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}
.modal-container > div {
    border: 1px solid black;
    padding: 55px 45px;
    font-size: 24px;
    color: black;
    border-radius: 8px;
    background: white;
    width: 500px;
}
.modal-container > div i {
    font-size: 40px;
}
.modal-container > div i.fa-exclamation-circle {
    font-size: 100px;
}
.modal-container > div .button {
    background-color: #8e8efe;
    color: white;
    border-radius: 4px;
}


.modal-container#modal-upsell-payment-confirm > div .button,
.modal-container#modal-upsell-payment-form > div .button {
    color: white;
    border-radius: 20px;
    font-size: 16px;
    padding: 8px 30px 8px 30px;
    font-weight: 700;
}
.modal-container#modal-upsell-payment-confirm > div .button:hover,
.modal-container#modal-upsell-payment-form > div .button:hover {
    opacity: 0.8;
}
.modal-container#modal-upsell-payment-form #dropbtn {
    box-shadow: 4px 4px 4px #00000014!important;
    border-radius: .25em !important;
    border: 1px solid #ced4da !important;
    padding-left: 10px!important;
    padding-right: 10px!important;
    margin-top: 20px !important!important;
    font-size: 40px !important!important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.modal-container#modal-upsell-payment-form .dropbtn {
    display: flex;
    align-items: center;
}

.modal-container#modal-upsell-payment-form .form-control {
    height: 43px !important;
}
.modal-container#modal-upsell-payment-form label {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
}

@media (max-width: 575.98px) {
    .modal-container > div {
        width: 100%;
        padding: 40px;
    }
}

/* collapse css start */
.collapse-element {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 8%);
    transition: transform .3s ease,box-shadow .3s ease;
}
.collapse-element:hover {
    box-shadow: 0 8px 16px 10px rgb(0 0 0 / 8%);
    transform: translate3d(0,-4px,0);
}
.collapse-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.collapse-item-icon i.fa-angle-down {
    transition-duration: 500ms;
}
.collapse-item-title[aria-expanded="true"] .collapse-item-icon i.fa-angle-down {
    transform: rotate(-180deg);
}
.collapse.show {
    visibility: visible;
}
/* collapse css end */
/* ---- Carousel element ---- */
.wf-carousel {
    position: relative;
    max-width: 100%;
}
.wf-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    border-radius: inherit;
}
.wf-carousel-track::-webkit-scrollbar {
    display: none;
}
.wf-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}
.wf-carousel[data-spv="2"] .wf-carousel-slide { flex-basis: calc((100% - 12px) / 2); }
.wf-carousel[data-spv="3"] .wf-carousel-slide { flex-basis: calc((100% - 24px) / 3); }
.wf-carousel[data-spv="4"] .wf-carousel-slide { flex-basis: calc((100% - 36px) / 4); }
.wf-carousel-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: var(--wf-car-ratio, 16 / 9);
    border-radius: inherit;
}
.wf-carousel[data-fit="contain"] .wf-carousel-slide img { object-fit: contain; }
.wf-carousel-slide a { display: block; }
.wf-carousel[data-transition="fade"] .wf-carousel-track {
    display: grid;
    overflow: hidden;
}
.wf-carousel[data-transition="fade"] .wf-carousel-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.wf-carousel[data-transition="fade"] .wf-carousel-slide.active { opacity: 1; }
.wf-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 16px;
    user-select: none;
}
.wf-carousel-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.wf-carousel-arrow.prev { left: 12px; }
.wf-carousel-arrow.next { right: 12px; }
.wf-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}
.wf-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
.wf-carousel-dot.active { background: #ffffff; }

/* ── Menu element (mirrors Menu.vue — editor=public) ── */
[data-type="menu"] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; font-size: 15px; line-height: 1.2; -webkit-font-smoothing: antialiased; --wf-menu-accent: #4f46e5; --wf-menu-accent-2: #7c3aed; }
[data-type="menu"] .menu-toggle { display: none; }
[data-type="menu"] .menu-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; order: 0; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
[data-type="menu"] .menu-logo { max-height: 34px; width: auto; display: block; }
[data-type="menu"] .menu-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; order: 1; }
[data-type="menu"] .menu-link-li { display: inline-flex; }
/* Modern link: a soft rounded hover surface (Vercel/Linear style) rather than a dated underline. */
[data-type="menu"] .menu-link { color: inherit; opacity: 0.78; text-decoration: none; font: inherit; font-weight: 500; letter-spacing: -0.004em; cursor: pointer; white-space: nowrap; padding: 8px 13px; border-radius: 10px; transition: background-color .18s ease, opacity .18s ease, color .18s ease; }
[data-type="menu"] .menu-link:hover { opacity: 1; background: rgba(15,23,42,0.055); }
[data-type="menu"] .menu-actions { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
/* Modern CTA: subtle indigo→violet gradient with an always-on soft glow and a springy hover. */
[data-type="menu"] .menu-cta { background: linear-gradient(135deg, var(--wf-menu-accent-2), var(--wf-menu-accent)); color: #fff; padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.004em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(79,70,229,0.28); transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .15s ease; }
[data-type="menu"] .menu-cta:hover { transform: translateY(-1.5px); box-shadow: 0 10px 26px rgba(79,70,229,0.40); filter: brightness(1.05); }
[data-type="menu"] .menu-cta:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(79,70,229,0.30); }
[data-type="menu"] .menu-cta-secondary { background: rgba(15,23,42,0.05); color: inherit; box-shadow: none; border: 0; padding: 10px 18px; font-weight: 600; }
[data-type="menu"] .menu-cta-secondary:hover { background: rgba(15,23,42,0.09); box-shadow: none; filter: none; }
[data-type="menu"] .menu-burger { display: none; order: 3; cursor: pointer; font-size: 21px; line-height: 1; opacity: 0.85; padding: 4px; }
/* ── Dropdown sub-menus (a link carrying children) — pure-CSS hover reveal, modern card ── */
[data-type="menu"] .menu-has-children { position: relative; }
[data-type="menu"] .menu-caret { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.55; vertical-align: middle; }
[data-type="menu"] .menu-dropdown { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 210px; margin: 10px 0 0; padding: 7px; list-style: none; background: #fff; color: #0f172a; border: 1px solid rgba(15,23,42,0.07); border-radius: 14px; box-shadow: 0 14px 36px rgba(15,23,42,0.16); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
[data-type="menu"] .menu-dropdown::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; }
[data-type="menu"] .menu-has-children:hover > .menu-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
[data-type="menu"] .menu-dropdown .menu-link-li { display: block; }
[data-type="menu"] .menu-sublink { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 9px; opacity: 0.9; font-weight: 500; }
[data-type="menu"] .menu-sublink:hover { background: rgba(15,23,42,0.05); opacity: 1; }
[data-type="menu"] .menu-dropdown .menu-dropdown { top: -7px; left: 100%; margin: 0 0 0 8px; }
[data-type="menu"] .menu-dropdown .menu-dropdown::before { top: 0; bottom: 0; left: auto; right: 100%; width: 10px; height: auto; }
[data-type="menu"] .menu-dropdown .menu-caret { transform: rotate(-45deg); margin-left: 0; }
[data-type="menu"][data-style="classic"] .menu-links { margin-left: auto; }
[data-type="menu"][data-style="saas"] { justify-content: space-between; flex-wrap: nowrap; }
[data-type="menu"][data-style="saas"] .menu-links { flex: 1 1 auto; justify-content: center; }
[data-type="menu"][data-style="compact"] .menu-links { margin-left: auto; }
[data-type="menu"][data-style="centered"] { flex-direction: column; justify-content: center; gap: 10px; }
[data-type="menu"][data-style="centered"] .menu-links { justify-content: center; }
[data-type="menu"][data-style="split"] { display: grid; grid-template-columns: 1fr auto 1fr; }
[data-type="menu"][data-style="split"] .menu-brand { order: 1; justify-self: center; }
[data-type="menu"][data-style="split"] .menu-links { order: 0; justify-self: start; }
[data-type="menu"][data-style="split"] .menu-actions { order: 2; justify-self: end; }
[data-type="menu"][data-style="capture"] { justify-content: space-between; }
[data-type="menu"][data-style="capture"] .menu-links { display: none; }
[data-type="menu"][data-logo="center"]:not([data-style="split"]):not([data-style="centered"]) .menu-brand { margin-left: auto; margin-right: auto; }
[data-type="menu"][data-logo="center"]:not([data-style="split"]):not([data-style="centered"]) .menu-links { margin-left: 0; }
[data-type="menu"][data-logo="right"]:not([data-style="split"]) .menu-brand { order: 9; margin-left: auto; }
[data-type="menu"][data-logo="right"]:not([data-style="split"]) .menu-links { margin-left: 0; }
/* ── Themes (data-theme) — cross-cutting visual skin, independent of the layout. "solid" = the inline-styled default; glass / pill / dark take over the bar chrome via !important. ── */
[data-type="menu"][data-theme="glass"] { background: rgba(255,255,255,0.55) !important; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.35) !important; box-shadow: 0 6px 24px rgba(15,23,42,0.08) !important; }
[data-type="menu"][data-theme="pill"] { max-width: 1120px; margin: 14px auto !important; border-radius: 18px !important; border-bottom: 0 !important; box-shadow: 0 12px 34px rgba(15,23,42,0.14) !important; }
[data-type="menu"][data-theme="dark"] { background: #0f172a !important; color: #e2e8f0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important; }
[data-type="menu"][data-theme="dark"] .menu-link { opacity: 0.8; border-top-color: rgba(255,255,255,0.1); }
[data-type="menu"][data-theme="dark"] .menu-link:hover { opacity: 1; background: rgba(255,255,255,0.08); }
[data-type="menu"][data-theme="dark"] .menu-cta-secondary { background: rgba(255,255,255,0.1); color: #e2e8f0; }
[data-type="menu"][data-theme="dark"] .menu-cta-secondary:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 600px) {
    [data-type="menu"] { flex-wrap: wrap; justify-content: space-between; }
    [data-type="menu"] .menu-burger { display: inline-flex; }
    [data-type="menu"] .menu-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; order: 5; }
    [data-type="menu"] .menu-toggle:checked ~ .menu-links { display: flex; }
    [data-type="menu"] .menu-link-li { display: block; }
    [data-type="menu"] .menu-link { display: block; padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.08); }
        /* Dropdowns collapse to a static indented list (no hover on touch). */
        [data-type="menu"] .menu-dropdown { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0 0 0 14px; min-width: 0; background: transparent; color: inherit; }
        [data-type="menu"] .menu-dropdown::before { display: none; }
        [data-type="menu"] .menu-dropdown .menu-dropdown { left: 0; margin: 0 0 0 14px; }
        [data-type="menu"] .menu-caret { display: none; }
        [data-type="menu"] .menu-sublink { padding: 9px 0; border-top: 1px solid rgba(0,0,0,0.06); justify-content: flex-start; }
}