/**
 * Mercado Pago 支付 - 结账页面图标样式
 * 
 * 遵循 Mercado Pago 品牌规范:
 * - 水平版 logo 作为首选展示方案
 * - 保持最小安全间距（等于字母 "d" 的高度）
 * - 浅色背景使用彩色 logo，深色背景使用白色 logo
 * - 不可拉伸、变形或更改配色
 */

/* ============================================================
   1. WooCommerce Blocks Checkout - 支付方式卡片布局
   ============================================================ */

/* 主容器: Logo(左) + 信息(右) 水平布局 */
.mpjoy-block-label {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* 左侧: Logo 容器 */
.mpjoy-block-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Logo 图片 - 不强制指定高度，让其自然填充 */
.mpjoy-block-icon {
    display: block;
    width: auto;
    object-fit: contain;
}

/* 彩色 logo（默认可见） */
.mpjoy-block-icon--color {
    display: block;
}

/* 白色 logo（默认隐藏） */
.mpjoy-block-icon--white {
    display: none;
}

/* 右侧: Title + Description 垂直排列 */
.mpjoy-block-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 支付方式标题 */
.mpjoy-block-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* 支付方式描述 */
.mpjoy-block-desc {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.7;
    color: inherit;
}

/* ============================================================
   2. 隐藏 WooCommerce Blocks 默认的 Content 折叠区域
      (描述已整合到 Label 中，无需重复显示)
   ============================================================ */
.wc-block-components-radio-control-accordion-option:has(.mpjoy-block-label)
    .wc-block-components-radio-control-accordion-content {
    display: none;
}

/* ============================================================
   3. 暗黑主题适配
   ============================================================ */

/* 方式 A: 系统级暗黑模式偏好 */
@media (prefers-color-scheme: dark) {
    body:not([data-color-scheme="light"]):not(.flavor-light):not(.flavor--light) .mpjoy-block-icon--color {
        display: none;
    }
    body:not([data-color-scheme="light"]):not(.flavor-light):not(.flavor--light) .mpjoy-block-icon--white {
        display: block;
    }
}

/* 方式 B: 常见主题暗黑模式 CSS 类 */
.is-dark-theme .mpjoy-block-icon--color,
.dark-mode .mpjoy-block-icon--color,
.flavor-dark .mpjoy-block-icon--color,
[data-color-scheme="dark"] .mpjoy-block-icon--color,
[data-theme="dark"] .mpjoy-block-icon--color {
    display: none !important;
}

.is-dark-theme .mpjoy-block-icon--white,
.dark-mode .mpjoy-block-icon--white,
.flavor-dark .mpjoy-block-icon--white,
[data-color-scheme="dark"] .mpjoy-block-icon--white,
[data-theme="dark"] .mpjoy-block-icon--white {
    display: block !important;
}

/* ============================================================
   4. 响应式布局
   ============================================================ */

@media (max-width: 480px) {
    .mpjoy-block-label {
        gap: 12px;
    }
    .mpjoy-block-title {
        font-size: 14px;
    }
    .mpjoy-block-desc {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .mpjoy-block-label {
        gap: 8px;
    }
    .mpjoy-block-title {
        font-size: 13px;
    }
    .mpjoy-block-desc {
        font-size: 11px;
    }
}

/* ============================================================
   5. Classic WooCommerce Checkout (非 Blocks)
   ============================================================ */
.payment_method_mercadopago_joy img.mpjoy-icon {
    max-height: 28px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}

/* Classic Checkout - 暗黑模式 */
.payment_method_mercadopago_joy .mpjoy-classic-icon--white {
    display: none;
}

@media (prefers-color-scheme: dark) {
    body:not([data-color-scheme="light"]):not(.flavor-light) .payment_method_mercadopago_joy .mpjoy-classic-icon--color {
        display: none;
    }
    body:not([data-color-scheme="light"]):not(.flavor-light) .payment_method_mercadopago_joy .mpjoy-classic-icon--white {
        display: inline;
    }
}

.is-dark-theme .payment_method_mercadopago_joy .mpjoy-classic-icon--color,
.dark-mode .payment_method_mercadopago_joy .mpjoy-classic-icon--color,
[data-color-scheme="dark"] .payment_method_mercadopago_joy .mpjoy-classic-icon--color,
[data-theme="dark"] .payment_method_mercadopago_joy .mpjoy-classic-icon--color {
    display: none !important;
}

.is-dark-theme .payment_method_mercadopago_joy .mpjoy-classic-icon--white,
.dark-mode .payment_method_mercadopago_joy .mpjoy-classic-icon--white,
[data-color-scheme="dark"] .payment_method_mercadopago_joy .mpjoy-classic-icon--white,
[data-theme="dark"] .payment_method_mercadopago_joy .mpjoy-classic-icon--white {
    display: inline !important;
}