/**
 * Kompensacijų Skaičiuoklė - Frontend Styles
 * Author: Tobalt — https://tobalt.lt
 * Version: 3.0.0
 */

/* Hide old Elementor form - to be removed via Elementor editor */
#form-field-studentas,
#form-field-studentobustokaina,
#form-field-studentovidutinebendrabuciokaina,
#form-field-people,
#form-field-income,
#form-field-assets,
#form-field-pusmeciopajamos,
#form-field-rent_price,
#calculateCompensation,
#supportAmount,
#result,
[id^="form-field-"] {
    display: none !important;
}

/* Hide entire old Elementor form container */
.elementor-form-fields-wrapper:has(#form-field-studentas),
.elementor-widget-form:has(#calculateCompensation),
form:has(#calculateCompensation) {
    display: none !important;
}

/* Reset and wrapper */
.tobalt-kompensacija-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f1f21;
}

.tobalt-kompensacija-wrapper * {
    box-sizing: border-box;
}

/* Title */
.tobalt-kompensacija-title {
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
    padding: 0;
    color: #1f1f21;
}

/* Two column layout */
.tobalt-kompensacija-form-wrapper {
    flex: 1 1 55%;
    min-width: 300px;
    background: #e8f5f2;
    border-radius: 0 20px 20px 20px;
    padding: 25px 30px;
}

.tobalt-kompensacija-results-wrapper {
    flex: 1 1 35%;
    min-width: 280px;
}

/* Form */
.tobalt-kompensacija-form {
    margin: 0;
}

.tobalt-field-group {
    margin-bottom: 20px;
}

.tobalt-field-group:last-child {
    margin-bottom: 0;
}

/* Labels */
.tobalt-field-group > label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1f1f21;
    font-size: 14px;
    line-height: 1.4;
}

.tobalt-field-group > label .tobalt-label-text {
    flex: 1;
}

/* Tooltip trigger */
.tobalt-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    background: #00AB8E;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    cursor: help;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.tobalt-tooltip-trigger:hover {
    background: #008f77;
}

.tobalt-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f1f21;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    width: 250px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tobalt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f1f21;
}

.tobalt-tooltip-trigger:hover .tobalt-tooltip,
.tobalt-tooltip-trigger:focus .tobalt-tooltip {
    display: block;
}

/* Input fields */
.tobalt-field-group input[type="number"],
.tobalt-field-group input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    color: #1f1f21;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tobalt-field-group input[type="number"]:focus,
.tobalt-field-group input[type="text"]:focus {
    outline: none;
    border-color: #00AB8E;
    box-shadow: 0 0 0 3px rgba(0, 171, 142, 0.15);
}

.tobalt-field-group input[type="number"]::placeholder {
    color: #999;
}

/* Format display helper */
.tobalt-format-display {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #00AB8E;
    font-weight: 500;
}

/* Checkbox */
.tobalt-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 500;
    padding: 15px;
    background: #fff;
    border: 2px solid #00AB8E;
    border-radius: 8px;
    margin-bottom: 0;
    transition: background 0.2s ease;
}

.tobalt-checkbox-label:hover {
    background: #f0faf8;
}

.tobalt-checkbox-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    margin-top: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #00AB8E;
}

.tobalt-checkbox-label .tobalt-checkbox-text {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

/* Field note */
.tobalt-field-note {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

/* Buttons container */
.tobalt-field-buttons {
    display: flex;
    gap: 12px;
}

/* Submit button */
.tobalt-submit-button {
    flex: 1;
    padding: 16px 30px !important;
    background: #00AB8E !important;
    background-color: #00AB8E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 20px 20px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.tobalt-submit-button:hover,
.tobalt-submit-button:focus {
    background: #006B5A !important;
    background-color: #006B5A !important;
    color: #ffffff !important;
}

.tobalt-submit-button:active {
    transform: scale(0.98);
    background: #005544 !important;
}

/* Reset button */
.tobalt-reset-button {
    padding: 16px 24px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #00AB8E !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tobalt-reset-button:hover,
.tobalt-reset-button:focus {
    border-color: #006B5A !important;
    color: #ffffff !important;
    background: #006B5A !important;
    background-color: #006B5A !important;
}

/* Loading spinner */
.tobalt-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tobalt-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes tobalt-spin {
    to { transform: rotate(360deg); }
}

/* Disabled button state */
.tobalt-submit-button:disabled {
    background: #8ed4c6 !important;
    background-color: #8ed4c6 !important;
    cursor: not-allowed;
}

/* Validation states */
.tobalt-field-group.tobalt-field-error input {
    border-color: #EC1313;
    background: #fef8f8;
}

.tobalt-field-group.tobalt-field-error input:focus {
    border-color: #EC1313;
    box-shadow: 0 0 0 3px rgba(236, 19, 19, 0.15);
}

.tobalt-error-message {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #EC1313;
    font-weight: 500;
}

.tobalt-field-group.tobalt-field-valid input {
    border-color: #00AB8E;
}

/* Required field indicator */
.tobalt-required::after {
    content: ' *';
    color: #EC1313;
}

/* Results section */
.tobalt-kompensacija-results {
    position: sticky;
    top: 20px;
}

.tobalt-result-box {
    padding: 25px;
    border: 2px solid #ccc;
    border-radius: 0 20px 20px 20px;
    margin-bottom: 15px;
    background: #fff;
}

#tobalt-amount {
    text-align: center;
    border-color: #00AB8E;
    background: #e8f5f2;
}

.tobalt-result-label {
    display: block;
    font-weight: 500;
    color: #1f1f21;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.tobalt-result-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #00AB8E;
    line-height: 1.2;
}

.tobalt-result-message {
    text-align: left;
}

.tobalt-result-text {
    font-size: 15px;
    line-height: 1.5;
}

.tobalt-result-success {
    border-color: #00AB8E;
    background: #e8f5f2;
}

.tobalt-result-success .tobalt-result-text {
    color: #00AB8E;
    font-weight: 500;
}

.tobalt-result-error {
    border-color: #EC1313;
    background: #fef2f2;
}

.tobalt-result-error .tobalt-result-text {
    color: #c00;
}

/* Print button */
.tobalt-print-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    margin-top: 15px;
    background: #fff;
    color: #00AB8E;
    border: 2px solid #00AB8E;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tobalt-print-button:hover {
    background: #00AB8E;
    color: #fff;
}

/* Print styles */
@media print {
    body * {
        visibility: hidden;
    }

    .tobalt-print-content,
    .tobalt-print-content * {
        visibility: visible;
    }

    .tobalt-print-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 40px;
        background: #fff;
    }

    .tobalt-print-header {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #00AB8E;
    }

    .tobalt-print-header h1 {
        font-size: 24px;
        color: #1f1f21;
        margin: 0 0 10px 0;
    }

    .tobalt-print-header p {
        color: #666;
        margin: 0;
    }

    .tobalt-print-result {
        text-align: center;
        padding: 30px;
        background: #e8f5f2;
        border-radius: 8px;
        margin-bottom: 30px;
    }

    .tobalt-print-result .amount {
        font-size: 48px;
        font-weight: 700;
        color: #00AB8E;
    }

    .tobalt-print-result .message {
        font-size: 16px;
        color: #1f1f21;
        margin-top: 15px;
    }

    .tobalt-print-data {
        margin-bottom: 30px;
    }

    .tobalt-print-data h2 {
        font-size: 16px;
        color: #1f1f21;
        margin-bottom: 15px;
    }

    .tobalt-print-data table {
        width: 100%;
        border-collapse: collapse;
    }

    .tobalt-print-data td {
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }

    .tobalt-print-data td:first-child {
        color: #666;
    }

    .tobalt-print-data td:last-child {
        text-align: right;
        font-weight: 500;
    }

    .tobalt-print-footer {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #ccc;
        font-size: 12px;
        color: #999;
        text-align: center;
    }

    .tobalt-print-button,
    .tobalt-reset-button,
    .tobalt-submit-button {
        display: none !important;
    }
}

/* Info box at bottom */
.tobalt-info-box {
    width: 100%;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #00AB8E;
    border-radius: 0 8px 8px 0;
    margin-top: 10px;
}

.tobalt-info-box p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.tobalt-info-box p:last-child {
    margin-bottom: 0;
}

.tobalt-info-box a {
    color: #00AB8E;
    text-decoration: underline;
}

.tobalt-info-box a:hover {
    color: #008f77;
}

/* Responsive */
@media (max-width: 768px) {
    .tobalt-kompensacija-wrapper {
        flex-direction: column;
    }

    .tobalt-kompensacija-form-wrapper,
    .tobalt-kompensacija-results-wrapper {
        flex: 1 1 100%;
    }

    .tobalt-kompensacija-results {
        position: static;
    }

    .tobalt-result-value {
        font-size: 28px;
    }

    .tobalt-tooltip {
        left: 0;
        transform: none;
        width: 200px;
    }

    .tobalt-tooltip::after {
        left: 9px;
        transform: none;
    }
}