/* ตัวเลือกรูปแบบการรับเอกสารกับของแถมของคอร์ส
   ใช้ร่วมกันระหว่างการ์ดในหน้าตะกร้า (transfer/add_transfer.html)
   กับป๊อปอัพเพิ่มลงตะกร้าบนหน้าคอร์ส (courses/preview.html)
   จึงย้ายออกมาไว้ที่เดียว ไม่ต้องก๊อปสองชุดให้หลุดกันภายหลัง */

.document-type-block {
  /* ซ่อนไว้จนกว่าจะเลือกคอร์ส เพราะยังไม่รู้ว่ามีหนังสือไหมและราคาเท่าไหร่ */
  display: none;
  clear: both;
  border-top: 1px solid #f0a500;
  /* บนเป็น 0 เพราะแถวเลือกคอร์สมี margin ล่างของตัวเองแล้ว */
  margin: 0 24px 8px 24px;
  padding-top: 12px;
}

.document-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}

.document-type-option + .document-type-option {
  border-top: 1px solid #ececec;
}

.document-type-radio {
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  accent-color: #f0a500;
  flex: 0 0 auto;
}

.document-type-body {
  display: block;
  /* กินความกว้างที่เหลือของ label กล่องคูปองด้านในจะได้ยาวเต็มการ์ด ไม่หดตามข้อความ */
  flex: 1 1 auto;
  min-width: 0;
}

.document-type-title {
  display: block;
  font-size: 15pt;
  color: #333333;
}

.document-type-option.is-selected .document-type-title {
  color: #f0a500;
}

.document-type-price {
  display: block;
  margin-top: 6px;
  font-size: 12pt;
  color: #f0a500;
}

.document-type-price-old {
  display: none;
  margin-right: 8px;
  text-decoration: line-through;
  color: #999999;
}

.document-type-price-old .document-type-amount-old {
  color: #999999;
}

/* เฉพาะตัวเลข คำว่า "ราคา" กับ "บาท" ยังเป็นสีเดิม */
.document-type-price.is-ebook .document-type-amount {
  color: #000000;
}

.document-type-price.is-book .document-type-amount {
  color: #bb171d;
}

.document-type-coupon {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f4f4f4;
  border-radius: 4px;
  font-size: 11pt;
  color: #000000;
}

/* ป้าย FREE ในกล่องคูปองกับป้ายหน้าของแถม ต้องหน้าตาเดียวกัน (#612)
   สั่งตัวหนาเองทั้งคู่ เดิมป้ายในกล่องคูปองหนาเพราะอยู่ใน <label> ที่ webflow.css ตั้ง
   font-weight: bold ไว้ทั้งเว็บ ส่วนป้ายของแถมอยู่ใน <div> จึงบางกว่า */
.document-type-coupon-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  background-color: #d0021b;
  border-radius: 3px;
  color: #ffffff;
  font-size: 9pt;
  font-weight: bold;
}

.document-type-coupon-underline {
  text-decoration: underline;
  color: #000000;
}

.document-type-coupon-sub {
  display: block;
  margin-top: 2px;
  color: #d0021b;
}

/* ของแถมของคอร์ส เรียงต่อจากตัวเลือกรับเอกสาร คั่นด้วยเส้นแบบเดียวกัน */
.freebie-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #ececec;
}

.freebie-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}

.freebie-image-placeholder {
  background-color: #f0f0f0;
}

.freebie-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background-color: #d0021b;
  color: #ffffff;
  font-size: 9pt;
  /* ให้ตรงกับ .document-type-coupon-badge ดูคอมเมนต์ข้างบน */
  font-weight: bold;
  flex: 0 0 auto;
}

.freebie-name {
  font-size: 12pt;
  color: #333333;
}