/* 2026 chrome (style.css, site.css, bs5-shim.css, user-area.css, legacy-page.css)
   with rem converted to px for pages on the legacy Bootstrap 3 stack.
   GENERATED by bin/build-v2-legacy-css.py: do not edit by hand. */
/* ---- style.css ---- */
  :root{
    --bg: #F7F6F4;
    --card-bg: #FFFFFF;
    --text-dark: #2A2A2A;
    --text-muted: #71717A;
    --accent-gold: #E6BD3E;
    --gold: #E6BD3E;
    --accent-blue: #439BDE;
    --blue: #439BDE;
    --blue-light: #DBEDFB;
    --white: #fff;
    --hover: #1A7AC4;
  }

  body, html{
    background: var(--bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
  }

  body{
    overflow-x: hidden;
  }

  a{
    transition: all 0.5s ease;
  }

  a:hover{
    transition: all 0.5s ease;
    color: var(--hover);
  }

  .stagger-in__el {
    opacity: 0;
  }

 .btn-login:hover, .btn-search-psy:hover, .btn-see-all:hover{
    background: var(--hover);
    color: var(--white);
    transition: all 0.5s ease;
  }

  .link-register:hover{
    color: var(--hover);
    transition: all 0.5s ease; 
  }
  .link-register:hover img{
    filter: invert(42%) sepia(86%) saturate(4985%) hue-rotate(189deg) brightness(93%) contrast(80%);  
    }

  /* ---------- HEADER ---------- */

  .dropdown-menu{
    border: none;
    border-radius: 20px;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,0.15);
    padding: 15px 10px !important;
    border: 1px solid var(--gold);
    top: 10px !important;
  }

  .dropdown-toggle:after{
    background: url(../../images/v2/arrow-menu.svg) no-repeat;
    height: 6px;
    width: 10px;
    display: block;
    content: "";
    border: none;
  }

  .dropdown-menu li a{
    padding: 8px 8px;
  }

  .dropdown-menu li a:hover{
    border-radius: 10px;
    background: var(--blue);
    color: var(--white);
  }

  #scroll-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.8s ease-in-out; 
    z-index: 1000;
    background: var(--white);
  }

  #scroll-header.scrolled {
    opacity: 1;
    transform: translateY(0);
  }

  .site-header{
    background: #fff;
    padding: 0;
    z-index: 20;
    border-bottom: 1px solid #EEE;
    font-family: 'Poppins', sans-serif;
    position: relative;
  }

  .brand-logo{
    display: flex;
    align-items: baseline;
    gap: 5.6px;
    text-decoration: none;
  }
  .brand-logo .script{
    font-size: 27.2px;
    color: var(--blue);
    line-height: 1;
  }
  .brand-logo .online-tag{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15.2px;
    color: var(--blue);
  }

  .main-nav ul{
    gap: 35.2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .main-nav a{
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 400;
    font-size: 16.32px;
    display: flex;
    align-items: center;
    gap: 4.8px;
    transition: all 0.5s ease;
  }

  .main-nav a:hover{
    transition: all 0.5s ease;
    color: var(--hover);
  }
  .main-nav a svg{ width: 16px; height: 16px; }

  .header-actions{
    display: flex;
    align-items: center;
    gap: 25.6px;
  }

  @media (max-width: 991px){
    .header-actions{
      gap: 16px;
    }
  }

  .link-register{
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6.4px;
    transition: all 0.5s ease-in-out; 
  }
  .link-register svg{ width: 18px; height: 18px; }

  .btn-login{
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11.2px 27.2px;
    font-weight: 500;
    font-size: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
    transition: all 0.5s ease;
  }
  .btn-login:hover{ transform: translateY(-2px); }

  .burger-btn{
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .burger-btn span{
    width: 24px;
    height: 2.5px;
    background: var(--text-dark);
    border-radius: 2px;
  }


  .hamburger-btn {
    position: relative;
    z-index: 2000;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px 4px;
  }

  .line {
    width: 100%;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transform-origin: center;
  }

  /* Menu Mobile Full-Screen */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--blue);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Stato iniziale: nascosto */
    visibility: hidden;
    clip-path: circle(0% at top right); /* Effetto apertura a cerchio */
  }

  .mobile-menu .link-register{
    color: var(--white);
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
  }

  .mobile-menu .btn-login{
    background: var(--white);
    color: var(--blue);
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .menu-item {
    color: #fff;
    text-align: center;
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    opacity: 0; 
    transition: all 0.5s ease;
  }
  .menu-item:hover{
    color: var(--gold);
    transition: all 0.5s ease;
  }

  /* ---------- HERO ---------- */
  .hero-section{
    position: relative;
    padding: 32px 16px 0px 16px;
  }

  .hero-inner{
    max-width: 1360px;
    margin: 0 auto;
    background: #fff;
    border-radius: 40px;
    padding: 40px 56px 56px 56px;
    position: relative;
  }

  @media (max-width: 991px){
    .hero-section{
      padding: 0;
    }
    .hero-inner{
      border-radius: 0px;
    }
  }

  .hero-badge{
    gap: 9.6px;
    margin-bottom: 22.4px;
  }
  .hero-badge .check-circle{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .hero-badge .check-circle svg{
    width: 15px;
    height: 15px;
    color: #fff;
  }
  .hero-badge-text{
    font-weight: 500;
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: var(--text-dark);
  }

  .avatar-stack{
    display: flex;
  }

  @media (max-width: 576px){
    .avatar-stack{
      margin-top: 16px;
    }
  }


  .avatar-stack img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -12px;
  }
  .avatar-stack img:first-child{ margin-left: 0; }
  .avatar-stack .count-badge{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 600;
    font-size: 12.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-left: -12px;
  }

  .hero-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(38.4px, 4.2vw, 54.4px);
    line-height: 1.24;
    margin-bottom: 24px;
  }
  .hero-title .blue-text{
    color: var(--blue);
  }

  .hero-title .underline-wrapper {
    position: relative;
    display: inline-block;
  }


  .hero-title .custom-underline {
    position: absolute;
    left: -2%;
    bottom: -0.22em; /* Mantiene la distanza corretta proporzionale al testo */
    width: 104%;     /* Leggermente più larga della parola "Non" */
    height: 0.36em;  /* Spessore proporzionale al font-size */
    overflow: visible;
    pointer-events: none;
  }


  .circled-word{
    position: relative;
    display: inline-block;
  }
  .circled-word svg{
    position: absolute;
    left: -12%;
    top: -22%;
    width: 130%;
    height: 155%;
    pointer-events: none;
  }
  .circled-word span{ position: relative; }

  .hero-subtitle{
    font-size: 19.2px;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 560px;
    margin-bottom: 40px;
  }
  .hero-subtitle strong{ color: var(--text-dark); }

  /* review card */
  .review-card{
    background: var(--blue-light);
    border-radius: 22px;
    padding: 28px 32px;
    max-width: 560px;
    position: relative;
  }

  @media (max-width: 991px){
      .hero-subtitle, .review-card{
        max-width: 100%;
      }
  }

  .stars{
    color: #F5A623;
    font-size: 17.6px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14.4px;
  }
  .stars .score{
    color: var(--text-muted);
    font-weight: 600;
    font-size: 15.2px;
    margin-left: 6.4px;
  }
  .review-text{
    font-size: 16.8px;
    color: var(--text-dark);
    margin-bottom: 17.6px;
    line-height: 1.5;
  }
  .review-meta{
    display: flex;
    align-items: flex-start;
    gap: 9.6px;
    color: var(--text-muted);
    font-size: 15.2px;
  }
  .review-meta img{
    margin-top: 2px;
  }
  .review-meta svg{
    width: 16px;
    height: 16px;
    color: var(--blue);
  }
  .review-nav{
    position: absolute;
    right: 27.2px;
    bottom: 0px;
    display: flex;
    gap: 9.6px;
    z-index: 9;
  }
  .review-nav button{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,0.15);
    color: var(--text-dark);
    cursor: pointer;
    position: relative;
  }
  .review-nav button svg{ width: 16px; height: 16px; }

  @media (max-width: 991px){
    .review-nav{
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 16px;
    }
  }

  /* trust row */
  .trust-row{
    margin-top: 51.2px;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  .trust-item{
    border-right: 1px solid #EEE;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 260px;
  }
  .trust-item:last-child{
    border-right: none;
  }
  @media (max-width: 991px){
    .trust-item {
      border-right: none;
    }
  }
  .trust-icon{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .trust-icon svg{
    width: 24px;
    height: 24px;
    color: var(--blue);
  }
  .trust-title{
    font-weight: 600;
    color: var(--text-dark);
    font-size: 17.6px;
    margin-bottom: 3.2px;
  }
  .trust-text{
    color: var(--text-muted);
    font-size: 15.68px;
    line-height: 1.4;
  }

  @media (max-width: 991px){
    .trust-row{
      padding-top: 0;
      padding-bottom: 16px;
    }
  }

  /* floating search card */
  .search-card-wrap{
    position: relative;
  }
  .deco-gold{
    position: absolute;
    width: 130px; height: 130px;
    background: var(--gold);
    border-radius: 50%;
    top: -24px;
    left: -48px;
    z-index: 0;
  }
  .deco-blue-big{
    position: absolute;
    width: 180px; height: 180px;
    background: var(--blue-light);
    border-radius: 50%;
    top: 128px;
    right: -56px;
    z-index: 0;
    animation: float3 4s ease-in-out infinite alternate;
  }
  .deco-blue-small{
    position: absolute;
    width: 110px; height: 110px;
    background: var(--blue-light);
    border-radius: 50%;
    bottom: -48px;
    left: 16px;
    z-index: 0;
    animation: float2 4s ease-in-out infinite alternate;
  }
  .deco-gold-small{
    position: absolute;
    width: 90px; height: 90px;
    background: var(--gold);
    border-radius: 50%;
    top: 192px;
    right: -40px;
    z-index: 0;
    animation: float2 3s ease-in-out infinite alternate;
  }

  .search-card{
    background: #fff;
    border-radius: 28px;
    padding: 38.4px 35.2px;
    box-shadow: 4px 8px 60px -6px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1;
    font-family: 'Poppins', sans-serif;
  }
  .search-card-title{
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 4.8px;
  }
  .search-card-subtitle{
    color: var(--text-muted);
    font-size: 16.32px;
    margin-bottom: 25.6px;
  }

  .modality-toggle{
    display: flex;
    gap: 28.8px;
    margin-bottom: 25.6px;
    color: var(--text-muted);
  }
  .modality-option{
    display: flex;
    align-items: center;
    gap: 8.8px;
    font-weight: 400;
    font-size: 16.32px;
    cursor: pointer;
  }
  .modality-option input{
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
  }

  .search-select-wrap{
    position: relative;
    margin-bottom: 17.6px;
  }
  .search-select-wrap select{
    width: 100%;
    padding: 16px 20.8px;
    border-radius: 14px;
    border: none;
    background: #F7F6F4;
    font-size: 16.32px;
    color: var(--text-muted);
    appearance: none;
    cursor: pointer;
  }
  .search-select-wrap::after{
    content: "";
    position: absolute;
    right: 20.8px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.2px solid #555;
    border-bottom: 2.2px solid #555;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .btn-search-psy{
    width: 100%;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 17.6px;
    font-weight: 600;
    font-size: 17.28px;
    margin: 9.6px 0 19.2px 0;
    transition: transform .3s ease;
    transition: all 0.5s ease;
  }
  .btn-search-psy:hover{ 
    transition: transform .3s ease;
    transition: all 0.5s ease;
    transform: translateY(-2px);  
  }

  .search-card-footer{
    text-align: center;
    color: var(--text-muted);
    font-size: 15.68px;
    margin-bottom: 0;
  }
  .search-card-footer a{
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
  }

  .search-card-footer a:hover{
    color: var(--hover);
  }

  @media (max-width: 991px){
    .hero-inner{ padding: 24px 24px; }
    .search-card-wrap{ margin-top: 0px; }
    .main-nav{ display: none; }
  }

  /*********************/

  .steps-section{
    padding: 96px 16px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .steps-section .arrow-3{
    bottom: -15%;
    left: 25%;
    width: auto;
  }

  .steps-section .arrow-4{
    top: 2%;
    right: 27%;
    width: auto;
  }

  .eyebrow{
    letter-spacing: 0.15em;
    font-size: 13.6px;
    font-weight: 600;
    color: #444;
    text-align: center;
  }

  .section-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 5vw, 51.2px);
    text-align: center;
    margin-top: 8px;
  }

  .section-subtitle{
    text-align: center;
    color: var(--text-muted);
    font-size: 18.4px;
    max-width: 620px;
    margin: 16px auto 56px auto;
    line-height: 1.5;
  }

  .steps-row{
    position: relative;
  }

  .step-card{
    background: var(--card-bg);
    border-radius: 28px;
    padding: 40px 32px;
    text-align: center;
    /*box-shadow: 0 25px 60px -20px rgba(0,0,0,0.12);*/
  }

  .step-card.center{
    transform: translateY(40px);
  }

  .step-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20.8px;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .step-text{
    color: var(--text-muted);
    font-size: 15.2px;
    line-height: 1.55;
    max-width: 320px;
    margin: 0 auto;
  }

  /* hand-drawn circle underline behind key phrase */
  .circled{
    position: relative;
    display: inline-block;
    white-space: normal;
  }
  .circled img{
    position: absolute;
    left: -8%;
    top: -28%;
    z-index: 0;
    pointer-events: none;
    width: 100px;
  }
  .circled span{
    position: relative;
    z-index: 1;
  }

  .circled.one img{
    left: -6%;
    top: -24%;
    width: 90px;
  }

  .circled.two img{
    left: -13%;
    top: -15%;
    width: 90px;
  }

  .circled.three img{
    left: -5%;
    top: -11%;
  }

  /* connecting arrows (desktop only) */
  .arrow-svg{
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }
  .arrow-1{
    bottom: -51.2px;
    left: 32%;
    width: 20%;
    min-width: 160px;
  }
  .arrow-2{
    top: -44.8px;
    right: 32%;
    width: 20%;
    min-width: 160px;
  }

  @media (max-width: 991px){
    .step-card.center{ transform: none; margin-top: 24px; margin-bottom: 24px; }
    .arrow-svg{ display: none; }
    .steps-row .col-lg-4{ margin-bottom: 16px; }
  }


  /********/

  .psy-section{
    padding: 80px 0px 96px;
    text-align: center;
    position: relative;
  }

  .psy-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4.5vw, 48px);
    margin-bottom: 20px;
  }

  .psy-subtitle{
    color: var(--text-muted);
    font-size: 18.4px;
    max-width: 720px;
    margin: 0 auto 40px auto;
    line-height: 1.55;
  }

  .search-select{
    max-width: 480px;
    margin: 0 auto 64px auto;
    position: relative;
  }
  .search-select select{
    width: 100%;
    padding: 16px 22.4px;
    border-radius: 16px;
    border: none;
    background: #fff;
    color: var(--text-muted);
    /*box-shadow: 0 15px 35px -12px rgba(0,0,0,0.15);*/
    font-size: 16.8px;
    appearance: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;

  }
  .search-select::after{
    content: "";
    position: absolute;
    right: 22.4px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid #333;
    border-bottom: 2.5px solid #333;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  /* decorative floating circles */
  .deco-circle{
    position: absolute;
    border-radius: 50%;
    z-index: 0;
  }
  .deco-1{ width: 190px; height: 190px; background:#fff; top: 432px; left: 6%; opacity:.7; animation: float2 2s ease-in-out infinite alternate;}
  .deco-2{ width: 150px; height: 150px; background: var(--blue-light); top: 640px; left: 20%; animation: float1 4s ease-in-out infinite alternate;}
  .deco-3{ width: 170px; height: 170px; background: var(--blue-light); top: 416px; right: 16%; animation: float2 3s ease-in-out infinite alternate;}
  .deco-4{ width: 120px; height: 120px; background: var(--gold); top: 672px; right: 25%; animation: float3 4s ease-in-out infinite alternate;}

  .swiper-button-disabled{
    opacity: 0.6 !important;
    cursor: default;
  }

  .swiper-button-disabled:hover{
    background: var(--white) !important;
    color: var(--text-dark) !important;
  }

  .psy-carousel-wrap{
    position: relative;
    z-index: 1;
    padding: 16px 0 0 0;
    overflow: hidden;
  }

  .psyCarousel.swiper{
    width: 100%;
    padding: 32px 0 16px 0;
    overflow: visible;
  }

  .psyCarousel .swiper-slide{
    width: 260px;
    transition: transform .4s ease, opacity .4s ease, filter .4s ease;
    filter: grayscale(15%);
    transform: scale(0.9);
  }
  .psyCarousel .swiper-slide.swiper-slide-active{
    opacity: 1;
    filter: none;
    transform: scale(1.08);
  }
  .psyCarousel .swiper-slide-prev,
  .psyCarousel .swiper-slide-next{
    filter: none;
  }

  .psy-photo{
    width: 100%;
    aspect-ratio: 1 / 1.05;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 45px -15px rgba(0,0,0,0.25);
    display: block;
  }

  .psy-info{
    margin-top: 28px;
    min-height: 150px;
  }

  .psy-tags{
    display: flex;
    justify-content: center;
    gap: 9.6px;
    flex-wrap: wrap;
    margin-bottom: 14.4px;
  }
  .psy-tag{
    background: #fff;
    color: var(--blue);
    font-weight: 500;
    font-size: 15.2px;
    padding: 7.2px 19.2px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
  }

  .psy-name{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 19.2px;
    margin-bottom: 2.4px;
  }
  .psy-role{
    color: var(--text-muted);
    font-size: 16.8px;
    font-family: 'Poppins', sans-serif;
  }

  .btn-see-all{
    font-family: 'Poppins', sans-serif;
    margin-top: 35.2px;
    text-decoration: none;
    background: var(--accent-blue);
    display: table;
    padding: 20px 30px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 100px;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-see-all:hover{
    transform: translateY(-2px);
    
  }

  @media (max-width: 576px){
    .swiper-slide{ width: 190px; }
    .deco-circle{ display:none; }
  }


  /********/

  .topics-wrap{
    padding: 80px 16px 128px 16px;
    position: relative;
  }

  .topics-panel{
    background: var(--blue-light);
    border-radius: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 56px 32px 56px 32px;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .eyebrow{
    letter-spacing: 0.15em;
    font-size: 12.8px;
    font-weight: 600;
    color: #444;
  }

  .topics-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(28.8px, 4vw, 41.6px);
    margin: 9.6px 0 16px 0;
  }

  .topics-subtitle{
    color: var(--text-muted);
    font-size: 18.4px;
    margin-bottom: 44px;
  }

  .tags-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 950px;
    margin: 0 auto 48px auto;
  }

  .topic-pill{
    background: #fff;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 16.8px;
    padding: 16px 30.4px;
    border-radius: 999px;
    transition: all .4s ease;
    text-decoration: none;
  }
  .topic-pill:hover{
    transform: translateY(-3px);
    background: var(--blue);
    color: var(--white);
	transition: all .4s ease;
  }

  .not-found-text{
    font-size: 17.6px;
    margin-bottom: 20px;
  }

  /* decorative circles peeking below the panel */
  .deco-circle{
    position: absolute;
    border-radius: 50%;
    z-index: 0;
  }
  .deco-gold{
    width: 90px; height: 90px;
    background: var(--gold);
    bottom: -16px;
    left: 28%;
    animation: float1 2s ease-in-out infinite alternate;
  }
  .deco-blue{
    width: 70px; height: 70px;
    background: var(--blue-light);
    bottom: -40px;
    left: 22%;
    animation: float3 2s ease-in-out infinite alternate;
  }
  .deco-white{
    width: 130px; height: 130px;
    background: #fff;
    bottom: -56px;
    right: 18%;
    animation: float1 3s ease-in-out infinite alternate;
  }

  @media (max-width: 576px){
    .topics-panel{ border-radius: 28px; padding: 40px 20px; }
    .topic-pill{ font-size: 15.2px; padding: 12.8px 22.4px; }
  }


  /**************/

    .faq-section{
    padding: 80px 16px;
  }

  .faq-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 41.6px);
    margin-bottom: 16px;
  }

  .faq-subtitle{
    color: var(--text-muted);
    font-size: 17.6px;
    line-height: 1.55;
    max-width: 340px;
    margin-bottom: 35.2px;
  }

  .btn-all-questions{
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px 35.2px;
    font-weight: 600;
    font-size: 16.32px;
    box-shadow: 0 15px 30px -10px rgba(91,141,217,0.5);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-all-questions:hover{
    transform: translateY(-2px);
    color: #fff;
  }

  /* --- Accordion (accordion-js) custom skin --- */
  .accordion-container{
  }

  .ac{
    background: #fff;
    border-radius: 20px;
    margin-bottom: 22.4px;
    overflow: hidden;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
  }

  .ac-header{
    margin: 0;
  }

  .ac-trigger{
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 20.8px 28px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18.4px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
  }

  /* hide the library's default arrow, we draw our own plus/x icon */
  .ac-trigger::after{
    display: none !important;
  }

  .ac-icon{
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    position: relative;
    transition: all 0.5s ease;
  }
  .ac-icon::before,
  .ac-icon::after{
    content: "";
    position: absolute;
    background: var(--blue);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
  }
  .ac-icon::before{
    width: 14px;
    height: 2.5px;
  }
  .ac-icon::after{
    width: 2.5px;
    height: 14px;
  }
  .ac:hover .ac-icon{
    background: var(--blue-light);
    transition: all 0.5s ease;
  }
  .ac.is-active .ac-icon::after{
    transform: translate(-50%, -50%) rotate(90deg) scale(0);
  }

  .ac-panel{
    background: #fff;
  }
  .ac-text{
    padding: 0 28px 25.6px 28px;
    color: var(--text-muted);
    font-size: 16.32px;
    line-height: 1.55;
  }

  @media (max-width: 991px){
    .faq-subtitle{ max-width: 100%; }
  }


  /*****************/

  .blog-section{
    padding: 80px 0 96px 0;
    overflow: hidden;
  }

  .blog-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(19.2px, 5vw, 48px);
    text-align: center;
  }

  .blog-subtitle{
    text-align: center;
    color: var(--text-muted);
    font-size: 19.2px;
    max-width: 700px;
    margin: 16px auto 48px auto;
  }

  .blog-swiper{
    overflow: visible;
    padding: 0 16px;
  }

  .blog-swiper .swiper-slide{
    height: auto;
  }

  .blog-swiper .swiper-wrapper{
    align-items: stretch;
  }

  .blog-slide{
    width: 400px;
  }

  .blog-card{
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .blog-card-img-wrap{
    position: relative;
  }
  .blog-card-img{
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
  }
  .blog-like-btn{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px -6px rgba(0,0,0,0.25);
    border: none;
    color: var(--blue);
  }
  .blog-like-btn svg{
    width: 20px;
    height: 20px;
  }

  .blog-card-body{
    padding: 24px 25.6px 28px 25.6px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .blog-author{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17.6px;
  }
  .blog-author img{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
  }
  .blog-author-name{
    font-weight: 500;
    font-size: 14.4px;
    line-height: 1.2;
  }
  .blog-author-loc{
    color: var(--text-muted);
    font-size: 14.4px;
  }

  .blog-card-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 21.6px;
    margin-bottom: 12px;
    line-height: 1.3;
  }

  .blog-card-excerpt{
    color: var(--text-muted);
    font-size: 15.68px;
    line-height: 1.55;
    margin-bottom: 24px;
    flex: 1;
  }

  .btn-read-more{
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 999px;
    font-size: 15.68px;
    transition: background .2s ease, color .2s ease;
    display: block;
    width: 100%;
    padding: 9px 28px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-weight: 500;
  }

  .btn-read-more:hover{
    background: var(--blue);
    color: #fff;
  }

  .blog-nav-wrap{
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
  }
  .blog-nav-btn{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,0.2);
    color: var(--text-dark);
    transition: background .2s ease, color .2s ease;
  }
  .blog-nav-btn:hover{
    background: var(--blue);
    color: #fff;
  }
  .blog-nav-btn svg{ width: 20px; height: 20px; }

  @media (max-width: 576px){
    .blog-slide{ width: 300px; }
  }


  /**********************/

  .perks-section{
    padding: 96px 16px;
  }

  .perks-row{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .perk-item{
    flex: 0 0 auto;
    width: 260px;
    text-align: center;
  }

  .perk-icon-circle{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    box-shadow: 0 15px 35px -15px rgba(0,0,0,0.15);
  }
  .perk-icon-circle svg{
    width: 46px;
    height: 46px;
  }

  .perk-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 14.4px;
  }

  .perk-text{
    color: var(--text-muted);
    font-size: 16.8px;
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto;
  }

  .perk-arrow{
    flex: 1 1 auto;
    align-self: flex-start;
    margin-top: 40px;
    padding: 0 8px;
  }
  .perk-arrow svg{
    width: 100%;
    height: 70px;
    display: block;
  }

  @media (max-width: 1200px){
    .perk-arrow{ display: none; }
    .perks-row{
      justify-content: center;
      gap: 40px;
    }
  }

  @media (max-width: 900px){
    .perks-row{
      flex-wrap: wrap;
      align-items: center;
    }
  }


  /*********************/

  .press-section{
    padding: 72px 0 80px 0;
    overflow: hidden;
  }

  .press-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 30.4px;
    text-align: center;
    margin-bottom: 48px;
  }

  /* fade the edges so logos appear to enter/exit softly */
  .press-mask{
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .press-swiper{
    overflow: visible;
  }

  .press-swiper .swiper-wrapper{
    transition-timing-function: linear !important;
  }

  .press-slide{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .press-logo{
    height: 34px;
    max-width: 170px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
  }

  /* text fallback style, in case real logo files aren't plugged in yet */
  .press-logo-text{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: .02em;
    color: #6b6b6b;
    white-space: nowrap;
    background: var(--bg);
  }

  .press-logo-text img{
    mix-blend-mode: multiply;
  }

  /***********/
  .footer-wrap{
    padding: 48px 16px;
  }

  .site-footer{
    background: var(--blue);
    border-radius: 36px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 56px 48px 0 48px;
    color: var(--white);
    overflow: hidden;
  }

  /* logo */
  .footer-logo{
    display: flex;
    align-items: baseline;
    gap: 6.4px;
    margin-bottom: 28px;
  }

  footer .accordion-container{
    margin-bottom: 40px;
  }

  footer .ac{
    background: transparent;
    box-shadow: 0 0 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    border-radius: 0;
    margin-bottom: 0;
  }

  footer .ac-trigger{
    padding: 19.2px 0px;
    color: var(--white);
  }

  footer .ac-panel{
    background: transparent;
  }

  footer .ac-panel ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  footer .ac-panel ul li{
    margin-bottom: 16px;
  }

  @media (max-width: 991px){
    .footer-logo{
      margin: 0 auto 28px;
      display: table;
    }
    .company-name, .company-info, .partner-line{
      text-align: center;
    }

    .social-icons{
      justify-content: center;
    }
  }

  .footer-logo .online-tag{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 17.6px;
    color: #fff;
    opacity: .9;
  }

  .company-name{
    font-weight: 600;
    font-size: 16.8px;
    margin-bottom: 8px;
  }
  .company-info{
    font-size: 15.68px;
    line-height: 1.6;
  }
  .company-info a{
    color: #fff;
    text-decoration: underline;
  }

  .partner-line{
    margin-top: 22.4px;
    font-size: 15.2px;
  }
  .partner-line a{
    color: #fff;
    text-decoration: underline;
  }

  .social-icons{
    display: flex;
    gap: 16px;
    margin-top: 25.6px;
  }
  .social-icons a{ 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
  }
  .social-icons a:hover{
    opacity: 0.8;
    transition: all .2s ease;
  }
  .social-icons svg{
    width: 18px;
    height: 18px;
  }

  .footer-col-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 19.2px;
    margin-bottom: 24px;
  }

  .footer-links{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-links li{
    margin-bottom: 18.4px;
  }
  .footer-links a{
    color: #fff;
    text-decoration: none;
    font-size: 16.8px;
    opacity: .95;
    transition: opacity .2s ease;
  }
  .footer-links a:hover{
    opacity: 1;
    text-decoration: underline;
  }

  /* hand-drawn circle around "Iscriviti" */
  .circled-word{
    position: relative;
    display: inline-block;
  }
  .circled-word svg{
    position: absolute;
    left: -14%;
    top: -35%;
    width: 128%;
    height: 175%;
    pointer-events: none;
  }

  @media (max-width: 991px){
    .circled-word svg{
      top: -32%;
    }
  }
  .circled-word span{
    position: relative;
    font-weight: 700;
  }

  .footer-bottom{
    border-top: 1px solid rgba(255,255,255,.3);
    margin-top: 48px;
    padding: 25.6px 0;
    text-align: center;
    font-size: 14.72px;
    line-height: 1.6;
  }
  .footer-bottom a{
    color: #fff;
    text-decoration: underline;
  }

  @media (max-width: 991px){
    .steps-section, .psy-section, .topics-wrap, .faq-section, .blog-section, .perks-section, .press-section{
      padding-bottom: 0;
    }
  }

  @media (max-width: 767px){
    .site-footer{ padding: 40px 24px 0 24px; border-radius: 26px; }
    .footer-col-title{ margin-top: 24px; }
  }


    .city-card {
      background-color: var(--blue-light); 
      color: var(--text-dark); 
      border-radius: 12px;    
      padding: 22px 24px;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      font-weight: 500;
    }
    @media (max-width: 767px){
      .city-card { 
        border-radius: 8px;    
        padding: 12px 14px;
        line-height: 1.3;
      }
    }

    .city-card:hover {
      background-color: var(--blue); 
      color: var(--white);
      transform: translateY(-2px);
    }

    .city-card:hover svg path{
      fill: var(--white);
    }

  @keyframes float1 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-15px); /* Spostamento verso l'alto di 15px */
    }
  }

  @keyframes float2 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(30px); 
    }
  }

  @keyframes float3 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-20px); 
    }
  }
/* ---- site.css ---- */
/*
 * Integration layer for the 2026 redesign.
 *
 * style.css is the file delivered by the designer and is kept untouched (apart
 * from the image path). Everything the Twig integration needs on top of it
 * lives here: inline styles moved out of the static mock-up and rules for the
 * elements that became links / dynamic content.
 */

/* Header wrapper (was an inline style in the mock-up) */
.v2-header-container {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Mobile menu top bar (was an inline style in the mock-up) */
.mobile-menu-bar {
    position: fixed;
    top: 30px;
    left: 32px;
    width: calc(100% - 64px);
}

/* Login / register shortcuts inside the mobile menu (inline styles in the mock-up).
   display here, not with the d-* utilities: on the pages with the Bootstrap 3 stack the
   shim declares .d-block after .d-flex, so the row lost its flex alignment there */
.mobile-menu-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

@media (min-width: 576px) {
    .mobile-menu-actions {
        display: none !important;
    }
}

.mobile-menu-actions .link-register {
    gap: 12px;
}

/* Hero badge inner group (inline style in the mock-up) */
.hero-badge-inner {
    gap: 9.6px;
    margin-right: 8px;
}

/* "Accedi" / "Esci" are links, not buttons */
a.btn-login {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* Psychologists carousel: active slide name links to the profile */
a.psy-name {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.psy-name:hover {
    color: var(--blue);
}

.psy-photo-link {
    display: block;
}

.psy-info:empty {
    display: none;
}

/* Blog cards */
.blog-card-title a,
.blog-author-name a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--blue);
}

a.btn-read-more {
    text-align: center;
    text-decoration: none;
}

.blog-like-btn.is-fav svg {
    fill: currentColor;
}

.blog-like-btn.processing {
    opacity: .6;
    pointer-events: none;
}

.blog-author img,
.avatar-stack img {
    object-fit: cover;
}

/* Footer: "Iscriviti" inside the circled word is a link */
.footer-links .circled-word a {
    color: inherit;
    text-decoration: none;
}

.footer-logo a {
    display: inline-block;
}

/* Hero search form: the form element carries the .search-card styling */
form.search-card {
    margin: 0;
}

#v2-search-location-wrap[hidden] {
    display: none;
}

/* ---------- Autocomplete fields (js/v2/autocomplete.js) ---------- */
.v2-ac {
    position: relative;
}

.v2-ac .v2-ac-input {
    display: block;
    width: 100%;
    padding: 16px 48px 16px 20.8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #F7F6F4;
    font-family: 'Poppins', sans-serif;
    font-size: 16.32px; /* >= 16px: no zoom on focus on iOS */
    color: var(--text-dark);
    outline: none;
    text-overflow: ellipsis;
    transition: border-color .2s ease, background .2s ease;
}

.v2-ac .v2-ac-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.v2-ac .v2-ac-input:focus {
    border-color: var(--blue);
    background: #fff;
}

/* the chevron of .search-select-wrap becomes the clear button once a value is chosen */
.v2-ac.has-value::after {
    display: none;
}

.v2-ac-clear {
    position: absolute;
    top: 50%;
    right: 12.8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.v2-ac-clear:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-ac-clear svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.v2-ac-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 372px;
    margin: 0;
    padding: 8px;
    list-style: none;
    overflow: hidden auto;
    border: 1px solid #ededed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .28);
    text-align: left;
}

.v2-ac-heading,
.v2-ac-message {
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13.12px;
    color: var(--text-muted);
}

.v2-ac-heading {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11.52px;
}

.v2-ac-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 15.2px;
    line-height: 1.3;
    color: var(--text-dark);
    cursor: pointer;
}

.v2-ac-option:hover,
.v2-ac-option.is-active {
    background: var(--blue-light);
}

.v2-ac-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--blue);
    overflow: hidden;
}

.v2-ac-option.is-active .v2-ac-media,
.v2-ac-option:hover .v2-ac-media {
    background: #fff;
}

.v2-ac-media svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.v2-ac-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-ac-text {
    flex: 1 1 auto;
    min-width: 0;
}

.v2-ac-text small {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.v2-ac-text strong {
    font-weight: 600;
}

.v2-ac-text em {
    font-style: normal;
    color: var(--text-muted);
}

.v2-ac-caption {
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 11.52px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* "Cerchi uno psicologo in presenza?" grid (inline max-width in the mock-up) */
.city-grid {
    max-width: 900px;
}

/* ---------- Psychologists carousel: focus on the centred profile ---------- */
/* Side photos fade out with the distance from the centre */
.psyCarousel .swiper-slide {
    opacity: .45;
}

.psyCarousel .swiper-slide.swiper-slide-prev,
.psyCarousel .swiper-slide.swiper-slide-next {
    opacity: .75;
}

.psyCarousel .swiper-slide.swiper-slide-active {
    opacity: 1;
}

/* On small screens only the neighbours are visible: the fade is barely there */
@media (max-width: 767px) {
    .psyCarousel .swiper-slide,
    .psyCarousel .swiper-slide.swiper-slide-prev,
    .psyCarousel .swiper-slide.swiper-slide-next {
        opacity: .88;
    }

    .psyCarousel .swiper-slide.swiper-slide-active {
        opacity: 1;
    }
}

/* ---------- Decorative dots between the homepage sections ---------- */
/* A few circles, as in the hero and in the psychologists section, so that the page
   does not feel empty while scrolling. Each section is its own stacking context
   (z-index: 10), so z-index: -1 keeps the dots behind the content of the section. */
.v2-city-section {
    position: relative;
    z-index: 10;
}

.v2-dot {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.v2-dot--steps-blue {
    left: 6%;
    bottom: -90px;
    width: 150px;
    height: 150px;
    background: var(--blue-light);
    animation: float1 4s ease-in-out infinite alternate;
}

.v2-dot--steps-gold {
    right: 9%;
    bottom: -10px;
    width: 64px;
    height: 64px;
    background: var(--gold);
    animation: float3 3s ease-in-out infinite alternate;
}

/* In the empty area below the title of the FAQ (left column), off to the left: it keeps
   the empty space company instead of sitting right under the text */
.v2-dot--faq-blue {
    top: 320px;
    left: 3%;
    width: 130px;
    height: 130px;
    background: var(--blue-light);
    animation: float2 4s ease-in-out infinite alternate;
}

/* Peeks out from behind the questions */
.v2-dot--faq-gold {
    right: 4%;
    bottom: 112px;
    width: 60px;
    height: 60px;
    background: var(--gold);
    animation: float1 3s ease-in-out infinite alternate;
}

/* beside the "Blog" title, not against the edge of the page */
.v2-dot--blog-gold {
    top: 36px;
    left: 12%;
    width: 72px;
    height: 72px;
    background: var(--gold);
    animation: float3 4s ease-in-out infinite alternate;
}

/* Above the title (not on its line): the city cards have the same light blue */
.v2-dot--city-blue {
    top: 4px;
    right: 6%;
    width: 110px;
    height: 110px;
    background: var(--blue-light);
    animation: float2 4s ease-in-out infinite alternate;
}

/* (removed on every width: the only gold dot of the city block, beside the grid) */
.v2-dot--city-gold {
    display: none;
    left: 9%;
    top: 320px;
    bottom: auto;
    width: 60px;
    height: 60px;
    background: var(--gold);
    animation: float1 3s ease-in-out infinite alternate;
}

@media (min-width: 768px) and (max-width: 991px) {
    .v2-dot--faq-blue {
        top: 48px;
        right: 6%;
        left: auto;
        width: 100px;
        height: 100px;
    }
}

/* Mobile only (the desktop version of these sections already has its circles) */
.v2-dot--topics-gold,
.v2-dot--topics-white,
.v2-dot--qa-blue,
.v2-dot--qa-gold {
    display: none;
}

@media (max-width: 767px) {
    .v2-dot--steps-blue {
        left: 4%;
        bottom: -50px;
        width: 84px;
        height: 84px;
    }

    /* Phones: fewer dots than on desktop, the page is narrow and they crowded it.
       Gone: the gold one under "Prenota il colloquio", the blue one under the search card,
       the gold one at the top of the blog (cut by the edge of the section), the blue one
       above "Cerchi uno psicologo in presenza?" and the gold ones next to the "Tutte le
       domande" and "Vedi tutte le città" buttons. */
    .v2-dot--steps-gold,
    .v2-dot--blog-gold,
    .v2-dot--city-blue,
    .v2-dot--faq-gold,
    .v2-dot--city-gold,
    .deco-blue-small {
        display: none;
    }

    /* FAQ "Prima di iniziare": smaller and white (a blue one of the same kind is just
       above, in the questions section), a little away from the title */
    .v2-dot--faq-blue {
        top: 12px;
        right: 9%;
        left: auto;
        width: 52px;
        height: 52px;
        background: #fff;
    }


}

@media (max-width: 576px) {
    /* (the gold one near "Scrivi la tua domanda" stays hidden: with the three above it the
       area between the topics and the FAQ was too crowded) */
    .v2-dot--topics-gold,
    .v2-dot--topics-white,
    .v2-dot--qa-blue {
        display: block;
    }

    .v2-dot--topics-gold {
        left: 12%;
        bottom: -18px;
        width: 56px;
        height: 56px;
        background: var(--gold);
        animation: float1 3s ease-in-out infinite alternate;
    }

    .v2-dot--topics-white {
        right: 10%;
        bottom: -34px;
        width: 78px;
        height: 78px;
        background: #fff;
        animation: float3 4s ease-in-out infinite alternate;
    }

    .v2-dot--qa-blue {
        top: 8px;
        right: 6%;
        width: 74px;
        height: 74px;
        background: var(--blue-light);
        animation: float2 4s ease-in-out infinite alternate;
    }

    .v2-dot--qa-gold {
        left: 7%;
        bottom: 24px;
        width: 34px;
        height: 34px;
        background: var(--gold);
        animation: float1 3s ease-in-out infinite alternate;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-dot {
        animation: none;
    }
}

/* ---------- Header, small screens: avatar of the logged-in user ---------- */
.v2-avatar-link {
    text-decoration: none;
}

.v2-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.v2-avatar-online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2ecc71;
}

/* ---------- Popup (js/v2/homepage.js) ---------- */
.v2-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.v2-modal[hidden] {
    display: none;
}

.v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 45, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.v2-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 41.6px 32px 35.2px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .35);
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}

.v2-modal.is-open .v2-modal-backdrop,
.v2-modal.is-open .v2-modal-card {
    opacity: 1;
}

.v2-modal.is-open .v2-modal-card {
    transform: none;
}

.v2-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-dark);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.v2-modal-close:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.v2-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 19.2px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
}

.v2-modal-icon svg {
    width: 30px;
    height: 30px;
}

.v2-modal-title {
    margin: 0 0 9.6px;
    line-height: 1.3;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
    font-size: 21.6px;
    font-weight: 600;
    color: var(--text-dark);
}

.v2-modal-text {
    margin: 0 0 25.6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted);
    /* the texts come from js/v2/login-modal.js as plain text: "\n" starts a new line */
    white-space: pre-line;
}

.v2-modal-actions .btn-login,
.v2-modal-actions .btn-login:hover {
    color: #fff;
    text-decoration: none;
}

.v2-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22.4px;
}

.v2-modal-secondary {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: var(--blue);
    text-decoration: underline;
}

.v2-modal-secondary:hover {
    color: var(--hover, #1A7AC4);
}

/* ---------- Hero, small screens: no horizontal overflow ---------- */
/* The circles behind the search card hang 40-56px outside it: on a phone that is more
   than the page gutter, so the page became wider than the screen (content off-centre,
   empty strip on the right). They now stay inside the gutter. */
@media (max-width: 767px) {
    .search-card-wrap .deco-gold {
        left: -20px;
    }

    .search-card-wrap .deco-blue-big {
        right: -20px;
    }

    .search-card-wrap .deco-gold-small {
        right: -16px;
    }
}

/* Safety net for the decorations of every section (vertical overflow stays visible) */
@supports (overflow-x: clip) {
    .hero-section,
    .steps-section,
    .psy-section,
    .topics-wrap,
    .faq-section,
    .blog-section,
    .perks-section {
        overflow-x: clip;
    }
}

/* ---------- Hero title: "Non un algoritmo." always on one line ---------- */
.hero-title .blue-text {
    white-space: nowrap;
}

/* At the minimum title size (38.4px) the sentence is about 9.1em wide: more than a small
   phone offers. Below 480px the title scales with the screen so that it always fits
   (48px = page gutters). */
@media (max-width: 480px) {
    .hero-title {
        font-size: min(38.4px, calc((100vw - 48px) / 9.3));
    }
}

/* ---------- Psychologists carousel, small screens: long tags ---------- */
/* Two long tags ("Disturbo ossessivo compulsivo") go on two rows: the block below the
   photo was sized for one row, so the role ended up against the button and the page
   moved every time the carousel changed profile. The block now always reserves the
   space of two rows; the tags are a little smaller and never break inside.
   (two rows of tags + name + role = 141px: 150px keeps the button still without a
   large empty band under the role) */
@media (max-width: 767px) {
    .psy-info {
        min-height: 150px;
    }

    .psy-tags {
        gap: 7.2px;
        margin-bottom: 12px;
    }

    .psy-tag {
        max-width: 100%;
        padding: 6.4px 16px;
        font-size: 13.6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- FAQ "Prima di iniziare", small screens ---------- */
.v2-dot--faq-mid {
    display: none;
}

@media (max-width: 991px) {
    /* title and subtitle centred, as in the other sections */
    .faq-title,
    .faq-subtitle {
        text-align: center;
    }

    .faq-subtitle {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4px;
    }

    /* the stacked columns kept the desktop gutter (48px): less space before the first question */
    .faq-section .row.g-5 {
        --bs-gutter-y: 20px;
    }

    /* a circle behind the middle of the list breaks the scrolling */
    .v2-dot--faq-mid {
        display: block;
        top: 52%;
        left: -34px;
        width: 120px;
        height: 120px;
        background: var(--blue-light);
        animation: float2 4s ease-in-out infinite alternate;
    }
}

@media (max-width: 575px) {
    .v2-dot--faq-mid {
        width: 96px;
        height: 96px;
        left: -28px;
    }
}

/* ---------- Blog section, small screens ---------- */
/* The title shrank to 19.2px on phones (5vw): same minimum as the other sections */
.blog-title {
    font-size: clamp(32px, 5vw, 48px);
}

/* Phones: every card as tall as the tallest one (as on desktop, style.css), so the slider
   keeps one height while swiping; the text keeps its own height and "Leggi di più" sits at
   the bottom of every card */
@media (max-width: 767px) {
    .blog-card-excerpt {
        flex: 0 0 auto;
        margin-bottom: 20px;
    }

    .blog-card .btn-read-more {
        margin-top: auto;
    }
}

/* ---------- Full-screen menu open: the page behind it does not scroll ---------- */
/* on <html> too: style.css sets overflow-x on it, so the body value alone would not
   reach the viewport */
html.v2-menu-open,
body.v2-menu-open {
    overflow: hidden;
    /* iOS Safari ignores overflow: hidden alone */
    touch-action: none;
}

/* the menu itself can scroll when it is taller than the screen (small landscape phones) */
.mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ---------- Autocomplete, small screens: type label under the text ---------- */
/* Long topics ("Disturbi del controllo degli impulsi") wrap on 2-3 lines next to the
   "Difficoltà" label; on a phone the label goes on its own line under the text. */
@media (max-width: 575px) {
    .v2-ac-option {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* basis 0: the text stays on the same line as the icon and wraps inside it */
    .v2-ac-text {
        flex: 1 1 0;
    }

    .v2-ac-caption {
        flex: 0 0 100%;
        padding-left: 44px; /* icon width + gap */
    }
}

/* ---------- Rating stars: gold, not green ---------- */
/* style.css already sets this colour, but the layouts load the bar-rating theme after it */
.br-theme-fontawesome-stars-o .br-widget a.br-active:after,
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after,
.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after,
.br-theme-bootstrap-stars .br-widget a.br-active:after,
.br-theme-bootstrap-stars .br-widget a.br-selected:after {
    color: rgb(242, 186, 56);
}

/* ---------- Autocomplete: clickable chevron (js/v2/autocomplete.js) ---------- */
/* replaces the decorative arrow of the mock-up (.search-select-wrap::after) */
.v2-ac.search-select-wrap::after {
    display: none;
}

.v2-ac-toggle {
    position: absolute;
    top: 50%;
    right: 9.6px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}

.v2-ac-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.2px solid #555;
    border-bottom: 2.2px solid #555;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform .2s ease;
}

.v2-ac.is-open .v2-ac-toggle::after {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.v2-ac-toggle[hidden] {
    display: none;
}

/* ==========================================================================
   Homepage, "Lo psicologo risponde": the 3 most recent questions
   (Default/index.html.twig, .qa-swiper). Three cards side by side from 768px;
   on phones a one-card slider (js/v2/layout.js).
   ========================================================================== */
.qa-cards {
    max-width: 1300px;
    margin: 0 auto;
    padding: 8px 0 8px;
}

.qa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    padding: 28px 28px 24px;
    background: var(--card-bg, #fff);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(42, 42, 42, 0.06);
    overflow: hidden;
    text-align: left;
}

/* category: one line, cut with an ellipsis */
.qa-card__category {
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15.2px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-card__category:hover {
    color: var(--hover);
}

/* title and excerpt: at most 2 lines, cut with an ellipsis */
.qa-card__title {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-card__title a {
    color: inherit;
    text-decoration: none;
}

.qa-card__title a:hover {
    color: var(--accent-blue);
}

.qa-card__excerpt {
    margin: 0 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-size: 15.2px;
}

.qa-card__answers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    white-space: nowrap;
}

.qa-card__answers svg {
    width: 22px;
    height: 22px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.qa-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.qa-card__link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.qa-card__link:hover {
    color: var(--hover);
}

.qa-card__link:hover svg {
    transform: translateX(3px);
}

/* phones: one card at a time, the others reachable by swiping (Swiper) */
@media (max-width: 767px) {
    .qa-cards {
        padding: 8px 0 36px;
        overflow: hidden;
    }

    .qa-swiper .swiper-slide {
        width: 100%;
    }

    .qa-swiper-pagination {
        bottom: 0;
    }

    .qa-swiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--accent-blue);
        opacity: 0.3;
    }

    .qa-swiper .swiper-pagination-bullet-active {
        opacity: 1;
    }
}

/* from tablets up: a simple grid, Swiper is not started (js/v2/layout.js) */
@media (min-width: 768px) {
    .qa-swiper {
        overflow: visible;
    }

    .qa-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        transform: none;
    }

    .qa-swiper .swiper-slide {
        width: auto;
        flex-shrink: 1;
    }

    .qa-swiper-pagination {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .qa-card {
        padding: 22.4px 20px 20px;
    }

    .qa-card__title {
        font-size: 17.6px;
    }

    .qa-card__footer {
        flex-wrap: wrap;
    }
}

/* ---------- Homepage, "A cosa può servirti uno psicologo?": no gold dot above the panel ---------- */
/* (.deco-gold is also the class of a circle of the hero search card: scoped to this section) */
.topics-wrap .deco-circle.deco-gold {
    display: none;
}

/* ---- bs5-shim.css ---- */
/*
 * Minimal subset of the Bootstrap 5 utilities and grid used by the V2 header,
 * mobile menu and footer, for pages that still run on the legacy Bootstrap 3
 * stack (layout_v2_legacy.html.twig). Breakpoints are Bootstrap 5's.
 */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.d-table { display: table !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
}

@media (min-width: 1400px) {
    .d-xxl-none { display: none !important; }
}

.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.gap-3 { gap: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 48px !important; }
.mb-5 { margin-bottom: 48px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.pb-4 { padding-bottom: 24px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Footer grid (Bootstrap 3 uses floats and a 1200px "lg" breakpoint) */
.site-footer .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.site-footer .row > * {
    position: relative;
    float: none;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    padding-right: 12px;
    padding-left: 12px;
}

.site-footer .gy-5 > * {
    margin-top: 48px;
}

@media (min-width: 768px) {
    .site-footer .col-md-6 { width: 50%; }
    .site-footer .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .site-footer .col-lg-3 { width: 25%; }
}

/* ---- user-area.css ---- */
/*
 * Client area drawer (2026 redesign).
 *
 * The drawer and its menu are new. The panels inside .v2-user-panels are the
 * existing User:* fragments: their legacy markup is styled by legacy-panels.css
 * (legacy stylesheets scoped to .v2-user-panels) and the rules below only fix
 * their positioning inside the drawer.
 */

/* ---------- Overlay + drawer ---------- */
.v2-user-area {
    position: fixed;
    inset: 0;
    z-index: 4000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.v2-user-area.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease;
}

.v2-user-area__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 42, 42, .45);
}

.v2-user-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(100%, 980px);
    display: flex;
    background: #fff;
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .35);
    transform: translateX(40px);
    transition: transform .35s ease;
    font-family: 'Poppins', sans-serif;
}

.v2-user-area.is-open .v2-user-drawer {
    transform: none;
}

body.v2-user-area-open {
    overflow: hidden;
}

/* ---------- Menu column ---------- */
.v2-user-menu {
    position: relative;
    flex: 0 0 340px;
    width: 340px;
    padding: 28px 24px 32px;
    border-right: 1px solid #eee;
    overflow-y: auto;
}

.v2-user-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.v2-user-close:hover {
    background: var(--blue);
    color: #fff;
}

.v2-user-close svg {
    width: 18px;
    height: 18px;
}

.v2-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 44px;
}

.v2-user-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blue-light);
}

.v2-user-avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-user-avatar--empty img {
    width: 24px;
    height: 24px;
    opacity: .7;
}

.v2-user-name {
    margin: 0;
    font-weight: 600;
    font-size: 17.6px;
    line-height: 1.25;
    color: var(--text-dark);
    text-transform: capitalize;
}

.v2-user-meta {
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 14.4px;
    color: var(--text-muted);
}

.v2-user-cta {
    display: block;
    margin-top: 22px;
    text-align: center;
    text-decoration: none;
}

.v2-user-nav {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.v2-user-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-user-nav li {
    margin: 2px 0;
}

.v2-user-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 15.2px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.v2-user-nav a:hover,
.v2-user-nav li.profile-active-li a {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-user-nav svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v2-user-nav .element-counter {
    margin-left: auto;
    min-width: 28px;
    padding: 1px 9px;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12.8px;
    text-align: center;
    color: var(--text-muted);
    background: #fff;
}

.v2-user-nav .element-counter.notify-counter {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.v2-user-logout {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.v2-user-btn {
    display: inline-block;
    padding: 9.6px 22.4px;
    border-radius: 999px;
    border: 1px solid var(--blue);
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.v2-user-btn:hover {
    background: var(--blue);
    color: #fff;
}

.v2-user-btn--danger {
    border-color: #ff4f4d;
    color: #ff4f4d;
}

.v2-user-btn--danger:hover {
    background: #ff4f4d;
    color: #fff;
}

/* ---------- Panels column ---------- */
.v2-user-panels {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
    text-align: left;
}

.v2-user-panels__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
}

.v2-user-panels__empty svg {
    width: 44px;
    height: 44px;
    stroke: var(--blue);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v2-user-area.is-panel-open .v2-user-panels__empty {
    display: none;
}

/* Legacy panels: they were fixed slide-ins on the right of the page, here they
   fill the panels column. Higher specificity than the scoped legacy rules. */
.v2-user-area .v2-user-panels .slide-element-container {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 28px 32px 40px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden auto;
    background: var(--bg);
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.v2-user-area .v2-user-panels .slide-element-container.reveal-slide-container {
    right: auto;
    opacity: 1;
    visibility: visible;
    background: var(--bg);
    transition: opacity .25s ease;
}

/* Panel-level back buttons are only useful on mobile; the ones inside the details
   views (#single-appointment, #profile-messages) stay visible everywhere */
.v2-user-area .v2-user-panels .slide-element-container > .btn-step-back {
    display: none;
}

/* ---------- Mobile: one column at a time ---------- */
@media (max-width: 991px) {
    .v2-user-drawer {
        width: 100%;
    }

    .v2-user-menu {
        flex: 1 1 auto;
        width: 100%;
        border-right: none;
    }

    .v2-user-panels {
        position: absolute;
        inset: 0;
        display: none;
        background: #fff;
    }

    .v2-user-area.is-panel-open .v2-user-panels {
        display: block;
    }

    .v2-user-area .v2-user-panels .slide-element-container {
        padding: 64px 18px 40px;
        background: #fff;
    }

    .v2-user-area .v2-user-panels .slide-element-container.reveal-slide-container {
        background: #fff;
    }

    .v2-user-area .v2-user-panels .slide-element-container > .btn-step-back {
        display: inline-flex;
        position: absolute;
        top: 16px;
        left: 14px;
        z-index: 2;
        margin: 0;
    }
}

/* ==========================================================================
   Dialogs opened from the client area (bootbox: "Elimina appuntamento", alerts)
   bootbox appends a Bootstrap 3 modal to <body>: outside the drawer, so outside the
   scoped legacy styles (no look on the homepage) and below the drawer (z-index 4000).
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4990;
    background: #141e2d;
    opacity: 0;
    transition: opacity .2s ease;
}

.modal-backdrop.in,
.modal-backdrop.show {
    opacity: .45;
}

/* Every Bootstrap 3 modal of the legacy pages ("Scrivi un messaggio", "Chiedi un colloquio",
   phone, events, testimonies, videos, "Invia la tua domanda"...) must sit above that backdrop:
   Bootstrap 3 gives them z-index 1050, below the 4990 of the backdrop above. */
.modal {
    z-index: 5000;
}

.bootbox.modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}

.bootbox.modal.in,
.bootbox.modal.show {
    display: block;
}

.bootbox .modal-dialog {
    position: relative;
    width: auto;
    max-width: 440px;
    margin: 10vh auto 0;
    transform: translateY(12px);
    transition: transform .25s ease;
}

.bootbox.in .modal-dialog,
.bootbox.show .modal-dialog {
    transform: none;
}

.bootbox .modal-content {
    position: relative;
    border: none;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .35);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark, #1b1b1b);
}

.bootbox .modal-header {
    padding: 26px 56px 0 28px;
    border: none;
}

.bootbox .modal-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.bootbox .bootbox-close-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg, #f7f6f4);
    color: var(--text-dark, #1b1b1b);
    font-size: 24px;
    line-height: 36px;
    opacity: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.bootbox .bootbox-close-button:hover {
    background: var(--blue-light, #dbedfb);
    color: var(--blue, #439bde);
}

.bootbox .modal-body {
    padding: 14px 28px 4px;
    font-size: 16px;
    line-height: 1.5;
}

.bootbox .modal-body .row {
    margin: 0;
}

.bootbox .modal-body .row > [class*="col-"] {
    padding: 0;
}

.bootbox .modal-body textarea,
.bootbox .modal-body input[type="text"],
.bootbox .modal-body input[type="number"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--bg, #f7f6f4);
    font: inherit;
    color: inherit;
    outline: none;
    resize: vertical;
    transition: border-color .2s ease, background .2s ease;
}

.bootbox .modal-body textarea:focus,
.bootbox .modal-body input:focus {
    border-color: var(--blue, #439bde);
    background: #fff;
}

.bootbox .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 28px 26px;
    border: none;
    text-align: right;
}

.bootbox .modal-footer .btn {
    margin: 0;
    padding: 11px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 15.2px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.bootbox .modal-footer .btn:hover {
    transform: translateY(-1px);
}

/* confirmation ("Si", "OK") */
.bootbox .modal-footer .btn-success,
.bootbox .modal-footer .btn-primary {
    background: var(--blue, #439bde);
    border-color: var(--blue, #439bde);
    color: #fff;
}

.bootbox .modal-footer .btn-success:hover,
.bootbox .modal-footer .btn-primary:hover {
    background: var(--hover, #1a7ac4);
    border-color: var(--hover, #1a7ac4);
    color: #fff;
}

/* cancel ("No") */
.bootbox .modal-footer .btn-danger,
.bootbox .modal-footer .btn-default {
    background: transparent;
    border-color: var(--blue, #439bde);
    color: var(--blue, #439bde);
}

.bootbox .modal-footer .btn-danger:hover,
.bootbox .modal-footer .btn-default:hover {
    background: var(--blue-light, #dbedfb);
    color: var(--blue, #439bde);
}

@media (max-width: 575px) {
    .bootbox .modal-dialog {
        margin-top: 6vh;
    }

    .bootbox .modal-header {
        padding: 22px 52px 0 22px;
    }

    .bootbox .modal-body,
    .bootbox .modal-footer {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* ---- user-panels.css ---- */
/*
 * Client area panels, 2026 design.
 *
 * The panels keep the legacy markup of the User:* templates (so user.js keeps
 * working); this stylesheet restyles them on top of legacy-panels.css. Rules use
 * the .v2-user-area .v2-user-panels prefix so they win over the scoped legacy ones.
 */

/* ---------- Panel frame ---------- */
.v2-user-area .v2-user-panels .slide-element-container {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

.v2-user-area .v2-user-panels .slide-element-container *,
.v2-user-area .v2-user-panels .slide-element-container *::before,
.v2-user-area .v2-user-panels .slide-element-container *::after {
    box-sizing: border-box;
}

/* Heading + subtitle */
.v2-user-area .v2-user-panels .slide-element-heading {
    display: block;
    width: auto;
    margin: 0 0 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 21.6px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    text-transform: none;
}

.v2-user-area .v2-user-panels .slide-element-heading .glyphicon,
.v2-user-area .v2-user-panels .slide-element-heading .icon {
    color: var(--blue);
    font-size: .95em;
}

.v2-user-area .v2-user-panels .slide-element-heading + small {
    display: block;
    margin: 0 0 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14.72px;
    color: var(--text-muted);
}

/* Back buttons (details views); the panel-level ones are hidden on desktop by user-area.css */
.v2-user-area .v2-user-panels .btn-step-back {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Bootstrap's .pull-left keeps the button floated: the right margin separates it
       from the title that flows next to it */
    margin: 0 16px 14px 0;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--blue-light);
    color: var(--blue);
    font-family: 'Poppins', sans-serif;
    font-size: 13.6px;
    font-weight: 500;
    float: none;
    cursor: pointer;
}

.v2-user-area .v2-user-panels .btn-step-back::after {
    content: 'Indietro';
}

.v2-user-area .v2-user-panels .btn-step-back:hover {
    background: var(--blue);
    color: #fff;
}

/* ---------- Tabs ---------- */
.v2-user-area .v2-user-panels .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 18px;
    padding: 5px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .12);
}

.v2-user-area .v2-user-panels .nav-tabs > li {
    float: none;
    margin: 0;
}

.v2-user-area .v2-user-panels .nav-tabs > li > a {
    margin: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-muted);
    transition: background .2s ease, color .2s ease;
}

.v2-user-area .v2-user-panels .nav-tabs > li > a:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-user-area .v2-user-panels .nav-tabs > li.active > a,
.v2-user-area .v2-user-panels .nav-tabs > li.active > a:hover,
.v2-user-area .v2-user-panels .nav-tabs > li.active > a:focus {
    border: none;
    background: var(--blue);
    color: #fff;
}

.v2-user-area .v2-user-panels .nav-tabs > li > a .glyphicon {
    margin-right: 2px;
    font-size: .85em;
}

.v2-user-area .v2-user-panels .tab-content {
    margin-top: 0;
}

/* ---------- Empty states ---------- */
.v2-user-area .v2-user-panels .no-item-item {
    margin: 12px 0 0;
    padding: 36px 24px;
    border: 1px dashed #d8d8d8;
    border-radius: 20px;
    background: #fff;
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
}

.v2-user-area .v2-user-panels .no-item-item p {
    margin: 0;
    padding: 4px 0 0;
}

.v2-user-area .v2-user-panels .missing-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--blue-light);
}

.v2-user-area .v2-user-panels .no-item-item .glyphicon,
.v2-user-area .v2-user-panels .no-item-item .fa {
    top: 0;
    font-size: 24px;
    color: var(--blue);
}

/* ---------- Lists (appointments, conversations, webinars) ---------- */
.v2-user-area .v2-user-panels .element-list {
    margin: 0 0 16px;
    padding: 0;
    border: none;
}

.v2-user-area .v2-user-panels .element-list li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid #ededed;
    border-radius: 16px;
    background: #fff;
    overflow: visible;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.v2-user-area .v2-user-panels .element-list li:hover,
.v2-user-area .v2-user-panels .element-list li:active,
.v2-user-area .v2-user-panels .element-list li:focus {
    background: #fff;
    border-color: var(--blue-light);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .2);
}

.v2-user-area .v2-user-panels .element-list li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-dark);
    text-decoration: none;
}

.v2-user-area .v2-user-panels .element-list .pro-face {
    position: relative;
    flex: 0 0 52px;
    float: none;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--blue-light);
}

.v2-user-area .v2-user-panels .element-list .pro-face img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-user-area .v2-user-panels .element-list .no-face {
    width: 100%;
    height: 100%;
    line-height: 52px;
    font-size: 1.4em;
    color: var(--blue);
}

.v2-user-area .v2-user-panels .element-list .appointment-detail {
    display: block;
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
}

.v2-user-area .v2-user-panels .element-list .element-pro-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-user-area .v2-user-panels .element-list .appointment-detail strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14.72px;
    font-weight: 500;
    color: var(--text-dark);
    text-transform: none;
}

.v2-user-area .v2-user-panels .element-list .appointment-detail small {
    display: block;
    margin: 2px 0 0;
    font-size: 13.12px;
    color: var(--text-muted);
}

.v2-user-area .v2-user-panels .element-list .glyphicon-menu-right {
    margin-left: auto;
    float: none;
    line-height: 1;
    font-size: 14.4px;
    color: var(--blue);
}

/* Unread dot in the conversations list */
.v2-user-area .v2-user-panels .element-list li .element-counter.notify-counter {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 8px;
    height: 8px;
    margin: -4px 0 0;
    padding: 0;
    float: none;
    border: none;
    border-radius: 50%;
    background: var(--blue);
}

/* ---------- Lists (favourites, questions, files, resources) ---------- */
.v2-user-area .v2-user-panels .element-list.questions-list li,
.v2-user-area .v2-user-panels .element-list.articles-list li,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list li {
    padding: 14px 44px 14px 54px;
}

.v2-user-area .v2-user-panels .element-list.questions-list a,
.v2-user-area .v2-user-panels .element-list.articles-list a,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list a {
    position: static;
    display: block;
    margin: 0;
    font-size: 16px;
    text-transform: none;
    color: var(--text-dark);
}

.v2-user-area .v2-user-panels .element-list.questions-list small,
.v2-user-area .v2-user-panels .element-list.articles-list small,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list small {
    display: block;
    margin: 0 0 2px;
    font-size: 13.12px;
    color: var(--text-muted);
    text-transform: none;
}

.v2-user-area .v2-user-panels .element-list.questions-list strong,
.v2-user-area .v2-user-panels .element-list.articles-list strong,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: none;
}

.v2-user-area .v2-user-panels .element-list.questions-list strong:hover,
.v2-user-area .v2-user-panels .element-list.articles-list strong:hover,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list strong:hover {
    color: var(--blue);
}

/* Leading icon / heart button on the left */
.v2-user-area .v2-user-panels .element-list.questions-list .glyphicon,
.v2-user-area .v2-user-panels .element-list.articles-list .glyphicon,
.v2-user-area .v2-user-panels .element-list.articles-list > li > .fa,
.v2-user-area .v2-user-panels .element-list.articles-list > li > [class*="icon"] {
    position: absolute;
    top: 50%;
    left: 18px;
    margin-top: -11px;
    font-size: 20px;
    line-height: 1;
    color: var(--blue);
}

.v2-user-area .v2-user-panels .element-list.questions-list button,
.v2-user-area .v2-user-panels .element-list.articles-list button,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list button {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    margin: -14px 0 0;
    padding: 4px;
    float: none;
    border: none;
    background: none;
    font-size: 19.2px;
    line-height: 1;
    cursor: pointer;
}

.v2-user-area .v2-user-panels .element-list.questions-list button .glyphicon,
.v2-user-area .v2-user-panels .element-list.articles-list button .glyphicon,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list button .glyphicon {
    position: static;
    margin: 0;
    color: #ff4f4d;
}

.v2-user-area .v2-user-panels .element-list.questions-list button:hover .glyphicon,
.v2-user-area .v2-user-panels .element-list.articles-list button:hover .glyphicon,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list button:hover .glyphicon {
    color: var(--text-muted);
}

/* Trailing chevron / download icon on the right */
.v2-user-area .v2-user-panels .element-list.questions-list .glyphicon-menu-right,
.v2-user-area .v2-user-panels .element-list.articles-list .glyphicon-menu-right,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list .glyphicon-menu-right,
.v2-user-area .v2-user-panels .element-list.questions-list .glyphicon-download,
.v2-user-area .v2-user-panels .element-list.articles-list .glyphicon-download,
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list .glyphicon-download {
    left: auto;
    right: 16px;
    margin-top: -9px;
    font-size: 16px;
    line-height: 1;
}

/* Favourite psychologists: photo + three lines */
.v2-user-area .v2-user-panels .element-list.favorite-psycho-list li a {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    /* the rows stay together in the middle of the card instead of being stretched */
    align-content: center;
}

.v2-user-area .v2-user-panels .element-list.favorite-psycho-list .pro-face {
    grid-row: 1 / 4;
    margin: 0;
}

.v2-user-area .v2-user-panels .element-list.favorite-psycho-list li a span.element-pro-name {
    font-size: 16px;
    line-height: 1.35;
}

.v2-user-area .v2-user-panels .element-list.favorite-psycho-list li a strong {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14.72px;
    font-weight: 500;
}

.v2-user-area .v2-user-panels .element-list.favorite-psycho-list li a small {
    margin: 0;
}

.v2-user-area .v2-user-panels .element-list.favorite-psycho-list .glyphicon-map-marker {
    position: static;
    margin: 0 2px 0 0;
    font-size: 13.6px;
}

/* ---------- Buttons ---------- */
.v2-user-area .v2-user-panels .btn.pso-btn,
.v2-user-area .v2-user-panels .btn.btn-pso,
.v2-user-area .v2-user-panels input[type="submit"].btn,
.v2-user-area .v2-user-panels .videotutorial-btn,
.v2-user-area .v2-user-panels .indication-overlay,
.v2-user-area .v2-user-panels .list-group-item a.btn {
    display: inline-block;
    margin: 6px 0;
    padding: 11.2px 24px;
    border: none;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15.2px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.v2-user-area .v2-user-panels .btn.pso-btn:hover,
.v2-user-area .v2-user-panels .btn.btn-pso:hover,
.v2-user-area .v2-user-panels input[type="submit"].btn:hover,
.v2-user-area .v2-user-panels .videotutorial-btn:hover,
.v2-user-area .v2-user-panels .indication-overlay:hover,
.v2-user-area .v2-user-panels .list-group-item a.btn:hover {
    background: var(--hover, #1A7AC4);
    color: #fff;
    transform: translateY(-1px);
}

.v2-user-area .v2-user-panels .btn.btn-red {
    background: #fff;
    color: #ff4f4d;
    border: 1px solid #ff4f4d;
}

.v2-user-area .v2-user-panels .btn.btn-red:hover {
    background: #ff4f4d;
    color: #fff;
}

.v2-user-area .v2-user-panels .videotutorial-btn,
.v2-user-area .v2-user-panels .indication-overlay {
    position: static;
    max-width: none;
    margin: 0 8px 8px 0;
    background: #fff;
    color: var(--blue);
    border: 1px solid var(--blue);
}

.v2-user-area .v2-user-panels .btn.pso-btn .glyphicon {
    font-size: .85em;
}

/* ---------- Details views (appointment, conversation) ---------- */
.v2-user-area .v2-user-panels #profile-messages,
.v2-user-area .v2-user-panels #single-appointment {
    left: 100%;
    width: 100%;
    padding: 28px 32px 32px;
    background: var(--bg);
}

.v2-user-area .v2-user-panels #profile-messages.reveal-second-step,
.v2-user-area .v2-user-panels #single-appointment.reveal-second-step {
    left: 0;
}

/* A details view must not stay visible when its panel is hidden */
.v2-user-area .v2-user-panels .slide-element-container:not(.reveal-slide-container) .reveal-second-step {
    visibility: hidden;
    opacity: 0;
}

.v2-user-area .v2-user-panels .message-container {
    padding: 0;
    border: none;
    overflow: visible;
}

.v2-user-area .v2-user-panels #single-appointment .pro-face {
    width: 88px;
    height: 88px;
    margin: 6px auto 12px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--blue-light);
}

.v2-user-area .v2-user-panels #single-appointment .pro-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-user-area .v2-user-panels #single-appointment .no-face {
    line-height: 88px;
    font-size: 2.2em;
    color: var(--blue);
}

.v2-user-area .v2-user-panels .slide-element-heading.element-pro-name {
    margin-bottom: 14px;
    font-size: 18.4px;
    text-align: center;
}

.v2-user-area .v2-user-panels .slide-element-heading.element-pro-name small {
    display: block;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 13.6px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
}

.v2-user-area .v2-user-panels .panel.panel-default {
    margin: 0 0 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.v2-user-area .v2-user-panels .list-group {
    margin: 0 0 16px;
    padding: 0;
}

.v2-user-area .v2-user-panels .list-group-item {
    margin: 0 0 8px;
    padding: 12px 16px;
    border: 1px solid #ededed !important;
    border-radius: 12px !important;
    background: #fff;
    font-size: 15.2px;
    color: var(--text-dark);
}

.v2-user-area .v2-user-panels .list-group-item strong {
    font-weight: 600;
}

.v2-user-area .v2-user-panels .list-group-item .glyphicon,
.v2-user-area .v2-user-panels .list-group-item .fa {
    margin-right: 4px;
    color: var(--blue);
}

.v2-user-area .v2-user-panels #pro-location-map {
    float: none;
    width: 100%;
    padding: 0 0 16px;
}

.v2-user-area .v2-user-panels #pro-location-map img {
    width: 100%;
    border-radius: 16px;
}

.v2-user-area .v2-user-panels #single-appointment .col-lg-12.text-center {
    float: none;
    width: 100%;
    padding: 0;
}

/* ---------- Conversation ---------- */
.v2-user-area .v2-user-panels #profile-messages {
    display: flex;
    flex-direction: column;
}

.v2-user-area .v2-user-panels #profile-messages > .btn-step-back,
.v2-user-area .v2-user-panels #profile-messages > .slide-element-heading,
.v2-user-area .v2-user-panels #profile-messages > small {
    flex: 0 0 auto;
    align-self: flex-start;
}

.v2-user-area .v2-user-panels .message-container-msg {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 4px 8px 0;
    overflow: hidden auto;
}

.v2-user-area .v2-user-panels .message {
    position: relative;
    margin: 0 0 18px;
}

.v2-user-area .v2-user-panels .message .pro-face {
    position: absolute;
    top: 0;
    /* the legacy rule pulls the avatar up by 25px, out of the scrolling area (cut off) */
    margin: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--blue-light);
}

.v2-user-area .v2-user-panels .message .pro-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-user-area .v2-user-panels .message .no-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    font-size: 16px;
    color: var(--blue);
    background: transparent;
}

/* The glyph is taller than its 1em line box: with the legacy line-height the top of the
   icon was cut off */
.v2-user-area .v2-user-panels .message .no-face .glyphicon,
.v2-user-area .v2-user-panels .message .no-face .icon {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px 0 0;
    line-height: 1.25;
    overflow: visible;
}

.v2-user-area .v2-user-panels .baloon-container {
    margin: 0;
}

/* message-i = written by the client (own messages, on the right); message-you = the psychologist */
.v2-user-area .v2-user-panels .message.message-i .baloon-container {
    margin-left: 0;
    margin-right: 54px;
    text-align: right;
}

.v2-user-area .v2-user-panels .message.message-you .baloon-container {
    margin-left: 54px;
    margin-right: 0;
    text-align: left;
}

.v2-user-area .v2-user-panels .message.message-i .pro-face {
    left: auto;
    right: 0;
}

.v2-user-area .v2-user-panels .message.message-you .pro-face {
    left: 0;
    right: auto;
}

.v2-user-area .v2-user-panels .baloon {
    max-width: 85%;
    margin: 0;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 15.2px;
    line-height: 1.5;
}

.v2-user-area .v2-user-panels .message.message-i .baloon {
    background: var(--blue);
    color: #fff;
    border-top-right-radius: 6px;
    text-align: left;
}

.v2-user-area .v2-user-panels .message.message-you .baloon {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid #ededed;
    border-top-left-radius: 6px;
    text-align: left;
}

.v2-user-area .v2-user-panels .baloon p {
    margin: 0;
}

.v2-user-area .v2-user-panels .baloon-arrow {
    display: none;
}

.v2-user-area .v2-user-panels .message-info {
    position: static;
    margin: 4px 0 0;
    padding: 0 54px;
    font-size: 12.48px;
}

.v2-user-area .v2-user-panels .message.message-i .message-info {
    text-align: right;
}

.v2-user-area .v2-user-panels .message.message-you .message-info {
    text-align: left;
}

.v2-user-area .v2-user-panels .message-write {
    position: relative;
    flex: 0 0 auto;
    height: auto;
    margin-top: 12px;
    border: none;
    background: transparent;
}

.v2-user-area .v2-user-panels .message-write textarea {
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 16px 90px 16px 18px;
    border: 1px solid #e3e3e3;
    border-radius: 18px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15.2px;
    color: var(--text-dark);
    box-shadow: none;
}

.v2-user-area .v2-user-panels .message-write textarea:focus {
    border-color: var(--blue);
}

.v2-user-area .v2-user-panels .message-write button {
    top: 50%;
    right: 12px;
    bottom: auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transform: translateY(-50%);
}

.v2-user-area .v2-user-panels .message-write button:hover {
    background: var(--hover, #1A7AC4);
    color: #fff;
}

/* ---------- Forms (profile) ---------- */
.v2-user-area .v2-user-panels .slide-element-container form {
    padding-top: 4px;
    font-family: 'Inter', sans-serif;
}

.v2-user-area .v2-user-panels form.element-list {
    border: none;
}

.v2-user-area .v2-user-panels form.element-list > div {
    margin: 0 0 14px;
}

.v2-user-area .v2-user-panels form label {
    display: block;
    margin: 0 0 6px;
    font-size: 14.08px;
    font-weight: 500;
    color: var(--text-muted);
}

.v2-user-area .v2-user-panels form input[type="text"],
.v2-user-area .v2-user-panels form input[type="email"],
.v2-user-area .v2-user-panels form input[type="password"],
.v2-user-area .v2-user-panels form input[type="url"],
.v2-user-area .v2-user-panels form input[type="tel"],
.v2-user-area .v2-user-panels form select,
.v2-user-area .v2-user-panels form textarea,
.v2-user-area .v2-user-panels form .form-control {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15.2px;
    color: var(--text-dark);
    box-shadow: none;
    outline: none;
    transition: border-color .2s ease;
}

.v2-user-area .v2-user-panels form input:focus,
.v2-user-area .v2-user-panels form select:focus,
.v2-user-area .v2-user-panels form textarea:focus {
    border-color: var(--blue);
    box-shadow: none;
}

.v2-user-area .v2-user-panels form .pso-select,
.v2-user-area .v2-user-panels #user-data-slide .pso-select {
    display: inline-block;
    width: auto;
    min-width: 96px;
    margin: 0 8px 8px 0;
    padding-right: 36px;
    float: none;
    border: 1px solid #e3e3e3;
    color: var(--text-dark);
    font-weight: 400;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232A2A2A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-size: 10px 6px;
    background-repeat: no-repeat;
}

.v2-user-area .v2-user-panels form select:not(.pso-select) {
    appearance: auto;
    -webkit-appearance: auto;
}

.v2-user-area .v2-user-panels form input[type="checkbox"] {
    width: auto;
    margin: 0 8px 0 0;
    padding: 0;
    vertical-align: middle;
}

.v2-user-area .v2-user-panels form .status {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 14.4px;
}

.v2-user-area .v2-user-panels form .status:empty,
.v2-user-area .v2-user-panels form .status.hidden {
    display: none;
}

.v2-user-area .v2-user-panels .autogenerate-error {
    margin: 0 0 6px;
    color: #ff4f4d;
    font-size: 13.6px;
}

.v2-user-area .v2-user-panels #user-prifile-avatar {
    margin: 4px 0 18px;
    text-align: center;
}

.v2-user-area .v2-user-panels #user-prifile-avatar a {
    color: var(--blue);
    text-decoration: none;
}

.v2-user-area .v2-user-panels #user-prifile-avatar .pro-face {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--blue-light);
}

.v2-user-area .v2-user-panels #user-prifile-avatar .pro-face img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-user-area .v2-user-panels #user-prifile-avatar .no-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 96px;
    font-size: 2.2em;
    color: var(--blue);
    background: transparent;
}

.v2-user-area .v2-user-panels #user-prifile-avatar small {
    display: block;
    font-size: 13.6px;
}

.v2-user-area .v2-user-panels .image-refused {
    margin: 0 0 12px;
    color: #ff4f4d;
    font-size: 14.4px;
}

/* ---------- Guide ---------- */
.v2-user-area .v2-user-panels .videotutorials {
    padding: 16px 0;
    margin: 0 0 16px;
    border-bottom: 1px solid #e6e6e6;
}

.v2-user-area .v2-user-panels .videotutorials .title {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    color: var(--text-dark);
}

.v2-user-area .v2-user-panels .slide-element-container ul.margin {
    margin: 8px 0 8px 18px;
    padding: 0;
}

/* ---------- Credits ---------- */
.v2-user-area .v2-user-panels .add-credit {
    margin: 0 0 16px;
}

.v2-user-area .v2-user-panels .list-group.row-margintop20 {
    margin-top: 0;
}

.v2-user-area .v2-user-panels .list-group-item.small {
    font-size: 14.08px;
    color: var(--text-muted);
}

.v2-user-area .v2-user-panels .credit-transaction-user {
    font-size: 14.72px;
}

.v2-user-area .v2-user-panels .credit-refunded {
    color: #2e9e5b;
    font-weight: 500;
}

/* ---------- Coupon ---------- */
.v2-user-area .v2-user-panels .coupon {
    padding: 20px 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ededed;
    font-size: 15.2px;
}

.v2-user-area .v2-user-panels .coupon p {
    margin: 0 0 12px;
}

.v2-user-area .v2-user-panels .coupon .text-center strong {
    display: block;
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 20.8px;
    letter-spacing: .04em;
    color: var(--blue);
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .v2-user-area .v2-user-panels .slide-element-heading {
        font-size: 19.2px;
    }

    .v2-user-area .v2-user-panels #profile-messages,
    .v2-user-area .v2-user-panels #single-appointment {
        padding: 64px 18px 32px;
        background: #fff;
    }

    .v2-user-area .v2-user-panels .nav-tabs > li > a {
        padding: 7px 12px;
        font-size: 13.12px;
    }
}

/* ---- legacy-page.css ---- */
/*
 * Adjustments for pages using layout_v2_legacy.html.twig: new header / footer /
 * menu around content that still uses the legacy stylesheets (Bootstrap 3,
 * layout.css, style.css). Loaded after both stacks.
 */

/* Page content keeps the legacy typography; the new chrome keeps its own fonts */
body.v2-legacy-page {
    font-family: 'Montserrat', sans-serif;
}

.v2-legacy-page .site-footer,
.v2-legacy-page .mobile-menu,
.v2-legacy-page .v2-user-drawer {
    font-family: 'Inter', sans-serif;
}

/* layout.css styles the bare <header> element (fixed, uppercase) for the old header */
.v2-legacy-page .site-header {
    text-transform: none;
    font-size: 16px;
}

.v2-legacy-page header#scroll-header {
    text-transform: none;
}

/* The header dropdown runs on Bootstrap 3's dropdown plugin here: make it identical to the
   Bootstrap 5 one of the homepage (Bootstrap 3 shrinks it to 14px and lets the labels wrap) */
.v2-legacy-page .site-header .dropdown-menu {
    top: 100% !important;
    margin: 6px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

.v2-legacy-page .site-header .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    padding: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 16.32px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark);
    white-space: nowrap;
    text-transform: none;
}

.v2-legacy-page .site-header .dropdown-menu > li > a:hover,
.v2-legacy-page .site-header .dropdown-menu > li > a:focus {
    background: var(--blue);
    color: #fff;
    border-radius: 10px;
}

/* js/main.js adds .header-fixed to every <header> after the first scroll: the static copy of
   the new header must stay in the flow (the fixed copy is #scroll-header), otherwise the page
   jumps by the header height at the threshold and the scroll position oscillates */
.v2-legacy-page header.site-header.header-fixed:not(#scroll-header) {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    box-shadow: none;
}

/* Article pages: the pinned title / side columns change the layout while scrolling; scroll
   anchoring would move the scroll position back across their thresholds (flicker) */
.v2-legacy-page #psycho-article,
.v2-legacy-page #psycho-event-single,
.v2-legacy-page #psycho-profile {
    overflow-anchor: none;
}

/* Article page: the pinned title sits right under the new header (92px, the old one was 90) */
.v2-legacy-page #psycho-article article h1.title-fixed,
.v2-legacy-page #psycho-event-single article h1.title-fixed {
    top: 92px;
}

/* Article page: js/article.js hides the previous / next bar while the side columns are
   pinned, and layout.css collapses it to height 0. The content below moves up while the
   visitor is right on the pinning threshold, and the scroll position followed it (flicker).
   The bar is already under the fixed header at that point: keep its space, hide it only. */
.v2-legacy-page #psycho-article #news-controller.hide-controller,
.v2-legacy-page #psycho-event-single #news-controller.hide-controller {
    height: 67px;
    padding: 10px 0;
    visibility: hidden;
}

/* Legacy pages use z-index up to 99-100 for their own bars (filters, asides): the header
   and its dropdown must stay above them */
.v2-legacy-page .site-header {
    z-index: 1001;
}

/* Bars pinned with Bootstrap's affix were offset for the old fixed header (66 / 90px):
   the new fixed header is taller */
.v2-legacy-page #psycho-search #pro-search-result .filters-bar.affix {
    top: 91px;
}

.v2-legacy-page #pro-search-options .aside-container.affix,
.v2-legacy-page #faq-aside .aside-container.affix {
    top: 110px;
}

/* Profile page: the pinned bar with the name and the contact buttons replaced the old
   header (top 0: layout.css hid the old menu on profile pages). The new header stays:
   the bar goes right below it, otherwise it is covered (header z-index 1001 > bar 999) */
.v2-legacy-page #psycho-profile #psycho-bar.psycho-bar-fixed {
    top: 92px;
}

/* Advanced search: breathing room between the header and the content */
.v2-legacy-page main#psycho-search {
    padding-top: 32px;
}

/* Legacy main.js toggles this class when the old login popup is requested; the
   popup does not exist here (viewLoginRegistartion is redirected to /login) */
html.reveal-log-form body.v2-legacy-page {
    overflow: auto !important;
}

/* Legacy bottom blocks (psychologists carousel, partner logos) keep their dark band */
.v2-legacy-bottom {
    position: relative;
    width: 100%;
    background-color: #2a2a2a;
}

.v2-legacy-bottom:empty {
    display: none;
}

/* layout.css gives <main> a 130px top border to clear the old fixed header;
   the new header is in the page flow, so the space is not needed any more */
.v2-legacy-page main {
    border-top: 0 !important;
}

/* Bootstrap 3 sets body { font-size: 14px; line-height: 1.42857 }: the new chrome
   inherits the same base as on the Bootstrap 5 pages */
.v2-legacy-page .site-header,
.v2-legacy-page .site-footer,
.v2-legacy-page .mobile-menu,
.v2-legacy-page .v2-user-drawer {
    font-size: 16px;
    line-height: 1.5;
}

/* ==========================================================================
   Rounded corners, as on the new homepage
   (cards 28px, media 20px, small blocks / fields 14px). Full-width bands
   (hero images, coloured strips) are deliberately left square.
   ========================================================================== */
.v2-legacy-page {
    --v2-radius-box: 28px;
    --v2-radius-media: 20px;
    --v2-radius-small: 14px;
}

/* ---------- Boxed elements ---------- */
.v2-legacy-page .box,
.v2-legacy-page .box-container .box,
.v2-legacy-page #search-widget-element,
.v2-legacy-page .pro-result,
.v2-legacy-page .faq-container,
.v2-legacy-page .info-box,
.v2-legacy-page .card,
.v2-legacy-page .banner-stats {
    border-radius: var(--v2-radius-box);
}

/* Boxes whose first / last child is an image or a coloured bar: clip them to the
   rounded shape (none of these contains a dropdown or a tooltip) */
.v2-legacy-page .box-container .box,
.v2-legacy-page .box.vertical-box,
.v2-legacy-page .box.question,
.v2-legacy-page .banner-stats,
.v2-legacy-page .info-box,
.v2-legacy-page .card {
    overflow: hidden;
}

.v2-legacy-page .accordeon,
.v2-legacy-page .category-slider-preview,
.v2-legacy-page .filters-bar,
.v2-legacy-page #pro-search-options #map,
.v2-legacy-page .breadcrumb,
.v2-legacy-page .alert,
.v2-legacy-page .well,
.v2-legacy-page .panel {
    border-radius: var(--v2-radius-small);
}

.v2-legacy-page .category-slider-preview,
.v2-legacy-page #pro-search-options #map {
    overflow: hidden;
}

/* ---------- Images ---------- */
.v2-legacy-page .article-cover-img,
.v2-legacy-page .article-cover-img img,
.v2-legacy-page .article-preview-cover,
.v2-legacy-page .articles-area figure,
.v2-legacy-page .figure-container,
.v2-legacy-page .result-face,
.v2-legacy-page .result-face > img,
/* (the cut-out illustrations of the "perché" pages are transparent PNGs) */
.v2-legacy-page main figure > img:not([id^="img-psycho"]),
.v2-legacy-page .article-content img,
.v2-legacy-page .lSSlideOuter {
    border-radius: var(--v2-radius-media);
}

.v2-legacy-page .article-cover-img,
.v2-legacy-page .article-preview-cover,
.v2-legacy-page .articles-area figure,
.v2-legacy-page .result-face,
.v2-legacy-page .lSSlideOuter {
    overflow: hidden;
}

/* Results list: the photo sits flush against the left edge of the card, which cannot
   clip it (the "gold" badge hangs outside the card) */
@media (min-width: 768px) {
    .v2-legacy-page .pro-result .result-face,
    .v2-legacy-page .pro-result .result-face > img {
        border-top-left-radius: calc(var(--v2-radius-box) - 1px);
        border-bottom-left-radius: calc(var(--v2-radius-box) - 1px);
    }
}

@media (max-width: 767px) {
    .v2-legacy-page .pro-result .result-face,
    .v2-legacy-page .pro-result .result-face > img {
        border-top-left-radius: calc(var(--v2-radius-box) - 1px);
        border-top-right-radius: calc(var(--v2-radius-box) - 1px);
    }
}

/* ---------- Tabs, buttons and fields (10px, as on the new login page) ---------- */
.v2-legacy-page main .nav-tabs {
    border-radius: var(--v2-radius-small);
    overflow: hidden;
}

/* Bootstrap keeps squaring the inner corners of .btn-group / .input-group items:
   its selectors are more specific than these */
.v2-legacy-page main .btn,
.v2-legacy-page main .form-control,
.v2-legacy-page main .pso-select,
.v2-legacy-page main .ms-choice,
.v2-legacy-page main textarea,
.v2-legacy-page main input[type="text"],
.v2-legacy-page main input[type="email"],
.v2-legacy-page main input[type="tel"],
.v2-legacy-page main input[type="password"],
.v2-legacy-page #write-question input[type="text"],
.v2-legacy-page #write-question input[type="email"],
.v2-legacy-page #write-question textarea {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .v2-legacy-page {
        --v2-radius-box: 20px;
        --v2-radius-media: 16px;
        --v2-radius-small: 12px;
    }
}

/* ==========================================================================
   Banner in the middle of the articles (Default/article_banner.html.twig)
   The article styles restyle every element of the text with ID selectors and
   !important (#psycho-article article div, p, a...): :not(#x) only raises the
   specificity of these rules above them.
   ========================================================================== */
.v2-legacy-page .article-banner {
    position: relative;
    clear: both;
    margin: 48px 0;
    padding: 56px 48px 60px;
    border-radius: 36px;
    background: #5B9AD9;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.v2-legacy-page .article-banner-body {
    position: relative;
    z-index: 1;
}

.v2-legacy-page .article-banner:not(#x) .article-banner-title {
    max-width: 640px !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: none !important;
}

.v2-legacy-page .article-banner:not(#x) .article-banner-text {
    max-width: 600px !important;
    margin: 0 auto 36px !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    text-align: center !important;
}

.v2-legacy-page .article-banner:not(#x) .article-banner-text strong {
    font-weight: 600 !important;
    color: #fff !important;
}

.v2-legacy-page .article-banner:not(#x) a.article-banner-btn {
    display: inline-block !important;
    min-width: 270px !important;
    padding: 20px 36px !important;
    border-radius: 999px;
    background: #fff !important;
    color: #5B9AD9 !important;
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.v2-legacy-page .article-banner:not(#x) a.article-banner-btn:hover,
.v2-legacy-page .article-banner:not(#x) a.article-banner-btn:focus {
    color: #3f86cf !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .45);
}

.v2-legacy-page .article-banner:not(#x) .article-banner-perks {
    display: flex !important;
    justify-content: center;
    gap: 20px;
    margin: 44px 0 0 !important;
    padding: 0 !important;
}

.v2-legacy-page .article-banner:not(#x) .article-banner-perk {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    max-width: 200px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #fff;
    border-radius: 12px;
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    color: #fff !important;
    background: none !important;
}

.v2-legacy-page .article-banner:not(#x) .article-banner-perk::before {
    content: none;
}

/* Circles, as in the rest of the new design */
.v2-legacy-page .article-banner-dot {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.v2-legacy-page .article-banner-dot--gold {
    left: 9%;
    bottom: 31%;
    width: 80px;
    height: 80px;
    background: #DFBF55;
}

.v2-legacy-page .article-banner-dot--light {
    left: -12px;
    bottom: 12px;
    width: 80px;
    height: 80px;
    background: #CBDDF3;
}

.v2-legacy-page .article-banner-dot--white {
    left: 10%;
    bottom: -75px;
    width: 110px;
    height: 110px;
    background: #fff;
}

@media (max-width: 767px) {
    .v2-legacy-page .article-banner {
        margin: 36px 0;
        padding: 40px 22px 48px;
        border-radius: 26px;
    }

    .v2-legacy-page .article-banner:not(#x) .article-banner-title {
        font-size: 25px !important;
    }

    .v2-legacy-page .article-banner:not(#x) .article-banner-text {
        margin-bottom: 28px;
        font-size: 16px !important;
    }

    .v2-legacy-page .article-banner:not(#x) a.article-banner-btn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 300px !important;
        padding: 17px 24px !important;
        font-size: 17px !important;
    }

    .v2-legacy-page .article-banner:not(#x) .article-banner-perks {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
    }

    .v2-legacy-page .article-banner:not(#x) .article-banner-perk {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 300px !important;
    }

    /* no room next to the button: the gold circle moves to the top corner */
    .v2-legacy-page .article-banner-dot--gold {
        top: -22px;
        right: -18px;
        bottom: auto;
        left: auto;
        width: 64px;
        height: 64px;
    }

    .v2-legacy-page .article-banner-dot--light {
        width: 56px;
        height: 56px;
    }

    .v2-legacy-page .article-banner-dot--white {
        left: 14%;
        bottom: -60px;
        width: 84px;
        height: 84px;
    }
}

/* Q&A: name of a professional whose profile is closed (plain text instead of the link).
   layout.css styles every span inside the heading as the grey date line. */
.v2-legacy-page .answerer-name h4 span.answerer-name-closed {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: #4a4a4a;
    text-transform: uppercase;
}

/* ==========================================================================
   Terms pages in the new layout (Privacy/general_terms_for_user.html.twig)
   ========================================================================== */
.v2-legacy-page #page-privacy.page-terms {
    padding: 40px 0 64px;
    background: transparent;
}

.v2-legacy-page #page-privacy.page-terms .box {
    padding: 48px 56px 56px;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .18);
}

.v2-legacy-page #page-privacy.page-terms article {
    max-width: 760px;
    margin: 0 auto;
}

.v2-legacy-page #page-privacy.page-terms h1 {
    margin: 0 0 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
    text-transform: none;
}

.v2-legacy-page #page-privacy.page-terms h2 {
    margin: 40px 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    text-transform: none;
}

.v2-legacy-page #page-privacy.page-terms p {
    margin: 0 0 14px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #4a4a4a;
}

.v2-legacy-page #page-privacy.page-terms ul {
    margin: 4px 0 18px;
    padding: 0 0 0 22px;
}

.v2-legacy-page #page-privacy.page-terms li {
    margin: 0 0 8px;
    padding-left: 4px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    list-style: disc;
}

.v2-legacy-page #page-privacy.page-terms li::marker {
    color: var(--blue);
}

/* first section title right below the page title (no intro paragraph) */
.v2-legacy-page #page-privacy.page-terms h1 + h2 {
    margin-top: 28px;
}

.v2-legacy-page #page-privacy.page-terms p.terms-intro {
    margin-bottom: 8px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
    font-size: 18px;
    color: var(--text-dark);
}

.v2-legacy-page #page-privacy.page-terms a {
    color: var(--blue);
    text-decoration: underline;
    word-break: break-word;
}

.v2-legacy-page #page-privacy.page-terms strong {
    font-weight: 600;
    color: var(--text-dark);
}

@media (max-width: 767px) {
    .v2-legacy-page #page-privacy.page-terms {
        padding: 20px 0 40px;
    }

    .v2-legacy-page #page-privacy.page-terms .box {
        padding: 28px 20px 32px;
    }

    .v2-legacy-page #page-privacy.page-terms h1 {
        font-size: 27px;
    }

    .v2-legacy-page #page-privacy.page-terms h2 {
        margin-top: 32px;
        font-size: 18px;
    }

    .v2-legacy-page #page-privacy.page-terms p.terms-intro {
        font-size: 17px;
    }
}

/* ==========================================================================
   Article page, small screens
   ========================================================================== */
@media (max-width: 991px) {
    /* The side blocks are stacked under the article: never pinned (js/article.js does
       not start the affix here; this also covers a window resized after the load) */
    .v2-legacy-page #psycho-article #share-more-side .aside-container,
    .v2-legacy-page #psycho-article #share-more-side .aside-container.affix,
    .v2-legacy-page #psycho-article #share-more-side .aside-container.affix-bottom {
        position: static !important;
        top: auto !important;
        width: auto !important;
        min-width: 0;
    }

    .v2-legacy-page #psycho-article #share-more-side {
        float: none;
        width: auto;
        margin-top: 24px !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* Author row: breathing room under the header, round photo that is not squashed */
    .v2-legacy-page #psycho-article #publisher-side {
        margin-top: 20px;
    }

    .v2-legacy-page #psycho-article #publisher-side .pro-face {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
    }

    .v2-legacy-page #psycho-article #publisher-side .pro-face img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* "Autore / Autrice" label: the legacy negative margin pushed it under the header */
    .v2-legacy-page #psycho-article #publisher-side small.autrice {
        display: block;
        float: none;
        margin-top: 0 !important;
        line-height: 1.2;
        color: #828182;
        text-align: left;
    }

    .v2-legacy-page #psycho-article #publisher-side h3 {
        margin-top: 0;
        padding-top: 2px;
    }
}

/* ---------- Privacy notices (Privacy/privacy_for_*.html.twig): long legal text with tables ---------- */
.v2-legacy-page #page-privacy.page-terms--wide article {
    max-width: 880px;
}

/* subtitle inside the title ("ex art. 13 ...") */
.v2-legacy-page #page-privacy.page-terms h1 small {
    display: block;
    margin-top: 8px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-muted);
    text-transform: none;
}

.v2-legacy-page #page-privacy.page-terms h1 strong {
    font-weight: inherit;
    color: inherit;
}

/* these pages have more than one <h1>: the following ones are section titles */
.v2-legacy-page #page-privacy.page-terms h1 ~ h1 {
    margin: 44px 0 14px;
    font-size: 24px;
}

.v2-legacy-page #page-privacy.page-terms h3 {
    margin: 30px 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    text-transform: none;
}

.v2-legacy-page #page-privacy.page-terms .content-table {
    margin: 18px 0 24px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    overflow: auto !important;
}

.v2-legacy-page #page-privacy.page-terms table {
    display: table;
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
}

.v2-legacy-page #page-privacy.page-terms .content-table table {
    margin: 0;
}

.v2-legacy-page #page-privacy.page-terms td,
.v2-legacy-page #page-privacy.page-terms th {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    vertical-align: top;
}

.v2-legacy-page #page-privacy.page-terms tr:last-child > td {
    border-bottom: 0;
}

.v2-legacy-page #page-privacy.page-terms td:last-child {
    border-right: 0;
}

/* header row of the data tables (3+ columns; the two-column contact table has none) */
.v2-legacy-page #page-privacy.page-terms .content-table tr:first-child:has(> td:nth-child(3)) > td {
    background: var(--bg);
}

/* some sentences of the legacy text have no spaces between the words: without this
   they push the page wider than a phone screen */
.v2-legacy-page #page-privacy.page-terms article {
    overflow-wrap: anywhere;
}

.v2-legacy-page #page-privacy.page-terms td p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
}

.v2-legacy-page #page-privacy.page-terms td p:last-child {
    margin-bottom: 0;
}

/* ---------- Links to the detailed notices (page "Cookie e privacy") ---------- */
.v2-legacy-page .terms-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0 36px;
}

.v2-legacy-page #page-privacy.page-terms a.terms-cta-card {
    position: relative;
    display: block;
    padding: 22px 56px 22px 24px;
    border-radius: 20px;
    background: var(--blue-light);
    color: var(--text-dark);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.v2-legacy-page #page-privacy.page-terms a.terms-cta-card:hover,
.v2-legacy-page #page-privacy.page-terms a.terms-cta-card:focus {
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.v2-legacy-page .terms-cta-card span {
    display: block;
}

.v2-legacy-page .terms-cta-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

.v2-legacy-page .terms-cta-title {
    margin: 4px 0 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.v2-legacy-page .terms-cta-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    opacity: .85;
}

.v2-legacy-page .terms-cta-arrow {
    position: absolute;
    top: 50%;
    right: 22px;
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .v2-legacy-page .terms-cta {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 22px 0 28px;
    }

    .v2-legacy-page #page-privacy.page-terms h1 ~ h1 {
        font-size: 21px;
    }
}

/* ---------- Article tiles (category lists, articles of a psychologist) ---------- */
/* Cover and text box are two stacked elements: rounded as one card, top corners on the
   cover and bottom corners on the box */
.v2-legacy-page .article-preview .article-preview-cover {
    border-radius: var(--v2-radius-box) var(--v2-radius-box) 0 0;
}

.v2-legacy-page .article-preview .box {
    border-radius: 0 0 var(--v2-radius-box) var(--v2-radius-box);
}

/* ---------- Article page: "Altri articoli" in the side column ---------- */
.v2-legacy-page #psycho-article #recommended-posts ul,
.v2-legacy-page #psycho-event-single #recommended-posts ul {
    border-left: 0;
}

.v2-legacy-page #psycho-article #recommended-posts .recommended,
.v2-legacy-page #psycho-event-single #recommended-posts .recommended {
    width: 100%;
    margin-left: 0;
    border-radius: var(--v2-radius-media);
    overflow: hidden;
}

/* the hover zoom of the photo stays inside the rounded shape (Safari) */
.v2-legacy-page #psycho-article #recommended-posts .recommended a,
.v2-legacy-page #psycho-event-single #recommended-posts .recommended a {
    border-radius: var(--v2-radius-media);
    overflow: hidden;
}

/* ---------- "Lo psicologo risponde": pinned question form ---------- */
/* Pinned under the new header (js/question_answer.js, PINNED_TOP); taller than the window,
   it scrolls inside itself down to its submit button (the old rule pinned it at 145px, under
   the old header, and only when it fitted in the window) */
/* (#questions-category: style.css pins it at 90px there with a more specific selector;
   below 992px the form stays in the flow, these rules must not reach it) */
/* single question page, question header: style.css turns every <span> of the name line
   into a block (the "domande di ... | Inserita il" line), including the date nested in it,
   which went to a line of its own under "Inserita il" */
.v2-legacy-page #question-single .questioner-name h4 span span {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* category and single question pages: style.css keeps the form always fixed (old layout,
   so a short window never reaches its bottom); it is in the flow until pinned by
   question_answer.js, like on the Q&A home */
.v2-legacy-page #questions-category #write-question .box,
.v2-legacy-page #question-single #write-question .box {
    position: relative;
    max-width: none;
}

@media (min-width: 992px) {
    .v2-legacy-page #write-question .box.affix,
    .v2-legacy-page #questions-category #write-question .box.affix,
    .v2-legacy-page #question-single #write-question .box.affix {
        position: fixed;
        top: 112px;
    }

    .v2-legacy-page #questions-category #write-question .box.affix-bottom,
    .v2-legacy-page #question-single #write-question .box.affix-bottom {
        position: absolute;
    }

    /* never an inner scrollbar: a form taller than the window is pinned by its bottom
       (question_answer.js sets the top inline) */
}

/* the province select sits right under the e-mail / phone row: same spacing as the inputs */
.v2-legacy-page #write-question select.pso-select[name$="[province]"] {
    margin-top: 15px;
}

/* name / surname and e-mail / phone side by side (desktop): a narrower gutter than the grid */
.v2-legacy-page #write-question .form-pair {
    margin-left: -6px;
    margin-right: -6px;
}

.v2-legacy-page #write-question .form-pair > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* ---------- Courses and events list: tiles as rounded cards ---------- */
/* the cards live in #events-wrapper inside the <ul>; flex rows give them equal heights */
.v2-legacy-page #event-search .event-container,
.v2-legacy-page #event-search .event-container #events-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.v2-legacy-page #event-search .event-container .event-card {
    display: flex;
    flex-direction: column;
    float: none;
    max-height: none;
}

/* the card is the inner pair image + content (the <li> keeps the grid gutters) */
.v2-legacy-page #event-search .event-container .event-card .card-title {
    border-radius: var(--v2-radius-box) var(--v2-radius-box) 0 0;
    overflow: hidden;
}

.v2-legacy-page #event-search .event-container .event-card .card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border-radius: 0 0 var(--v2-radius-box) var(--v2-radius-box);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 0 rgba(0, 0, 0, .05);
}

/* the "Scopri" button always at the bottom, whatever the length of the text */
.v2-legacy-page #event-search .event-container .event-card .card-content .event-description {
    flex: 1 1 auto;
}

.v2-legacy-page #event-search .event-container .event-card .card-content .card-btn {
    align-self: flex-end;
    border-radius: 999px;
}

.v2-legacy-page #event-search .event-container .no-event-found {
    width: 100%;
}

/* ---------- Article page: decorative circles under "Altri articoli" / "i più letti" ---------- */
/* Three circles peeking from behind the end of the side column, as in the Figma design.
   They live inside #recommended-posts: the bottom padding reserves their room, so the
   pinned column (js/article.js) stops at the end of the article with the circles included. */
/* below 1200px the side column is narrow or stacked under the article: no circles */
.v2-legacy-page .aside-deco {
    display: none;
}

@media (min-width: 1200px) {
    .v2-legacy-page #psycho-article #recommended-posts {
        position: relative;
        padding-bottom: 220px;
    }

    .v2-legacy-page #psycho-article #recommended-posts ul {
        position: relative;
        z-index: 1;
    }

    .v2-legacy-page .aside-deco {
        display: block;
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    /* protrudes past the column by the page margin at most: no horizontal scroll at 1200px */
    .v2-legacy-page .aside-deco-blue-big {
        width: 180px;
        height: 180px;
        right: -30px;
        bottom: 150px;
        background: #DBEDFB;
    }

    .v2-legacy-page .aside-deco-gold {
        width: 80px;
        height: 80px;
        right: 25px;
        bottom: 70px;
        background: #E6BD3E;
    }

    .v2-legacy-page .aside-deco-blue-small {
        width: 95px;
        height: 95px;
        left: 50px;
        bottom: 10px;
        background: #DBEDFB;
    }
}