:root {
    --homepro-teal: #0eaaa6;
    --homepro-dark: #101820;
    --homepro-muted: #667085;
    --homepro-border: #d9e3e7;
    --homepro-soft: #f3fbfa;
}

.payment_method_homepro_square > label img {
    max-height: 26px !important;
    width: auto !important;
    max-width: 118px !important;
    object-fit: contain;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.homepro-square-shell {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--homepro-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, var(--homepro-soft) 100%);
    box-shadow: 0 6px 18px rgba(16, 24, 32, 0.05);
}

.homepro-square-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--homepro-dark);
    font-size: 14px;
}

.homepro-square-wallets {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.homepro-square-apple-pay {
    display: none;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
    appearance: none;
    background: #000;
}

.homepro-square-google-pay {
    display: none;
    min-height: 40px;
}

.homepro-square-google-pay > div,
.homepro-square-google-pay button {
    width: 100% !important;
}

.homepro-square-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--homepro-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.homepro-square-divider::before,
.homepro-square-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--homepro-border);
}

#homepro-square-card,
.homepro-square-card-block {
    min-height: 90px;
    background: #fff;
    border: 1px solid #e6ebee;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

#homepro-square-card.homepro-square-card-ready {
    min-height: 0;
}

.homepro-square-status {
    margin: 0 0 8px;
    color: var(--homepro-muted);
    font-size: 12px;
    line-height: 1.45;
}

#homepro-square-error,
.homepro-square-error {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #f2c7c3;
    border-radius: 8px;
    background: #fff6f5;
    color: #b42318;
    font-size: 13px;
    line-height: 1.45;
}

#homepro-square-error:empty {
    display: none;
}

.homepro-square-security {
    margin-top: 10px;
    color: var(--homepro-muted);
    font-size: 12px;
    line-height: 1.45;
}

.homepro-square-method-label {
    font-weight: 600;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted:has(input[value="homepro_square"]) {
    border-color: var(--homepro-teal);
}

.homepro-square-block-icon {
    width: auto;
    height: 24px;
    max-width: 96px;
    object-fit: contain;
    margin-left: 10px;
    vertical-align: middle;
}

/* 0.2.6 responsive Square card layout fix */
.payment_method_homepro_square .homepro-square-shell,
.payment_method_homepro_square .homepro-square-shell * {
    box-sizing: border-box;
}

.payment_method_homepro_square .homepro-square-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

#homepro-square-card,
.homepro-square-card-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

#homepro-square-card.homepro-square-card-ready {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

#homepro-square-card iframe,
.homepro-square-card-block iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

@media (max-width: 782px) {
    .payment_method_homepro_square .homepro-square-shell {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .payment_method_homepro_square .homepro-square-brand {
        margin-bottom: 10px;
    }

    #homepro-square-card,
    .homepro-square-card-block {
        padding: 0;
        margin: 0;
    }
}