/* ============================================
   Standard Checkout - Braintree Payment Styling
   ============================================ */

.payment-method-braintree {

    /* Hosted Fields Container */
    .hosted-control {
        height: 38px;
        padding: 8px 12px;
        border: 1px solid #d4d4d4;
        border-radius: 4px;
        font-size: 14px;
        background: #fff;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
        margin-right: 10px;

        &:focus-within {
            border-color: #000;
        }
    }

    /* Card Number Field */
    #braintree_cc_number {
        width: 100%;
        max-width: 280px;
    }

    /* Expiration Date Field */
    #braintree_expirationDate {
        width: 120px;
        min-width: 120px;
    }

    /* CVV Field */
    #braintree_cc_cid {
        width: 80px;
    }

    /* Selected Card Display */
    .braintree-credit-card-selected {
        height: 38px;
        line-height: 38px;
    }

    /* CVV Tooltip Fix */
    .cvv {
        position: relative;

        div.field-tooltip {
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    /* Validation States - text color only */
    .hosted-control.braintree-hosted-fields-invalid {
        color: #e41c18;
    }

    .hosted-control.braintree-hosted-fields-valid {
        color: #333;
    }

    /* Field Labels */
    .field .label {
        font-weight: 600;
        margin-bottom: 5px;
    }

    /* Card Type Icons */
    .credit-card-types {
        img {
            opacity: 0.4;
            width: 40px;
            margin-right: 5px;
            transition: opacity 0.2s ease;

            &._active {
                opacity: 1;
            }
        }
    }
}