/* ==========================================================================
   Baner zgody na cookies - hej-wesele.com

   Kolory i krój pisma biorą się ze zmiennych motywu Kadence, a jeśli arkusz
   motywu jeszcze się nie wczytał, z wartości zapasowych po przecinku. Baner
   pojawia się przed resztą strony, więc nie może czekać na cudze style.
   ========================================================================== */

.hw-zgody {
    position: fixed;
    z-index: 99999;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 22px;
    background: #ffffff;
    color: var(--global-palette3, #1f2933);
    border: 1px solid #e0ddd7;
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(31, 41, 51, .18);
    font-family: var(--global-body-font-family, Rubik, sans-serif);
    font-size: 15px;
    line-height: 1.55;
}

.hw-zgody[hidden] {
    display: none;
}

.hw-zgody__tytul {
    margin: 0 0 6px;
    font-family: var(--global-heading-font-family, 'Sorts Mill Goudy', serif);
    font-size: 1.15em;
    font-weight: 600;
}

.hw-zgody__tresc {
    margin: 0 0 16px;
    color: var(--global-palette4, #3e4c59);
}

.hw-zgody__tresc a {
    color: var(--global-palette1, #e47b02);
    text-decoration: underline;
}

/* Oba przyciski mają ten sam rozmiar i wagę. Odrzucenie zgody nie może być
   trudniejsze niż jej udzielenie - to wprost wynika z RODO. */
.hw-zgody__przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hw-zgody__btn {
    flex: 1 1 180px;
    padding: 11px 18px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    /* Motyw ustawia przyciskom capitalize - bez tego "Tylko niezbędne"
       wyswietla sie jako "Tylko Niezbędne". */
    text-transform: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.hw-zgody__btn--tak {
    background: linear-gradient(135deg, rgb(255, 5, 124) 0%, rgb(255, 105, 0) 100%);
    color: #ffffff;
}

.hw-zgody__btn--tak:hover {
    background: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(255, 5, 124) 100%);
}

.hw-zgody__btn--nie {
    background: #ffffff;
    color: var(--global-palette3, #1f2933);
    border-color: var(--global-palette6, #7b8794);
}

.hw-zgody__btn--nie:hover {
    background: var(--global-palette7, #f3f4f7);
    border-color: var(--global-palette3, #1f2933);
}

.hw-zgody__btn:focus-visible {
    outline: 3px solid var(--global-palette1, #e47b02);
    outline-offset: 2px;
}

/* Odnośnik do zmiany decyzji. Podstawowe miejsce to stopka; wersja przypięta
   do rogu włącza się tylko wtedy, gdy w stopce nie ma gdzie go wpiąć. */
.hw-zgody-zmien {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}

/* W stopce sasiaduje z "Polityka Prywatnosci" i "Regulamin", wiec musi mieć
   ten sam kolor co one - motyw daje tam palette1, a przycisk sam z siebie
   dziedziczy ciemny kolor tekstu stopki. */
.hw-zgody-zmien--stopka {
    color: var(--global-palette1, #e47b02);
}

.hw-zgody-zmien--rog {
    position: fixed;
    z-index: 99998;
    left: 16px;
    bottom: 16px;
    padding: 7px 13px;
    background: #ffffff;
    color: var(--global-palette4, #3e4c59);
    border: 1px solid #e0ddd7;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(31, 41, 51, .12);
    font-family: var(--global-body-font-family, Rubik, sans-serif);
    font-size: 13px;
    text-decoration: none;
}

/* Zastępnik w miejscu formularza MailerLite, dopóki nie ma zgody. Bez niego
   na stronie zostaje pusta dziura, po której nie widać, że czegoś brakuje. */
.hw-zgody-zastepnik {
    padding: 26px 22px;
    background: var(--global-palette7, #f3f4f7);
    border: 1px dashed var(--global-palette6, #7b8794);
    border-radius: 8px;
    color: var(--global-palette4, #3e4c59);
    font-family: var(--global-body-font-family, Rubik, sans-serif);
    font-size: 15px;
    text-align: center;
}

.hw-zgody-zastepnik p {
    margin: 0 0 12px;
}

.hw-zgody-zastepnik__btn {
    padding: 10px 20px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, rgb(255, 5, 124) 0%, rgb(255, 105, 0) 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
}

.hw-zgody-zastepnik__btn:hover {
    background: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(255, 5, 124) 100%);
}

.hw-zgody-zastepnik__btn:focus-visible {
    outline: 3px solid var(--global-palette1, #e47b02);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .hw-zgody {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 17px 18px;
        font-size: 14px;
    }

    .hw-zgody__btn {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-zgody__btn {
        transition: none;
    }
}