/* components/buttons.css */

/* Przycisk */
.btn-wniosek {
    background: var(--btn-background-color);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8em;
    border-radius: 30px;
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: #fff;
    cursor: pointer;
    outline: none; /* Usuwa domyślną obramówkę fokusu */
}

    .btn-wniosek:hover {
        background: var(--btn-hover-background-color);
    }

    .btn-wniosek:active,
    .btn-wniosek.active {
        background: var(--btn-hover-background-color);
    }

    .btn-wniosek:focus {
        background: var(--btn-hover-background-color);
        -webkit-box-shadow: none;
                box-shadow: none; /* Usuwa domyślny cień fokusu */
    }

/* Przycisk next */
.btn-next {
    width: 100%;
    background: var(--btn-background-color);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8em;
    border-radius: 30px;
    border: 2px solid var(--btn-background-color);
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: #fff;
    cursor: pointer;
    outline: none; /* Usuwa domyślną obramówkę fokusu */
    margin-top: 10px;
}
    
    .btn-next:hover {
        background: var(--btn-hover-background-color);
    }
    
    .btn-next:active,
    .btn-next.active {
        background: var(--btn-hover-background-color);
    }
    
    .btn-next:focus {
        background: var(--btn-hover-background-color);
        -webkit-box-shadow: none;
                box-shadow: none;
    }

/* Przycisk prev */
.btn-prev {
    width: 100%;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8em;
    border-radius: 30px;
    border: 2px solid var(--btn-background-color);
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: var(--multi-step-h3-h2);
    cursor: pointer;
    outline: none; /* Usuwa domyślną obramówkę fokusu */
    margin-top: 10px;
}

    .btn-prev:hover {
        border: 2px solid var(--btn-hover-background-color);
    }

    .btn-prev:active,
    .btn-prev.active {
        border: 2px solid var(--btn-hover-background-color);
    }

    .btn-prev:focus {
        border: 2px solid var(--btn-hover-background-color);
        -webkit-box-shadow: none;
                box-shadow: none; /* Usuwa domyślny cień fokusu */
    }

/* Przycisk add-rep (Dodaj reprezentanta) */
.btn-add-rep {
    background: var(--btn-background-color);
    border: none;
    font-weight: 700;
    border-radius: 30px;
    border: 2px solid var(--btn-background-color);
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: #fff;
    cursor: pointer;
    outline: none;
    width: auto;          /* nadpisuje 100% z .btn-next */
    margin-top: 0;        /* brak odstępu u góry */
}

    .btn-add-rep:hover {
        background: var(--btn-hover-background-color);
    }

    .btn-add-rep:active,
    .btn-add-rep.active {
        background: var(--btn-hover-background-color);
    }

    .btn-add-rep:focus {
        background: var(--btn-hover-background-color);
        -webkit-box-shadow: none;
                box-shadow: none;
    }

.btn-del-rep {
    background: #a72828;
    border: none;
    font-weight: 700;
    border-radius: 30px;
    border: 2px solid #a72828;
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: #fff;
    cursor: pointer;
    outline: none;
    width: auto;          /* nadpisuje 100% z .btn-next */
    margin-top: 0;        /* brak odstępu u góry */
}

    .btn-del-rep:hover {
        background: #7c1e1e;
    }

    .btn-del-rep:active,
    .btn-add-rep.active {
        background: #7c1e1e;
    }

    .btn-del-rep:focus {
        background: #7c1e1e;
        -webkit-box-shadow: none;
                box-shadow: none;
    }

/* Przycisk back */
.btn-back {
    width: 100%;
    background: var(--btn-background-color);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8em;
    border-radius: 30px;
    border: 2px solid var(--btn-background-color);
    -webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;
    transition: background 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    color: #fff !important;
    cursor: pointer;
    outline: none; /* Usuwa domyślną obramówkę fokusu */
    margin-top: 10px;
}
    
    .btn-back:hover {
        background: var(--btn-hover-background-color);
        color: #fff !important;
    }

    .btn-back:active,
    .btn-back.active {
        background: var(--btn-hover-background-color);
        color: #fff !important;
    }

    .btn-back:focus {
        background: var(--btn-hover-background-color);
        -webkit-box-shadow: none;
                box-shadow: none;
        color: #fff !important;
    }

/* -------------------------------------------
   RESPONSYWNOŚĆ
--------------------------------------------*/

/* Poniżej 576 px – uniwersalne mobile */
@media (max-width: 576px) {
    .btn-add-rep,
    .btn-del-rep {
        font-size: 0.8rem;
        padding: 0.55em 0.7em;
    }
}

/* ~375 × 667 px (iPhone SE 2020 / 8) */
@media (max-width: 375px) and (max-height: 667px) {
    .btn-add-rep,
    .btn-del-rep {
        font-size: 0.75rem;
        padding: 0.45em 0.6em;
    }
}

/* ~390 × 884 px (iPhone 12/13/14) */
@media (min-width: 376px) and (max-width: 390px) and (max-height: 884px) {
    .btn-add-rep,
    .btn-del-rep {
        font-size: 0.78rem;
        padding: 0.5em 0.65em;
    }
}

/* ~360 × 740 px (Pixel 7 / Galaxy S20) */
@media (max-width: 360px) and (max-height: 740px) {
    .btn-add-rep,
    .btn-del-rep {
        font-size: 0.74rem;
        padding: 0.48em 0.30em;
    }
}

/* ~344 × 882 px (iPhone 15 Pro) */
@media (max-width: 344px) and (max-height: 882px) {
    .btn-add-rep,
    .btn-del-rep {
        font-size: 0.72rem;
        padding: 0.45em 0.6em;
    }
}