/* ==========================================================================
   Formulaire de commande - Design Moderne et Professionnel
   Compatible avec les préréglages
   ========================================================================== */

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

   /* Reset et base */
   #custom-woocommerce-form {
       direction: rtl;
       font-family: 'Cairo', sans-serif;
       max-width: 700px;
       margin: 0 auto;
       padding: 40px;
       box-sizing: border-box;
       /* background-color sera défini par les paramètres */
       border-radius: 24px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 
                   0 0 1px rgba(0, 0, 0, 0.1);
       position: relative;
       overflow: hidden;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   #custom-woocommerce-form::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 300px;
       height: 300px;
       background: currentColor;
       opacity: 0.03;
       border-radius: 50%;
       transform: translate(30%, -30%);
       pointer-events: none;
   }
   
   #custom-woocommerce-form * {
       box-sizing: border-box;
   }
   
   /* Header avec icône */
   .form-header {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-bottom: 35px;
       text-align: center;
       position: relative;
       z-index: 1;
   }
   
   .form-header::before {
       content: '🛒';
       font-size: 48px;
       margin-bottom: 15px;
       display: block;
       animation: bounce 2s infinite;
   }
   
   @keyframes bounce {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-10px); }
   }
   
   .form-header h2 {
       margin: 0;
       letter-spacing: -0.5px;
       /* color, size et weight définis par les paramètres */
   }
   
   /* Rangées flexibles */
   .cwcf-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-bottom: 16px;
   }
   
   .cwcf-row.three-cols {
       grid-template-columns: 2fr 1fr;
   }
   
   .cwcf-row .form-group {
       margin-bottom: 0;
   }
   
   /* Groupe de formulaire avec animation */
   .form-group {
       margin-bottom: 16px;
       position: relative;
   }
   
   #custom-woocommerce-form label {
       display: block;
       margin-bottom: 8px;
       position: relative;
       padding-right: 8px;
       /* color, size et weight définis par les paramètres */
   }
   
   #custom-woocommerce-form label::before {
       content: '';
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 3px;
       height: 14px;
       background: currentColor;
       border-radius: 2px;
       opacity: 0.6;
   }
   
   /* Inputs et selects avec effet glassmorphism */
   .cwcf-select,
   .cwcf-input {
       width: 100%;
       padding: 14px 18px;
       border-radius: 12px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       backdrop-filter: blur(10px);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
       /* border, color, size définis par les paramètres */
   }
   
   .cwcf-select {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       background-repeat: no-repeat;
       background-position: left 18px center;
       background-size: 14px;
       padding-left: 45px;
       cursor: pointer;
   }
   
   .cwcf-input::placeholder {
       /* color défini par les paramètres */
       font-weight: 400;
   }
   
   .cwcf-input:focus,
   .cwcf-select:focus {
       outline: none;
       /* border-color défini par les paramètres */
       transform: translateY(-2px);
   }
   
   /* Variations - Design cards moderne */
   .variation-group {
       margin-bottom: 24px;
   }
   
   .radio-group {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
       gap: 12px;
       margin: 12px 0;
   }
   
   .radio-option {
       position: relative;
   }
   
   .radio-option input[type="radio"] {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
   }
   
   .radio-label {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       padding: 14px 18px;
       background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
       border: 2px solid #e1e8ed;
       border-radius: 12px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 600;
       text-align: center;
       min-width: 120px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       gap: 10px;
       position: relative;
       overflow: hidden;
   }
   
   .radio-label::before {
       content: '';
       position: absolute;
       inset: 0;
       background: currentColor;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .radio-label > * {
       position: relative;
       z-index: 1;
   }
   
   .radio-option input[type="radio"]:checked + .radio-label {
       /* border-color défini par button_bg_color */
       color: #fff;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
       transform: translateY(-3px);
   }
   
   .radio-option input[type="radio"]:checked + .radio-label::before {
       opacity: 1;
   }
   
   .radio-option:hover .radio-label {
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }
   
   /* Quantité moderne */
   .quantity-group {
       margin-bottom: 0;
   }
   
   .quantity-buttons {
       display: flex;
       align-items: center;
       background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
       border-radius: 12px;
       border: 2px solid #e1e8ed;
       padding: 4px;
       gap: 4px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       height: 62px;
   }
   
   .quantity-btn {
       width: 42px;
       height: 42px;
       display: flex;
       align-items: center;
       justify-content: center;
       /* background défini par button_bg_color */
       border: none;
       font-size: 20px;
       cursor: pointer;
       user-select: none;
       border-radius: 8px;
       color: white;
       font-weight: 700;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   
   .quantity-btn:hover {
       transform: scale(1.05);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
       /* background défini par button_bg_color_hover */
   }
   
   .quantity-btn:active {
       transform: scale(0.95);
   }
   
   .quantity-input {
       flex: 1;
       text-align: center;
       border: none !important;
       background: transparent !important;
       font-size: 18px !important;
       font-weight: 700 !important;
       padding: 0 !important;
       margin: 0 !important;
   }
   
   /* Méthodes de livraison - 2 par ligne */
   .shipping-radio-group {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 12px;
       margin: 12px 0 24px;
   }
   
   .shipping-radio-option {
       position: relative;
   }
   
   .shipping-radio-option input[type="radio"] {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
   }
   
   .shipping-radio-label {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       padding: 16px;
       background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
       border: 2px solid #e1e8ed;
       border-radius: 12px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 500;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       position: relative;
       overflow: hidden;
       min-height: 80px;
   }
   
   .shipping-radio-label::before {
       content: '';
       position: absolute;
       inset: 0;
       background: currentColor;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .shipping-radio-label > * {
       position: relative;
       z-index: 1;
   }
   
   .shipping-method-title {
       font-weight: 700;
       font-size: 15px;
       margin-bottom: 6px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .shipping-method-title::before {
       content: '🚚';
       font-size: 20px;
   }
   
   .shipping-method-cost {
       font-size: 18px;
       font-weight: 700;
       /* color défini par total_price_color */
   }
   
   .shipping-radio-option input[type="radio"]:checked + .shipping-radio-label {
       /* border-color défini par button_bg_color */
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
       transform: translateY(-3px);
   }
   
   .shipping-radio-option input[type="radio"]:checked + .shipping-radio-label::before {
       opacity: 1;
   }
   
   .shipping-radio-option input[type="radio"]:checked + .shipping-radio-label .shipping-method-title,
   .shipping-radio-option input[type="radio"]:checked + .shipping-radio-label .shipping-method-cost {
       color: #fff;
   }
   
   .shipping-radio-option:hover .shipping-radio-label {
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }
   
   /* Résumé des prix - Glassmorphism */
   .price-summary {
       backdrop-filter: blur(20px);
       border: 2px solid rgba(255, 255, 255, 0.5);
       border-radius: 16px;
       padding: 24px;
       margin: 30px 0 24px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
       position: relative;
       /* background défini par background_color_price */
   }
   
   .price-summary::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 16px;
       padding: 2px;
       background: currentColor;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: 0.3;
   }
   
   .price-row {
       display: flex;
       justify-content: space-between;
       padding: 10px 0;
       align-items: center;
       /* size et weight définis par les paramètres */
   }
   
   .price-label {
       color: #5a6c7d;
   }
   
   .price-value {
       color: #2c3e50;
   }
   
   .price-divider {
       height: 2px;
       background: linear-gradient(90deg, transparent, #e1e8ed, transparent);
       margin: 12px 0;
   }
   
   .total-price {
       padding: 16px 0 0;
       position: relative;
   }
   
   .total-price::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       height: 2px;
       background: currentColor;
       opacity: 0.5;
   }
   
   .total-price .price-label,
   .total-price .price-value {
       /* size, weight et color définis par les paramètres */
   }
   
   /* Bouton de soumission - Ultra moderne */
   .cwcf-button {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       padding: 16px 24px;
       border: none;
       cursor: pointer;
       /* background, color, size, weight, radius définis par les paramètres */
       gap: 12px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
       position: relative;
       overflow: hidden;
   }
   
   .cwcf-button::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .cwcf-button:hover {
       transform: translateY(-3px);
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
       /* background défini par button_bg_color_hover */
   }
   
   .cwcf-button:hover::before {
       opacity: 1;
   }
   
   .cwcf-button:active {
       transform: translateY(-1px);
       /* background défini par button_bg_color_click */
   }
   
   .cwcf-button:disabled,
   .cwcf-button.loading {
       opacity: 0.6;
       cursor: not-allowed;
       transform: none !important;
   }
   
   .cwcf-button.unavailable {
       background: #95a5a6 !important;
       cursor: not-allowed !important;
       opacity: 0.7 !important;
       box-shadow: none !important;
   }
   
   .btn-icon {
       font-size: 18px;
       transition: transform 0.3s ease;
   }
   
   .cwcf-button:hover .btn-icon {
       transform: translateX(-5px);
   }
   
   /* Animations */
   @keyframes price-flash {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.6; }
   }
   
   .price-updated {
       animation: price-flash 0.6s ease;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   .cwcf-loading::after {
       content: '';
       display: inline-block;
       width: 18px;
       height: 18px;
       margin-right: 10px;
       border: 3px solid rgba(255, 255, 255, 0.3);
       border-top-color: white;
       border-radius: 50%;
       animation: spin 0.6s linear infinite;
   }
   
   /* Responsive */
   @media (max-width: 768px) {
       #custom-woocommerce-form {
           padding: 24px 16px;
           border-radius: 16px;
       }
   
       .form-header::before {
           font-size: 36px;
           margin-bottom: 10px;
       }
   
       .cwcf-row,
       .cwcf-row.three-cols {
           grid-template-columns: 1fr;
           gap: 12px;
       }
   
       .cwcf-row .form-group {
           margin-bottom: 12px;
       }
   
       .shipping-radio-group {
           grid-template-columns: 1fr;
       }
   
       .radio-group {
           grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
           gap: 8px;
       }
   
       .radio-label {
           padding: 12px 14px;
           min-width: 100px;
           font-size: 13px;
       }
   
       .price-summary {
           padding: 20px 16px;
           margin: 24px 0 20px;
       }
   
       .cwcf-button {
           padding: 14px 20px;
       }
   
       .quantity-buttons {
           height: 50px;
       }
   
       .quantity-btn {
           width: 38px;
           height: 38px;
           font-size: 18px;
       }
   }
   
   /* Masquer les éléments WooCommerce natifs */
   .product .cart {
       display: none;
   }