/* FILE: /v3/include/css/templates/template-accent.css
   Layer comune: rende piu visibile il colore primario del template.
*/

:root{
    --cm-nav-gradient:linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-primary-dark) 68%, var(--cm-secondary) 140%);
    --cm-nav-on:var(--cm-on-nav, var(--cm-on-primary, #fff));
    --cm-accent-soft:color-mix(in srgb, var(--cm-primary) 12%, var(--cm-card));
    --cm-accent-border:color-mix(in srgb, var(--cm-primary) 34%, var(--cm-line));
    --cm-accent-band-size:5px;
    --cm-button-bg:var(--cm-primary);
    --cm-button-bg-hover:var(--cm-primary-dark);
    --cm-button-border:var(--cm-primary);
    --cm-button-shadow:0 10px 22px color-mix(in srgb, var(--cm-primary) 18%, transparent);
}

body .cm-v2-navbar{
    background:var(--cm-nav-gradient);
    border-bottom-color:color-mix(in srgb, var(--cm-secondary) 42%, transparent);
    box-shadow:0 12px 30px color-mix(in srgb, var(--cm-primary-dark) 34%, transparent);
}

body .cm-v2-navbar::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:3px;
    background:linear-gradient(90deg, var(--cm-secondary), var(--cm-primary), var(--cm-secondary));
    opacity:.95;
}

body .cm-v2-navbar .navbar-brand,
body .cm-v2-navbar .nav-link,
body .cm-v2-navbar-fallback-icon{
    color:var(--cm-nav-on) !important;
}

body .cm-v2-navbar .navbar-brand img{
    background:var(--cm-card);
    border:2px solid color-mix(in srgb, var(--cm-nav-on) 42%, transparent);
}

body .cm-v2-navbar .nav-link:hover,
body .cm-v2-navbar .nav-item.active .nav-link{
    background:color-mix(in srgb, var(--cm-nav-on) 18%, transparent);
    color:var(--cm-nav-on) !important;
}

body .cm-v2-navbar .cm-nav-divider{
    background:color-mix(in srgb, var(--cm-nav-on) 32%, transparent);
}

body .cm-v2-navbar .navbar-toggler{
    border-color:color-mix(in srgb, var(--cm-nav-on) 36%, transparent);
    background:color-mix(in srgb, var(--cm-nav-on) 12%, transparent);
}

body .cm-v2-navbar .navbar-toggler-icon{
    filter:var(--cm-nav-toggler-filter, brightness(0) invert(1)) !important;
}

body .btn-cta,
body .btn-primary,
body .btn-success,
body .chip.active,
body .covers-wrap .cbtn.active,
body #date-buttons .btn.btn-primary,
body .cm-account-nav .list-group-item.active,
body .btn-add,
body .pmodal-add,
body .btn-checkout{
    background:var(--cm-button-bg) !important;
    border:1px solid var(--cm-button-border) !important;
    color:var(--cm-on-primary, #fff) !important;
    box-shadow:var(--cm-button-shadow);
    filter:none !important;
}

body .btn-cta:hover,
body .btn-primary:hover,
body .btn-success:hover,
body .cm-account-nav .list-group-item.active:hover,
body .btn-add:hover,
body .pmodal-add:hover,
body .btn-checkout:hover{
    background:var(--cm-button-bg-hover) !important;
    border-color:var(--cm-button-bg-hover) !important;
    color:var(--cm-on-primary, #fff) !important;
    filter:none !important;
    transform:translateY(-1px);
}

body .stepper .dot.active{
    background:var(--cm-button-bg);
    box-shadow:none;
}

body .catbar-wrap{
    background:linear-gradient(
        to bottom,
        color-mix(in srgb, var(--cm-primary) 16%, var(--cm-bg)) 0%,
        color-mix(in srgb, var(--cm-secondary) 10%, var(--cm-bg)) 100%
    );
    border-bottom:1px solid var(--cm-accent-border);
}

body .hero{
    border:1px solid var(--cm-accent-border);
    box-shadow:0 22px 52px color-mix(in srgb, var(--cm-primary-dark) 24%, transparent);
}

body .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(135deg, var(--cm-primary) 0%, transparent 38%, var(--cm-secondary) 100%);
    opacity:.26;
}

body .hero .inner{
    z-index:1;
}

body .hero .logo-lg{
    border-color:color-mix(in srgb, var(--cm-primary) 48%, var(--cm-hero-logo-border));
    box-shadow:0 18px 42px color-mix(in srgb, var(--cm-primary-dark) 30%, transparent);
}

body .booking-intro,
body .cm-account-card,
body .card,
.cm-box,
.cardx,
.p-card,
.sum-card,
body .emenu-file-wrap,
body .geo-box,
body .kpi .box,
body .wishlist-item,
body .movimenti-scroll-area{
    position:relative;
    border-color:var(--cm-accent-border);
}

body .booking-intro,
body .cm-account-card,
body .card,
.cm-box,
.cardx,
.p-card,
.sum-card,
body .emenu-file-wrap,
body .geo-box,
body .kpi .box,
body .wishlist-item{
    overflow:hidden;
}

body .cardx.cm-menu-shell{
    overflow:visible;
}

body .booking-intro::before,
body .cm-account-card::before,
body .card::before,
.cm-box::before,
.cardx::before,
.p-card::before,
.sum-card::before,
body .emenu-file-wrap::before,
body .geo-box::before,
body .kpi .box::before,
body .wishlist-item::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:var(--cm-accent-band-size);
    background:linear-gradient(90deg, var(--cm-primary), var(--cm-secondary));
    z-index:2;
    pointer-events:none;
}

body .booking-intro{
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cm-primary) 10%, transparent), transparent 44%),
        var(--cm-card);
}

body .cm-account-card,
body .card,
.cm-box,
.cardx,
.sum-card{
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cm-primary) 7%, transparent), transparent 72%),
        var(--cm-card);
}

body .cm-module-card,
body .cm-service,
body .summary,
body .badge-soft,
body .booking-intro-steps span{
    border-color:var(--cm-accent-border);
    background:var(--cm-accent-soft);
}

body .cm-module-icon,
body .cm-service-icon,
body .geo-ico,
body .event-chip,
body .booking-intro-meta{
    background:color-mix(in srgb, var(--cm-primary) 18%, var(--cm-card));
    border-color:var(--cm-accent-border);
    color:var(--cm-primary-dark);
}

body .title,
body h3.title,
body h4,
body .cat-name,
body .booking-step-label,
body .cm-account-title,
body .wishlist-title,
body .drawer-title,
body .pmodal-title{
    color:var(--cm-primary-dark) !important;
}

body .btn-outline-primary{
    border-color:var(--cm-primary);
    color:var(--cm-primary-dark);
}

body .btn-outline-primary:hover{
    background:var(--cm-primary);
    border-color:var(--cm-primary);
    color:var(--cm-on-primary, #fff);
}

body .btn-light{
    border-color:var(--cm-accent-border);
    background:color-mix(in srgb, var(--cm-primary) 7%, var(--cm-card));
    color:var(--cm-text);
}

body .form-control:focus{
    border-color:var(--cm-primary);
    box-shadow:0 0 0 .2rem color-mix(in srgb, var(--cm-primary) 18%, transparent);
}

@media (max-width: 767.98px){
    body .cm-v2-navbar .navbar-collapse{
        margin-top:10px;
        padding:10px;
        border-radius:var(--cm-radius-md);
        background:color-mix(in srgb, var(--cm-primary-dark) 72%, transparent);
    }
}
