/* WC Zwroty EU – style frontendowe (OceanWP compatible) */

/*
 * OceanWP używa zmiennych CSS dla kolorów przycisku:
 *   --ocean-button-color, --ocean-button-color-outter (border)
 *   --ocean-button-hover-color, --ocean-button-hover-color-outter
 * Klasy przycisków: .button, .wc-proceed-to-checkout, .ocean-button
 * Input/textarea border-radius: zwykle 0 lub bardzo mały (zależy od customizera)
 * Fonty dziedziczone z body OceanWP.
 */

/* ---------- wrapper ---------- */

.wcze-wrap {
    margin-top: 1.5em;
    clear: both;
}

/* ---------- przycisk „Odstąp od umowy" ----------
   Używamy klas OceanWP (.button) + własna klasa koloru.
   Kolor przycisku można nadpisać z customizera OceanWP
   przez: Customize → General → Buttons → Background Color.
   Jeśli chcesz stały czerwony niezależnie od motywu – odkomentuj !important niżej. */

.wcze-btn-open.button {
    background-color: #c0392b;
    border-color: #a93226;
    color: #fff;
    font-family: inherit; /* dziedziczy font OceanWP */
    font-weight: 600;
    letter-spacing: inherit;
    transition: background-color .2s ease, border-color .2s ease;
}
.wcze-btn-open.button:hover,
.wcze-btn-open.button:focus {
    background-color: #a93226;
    border-color: #922b21;
    color: #fff;
}

/* ---------- formularz ---------- */

.wcze-form-wrap {
    margin-top: 1.25em;
    padding: 1.5em;
    border: 2px solid #e74c3c;
    /* OceanWP domyślnie nie używa border-radius na kartach,
       zostaw 0 lub dopasuj do motywu */
    border-radius: 0;
    background: #fdf9f9;
    max-width: 560px;
}

.wcze-form-wrap h3 {
    margin-top: 0;
    margin-bottom: .75em;
    color: #c0392b;
    font-family: inherit;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: inherit; /* szanuje ustawienie nagłówków OceanWP */
}

/* Notka prawna */
.wcze-legal {
    font-size: .875em;
    line-height: 1.6;
    color: #555;
    background: #fff;
    border-left: 3px solid #c0392b;
    padding: .6em 1em;
    margin-bottom: 1.25em;
}

/* ---------- pola formularza ----------
   OceanWP stylizuje inputy przez:
   #ocean-footer input, .woocommerce-page input[type="text"] itd.
   Nasze klasy .wcze-field muszą wygrać specyficznością. */

.wcze-fields {
    display: flex;
    flex-direction: column;
    gap: .875em;
    margin-bottom: 1.25em;
}

.wcze-fields label {
    display: flex;
    flex-direction: column;
    gap: .3em;
    font-family: inherit;
    font-size: .9375em;
    font-weight: 600;
    color: inherit;
}

.wcze-form-wrap input.wcze-field,
.wcze-form-wrap textarea.wcze-field {
    width: 100%;
    padding: .55em .75em;
    /* OceanWP border zwykle: 1px solid #e0e0e0 – dopasowujemy */
    border: 1px solid #e0e0e0;
    border-radius: 0;
    font-family: inherit;
    font-size: .9375em;
    line-height: 1.5;
    color: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease;
    -webkit-appearance: none;
}

.wcze-form-wrap input.wcze-field:focus,
.wcze-form-wrap textarea.wcze-field:focus {
    border-color: #c0392b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, .15);
}

/* Checkbox – OceanWP nie nadpisuje checkboxów, bezpieczne */
.wcze-checkbox {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: .5em !important;
    font-weight: 400 !important;
    font-size: .9375em;
    cursor: pointer;
}
.wcze-checkbox input[type="checkbox"] {
    margin-top: .2em;
    flex-shrink: 0;
}

/* ---------- przyciski akcji ---------- */

.wcze-actions {
    display: flex;
    gap: .75em;
    flex-wrap: wrap;
    align-items: center;
}

/* Przycisk „Anuluj" – drugorzędny styl OceanWP */
.wcze-btn-cancel.button {
    background-color: transparent;
    border-color: #ccc;
    color: #555;
}
.wcze-btn-cancel.button:hover {
    background-color: #f5f5f5;
    border-color: #aaa;
    color: #333;
}

/* ---------- komunikaty ---------- */

.wcze-message {
    margin-top: .875em;
    padding: .75em 1em;
    font-size: .9375em;
    line-height: 1.5;
    /* OceanWP nie ma własnych klas alertów – bezpieczne */
    border-radius: 0;
}
.wcze-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.wcze-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.wcze-info {
    color: #777;
    font-style: italic;
    font-size: .9em;
}

/* ---------- zakładka „Zwroty" w Moim Koncie ----------
   OceanWP renderuje woocommerce-MyAccount-content,
   tabela dziedziczy style z .woocommerce-orders-table */

.woocommerce-MyAccount-content .wcze-wrap table {
    width: 100%;
}

/* ---------- statusy (pill badges) ---------- */

.wcze-status {
    display: inline-block;
    padding: .2em .65em;
    border-radius: 2em;
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
    white-space: nowrap;
}
.wcze-status--nowe          { background: #dbeafe; color: #1e40af; }
.wcze-status--w_trakcie     { background: #fef9c3; color: #854d0e; }
.wcze-status--zaakceptowane { background: #d1fae5; color: #065f46; }
.wcze-status--odrzucone     { background: #fee2e2; color: #991b1b; }
.wcze-status--zakonczone    { background: #e5e7eb; color: #374151; }

/* ---------- strona guest (poza Moim Kontem) ----------
   OceanWP content area ma max-width z customizera;
   nie ograniczamy tu szerokości, żeby nie kolidować */

.wcze-guest-page {
    padding: 2em 0;
}

.wcze-guest-page h1 {
    font-family: inherit;
    font-size: 1.5em;
    margin-bottom: .5em;
}

/* ---------- responsywność ---------- */

@media (max-width: 600px) {
    .wcze-form-wrap {
        padding: 1em;
    }
    .wcze-actions {
        flex-direction: column;
    }
    .wcze-actions .button {
        width: 100%;
        text-align: center;
    }
}