/* =====================================================
   ปุ่มเขียว — เมนูเด็ด.com (ใช้ร่วมกันทั้งหน้าบ้านและหลังบ้านสมาชิก)
   โหลดจาก Views/front/header.tpl.php และ Views/user/header.tpl.php
   ===================================================== */

/* ---------- ปุ่มเขียวหลัก: ไล่สีเขียวมะนาว → เขียวเข้ม ----------
   มีผลกับปุ่ม/ลิงก์ที่ใช้คลาส bg-primary ทั้งหน้าบ้านและหลังบ้าน (ไม่กระทบ section ที่ใช้เป็นพื้นหลัง)
   ไล่ไปทางเข้มเพื่อให้ตัวหนังสือขาวอ่านง่ายขึ้น (#80BB01 ล้วนได้ความต่างสีแค่ ~2.3:1)
   `html` นำหน้าเพื่อให้ชนะคลาส transition-* ของ Tailwind CDN */
html a.bg-primary,
html button.bg-primary {
    background-image: linear-gradient(135deg, #80BB01 0%, #4f9a00 55%, #2f7d00 100%);
    background-size: 170% 100%;
    background-position: 0% 50%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    transition:
        background-position 0.35s ease,
        box-shadow 0.25s ease,
        translate 0.25s ease,
        transform 0.3s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}
html a.bg-primary:hover,
html button.bg-primary:hover:not(:disabled) {
    background-position: 100% 50%; /* เลื่อนไปฝั่งเข้ม */
    box-shadow: 0 8px 18px -8px rgba(39, 110, 0, 0.6);
    translate: 0 -1px;
}
html a.bg-primary:active,
html button.bg-primary:active {
    translate: 0 0;
    box-shadow: none;
}

/* ปุ่มเล็กที่ซ้ำในการ์ด (ดูสูตร, ดูรีวิว, ใส่ตะกร้า): แบบอ่อน แล้วไล่สีตอนชี้
   — ปุ่มหลักจะได้เด่นกว่า และหน้าไม่รก (ตัวหนังสือเขียวบนพื้นอ่อน ~4.6:1) */
html .btn-soft {
    background-color: #eef6e0;
    background-image: linear-gradient(135deg, #80BB01 0%, #4f9a00 55%, #2f7d00 100%);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%; /* ซ่อนภาพไล่สีไว้ แล้วขยายเต็มปุ่มตอนชี้ (เติมจากซ้ายไปขวา) */
    color: #2f7d00;
    border: 1px solid rgba(128, 187, 1, 0.35);
    transition:
        background-size 0.3s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.25s ease;
}
html .btn-soft:hover,
html .btn-soft:focus-visible {
    background-size: 100% 100%;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px -8px rgba(39, 110, 0, 0.6);
}
/* สถานะ "ใส่ตะกร้าแล้ว" ที่ JS เติม bg-green-500 ชั่วคราว */
html .btn-soft.bg-green-500 {
    background-color: #22c55e;
    background-size: 0% 100%;
    color: #fff;
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    html a.bg-primary,
    html button.bg-primary,
    html .btn-soft {
        transition: none;
    }
    html a.bg-primary:hover,
    html button.bg-primary:hover {
        translate: none;
    }
}

/* เมนู sidebar หลังบ้านที่ active: ได้สีไล่เหมือนกัน แต่ไม่ยก/ไม่มีเงาตอนชี้ */
html a.menu-link.bg-primary:hover {
    translate: none;
    box-shadow: none;
}

/* ---------- หลังบ้านไรเดอร์: ปุ่มเขียวโทน emerald ----------
   เอฟเฟกต์เดียวกับปุ่มหลัก แต่ใช้โทน emerald ให้เข้ากับธีมไรเดอร์
   (โลโก้/อวาตาร์/การ์ดใช้ from-emerald-500 to-green-600)
   ไล่ไปถึง emerald-700 ให้ตัวหนังสือขาวอ่านง่าย (emerald-500 ล้วนได้ ~2.5:1)
   ขอบเขตเฉพาะ <body class="rider-app"> */
html .rider-app a.bg-emerald-500,
html .rider-app button.bg-emerald-500 {
    background-image: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
    background-size: 170% 100%;
    background-position: 0% 50%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    transition:
        background-position 0.35s ease,
        box-shadow 0.25s ease,
        translate 0.25s ease,
        transform 0.3s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}
html .rider-app a.bg-emerald-500:hover,
html .rider-app button.bg-emerald-500:hover:not(:disabled) {
    background-position: 100% 50%;
    box-shadow: 0 8px 18px -8px rgba(4, 120, 87, 0.6);
    translate: 0 -1px;
}
html .rider-app a.bg-emerald-500:active,
html .rider-app button.bg-emerald-500:active {
    translate: 0 0;
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    html .rider-app a.bg-emerald-500,
    html .rider-app button.bg-emerald-500 {
        transition: none;
    }
    html .rider-app a.bg-emerald-500:hover,
    html .rider-app button.bg-emerald-500:hover {
        translate: none;
    }
}