/* Frontend NEW mode overrides (enabled via html[data-ui-mode="new"]) */

html[data-ui-mode="new"] {
    --imm-font-brand: "Biko", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --imm-font-payoff: "Sofia Pro", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --imm-font-sans: "General Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --imm-cyan-dark: #142e34;
    --imm-cyan-medium: #407087;
    --imm-cyan-light: #67d2df;
    --imm-yellow-identity: #fff57d;
    --imm-yellow-light: #eddd18;
}

/* Ensure fonts resolve from /admin/assets/dist/fonts */
@font-face {
    font-family: "Biko";
    src: url("/admin/assets/dist/fonts/biko/Biko_Regular.woff2") format("woff2"),
         url("/admin/assets/dist/fonts/Biko-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Biko";
    src: url("/admin/assets/dist/fonts/biko/Biko_Bold.woff2") format("woff2"),
         url("/admin/assets/dist/fonts/Biko-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sofia Pro";
    src: url("/admin/assets/dist/fonts/sofia-pro/SofiaPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("/admin/assets/dist/fonts/general-sans/GeneralSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("/admin/assets/dist/fonts/general-sans/GeneralSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("/admin/assets/dist/fonts/general-sans/GeneralSans-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html[data-ui-mode="new"] body,
html[data-ui-mode="new"] button,
html[data-ui-mode="new"] input,
html[data-ui-mode="new"] select,
html[data-ui-mode="new"] textarea {
    font-family: var(--imm-font-sans);
   /* color: #000000;*/
}

html[data-ui-mode="new"] .navbar {
    background: var(--imm-cyan-light);
    border-bottom: 1px solid rgba(20, 46, 52, 0.14);
}

html[data-ui-mode="new"] .nav-links a,
html[data-ui-mode="new"] .bread-element a,
html[data-ui-mode="new"] .main-breadcrumbs {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .nav-button,
html[data-ui-mode="new"] .nav-button-mobile {
    background: var(--imm-yellow-identity);
    color: var(--imm-cyan-dark) !important;
    border: none !important;
    border-radius: var(--imm-radius) !important;
    padding: 12px 28px;
}

html[data-ui-mode="new"] .nav-button-mobile {
    padding: 16px 24px;
}

html[data-ui-mode="new"] h1,
html[data-ui-mode="new"] .h1-element,
html[data-ui-mode="new"] .h3-element {
    font-family: var(--imm-font-brand);
    /*color: var(--imm-cyan-dark) !important;*/
}
/*
html[data-ui-mode="new"] p {
    color: #ffffff;
}
*/
html[data-ui-mode="new"] .logo img {
    height: 46px;
    width: auto;
}

html[data-ui-mode="new"] footer {
    background: #f9fcfc;
    border-top: 1px solid rgba(20, 46, 52, 0.14);
}

html[data-ui-mode="new"] .footer-logo-new {
    width: 188px;
    max-width: 100%;
    height: auto;
    display: block;
}

html[data-ui-mode="new"] .footer-element-h4,
html[data-ui-mode="new"] .footer-element-h6_membership,
html[data-ui-mode="new"] .item-nav-links-footer a,
html[data-ui-mode="new"] .contact-item {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] hr {
    border-color: var(--imm-cyan-medium) !important;
}

.category-posts {
    background: var(--imm-yellow-identity);
    color: var(--imm-cyan-dark) !important;
    border: none !important;
    border-radius: var(--imm-radius) !important;
    width: fit-content;
    padding: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* —— Scheda immobile: CTA / form / widget (allineati a login brand) —— */
html[data-ui-mode="new"] .btn-call,
html[data-ui-mode="new"] .btn-call-sticky,
html[data-ui-mode="new"] .buyer-alert-submit,
html[data-ui-mode="new"] .btn-submit,
html[data-ui-mode="new"] .btn-calc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--imm-yellow-identity) !important;
    color: var(--imm-cyan-dark) !important;
    border: none !important;
    border-radius: var(--imm-radius, 0.5rem) !important;
    font-family: var(--imm-font-sans), inherit;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(242, 227, 71, 0.4);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    cursor: pointer;
}

html[data-ui-mode="new"] .btn-call:hover,
html[data-ui-mode="new"] .btn-call-sticky:hover,
html[data-ui-mode="new"] .buyer-alert-submit:hover,
html[data-ui-mode="new"] .btn-submit:hover,
html[data-ui-mode="new"] .btn-calc:hover {
    background: var(--imm-yellow-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(242, 227, 71, 0.5);
    filter: none;
}

html[data-ui-mode="new"] .btn-call:active,
html[data-ui-mode="new"] .btn-call-sticky:active,
html[data-ui-mode="new"] .buyer-alert-submit:active,
html[data-ui-mode="new"] .btn-submit:active,
html[data-ui-mode="new"] .btn-calc:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(242, 227, 71, 0.35);
}

html[data-ui-mode="new"] .btn-outline {
    background: #fff !important;
    color: var(--imm-cyan-dark) !important;
    border: 1.5px solid var(--imm-cyan-dark) !important;
    border-radius: var(--imm-radius, 0.5rem) !important;
    font-family: var(--imm-font-sans), inherit;
    font-weight: 700 !important;
    box-shadow: var(--imm-shadow-sm, 0 1px 2px rgba(20, 46, 52, 0.06));
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

html[data-ui-mode="new"] .btn-outline:hover {
    background: rgba(103, 210, 223, 0.12) !important;
    border-color: var(--imm-cyan-medium) !important;
    transform: translateY(-1px);
}

html[data-ui-mode="new"] .btn-outline svg path {
    fill: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .btn-outline .txt-btn {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .contact-widget,
html[data-ui-mode="new"] .ext-lead-box,
html[data-ui-mode="new"] .mortgage-grid {
    background: #f7fbfc !important;
    border: 1px solid rgba(20, 46, 52, 0.12) !important;
    border-radius: var(--imm-radius-lg, 0.75rem) !important;
    box-shadow: var(--imm-shadow-sm, 0 1px 2px rgba(20, 46, 52, 0.06));
}

html[data-ui-mode="new"] .contact-widget h3,
html[data-ui-mode="new"] .ext-lead-title,
html[data-ui-mode="new"] .ext-lead-eyebrow,
html[data-ui-mode="new"] .agent-phone {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .ext-lead-sub,
html[data-ui-mode="new"] .ext-consent {
    color: var(--imm-cyan-medium) !important;
}

html[data-ui-mode="new"] .agent-box {
    border: 1px solid rgba(20, 46, 52, 0.14) !important;
    border-radius: var(--imm-radius, 0.5rem) !important;
    background: #fff !important;
}

html[data-ui-mode="new"] .contact-form input,
html[data-ui-mode="new"] .contact-form textarea,
html[data-ui-mode="new"] .contact-form select,
html[data-ui-mode="new"] .mortgage-form input,
html[data-ui-mode="new"] .mortgage-form select,
html[data-ui-mode="new"] .ext-interest-form input[type="text"],
html[data-ui-mode="new"] .ext-interest-form input[type="email"] {
    border: 1px solid rgba(20, 46, 52, 0.18) !important;
    border-radius: var(--imm-radius, 0.5rem) !important;
    font-family: var(--imm-font-sans), inherit;
}

html[data-ui-mode="new"] .contact-form input:focus,
html[data-ui-mode="new"] .contact-form textarea:focus,
html[data-ui-mode="new"] .mortgage-form input:focus,
html[data-ui-mode="new"] .mortgage-form select:focus,
html[data-ui-mode="new"] .ext-interest-form input[type="text"]:focus,
html[data-ui-mode="new"] .ext-interest-form input[type="email"]:focus {
    outline: none !important;
    border-color: var(--imm-cyan-medium) !important;
    box-shadow: var(--imm-focus-ring, 0 0 0 3px rgba(103, 210, 223, 0.45));
}

html[data-ui-mode="new"] .circle {
    border-color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .legend-mutuo {
    background: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .legend-anticipo {
    background: var(--imm-yellow-light) !important;
}

html[data-ui-mode="new"] .bottom-contact-widget {
    background: #f7fbfc !important;
    border-top: 1px solid rgba(20, 46, 52, 0.12);
    box-shadow: 0 -8px 24px rgba(20, 46, 52, 0.08);
}

html[data-ui-mode="new"] .ext-lead-box--primary {
    border-color: var(--imm-cyan-light) !important;
}

html[data-ui-mode="new"] .ext-consent a,
html[data-ui-mode="new"] .ext-interest-form label {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .ext-consent input {
    accent-color: var(--imm-cyan-dark);
}

html[data-ui-mode="new"] .buyer-alert-submit:disabled {
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

html[data-ui-mode="new"] .absolute-btn-foto,
html[data-ui-mode="new"] .absolute-btn-vt {
    background: var(--imm-cyan-dark) !important;
    color: #fff !important;
    border-radius: var(--imm-radius, 0.5rem) !important;
    font-weight: 600;
    box-shadow: var(--imm-shadow, 0 4px 16px rgba(20, 46, 52, 0.08));
}

html[data-ui-mode="new"] .backto-annunci-span,
html[data-ui-mode="new"] .condividi-annunci-span {
    color: var(--imm-cyan-dark) !important;
}

html[data-ui-mode="new"] .icon {
    stroke: var(--imm-cyan-dark) !important;
}

/* —— Pittogramma laterale in hero: foto SOLO nella mask —— */
html[data-ui-mode="new"] {
    --imm-mark-mask: url("/admin/assets/assets-design-system/Pittogramma_IMMOVARE_mask.svg");
    --imm-mark-mono: url("/admin/assets/assets-design-system/Pittogramma_IMMOVARE_monocolore.svg");
}

html[data-ui-mode="new"] .imm-mark-stage--hero {
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
}

html[data-ui-mode="new"] .imm-mark-stage--hero .imm-mark-watermark {
    display: none;
}

html[data-ui-mode="new"] .imm-mark-stage--hero .imm-mark-photo {
    display: block;
    width: 100%;
    max-width: 420px;
    min-height: 280px;
    aspect-ratio: 226.77 / 197.05;
    background-color: transparent;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--imm-mark-mask);
    mask-image: var(--imm-mark-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

html[data-ui-mode="new"] .hero-section .main-masthead {
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
}

html[data-ui-mode="new"] .hero-section .masthead-dx {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
}

/* Home: gradiente cyan chiaro — foto solo nel pittogramma */
html[data-ui-mode="new"] .hero-section.home {
    background-image: none !important;
    background-color: #adf2f7 !important;
    background: linear-gradient(90deg, #67d2df 0%, #adf2f7 45%, #ffffff 100%) !important;
}

/* Altre hero: fondo cyan scuro + pittogramma laterale (niente foto full-bleed) */
/*
html[data-ui-mode="new"] .hero-section.voglio-vendere,
html[data-ui-mode="new"] .hero-section.voglio-acquistare,
html[data-ui-mode="new"] .hero-section.blog,
html[data-ui-mode="new"] .hero-section.guide {
    background-image: none !important;
    background-color: var(--imm-cyan-dark, #142e34) !important;
    background: var(--imm-cyan-dark, #142e34) !important;
    min-height: 420px;
}*/

html[data-ui-mode="new"] .hero-section.voglio-vendere .h1-element,
html[data-ui-mode="new"] .hero-section.voglio-vendere .h3-element,
html[data-ui-mode="new"] .hero-section.voglio-acquistare .h1-element,
html[data-ui-mode="new"] .hero-section.voglio-acquistare .h3-element{
    color: var(--imm-neutral-dark) !important;
}
html[data-ui-mode="new"] .hero-section.blog .h1-element,
html[data-ui-mode="new"] .hero-section.blog .h3-element,
html[data-ui-mode="new"] .hero-section.guide .h1-element,
html[data-ui-mode="new"] .hero-section.guide .h3-element {
    color: #ffffff !important;
}

/* Collasso masthead → nascondi pittogramma */
@media (max-width: 1275px) {
    html[data-ui-mode="new"] .imm-mark-stage--hero,
    html[data-ui-mode="new"] .hero-section .masthead-dx {
        display: none !important;
    }

    html[data-ui-mode="new"] .hero-section .masthead-sx {
        width: 100%;
    }
}