/* Kong Custom Checkout Fields - Modern Styling */

/* Main container for custom fields */
.kong-custom-field {
    margin-bottom: 20px;
    position: relative;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Field labels */
.kong-custom-field label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.kong-custom-field label:hover {
    color: #3498db;
}

/* Required asterisk styling */
.kong-custom-field .required {
    color: #e74c3c;
    font-weight: bold;
    margin-left: 2px;
}

/* Input field base styling */
.kong-custom-field input[type="text"],
.kong-custom-field input[type="email"],
.kong-custom-field input[type="tel"],
.kong-custom-field input[type="number"],
.kong-custom-field textarea,
.kong-custom-field select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

/* Focus states */
.kong-custom-field input:focus,
.kong-custom-field textarea:focus,
.kong-custom-field select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    background-color: #fdfdfe;
}

/* Hover states */
.kong-custom-field input:hover,
.kong-custom-field textarea:hover,
.kong-custom-field select:hover {
    border-color: #bdc3c7;
}

/* Textarea specific styling */
.kong-custom-field textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

/* Select dropdown styling */
.kong-custom-field select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* Field descriptions */
.kong-custom-field .description {
    display: block;
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 6px;
    line-height: 1.4;
    font-style: italic;
}

/* Error states */
.kong-custom-field.error input,
.kong-custom-field.error textarea,
.kong-custom-field.error select {
    border-color: #e74c3c;
    background-color: #fdf2f2;
}

.kong-custom-field.error label {
    color: #e74c3c;
}

/* Success states */
.kong-custom-field.success input,
.kong-custom-field.success textarea,
.kong-custom-field.success select {
    border-color: #27ae60;
    background-color: #f8fff8;
}

/* Disabled states */
.kong-custom-field input:disabled,
.kong-custom-field textarea:disabled,
.kong-custom-field select:disabled {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive design */
@media (max-width: 768px) {
    .kong-custom-field {
        margin-bottom: 16px;
    }
    
    .kong-custom-field input,
    .kong-custom-field textarea,
    .kong-custom-field select {
        padding: 10px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .kong-custom-field label {
        font-size: 13px;
    }
}

/* Integration with WooCommerce themes */
.woocommerce .kong-custom-field,
.woocommerce-page .kong-custom-field {
    clear: both;
}

/* Specific styling for different field types */
.kong-custom-field[data-field-type="email"] input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-right: 40px;
}

.kong-custom-field[data-field-type="tel"] input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-right: 40px;
}

/* Loading state */
.kong-custom-field.loading {
    position: relative;
    pointer-events: none;
}

.kong-custom-field.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    z-index: 1;
}

/* Custom field section header */
.kong-custom-fields-section {
    margin: 30px 0 20px;
    padding: 20px 0;
    border-top: 2px solid #ecf0f1;
    position: relative;
}

.kong-custom-fields-section::before {
    content: 'Additional Information';
    position: absolute;
    top: -12px;
    left: 0;
    background: #ffffff;
    padding: 0 15px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .kong-custom-field label {
        color: #ecf0f1;
    }
    
    .kong-custom-field input,
    .kong-custom-field textarea,
    .kong-custom-field select {
        background-color: #2c3e50;
        border-color: #34495e;
        color: #ecf0f1;
    }
    
    .kong-custom-field input:focus,
    .kong-custom-field textarea:focus,
    .kong-custom-field select:focus {
        background-color: #34495e;
        border-color: #3498db;
    }
    
    .kong-custom-field .description {
        color: #95a5a6;
    }
}

/* Print styles */
@media print {
    .kong-custom-field {
        break-inside: avoid;
        margin-bottom: 10px;
    }
    
    .kong-custom-field input,
    .kong-custom-field textarea,
    .kong-custom-field select {
        border: 1px solid #000;
        background: transparent;
    }
}