/**/.imageWidget{position:relative}.imageWidget a,.imageWidget span.image-caption{font-style:italic;text-align:center}.imageWidget a[data-caption]::after,.imageWidget span[data-caption]::after{content:attr(data-caption);display:block;line-height:100%}
.imageWidget.with-caption a::after,.imageWidget.with-caption span.image-caption::after{margin-top:12px}.imageWidget img[width][height]{height:auto}[data-flex-site] #fcontainer .imageWidget:after,[data-flex-site] #flex-footer .imageWidget:after,[data-flex-site] #flex-header .imageWidget:after{content:none}
[data-flex-site] #fcontainer .imageWidget:before,[data-flex-site] #flex-footer .imageWidget:before,[data-flex-site] #flex-header .imageWidget:before{font-size:80px;transform:none}.imageWidget.hover img.hover-image,.imageWidget:hover img.hover-image{display:initial}
.imageWidget.hover.hasHover img:not(.hover-image),.imageWidget:hover.hasHover img:not(.hover-image){display:none!important}.imageWidget img.hover-image,.imageWidget img.logo-on-scroll{display:none}/**/.dmNewParagraph[data-version] .text-align-left{text-align:left!important}.dmNewParagraph[data-version] .text-align-center{text-align:center!important}.dmNewParagraph[data-version] .text-align-right{text-align:right!important}
.dmNewParagraph[data-version] .text-align-justify{text-align:justify!important}.dmNewParagraph[data-version] .ql-indent-1{padding:0 1em;padding-inline-end:0;padding-inline-start:3em}.dmNewParagraph[data-version] .ql-indent-2{padding:0 2em;padding-inline-end:0;padding-inline-start:6em}
.dmNewParagraph[data-version] .ql-indent-3{padding:0 3em;padding-inline-end:0;padding-inline-start:9em}.dmNewParagraph[data-version] .ql-indent-4{padding:0 4em;padding-inline-end:0;padding-inline-start:12em}
.dmNewParagraph[data-version] .ql-indent-5{padding:0 5em;padding-inline-end:0;padding-inline-start:15em}.dmNewParagraph[data-version] .ql-indent-6{padding:0 6em;padding-inline-end:0;padding-inline-start:18em}
.dmNewParagraph[data-version] .ql-indent-7{padding:0 7em;padding-inline-end:0;padding-inline-start:21em}.dmNewParagraph[data-version] .ql-indent-8{padding:0 8em;padding-inline-end:0;padding-inline-start:24em}
.dmNewParagraph[data-version] .ql-indent-9{padding:0 9em;padding-inline-end:0;padding-inline-start:27em}.dmNewParagraph[data-version]{line-height:initial}.dmNewParagraph[data-version] [class*=size-]{width:auto!important;height:auto!important}
.dmNewParagraph[data-version] h1,.dmNewParagraph[data-version] h2,.dmNewParagraph[data-version] h3,.dmNewParagraph[data-version] h4,.dmNewParagraph[data-version] h5,.dmNewParagraph[data-version] h6,.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] p,.dmNewParagraph[data-version] ul{margin-top:0;margin-bottom:0}
.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] ul{padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.dmNewParagraph[data-version] ol>li,.dmNewParagraph[data-version] ul>li{list-style-type:none;text-indent:-1.5em;margin:0 1em;margin-inline-end:0;margin-inline-start:2em}
.dmNewParagraph[data-version] ol>li:before,.dmNewParagraph[data-version] ul>li:before{min-width:1em;display:inline-block;margin-right:.5em;margin-inline-start:0;margin-inline-end:.5em;text-align:right;text-align:end}
.dmNewParagraph[data-version] ul .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ul .ql-indent-1:before{font-weight:700;content:"○"}
.dmNewParagraph[data-version] ul .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ul .ql-indent-2:before,.dmNewParagraph[data-version] ul .ql-indent-3:before,.dmNewParagraph[data-version] ul .ql-indent-4:before,.dmNewParagraph[data-version] ul .ql-indent-5:before,.dmNewParagraph[data-version] ul .ql-indent-6:before,.dmNewParagraph[data-version] ul .ql-indent-7:before,.dmNewParagraph[data-version] ul .ql-indent-8:before,.dmNewParagraph[data-version] ul .ql-indent-9:before{font-weight:700;content:"■"}
.dmNewParagraph[data-version] ul .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ul .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}
.dmNewParagraph[data-version] ul .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ul .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}
.dmNewParagraph[data-version] ul .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ul .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ul .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}
.dmNewParagraph[data-version] ul>li:before{font-weight:700;content:"•";font-family:Arial}.dmNewParagraph[data-version] ul.custom-list-1>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"○";transform:scale(1);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-2>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"★";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-3>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"➞";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-4>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"＋";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-5>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"－";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-6>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✓";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-7>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✗";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ol .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ol .ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ol .ql-indent-2:before{content:counter(list-2,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ol .ql-indent-3:before{content:counter(list-3,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}.dmNewParagraph[data-version] ol .ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ol .ql-indent-5:before{content:counter(list-5,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}.dmNewParagraph[data-version] ol .ql-indent-6:before{content:counter(list-6,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ol .ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ol .ql-indent-8:before{content:counter(list-8,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}.dmNewParagraph[data-version] ol .ql-indent-9:before{content:counter(list-9,decimal) ". "}
.dmNewParagraph[data-version] ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.dmNewParagraph[data-version] ol li:before{content:counter(list-0,decimal) ". "}
.dmNewParagraph[data-version] a{vertical-align:initial}@media(min-width:768px) and (max-width:1024px){.dmNewParagraph[data-version] .t-text-align-left{text-align:left!important}.dmNewParagraph[data-version] .t-text-align-center{text-align:center!important}
.dmNewParagraph[data-version] .t-text-align-right{text-align:right!important}.dmNewParagraph[data-version] .t-text-align-justify{text-align:justify!important}}@media(max-width:767px){.dmRoot .dmNewParagraph[data-version] .m-text-align-left{text-align:left!important}
.dmRoot .dmNewParagraph[data-version] .m-text-align-center{text-align:center!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-right{text-align:right!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-justify{text-align:justify!important}
}.inlineBindingLink{color:inherit!important;text-decoration:inherit!important}/**/@media(max-width:767px){body.dmRoot div[dmtemplateid]:not([dmtemplateid=SlideRightTopFloatM]) .dmHeader .multilingualWidget{position:absolute;top:14px;left:13px;margin-top:0}body.dmRoot div[dmtemplateid][dmtemplateid=SlideRightTopFloatM] .dmHeader .multilingualWidget{position:absolute;top:5px;right:17px}
}@media(min-width:768px) and (max-width:1024px){body:not(.responsiveTablet) #dm div[dmtemplateid=StandardLayoutMultiT] .dmHeader .multilingualWidget{position:absolute!important;top:5px!important;right:17px!important;left:initial!important}
}@media(max-width:767px){body.dmRoot .dmHeader .displayHidden-inner .multilingualWidget{top:0!important}}#dm_content div.dmRespCol div.multilingualWidget,#hcontainer div.dmRespCol div.multilingualWidget{width:auto!important;display:table!important}
.multilingualWidget.displayNone{display:none!important}.multilingualWidget>div{position:relative}.multilingualWidget{clear:both;margin:0;vertical-align:top;display:table!important;font-size:0;font-family:sans-serif}
.multilingualWidget .language{color:#888;display:inline-block}.multilingualWidget .language a{text-align:center;display:inline-block;color:inherit;border:#dadada 1px solid;background-color:#fff}.multilingualWidget .language a img{width:24px;height:26px;min-width:24px;min-height:26px}
.multilingualWidget .language a span{display:none;line-height:initial}.multilingualWidget .language a span.name{margin-top:5px;margin-left:7px;font-size:12px;font-weight:400;text-transform:capitalize}
.multilingualWidget .language a span.short-label{font-size:12px}.multilingualWidget .language a:after{line-height:initial}.multilingualWidget.open .current-language a:after{transform:rotate(-180deg)}.multilingualWidget .current-language a:after{transition:transform .2s}
.multilingualWidget.dropdown .language{width:100%}.multilingualWidget.dropdown .language a{display:block;padding:1px 5px}.multilingualWidget.dropdown .language.other-languages{position:absolute;z-index:800;max-height:0;overflow:hidden;transition:max-height .1s ease-in-out}
.multilingualWidget.dropdown .language.other-languages a{border-top:0!important}.multilingualWidget.dropdown .current-language{position:relative}.multilingualWidget.dropdown .current-language span.name{padding-right:25px}
.multilingualWidget.dropdown .dm-icon{font-size:9px;display:inline-block;position:absolute;top:46%;transform:translateY(-50%);transition:transform .2s;right:8px}.multilingualWidget.dropdown.open .dm-icon{transform:rotate(-180deg) translateY(50%)}
.multilingualWidget.dropdown.open .other-languages{display:block;max-height:300px}.multilingualWidget.dropdown .other-languages,.multilingualWidget.dropdown.flag-only .dm-icon,.multilingualWidget.inline span,.multilingualWidget.no-flag a img{display:none}
.multilingualWidget.dropdown.flag-only a{border:transparent 1px solid;background-color:transparent}.multilingualWidget.dropdown.flag-only.open .language a{background-color:rgba(0,0,0,.3);border:#dadada 1px solid}
.multilingualWidget.dropdown.long-label a{text-align:left;padding:2px 0 2px 5px;position:relative;box-sizing:border-box}.multilingualWidget.dropdown.long-label a span.name,.multilingualWidget.inline.flag-only .language,.multilingualWidget.inline.short-label.no-flag span.short-label{display:inline-block}
.multilingualWidget.dropdown.long-label.no-flag a{padding:7px 10px 9px}.multilingualWidget.dropdown.long-label.no-flag a span.name,.multilingualWidget.dropdown.short-label.no-flag a span.short-label{margin:0;display:inline-block}
.multilingualWidget.dropdown.short-label.no-flag a{padding:8px 22px 9px 10px;font-size:12px;min-height:32px;height:auto;box-sizing:border-box}.multilingualWidget.dropdown.short-label.no-flag .current-language a:after{top:12px}
.multilingualWidget.short-label span.short-label{text-transform:uppercase}.multilingualWidget.inline.flag-only a{padding:2px 5px;height:32px;box-sizing:border-box}.multilingualWidget.inline.flag-only .current-language a{box-shadow:inset 0 0 8px 0 rgba(0,0,0,.6);border-right:0;border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}
.multilingualWidget.inline.flag-only .other-languages a:not(:last-child){border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}.multilingualWidget.inline.flag-only .dm-icon,.multilingualWidget.inline.short-label.no-flag .dm-icon{display:none}
.multilingualWidget.inline.short-label.no-flag .current-language a{padding-right:0;border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}.multilingualWidget.inline.short-label.no-flag .current-language a span.short-label{font-weight:700}
.multilingualWidget.inline.short-label.no-flag .other-languages a{border-left-color:transparent!important;border-left-width:0!important;border-left-style:none!important}.multilingualWidget.inline.short-label.no-flag .other-languages a:not(:last-child){padding-right:0;border-right-color:transparent!important;border-right-width:0!important;border-right-style:none!important}
.multilingualWidget.inline.short-label.no-flag a{position:relative;padding:8px 10px;font-size:12px;min-height:32px;height:auto;text-decoration:none}.multilingualWidget.inline.short-label.no-flag a:after{content:"/";position:absolute;top:8px;right:-7px;z-index:1;pointer-events:none}
.multilingualWidget.inline.short-label.no-flag a:hover .short-label{text-decoration:underline}.multilingualWidget.inline.short-label.no-flag .other-languages a:last-child:after{content:""}
/* Custom Widgets Styles */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
/* ============================================================
   CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #F5F9FD;
  color: #4A4A4A;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen {
  display: none;
  min-height: 100vh;
}

.screen.active {
  display: block;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #B33028;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  max-width: 320px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(145deg, #F5F9FD 0%, #E8F2FA 100%);
}

.login-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.brand-mark {
  margin-bottom: 24px;
}

.login-title {
  font-size: 26px;
  font-weight: 800;
  color: #000;
  line-height: 1.3;
  margin-bottom: 8px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.login-brand {
  color: #3D7CB8;
}

.login-sub {
  font-size: 15px;
  color: #6B7280;
  margin-bottom: 32px;
}

.login-card .form-group {
  margin-bottom: 24px;
}

/* ============================================================
   VENDITORE BADGE (header)
   ============================================================ */
.venditore-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #F0F7FF 0%, #EBF4FC 100%);
  border: 1.5px solid #C8DFF2;
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  margin-bottom: 16px;
  width: fit-content;
}

.venditore-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2F6E1B;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(47, 110, 27, 0.18);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(47, 110, 27, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(47, 110, 27, 0.08);
  }
}
.venditore-badge-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.venditore-badge-nome {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.venditore-badge-mat {
  font-size: 11px;
  font-weight: 500;
  color: #3D7CB8;
  letter-spacing: 0.03em;
}

/* ============================================================
   STEPS HEADER / STEPPER
   ============================================================ */
.steps-header {
  background: #fff;
  border-bottom: 1.5px solid #E8E8E5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.steps-header-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 24px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E8E8E5;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s;
}

.step-item.active .step-circle {
  background: #000;
  color: #fff;
}

.step-item.done .step-circle {
  background: #2F6E1B;
  color: #fff;
}

.step-label {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.step-item.active .step-label {
  color: #000;
}

.step-item.done .step-label {
  color: #2F6E1B;
}

.step-connector {
  flex: 1;
  height: 2px;
  background: #E8E8E5;
  min-width: 40px;
  max-width: 100px;
  margin-bottom: 20px;
  transition: background 0.25s;
}

.step-connector.done {
  background: #2F6E1B;
}

/* ============================================================
   STEP CONTENT
   ============================================================ */
.step-content {
  display: none;
}

.step-content.active {
  display: block;
}

.step-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.step-title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin-bottom: 24px;
}

/* ============================================================
   TOGGLE SOCIO MUTUA
   ============================================================ */
.toggle-card {
  background: #fff;
  border: 1.5px solid #E8E8E5;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.toggle-card-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
}

.toggle-switch-wrap {
  display: flex;
  border: 1.5px solid #E8E8E5;
  border-radius: 100px;
  overflow: hidden;
}

.toggle-btn {
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.toggle-btn.active {
  background: #000;
  color: #fff;
}

/* ============================================================
   PET CARD
   ============================================================ */
.pet-card {
  background: #fff;
  border: 1.5px solid #E8E8E5;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}

.pet-card:hover {
  border-color: #91BEE7;
}

.pet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.pet-card-num {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pet-card-num-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-pet {
  background: none;
  border: 1.5px solid #E8E8E5;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #B33028;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-remove-pet:hover {
  background: #FFF0EE;
  border-color: #B33028;
}

.pet-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.pet-form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Piano selector */
.piano-label {
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
  margin-bottom: 10px;
}

.piani-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.piano-card {
  border: 1.5px solid #E8E8E5;
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.piano-card:hover {
  border-color: #91BEE7;
  background: #F5F9FD;
}

.piano-card.selected {
  border: 2.5px solid #000;
  background: #F0F7FF;
}

.piano-card-code {
  font-size: 11px;
  font-weight: 700;
  color: #3D7CB8;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.piano-card-level {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.piano-card-massimale {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}

.pet-prezzo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F5F9FD;
  border-radius: 10px;
  font-size: 14px;
  color: #4A4A4A;
}

.pet-prezzo-val {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* ============================================================
   ADD PET BUTTON
   ============================================================ */
.btn-add-pet {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px dashed #91BEE7;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #3D7CB8;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  margin-bottom: 28px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-add-pet:hover {
  background: #F0F7FF;
  border-color: #3D7CB8;
}

.btn-add-pet:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   COST SUMMARY
   ============================================================ */
.cost-summary {
  background: #fff;
  border: 1.5px solid #E8E8E5;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
}

.cost-summary-title {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cost-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #4A4A4A;
}

.cost-row-val {
  font-weight: 600;
  color: #000;
}

.cost-row.discount .cost-row-val {
  color: #2F6E1B;
}

.cost-row.divider-row {
  border-top: 1px solid #E8E8E5;
  padding-top: 8px;
  margin-top: 2px;
}

.cost-nota {
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
  margin-top: 10px;
  padding: 8px 12px;
  background: #F5F9FD;
  border-radius: 8px;
}

.cost-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid #000;
  margin-top: 14px;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #000;
}

.cost-total-val {
  font-size: 24px;
  font-weight: 800;
  color: #000;
}

/* ============================================================
   FORM COMPONENTS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
}

.req {
  color: #B33028;
}

.form-input {
  border: 1.5px solid #E8E8E5;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #000;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.form-input:focus {
  border-color: #91BEE7;
  box-shadow: 0 0 0 3px rgba(145, 190, 231, 0.18);
}

.form-input.error {
  border-color: #B33028;
  box-shadow: 0 0 0 3px rgba(179, 48, 40, 0.1);
}

select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4A4A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field-error {
  font-size: 12px;
  color: #B33028;
  font-weight: 500;
}

.form-section {
  background: #fff;
  border: 1.5px solid #E8E8E5;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8E8E5;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 16px;
}

/* INFO BANNER */
.info-banner {
  background: #EBF4FC;
  border: 1px solid #91BEE7;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #3D7CB8;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.info-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   STEP NAVIGATION
   ============================================================ */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  gap: 16px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary:hover {
  background: #3D7CB8;
}

.btn-secondary {
  background: #fff;
  color: #4A4A4A;
  border: 1.5px solid #E8E8E5;
  border-radius: 100px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: #91BEE7;
  background: #F5F9FD;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-confirm {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 20px 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  letter-spacing: 0.01em;
}

.btn-confirm:hover {
  background: #3D7CB8;
}

.btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #000;
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   INLINE SKELETON / CALCOLO LOADER
   ============================================================ */
.val-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 500;
}

.val-loading .mini-spin {
  width: 13px;
  height: 13px;
  border: 2px solid #E8E8E5;
  border-top-color: #3D7CB8;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

/* skeleton shimmer per righe costo nel summary */
.cost-row-skeleton {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skeleton-bar {
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton-bar.short {
  width: 100px;
}

.skeleton-bar.medium {
  width: 160px;
}

.skeleton-bar.small {
  width: 52px;
}

/* ============================================================
   RECAP VENDITORE (STEP 3)
   ============================================================ */
.recap-venditore-block {
  border-color: #91BEE7;
  background: linear-gradient(135deg, #F0F7FF 0%, #EBF4FC 100%);
}

.recap-venditore-block .recap-block-title {
  color: #3D7CB8;
  border-bottom-color: #C8DFF2;
}

/* ============================================================
   RECAP BLOCKS (STEP 3)
   ============================================================ */
.recap-block {
  background: #fff;
  border: 1.5px solid #E8E8E5;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.recap-block-title {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8E8E5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.recap-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recap-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recap-field-val {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.recap-pet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #F5F9FD;
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.recap-pet-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recap-pet-name {
  font-size: 15px;
  font-weight: 700;
  color: #000;
}

.recap-pet-detail {
  font-size: 12px;
  color: #6B7280;
}

.recap-pet-piano {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.recap-pet-piano-code {
  font-size: 12px;
  font-weight: 700;
  color: #3D7CB8;
  text-transform: uppercase;
}

.recap-pet-prezzo {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* ============================================================
   SUCCESS SCREEN
   ============================================================ */
.success-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(145deg, #F5F9FD 0%, #E8F2FA 100%);
}

.success-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.success-icon {
  margin-bottom: 20px;
}

.success-title {
  font-size: 24px;
  font-weight: 800;
  color: #000;
  margin-bottom: 12px;
}

.success-id-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 28px;
}

.success-id {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  background: #F5F9FD;
  padding: 4px 12px;
  border-radius: 100px;
}

.success-pdf-btn {
  margin-bottom: 24px;
  justify-content: center;
  font-size: 15px;
}

/* CAUSALE BOX */
.causale-box {
  background: #FFFBE6;
  border: 1.5px solid #F5D25A;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: left;
  margin-bottom: 16px;
}

.causale-box-label {
  font-size: 13px;
  color: #7A6000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.causale-box-label svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.causale-code-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 10px 14px;
}

.causale-code {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  flex: 1;
  letter-spacing: 0.05em;
  word-break: break-all;
}

.btn-copia {
  background: none;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: #3D7CB8;
  transition: background 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.btn-copia:hover {
  background: #F0F7FF;
}

.success-totale-row {
  font-size: 15px;
  color: #4A4A4A;
  margin-bottom: 8px;
}

.success-totale-row strong {
  color: #000;
  font-size: 18px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   ABANDON BAR
   ============================================================ */
.abandon-bar {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: flex;
  justify-content: flex-end;
}

.btn-abbandona {
  background: none;
  border: 1.5px solid #E8E8E5;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.btn-abbandona:hover {
  border-color: #B33028;
  color: #B33028;
  background: #FFF0EE;
}

@media (max-width: 640px) {
  .abandon-bar {
    padding: 10px 16px 0;
  }
}
@media (max-width: 640px) {
  .step-inner {
    padding: 24px 16px 40px;
  }
  .pet-form-grid,
  .pet-form-grid-3,
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
  .form-grid-3 .form-group[style*="span 2"] {
    grid-column: span 1 !important;
  }
  .piani-grid {
    grid-template-columns: 1fr;
  }
  .recap-grid {
    grid-template-columns: 1fr;
  }
  .login-card {
    padding: 36px 24px;
    max-width: 100%;
  }
  .success-card {
    padding: 32px 20px;
  }
  .toggle-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .step-label {
    display: none;
  }
  .step-connector {
    min-width: 24px;
  }
  .btn-confirm {
    font-size: 14px;
    padding: 16px 20px;
  }
  .steps-header-inner {
    padding: 16px 16px;
  }
}
@media (max-width: 380px) {
  .pet-prezzo-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* ============================================================
   CONSENSI BLOCK (STEP 3)
   ============================================================ */
.recap-consensi-block {
  border-color: #C8DFF2;
}

.consenso-item {
  padding: 14px 0;
  border-bottom: 1px solid #F0F0F0;
}

.consenso-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.consenso-item:first-of-type {
  padding-top: 0;
}

.consenso-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #000;
  font-weight: 500;
  line-height: 1.5;
}

.consenso-cb {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: #000;
  cursor: pointer;
  margin-top: 2px;
}

.consenso-punti-list {
  margin: 10px 0 0 30px;
  padding: 0;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consenso-punti-list li {
  font-size: 13px;
  color: #4A4A4A;
  line-height: 1.5;
}

.consenso-link {
  color: #3D7CB8;
  text-decoration: underline;
  font-weight: 600;
}

.consenso-link:hover {
  color: #000;
}

.consenso-radio-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consenso-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
}

.consenso-toggle-group {
  width: fit-content;
}

/* ============================================================
   RESPONSIVE — consensi
   ============================================================ */
@media (max-width: 640px) {
  .consenso-toggle-group {
    width: 100%;
  }
  .consenso-toggle-group .toggle-btn {
    flex: 1;
    text-align: center;
  }
}