@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

:root {
    --white: #ffffff;
    --black: #000000;
    --blue: #192b58;
    --dark-blue: #2c2e35;
    --pink: #ff71da;
    --light-pink: #ff71da29;
    --sky-blue: #18aee9;
    --purple: #9535f9;
    --light-grey: #e9e9e9;
    --dark-gray: #bac0ca;
    --blue-40: #192b5866;
    --noir: #222222;
    --grey: #d9d9d9;
    --off-white: #f3f5f5;
    --lightest-grey: #f4f4f6;
    --blue-10: #192b581a;
    --dark-blue-60: #2c2e3599;
    --cta_color: #0090df;
    --cta_focus: #18aee9;
    --grey-text: #8f939a;
    --gray-400: #ededed;
    --gray-500: #eaeaea;
    --gray-300: #787878;
    --light-violet: #e3e4f0;
    --card-label: #6BF1A1;
    --red: #D83730;
    --font-weight-800: 800;
    --font-weight-700: 700;
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;
    --font-weight-300: 300;
    --font-weight-200: 200;
    --font-weight-100: 100;
    --h1-size: 40px;
    --h2-size: 32px;
    --h3-size: 28px;
    --h4-size: 26px;
    --h5-size: 24px;
    --h6-size: 18px;
    --p-size: 16px;
    --small-size: 14px;
    --h1-line-height: 125%;
    --h2-line-height: 150%;
    --h3-line-height: 130%;
    --h4-line-height: 125%;
    --h4-line-height: 120%;
    --h6-line-height: 24px;
    --p-line-height: 24px;
    --primary-font: "Lexend", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--dark-blue);
    background-color: var(--white);
    font: var(--p-weight) var(--p-size) / var(--p-line-height) var(--primary-font);
}

body.fixed {
    overflow: hidden;
}

iframe,
img,
video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.site-logo img {
    max-height: 58px;
}

h1 {
    font: var(--font-weight-700) var(--h1-size) / var(--h1-line-height) var(--primary-font);
    margin-bottom: 24px;
    color: inherit;
}

h2 {
    font: var(--font-weight-500) var(--h2-size) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 24px;
    color: inherit;
}

h3 {
    font: var(--font-weight-500) var(--h3-size) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 18px;
    color: inherit;
}

h4 {
    font: var(--font-weight-500) var(--h4-size) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 16px;
    color: inherit;
}

h5 {
    font: var(--font-weight-400) var(--h5-size) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 16px;
    color: inherit;
}

h5 {
    font: var(--font-weight-400) var(--h6-size) / var(--h6-line-height) var(--primary-font);
    margin-bottom: 16px;
    color: inherit;
}

p {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    margin-bottom: 10px;
    color: inherit;
}

p a {
    color: var(--sky-blue);
}

p a:hover {
    color: var(--purple);
}

a {
    text-decoration: none;
    outline: none;
}

a:is(:focus, :focus-visible) {
    box-shadow: none;
}

fieldset {
    border: none;
    overflow: unset;
    margin: 0 0 24px;
}

fieldset:last-child {
    margin-bottom: 0;
}

label,
.label {
    font: var(--font-weight-300) 12px / var(--h6-line-height) var(--primary-font);
    text-transform: uppercase;
    margin-bottom: 8px;
}

label:last-child,
.label:last-child {
    margin-bottom: 0;
}

.label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.label-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 1.33px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--grey);
    border-radius: 8px;
    outline: none;
    background-color: var(--white);
    padding: 11px 12px;
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    text-align: left;
    color: var(--blue);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s ease-in-out;
}

input:is(:focus, :focus-visible),
textarea:is(:focus, :focus-visible) {
    border: 1px solid var(--purple);
}

::-moz-placeholder {
    color: var(--blue-40);
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
}

::placeholder {
    color: var(--blue-40);
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
}

.icon-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    color: var(--dark-blue);
    margin: 0;
    padding: 8px;
    background-color: var(--lightest-grey);
    border-radius: 30px;
    text-transform: unset;
    transition: all 0.1s ease-in-out;
}

.icon-checkbox input {
    cursor: pointer;
    position: absolute;
    inset: 0;
    opacity: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 1;
    transition: all 0s ease-in-out;
}

.icon-checkbox .icon {
    width: 22px;
    height: 22px;
}

.icon-checkbox .icon img {
    transition: all 0s ease-in-out;
}

.icon-checkbox:has(input:hover) {
    background-color: var(--purple);
    color: var(--white);
}

.icon-checkbox:has(input:hover) img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(337deg) brightness(110%) contrast(100%);
}

.icon-checkbox:has(input:checked) {
    background-color: var(--cta_color);
    color: var(--white);
}

.icon-checkbox:has(input:checked) img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(337deg) brightness(110%) contrast(100%);
}

.icon-checkbox:has(input:focus) {
    outline: 1px solid var(--cta_color);
    box-shadow: none;
}

.icon-checkbox:has(input:active) {
    background-color: var(--cta_color);
}

.icon-checkbox:has(input:disabled) {
    opacity: 0.5;
    background-color: var(--grey);
    cursor: not-allowed;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: var(--white);
}

::-webkit-scrollbar-thumb {
    background: var(--purple);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cta_color);
}

::-moz-selection {
    color: var(--white);
    background: var(--sky-blue);
}

::selection {
    color: var(--white);
    background: var(--sky-blue);
}

:is(h1, h2, h3, h4, h5, h6, p):last-child {
    margin-bottom: 0;
}

.container {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
    padding-inline: 16px;
}

.none {
    display: none;
}

.block {
    display: block;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-40 {
    margin-top: 40px;
}

.fw-bold {
    font-weight: 700;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

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

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mx-auto,
.ml-auto {
    margin-left: auto;
}

.mx-auto,
.mr-auto {
    margin-right: auto;
}

b {
    font-weight: var(--font-weight-600);
}

.primaryBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    gap: 12px;
    font: var(--font-weight-600) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    color: var(--white);
    background-color: var(--cta_color);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.primaryBtn:hover {
    background-color: var(--cta_focus);
}

.primaryBtn:focus {
    outline: 1px solid var(--cta_focus);
    box-shadow: none;
}

.primaryBtn:active {
    background-color: var(--cta_color);
}

.primaryBtn:disabled {
    background-color: var(--grey);
    cursor: not-allowed;
}

.primaryBtn .icon {
    width: 24px;
    height: 24px;
}

.primaryBtn .icon img {
    -o-object-fit: contain;
    object-fit: contain;
}

.secondaryBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    gap: 12px;
    font: var(--font-weight-600) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    color: var(--white);
    background: linear-gradient(90deg,
            var(--sky-blue) 0%,
            var(--cta_focus) 100%,
            var(--cta_color) 50%) 20% 50%/200% no-repeat;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.secondaryBtn:hover {
    background-position: 100%;
    background-size: 300%;
}

.secondaryBtn:focus {
    outline: 1px solid var(--cta_focus);
    box-shadow: none;
}

.secondaryBtn:active {
    background-position: 100%;
    background-size: 300%;
}

.secondaryBtn:disabled {
    background: var(--grey);
    cursor: not-allowed;
}

.secondaryBtn .icon {
    width: 24px;
    height: 24px;
}

.secondaryBtn .icon img {
    -o-object-fit: contain;
    object-fit: contain;
}

button,
input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 16px 24px;
    gap: 12px;
    font: var(--font-weight-600) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    color: var(--white);
    background-color: var(--blue);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--purple);
}

button:focus,
input[type="submit"]:focus {
    outline: 1px solid var(--purple);
    box-shadow: none;
}

button:active,
input[type="submit"]:active {
    background-color: var(--purple);
}

button:disabled,
input[type="submit"]:disabled {
    background-color: var(--grey);
    cursor: not-allowed;
}

.page-wrapper {
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

header {
    padding: 24px 8px 19px;
}

header .hamburger-menu-icon {
    cursor: pointer;
    margin: -10px 0 0;
    width: 32px;
    height: 32px;
    padding: 8px 5.33px;
}

.mobile-menu-drawer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11111;
    width: 100%;
    max-width: 768px;
    height: 100vh;
    background-color: var(--white);
    padding: 20px 0;
    overflow: auto;
    transition: all 0.3s ease-in-out;
    transform: translatex(25%);
    pointer-events: none;
    opacity: 0;
}

.mobile-menu-drawer.active {
    transform: translatex(0);
    pointer-events: auto;
    opacity: 1;
}

.mobile-menu-drawer .mobile-menu-drawer-header {
    padding: 20px 28px 25px;
    margin-top: -20px;
}

.mobile-menu-drawer .mobile-menu-drawer-header .close-button {
    width: 30px;
    height: 30px;
    padding: 6px;
    margin-bottom: 14px;
}

.mobile-menu-drawer .mobile-menu-drawer-header .site-logo {
    width: 230px;
    height: 33px;
}

.site-logo img {
    max-height: 75px;
}

.mobile-menu-drawer .mobile-menu-drawer-header .site-logo img {
    -o-object-fit: contain;
    object-fit: contain;
    max-height: 75px !important;
}

.mobile-menu-drawer nav.nav-bar .nav-link {
    padding: 16.5px 16px 16.5px 19px;
    border-bottom: 1px solid var(--light-grey);
    font: 300 var(--h6-size) / var(--h6-line-height) var(--primary-font);
    color: var(--black);
    transition: all 0.3s ease-in-out;
}

.mobile-menu-drawer nav.nav-bar .nav-link svg {
    transition: all 0.3s ease-in-out;
}

.mobile-menu-drawer nav.nav-bar .nav-link:hover,
.mobile-menu-drawer nav.nav-bar .nav-link.active {
    color: var(--cta_focus);
}

.mobile-menu-drawer nav.nav-bar .nav-link:hover svg,
.mobile-menu-drawer nav.nav-bar .nav-link.active svg {
    transform: translateX(5px);
}

.mobile-menu-drawer nav.nav-bar .nav-link figure {
    width: 24px;
    height: 24px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
}

.mobile-menu-drawer nav.nav-bar .nav-link figure img {
    -o-object-fit: contain;
    object-fit: contain;
}

.hero {
    padding: 24px 0 40px;
}

.hero-small {
    padding: 24px 0 10px;
}

.hero .hero-content h1 {
    color: var(--blue);
}

.hero .hero-content P {
    font: var(--font-weight-500) var(--h6-size) / var(--h6-line-height) var(--primary-font);
    margin-bottom: 24px;
}

.hero .hero-content ul {
    gap: 8px;
    margin-bottom: 41px;
}

.hero .hero-content ul li {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    gap: 8px;
}

.hero .hero-content ul li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 5px;
}

.hero .hero-content ul li .icon img {
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
    height: auto;
}

.hero .hero-content ul span:not(.icon) {
    flex: 1 1 auto;
    width: 50%;
}

.hero .hero-content .cta-button {
    gap: 16px;
}

.hero .hero-content .cta-button a {
    width: 100%;
}

.features-steps .swiper-wrapper {
    position: relative;
}

.features-steps .swiper-wrapper .bg-img {
    width: 100%;
    max-height: 399px;
}

.features-steps .swiper-wrapper .bg-img img {
    aspect-ratio: 28/29;
}

.features-steps .swiper-wrapper .content {
    position: absolute;
    inset: 0;
    color: var(--white);
    padding: 24px 16px;
}

.features-steps .swiper-wrapper .content .slide-logo {
    width: 68px;
    height: 17px;
    margin-bottom: 4px;
}

.features-steps .swiper-wrapper .content .slide-logo img {
    -o-object-fit: contain;
    object-fit: contain;
}

.features-steps .swiper-wrapper .content h2 {
    font: var(--font-weight-500) var(--h6-line-height) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 0;
}

.features-steps .swiper-pagination {
    position: absolute;
    bottom: 29px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.features-steps .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--white);
    opacity: 0.6;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    margin: 0;
}

.features-steps .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    width: 108px;
}

.search-form-area {
    padding: 40px 0 21px;
}

.search-form-area .site-logo {
    width: 48px;
    height: 41px;
    margin-bottom: 25px;
}

.search-form-area .site-logo img {
    -o-object-fit: contain;
    object-fit: contain;
}

.search-form-area p {
    font: var(--font-weight-400) var(--p-size) / var(--h6-line-height) var(--primary-font);
}

.start-block-intro {
    padding: 21px 0 35px;
}

.start-block-intro.liste-parking {
    padding-bottom: 0;
}

.start-block-intro .start-block-content {
    position: relative;
}

.start-block-intro .start-block-content .bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 16px;
    overflow: hidden;
}

.start-block-intro .start-block-content .bg-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7803921569);
    z-index: 0;
}

.start-block-intro .start-block-flexbox {
    padding: 32px 16px;
    position: relative;
    z-index: 1;
    gap: 0;
}

.start-block-intro .start-block-flexbox figure {
    width: 31%;
}

.start-block-intro .start-block-flexbox .text-info {
    width: 48%;
    flex: 1 1 auto;
    padding: 18px 8px 18px 16px;
    max-width: 200px;
}

.start-block-intro .start-block-flexbox .text-info h2 {
    font: var(--font-weight-500) var(--h5-size) / var(--h2-line-height) var(--primary-font);
    margin-bottom: 8px;
}

.start-block-intro .start-block-flexbox .text-info p {
    font: var(--font-weight-400) var(--p-size) / var(--h6-line-height) var(--primary-font);
    color: var(--dark-blue-60);
}

.start-block-intro .start-block-flexbox .text-info figure.icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.start-block-intro .start-block-flexbox .iconBtn {
    position: absolute;
    right: -36px;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    padding: 8px;
    background-color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parking-space-form {
    background: center/150% no-repeat linear-gradient(90deg, var(--cta_focus) -60%, var(--cta_color) 80%);
    position: relative;
    color: var(--white);
    overflow: hidden;
    padding: 48px 0 177px;
}

.parking-space-form .bg-img {
    position: absolute;
    bottom: -5px;
    right: 0;
    z-index: 0;
}

.parking-space-form .container {
    position: relative;
    z-index: 1;
}

.parking-space-form .parking-space-content {
    margin-bottom: 24px;
}

.parking-space-form .parking-space-form-wrapper {
    background-color: var(--white);
    border-radius: 8px;
    padding: 24px 16px;
    color: var(--dark-blue);
}

.parking-space-form .parking-space-form-wrapper .icon-checkbox-wrapper {
    gap: 8px;
}

.parking-space-form .parking-space-form-wrapper .input-with-icon-wrapper {
    gap: 13px;
}

.parking-space-form .parking-space-form-wrapper .input-with-icon-wrapper .inputs-wrapper {
    width: 85%;
    flex: 1 1 auto;
    gap: 3.5px;
}

.parking-space-form .parking-space-form-wrapper .input-with-icon-wrapper .inputs-wrapper .col-2 {
    width: 47%;
    flex: 1 1 auto;
}

.parking-space-form .parking-space-form-wrapper .input-with-icon-wrapper .icon {
    width: 24px;
    height: 24px;
    display: flex;
    place-content: center;
}

.parking-space-form .parking-space-form-wrapper .input-with-icon-wrapper .icon img {
    -o-object-fit: contain;
    object-fit: contain;
}

.parking-space-form .parking-space-form-wrapper button,
.parking-space-form .parking-space-form-wrapper input[type="submit"] {
    width: 100%;
}

.faq-section {
    padding: 40px 0;
}

.faq-section .section-info h2 {
    margin-bottom: 8px;
}

.faq-section .accordionRow {
    margin-top: 7px;
}

.faq-section .accordionRow .accordion-item {
    background-color: var(--off-white);
    border-radius: 8px;
    margin-bottom: 9px;
}

.faq-section .accordionRow .accordion-item:last-child {
    margin-bottom: 0;
}

.faq-section .accordionRow .accordion-item .accordion-trigger {
    padding: 16px;
    gap: 11px;
    cursor: pointer;
    color: var(--blue);
    outline: none;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.faq-section .accordionRow .accordion-item .accordion-trigger:is(:focus, :focus-visible, :hover) {
    border-color: var(--purple);
}

.faq-section .accordionRow .accordion-item .accordion-trigger.active {
    border-radius: 8px 8px 0 0;
    border-color: transparent;
    background-color: var(--light-grey);
}

.faq-section .accordionRow .accordion-item .accordion-trigger figure {
    width: 24px;
    height: 24px;
}

.faq-section .accordionRow .accordion-item .accordion-trigger h3 {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    margin-bottom: 0;
    flex: 1 1 auto;
}

.faq-section .accordionRow .accordion-item .accordion-trigger .accordionIcon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -3px;
    transition: all 0.3s ease-in-out;
}

.faq-section .accordionRow .accordion-item .accordion-trigger:hover .accordionIcon {
    transform: rotate(180deg);
}

.faq-section .accordionRow .accordion-item .accordion-trigger.active .accordionIcon {
    transform: rotate(135deg);
}

.faq-section .accordionRow .accordion-item .accordion-content {
    display: none;
    padding: 16px;
    border-top: 1px solid var(--light-grey);
}

footer {
    padding: 23px 0 24px;
    background-color: var(--blue);
    color: var(--white);
}

footer .policy-link-list {
    list-style: none;
    gap: 16px;
    margin-bottom: 16px;
}

footer .policy-link-list a {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    color: var(--white);
    text-decoration: underline;
}

footer .policy-link-list a:hover {
    color: var(--cta_focus);
    text-decoration: none;
}

footer .copyright-wrapper {
    gap: 16px;
    margin-right: -2px;
}

footer .copyright-wrapper p {
    font: var(--font-weight-300) 14px / var(--p-line-height) var(--primary-font);
    margin-bottom: 0;
}

footer .copyright-wrapper .site-logo {
    width: 24px;
    height: 21px;
}

/*# sourceMappingURL=style.css.map */


/* Liste parking css */
.back-to-home-hero {
    background-color: var(--off-white);
    padding: 12px 8px;
}

.back-to-home-hero img {
    width: 100%;
}

.back-to-home-hero .back-to-home-wrapper {
    display: flex;
    gap: 8px;
}

.back-to-home-hero .img-wrapper {
    width: 24px;
    height: 24px;
}

.back-to-home-hero .back-to-home-wrapper p {
    font: var(--font-weight-300) 14px / var(--p-line-height) var(--primary-font);
    color: var(--dark-blue);
}

.liste-parking.hero .hero-content p {
    margin-bottom: 0;
}

.liste-parking .inputs-wrapper {
    width: calc(100% - (48px + 8px));
}

.liste-parking .input-with-icon-wrapper .icon {
    padding: 12px;
    border-radius: 8px;
    background-color: var(--off-white);
}

.liste-parking .icon img {
    width: 24px;
    height: 24px;
}

.liste-parking fieldset {
    margin-bottom: 0;
}

.see-on-map-wrapper {
    gap: 12px;
}

.see-on-map-wrapper {
    padding: 17.5px 0;
}

.see-on-map-wrapper .map-icon-wrapper img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.see-on-map-wrapper .link-text {
    font: var(--font-weight-600) 18px / var(--h2-line-height) var(--primary-font);
    color: var(--blue);
    text-decoration: underline;
}

.liste-parking .button-wrapper {
    margin: 0px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.button-wrapper .custom-button {
    border: 1px solid var(--cta_color);
    padding: 12px 0;
    text-align: center;
    gap: 12px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.button-wrapper .custom-button:hover {
    background-color: var(--cta_focus);
    border-color: transparent;
}

.button-wrapper button.custom-button {
    border: transparent;
}

.button-wrapper button.custom-button:hover {
    background-color: var(--purple);
}

.button-wrapper .custom-button .icon {}

.button-wrapper .custom-button .button-text {
    font: var(--font-weight-600) 18px / var(--h2-line-height) var(--primary-font);
    color: var(--blue);
}

.custom-submit-button {
    width: 100%;
}

/* card-wrapper */
.card-wrapper .card-title-heading {
    font: var(--font-weight-500) 18px / var(--p-line-height) var(--primary-font);
    margin-bottom: 16px;
}

.card-wrapper .card {
    border: 1px solid var(--light-violet);
    border-radius: 16px;
    padding: 16px;
}

.card-wrapper .card-img-wrapper {
    height: 37vw;
    max-height: 300px;
    position: relative;
}

.card-wrapper .card-img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.card-label {
    font: var(--font-weight-500) 12px / var(--p-line-height) var(--primary-font);
    background-color: var(--card-label);
    border-radius: 2px;
    display: inline-block;
    padding: 1px 8px;
    position: absolute;
    right: 4px;
    top: 4px;
}

.card-wrapper .card-details {
    margin-top: 16px;
}

.card-categories {
    width: 68px;
    height: 17px;
    object-fit: contain;
}

.card-title {
    font: var(--font-weight-500) 24px / var(--h2-line-height) var(--primary-font);
    color: var(--black);
    margin: 8px 0;
}

.location-text-wrapper {
    display: flex;
    gap: 8px;
}

.location-text-wrapper img {
    width: 24px;
}

.location-text-wrapper a {
    font: var(--font-weight-500) 14px / var(--p-line-height) var(--primary-font);
    color: var(--black);
    text-decoration: underline;
}

.custom-dropdown {
    position: relative;
}

.card-wrapper .card-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-dropdown-toggle {
    margin: 16px 0;
    background-color: var(--off-white);
    padding: 16px;
    font: var(--font-weight-400) 18px / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
    border-radius: 16px;
    width: 100%;
    letter-spacing: -0.34px;
    cursor: pointer;
    border: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("../images/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--off-white);
    border-radius: 16px;
    z-index: 10;
    margin-top: 4px;

}

.custom-dropdown-menu.active {
    display: block;
}

.custom-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
    font: var(--font-weight-400) 18px / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
    transition: all 0.3s ease-in-out;
}

.custom-dropdown-item:hover {
    background: var(--cta_color);
    color: var(--white);
}

.card-button-wrapper {
    gap: 8px
}

.card-button-wrapper .card-button {
    flex: 1;
    padding: 12px 0;
    font: var(--font-weight-400) 16px / var(--h2-line-height) var(--primary-font);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

.card-button-wrapper .card-button:first-child {
    border-color: var(--cta_color);
    color: var(--cta_color);
    background-color: transparent;
}

.card-button-wrapper .card-button:first-child:hover {
    background-color: var(--cta_color);
    color: var(--white);
}

.card-button-wrapper .card-button:last-child {
    border-color: var(--cta_color);
    color: var(--white);
    background-color: var(--cta_color);
}

.card-button-wrapper .card-button:last-child:hover {
    color: var(--cta_color);
    background-color: transparent;
}

/* Details-parking-ouvert-page */
.features-steps.detail-parking-ouvert .swiper-wrapper .bg-img img,
.features-steps.detail-parking-ouvert .swiper-wrapper .bg-img {
    aspect-ratio: 78/49;
    max-height: none;
}

.details-ouvert-hero {
    padding: 19px 0 24px;
}

.details-ouvert-wrapper .card-label {
    position: static;
}

.details-ouvert-wrapper .card-title {
    font-size: var(--h2-size);
    margin: 16px 0;
}

.details-ouvert-wrapper .card-categories {
    width: 100px;
    height: 25px;
    margin-bottom: 16px;
}

.details-ouvert-wrapper .location-text-wrapper {
    align-items: center;
}

.details-ouvert-wrapper .location-text-wrapper img {
    width: 32px;
}

.details-ouvert-wrapper .location-text-wrapper a {
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.1px;
    text-decoration: none;
}

.details-parking-ouvert-accordion .accodion-items {
    padding: 24px 32px;
    border-top: 1px solid var(--light-violet);
    background-color: var(--off-white);
    display: block;
}

.details-parking-ouvert-accordion .accodion-items .accordion-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.details-parking-ouvert-accordion .accodion-items .accordion-header-wrapper img {
    width: 24px;
    transform: rotate(180deg);
}

.details-parking-ouvert-accordion .accodion-items .card-title {
    margin: 0;
}

.details-parking-ouvert-accordion .accodion-items .accordion-details {
    padding-top: 12px;
}

.details-parking-ouvert-accordion .accodion-items.active .accordion-details {
    display: none
}

.details-parking-ouvert-accordion .accodion-items.active .accordion-header-wrapper img {
    transform: rotate(360deg);
}

.details-parking-ouvert-accordion .accordion-details .list-title {
    font-size: 12px;
    line-height: var(--p2-line-height);
    text-transform: uppercase;
    color: var(--dark-blue);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-300);
    margin-bottom: 0;
}

.accodion-content-wrapper .accordion-list:first-child {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dark-gray);
}

.accodion-content-wrapper .accordion-list:last-child {
    padding-top: 16px;
}

.details-parking-ouvert-accordion .accordion-details .list-value {
    font: var(--font-weight-600) 16px / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
    padding-right: 8px;
}

.details-parking-ouvert-button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 40px;
}

.details-parking-ouvert-button-wrapper .card-button {
    display: block;
    font-weight: var(--font-weight-700);
}

.details-parking-ouvert-button-wrapper .custom-button,
.details-parking-ouvert-button-wrapper .card-button {
    padding: 16px 0;
}

.details-parking-ouvert-button-wrapper .custom-button {
    border: none;
}

.gradient-button {
    position: relative;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    border: none;
    transition: all 0.3s ease-in-out;
}

.gradient-button::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(78.11deg, #0090df -74.4%, #8942F0 140.92%);
    border-radius: inherit;
    z-index: -1;
}

.gradient-button::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #fff;
    border-radius: inherit;
    z-index: -1;
}

.gradient-button:hover::after {
    background-color: var(--cta_focus);
}

.details-parking-ouvert-accordion .accordion-details .accordion-para,
.details-parking-ouvert-accordion .accordion-details .accordion-ul-list li {
    font-size: 16px;
    font-weight: 300;
    font-family: var(--primary-font);
    color: var(--dark-blue);
    line-height: 24px;
    margin-bottom: 0;
}

.details-parking-ouvert-accordion .accordion-details .accordion-ul-list {
    padding-left: 24px;
}

.accodion-items .title-badge {
    display: flex;
    align-items: center;
    gap: 16px;
}

.accodion-items .title-badge .badge {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    background-color: var(--light-pink);
    padding: 4px 8px;
    border-radius: 8px;
}

.card-button-wrapper.mt-40 .card-button {
    font-weight: var(--font-weight-700);
    padding: 16px 0;
}

/* Detail parking - accordion-closed */
.details-parking-ouvert-accordion.accordion-closed .accordion-details {
    display: none;
}

.details-parking-ouvert-accordion.accordion-closed .accodion-items.active .accordion-details {
    display: block;
}

.details-parking-ouvert-accordion.accordion-closed .accodion-items .accordion-header-wrapper img {
    transform: rotate(360deg);
}

.details-parking-ouvert-accordion.accordion-closed .accodion-items.active .accordion-header-wrapper img {
    transform: rotate(180deg);
}

.details-parking-ouvert-accordion.accordion-closed .accodion-items {
    background-color: var(--white);
}

.details-parking-ouvert-accordion.accordion-closed .card-button-wrapper.button-wrapper.flex {
    border-top: 1px solid var(--light-violet);
}

/* Modal */
body.overlay {
    overflow-y: hidden;
}

/* Modal wrapper (hidden by default) */
.registrationModal.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #192B58CC;
    display: none;
    align-items: end;
    justify-content: center;
    z-index: 1000;
    overflow-y: scroll;
}

.registrationModal.modal.show {
    display: flex;
}

.registrationModal .modal-content {
    background: #fff;
    width: 100%;
    max-width: 768px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
    height: calc(100vh - 112px);
    overflow-y: scroll;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.registrationModal .modal-header {
    position: relative;
    padding: 24px 0 16px;
    text-align: center;
}

.registrationModal .modal-header .container {
    padding-inline: 32px;
}

.registrationModal .progress-bar {
    height: 9px;
    width: 118px;
    background: var(--dark-gray);
    border-radius: 3px;
    /* margin: 0 auto 0; */
    border-radius: 29px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

.registrationModal .close-btn {

    background: var(--dark-blue);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 7.93px;
}

.registrationModal .modal-title {
    background: linear-gradient(78.11deg, #192B58 -74.4%, #8942F0 140.92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: var(--font-weight-500) var(--h2-size) / var(--h2-line-height) var(--primary-font);
    text-align: center;
    margin-bottom: 16px;
}


.registrationModal .modal-instructions ul li,
.registrationModal .modal-instructions p {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    color: var(--dark-blue);
    margin-bottom: 0;
}

.registrationModal .modal-instructions ul {
    padding-left: 22px;
}

.registrationModal .modal-instructions ul+p {
    margin-top: 16px;
    padding-bottom: 16px;
}

.registrationModal .modal-section {
    padding: 24px;
    border-top: 1px solid var(--light-violet);
}

.registrationModal .form-group {
    margin-bottom: 16px;
}

.registrationModal .form-group-title {
    margin-bottom: 16px;
    font-family: var(--primary-font);
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0%;
    text-transform: uppercase;

}

.registrationModal .form-group label {
    display: block;
    font: var(--font-weight-400) var(--small-size) / var(--h2-line-height) var(--primary-font);
    color: #00000099;
    margin-bottom: 0;
    text-transform: capitalize;
    padding-left: 4px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
}

.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    padding: 16px 12px;
}

.phone-input img {
    width: 24px;
}

.phone-input input {
    padding: 0;
    color: var(--black);
    border: 0;
}

.phone-input input::placeholder {
    color: var(--black);
}

.registrationModal .payment-section {
    padding: 24px;
    border-top: 1px solid var(--light-violet);
    border-bottom: 1px solid var(--light-violet);
}

.registrationModal .payment-title {
    font-family: var(--primary-font);
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;

}

.registrationModal .payment-title-wrapper img {
    width: 24px;
}

.right-arrow {
    width: 24px;
    transform: rotate(270deg);
}

.registrationModal .card-img-wrapper img {
    width: 24px;
}

.registrationModal .card-img-wrapper {
    display: flex;
    gap: 5.5px;
}

.registrationModal .card-img-wrapper span {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -1.9%;

}

.registrationModal .payment-title-wrapper {
    margin-bottom: 16px;
}

.registrationModal .payment-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px;
    transition: background 0.2s;
}

.registrationModal .payment-option+.payment-option {
    border-top: 1px solid var(--light-violet);
}

.registrationModal .payment-option:hover {
    background: #f9f9f9;
}

.registrationModal .payment-option span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-section-button-wrapper {
    padding: 40px 24px 48px;
}

.registrationModal button {
    width: 100%;
    font-size: 16px;
}

.registrationModal .error {
    font-family: var(--primary-font);
    color: var(--red);
    padding: 5PX 0 0;
    display: block;
}

/* Resevation */
.parking-space-form.resevation {
    padding: 24px 0 64px;
    background: linear-gradient(78.11deg, #0090df -74.4%, #8942F0 140.92%);

}

.parking-space-form.resevation .resevation-title {
    font: var(--font-weight-600) var(--h6-size) / var(--h6-line-height) var(--primary-font);
    display: block;
    margin-bottom: 16px;
}

.resevation-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resevation-pogrees-bar-wrapper {
    gap: 8px
}

.resevation-pogrees-bar-wrapper .line {
    width: 108px;
    height: 8px;
    border-radius: 30px;
    background-color: var(--white);
    display: block;
}

.resevation-pogrees-bar-wrapper .circle {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    display: block;
    background-color: #FFFFFF99
}

.parking-space-form.resevation h2 {
    margin: 16px 0;
}

.parking-space-form.resevation h2+p {
    font-size: 18px;
}

.parking-space-form.resevation .sub-title {
    font: var(--font-weight-700) 20px / var(--h6-line-height) var(--primary-font);
    margin-top: 24px;
}

.resevation-tag-name-wrapper p {
    font-size: 12px;
    line-height: var(--p2-line-height);
    text-transform: uppercase;
    color: var(--dark-blue);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-300);
    margin-bottom: 0;
}

.resevation-tag-name-wrapper .card-label {
    position: relative;
}

.parking-space-form.resevation .parking-space-form-wrapper {
    padding: 16px;
}

.parking-space-form.resevation .resevation-loaction-wrapper {
    margin-top: 16px;
}

.parking-space-form.resevation .reservation-loaction {
    gap: 12px;
}

.reservation-loaction .location {
    width: 32px;
    height: 32px;
}

.reservation-loaction .reservation-loaction-wrapper p {
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.1px;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 600;
}

.reservation-loaction .reservation-loaction-wrapper img {
    width: 60px;
    height: 15px;
}

.parking-space-form.resevation .label.label-icon {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 16px;
}

.parking-space-form.resevation .label-icon .icon {
    width: 24px;
    height: 24px;
}

.parking-space-form.resevation .parking-space-form-wrapper .input-with-icon-wrapper .icon {
    width: 32px;
    height: 32px;
}

.parking-space-form.resevation .resevation-form button[type="submit"] {
    width: 100%;
    margin-top: 16px;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid var(--dark-blue);
}

.parking-space-form.resevation .resevation-form button[type="submit"]:hover {
    border: 1px solid var(--cta_color);
}

.resevation-form.second .phone-input {
    background-color: var(--white);
}

.resevation-form.second .phone-input input::placeholder {
    color: #00000099;
}

.parking-space-form .parking-space-content.second {
    margin-bottom: 16px;
}

.resevation-form.second {
    gap: 40px;
}

.resevation-form.second .google-fb-text {
    font-family: var(--primary-font);
    font-weight: 300;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--white);
    margin-bottom: 16px;
}

.google-facebook-button-wrapper {
    display: flex;
    gap: 24px;

}

.google-facebook-button-wrapper .social-button {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--white);
    align-items: center;
    justify-content: center;
    flex: 1;
}

.google-facebook-button-wrapper .social-button img {
    width: 24px;
    height: 24px;
}

.google-facebook-button-wrapper .social-button span {
    font: var(--font-weight-500) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    color: var(--noir);
}

.switch-text-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;

}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    min-width: 40px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #192B5838;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(186px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    transform: translateX(16px);
    background: var(--white);
}

/* Rounded sliders */
.slider.round {
    border-radius: 37px;
}

.slider.round:before {
    border-radius: 50%;
}

.resevation-form.second .privacy-text {
    font: var(--font-weight-300) var(--p-size) / var(--p-line-height) var(--primary-font);
    color: var(--white);
}

.resevation-form.second .privacy-text a {
    color: var(--white);
    text-decoration: underline;
}

.resevation-form.second .back-button {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.resevation-form.second .back-button img {
    width: 24px;
    height: 24px;
}

.resevation-form.second .back-button span {
    font: var(--font-weight-700) var(--p-size) / var(--h2-line-height) var(--primary-font);
    color: var(--white);
}

.parking-space-form.resevation .resevation-form.second button[type="submit"] {
    margin-top: 0;
}

.resevation-form.second label {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

/* Third */
.resevation-form.second.third {
    gap: 0;
}

.parking-space-form.resevation .resevation-form.second.third .parking-space-form-wrapper {
    border-radius: 0;
    border-bottom: 1px solid var(--light-violet);
}

.parking-space-form.resevation .resevation-form.second.third .parking-space-form-wrapper:first-of-type {
    border-radius: 8px 8px 0 0;
}

.parking-space-form.resevation .resevation-form.second.third .parking-space-form-wrapper:nth-child(4) {
    border-radius: 0 0 8px 8px;
}

.parking-space-form.resevation .third h2 {
    margin-bottom: 40px;
}

.google-facebook-button-wrapper-third {
    margin: 40px 0;
}

.icon-checkbox-wrapper.credit-card {
    margin-top: 5px;
}

.icon-checkbox-wrapper.credit-card img {
    width: 24px;
    height: 24px;
}

.icon-checkbox-wrapper.credit-card span {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
}

.parking-space-form.resevation.second {
    padding-bottom: 56px;
}

/* Cpmfirmation */
.parking-space-form.resevation.confirmation {
    padding-bottom: 56px;
}

.parking-space-form.resevation.confirmation .parking-space-content img {
    width: 66px;
    height: 66px;
}

.parking-space-form.resevation.confirmation .parking-space-content h2 {
    margin: 8px 0;
}

.confrimation-text-hero {
    background-color: var(--white);
    padding: 20px 0;
}

.confrimation-text-hero ul {
    padding-left: 24px;
}

.confrimation-text-hero ul li {
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
    letter-spacing: -0.304px;
}

.confrimation-text-hero .error-box-hero {
    padding: 16px;
    border: 1px solid var(--gray-500);
    border-radius: 16px;

}

.confrimation-text-hero .error-box-wrapper {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.confrimation-text-hero .erro-icon-text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.confrimation-text-hero .erro-icon-text img {
    width: 32px;
    height: 32px;
}

.confrimation-text-hero .erro-icon-text p {
    font: var(--font-weight-700) var(--p-size) / var(--h2-line-height) var(--primary-font);
    color: var(--red);
    letter-spacing: -0.304px;
}

.confrimation-text-hero .error-box-hero a {
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
    text-decoration: underline;
}

.confirmation-button-wrapper {
    padding-top: 24px;
}

.confirmation-button-wrapper button {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--cta_color);
}

.confirmation-button-wrapper .back-button {
    font: var(--font-weight-400) var(--p-size) / var(--p-line-height) var(--primary-font);
    margin-top: 24px;
    color: var(--white);
    text-decoration: underline;
    text-align: center;
    display: block;
}

/* QR-CODE */
.qr-gradient {
    background: linear-gradient(170.43deg, #192B58 0.01%, #8942F0 36.97%, #7ACCEF 86.57%);
    ;
}

.qr-gradient header {
    background-color: var(--white);
}

.qr-code-hero {
    padding: 24px 0 40px;
}

.qr-code-close-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    border-radius: 8px;
    background-color: var(--white);
}

.qr-code-close-button img {
    width: 24px;
    height: 24px;
}

.qr-code-close-button span {
    font: var(--font-weight-300) var(--small-size) / var(--p-line-height) var(--primary-font);
    color: var(--black);
}

.qr-code-hero h2 {
    color: var(--white);
    text-align: center;
    margin: 32px 0 24px;
}

.qr-code-hero button {
    width: 100%;
    font-size: 16px;
    margin: 24px 0 32px;
}

.qr-list-box {
    background-color: var(--white);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--light-violet);
}

.qr-main-list-heading {
    margin-bottom: 17.5px;
}

.qr-main-list-heading .cycle-img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    object-fit: cover;
}

.qr-main-list-heading .qr-list-title {
    font-family: var(--primary-font);
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 0;
}

.qr-main-list-heading .right-arrow {
    margin-left: auto;
    width: 24px;
    height: 24px;
    /* transform: scale(-1) */
}

.qr-list-box ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-list-box ul li {
    gap: 12px
}

.qr-list-box ul li:nth-child(2) .title,
.qr-list-box ul li:nth-child(3) .title {
    font-size: 16px;
    line-height: 24px;
}

.qr-list-box ul li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-list-box ul li .icon img {
    width: 24px;
    height: 24px;
}

.qr-list-box ul li .title {
    font: var(--font-weight-400) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    color: var(--dark-blue);
}

/* mes-reservations-hero */
.mes-reservations-hero {
    padding: 24px 0 40px;
}

.mes-reservations-hero .mes-reservations-wrapper p {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.mes-reservations-hero .custom-dropdown-toggle {
    background-color: var(--white);
    border-radius: 8px;
    border: 1px solid var(--grey);
    margin: 24px 0 40px;
    padding: 16px 12px;
}

.mes-reservations-hero .custom-dropdown-toggle .dropdown-label,
.mes-reservations-hero .custom-dropdown-item {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    color: #00000099;
}

.mes-reservations-hero .custom-dropdown-menu {
    border-radius: 8px;
}

.mes-reservations-hero .custom-dropdown-toggle .dropdown-arrow {
    opacity: 60%;
}

.button-wrapper.mes-reservations {
    margin-top: 16px;
    gap: 16px
}

.button-wrapper.mes-reservations button {
    background: linear-gradient(78.11deg, #192B58 -74.4%, #8942F0 140.92%);
    margin-bottom: 16px;
}

.button-wrapper.mes-reservations .custom-button {
    padding: 16px 0;
}

.button-wrapper.mes-reservations .custom-button span {
    font-size: 16px;
    font-weight: 500;
}

/* session-wrapper */
.session-wrapper {
    background-color: var(--gray-400);
    padding: 40px 0;
}

.session-icon {
    padding: 0 16px;
    background-color: var(--black);
    border-radius: 18px;
    cursor: pointer;
    height: 64px;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-icon img {
    width: 32px;
    height: 32px;
}

.session-wrapper .session-hero {
    padding: 0 32px;
}

.session-back-to-button {
    padding: 12px 24px;
    background-color: var(--white);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.session-back-to-button .img-wrapper img {
    width: 24px;
    height: 24px;
}

.session-back-to-button p {
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    color: var(--black)
}

.session-wrapper .sesstion-title {
    font: var(--font-weight-700) 36px / var(--h2-line-height) var(--primary-font);
    color: var(--black);
    letter-spacing: -0.684px;
}

.session-button-text-wrapper .scanner-button {
    padding: 12px 27.5px;
    border-radius: 8px;
    /* border: 1px solid var(--black); */
    color: var(--white);
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    display: block;
    margin: 26px 0;
    background-color: var(--black);
    letter-spacing: 0;
    text-align: center;
}

.session-button-text-wrapper .time-text {
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    letter-spacing: -0.304px;
    margin-bottom: 16px;
}

.session-list-items {
    background-color: var(--white);
    padding: 16px 10px;
}

.session-list-items .session-left-items {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-list-items .session-left-items img {
    width: 24px;
    height: 24px;
    filter: grayscale(1);
}

.session-list-items .session-left-items p {
    font: var(--font-weight-400) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    letter-spacing: -0.304px;
    color: var(--black);
    margin-bottom: 0;
}

.session-list-items .session-right-items {
    display: flex;
    align-items: center;
    gap: 16px;
}

.session-list-items .session-right-items p {
    font: var(--font-weight-400) var(--h6-size) / var(--h2-line-height) var(--primary-font);
    letter-spacing: -0.304px;
    color: var(--gray-300);
    margin-bottom: 0;
}

.session-list-items .session-right-items img {
    width: 24px;
    height: 24px;
    transform: rotate(270deg);
}

.session-list-items .session-right-items .grey-help-circle {
    transform: rotate(360deg);
}

.session-link-text-wrapper {
    background-color: var(--white);
}

.session-link-text-wrapper a {
    font: var(--font-weight-400) var(--p-size) / var(--h2-line-height) var(--primary-font);
    text-decoration: underline;
    display: block;
    text-align: center;
    color: var(--black);
    padding: 28px 0;
}

/* Add styles for capacity-info, no-results and disabled states */
.capacity-info {
    margin: 8px 0;
}

.capacity-info p {
    font: var(--font-weight-400) 14px / var(--p-line-height) var(--primary-font);
    color: var(--dark-blue);
    margin-bottom: 0;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
}

.no-results p {
    font: var(--font-weight-400) 18px / var(--p-line-height) var(--primary-font);
    color: var(--dark-blue);
    margin-bottom: 20px;
}

.card-button.disabled {
    background-color: var(--grey) !important;
    border-color: var(--grey) !important;
    color: var(--white) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.card-button.disabled:hover {
    background-color: var(--grey) !important;
    border-color: var(--grey) !important;
    color: var(--white) !important;
}

.card-label.ferme {
    background-color: var(--red);
    color: var(--white);
}

.card-label.disponible {
    background-color: var(--card-label);
    color: var(--dark-blue);
}

.btn-group {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.radio-button {
    display: flex;
    align-items: center;
    flex: 1;
}

.radio-button input[type="radio"] {
    display: none;
}

.radio-button label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
    font-size: 16px;
}

.custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #999;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

.radio-button input[type="radio"]:checked+label .custom-radio {
    border-color: #007bff;
    background-color: #007bff;
}

.radio-button input[type="radio"]:checked+label .custom-radio::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

#socialLoginSection {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.custom-button {
    margin-top: 20px;
    margin-bottom: 20px;
}

.login-or {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.loader-btn[disabled] {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.loader-btn .loader-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 0.5em;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.close-button {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover {
    opacity: 0.7;
}

.modal-body {
    color: #4a5568;
}

.button-group {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.error-message {
    background-color: #fff5f5;
    border: 1px solid #feb2b2;
    color: #c53030;
    padding: 1rem;
    border-radius: 0.5rem;
}

.success-message {
    background-color: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #2f855a;
    padding: 1rem;
    border-radius: 0.5rem;
}

.hidden {
    display: none !important;
}

/* Button Styles */
.secondaryBtn,
.primaryBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.secondaryBtn {
    background: #edf2f7;
    color: #2d3748;
}

.primaryBtn {
    color: white;
}

.secondaryBtn:hover {
    background: #e2e8f0;
}

.primaryBtn:hover {}


.modal {
    display: none !important;
    pointer-events: none;
}

.modal.show {
    display: block !important;
    pointer-events: auto;
}

.modal-backdrop {
    display: none;
}

.modal-backdrop.show {
    display: block;
}

.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal-dialog {
    z-index: 1060;
}

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


.payment-method-card {
    background: #f5f7fa;
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.payment-method-title {
    font-weight: 700;
    color: #23235f;
    font-size: 1.1rem;
}

.payment-method-meta {
    color: #6c757d;
    font-size: 0.95rem;
}

.delete-btn {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.5rem;
    cursor: pointer;
}

.add-method-btn {
    background: #a259ff;
    border-radius: 12px;
    padding: 1.2rem;
    color: #ffffff;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    justify-content: flex-start;
}

.plus-icon {
    color: #ffffff;
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.add-method-switch {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.switch-btn {
    background: #f5f7fa;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.5rem;
    font-weight: 600;
    color: #3d3d7a;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.switch-btn.active {
    background: #a259ff;
    color: #fff;
}

.primaryBtn {
    background: #a259ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    font-weight: 600;
    width: 100%;
    margin-top: 1.5rem;
}

.stripe-input,
.StripeElement {
    padding: 10px 12px;
    width: 100%;
    background-color: #f5f7fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
}

.StripeElement--focus {
    border-color: #a259ff;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(162, 89, 255, 0.15);
}

.StripeElement--invalid {
    border-color: #e74c3c;
}

.header-space-content {
    background: green;
    padding: 30px;
    color: #FFFFFF;
    background: url(../images/topimage.jpg) no-repeat center center;
}

.infotext {
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
}

.iti {
    width: 100%;
}

.iti--allow-dropdown {
    width: 100%;
}

.iti__country-name {
    font-size: 14px;
}

.iti__country-name,
.iti__flag-box {
    font-family: var(--primary-font);
}

.otp-input-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
}

.otp-input {
    width: 100%;
    height: 45px;
    padding: 30px 0px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 500;
    background: white;
}

.otp-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.payment-method-button {
    background: #F3F5F5;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    font-family: var(--primary-font);
    display: inline-block;
    margin: 30px 0px;
    padding: 30px;
    width: 100%;
}


figure {
    margin: unset !important;
}

.custom-alert.warning {
    display: flex;
    align-items: flex-start;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 16px;
    font-family: var(--primary-font);
}

.custom-alert .alert-icon {
    width: 32px;
    height: 32px;
    margin-top: 0.25rem;
}

#map { height: 400px; width: 100%; margin-bottom: 20px; }