/* Main Styles - Syarah Lookalike */
:root {
    --cz-blue: #3657D6;
    --cz-green: #00B35E;
    --cz-dark-green: #019f54;
    --cz-gray: #F3F4F6;
    --cz-border: #E5E7EB;
    --cz-text: #1F2937;
}

/* ============================================
   MOBILE FIX: Prevent keyboard flashing/zoom
   ============================================ */

/* CRITICAL: Prevent iOS zoom on input focus - font must be 16px+ */
.czfl-form input,
.czfl-form select,
.czfl-form textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}

/* GPU Acceleration for all form elements */
.czfl-form,
.czfl-form-wrapper,
.czfl-checkout-selector,
#czfl-forms-container,
#customer_details {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* When form is active, lock everything */
body.czfl-form-active .woocommerce-checkout-review-order-table,
body.czfl-form-active #order_review,
body.czfl-form-active .blockUI {
    pointer-events: none !important;
}

/* Hide WC loading overlays completely */
body.woocommerce-checkout .blockUI.blockOverlay {
    display: none !important;
    opacity: 0 !important;
}

@media (max-width: 991px) {
    /* MOBILE: Stable form containers */
    .czfl-form,
    .czfl-form-wrapper,
    #czfl-forms-container {
        position: relative !important;
        overflow: visible !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* MOBILE: Keep body stable but allow scroll */
    body.czfl-form-focused {
        /* Removed position:fixed - causes keyboard to close */
        overflow-y: auto !important;
    }
    
    /* MOBILE: Input stability */
    .czfl-form input,
    .czfl-form select,
    .czfl-form textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        appearance: none;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
    
    .czfl-form input:focus,
    .czfl-form select:focus,
    .czfl-form textarea:focus {
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* MOBILE: Step containers */
    .czfl-step,
    .czfl-inst-step {
        min-height: auto !important;
        padding-bottom: 20px;
    }
    
    /* MOBILE: Button row */
    .czfl-form .czfl-btn-row {
        position: relative !important;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    
    /* MOBILE: Hide WC blocking UI completely */
    body.woocommerce-checkout .blockUI,
    body.woocommerce-checkout .blockUI.blockOverlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* MOBILE: Stop WC notice from interfering */
    body.woocommerce-checkout .woocommerce-NoticeGroup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        background: #fff;
    }
    
    /* MOBILE: Checkout layout */
    body .woocommerce-checkout form.checkout {
        display: block !important;
    }
    
    body .woocommerce-checkout #czfl-left,
    body .woocommerce-checkout #czfl-right {
        width: 100% !important;
        float: none !important;
    }
}

/* Checkout Layout Override - EXTREME SPECIFICITY */
@media (min-width: 992px) {
    body .woocommerce-checkout form.checkout {
        display: grid !important;
        grid-template-columns: 50% 50% !important;
        gap: 30px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body .woocommerce-checkout #czfl-right { position: relative !important; z-index: 10 !important; }
    body .woocommerce-checkout #czfl-left { position: relative !important; z-index: 1 !important; }
    body .woocommerce-checkout #order_review_heading,
    body .woocommerce-checkout #order_review,
    body .woocommerce-checkout .ct-order-review,
    body .woocommerce-checkout .woocommerce-order-review { position: relative !important; z-index: 1 !important; }
    body .woocommerce-checkout #czfl-left,
    body .woocommerce-checkout #czfl-right {
        width: 100% !important;
        margin: 0 !important;
    }
    body .woocommerce-checkout #czfl-left { grid-column: 1 / 2 !important; }
    body .woocommerce-checkout #czfl-right { grid-column: 2 / 3 !important; grid-row: 1 / span 2 !important; }
    
    /* LEFT COLUMN: Order Summary */
    body .woocommerce-checkout #order_review_heading,
    body .woocommerce-checkout #order_review {
        grid-column: 1 / 2 !important;
        grid-row: auto !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }

    /* Theme wrappers for order review (e.g., Blocksy/others) */
    body .woocommerce-checkout .ct-order-review,
    body .woocommerce-checkout .woocommerce-order-review {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }
    
    /* RIGHT COLUMN: Selector (replaces customer details) */
    body .woocommerce-checkout #customer_details {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important; /* Force to top */
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
        display: block !important;
    }
    
    /* Ensure Summary starts at top row if heading is separate */
    body .woocommerce-checkout #order_review_heading {
        grid-row: 1 !important;
    }
    body .woocommerce-checkout #order_review {
        grid-row: 2 !important; /* Below heading */
    }
    body .woocommerce-checkout .ct-order-review,
    body .woocommerce-checkout .woocommerce-order-review {
        grid-row: 2 !important;
    }

    body .woocommerce-checkout .woocommerce-form-coupon-toggle,
    body .woocommerce-checkout .checkout_coupon {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Hide internal cols layout from theme */
    body .woocommerce-checkout .col2-set { 
        width: 100% !important; 
        float: none !important; 
        display: block !important; 
        margin: 0 !important; 
        flex: none !important;
    }
    body .woocommerce-checkout .col-1, 
    body .woocommerce-checkout .col-2 { 
        width: 100% !important; 
        float: none !important; 
        max-width: 100% !important; 
        padding: 0 !important; 
        flex: none !important;
    }
}

@supports not (display: grid) {
  body .woocommerce-checkout form.checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
  }
  body .woocommerce-checkout #czfl-left,
  body .woocommerce-checkout #czfl-right {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  body .woocommerce-checkout #order_review_heading,
  body .woocommerce-checkout #order_review {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  body .woocommerce-checkout .ct-order-review,
  body .woocommerce-checkout .woocommerce-order-review {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  body .woocommerce-checkout #customer_details {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

#payment { background: transparent !important; padding: 0 !important; }

/* Fix: Ensure Selector Visible even if injected via backup */
.czfl-backup-injector {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

/* Financing Selector */
.czfl-checkout-selector {
    font-family: inherit;
    direction: rtl;
}
.czfl-heading {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--cz-text);
    text-align: right;
}

/* Cards */
.czfl-card {
    background: #fff;
    border: 1px solid var(--cz-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.czfl-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #d1d5db;
}
.czfl-card.selected {
    border: 2px solid var(--cz-blue);
    background: #F8FAFF;
    box-shadow: 0 0 0 4px rgba(54, 87, 214, 0.1);
}

/* Radio Button */
.czfl-card-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
}
.czfl-card.selected .czfl-card-radio {
    border-color: var(--cz-blue);
}
.czfl-card.selected .czfl-card-radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    background: var(--cz-blue);
    border-radius: 50%;
}

/* Content */
.czfl-card-content {
    flex-grow: 1;
}
.czfl-card-header h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--cz-text);
}
.czfl-card-header p {
    margin: 0;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
}

/* Image in Card - Inline beside text */
.czfl-card-image-inline {
    flex-shrink: 0;
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
}
.czfl-card-image-inline img {
    max-width: 100%;
    max-height: 80px;
    height: auto;
    object-fit: contain;
}

/* Legacy - full width image (not used) */
.czfl-card-image {
    margin: 15px 0;
    background: #F9FAFB;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid #F3F4F6;
}
.czfl-card-image img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
}
.czfl-info-link {
    font-size: 14px;
    color: var(--cz-blue);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    margin-top: 8px;
}

/* Continue Button */
.czfl-btn-primary {
    width: 100%;
    background: var(--cz-green);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 18px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: block;
    text-decoration: none;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 179, 94, 0.2);
}
.czfl-btn-primary:hover {
    background: var(--cz-dark-green);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 179, 94, 0.3);
}
.czfl-btn-primary:active {
    transform: translateY(1px);
}

/* Forms */
.czfl-form-wrapper {
    margin-top: 20px;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.czfl-form {
    background: #fff;
    border: 1px solid var(--cz-border);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.czfl-form-header h3 {
    margin: 0 0 25px;
    font-size: 20px;
    color: var(--cz-text);
    border-bottom: 1px solid var(--cz-border);
    padding-bottom: 20px;
    font-weight: 800;
}
.czfl-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.czfl-col {
    flex: 1;
}
.czfl-col label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #374151;
}
.czfl-col input, .czfl-col select, .czfl-col textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
    background: #F9FAFB;
    color: #111827;
}
.czfl-col input:focus, .czfl-col select:focus, .czfl-col textarea:focus {
    border-color: var(--cz-blue);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(54, 87, 214, 0.1);
}
.czfl-col input[type="file"] {
    padding: 10px;
    background: #fff;
}

/* Buttons inside Form */
.czfl-btn-next {
    background: var(--cz-green);
    border: none;
    color: #fff;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0, 179, 94, 0.2);
}
.czfl-btn-next:hover {
    background: var(--cz-dark-green);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 179, 94, 0.3);
}

/* Back button - Red */
.czfl-btn-back {
    background: #D9534F;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.czfl-btn-back:hover {
    background: #C9302C;
}

/* Form actions container - align buttons right */
.czfl-row[style*="justify-content"] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.czfl-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.czfl-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success Page */
.czfl-success-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
    padding: 40px;
}
.czfl-success-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    max-width: 500px;
    width: 100%;
}
.czfl-success-icon {
    width: 80px; height: 80px;
    background: #DEF7EC;
    color: #03543F;
    border-radius: 50%;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.czfl-success-card h1 { margin: 0 0 10px; color: #111827; }
.czfl-success-card p { color: #6B7280; margin-bottom: 20px; }
.czfl-redirect-msg { font-size: 13px; color: #9CA3AF; margin-top: 30px; }

/* Mobile */
@media (max-width: 768px) {
    .czfl-row { flex-direction: column; gap: 15px; }
}
/* Inline radios/checkboxes */
.cz-inline-choice { display:flex; align-items:center; gap:12px; direction:rtl; }
.cz-inline-choice input[type="radio"],
.cz-inline-choice input[type="checkbox"] { margin:0; width:18px; height:18px; }

/* Branded file input */
.cz-file-input { position:relative; width:100%; direction:rtl; }
.cz-file-input input[type="file"] { position:absolute; right:0; top:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.cz-file-label { display:flex; justify-content:space-between; align-items:center; background:#F7F9FC; border:2px solid #E1E4EA; border-radius:12px; padding:14px 16px; cursor:pointer; color:#3A3F47; transition:0.15s; }
.cz-file-btn { background:#00A859; color:#fff; padding:6px 14px; border-radius:10px; }
.cz-file-input.file-selected .cz-file-label { border-color:#00A859; background:#E9FFF2; color:#008F4A; }
.woocommerce-checkout #payment .wc_payment_methods,
.woocommerce-checkout #payment .place-order { display: none !important; }

/* Also hide any duplicated payment UI inside order review */
.woocommerce-checkout #order_review .wc_payment_methods,
.woocommerce-checkout #order_review .payment_methods,
.woocommerce-checkout #order_review .payment_box,
.woocommerce-checkout #order_review .payment_method,
.woocommerce-checkout #order_review .woocommerce-privacy-policy-text,
.woocommerce-checkout #order_review .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #order_review .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #order_review .woocommerce-input-wrapper input[type=checkbox],
.woocommerce-checkout #order_review .mailpoet_woocommerce_checkout_opt_in,
.woocommerce-checkout #order_review .newsletter,
.woocommerce-checkout #order_review .subscribe,
.woocommerce-checkout #order_review .shop_table tfoot .payment_method { display: none !important; }

/* Steps indicator */
.czfl-steps-indicator{display:flex;gap:10px;margin-bottom:12px;direction:rtl}
.czfl-steps-indicator{justify-content:center}
.czfl-steps-indicator .czfl-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#E5E7EB;color:#374151;font-weight:800;border:2px solid #E5E7EB}
.czfl-steps-indicator .czfl-step-dot.current{background:#EAF0FF;color:#1E40AF;border-color:#1E40AF}
.czfl-steps-indicator .czfl-step-dot.completed{background:#E9FFF2;color:#00A859;border-color:#00A859}
.czfl-steps-indicator .active{background:#EAF0FF;color:#1E40AF;border-color:#1E40AF}
.czfl-steps-indicator .done{background:#E9FFF2;color:#00A859;border-color:#00A859}

/* Back button / Secondary */
.czfl-btn-secondary{background:#D9534F;color:#fff;border:none;border-radius:10px;padding:14px 24px;font-weight:700;font-size:16px;cursor:pointer;transition:all 0.2s}
.czfl-btn-secondary:hover{background:#C9302C}

/* Inline field errors */
.czfl-error{color:#EF4444;font-size:13px;margin-top:6px}
.czfl-invalid{border-color:#EF4444 !important; background:#FFF5F5 !important}
.czfl-form input, .czfl-form select, .czfl-form textarea{ touch-action: manipulation; -ms-touch-action: manipulation; }
body .woocommerce-checkout #czfl-right .czfl-form, body .woocommerce-checkout #czfl-right .czfl-form-wrapper{ pointer-events: auto !important; }
/* Make inline choices fully tappable on mobile */
.cz-inline-choice{ position: relative; z-index: 20; cursor: pointer; }
.cz-inline-choice input[type="radio"], .cz-inline-choice input[type="checkbox"]{ position: relative; z-index: 21; }
.cz-inline-choice label{ cursor: pointer; touch-action: manipulation; }

/* Keyboard-open layout stabilizers (mobile only) */
@media (max-width: 991px) {
  body.cz-keyboard-open .cz-step-container,
  body.cz-keyboard-open .cz-financing-wrapper,
  body.cz-keyboard-open .czfl-form,
  body.cz-keyboard-open #czfl-right,
  body.cz-keyboard-open #czfl-left,
  body.cz-keyboard-open .czfl-form-wrapper,
  body.cz-keyboard-open .czfl-checkout-selector{
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.cz-keyboard-open header,
  body.cz-keyboard-open .site-header,
  body.cz-keyboard-open .elementor-sticky{
    position: static !important;
  }
  body.cz-keyboard-open .elementor-sticky--active,
  body.cz-keyboard-open .elementor-sticky,
  body.cz-keyboard-open .ct-header,
  body.cz-keyboard-open .ct-header-sticky,
  body.cz-keyboard-open .ct-sticky,
  body.cz-keyboard-open .ct-sticky-header,
  body.cz-keyboard-open .ct-sticky-element{
    position: static !important;
    transform: none !important;
  }
  /* Avoid 100vh jumps in common wrappers */
  body.cz-keyboard-open, html.cz-keyboard-open { height: auto !important; }
  body.cz-keyboard-open .elementor-section, body.cz-keyboard-open .ct-container { min-height: auto !important; height: auto !important; }
  /* Prefer dynamic viewport on mobile to avoid 100vh shrink */
  @supports (height: 100dvh) {
    .czfl-form{ min-height: 100dvh; }
  }
}

/* ========================================
   PHONE INPUT WITH COUNTRY CODE
   ======================================== */
.czfl-phone-input {
    display: flex;
    direction: ltr; /* LTR for phone number entry */
    gap: 0;
    width: 100%;
}

.czfl-country-select {
    flex: 0 0 120px;
    padding: 14px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 10px 0 0 10px;
    border-right: none;
    background: #F3F4F6;
    font-size: 15px;
    cursor: pointer;
    color: #374151;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 25px;
}

.czfl-country-select:focus {
    outline: none;
    border-color: var(--cz-blue);
    background-color: #fff;
}

.czfl-phone-number {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    background: #F9FAFB;
    direction: ltr;
    text-align: left;
}

.czfl-phone-number:focus {
    outline: none;
    border-color: var(--cz-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(54, 87, 214, 0.1);
}

/* RTL Adjustments for phone input */
[dir="rtl"] .czfl-phone-input,
.czfl-rtl .czfl-phone-input {
    direction: ltr;
}

/* ========================================
   BUTTONS - RIGHT ALIGNMENT (RTL)
   ======================================== */
.czfl-actions-row {
    display: flex !important;
    flex-direction: row-reverse !important; /* RTL: puts buttons on the right */
    justify-content: flex-start !important;
    align-items: center;
    gap: 12px !important;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--cz-border);
}

/* All action buttons - EQUAL SIZE */
.czfl-btn-back,
.czfl-btn-next,
.czfl-btn-primary.czfl-btn-submit {
    min-width: 140px !important;
    max-width: 140px !important;
    width: 140px !important;
    padding: 14px 20px !important;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none !important;
    text-align: center;
    box-sizing: border-box;
}

/* Back Button - RED */
.czfl-btn-back {
    background: #D9534F !important;
    color: #fff !important;
}

.czfl-btn-back:hover {
    background: #C9302C !important;
    transform: translateY(-1px);
}

/* Next Button - GREEN */
.czfl-btn-next {
    background: var(--cz-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0, 179, 94, 0.2);
}

.czfl-btn-next:hover {
    background: var(--cz-dark-green) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 179, 94, 0.3);
}

/* Submit Button - GREEN - Same size as others */
.czfl-btn-submit,
.czfl-form button[type="submit"] {
    background: var(--cz-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0, 179, 94, 0.2);
}

.czfl-btn-submit:hover,
.czfl-form button[type="submit"]:hover {
    background: var(--cz-dark-green) !important;
    transform: translateY(-1px);
}

/* ========================================
   FORM ENHANCEMENTS
   ======================================== */
.czfl-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 15px;
    background: #F9FAFB;
    resize: vertical;
    min-height: 80px;
}

.czfl-form textarea:focus {
    border-color: var(--cz-blue);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(54, 87, 214, 0.1);
}

/* Step transitions */
.czfl-step {
    animation: stepFadeIn 0.3s ease;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Loading spinner enhancement */
.czfl-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: czfl-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes czfl-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   ORDER SUMMARY FIX - .ct-order-review
   ======================================== */
.czfl-order-column,
#czfl-left {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--cz-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

body .woocommerce-checkout .ct-order-review,
body .woocommerce-checkout #order_review {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================
   LARGER SELECTOR CARDS
   ======================================== */
.czfl-card.czfl-option {
    padding: 25px;
    margin-bottom: 20px;
    min-height: 100px;
}

.czfl-card-image-inline {
    flex-shrink: 0;
    width: 220px;
    height: 160px;
    overflow: hidden;
    border-radius: 12px;
    margin-right: 20px;
}

.czfl-card-image-inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.czfl-card-header h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.czfl-card-header p {
    font-size: 15px;
    line-height: 1.6;
}

/* ========================================
   CUSTOM COUNTRY DROPDOWN WITH FLAGS
   ======================================== */
.czfl-phone-wrapper {
    display: flex;
    direction: ltr;
    width: 100%;
    gap: 0;
}

.czfl-country-dropdown {
    position: relative;
    flex-shrink: 0;
}

.czfl-country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 2px solid #E2E8F0;
    border-radius: 12px 0 0 12px;
    border-right: none;
    cursor: pointer;
    font-size: 15px;
    min-width: 120px;
    height: 52px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.czfl-country-btn:hover {
    background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
    border-color: var(--cz-blue);
}

.czfl-country-dropdown.open .czfl-country-btn {
    background: #fff;
    border-color: var(--cz-blue);
    box-shadow: 0 0 0 3px rgba(54, 87, 214, 0.1);
}

.czfl-flag {
    font-size: 22px;
    line-height: 1;
}

.czfl-code {
    font-weight: 700;
    color: #1E293B;
    font-size: 14px;
}

.czfl-arrow {
    font-size: 8px;
    color: #64748B;
    margin-left: 4px;
    transition: transform 0.2s;
}

.czfl-country-dropdown.open .czfl-arrow {
    transform: rotate(180deg);
}

.czfl-country-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.czfl-country-dropdown.open .czfl-country-list {
    display: block;
    animation: czfl-dropdown 0.2s ease;
}

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

.czfl-country-list li {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    color: #334155;
}

.czfl-country-list li:hover {
    background: #F1F5F9;
}

.czfl-country-list li.active {
    background: #EFF6FF;
    color: var(--cz-blue);
}

.czfl-country-list li span {
    margin-right: auto;
    color: #64748B;
    font-weight: 700;
    font-size: 13px;
}

.czfl-phone-wrapper .czfl-phone-input {
    flex: 1;
    border-radius: 0 12px 12px 0 !important;
    border-left: none !important;
    height: 52px;
    box-sizing: border-box;
}

/* ========================================
   VALIDATION ERROR STYLING
   ======================================== */
.czfl-required {
    color: #EF4444;
    font-weight: bold;
}

.czfl-optional {
    color: #9CA3AF;
    font-weight: normal;
    font-size: 13px;
}

.czfl-error-msg {
    display: none;
    color: #DC2626;
    font-size: 13px;
    margin-top: 6px;
    padding-right: 5px;
}

.czfl-col.has-error .czfl-error-msg {
    display: block;
}

.czfl-input.czfl-invalid,
.czfl-col.has-error .czfl-input,
.czfl-col.has-error input,
.czfl-col.has-error select,
.czfl-col.has-error textarea {
    border-color: #DC2626 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.czfl-col.has-error .czfl-phone-wrapper .czfl-country-btn {
    border-color: #DC2626 !important;
}

/* ========================================
   WHATSAPP ICON STYLING (SIMPLE TOGGLE)
   ======================================== */
.czfl-whatsapp-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
}

.czfl-whatsapp-choice:hover {
    background: #EFF6FF;
}

.czfl-whatsapp-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.czfl-whatsapp-choice label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    color: #111827;
}

.czfl-whatsapp-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.czfl-whatsapp-choice.czfl-whatsapp-on {
    border-color: #22C55E;
    background: #ECFDF5;
}

.czfl-whatsapp-choice.czfl-whatsapp-on label {
    color: #166534;
}

/* ========================================
   BACK TO SELECTOR BUTTON
   ======================================== */
.czfl-btn-back-to-selector {
    background: #D9534F !important;
    color: #fff !important;
    min-width: 140px !important;
    padding: 14px 24px !important;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none !important;
    height: 52px;
    box-sizing: border-box;
}

.czfl-btn-back-to-selector:hover {
    background: #C9302C !important;
    transform: translateY(-1px);
}

/* ========================================
   SIMPLIFIED PHONE INPUT (No Flags)
   ======================================== */
.czfl-phone-simple {
    display: flex;
    direction: ltr;
    width: 100%;
    gap: 0;
}

.czfl-country-select {
    flex-shrink: 0;
    padding: 14px 12px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 2px solid #E2E8F0;
    border-radius: 12px 0 0 12px;
    border-right: none;
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    cursor: pointer;
    min-width: 100px;
    height: 52px;
    box-sizing: border-box;
}

.czfl-phone-simple .czfl-input {
    flex: 1;
    border-radius: 0 12px 12px 0 !important;
    border-left: none !important;
    height: 52px;
    box-sizing: border-box;
}

.czfl-row-2col {
    display: flex;
    gap: 15px;
}

.czfl-row-2col .czfl-col {
    flex: 1;
}

/* ========================================
   BUTTONS - ALL GREEN, RIGHT ALIGNED
   ======================================== */
.czfl-btn-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #E5E7EB;
}

/* Universal button reset */
.czfl-btn-row button {
    height: 48px;
    min-width: 140px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin: 0;
    box-sizing: border-box;
}

/* Green buttons (submit & next) */
.czfl-btn-row .btn-submit,
.czfl-btn-row .btn-next {
    background: #22C55E;
    color: #fff;
}

.czfl-btn-row .btn-submit:hover,
.czfl-btn-row .btn-next:hover {
    background: #16A34A;
}

/* Red back button */
.czfl-btn-row .btn-back {
    background: #EF4444;
    color: #fff;
}

.czfl-btn-row .btn-back:hover {
    background: #DC2626;
}

/* Legacy support - hide old buttons */
.czfl-actions-row {
    display: none !important;
}

/* Continue Button (Selector) */
.czfl-continue-btn {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 20px;
    background: #22C55E;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.czfl-continue-btn:hover {
    background: #16A34A;
}

/* ========================================
   SUCCESS POPUP WIZARD
   ======================================== */
.czfl-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.czfl-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.czfl-popup-box {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.czfl-popup-overlay.active .czfl-popup-box {
    transform: scale(1);
}

.czfl-popup-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.czfl-popup-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.czfl-popup-title {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 15px;
}

.czfl-popup-tracking {
    background: #F0FDF4;
    border: 2px solid #22C55E;
    border-radius: 12px;
    padding: 15px 20px;
    margin: 20px 0;
}

.czfl-popup-tracking-label {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 5px;
}

.czfl-popup-tracking-id {
    font-size: 28px;
    font-weight: 800;
    color: #166534;
    letter-spacing: 2px;
}

.czfl-popup-note {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 25px;
}

.czfl-popup-btn {
    display: inline-block;
    background: #22C55E;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.czfl-popup-btn:hover {
    background: #16A34A;
    color: #fff;
}

/* ========================================
   PRODUCT SEARCH DROPDOWN
   ======================================== */
.czfl-product-search {
    position: relative;
    width: 100%;
}

.czfl-product-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.czfl-product-list.active {
    display: block;
}

.czfl-product-list li {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.15s;
}

.czfl-product-list li:hover {
    background: #F0F9FF;
}

.czfl-product-list li:last-child {
    border-bottom: none;
}

.czfl-product-thumb {
    width: 50px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.czfl-product-name {
    flex: 1;
    font-size: 14px;
}

.czfl-product-price {
    font-size: 13px;
    color: #22C55E;
    font-weight: 600;
    flex-shrink: 0;
}

/* Selected Product Preview */
.czfl-selected-product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    background: #F0FDF4;
    border: 2px solid #22C55E;
    border-radius: 10px;
}

.czfl-selected-product img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.czfl-selected-product span {
    font-size: 15px;
    font-weight: 600;
    color: #166534;
}

/* Help text styling */
.czfl-help-text {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

/* ========================================
   STANDALONE FORM STYLES (Companies, etc)
   ======================================== */
.czfl-form-companies {
    max-width: 700px;
    margin: 0 auto;
    direction: rtl;
}

.czfl-form-companies .czfl-phone-wrapper {
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
}

.czfl-form-companies .czfl-country-btn {
    border: none !important;
    border-radius: 0 !important;
    border-left: 2px solid #E2E8F0 !important;
}

.czfl-form-companies .czfl-phone-input {
    border: none !important;
    border-radius: 0 !important;
}

.czfl-form-companies .czfl-phone-wrapper:focus-within {
    border-color: var(--cz-blue);
    box-shadow: 0 0 0 3px rgba(54, 87, 214, 0.1);
}

/* Input styling for standalone forms */
.czfl-form-companies .czfl-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.2s;
    background: #F9FAFB;
    color: #111827;
    box-sizing: border-box;
}

.czfl-form-companies .czfl-input:focus {
    border-color: var(--cz-blue);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 87, 214, 0.1);
}

/* Form wrapper for standalone */
.czfl-form-companies .czfl-col label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #374151;
    text-align: right;
}

/* File input for standalone */
.czfl-form-companies .cz-file-input {
    position: relative;
    width: 100%;
}

.czfl-form-companies .cz-file-input input[type="file"] {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.czfl-form-companies .cz-file-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F7F9FC;
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.czfl-form-companies .cz-file-label:hover {
    border-color: var(--cz-blue);
    background: #EFF6FF;
}

.czfl-form-companies .cz-file-btn {
    background: var(--cz-green);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.czfl-form-companies .cz-file-name {
    color: #6B7280;
    font-size: 14px;
}

.czfl-form-companies .cz-file-input.file-selected .cz-file-label {
    border-color: var(--cz-green);
    border-style: solid;
    background: #F0FDF4;
}

.czfl-form-companies .cz-file-input.file-selected .cz-file-name {
    color: var(--cz-green);
    font-weight: 600;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .czfl-card.czfl-option {
        flex-wrap: wrap;
    }
    
    .czfl-card-image-inline {
        width: 100%;
        height: auto;
        margin-top: 15px;
        order: 3;
    }
    
    .czfl-phone-wrapper {
        flex-direction: column;
    }
    
    .czfl-country-btn {
        border-radius: 10px;
        border-right: 1px solid #D1D5DB;
        margin-bottom: 10px;
    }
    
    .czfl-phone-wrapper .czfl-phone-input {
        border-radius: 10px !important;
    }
    
    .czfl-actions-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .czfl-btn-back,
    .czfl-btn-next,
    .czfl-btn-submit,
    .czfl-btn-back-to-selector {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}