/* ═══════════════════════════════════════════════════════════════════════════
   cookie-agreement.css — การ์ดขอความยินยอมคุกกี้ (ใช้คู่กับ require/cookie-agreement.php)

   การ์ดลอยพื้นขาว มุมมน เงานุ่ม วางกลางล่างจอ ไม่เต็มความกว้าง
   ยกมาจาก cookie-agreement.inc.php ของเว็บเดิมแบบตรงตัว
═══════════════════════════════════════════════════════════════════════════ */

.card-agreement {
    --agreement-bg: #ffffff;
    --agreement-title: #1a1a1a;
    --agreement-text: #555555;
    --agreement-link: #ff6500;
    --agreement-accent: #ff6701;
    --agreement-accent-soft: #fff1e6;
    --agreement-max-width: 1000px;

    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1035;
    /* ต้องสูงกว่า navbar ของ bootstrap (.fixed-top = 1030) แต่ต่ำกว่า modal (1050) */
    display: none;
    /* JS เปิดให้เองเมื่อยังไม่เคยกดยอมรับ — ตั้ง none ไว้ก่อนกันการ์ดกระพริบตอนโหลด */
    width: calc(100% - 40px);
    max-width: var(--agreement-max-width);
    border-radius: 14px;
    background-color: var(--agreement-bg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);

    .wrapper-agreement {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        padding: 22px 26px;

        .icon-agreement {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 44px;
            background-color: var(--agreement-accent-soft);
            color: var(--agreement-accent);
        }

        .body-agreement {

            .title-agreement {
                margin: 0 0 6px;
                color: var(--agreement-title);
                font-size: 17px;
                font-weight: 600;
                line-height: 1.4;
            }

            p {
                margin: 0;
                color: var(--agreement-text);
                font-size: 15px;
                font-weight: 400;
                line-height: 1.55;
            }

            .link-agreement {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                margin-top: 10px;

                .link-line {
                    color: #cccccc;
                    font-size: 14px;
                    line-height: 1;
                }

                a {
                    color: var(--agreement-link);
                    font-size: 14px;
                    text-decoration: none;

                    &:hover,
                    &:focus {
                        color: var(--agreement-accent);
                    }
                }
            }
        }

        .action-agreement {

            .btn-accept {
                padding: 11px 34px;
                border: 0;
                border-radius: 8px;
                background-color: var(--agreement-accent);
                color: #ffffff;
                font-size: 15px;
                font-weight: 500;
                white-space: nowrap;
                cursor: pointer;
                transition: background-color .15s;

                &:hover,
                &:focus {
                    background-color: #d95700;
                    outline: none;
                }
            }
        }
    }

    @media only screen and (max-width: 768px) {
        & {
            bottom: 12px;
            width: calc(100% - 24px);

            .wrapper-agreement {
                grid-template-columns: auto 1fr;
                gap: 12px 14px;
                padding: 18px;

                .body-agreement {

                    .title-agreement {
                        font-size: 16px;
                    }

                    p {
                        font-size: 14px;
                    }
                }

                /* ปุ่มลงมาเต็มความกว้างใต้เนื้อหา — ขึ้นแถวใหม่โดยกินทั้ง 2 คอลัมน์ */
                .action-agreement {
                    grid-column: 1 / -1;

                    .btn-accept {
                        width: 100%;
                        padding: 12px 20px;
                    }
                }
            }
        }
    }
}