/* ==========================================================================
   Modern Payment Cards Layout - High Specificity Override
   ========================================================================== */

/* 1. Container Setup - Flexbox Grid */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods,
body .woocommerce-checkout #payment ul.payment_methods,
body .woocommerce-checkout .wc_payment_methods,
body .wfacp_payment_methods ul.payment_methods,
body .wfacp_payment_methods .wc_payment_methods {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* 2. Flatten List Structure (Tabs Behavior) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li,
body .woocommerce-checkout #payment ul.payment_methods li,
body .woocommerce-checkout .wc_payment_methods li,
body .wfacp_payment_methods ul.payment_methods li {
    display: contents !important; /* Key for separating label and content */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* 3. Hide Radio Inputs */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li input[type="radio"],
body .woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
body .woocommerce-checkout .wc_payment_methods li input[type="radio"],
body .wfacp_payment_methods ul.payment_methods li input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
}

/* 4. Labels as Cards (The main visual element) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label,
body .woocommerce-checkout #payment ul.payment_methods > li > label,
body .woocommerce-checkout .wc_payment_methods > li > label,
body .wfacp_payment_methods ul.payment_methods > li > label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    padding: 16px 8px !important; /* Slightly reduced horizontal padding */
    margin: 0 !important;
    
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    min-height: 90px !important; /* Reduced slightly to look better */
    box-sizing: border-box !important;
    
    /* Layout Logic: 3 per row */
    /* Width = (100% - 2 gaps of 12px) / 3 = (100% - 24px) / 3 */
    flex: 0 0 calc((100% - 24px) / 3 - 0.1px) !important;
    width: calc((100% - 24px) / 3 - 0.1px) !important;
    max-width: calc((100% - 24px) / 3 - 0.1px) !important;
    
    order: 1 !important; /* Force to top */
    
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #4a5568 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    position: relative !important;
    line-height: 1.3 !important;
}

/* 5. Selected State */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li input[type="radio"]:checked + label,
body .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label,
body .woocommerce-checkout .wc_payment_methods li input[type="radio"]:checked + label,
body .wfacp_payment_methods ul.payment_methods li input[type="radio"]:checked + label {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
    color: #065f46 !important;
    box-shadow: 0 0 0 1px #10b981 !important;
    z-index: 10 !important;
}

/* 6. Icon Alignment (Img, SVG, i) - Icon Top, Text Bottom */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label img,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label svg,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label i,
body .woocommerce-checkout #payment ul.payment_methods > li > label img,
body .woocommerce-checkout #payment ul.payment_methods > li > label svg,
body .woocommerce-checkout #payment ul.payment_methods > li > label i {
    display: block !important;
    margin: 0 auto 6px auto !important; /* Space below icon */
    max-width: 40px !important; /* Restrict icon size */
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    order: -1 !important; /* Ensure icon is first */
    float: none !important;
}

/* Handle pseudo-element icons (if any) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label::before,
body .woocommerce-checkout #payment ul.payment_methods > li > label::before {
    margin-bottom: 6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Handle Text inside label */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label span,
body .woocommerce-checkout #payment ul.payment_methods > li > label span {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* 7. Payment Box (Details) - Full width below cards */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li .payment_box,
body .woocommerce-checkout #payment ul.payment_methods li .payment_box,
body .woocommerce-checkout .wc_payment_methods li .payment_box,
body .wfacp_payment_methods ul.payment_methods li .payment_box {
    order: 2 !important; 
    width: 100% !important;
    flex-basis: 100% !important;
    margin: 16px 0 0 0 !important;
    padding: 20px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #4a5568 !important;
    position: relative !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* 8. Visibility Logic */
/* By default, let WC/FunnelKit handle display:none via inline styles */
/* But when visible (style="display:block"), force full width and correct display */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li .payment_box[style*="display: block"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li .payment_box[style*="display:block"],
body .woocommerce-checkout #payment ul.payment_methods li .payment_box[style*="display: block"],
body .woocommerce-checkout #payment ul.payment_methods li .payment_box[style*="display:block"] {
    display: block !important;
    width: 100% !important;
}

/* 9. Mobile Responsiveness */
@media (max-width: 768px) {
    /* 2 cards per row on mobile */
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label,
    body .woocommerce-checkout #payment ul.payment_methods > li > label,
    body .woocommerce-checkout .wc_payment_methods > li > label,
    body .wfacp_payment_methods ul.payment_methods > li > label {
        flex: 0 0 calc((100% - 12px) / 2 - 0.1px) !important;
        width: calc((100% - 12px) / 2 - 0.1px) !important;
        max-width: calc((100% - 12px) / 2 - 0.1px) !important;
    }
}

/* 10. Cleanups */
/* Hide the little arrow triangle often added by themes */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li .payment_box::before,
body .woocommerce-checkout #payment ul.payment_methods li .payment_box::before {
    display: none !important;
}

/* Remove default margins from any internal elements */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li label .wfacp_radio_wrap,
body .woocommerce-checkout #payment ul.payment_methods li label .wfacp_radio_wrap {
    display: none !important; /* Hide radio wrapper if present */
}

body {
    --fm-pay-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h5'/%3E%3C/g%3E%3C/svg%3E");
    --fm-pay-icon-pix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 7.5 12 3l4.5 4.5L12 12 7.5 7.5Z'/%3E%3Cpath d='M7.5 16.5 12 21l4.5-4.5L12 12 7.5 16.5Z'/%3E%3Cpath d='M3 12l4.5-4.5L12 12l-4.5 4.5L3 12Z'/%3E%3Cpath d='M21 12l-4.5-4.5L12 12l4.5 4.5L21 12Z'/%3E%3C/g%3E%3C/svg%3E");
    --fm-pay-icon-boleto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M7 9v6'/%3E%3Cpath d='M10 9v6'/%3E%3Cpath d='M13 9v6'/%3E%3Cpath d='M16 9v6'/%3E%3C/g%3E%3C/svg%3E");
    --fm-pay-icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a3 3 0 0 1 3-3h11v4'/%3E%3Cpath d='M4 7v10a3 3 0 0 0 3 3h13V8H7a3 3 0 0 0-3 3'/%3E%3Cpath d='M18 13h2'/%3E%3C/g%3E%3C/svg%3E");
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label img,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label svg,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label i,
body .woocommerce-checkout #payment ul.payment_methods > li > label img,
body .woocommerce-checkout #payment ul.payment_methods > li > label svg,
body .woocommerce-checkout #payment ul.payment_methods > li > label i,
body .woocommerce-checkout .wc_payment_methods > li > label img,
body .woocommerce-checkout .wc_payment_methods > li > label svg,
body .woocommerce-checkout .wc_payment_methods > li > label i,
body .wfacp_payment_methods ul.payment_methods > li > label img,
body .wfacp_payment_methods ul.payment_methods > li > label svg,
body .wfacp_payment_methods ul.payment_methods > li > label i {
    display: none !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li,
body .woocommerce-checkout #payment ul.payment_methods li,
body .woocommerce-checkout .wc_payment_methods li,
body .wfacp_payment_methods ul.payment_methods li {
    --fm-pay-icon: var(--fm-pay-icon-card);
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li[class*="pix"],
body .woocommerce-checkout #payment ul.payment_methods li[class*="pix"],
body .woocommerce-checkout .wc_payment_methods li[class*="pix"],
body .wfacp_payment_methods ul.payment_methods li[class*="pix"] {
    --fm-pay-icon: var(--fm-pay-icon-pix);
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li[class*="boleto"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li[class*="ticket"],
body .woocommerce-checkout #payment ul.payment_methods li[class*="boleto"],
body .woocommerce-checkout #payment ul.payment_methods li[class*="ticket"],
body .woocommerce-checkout .wc_payment_methods li[class*="boleto"],
body .woocommerce-checkout .wc_payment_methods li[class*="ticket"],
body .wfacp_payment_methods ul.payment_methods li[class*="boleto"],
body .wfacp_payment_methods ul.payment_methods li[class*="ticket"] {
    --fm-pay-icon: var(--fm-pay-icon-boleto);
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods li[class*="mercado"],
body .woocommerce-checkout #payment ul.payment_methods li[class*="mercado"],
body .woocommerce-checkout .wc_payment_methods li[class*="mercado"],
body .wfacp_payment_methods ul.payment_methods li[class*="mercado"] {
    --fm-pay-icon: var(--fm-pay-icon-wallet);
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li > label::before,
body .woocommerce-checkout #payment ul.payment_methods > li > label::before,
body .woocommerce-checkout .wc_payment_methods > li > label::before,
body .wfacp_payment_methods ul.payment_methods > li > label::before {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto 8px auto !important;
    background-image: var(--fm-pay-icon) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #fff !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box label::before,
body .woocommerce-checkout #payment .payment_box label::before,
body .wfacp_payment_methods #payment .payment_box label::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

body .woocommerce-checkout #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body .woocommerce-checkout #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-name_field,
body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-number_field,
body .woocommerce-checkout #payment .payment_method_asaas-credit-card #assas-cc-expiration-label_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-name_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-number_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #assas-cc-expiration-label_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-name_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-number_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #assas-cc-expiration-label_field {
    grid-column: 1 / -1 !important;
}

body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field {
    grid-column: span 4 !important;
}

body .woocommerce-checkout #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper label,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper label,
body .wfacp_payment_methods #payment .payment_method_asaas-credit-card .asaas-cc-form-wrapper label {
    text-align: left !important;
}

@media (max-width: 420px) {
    body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
    body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
    body .woocommerce-checkout #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field,
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field,
    body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-expiration-month_field,
    body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-expiration-year_field,
    body .wfacp_payment_methods #payment .payment_method_asaas-credit-card #asaas-cc-security-code_field {
        grid-column: 1 / -1 !important;
    }
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .form-row,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .woocommerce-form-row,
body .woocommerce-checkout #payment .payment_box .form-row,
body .woocommerce-checkout #payment .payment_box .woocommerce-form-row,
body .wfacp_payment_methods #payment .payment_box .form-row,
body .wfacp_payment_methods #payment .payment_box .woocommerce-form-row {
    margin: 0 0 14px 0 !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .form-row label,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .woocommerce-form-row label,
body .woocommerce-checkout #payment .payment_box .form-row label,
body .woocommerce-checkout #payment .payment_box .woocommerce-form-row label,
body .wfacp_payment_methods #payment .payment_box .form-row label,
body .wfacp_payment_methods #payment .payment_box .woocommerce-form-row label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box fieldset,
body .woocommerce-checkout #payment .payment_box fieldset,
body .wfacp_payment_methods #payment .payment_box fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box legend,
body .woocommerce-checkout #payment .payment_box legend,
body .wfacp_payment_methods #payment .payment_box legend {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #0f172a !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box input[type="text"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box input[type="tel"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box input[type="email"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box input[type="password"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box select,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box textarea,
body .woocommerce-checkout #payment .payment_box input[type="text"],
body .woocommerce-checkout #payment .payment_box input[type="tel"],
body .woocommerce-checkout #payment .payment_box input[type="email"],
body .woocommerce-checkout #payment .payment_box input[type="password"],
body .woocommerce-checkout #payment .payment_box select,
body .woocommerce-checkout #payment .payment_box textarea,
body .wfacp_payment_methods #payment .payment_box input[type="text"],
body .wfacp_payment_methods #payment .payment_box input[type="tel"],
body .wfacp_payment_methods #payment .payment_box input[type="email"],
body .wfacp_payment_methods #payment .payment_box input[type="password"],
body .wfacp_payment_methods #payment .payment_box select,
body .wfacp_payment_methods #payment .payment_box textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}

body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .woocommerce-input-wrapper,
body .woocommerce-checkout #payment .payment_box .woocommerce-input-wrapper,
body .wfacp_payment_methods #payment .payment_box .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .form-row-first,
    body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_box .form-row-last,
    body .woocommerce-checkout #payment .payment_box .form-row-first,
    body .woocommerce-checkout #payment .payment_box .form-row-last,
    body .wfacp_payment_methods #payment .payment_box .form-row-first,
    body .wfacp_payment_methods #payment .payment_box .form-row-last {
        width: 100% !important;
    }
}

body #mp-doc-div {
    display: block !important;
}

body #mp-checkout-custom-installments-card {
    display: block !important;
}

body #mp-checkout-custom-installments-card.mp-checkout-custom-installments-display-none,
body #mp-checkout-custom-installments-card.mp-checkout-custom-installments-card-display-none,
body #mp-checkout-custom-installments-card.mp-hidden,
body #mp-checkout-custom-installments-card.mp-display-none {
    display: block !important;
}

body #form-checkout__identificationType {
    width: 120px !important;
    max-width: 120px !important;
}