/**
 * VAT Invoice Tax Fee - Public CSS
 * Styles cho chức năng VAT Invoice
 */

/* Container cho checkbox VAT */
.vat-invoice-checkbox {
    margin  : 15px 0;
    position: relative;
}

.vat-invoice-checkbox label {
    display      : flex;
    align-items  : center;
    margin-bottom: 0;
    cursor       : pointer;
}

.vat-invoice-checkbox input[type="checkbox"] {
    margin-right: 10px;
}

/* Các trường thông tin công ty VAT */
.vat-company-field {
    display   : none;
    /* Ẩn mặc định */
    transition: all 0.3s ease;
}

.vat-company-field.show {
    display  : block;
    animation: slideDown 0.3s ease;
}

.vat-company-field input {
    width        : 100%;
    padding      : 10px 12px;
    border       : 1px solid #ced4da;
    border-radius: 4px;
    font-size    : 14px;
    transition   : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vat-company-field input:focus {
    border-color: #80bdff;
    outline     : 0;
    box-shadow  : 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Animation cho việc hiển thị trường */
@keyframes slideDown {
    from {
        opacity   : 0;
        max-height: 0;
        padding   : 0 10px;
    }

    to {
        opacity   : 1;
        max-height: 200px;
        padding   : 10px;
    }
}

/* Styling cho required fields */
.vat-company-field label.required::after {
    content    : " *";
    color      : #dc3545;
    font-weight: bold;
}

/* Container cho tất cả các trường VAT */
.vat-invoice-container {
    border       : 2px solid #e3f2fd;
    border-radius: 10px;
    padding      : 20px;
    margin       : 20px 0;
    background   : linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.vat-invoice-container h4 {
    color        : #1976d2;
    margin-bottom: 15px;
    font-size    : 16px;
    font-weight  : 600;
}

/* Responsive design */
@media (max-width: 768px) {
    .vat-invoice-container {
        padding: 15px;
        margin : 15px 0;
    }

    .vat-company-field {
        margin : 5px 0;
        padding: 8px;
    }

    .vat-company-field input {
        padding  : 8px 10px;
        font-size: 16px;
        /* Tránh zoom trên mobile */
    }
}

/* Error styling */
.woocommerce-error .vat-company-field,
.vat-company-field.error {
    border-color    : #dc3545;
    background-color: #f8d7da;
}

.vat-company-field.error input {
    border-color: #dc3545;
}

/* Success styling */
.vat-company-field.success {
    border-color    : #28a745;
    background-color: #d4edda;
}

.vat-company-field.success input {
    border-color: #28a745;
}

/* Loading state */
.vat-loading {
    opacity       : 0.6;
    pointer-events: none;
}

.vat-loading::after {
    content      : "";
    position     : absolute;
    top          : 50%;
    left         : 50%;
    width        : 20px;
    height       : 20px;
    margin       : -10px 0 0 -10px;
    border       : 2px solid #f3f3f3;
    border-top   : 2px solid #007cba;
    border-radius: 50%;
    animation    : spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Tooltip cho thông tin hướng dẫn */
.vat-tooltip {
    position: relative;
    display : inline-block;
    cursor  : help;
}

.vat-tooltip .tooltiptext {
    visibility      : hidden;
    width           : 200px;
    background-color: #555;
    color           : white;
    text-align      : center;
    border-radius   : 6px;
    padding         : 5px 8px;
    position        : absolute;
    z-index         : 1;
    bottom          : 125%;
    left            : 50%;
    margin-left     : -100px;
    opacity         : 0;
    transition      : opacity 0.3s;
    font-size       : 12px;
}

.vat-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity   : 1;
}

/* Styling cho VAT trong checkout totals */

/* Styling cho thông báo VAT trong review order */
.vat-invoice-info-row {
    background: transparent;
}

.vat-invoice-notice {
    padding: 0 !important;
}

.vat-invoice-notice>div {
    background   : linear-gradient(135deg, #e7f3ff 0%, #cce7ff 100%);
    border       : 1px solid #b3d9ff;
    border-radius: 6px;
    padding      : 12px 15px;
    margin       : 10px 0;
    box-shadow   : 0 2px 4px rgba(0, 115, 170, 0.1);
}

.vat-invoice-notice strong {
    display      : block;
    color        : #0073aa;
    font-size    : 14px;
    margin-bottom: 4px;
}

.vat-invoice-notice small {
    color      : #666;
    font-size  : 12px;
    line-height: 1.4;
}

/* Animation cho VAT fee row */
.vat-invoice-fee-row {
    animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
    from {
        opacity  : 0;
        transform: translateY(-10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* Responsive cho checkout VAT */
@media (max-width: 768px) {

    .vat-invoice-fee-row th,
    .vat-invoice-fee-row td {
        padding  : 10px 12px;
        font-size: 14px;
    }

    .vat-invoice-notice>div {
        padding: 10px 12px;
        margin : 8px 0;
    }

    .vat-invoice-notice strong {
        font-size: 13px;
    }

    .vat-invoice-notice small {
        font-size: 11px;
    }
}

/* Highlight effect khi VAT được bật */
.vat-invoice-fee-row.highlight {
    background-color: #fff3cd;
    border-color    : #ffeaa7;
    animation       : highlightPulse 0.6s ease-in-out;
}

@keyframes highlightPulse {
    0% {
        background-color: #fff3cd;
    }

    50% {
        background-color: #ffe8a1;
    }

    100% {
        background-color: #fff3cd;
    }
}

.woocommerce-checkout-review-order-table .vat-invoice-fee-row:hover {
    transition: background-color 0.3s ease;
}