/* ============================================================
   RoadSafe — ประกาศการใช้คุกกี้ (คำขอพี่ 2026-09-16)

   เป็นแถบแจ้งให้ทราบ **ไม่ใช่กล่องบังหน้าจอ** โดยเจตนา
   ระบบนี้ใช้คุกกี้เฉพาะที่จำเป็นต่อการทำงาน (ยืนยันตัวตน + session) ไม่มีคุกกี้โฆษณาหรือ analytics
   การบังคับให้กดก่อนใช้งานจึงไม่ถูกต้อง เพราะผู้ใช้ไม่มีอะไรให้ปฏิเสธจริง ๆ

   ทำงานคู่กับ Assets/js/components/rs-cookie-notice.js ซึ่งเป็นตัวสร้าง markup
   ============================================================ */
.rs-cookie-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;                 /* เหนือแผนที่ Leaflet (สูงสุด 1000) และแถบ DEV MODE */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: .85rem 1.1rem;
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border, #c3ccdd);
  border-radius: var(--rs-radius-md, .875rem);
  box-shadow: 0 6px 24px rgba(20, 34, 77, .16);
}

/* ซ่อนไว้ก่อนจนกว่าสคริปต์จะตัดสินใจว่าต้องแสดงหรือไม่ — กันแถบกะพริบตอนโหลดหน้า */
.rs-cookie-notice[hidden] { display: none !important; }

.rs-cookie-notice-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--rs-accent, #2f6fc0);
  flex: 0 0 auto;
}

.rs-cookie-notice-text {
  flex: 1 1 22rem;
  min-width: 0;
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--rs-text-body, #3a466a);
  margin: 0;
}

.rs-cookie-notice-text a {
  color: var(--rs-accent, #2f6fc0);
  text-decoration: underline;
}

.rs-cookie-notice-actions {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.rs-cookie-notice-accept {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 500;
  font-size: .85rem;
  color: var(--rs-on-primary, #fff);
  background: var(--rs-primary, #16265a);
  border: none;
  border-radius: 999px;
  padding: .45rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
}
.rs-cookie-notice-accept:hover { background: var(--rs-primary-dark, #101c45); }
.rs-cookie-notice-accept:focus-visible {
  outline: 2px solid var(--rs-accent, #2f6fc0);
  outline-offset: 2px;
}

/* หมายเหตุ: ค่า bottom ข้างบนเป็นเพียงค่าตั้งต้นก่อนสคริปต์ทำงาน
   ตำแหน่งจริงคำนวณตอนรันใน rs-cookie-notice.js โดยวัดความสูงของแถบที่ยึดขอบล่าง
   (.rs-devbar และ .rs-mobile-nav) — ใช้ค่าคงที่ใน CSS ไม่ได้ เพราะแถบเหล่านั้น
   ตัดบรรทัดเพิ่มเองเมื่อจอแคบ และบางหน้ามีทั้งสองแถบซ้อนกัน */

@media (max-width: 576px) {
  .rs-cookie-notice {
    left: .5rem;
    right: .5rem;
    padding: .75rem .85rem;
  }
  /* จอแคบ: ปุ่มเต็มความกว้างหนึ่งบรรทัด กดง่ายกว่าปุ่มเล็กชิดขอบ */
  .rs-cookie-notice-actions { flex: 1 1 100%; }
  .rs-cookie-notice-accept { width: 100%; }
}