/* PPG Site A - Checkout Styles */

/* ── 原有 PayPal 图标对齐 ─────────────────────────────────────── */
.payment_method_ppg_cross_site_a label img {
    vertical-align: middle;
    margin-left: 6px;
    max-height: 24px;
}

/* ══════════════════════════════════════════════════════════════
   Express Checkout 区域
   参考 WooCommerce PayPal Payments 官方 Express Checkout 样式
   ══════════════════════════════════════════════════════════════ */

.ppga-express-wrap {
    max-width: 760px;
    margin: 0 auto 8px;
    padding: 0 0 16px;
    position: relative;
}

/* 标题 */
.ppga-express-title {
    text-align: center;
    font-size: 14px;
    color: #6d6d6d;
    margin: 0 0 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* PayPal 按钮容器（SDK 注入到这里） */
#ppga-paypal-express-button {
    width: 100%;
}

/* Powered by PayPal */
.ppga-express-powered {
    text-align: center;
    font-size: 12px;
    color: #6d6d6d;
    margin: 10px 0 0;
    font-weight: 400;
}

.ppga-express-powered strong {
    color: #009cde;
    font-weight: 700;
}

/* ── 分隔线 — OR — ───────────────────────────────────────────── */
.ppga-express-divider {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
    position: relative;
}

.ppga-express-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    transform: translateY(-50%);
}

.ppga-express-divider span {
    position: relative;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #6d6d6d;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* ── 加载状态 ────────────────────────────────────────────────── */
.ppga-express-wrap.ppga-express-loading {
    opacity: 0.6;
    pointer-events: none;
}

.ppga-express-wrap.ppga-express-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid #e0e0e0;
    border-top-color: #009cde;
    border-radius: 50%;
    animation: ppga-spin 0.7s linear infinite;
}

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

/* ── 通知消息 ────────────────────────────────────────────────── */
.ppga-express-notice {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.ppga-express-notice--error {
    background: #fef0f0;
    border-left: 3px solid #e2401c;
    color: #c0392b;
}

.ppga-express-notice--info {
    background: #f0f7ff;
    border-left: 3px solid #009cde;
    color: #2c7bb6;
}

/* ══════════════════════════════════════════════════════════════
   iframe 支付区域（Business 模式底部结账）
   ══════════════════════════════════════════════════════════════ */

.ppga-iframe-wrap {
    position: relative;
    min-height: 60px;
    margin-top: 8px;
}

/* Loading 指示器（iframe 加载前） */
.ppga-iframe-loading-indicator {
    padding: 24px 0;
    text-align: center;
}

/* iframe 本体（JS 动态注入后的 <iframe>）
 * v1.8.4：折叠态 120px（只显示两个按钮），展开态 ~430px（PayPal Inline Guest 表单）
 * v1.8.15: transition 300ms → 150ms
 * 高度由 JS 通过 inline style 控制，CSS 提供 transition；min-height 兜底 */
#ppga-paypal-iframe {
    width: 100%;
    border: none;
    min-height: 120px;
    display: block;
    background: transparent;
    transition: height 150ms ease;
}

/* v1.8.4：iframe 进入全屏（3DS 验证）—— 与 Express 区共用同一个 class */
#ppga-paypal-iframe.ppga-iframe-fullscreen {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647;
    background: #fff;
}

/* v1.8.4 强力隐藏（用于在选中 ppg_cross_site_a 时隐藏 WC #place_order）
 * cushiow / MECOM 用同名 class，使用 !important 优先级覆盖主题/插件样式 */
.important-hide {
    display: none !important;
}

/* 表单未填好时的提示文字 */
.ppga-iframe-hint {
    transition: opacity 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────
   v1.8.3：Express Checkout iframe（顶部区域）样式
   ─────────────────────────────────────────────────────────────── */

/* iframe 容器（占位 host） */
.ppga-express-iframe-host {
    position: relative;
    min-height: 80px;
    width: 100%;
}

/* iframe 本体：默认折叠态 80px，JS 通过 inline style 控制高度，CSS 提供 transition */
.ppga-express-iframe {
    width: 100%;
    border: 0;
    display: block;
    background: transparent;
    /* v1.8.15: 300ms → 150ms，跳变感降低 */
    transition: height 150ms ease;
}

/* 3DS 验证全屏覆盖 */
.ppga-express-iframe.ppga-iframe-fullscreen {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647; /* 比绝大多数主题/插件遮罩都高 */
    background: #fff;
}

/* 当任一 iframe 进入全屏时锁住 body 滚动 */
body.ppga-iframe-fullscreen-active {
    overflow: hidden;
}

/* 商品页激活前的占位按钮（用户首次点击才创建 session） */
.ppga-express-placeholder {
    display: block;
    width: 100%;
}
.ppga-express-trigger {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    border: 0;
    background: #ffc439; /* PayPal 黄 */
    color: #003087;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ppga-express-trigger:hover { background: #ffb800; }

/* 当 Express 区在 loading（session 创建 / capture）时的视觉反馈 — 复用现有
   .ppga-express-loading 已有的 spinner 样式
   注：原 .ppga-express-disclaimer "Powered by PayPal" 已在 v1.8.4 后续移除，
   PayPal Inline Guest 表单底部自带，避免重复 */