/* Builder Button Presets
   各ブロック内のボタン（CTA・もっと見る・購入導線等）に適用される装飾プリセット。
   ecport-storefront/resources/views/themes/ecomus/components/button.blade.php と
   ecport-core/config/builder_button_presets.php と対応。 */

.ecp-btn {
    --ecp-btn-accent: #1a1a1a;
    --ecp-btn-accent-2: #c9a86b;
    --ecp-btn-bg: var(--ecp-btn-accent);
    --ecp-btn-color: #ffffff;
    --ecp-btn-border: var(--ecp-btn-accent);
    --ecp-btn-padding-x: 1.6em;
    --ecp-btn-padding-y: 0.8em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--ecp-btn-padding-y) var(--ecp-btn-padding-x);
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ecp-btn-color);
    transition: opacity .15s, transform .15s, background-color .15s, color .15s;
    box-sizing: border-box;
}

.ecp-btn:hover { opacity: 0.85; }
.ecp-btn:active { transform: translateY(1px); }

/* 矢印アイコン（supports_arrow プリセットで data-arrow="1" が付く） */
.ecp-btn[data-arrow="1"]::after {
    content: "→";
    display: inline-block;
    transition: transform .15s;
}
.ecp-btn[data-arrow="1"]:hover::after { transform: translateX(3px); }

/* ───── 基本 ───── */

.ecp-btn--fill {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
}

.ecp-btn--outline {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: var(--ecp-btn-border);
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--outline:hover { background-color: var(--ecp-btn-accent); color: #fff; }

.ecp-btn--ghost {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--ghost:hover { background-color: rgba(0, 0, 0, 0.05); }

.ecp-btn--underline {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    border-bottom: 2px solid var(--ecp-btn-accent);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    --ecp-btn-color: var(--ecp-btn-accent);
}

/* ───── 形状 ───── */

.ecp-btn--pill {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
    border-radius: 999px;
}

.ecp-btn--square {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
    border-radius: 0;
}

.ecp-btn--round {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
    border-radius: 8px;
}

.ecp-btn--outline-pill {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: var(--ecp-btn-border);
    border-radius: 999px;
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--outline-pill:hover { background-color: var(--ecp-btn-accent); color: #fff; }

/* ───── 装飾 ───── */

.ecp-btn--arrow {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    --ecp-btn-color: var(--ecp-btn-accent);
}

.ecp-btn--gradient {
    background-image: linear-gradient(135deg, var(--ecp-btn-accent) 0%, var(--ecp-btn-accent-2) 100%);
    color: var(--ecp-btn-color);
    border-color: transparent;
    border-radius: 6px;
}

.ecp-btn--shadow {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ecp-btn--shadow:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }

.ecp-btn--fill-arrow {
    background-color: var(--ecp-btn-bg);
    color: var(--ecp-btn-color);
    border-color: var(--ecp-btn-bg);
}

/* ───── 控えめ ───── */

.ecp-btn--small-text {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    font-size: 0.85em;
    padding: 0.3em 0.6em;
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--small-text:hover { text-decoration: underline; }

.ecp-btn--link {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    --ecp-btn-color: var(--ecp-btn-accent);
}

.ecp-btn--soft {
    background-color: color-mix(in srgb, var(--ecp-btn-accent) 12%, transparent);
    color: var(--ecp-btn-accent);
    border-color: transparent;
    border-radius: 6px;
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--soft:hover { background-color: color-mix(in srgb, var(--ecp-btn-accent) 20%, transparent); }

.ecp-btn--minimal {
    background-color: transparent;
    color: var(--ecp-btn-accent);
    border-color: transparent;
    padding: 0;
    font-size: 0.9em;
    --ecp-btn-color: var(--ecp-btn-accent);
}
.ecp-btn--minimal:hover { opacity: 0.6; }