@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: block;
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff");
}

@font-face {
  font-family: "Montserrat-bold";
  font-style: normal;
  font-display: block;
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat-Bold.woff") format("woff");
}

@font-face {
  font-family: "Montserrat-light";
  font-style: normal;
  font-display: block;
  src: url("../fonts/Montserrat-Light.woff2") format("woff2"), url("../fonts/Montserrat-Light.woff") format("woff");
}

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

:root {
    --bs-body-bg: #414549 !important;
    --bs-dark-rgb: 65, 69, 73 !important;
    --bs-dark: #414549 !important;
    --bs-btn-disabled-color: #86888a !important;
    --bs-btn-disabled-border-color: #86888a !important;

    --csm-body-color: #fff !important;
    --csm-body-color-neg: #000 !important;
    --csm-body-color-gold: #ba9765;
    --csm-body-color-red: #ff7584;
    --csm-body-color-bronze: #422d19;
    --csm-body-sec-color: #6d6d6d;
    --csm-body-th-color: #434343;
    --csm-body-sec-color-hover: #fff;
    --csm-body-sec-color-active: #fff;

}



/* ===== Chrome, Edge, Safari ===== */
::-webkit-scrollbar {
    width: 8px;              /* cieńszy pasek */
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #000;        /* czarne tło */
}

::-webkit-scrollbar-thumb {
    background-color: var(--csm-body-color-bronze);  /* brąz */
    border-radius: 6px;
    border: 2px solid #000;     /* odstęp od tracka */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--csm-body-color-bronze);  /* jaśniejszy brąz na hover */
}

/* ===== Firefox ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--csm-body-color-bronze) #000;
}




body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Montserrat', 'Arial', sans-serif;
  color: var(--csm-body-color);

  display: flex;
  flex-direction: column;

  /* DOMYŚLNIE MOBILE */
  background-image: url('../img/BG-mobile.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;   /* pionowy zwykle lepiej wygląda od góry */
  background-attachment: scroll;     /* mobile i tak nie lubią fixed */
}





a {
    color: var(--csm-body-color-gold);
    text-decoration: none;
}

label {
    font-size: 16px;
    line-height: 18px;
}

input::-webkit-input-placeholder {
    font-family: 'Montserrat', sans-serif;
}

input:-ms-input-placeholder {
    font-family: 'Montserrat', sans-serif;
}

input::placeholder {
    font-family: 'Montserrat', sans-serif;
}

.placeholder {
    font-family: 'Montserrat', sans-serif;
    color: #8d8b8b;
    font-size: 13px;
}

.placeholder span {
    font-size: 10px;
}

.check-group label {
    font-size: 10px;
    line-height: 14px;
}


[data-i18n] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.i18n-fade-out {
    opacity: 0;
    transform: translateY(3px);
}


.header-media {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.header-media.fade-out {
    opacity: 0;
}



/* LOADER PEŁNOEKRANOWY */
#full-screen-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

/* HTML: <div class="loader"></div> */
/* #full-screen-loader .loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,var(--csm-body-color-gold) 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,var(--csm-body-color-gold));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
  margin-bottom: 16px;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
} */

.loader {
  height: 80px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 20px;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
  animation: l4-0 1.2s linear infinite alternate;
  margin-bottom: 16px;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#0000 0 5%,var(--csm-body-color-gold),#0000 20% 50%);
  animation: l4-1 1s linear infinite;
}
@keyframes l4-0 {
  to {border-radius: 50%}
}
@keyframes l4-1 {
  to {rotate: .5turn}
}

/* SEKCJE KROKÓW */
.step-section {
    display: none;
    animation: fadeIn 0.5s;
    margin-top: -24px;
}

.active-step {
    display: block;
}

/* Animacja wejścia */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/* GALERIA ZDJĘĆ */
/* .selectable-image {
    cursor: pointer;
    transition: transform 0.2s, border 0.2s;
    border: 3px solid transparent;
    opacity: 0.8;
}

.selectable-image:hover {
    transform: scale(1.05);
    border-color: #0d6efd;
    opacity: 1;
} */



/* PODGLĄD OBRAZKA */
.preview-img {
    max-height: 264px;
    object-fit: cover;
    border: 1px solid #444;
}

/* KONTENER WIDEO */
/* .video-container {
    position: relative;
    padding-bottom: 56.25%;

    height: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #444;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */



/* Placeholder inputa w dark mode, żeby był czytelniejszy */
::placeholder {
    color: #888 !important;
    opacity: 1;
}

/* .custom-cnt {
    position: relative;
} */

/* .custom-cnt .btn-custom {
    position: absolute;
    top: 0px;
    left: 12px;
    background-color: transparent;
    border: 0;
    padding: 6px;
    font-size: 20px;
    line-height: 20px;
    transform: rotate(90deg);
    z-index: 10;
    width: 30px;
    height: 30px;
} */


/* MODAL DO POWIĘKSZANIA ZDJĘĆ */
.modal-custom {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}

.modal-content-custom {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:translate(-50%, -50%) scale(0)} 
    to {transform:translate(-50%, -50%) scale(1)}
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10001;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


@media only screen and (max-width: 700px){
    .modal-content-custom {
        width: 100%;
    }
}

/* MODAL OBSŁUGI BŁĘDÓW */
/* Zmienne kolorystyczne wyciągnięte ze zdjęcia */
:root {
    --gold-primary: var(--csm-body-color-gold); /* Kolor przycisku i akcentów */
    --gold-hover: #b08d5e;
    --dark-bg: #121212;      /* Bardzo ciemne tło */
    --modal-border: var(--csm-body-color-bronze);
}

.error-modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Ciemniejsze tło, by skupić uwagę */
    backdrop-filter: blur(8px); /* Mocniejsze rozmycie tła */
}

.error-modal-content {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    margin: 15% auto; /* Wyśrodkowanie */
    padding: 40px;
    border: 1px solid var(--gold-primary); /* Złota ramka zamiast czerwonej */
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 0 30px rgba(200, 165, 118, 0.15); /* Delikatna złota poświata */
    animation: modalFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    border-radius: 12px;
}

/* Ikona */
/* Kontener ikony */
.error-modal-icon {
    margin-bottom: 20px;
    /* Ustawiamy kolor tekstu na złoty, SVG go odziedziczy dzięki stroke="currentColor" */
    color: var(--gold-primary); 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stylizacja samego SVG wewnątrz kontenera */
.error-modal-icon svg {
    width: 54px;  /* Ustalona szerokość */
    height: 54px; /* Ustalona wysokość */
    /* Opcjonalnie: delikatny cień/poświata pod ikoną */
    filter: drop-shadow(0 0 8px rgba(200, 165, 118, 0.3));
}

/* Nagłówek w stylu "Życzenia mają..." */
.error-modal-title {
    font-family: 'Montserrat-Bold', serif;
    color: #fff;
    font-weight: 400;
    margin-bottom: 10px;
    font-size: 22px;
    letter-spacing: 0.5px;
}

/* Treść komunikatu */
.error-modal-message {
    color: #cccccc;
    font-family: sans-serif; /* Prosty font dla czytelności */
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 300;
}

/* Przycisk stylizowany na "WYGENERUJ AVATAR" */
.error-modal-btn {
    background-color: var(--gold-primary);
    color: #1a1a1a;
    border: none;
    padding: 12px 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.error-modal-btn:hover {
    background-color: var(--csm-body-color-bronze); /* Efekt hover na biały */
    color: #000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Krzyżyk zamknięcia */
.error-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #666;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.error-modal-close:hover {
    color: var(--gold-primary);
}

/* Animacja */
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media only screen and (max-width: 600px) {
    .error-modal-content {
        margin: 30% auto;
        padding: 30px 20px;
        width: 85%;
    }
}


.error-modal-no {
    position: absolute;
    top: 3px;
    left: 4px;
    padding: 10px;
    color: var(--csm-body-color-gold);
    font-size: 12px;        
}


/* CUSTOM LAYOUT SELECTOR */
/* .layout-selector-wrapper {
    position: relative;
    width: 100%;
}

.layout-selector-display {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: var(--bs-body-bg);
    border: 1px solid #6c757d;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.layout-selector-display:hover {
    border-color: #0d6efd;
}

.layout-selector-display.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.layout-icon {
    width: 58px;
    height: 28px;
    object-fit: contain;
    margin-right: 24px;
}

.layout-name {
    flex: 1;
    color: #f8f9fa;
}

.layout-arrow {
    color: #6c757d;
    font-size: 12px;
    transition: transform 0.3s ease;
} */



/* .layout-dropdown {
    display: none;                   
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bs-body-bg);
    border: 1px solid #6c757d;
    border-radius: 0.375rem;
    margin-top: 5px;
    max-height: 250px;
    overflow-y: auto;
    animation: dropdownSlideIn 0.2s ease;
    z-index: 100;
}

@keyframes dropdownSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.layout-dropdown.drop-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 5px;
    margin-top: 0;
}

.layout-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.layout-option:hover {
    background-color: #343a40;
}

.layout-option.selected {
    background-color: #0d6efd;
}

.layout-option .layout-name {
    color: #f8f9fa;
}

.layout-dropdown::-webkit-scrollbar {
    width: 8px;
}
.layout-dropdown::-webkit-scrollbar-track {
    background: #1a1d20;
    border-radius: 4px;
}
.layout-dropdown::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 4px;
}
.layout-dropdown::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
} */


/* --------------------------- */



.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

.custom-container {
    width: 100%;
    max-width: 640px;   
    margin: 0 auto;
    flex: 1;
}

.custom-header .custom-logo img {
    width: 54px;
    height: auto;
}

#main.custom-container.hidden {
    display: none;
}

.custom-container-header { 
    margin-top: -24px;
}

.custom-container-header img {
    width: 100%;
}

.custom-nav-steps {
    display: none;
    align-items: center; 
    gap: 15px;
    position: absolute;
    top: -6px;
    right: 22px;
}



.custom-nav-steps button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* Tworzenie "kropki" za pomocą pseudoelementu */
.custom-nav-steps button::after {
    content: '';
    display: block;
    width: 14px;  /* Wielkość zwykłej kropki */
    height: 14px;
    border-radius: 50%;
    background-color: #cca36e; /* Kolor złoty (pobrany ze zdjęcia) */
    transition: all 0.3s ease;
}

/* --- STAN AKTYWNY (ACTIVE) --- */
/* To ten duży guzik z pierścieniem */
.custom-nav-steps button.active {
    width: 42px;       /* Całkowita szerokość */
    height: 42px;      /* Całkowita wysokość */
    border: 2px solid #cca36e; /* Złoty pierścień */
    border-radius: 50%;
}

/* Wększa kropka wewnątrz aktywnego stanu */
.custom-nav-steps button.active::after {
    width: 22px;
    height: 22px;
}

/* --- STAN NIEAKTYWNY (DISABLED) --- */
.custom-nav-steps button.disabled {
    cursor: default; /* Kursor nie-klikalny */
}

/* Zmiana koloru kropki na szary */
.custom-nav-steps button.disabled::after {
    background-color: #8c8c8c; /* Szary kolor */
}

/* Opcjonalnie: Hover dla zwykłych guzików (żeby użytkownik wiedział, że może kliknąć) */
.custom-nav-steps button:not(.active):not(.disabled):hover::after {
    opacity: 0.8;
    transform: scale(1.2);
}




.custom-container-body {
    padding: 20px;
    position: relative;
}

.custom-container-body h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    margin-bottom: 12px;
}

.custom-container-body h6 {
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    padding-top: 10px;
}

.custom-container-body p {
    font-family: 'Montserrat-light', sans-serif;
    font-size: 16px;
    margin-bottom: 20px;
}

.custom-container-body .step-section p span {
    font-family: 'Montserrat-light', sans-serif;
    font-size: 12px;
}

.custom-btn-lang {
    padding: 6px 10px;
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    background-color: transparent;
    border: none;
    transition: color 0.4s ease;
    cursor: pointer;
    color: var(--csm-body-sec-color);
}

.custom-btn-lang:hover {    
    color: var(--csm-body-sec-color-hover);
}

.custom-btn-lang.active {
    color: var(--csm-body-sec-color-active);
}

.custom-error-message {
    color: var(--csm-body-color-red);
    font-size: 10px;
    display: none;
    text-align: center;
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;

}

.custom-error-message.is-invalid {
    display: block;
}

.form-group {
    position: relative;
}


.email-group,
.upload-group,
.wishes-group {
    border: 2px solid var(--csm-body-color-gold);
    display: flex;
    align-items: center;
    padding: 12px 10px;
    
}

.upload-group {
    padding: 0 0 0 10px;
    margin-top: 12px;
}

.email-group label,
.upload-group label,
.wishes-group label,
.textarea-group label {
    border-right: 1px solid #45413d;
    padding-right: 10px;
}

.email-group label img,
.upload-group label img,
.wishes-group label img,
.textarea-group label img {
    width: 20px;
    height: auto;
}

.form-group .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.form-group input {
    background-color: transparent;
    border: none;
    width: 100%;
    color: var(--csm-body-color);
}


.form-group input:focus {
    background: transparent;
    color: var(--csm-body-color);
    outline: none;  
}

.upload-group input[type="file"] {
    display: none;
}

.upload-group input[type="text"] {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Autofill Chrome */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px black inset !important;
    box-shadow: 0 0 0px 1000px black inset !important;
    -webkit-text-fill-color: var(--csm-body-color) !important;
}

.email-group input,
.form-group .input-group,
.wishes-group input {
    margin-left: 10px;
    
}

img.preview-img {
    display: none;  
}

.upload-group.is-chosen img.preview-img {
    display: block;
}   

img.upload-icon {
    display: block;
}

.upload-group.is-chosen img.upload-icon {
    display: none;
}

.custom-btn {
    padding: 6px 10px;
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    background-color: transparent;
    border: 2px solid var(--csm-body-color-gold);
    padding: 8px;
    transition: color 0.4s ease;
    cursor: pointer;
    color: var(--csm-body-sec-color);
}
.custom-btn span {
    color: var(--csm-body-color-neg);
    background-color: var(--csm-body-color-gold);
    display: block;
    padding: 8px 32px;
    text-align: center;
    text-transform: uppercase; 
    font-size: 14px; 
}

.custom-btn.submit-btn {
    margin: 0 auto;
    margin-top: 30px;
    display: block; 
    width: 100%;    
}

.custom-btn:hover {
    background-color: var(--csm-body-color-bronze); 
    color: #000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.custom-btn.submit-btn:disabled,
.custom-btn.submit-btn.disabled {
    cursor: not-allowed;
    border: 2px solid var(--csm-body-sec-color);
}

.custom-btn.submit-btn:disabled span,
.custom-btn.submit-btn.disabled span {
    color: var(--csm-body-th-color);
    background-color: var(--csm-body-sec-color);
}

.custom-btn.next-btn span {
    padding: 14px 62px;
    position: relative;
}

.custom-btn.next-btn span::before,
.custom-btn.next-btn span::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("../img/star.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.custom-btn.next-btn span::before {
    top: 4px;
    left: 30px;
}
.custom-btn.next-btn span::after {
    bottom: 8px;
    right: 30px;
    transform: rotate(180deg);
}


.upload-btn {
    border: none;
    padding: 0;
}

.upload-btn span {
    padding: 18px 18px;
    font-size: 0;
}

.upload-btn span i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--csm-body-color-neg);
    border-right: 2px solid var(--csm-body-color-neg);
    transform: rotate(45deg);
    margin-left: 2px;
}

.upload-btn.is-chosen span i {
    border: none;           
    transform: rotate(0);   
    position: relative;     
    margin-left: 0;         
    width: 12px;
    height: 10px;
}

.upload-btn.is-chosen span i::before,
.upload-btn.is-chosen span i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;            
    height: 2px;            
    background-color: var(--csm-body-color-neg);
}
.upload-btn.is-chosen span i::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.upload-btn.is-chosen span i::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}



#step-0 .alert h2,
#step-4 .alert h2 {
    margin-bottom: 20px;
    margin-top: -32px;
    color: var(--csm-body-color-gold);
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 56px;
    line-height: 58px;
}

#step-0 .alert p,
#step-4 .alert p {
    margin-bottom: 16px;    
    color: var(--csm-body-color);
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 20px;
}   

.step-section h5 {
    font-size: 24px;
    line-height: 26px;
    font-family: 'Montserrat-bold', sans-serif;
    margin-bottom: 14px;
}

.step-section h5 span {
    color: var(--csm-body-color-gold);
    font-size: 70px;
}  

.upload-group p {
    font-size: 14px;
    line-height: 16px;
}

footer {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--csm-body-sec-color);
    font-family: 'Montserrat', sans-serif;
}


/* Kontener główny - zapewnia marginesy dla strzałek */
.layout-carousel-wrapper,
.avatar-carousel-wrapper {
    width: 100%;
    padding: 0 20px; /* Miejsce na strzałki */
    box-sizing: border-box;

}

/* Pojedynczy slajd (kontener logiczny) */
.brand-slide {
    padding: 10px; /* Odstęp między kafelkami */
    cursor: pointer;
    text-align: center;
    outline: none; /* Usuwa obrys focusa przy klikaniu */
}

/* Karta z ramką i obrazkiem */
.brand-card {
    border: 2px solid var(--csm-body-sec-color); 
    background-color: var(--csm-body-color-neg); 
    height: 94px;          
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
}

/* Obrazek w środku */
.brand-img-wrapper img {
    max-width: 60px;
    object-fit: contain;
    /* filter: grayscale(100%) brightness(1.2); Opcjonalnie: szare logo gdy nieaktywne */
    transition: filter 0.3s;
}


.brand-img-wrapper.brand-img-pmx img,
.brand-img-wrapper.brand-img-leoburnett img,
.brand-img-wrapper.brand-img-prodigious img {
    max-width: 46px;
}

.brand-img-wrapper.brand-img-msl img,
.brand-img-wrapper.brand-img-zenith img,
.brand-img-wrapper.brand-img-arc img,
.brand-img-wrapper.brand-img-pg img {
    max-width: 52px;
}


.brand-img-wrapper.brand-img-pww img,
.brand-img-wrapper.brand-img-saatchi img {
    max-width: 68px;
}


/* Nazwa pod kafelkiem */
.brand-name {
    margin-top: 6px;
    color: var(--csm-body-sec-color);
    font-weight: bold;
    font-size: 12px;
    transition: color 0.3s;
}


.brand-card.selected-card {
    border-color: var(--csm-body-color-gold); 
}
.brand-name.selected-text {
    color: var(--csm-body-color-gold);
}

.brand-slide:hover .brand-img-wrapper img,
.brand-card.selected-card .brand-img-wrapper img {
    filter: grayscale(0%);
}


/* --- STYLIZACJA STRZAŁEK SLICK --- */
.layout-carousel-wrapper .slick-prev, 
.layout-carousel-wrapper .slick-next {
    width: 30px !important;
    height: 30px !important;
    top: 40% !important;
}

.avatar-carousel-wrapper .slick-prev, 
.avatar-carousel-wrapper .slick-next {
    width: 30px !important;
    height: 30px !important;
    top: 48% !important;
}


.layout-carousel-wrapper .slick-prev:before, .slick-next:before,
.avatar-carousel-wrapper .slick-prev:before, .slick-next:before {
    font-size: 30px !important;
    color: var(--csm-body-color); /* Białe strzałki */
}


/* 1. Resetujemy style domyślne i tworzymy bazę dla strzałki */
.layout-carousel-wrapper .slick-prev:before,
.layout-carousel-wrapper .slick-next:before,
.avatar-carousel-wrapper .slick-prev:before,
.avatar-carousel-wrapper .slick-next:before {
    content: '';          /* Musi być puste, usuwamy znaki */
    display: inline-block; /* Żeby działały wymiary i transformacje */
    width: 12px; 
    height: 12px;
    border-right: 3px solid white; 
    border-bottom: 3px solid white;
    border-top: 0;
    border-left: 0;
    background: transparent;
    opacity: 1;    
    vertical-align: middle;
}

.layout-carousel-wrapper .slick-next:before,
.avatar-carousel-wrapper .slick-next:before {
    transform: rotate(-45deg);
    margin-left: -8px; 
}

.layout-carousel-wrapper .slick-prev:before,
.avatar-carousel-wrapper .slick-prev:before {
    transform: rotate(135deg);
    margin-right: -8px;
}

.avatar-carousel-wrapper .slick-next:before {
    margin-left: 0px;
}

.avatar-carousel-wrapper .slick-prev:before {
    margin-right: 0px;
}


.check-group {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}



/* .check-group input[type="checkbox"] {
    width: initial;
    margin: 2px 12px;
} */


.custom-check {
  position: relative;
  padding-left: 34px;
  cursor: pointer;
  display: block;
  line-height: 22px;
  font-size: 15px;
}

/* ukrywamy zwykły checkbox */
.custom-check input {
  position: absolute;
  opacity: 0;
  width: 50px;
}

/* kwadrat */
.custom-check .checkmark {
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--csm-body-color-gold);
  background: transparent;
}

/* hover (opcjonalnie) */
.custom-check:hover .checkmark {
  border-color: var(--csm-body-color-gold);
}

/* zaznaczony */
.custom-check input:checked + .checkmark {
  background: var(--csm-body-color-neg);      
  border-color: var(--csm-body-color-gold);   
}

/* ptaszek */
.custom-check .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* pokazujemy ptaszek gdy zaznaczone */
.custom-check input:checked + .checkmark:after {
  display: block;
}

/* styl ptaszka */
.custom-check .checkmark:after {
  left: 5px;
    top: 0px;
    width: 5px;
    height: 11px;
    border: solid var(--csm-body-color);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}




/* Kontener główny */
.avatar-carousel-wrapper {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 36px;
}

/* Górny slider (duży obrazek) */
.avatar-carousel-wrapper .slider-main {
    margin-bottom: 10px;
}
/* .avatar-carousel-wrapper .slider-main .slick-slide img {
    width: 100%;
    max-width: 300px; 
    height: auto;
    border-radius: 15px; 
    margin: 0 auto;
    display: block;
} */



/* --------- RAMKA ZOOM --------- */

/* Styl dla kontenera maskującego (RAMKA) */
.avatar-carousel-wrapper .slider-main .img-mask {
    display: block;
    width: 100%;
    max-width: 300px;       /* Maksymalna szerokość ramki */
    aspect-ratio: 16 / 9;   /* Ustal proporcje (np. 16/9, 4/3 lub konkretna wysokość w px), aby ramka była stabilna */
    margin: 0 auto;
    border-radius: 15px;    /* Zaokrąglenie rogów JEST TUTAJ */
    overflow: hidden;       /* KLUCZOWE: to ucina wszystko, co wystaje poza zaokrąglenia */
    position: relative;     /* Dla pewności pozycjonowania */
}

/* Styl dla obrazka wewnątrz (TREŚĆ) */
.avatar-carousel-wrapper .slider-main .img-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Zapewnia, że obrazek wypełni ramkę bez rozciągania/zniekształcania */
    
    /* Tutaj robimy ZOOM */
    transform: scale(1.5);  
    transform-origin: center center; /* Powiększanie od środka */
    
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease; /* Opcjonalnie: płynność jeśli zmieniasz skalę dynamicznie */
}








/* Dolny slider (nawigacja) */
.avatar-carousel-wrapper .slider-nav {
    margin-top: 10px;
}
.avatar-carousel-wrapper .slider-nav .slick-slide {
    padding: 0 5px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Wygląd miniaturek */
.avatar-carousel-wrapper .slider-nav .slick-slide img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* Idealne koło */
    border: 3px solid transparent; /* Miejsce na ramkę */
    margin: 0 auto;
}

/* Aktywna miniaturka (środkowa) */
.avatar-carousel-wrapper .slider-nav .slick-current.slick-center {
    opacity: 1;
    transform: scale(1.1); /* Lekkie powiększenie */
}

.avatar-carousel-wrapper .slider-nav .slick-current.slick-center img {
    border-color: #c5a47e; /* Kolor złotej ramki ze zdjęcia */
}


.avatar-carousel-wrapper .slider-nav .slick-track {
    padding: 10px 0;
}




.textarea-group {
    display: flex;
    flex-direction: column;     /* elementy domyślnie jeden pod drugim */
    gap: 10px;
    width: 100%;

    border: 2px solid var(--csm-body-color-gold);
    display: flex;
    align-items: center;
    padding: 12px 10px;
    margin-top: 24px;

}

/* GÓRNY WIERSZ: label + tekst */
.textarea-group label {
    display: flex;
    align-items: center;
}

.textarea-group {
    position: relative;
}

/* Ten kontener trzyma label + opis obok siebie */
.textarea-group .top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* TEKSTAREA NA PEŁNĄ SZEROKOŚĆ */
.textarea-group textarea {
    width: 100%;
    padding: 12px;
    border: none;
    resize: vertical;
    font-size: 14px;
    box-sizing: border-box;
    background-color: transparent;
    color: var(--csm-body-color);
    font-family: 'Montserrat-light';
}

/* PRZYCISKI POD TEKSTAREĄ */
.textarea-group .example-btn {
    width: 100%;
    padding: 4px 16px;
    border: none;
    border-radius: 30px;
    background: var(--csm-body-color-gold);
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .custom-header .custom-logo img {
        width: 70px;
        height: auto;
    }
}


@media (min-width: 1200px) {

    body {
        
        background-image: url('../img/BG-desktop.jpg');
        background-position: center center;
        background-attachment: fixed;  /* opcjonalnie ładny efekt */
    }

    #step-0 {
        margin-top: 42px;
    }

    #step-3.step-section {
        margin-top: -44px;
    }

    .custom-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding: 12px;
        padding-top: 26px;
    }

    .custom-header .custom-logo {
        flex: 1;
        text-align: center;
        padding-left: 108px;
    }

    .custom-header .custom-logo img {
        width: 94px;
        height: auto;
    }

    .custom-container {
        display: flex;
        flex-direction: row;
        max-width: 1920px;
        padding: 42px;
    }

    .custom-container-header {
        width: 55%;
    }

    .custom-container-header video {
        margin-top: -68px;
        width: 98%;
    }

    .custom-container-body {
        width: 45%;
        max-width: 560px;
        padding-right: 88px;
    }

    .custom-nav-steps {
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
        flex-direction: column;
    }


    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: rgba(0, 0, 0, 0.8);
    }

    footer p br {
        display: none;        
    }


}




/* z wcześniejszego video/style2.css */
/* --------------------------------- */


body.v-body {
    background-image: url('../img/BG-mobile-bl.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;   /* pionowy zwykle lepiej wygląda od góry */
    background-attachment: scroll;     /* mobile i tak nie lubią fixed */
}

.v-video-wrapper {
    display: none;
}

.v-body .v-video-wrapper {
    display: block;
}

.v-body .custom-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: none;
}


/* Kontener – wygląd jak na obrazku */
.v-video-container {
    position: relative;
    height: auto;
    max-width: 600px;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(214, 186, 140, 0.7);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

/* Video */
.v-video-container video {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* Duży przycisk PLAY */
.v-video-container .play-overlay {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(214, 186, 140, 0.9);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform .2s ease, opacity .2s ease;
}

.v-video-container .play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.07);
}


/* Ikona PLAY */
.v-video-container .play-overlay::after {
    content: "";
    width: 50%;
    height: 50%;
    background: black;

    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='40,30 70,50 40,70' fill='black'/></svg>") center / contain no-repeat;
}

/* Kontener błędów */
.v-error-container {
    color: white;
    text-align: center;
    margin-top: 20px;
}


.v-error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.v-error-message {
    text-align: center;
    color: #fff;
    background-color: rgba(255, 0, 0, 0.1);
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 10px;
    padding: 32px;
    max-width: 600px;
    margin: 12px;
}

.v-error-message h2 {
    font-size: 1.5em;
    margin-bottom: 16px;
    color: #ff6b6b;
}

.v-error-message p {
    font-size: 1em;
    line-height: 1.2;
    color: #ddd;
}


.v-body .share-container {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.v-body .share-container.mobile-share {
  position: absolute;
  top: 7px;
  right: 6px;
  margin: 0;
  z-index: 100;
}


.v-body .share-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.v-body .share-btn:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.v-body .share-btn svg {
  width: 22px;
  height: 22px;
  fill: #000;
}

.v-body .mobile-share .share-btn {
    width: 28px;
    height: 28px;
}

.v-body .mobile-share .share-btn svg {
    width: 14px;
    height: 14px;
}

.v-note-wrapper {
    margin-bottom: 44px;
}


.v-note-wrapper p {
    font-size: 12px;
    color: var(--csm-body-color-gold);
    text-align: center;
    width: 80%;
    margin: 0 auto;
}




@media (min-width: 1200px) {
  body.v-body {
    background-image: url('../img/BG-desktop-bl.jpg');
    background-position: center center;
    background-attachment: fixed;  /* opcjonalnie ładny efekt */
  }


  .v-body .custom-container {
    flex-direction: row;
    gap: 20px;
  }

  .v-body .empty-container {
    width: 120px;
    flex: 1;
  }

  .v-body .v-video-container {
    max-width: 1020px;
    border-radius: 32px;
  }

  .v-body .share-container {
    width: 120px;
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 4px;
  }

  .v-video-container .play-overlay {
        width: 90px;
        height: 90px;
    }

    .v-note-wrapper p {        
        width: 44%;

    }
}


#ot-sdk-btn-floating .ot-floating-button__front,
#ot-sdk-btn-floating .ot-floating-button__back {
    background-color: var(--csm-body-color-gold) !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn), 
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn {
    background-color: var(--csm-body-color-gold) !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk .ot-active-menu {
    background-color: #C3c3c3 !important;
}


#onetrust-consent-sdk #onetrust-accept-btn-handler, 
#onetrust-banner-sdk #onetrust-reject-all-handler {
    background-color: var(--csm-body-color-gold) !important;
}