/* Invoice Type Selector */
.invoice-type-selector {
    display: flex;
    gap: 20px;
    margin: 0 0 30px 0;
    width: 100%;
    clear: both;
    position: relative;
    z-index: 1;
}

.invoice-type-button {
    flex: 1;
    max-width: 200px;
    padding: 15px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 50px;
    width: auto;
    text-decoration: none;
    outline: none;
    position: relative;
    margin: 0;
    z-index: 2;
}

/* Button Template Styles */
/* Modern Template */
.byteplugs-template-modern .invoice-type-button {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.byteplugs-template-modern .invoice-type-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Rounded Template */
.byteplugs-template-rounded .invoice-type-button {
    border-radius: 50px;
    transition: all 0.2s ease;
}

.byteplugs-template-rounded .invoice-type-button:hover {
    transform: scale(1.02);
}

/* Minimal Template */
.byteplugs-template-minimal .invoice-type-button {
    border-radius: 4px;
    border-width: 1px;
    transition: all 0.2s ease;
}

/* Classic Template */
.byteplugs-template-classic .invoice-type-button {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

/* Common Button Elements */
.invoice-type-button i {
    font-size: 20px;
    margin-right: 8px;
    pointer-events: none;
}

.invoice-type-button span {
    pointer-events: none;
}

/* Invoice Fields */
.woocommerce-billing-fields p.invoice-field {
    display: none;
    margin: 0 0 20px;
    padding: 0;
    clear: both;
    width: 100%;
    position: relative;
    z-index: 1;
}

.woocommerce-billing-fields.show-invoice-fields p.invoice-field {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Description under fields */
.woocommerce-billing-fields .description {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

/* VAT Input States */
.form-row-wide.invoice-field {
    position: relative;
}

#billing_afm.loading ~ .loader-spinner {
    display: block;
}

/* Loading Spinner */
.loader-spinner {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    animation: spin 1s linear infinite;
}

#billing_afm.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath opacity='.2' fill='%23000' d='M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z'/%3E%3Cpath fill='%23000' d='M26.013 10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0c2.119 0 4.071.576 5.812 1.566z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

#billing_afm.valid {
    border-color: #4CAF50 !important;
    background-color: #f8fff8 !important;
}

#billing_afm.error {
    border-color: #f44336 !important;
    background-color: #fff8f8 !important;
}

/* Read-only Fields */
input[readonly] {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

/* Payment Methods Section */
#payment {
    position: relative;
    z-index: 5;
}

#payment .payment_methods {
    position: relative;
    z-index: 6;
}

#payment .payment_box {
    position: relative;
    z-index: 7;
}

/* Ensure proper stacking of form elements */
.woocommerce-checkout-payment {
    position: relative;
    z-index: 8;
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Responsive Design */
@media screen and (max-width: 768px) {
    .invoice-type-selector {
        flex-direction: column;
    }
    
    .invoice-type-button {
        max-width: 100%;
        margin-bottom: 10px;
    }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* VAT Status Field Styling */
.vat-status-field input {
    font-weight: 600 !important;
    border-left-width: 4px !important;
}

.vat-status-field input.normal-vat {
    border-left-color: #4CAF50 !important;
    color: #2e7d32 !important;
    background-color: #f1f8e9 !important;
}

.vat-status-field input.non-normal-vat {
    border-left-color: #f44336 !important;
    color: #c62828 !important;
    background-color: #fef2f2 !important;
}

/* Add icons */
.vat-status-field {
    position: relative;
}

.vat-status-field::after {
    font-family: 'dashicons';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

.vat-status-field.normal-vat::after {
    content: '\f147';
    color: #4CAF50;
}

.vat-status-field.non-normal-vat::after {
    content: '\f158';
    color: #f44336;
}

/* VAT Status Field Styling */
#billing_vat_status {
    background-color: #f8f9fa !important;
    font-weight: 600 !important;
    border-left-width: 4px !important;
}

#billing_vat_status.normal-vat {
    border-left-color: #4CAF50 !important;
    color: #2e7d32 !important;
    background-color: #f1f8e9 !important;
}

#billing_vat_status.non-normal-vat {
    border-left-color: #f44336 !important;
    color: #c62828 !important;
    background-color: #fef2f2 !important;
}

/* VAT Status Field Loading State */
#billing_vat_status.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E%3Cpath fill='%23666' d='M25.251 6.461c-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615V6.461z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px !important;
}