/*
 * MAIN CSS PWB BY WEBDESIGNLAB.IT
 *
 *
*/

@media (max-width: 1025px) {
    #subtitle {
        font-size: 25px !important;
    }
}

.vt_bello {
    /* --tw-bg-opacity: 1; */
    background-color: rgb(173 242 247 / var(--tw-bg-opacity, 1));
    background-image: url('../images/hero_section.png') !important;
    background-position: bottom right !important;
    background-size: 72%;
    background-repeat: no-repeat !important;
}

.bg-primary-dark {
    /* --tw-bg-opacity: 1; */
    background-color: rgb(173 242 247 / var(--tw-bg-opacity, 1));
    background-image: url('../images/hero_section_blog.png') !important;
    background-position: bottom right !important;
    background-size: 72%;
    background-repeat: no-repeat !important;
}

@media (max-width: 1252px) {
    .vt_bello {
        background-image: none !important;
        background-size: 0 !important;
        /* opzionale */
        background-position: unset !important;
        /* opzionale */
    }
}

.bg-secondary-light {
    --tw-bg-opacity: 1;
    background-color: #fcfbd9;
    background-image: url('../images/hero_section_dos.png') !important;
    background-position: bottom right !important;
    background-size: 72%;
    background-repeat: no-repeat !important;
}

@media (max-width: 1252px) {
    .bg-secondary-light {
        background-image: none !important;
        background-size: 0 !important;
        /* opzionale */
        background-position: unset !important;
        /* opzionale */
    }
}

.vt_bello {
    height: 100vh !important;
    max-height: 800px !important;
}

@media (max-width: 1252px) {
    .main-title-subtitle {
        width: 100% !important;
    }

    .vt_bello {
        height: 100vh !important;
        max-height: 600px !important;
    }

}

@media (max-width: 1252px) and (orientation: landscape) {
    .new-line {
        display: none !important;
    }
}

/*
.vt_bello.bg-primary-dark {
  background-image: none !important;
}
  */
/*
  .h-48 {
    height: auto !important;
}
    */
.d4n1um4s0l0ff1 {
    z-index: 999;
}

select {
    -webkit-appearance: none;
    /* rimuove lo stile nativo Safari */
    -moz-appearance: none;
    appearance: none;

    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 32px 8px 12px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
}

select:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.2);
}

#guides img.h-48 {
    height: 17rem !important;
}

:host ::ng-deep #guides .h-48 {
    height: 17rem !important;
}

#guides .h-48.h-48.h-48 {
    height: 22rem !important;
}

.guide-btn-container {
    margin-top: 57px;
}

@media (max-width: 1252px) {
    #guides .h-48.h-48.h-48 {
        height: 13rem !important;
    }
}

@media (max-width: 768px) {
    #guides .h-48.h-48.h-48 {
        height: 25rem !important;
    }

    .main-component-subscription-plan {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        gap: 25px;
    }

    .accordion-piano {
        min-height: 272px !important;
        width: 100% !important;
    }

}

@media (max-width: 562px) {
    #guides .h-48.h-48.h-48 {
        height: 25rem !important;
    }

    .object-cover {
        object-fit: inherit !important;
    }

    .object-center {
        object-position: inherit !important;
    }
}

@media (max-width: 550px) {
    .main-component-subscription-plan {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        gap: 25px;
    }

    .accordion-piano {
        min-height: 272px !important;
    }
}

.title-jflw {
    display: none;
}
/*
.janusflow-int-id {
    display: none;
}

.janusflow-ext-id {
    display: none;
}
*/
/*
* SCROLL PAGINA VOGLIO VENDERE

#scroll-hint-arrow {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.75);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  z-index: 9999;
  cursor: pointer;
  animation: arrow-wiggle 1.2s infinite ease-in-out;
  transition: opacity .3s ease;
}

@keyframes arrow-wiggle {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

#scroll-hint-arrow.hidden {
  opacity: 0;
  pointer-events: none;
}
*/
/*
* CALCOLATORE PAGINA VOGLIO VENDERE
*/
.container-calcolatore {
    background: #f4f4f4;
    border-radius: 8px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-width: 1560px;
    width: 100%;
}

/* --- Sezione sinistra --- */
.left {
    /* flex: 2; */
    width: 50%;
}

h3 {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.plan {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

.plan button {
    flex: 1;
    padding: 14px 0;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #fff;
    transition: all 0.2s ease-in-out;
    max-width: 247px;
}

.plan button.active {
    background: #ece81a;
    border: 1px solid #3c3d3e;
    position: relative;
}

/*
        .plan button.active::after {
            content: "✔";
            position: absolute;
            right: 10px;
            top: 8px;
            font-size: 1rem;
            color: #2e2e2e;
        }
            */
.plan button.active::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff' > <path fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /> </svg>");
    background-color: #3c3d3e;
    border-radius: 100%;

}

/* --- Campi input --- */
.inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
}

/*
        .input-box {
            position: relative;
        }

        .input-box input[type="number"] {
            width: 100%;
            padding: 10px 35px 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            text-align: right;
            max-width: 200px;
        }

        .input-box span {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #444;
            font-weight: 500;
        }
            */
.input-box {
    position: relative;
    width: 247px !important;
    min-width: 247px !important;
    max-width: 247px !important;
}

.input-box input[type="number"] {
    width: 100% !important;
    padding: 10px 35px 10px 10px;
    /* spazio per € o % */
    box-sizing: border-box;
}

.input-box span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-weight: 500;
    color: #444;
}

input[type="range"] {
    width: 100%;
    margin-top: 8px;
    accent-color: #2e2e2e;
    cursor: pointer;
}

/* Imposta larghezza minima e massima a 200px per tutti gli input */
.input-group .input-box input[type="number"],
.input-group input[type="range"] {
    width: 247px !important;
    min-width: 247px !important;
    max-width: 247px !important;
}

/* --- Sezione destra --- */
.right {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
}

.arrow {
    font-size: 2rem;
    color: #444;
    margin-bottom: 10px;
    width: 35%;
    display: flex;
    justify-content: center;
}


.result-box {
    background: #aef3ff;
    padding: 20px;
    display: inline-block;
    margin-bottom: 15px;
    min-width: 220px;
}

.result-box h2 {
    margin: 0;
    font-size: 1.9rem;
    color: #003e49;
    font-weight: 700;
}

.result-box small {
    color: #444;
}

.select-btn {
    background: #ece81a;
    border: 1px solid #3c3d3e;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.select-btn:hover {
    background: #fff37e;
}

.select-btn svg {
    display: inline;
}



@media (max-width: 1326px) {
    .container-calcolatore {
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
    }

    .inputs {
        grid-template-columns: 1fr;
    }

    .right {
        text-align: center;
    }

    .plan {
        display: flex;
        gap: 12px;
        margin-bottom: 25px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .plan button {
        flex: 1;
        padding: 14px 0;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid #ccc;
        background: #fff;
        transition: all 0.2s ease-in-out;
        max-width: 247px;
        width: 100%;
    }

    .container-title-p h2 p {
        margin-top: 0;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 20px;

    }

    .select-btn svg {
        display: none;
    }
}


.result-container {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.container-title-p {
    text-align: center;
    padding: 20px;
}

/* === MOBILE LAYOUT (≤ 768px) === */
@media (max-width: 1326px) {



    .container-calcolatore {
        flex-direction: column;
        padding: 25px;
        gap: 30px;
        max-width: 95%;
        text-align: center;
    }

    .left,
    .right,
    .result-container {
        width: 100% !important;
        max-width: 100%;
        flex-direction: column;
    }

    /* Inputs in colonna */
    .inputs {
        grid-template-columns: 1fr !important;
        justify-items: center;
        width: 100%;
    }

    .input-group {
        align-items: center;
        width: 100%;
    }

    .input-box {
        margin: 0 auto;
    }

    /* Freccia centrale */
    .arrow {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 25px 0;
        transform: rotate(90deg);
    }

    /* Area risultato */
    .result-container {
        align-items: center;
        text-align: center;
        gap: 10px;
        width: 100%;
    }

    .result-box {
        width: 80%;
        max-width: 260px;
    }

    /* Pulsante selezione */
    .select-btn {
        width: 100%;
        padding: 12px 35px;
        margin-top: 10px;
    }

    .main-container-piano-select {
        max-width: 247px;
    }
}

/*
        .badge-banner-immovare {
  position: absolute;
  top: 12px;
  left: -45px;
  transform: rotate(-45deg);
  background-color: #2E5D63;
  padding: 6px 50px;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);

  display: flex;
  align-items: center;
  justify-content: center;
}
*/
.badge-banner-immovare {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* transform: rotate(
1deg); */
    background-color: #66d2df;
    padding: 6px 50px;
    z-index: 20;
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.25); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-inner {
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-quotes {
    font-size: 18px;
    font-weight: bold;
    color: #ffffffd0;
    margin-right: 3px;
}

.badge-text {
    font-size: 13px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dynamic-badge-banner {
    position: absolute;
    top: 10px;
    left: -10px;
    background: #ffd300;
    padding: 6px 14px;
    font-weight: bold;
    border-radius: 6px;
    rotate: -6deg;
    z-index: 50;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.dynamic-badge-banner .badge-text {
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
}
/*
.no-click {
    pointer-events: none !important;
    opacity: 0.55;
    /* facoltativo, per rendere visivo 
}
*/
/* Safari / iOS: disattiva completamente no-click */
@supports (-webkit-touch-callout: none) {
  .no-click {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}
.modale-gallery{
    z-index: 99999999999;
}