/*
 * Style kalkulatora druku 3D - wyekstrahowane z kalkulator.html (Faza 2 integracji z WP).
 *
 * KAŻDA deklaracja ma !important. Powód jest konkretny, nie "na wszelki wypadek": motyw
 * "Untitled" na protofab.pl ładuje pełny Bootstrap ORAZ własny style.css z regułą globalną
 * wprost na gołe znaczniki (nie klasy!):
 *   select, input[type="number"], ... { height: 34px; line-height: 1.42857143;
 *                                        color: #777777; box-shadow: inset 0 1px 1px ...; }
 * Nasze selektory (.o3dp-calc select itd.) mają wyższą specyficzność, więc WYGRYWAJĄ - ale
 * TYLKO dla właściwości, które faktycznie deklarujemy. Właściwość, której nie deklarujemy
 * (np. wcześniej "height"/"line-height"), po cichu dziedziczy się z motywu i psuje wygląd
 * (stąd przycinany tekst w listach rozwijanych). !important eliminuje całą tę klasę błędów
 * na przyszłość, niezależnie od tego, ile jeszcze podobnych reguł ma motyw w >20 000 liniach
 * swojego CSS, których nie sposób ręcznie prześledzić do końca.
 *
 * Kontener .o3dp-calc owija cały kalkulator - każdy selektor jest nim poprzedzony, żeby style
 * nie wyciekały na resztę strony. Zmienne CSS (--bg-color itd.) są na .o3dp-calc, nie na :root.
 */

.o3dp-calc {
    --bg-color: #ffffff !important;
    --card-bg: #ffffff !important;
    --accent-primary: #1e5a99 !important;
    --accent-secondary: #e67e22 !important;
    --text-color: #2c3e50 !important;
    --text-muted: #7f8c8d !important;
    --border-color: #dcdde1 !important;
}
.o3dp-calc {
    font-family: 'Dosis', sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    padding: 20px !important;
    line-height: 1.5 !important;
    font-size: 15px !important;
}
.o3dp-calc .container {
    max-width: 100% !important; /* wypełnia szerokość kolumny treści strony/artykułu, zamiast własnego sztywnego limitu */
    margin: 0 auto !important;
    background: var(--card-bg) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    border: 1px solid #e1e4e8 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
}
.o3dp-calc h1 {
    text-align: center !important;
    color: var(--accent-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 1.8em !important;
    margin: 0 0 25px 0 !important;
    font-weight: 800 !important;
    font-family: 'Dosis', sans-serif !important;
}

.o3dp-calc .layout-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
}
.o3dp-calc .layout-col-left {
    flex: 35 1 0% !important;
    min-width: 320px !important;
    max-width: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}
.o3dp-calc .layout-col-right {
    flex: 65 1 0% !important;
    min-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
}

.o3dp-calc .form-group { margin: 0 0 15px 0 !important; }
.o3dp-calc label {
    display: block !important;
    font-weight: 600 !important;
    margin: 0 0 5px 0 !important;
    color: var(--text-color) !important;
    font-size: 15px !important;
    font-family: 'Dosis', sans-serif !important;
}

/* --- Pola formularza: tu dokładnie były kolizje z motywem, patrz komentarz na górze pliku --- */
.o3dp-calc input[type="number"],
.o3dp-calc input[type="text"],
.o3dp-calc input[type="email"],
.o3dp-calc input[type="tel"],
.o3dp-calc select,
.o3dp-calc textarea {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    background-color: #fafbfc !important;
    background-image: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-family: 'Dosis', sans-serif !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: var(--text-color) !important;
    transition: border-color 0.2s !important;
}
/* Pełny reset natywnego wyglądu <select> + własna strzałka SVG (kolor #2c3e50 zaszyty w danych) -
   appearance:none przejmuje renderowanie w całości, więc żaden motyw nie narzuci już swojej
   wysokości/paddingu na natywny widżet selecta. */
.o3dp-calc select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    padding-right: 34px !important;
}
.o3dp-calc input:focus,
.o3dp-calc select:focus,
.o3dp-calc textarea:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 90, 153, 0.1) !important;
}

.o3dp-calc .row { display: flex !important; gap: 15px !important; }
.o3dp-calc .row .form-group { flex: 1 !important; min-width: 0 !important; }
/* W wąskiej lewej kolumnie (35% szerokości na stronie WP) etykiety w wierszach 2-3 kolumnowych
   nie mieszczą się w jednej linii i się zawijają - mniejsza czcionka + zapobieganie zawijaniu. */
.o3dp-calc .row .form-group label {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.o3dp-calc .checkbox-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fdfefe !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    margin: 0 0 10px 0 !important;
    transition: 0.2s ease !important;
    font-size: 14px !important;
}
.o3dp-calc .checkbox-group:hover { background: #f4f7f9 !important; }
.o3dp-calc .cf-label { color: #d35400 !important; font-weight: 600 !important; }
.o3dp-calc .disabled-checkbox { opacity: 0.5 !important; pointer-events: none !important; background: #eee !important; }

.o3dp-calc button.btn-calc {
    width: 100% !important;
    padding: 14px !important;
    background: var(--accent-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-family: 'Dosis', sans-serif !important;
    margin-top: 5px !important;
    transition: 0.3s !important;
    box-shadow: 0 4px 6px rgba(230, 126, 34, 0.2) !important;
}
.o3dp-calc button.btn-calc:hover {
    background: #cf711f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(230, 126, 34, 0.3) !important;
}

.o3dp-calc .results {
    padding: 15px 20px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border-left: 5px solid var(--accent-primary) !important;
    display: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02) !important;
    margin-top: 20px !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.o3dp-calc .results h3 { margin-top: 0 !important; color: var(--accent-primary) !important; margin-bottom: 10px !important; font-size: 1.3em !important; font-family: 'Dosis', sans-serif !important; }
.o3dp-calc .results p {
    margin: 6px 0 !important;
    font-size: 15px !important;
    display: flex; /* BEZ !important - #resUnitPriceRow jest chowany/pokazywany przez JS zależnie od ilości sztuk */
    justify-content: space-between !important;
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 4px !important;
}
.o3dp-calc .price-total {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--accent-primary) !important;
    margin-top: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: 'Dosis', sans-serif !important;
}
.o3dp-calc hr { border: 0 !important; border-top: 1px solid #edf2f7 !important; margin: 10px 0 !important; }
.o3dp-calc .info-panel {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 10px !important;
    text-align: right !important;
    font-style: italic !important;
    line-height: 1.2 !important;
}

.o3dp-calc .placeholder-panel {
    height: 350px !important;
    display: flex; /* BEZ !important - JS chowa ten panel (style.display='none') po wgraniu pliku */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fdfefe !important;
    border: 2px dashed #bdc3c7 !important;
    border-radius: 8px !important;
    color: #7f8c8d !important;
    text-align: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.o3dp-calc .placeholder-panel:hover, .o3dp-calc .placeholder-panel.dragover {
    border-color: var(--accent-primary) !important;
    background-color: #f0f7ff !important;
    color: var(--accent-primary) !important;
}
.o3dp-calc .placeholder-panel:hover svg, .o3dp-calc .placeholder-panel.dragover svg {
    fill: var(--accent-primary) !important;
    transform: scale(1.05) !important;
}
.o3dp-calc .placeholder-panel svg {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 15px !important;
    fill: #bdc3c7 !important;
    transition: all 0.3s ease !important;
}
.o3dp-calc .placeholder-panel h3 {
    margin: 0 0 8px 0 !important;
    font-size: 1.4em !important;
    font-family: 'Dosis', sans-serif !important;
}
.o3dp-calc .placeholder-panel p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 80% !important;
}

.o3dp-calc .preview-panel {
    padding: 12px !important;
    background: #fdfefe !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    display: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
}

.o3dp-calc .preview-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding: 0 5px !important;
}
.o3dp-calc .preview-header h3 {
    margin: 0 !important;
    font-size: 1.1em !important;
    color: var(--accent-primary) !important;
    font-weight: 800 !important;
    font-family: 'Dosis', sans-serif !important;
}
.o3dp-calc .btn-change-file {
    background: none !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    font-family: 'Dosis', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    transition: 0.2s !important;
    text-transform: uppercase !important;
}
.o3dp-calc .btn-change-file:hover {
    background: var(--accent-primary) !important;
    color: white !important;
}

.o3dp-calc #viewerContainer {
    width: 100% !important;
    height: 300px !important;
    background: #1e272e !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    cursor: grab !important;
}
.o3dp-calc #viewerContainer:active { cursor: grabbing !important; }

.o3dp-calc .preview-details {
    font-size: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    background: #f4f7f9 !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
}
.o3dp-calc .preview-details span { font-weight: 800 !important; color: var(--accent-primary) !important; font-size: 15px !important; }

.o3dp-calc .support-badge {
    margin-top: 10px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: none;
}
.o3dp-calc .support-badge.warn {
    background: #fdecea !important;
    color: #c0392b !important;
    border: 1px solid #f5b7b1 !important;
}
.o3dp-calc .support-badge.ok {
    background: #eafaf1 !important;
    color: #1e8449 !important;
    border: 1px solid #a9dfbf !important;
}

.o3dp-calc .action-info-box {
    background-color: #eaf4fe !important;
    color: #1a4a7d !important;
    padding: 15px 18px !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--accent-primary) !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
}
.o3dp-calc .action-info-box p { margin: 0 0 5px 0 !important; }
.o3dp-calc .action-info-box p:last-child { margin: 0 !important; }

.o3dp-calc .btn-cta-bottom {
    display: inline-block !important;
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-family: 'Dosis', sans-serif !important;
    transition: 0.3s !important;
    box-shadow: 0 4px 6px rgba(30, 90, 153, 0.2) !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.o3dp-calc .btn-cta-bottom:hover {
    background: #154576 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(30, 90, 153, 0.3) !important;
}