#modal-choix-pays-langue {
display: none; position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
#modal-choix-pays-langue .modal-content {
background: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
max-width: 600px;
width: 90%;
position: relative;
}
#modal-choix-pays-langue .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
height: 50px;
}
#modal-choix-pays-langue .modal-logo {
position: absolute;
left: 50%;
border-radius: 5px;
transform: translateX(-50%);
max-height: 40px; margin: 0 auto;
background-color: black;
padding: 5px;
}
#modal-choix-pays-langue .modal-header h6 {
flex: 1;
text-align: center;
}
#modal-choix-pays-langue .modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: white;
position: absolute;
padding: 0px 5px;
right: 10px;
}
#modal-choix-pays-langue .modal-body {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin: 10px 0;
}
#modal-choix-pays-langue .modal-body h6 {
font-size: 0.75em;
}
#modal-choix-pays-langue select {
width: 100%;
padding: 10px;
margin-bottom: 5px;
}
#btn-confirmer {
padding: 5px 10px;
cursor: pointer;
font-size: 0.75em;
;
}
#select-pays option,
#select-langue option {
display: flex;
align-items: center;
padding-left: 25px; }
.flag-icon {
width: 20px;
height: 15px;
margin-right: 8px;
vertical-align: middle;
}
.custom-select {
position: relative;
width: 100%;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.custom-select div,
.custom-select .selected-option span,
.custom-select .options-list {
font-family: "Teko" !important;
}
.custom-select .selected-option {
display: flex;
align-items: center;
padding: 10px;
}
.custom-select .selected-option-header {
justify-content: center;
}
.custom-select .selected-option img {
width: 20px;
height: 15px;
margin-right: 8px;
}
.selected-option {
position: relative;
padding-right: 20px; display: flex;
align-items: center;
}
.selected-option::after {
content: "▼";
font-size: 12px;
color: #333;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-label {
color: white;
font-size: 0.5em;
text-align: center;
}
.custom-select-label span {
line-height: 0.75em !important;
font-family: "Proxima-Nova", Sans-serif;
}
.options-list {
position: absolute;
top: 100%;
left: 0;
background: white;
z-index: 1000;
border: 1px solid #ccc;
display: none;
max-height: 200px;
width: 100%;
overflow-y: auto;
}
.custom-select .option {
display: flex;
align-items: center;
padding: 8px;
cursor: pointer;
}
.custom-select .option:hover {
background: #f5f5f5;
}
.custom-select .option img {
width: 20px;
height: 15px;
margin-right: 8px;
}
#custom-language-country,
#custom-shipping-country {
background-color: transparent;
border: none;
width: 70px;
}
#custom-language-country .selected-option:hover,
#custom-shipping-country .selected-option:hover {
background-color: #FFFFFF50;
}
#custom-language-country .options-list,
#custom-shipping-country .options-list {
width: 160px;
background-color: #FFFFFF50;
} #tab-desktop-buttons {
display: flex;
flex-direction: row;
width: 150px;
justify-content: space-between;
} @media (max-width: 768px) {
#tab-desktop-buttons {
display: none;
}
} #config-button {
display: none; position: relative;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1000;
}
#tab-desktop-buttons {
display: flex;
flex-direction: row;
width: 150px;
justify-content: space-between;
} @media (max-width: 768px) {
#config-button {
display: flex;
}
#tab-desktop-buttons {
display: none;
}
}
.gear-icon {
width: 30px;
height: 30px;
}
#country-loader-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(15, 15, 15, 0.95); display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
backdrop-filter: blur(3px);
transition: opacity 0.3s ease;
}
#country-loader-overlay.hidden {
opacity: 0;
pointer-events: none;
}
#country-loader-overlay .loader-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 20px;
} .loader-logo {
width: 70px; height: auto;
margin-bottom: 6px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.4));
} .loader-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(255, 255, 255, 0.15);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin-loader 0.8s linear infinite;
}
@keyframes spin-loader {
to {
transform: rotate(360deg);
}
} #country-loader-overlay p {
font-size: 0.95rem;
font-weight: 500;
color: #f5f5f5;
margin: 0;
text-align: center;
line-height: 1.4;
} #country-loader-overlay .loader-content {
opacity: 0;
animation: fadeIn 0.4s ease forwards 0.1s;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}