/* ===================================
   ปุ่มสั่งทำสินค้า (Money Link) ที่ใช้ร่วมกัน
   โหลดทั้งหน้า /articles และ /article/{slug}
   ดู $cssByView ใน home/index.php

   แยกไฟล์ไว้เพราะทั้งสองหน้าใช้ปุ่มชุดเดียวกัน
   ถ้าเขียนซ้ำในไฟล์ของแต่ละหน้า แก้สีปุ่มครั้งเดียวจะลืมอีกไฟล์
   =================================== */

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6c453, #e0a32b);
    color: #3b2a08;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(224, 163, 43, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn-cta:hover,
.btn-cta:focus {
    color: #3b2a08;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(224, 163, 43, 0.45);
}

.btn-cta-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.4rem;
    border-radius: 12px;
    border: 1.5px solid #d9c08a;
    color: #7a5a1b;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.btn-cta-ghost:hover,
.btn-cta-ghost:focus {
    background: rgba(246, 196, 83, 0.18);
    color: #5d4413;
    text-decoration: none;
}

[data-theme="dark"] .btn-cta-ghost {
    border-color: #7a6532;
    color: #e0cb9a;
}

[data-theme="dark"] .btn-cta-ghost:hover,
[data-theme="dark"] .btn-cta-ghost:focus {
    background: rgba(246, 196, 83, 0.12);
    color: #f1e2bb;
}

@media (prefers-reduced-motion: reduce) {

    .btn-cta,
    .btn-cta-ghost {
        transition: none;
    }

    .btn-cta:hover {
        transform: none;
    }
}