/* 
----------------------------------------------------------------
KSP QR Apps – modal.css  (CodeHeader v3)
Version: 1.1.6  (patch from 1.1.5)
Drop-in replacement: YES (แทนที่ไฟล์เดิมได้ทันที)
What changed:
  - ลดขนาดรวม ~30% โดยตั้ง --card-width = 200px
  - ยกเลิก .modal-card wrapper (ไม่ให้ซ้อนการ์ด)
  - ใส่เงา/มุมโค้งให้รูปโดยตรงที่ .modal-card-img
  - ลด padding โมดัลเล็กน้อยให้ขอบขาวแคบลง
----------------------------------------------------------------
*/

/* Controls: ปรับแค่ตัวนี้ก็คุมขนาดทั้งหมดได้ */
:root{
  --card-width: 200px;         /* เดิม 280px → ลด ~30% */
  --modal-padding: 12px;       /* เดิม 16px */
  --modal-radius: 14px;
  --btn-height: 40px;          /* เดิม 44px */
}

/* Overlay */
.modal{
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container */
.modal-content{
  position: relative;
  background: #fff;
  border-radius: var(--modal-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  width: auto;
  max-width: calc(var(--card-width) + (var(--modal-padding) * 2));
  padding: var(--modal-padding);
}

/* Close */
.close{ position:absolute; right:12px; top:10px; font-size:22px; color:#999; cursor:pointer; }

/* Preview area = ความกว้างการ์ด */
#modal-card-preview{
  width: var(--card-width);
  margin: 4px auto 10px;
}

/* ภาพการ์ด: เงา+มุมโค้ง ให้ดูเป็นการ์ดเดียว */
.modal-card-img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:12px;
  background:#fff;
  /* ใช้ drop-shadow กับรูปโดยตรง แทน wrapper */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* Actions */
.modal-actions{
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.modal-actions .btn-primary,
.modal-actions .btn-secondary{
  width:100%;
  max-width: var(--card-width);   /* ปุ่มกว้างเท่าการ์ด */
  height: var(--btn-height);
  border-radius: 10px;
}

/* Small screens */
@media (max-width: 360px){
  .modal-content{ max-width:92vw; padding:10px 12px; }
  #modal-card-preview{ width: min(var(--card-width), 88vw); }
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary{ max-width: min(var(--card-width), 88vw); }
}