/* Stylizacja dla kontenera z opcjami produktu */
.custom-product-options {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f3f8f0; /* Dopasowane do tła strony */
    border-radius: 8px;
}

/* Stylizacja dla etykiet (label) */
.custom-product-options label {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    color: #333;
}

/* Stylizacja dla pola tekstowego */
.custom-product-options input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

/* Stylizacja dla select (wybór czcionki oraz konserwacja drewna) */
.custom-product-options select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

/* Stylizacja podglądu tekstu */
.custom-text-preview {
    margin-top: 20px;
    padding: 20px;
    border: 2px dashed #aaa;
    background-color: #ffffff;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
    min-height: 100px; /* Minimalna wysokość dla zapewnienia przestrzeni */
}

/* Stylizacja samego podglądu tekstu */
.custom-text-preview #preview_text {
    padding: 10px;
    font-size: 1.5em; /* Zmniejszenie początkowego rozmiaru czcionki */
    font-weight: normal;
    word-wrap: break-word;
    color: #333;
    white-space: nowrap; /* Sprawia, że tekst nie zawija się w kolejnych wierszach */
    overflow: hidden;
    text-overflow: ellipsis; /* Dodaje "..." na końcu długiego tekstu */
}

/* Stylizacja dla nagłówka "Podgląd:" */
.custom-text-preview label {
    font-weight: bold;
    font-size: 18px;
    color: #0073aa;
    position: absolute;
    top: -20px;
    left: 20px;
    background: #f3f8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Stylizacja do wyróżnienia wyboru drewna */
.custom-product-options select#wood_maintenance {
    margin-top: 20px;
}

/* Dodatkowy styl dla poprawy UX */
.custom-product-options input[type="text"]:focus,
.custom-product-options select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}