/* --- Root Variables (used throughout) --- */
:root {
    --bi-logo-main: url("../../master/assets/img/logo-white.svg");
    --bi-back-to-top: url("../../master/assets/img/back-to-top-filled.svg");
    --c-pri: #fff;
    --c-sec: #000;
    --c-bg: #fff;
    --c-01: #06c;
    --c-02: #036;
    --c-03: #3d648b;
    --c-04: #1c2024;
    --c-06: #dbdbd7;
    --c-07: #ff8c00;
    --c-08: #ccc;
    --c-09: #f8f8f8;
    --c-10: #a8a8a8;
    --c-11: #f5f5f0;
    --c-12: #edf4f9;
    --c-13: #a9ebef;
    --c-14: #dceaf4;
    --c-16: #ccdfee;
    --c-20: #8ebeed;
    --c-28: #294766;
    --c-29: #26394d;
    --c-30: #65dee0;
    --c-31: #5a6772;
    --c-32: #edf4f9;
    --c-33: #e5f0f8;
    --c-34: #f0f0f0;
    --c-35: #021602;
    --c-36: #ea0029;
    --c-37: #eaeaea;
    --c-38: #fff7f3;
    --c-39: #6eace5;
    --c-40: #ecfbf0;
    --c-41: #76C587;
    --c-50: #5b6873;
    --c-51: #52969b;
    --c-52: #30373d;
    --c-53: #777;
    --c-55: #19450E;
    --c-56: #394935;
    --c-58: #793535;
}

/* --- Basic Element Styling (relevant parts) --- */
*{
    font-family: "Titillium-Web", sans-serif !important;
}
body,
html {
    color: var(--c-04);
    background: var(--c-34);
    font-size: 16px;
    font-size: 1rem;
}

a {
    color: var(--c-01);
}

a:hover {
    color: var(--c-02);
}

ul {
    list-style-type: disc;
    list-style-position: outside;
}

ul.type-none {
    list-style-type: none;
}

/* --- Animation --- */
.animate-04 {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.slide-in {
    -webkit-animation-name: slide-in;
    animation-name: slide-in;
}

@-webkit-keyframes slide-in {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 1
    }
    0% { /* This is a duplicate 0% in your original CSS, the latter will likely apply */
        -webkit-transform: translateY(0rem);
        transform: translateY(0rem);
        opacity: 0
    }
}

@keyframes slide-in {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 1
    }
    0% { /* This is a duplicate 0% in your original CSS, the latter will likely apply */
        -webkit-transform: translateY(0rem);
        transform: translateY(0rem);
        opacity: 0
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .animate-04 {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
    }
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    z-index: 480;
}

/* --- IDP Container & Buttons (SPID/CIE) --- */
.idp-container .idp-btn {
    background-color: var(--c-01);
    color: var(--c-pri);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.idp-container .idp-btn:active,
.idp-container .idp-btn:hover {
    background-color: var(--c-02);
}

.idp-container .idp-btn:active { /* This overrides the previous :active specific rule */
    background-color: var(--c-01);
}

.idp-container .cie-btn, /* .cie-btn part is not in your HTML but grouped in original CSS */
.idp-container .italia-it-btn {
    text-decoration: none;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 150px;
}

.idp-container .cie-btn .cie-btn-icon,
.idp-container .cie-btn .italia-it-btn-icon, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn .italia-it-btn-icon {
    padding: 0.6rem 0.8rem;
    line-height: 1;
    border-right: solid 1px rgba(255, 255, 255, 0.3);
}

.idp-container .cie-btn .cie-btn-icon img,
.idp-container .cie-btn .italia-it-btn-icon img, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn .italia-it-btn-icon img {
    width: 18px;
    height: 18px;
}

.idp-container .cie-btn .cie-btn-text,
.idp-container .cie-btn .italia-it-btn-text, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn .italia-it-btn-text {
    padding-left: 0.6rem;
    font-size: 0.8rem;
}

.idp-container .cie-btn.cie-btn-size-l,
.idp-container .italia-it-btn-size-l.cie-btn, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn.italia-it-btn-size-l {
    max-width: 280px;
}

.idp-container .cie-btn.cie-btn-size-l img,
.idp-container .italia-it-btn-size-l.cie-btn img, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn.italia-it-btn-size-l img { /* Applies to the img in your .italia-it-btn-icon */
    width: 38px;
    height: 38px;
}

.idp-container .cie-btn.cie-btn-size-l .cie-btn-text,
.idp-container .cie-btn.cie-btn-size-l .italia-it-btn-text,
.idp-container .cie-btn .italia-it-btn.italia-it-btn-size-l .cie-btn-text, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn-size-l.cie-btn .cie-btn-text,
.idp-container .italia-it-btn-size-l.cie-btn .italia-it-btn-text, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn.italia-it-btn-size-l .cie-btn .cie-btn-text, /* .cie-btn part not in HTML */
.idp-container .italia-it-btn.italia-it-btn-size-l .italia-it-btn-text { /* Applies to the .italia-it-btn-text span */
    padding-left: 1rem;
    font-size: 1.4rem;
}

.idp-container .dropdown.show>.dropdown-menu { /* Applies when the dropdown has class 'show' */
    top: 80%;
}

/* Specific CIE icon sizing - might be relevant if the SPID image uses similar structure, but class is .cie-btn */
/* These were included as they were near the .italia-it-btn styles in the original CSS.
   If your SPID image inside .italia-it-btn-icon needs specific sizing different from the generic one above,
   you might need a similar specific rule for .italia-it-btn .italia-it-btn-icon img */
.idp-container .cie-btn .cie-btn-icon img {
    width: 19px;
    height: 20px;
}

.idp-container .cie-btn.cie-btn-size-l img {
    width: 35px;
    height: 38px;
}

.idp-container .cie-btn.cie-btn-size-l .cie-btn-text {
    padding-left: 1rem;
    font-size: 1.4rem;
}


/* --- SPID IDP Button Specifics --- */
.spid-idp-btn {
    width: 100%;
    max-width: 180px;
}

.spid-idp-btn.spid-idp-btn-l {
    max-width: 300px;
}

.spid-idp-btn .spid-idp-provider-list {
    -webkit-box-shadow: 2px 1px 3px 0 var(--c-10);
    box-shadow: 2px 1px 3px 0 var(--c-10);
}

.spid-idp-btn .spid-idp-provider-list li {
    border-bottom: solid 1px var(--c-08);
}

.spid-idp-btn .spid-idp-provider-list li img {
    height: 20px;
}

.spid-idp-btn .spid-idp-provider-list li:last-child {
    border-width: 0;
}

.spid-idp-btn .spid-idp-provider-list li a {
    display: inline-block;
    padding: 0.5rem 0.2rem;
    width: 100%;
}

.spid-idp-btn .spid-idp-provider-list li:hover {
    background: var(--c-34);
}

.spid-idp-btn.spid-idp-btn-l .spid-idp-provider-list li img {
    height: 26px;
}

.spid-idp-btn.spid-idp-btn-l .spid-idp-provider-list li a {
    padding: 0.8rem 0.5rem;
}

.text-link{
    text-decoration: none !important;
}

.fine-text {
    font-size: 0.95rem !important;
}
/* Note: The following classes from your HTML do not have direct definitions
   in the provided CSS. They are likely utility classes from a framework
   (like Bootstrap) or a separate utility stylesheet:
   - .col-12
   - .col-md-6
   - .test
   - .js-observable-expand
   - .p-0 (likely padding: 0)
   - .m-0 (likely margin: 0)
   - .p-2 (likely padding with a specific unit)
   - .sr-only (common accessibility class to hide visually but keep for screen readers)
*/
h4, .h4, h5, h6, .h5, .h6 {
    font-weight: 600;
}

.it-footer-main h4, .it-footer-main .h4{
    text-transform: unset !important;
}

.it-footer h4{
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}
@media (min-width: 576px) {
    h4, .h4 {
        font-size: 1.75rem;
        line-height: 2rem;
    }
}

#loa-spid, #loa-cie {
    appearance: none;          /* Removes default styling (modern) */
    -webkit-appearance: none;  /* Safari/Chrome */
    -moz-appearance: none;     /* Firefox */
    padding-right: 1rem;       /* Give room if you add a custom icon later */
  }