/* Frontend styles for Custom Order Widget */
/* These styles are loaded on all pages where the widget appears */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

/* Global widget styles */
.custom-order-widget {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

/* Additional responsive fixes */
@media (max-width: 768px) {
    .custom-order-widget {
        margin: 10px;
    }
    
    .custom-order-widget .widget-container {
        border-radius: 8px;
    }
}

/* Loading states */
.custom-order-widget .loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Success animations */
.custom-order-widget .success-animation {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Error states */
.custom-order-widget .error-field {
    border-color: #ea4335 !important;
    box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.2) !important;
}

.custom-order-widget .success-field {
    border-color: #1dd1a1 !important;
    box-shadow: 0 0 0 2px rgba(29, 209, 161, 0.2) !important;
}

/* Print styles */
@media print {
    .custom-order-widget .success-modal {
        display: none !important;
    }
}