/*
|--------------------------------------------------------------------------
| WSQ CALCULATOR FRONTEND
|--------------------------------------------------------------------------
| Neutralny styl frontendu.
| Ma pasować do większości motywów WordPress.
|--------------------------------------------------------------------------
*/

.wsq-calculator {
    --wsq-radius: 8px;
    --wsq-spacing: 16px;
    --wsq-border-color: color-mix(in srgb, currentColor 18%, transparent);
    --wsq-muted-color: color-mix(in srgb, currentColor 65%, transparent);
    --wsq-soft-bg: color-mix(in srgb, currentColor 4%, transparent);

    max-width: 100%;
    color: inherit;
    font-family: inherit;
}

.wsq-calculator *,
.wsq-calculator *::before,
.wsq-calculator *::after {
    box-sizing: border-box;
}

.wsq-calculator-title {
    margin-top: 0;
    color: inherit;
    font-family: inherit;
}

.wsq-form {
    margin: 0;
}

.wsq-services-list {
    display: block;
}

.wsq-service-box {
    border: 1px solid var(--wsq-border-color);
    padding: var(--wsq-spacing);
    margin-bottom: 12px;
    border-radius: var(--wsq-radius);
    background: transparent;
}

.wsq-service-label,
.wsq-option-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
}

.wsq-service-label input,
.wsq-option-label input {
    margin-top: 0.25em;
    flex: 0 0 auto;
}

.wsq-service-label-text,
.wsq-option-label-text {
    display: inline-block;
    line-height: 1.45;
}

.wsq-service-price,
.wsq-option-price {
    font-weight: 400;
    color: var(--wsq-muted-color);
}

.wsq-service-options,
.wsq-simple-service-input {
    margin-left: 26px;
    padding-top: 12px;
}

.wsq-hidden {
    display: none;
}

.wsq-option-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wsq-option-row:last-child {
    margin-bottom: 0;
}

.wsq-calculator input[type="number"],
.wsq-calculator input[type="text"],
.wsq-calculator input[type="email"],
.wsq-calculator select {
    max-width: 100%;
    font-family: inherit;
}

.wsq-service-qty,
.wsq-option-qty {
    width: 140px;
}

.wsq-fixed-price-note {
    margin: 0;
    color: var(--wsq-muted-color);
}

.wsq-submit-button {
    margin-top: 8px;
}

.wsq-result {
    margin-top: 20px;
}

.wsq-summary {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--wsq-border-color);
    border-radius: var(--wsq-radius);
    background: transparent;
}

.wsq-summary h2,
.wsq-summary h3 {
    color: inherit;
    font-family: inherit;
}

.wsq-summary table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
}

.wsq-summary th,
.wsq-summary td {
    padding: 10px;
    border-bottom: 1px solid var(--wsq-border-color);
}

.wsq-summary th {
    font-weight: 700;
}

.wsq-summary tbody tr:last-child td {
    border-bottom: 0;
}

.wsq-empty-message,
.wsq-error-message {
    margin: 0;
}

.wsq-editor-preview {
    padding: 12px;
    border: 1px dashed var(--wsq-border-color);
    background: var(--wsq-soft-bg);
    border-radius: var(--wsq-radius);
}

/*
|--------------------------------------------------------------------------
| LEAD GATE PRO
|--------------------------------------------------------------------------
*/

.wsq-pro-lead-form-wrap {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--wsq-border-color);
    border-radius: var(--wsq-radius);
    background: transparent;
}

.wsq-pro-lead-form-wrap h3 {
    margin-top: 0;
    color: inherit;
    font-family: inherit;
}

.wsq-pro-lead-description {
    margin-bottom: 8px;
}

.wsq-pro-lead-note {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--wsq-muted-color);
}

.wsq-pro-lead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.wsq-pro-lead-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.wsq-pro-lead-field input {
    width: 100%;
}

.wsq-pro-lead-message {
    margin-top: 12px;
}

.wsq-message {
    padding: 10px 12px;
    border-radius: var(--wsq-radius);
}

.wsq-message-success {
    border: 1px solid #22c55e;
    background: #dcfce7;
    color: #166534;
}

.wsq-message-error {
    border: 1px solid #ef4444;
    background: #fee2e2;
    color: #991b1b;
}

.wsq-message-info {
    border: 1px solid var(--wsq-border-color);
    background: var(--wsq-soft-bg);
    color: inherit;
}

.wsq-field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}


.wsq-text-right {
    text-align: right;
}

.wsq-summary-total {
    text-align: right;
    margin-bottom: 0;
}

.wsq-total-only {
    margin: 0;
}

.wsq-error-list {
    margin: 8px 0 0;
    padding-left: 20px;
}


/*
|--------------------------------------------------------------------------
| FRONTEND STYLE MODES
|--------------------------------------------------------------------------
*/

/* Dziedzicz z motywu */
.wsq-style-inherit {
    --wsq-radius: 6px;
    --wsq-spacing: 14px;
    --wsq-border-color: color-mix(in srgb, currentColor 14%, transparent);
    --wsq-soft-bg: transparent;
}

.wsq-style-inherit .wsq-service-box,
.wsq-style-inherit .wsq-summary,
.wsq-style-inherit .wsq-pro-lead-form-wrap {
    background: transparent;
}

/* Neutralny */
.wsq-style-neutral {
    --wsq-radius: 10px;
    --wsq-spacing: 18px;
    --wsq-border-color: color-mix(in srgb, currentColor 18%, transparent);
    --wsq-soft-bg: color-mix(in srgb, currentColor 3%, transparent);
}

.wsq-style-neutral .wsq-service-box,
.wsq-style-neutral .wsq-summary,
.wsq-style-neutral .wsq-pro-lead-form-wrap {
    background: var(--wsq-soft-bg);
}

/* Kompaktowy */
.wsq-style-compact {
    --wsq-radius: 6px;
    --wsq-spacing: 10px;
    --wsq-border-color: color-mix(in srgb, currentColor 16%, transparent);
}

.wsq-style-compact .wsq-calculator-title {
    margin-bottom: 12px;
}

.wsq-style-compact .wsq-service-box {
    margin-bottom: 8px;
}

.wsq-style-compact .wsq-service-options,
.wsq-style-compact .wsq-simple-service-input {
    padding-top: 8px;
}

.wsq-style-compact .wsq-option-row {
    margin-bottom: 6px;
}

.wsq-style-compact .wsq-summary,
.wsq-style-compact .wsq-pro-lead-form-wrap {
    padding: 12px;
}




/*
|--------------------------------------------------------------------------
| WSQ STYLE MODES - STRONG OVERRIDES
|--------------------------------------------------------------------------
*/

/* DZIEDZICZ Z MOTYWU */
.wsq-calculator.wsq-style-inherit {
    --wsq-radius: 6px;
    --wsq-spacing: 14px;
}

.wsq-calculator.wsq-style-inherit .wsq-service-box,
.wsq-calculator.wsq-style-inherit .wsq-summary,
.wsq-calculator.wsq-style-inherit .wsq-pro-lead-form-wrap {
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* NEUTRALNY */
.wsq-calculator.wsq-style-neutral {
    --wsq-radius: 14px;
    --wsq-spacing: 22px;
}

.wsq-calculator.wsq-style-neutral .wsq-service-box,
.wsq-calculator.wsq-style-neutral .wsq-summary,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-form-wrap {
    padding: 22px !important;
    margin-bottom: 18px !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important;
    background: color-mix(in srgb, currentColor 4%, transparent) !important;
}

/* KOMPAKTOWY */
.wsq-calculator.wsq-style-compact {
    --wsq-radius: 4px;
    --wsq-spacing: 8px;
}

.wsq-calculator.wsq-style-compact .wsq-calculator-title {
    margin-bottom: 10px !important;
    font-size: 1.15em;
}

.wsq-calculator.wsq-style-compact .wsq-service-box {
    padding: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 4px !important;
}

.wsq-calculator.wsq-style-compact .wsq-service-label,
.wsq-calculator.wsq-style-compact .wsq-option-label {
    gap: 6px !important;
    font-size: 0.95em;
}

.wsq-calculator.wsq-style-compact .wsq-service-options,
.wsq-calculator.wsq-style-compact .wsq-simple-service-input {
    margin-left: 20px !important;
    padding-top: 6px !important;
}

.wsq-calculator.wsq-style-compact .wsq-option-row {
    gap: 6px !important;
    margin-bottom: 5px !important;
}

.wsq-calculator.wsq-style-compact .wsq-service-qty,
.wsq-calculator.wsq-style-compact .wsq-option-qty {
    width: 110px !important;
    padding: 4px 6px !important;
}

.wsq-calculator.wsq-style-compact .wsq-summary,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-form-wrap {
    padding: 10px !important;
    margin-top: 12px !important;
    border-radius: 4px !important;
}

.wsq-calculator.wsq-style-compact .wsq-pro-lead-grid {
    gap: 8px !important;
}

.wsq-calculator.wsq-style-compact .wsq-pro-lead-field label {
    margin-bottom: 3px !important;
    font-size: 0.92em;
}

.wsq-calculator.wsq-style-compact .wsq-submit-button,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-submit {
    margin-top: 4px !important;
}






/*
|--------------------------------------------------------------------------
| WSQ BUTTONS + STRONGER STYLE MODES
|--------------------------------------------------------------------------
*/

/* Domyślnie przyciski dziedziczą styl motywu */
.wsq-calculator .wsq-submit-button,
.wsq-calculator .wsq-pro-lead-submit {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s ease;
}

/*
|--------------------------------------------------------------------------
| DZIEDZICZ Z MOTYWU
|--------------------------------------------------------------------------
*/

.wsq-calculator.wsq-style-inherit .wsq-submit-button,
.wsq-calculator.wsq-style-inherit .wsq-pro-lead-submit {
    /* bez mocnego stylowania — zostawiamy motywowi */
}

/*
|--------------------------------------------------------------------------
| NEUTRALNY — bardziej nowoczesna karta
|--------------------------------------------------------------------------
*/

.wsq-calculator.wsq-style-neutral {
    --wsq-radius: 14px;
    --wsq-spacing: 22px;
}

.wsq-calculator.wsq-style-neutral .wsq-service-box,
.wsq-calculator.wsq-style-neutral .wsq-summary,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-form-wrap {
    padding: 22px !important;
    margin-bottom: 18px !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
    background: color-mix(in srgb, currentColor 3%, transparent) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.wsq-calculator.wsq-style-neutral .wsq-submit-button,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-submit {
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    min-height: 42px;
    border: 1px solid currentColor !important;
    background: currentColor !important;
    color: #fff !important;
}

.wsq-calculator.wsq-style-neutral .wsq-submit-button:hover,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-submit:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.wsq-calculator.wsq-style-neutral .wsq-service-label,
.wsq-calculator.wsq-style-neutral .wsq-option-label {
    font-size: 1.02em;
}

.wsq-calculator.wsq-style-neutral input[type="number"],
.wsq-calculator.wsq-style-neutral input[type="text"],
.wsq-calculator.wsq-style-neutral input[type="email"] {
    border-radius: 10px;
    padding: 9px 11px;
}

/*
|--------------------------------------------------------------------------
| KOMPAKTOWY — mały formularz
|--------------------------------------------------------------------------
*/

.wsq-calculator.wsq-style-compact {
    --wsq-radius: 4px;
    --wsq-spacing: 8px;
    font-size: 0.94em;
}

.wsq-calculator.wsq-style-compact .wsq-calculator-title {
    margin-bottom: 10px !important;
    font-size: 1.1em !important;
}

.wsq-calculator.wsq-style-compact .wsq-service-box {
    padding: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 4px !important;
}

.wsq-calculator.wsq-style-compact .wsq-service-label,
.wsq-calculator.wsq-style-compact .wsq-option-label {
    gap: 6px !important;
    font-size: 0.94em;
}

.wsq-calculator.wsq-style-compact .wsq-service-options,
.wsq-calculator.wsq-style-compact .wsq-simple-service-input {
    margin-left: 18px !important;
    padding-top: 6px !important;
}

.wsq-calculator.wsq-style-compact .wsq-option-row {
    gap: 6px !important;
    margin-bottom: 5px !important;
}

.wsq-calculator.wsq-style-compact input[type="number"],
.wsq-calculator.wsq-style-compact input[type="text"],
.wsq-calculator.wsq-style-compact input[type="email"] {
    padding: 5px 7px !important;
    min-height: 32px !important;
    font-size: 0.92em !important;
}

.wsq-calculator.wsq-style-compact .wsq-service-qty,
.wsq-calculator.wsq-style-compact .wsq-option-qty {
    width: 105px !important;
}

.wsq-calculator.wsq-style-compact .wsq-submit-button,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-submit {
    padding: 6px 12px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
}

.wsq-calculator.wsq-style-compact .wsq-summary,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-form-wrap {
    padding: 10px !important;
    margin-top: 12px !important;
    border-radius: 4px !important;
}

.wsq-calculator.wsq-style-compact .wsq-summary th,
.wsq-calculator.wsq-style-compact .wsq-summary td {
    padding: 6px !important;
}

.wsq-calculator.wsq-style-compact .wsq-pro-lead-grid {
    gap: 8px !important;
}

.wsq-calculator.wsq-style-compact .wsq-pro-lead-field label {
    margin-bottom: 3px !important;
    font-size: 0.9em;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE BUTTON FIX
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    .wsq-calculator.wsq-style-neutral .wsq-submit-button,
    .wsq-calculator.wsq-style-neutral .wsq-pro-lead-submit,
    .wsq-calculator.wsq-style-compact .wsq-submit-button,
    .wsq-calculator.wsq-style-compact .wsq-pro-lead-submit {
        width: 100%;
        text-align: center;
    }
}



/*
|--------------------------------------------------------------------------
| WSQ BUTTON FIX — SAFE BUTTON COLORS
|--------------------------------------------------------------------------
*/

.wsq-calculator.wsq-style-neutral .wsq-submit-button,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-submit {
    background: color-mix(in srgb, currentColor 8%, transparent) !important;
    color: inherit !important;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    min-height: 42px;
    box-shadow: none !important;
    text-decoration: none !important;
}

.wsq-calculator.wsq-style-neutral .wsq-submit-button:hover,
.wsq-calculator.wsq-style-neutral .wsq-pro-lead-submit:hover {
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    color: inherit !important;
    border-color: color-mix(in srgb, currentColor 45%, transparent) !important;
    opacity: 1 !important;
    transform: translateY(-1px);
}

.wsq-calculator.wsq-style-compact .wsq-submit-button,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-submit {
    background: color-mix(in srgb, currentColor 8%, transparent) !important;
    color: inherit !important;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.wsq-calculator.wsq-style-compact .wsq-submit-button:hover,
.wsq-calculator.wsq-style-compact .wsq-pro-lead-submit:hover {
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    color: inherit !important;
    border-color: color-mix(in srgb, currentColor 45%, transparent) !important;
}



/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    .wsq-service-options,
    .wsq-simple-service-input {
        margin-left: 0;
    }

    .wsq-option-row {
        align-items: stretch;
    }

    .wsq-service-qty,
    .wsq-option-qty {
        width: 100%;
    }

    .wsq-summary {
        overflow-x: auto;
    }

    .wsq-summary table {
        min-width: 520px;
    }
}