/* ====== FIX PACK: Style C for Membership Pro (exact like mock) ====== */
#osm-plans-list-default {
  --mpc-bg1: #f8c6d3;     /* pink */
  --mpc-bg2: #cfe2ff;     /* pale blue */
  --mpc-blue: #1662f3;    /* primary blue */
  --mpc-text: #1a1d2b;
  --mpc-card: #ffffff;
  --mpc-radius: 18px;
  --mpc-shadow: 0 10px 28px rgba(20,30,80,.12);
}

/* การ์ดแผน */
#osm-plans-list-default .osm-item-wrapper{
  border:0;
  border-radius: var(--mpc-radius);
  background: linear-gradient(110deg,var(--mpc-bg1) 0%,var(--mpc-bg2) 100%);
  box-shadow: var(--mpc-shadow);
  padding: 28px;
  margin: 18px 0 28px;
  color: var(--mpc-text);
}

/* เอาแถบหัวเทาๆ ออก */
#osm-plans-list-default .osm-item-heading-box{
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 6px !important;
}

/* หัวข้อ */
#osm-plans-list-default .osm-item-title a{
  display:block;
  margin:0 0 14px;
  font-size: clamp(26px,3vw,42px);
  line-height:1.1;
  color: var(--mpc-blue);
  font-weight:800;
  text-decoration:none;
}

/* คอลัมน์ซ้าย */
#osm-plans-list-default .osm-description-details img.osm-thumb-left{
  /*width:64px; height:64px;*/ object-fit:cover;
  border-radius:12px; margin:4px 16px 12px 0; border:0;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
#osm-plans-list-default .osm-description-details ul{
  margin:100px 0 18px; padding-left:22px;
}
#osm-plans-list-default .osm-description-details li.plan-feature{
  margin:8px 0; font-size: clamp(15px,1.1vw,18px); color:#2d2f3a;
}
#osm-plans-list-default .osm-description-details li.plan-feature::marker{
  color: var(--mpc-blue);
}

/* คอลัมน์ขวา = กล่องราคา
   — ซ่อนคอลัมน์ label ของตารางเดิม แล้วจัดสไตล์ตามภาพ */
#osm-plans-list-default .col-md-5 table{
  width:100%;
  background: var(--mpc-card);
  border-radius:16px;
  border:0;
  box-shadow: inset 0 0 0 1px rgba(22,98,243,.10);
  padding: 18px 22px;
  display:block;                 /* ให้ดูเป็นกล่อง */
}

/* ซ่อนส่วนที่ไม่จำเป็นของ bootstrap table */
#osm-plans-list-default .col-md-5 table thead,
#osm-plans-list-default .col-md-5 table tfoot { display:none !important; }
#osm-plans-list-default .col-md-5 table tbody,
#osm-plans-list-default .col-md-5 table tr,
#osm-plans-list-default .col-md-5 table td{
  display:block; border:0 !important; background:transparent !important; padding:0;
}

/* ซ่อน "คอลัมน์ label" ดั้งเดิม (Duration/Price ที่อยู่คอลัมน์แรก) */
#osm-plans-list-default .col-md-5 table tbody tr td:first-child{
  display:none !important;
}

/* แถวที่ 1 (ค่า Duration จริงอยู่ในคอลัมน์หลัง) */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child{
  font-weight:600; color:#111827; font-size:16px; margin:0 0 10px;
}
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::before{
  content:"Duration: "; font-weight:600; color:#111827; text-align: center;
}

/* เส้นคั่น */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::after{
  content:""; display:block; height:1px; background:rgba(17,24,39,.12); margin:10px 0 14px;
}

/* แถวสุดท้าย (Price) – แสดง label + ราคาใหญ่ ตามภาพ */
#osm-plans-list-default .col-md-5 table tbody tr:last-child td:last-child{
  color: var(--mpc-blue);
}
#osm-plans-list-default .col-md-5 table tbody tr:last-child td:last-child::before{
  content:"Price:"; display:block; font-size:20px; font-weight:800; margin-bottom:4px;
}
#osm-plans-list-default .col-md-5 table tbody tr:last-child td:last-child{
  font-size: clamp(36px,5vw,56px); font-weight:900; line-height:1;
}

/* ปุ่ม */
#osm-plans-list-default .osm-taskbar ul{
  display:flex; gap:12px; margin:14px 0 0; padding:0; list-style:none;
}
#osm-plans-list-default .osm-taskbar a.btn.btn-primary{
  background: var(--mpc-blue);
  color:#fff !important; border-radius:12px; padding:10px 18px;
  font-weight:700; border:none; box-shadow:0 6px 16px rgba(22,98,243,.25);
}
#osm-plans-list-default .osm-taskbar a.btn.btn-secondary{
  background:#fff; color:var(--mpc-blue) !important;
  border:2px solid rgba(22,98,243,.25); border-radius:12px; padding:9px 16px; font-weight:700;
}

/* Hover เล็กน้อย */
#osm-plans-list-default .osm-item-wrapper{ transition: transform .25s ease, box-shadow .25s ease; }
#osm-plans-list-default .osm-item-wrapper:hover{ transform: translateY(-2px); box-shadow:0 14px 32px rgba(20,30,80,.16); }

/* Responsive */
@media (max-width: 860px){
  #osm-plans-list-default .row{ display:block; }
  #osm-plans-list-default .osm-taskbar ul{ margin-top:18px; }
}


/* ===== POLISH PATCH: Style C (exact like mock) ===== */

/* 1) ลบแถบเทาในช่อง Duration (มักมาจาก Bootstrap Table) */
#osm-plans-list-default .col-md-5 table * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 2) จัดกล่องราคา + ใส่เส้นคั่นใต้ Duration */
#osm-plans-list-default .col-md-5 table {
  max-width: 430px;      /* กันลากยาวเกิน */
  margin-left: auto;     /* ชิดขวาในแถว */
}

#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child{
  font-weight: 600; color: #111827; font-size: 16px; margin: 0 0 12px;
}
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::before{
  content: "Duration: "; font-weight: 600; color: #111827;
}
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::after{
  content: ""; display: block; height: 1px;
  background: rgba(17,24,39,.14); margin: 12px 0 14px;
  border-radius: 1px;
}

/* 3) ปรับราคาให้เด่น และ label “Price:” หนักขึ้น */
#osm-plans-list-default .col-md-5 table tbody tr:last-child td:last-child::before{
  content: "Price:"; display: block; font-size: 22px; font-weight: 800;
  color: var(--mpc-blue); margin-bottom: 6px;
}
#osm-plans-list-default .col-md-5 table tbody tr:last-child td:last-child{
  font-size: clamp(40px, 5.5vw, 58px);
  font-weight: 900; line-height: 1; color: var(--mpc-blue);
}

/* 4) ปรับหัวข้อ + รายการให้บาลานซ์ขึ้นนิด */
#osm-plans-list-default .osm-item-title a{
  letter-spacing: .2px; margin-bottom: 12px;
}
#osm-plans-list-default .osm-description-details li.plan-feature{
  margin: 10px 0;  /* ระยะระหว่างบรรทัดอ่านง่ายขึ้น */
}

/* 5) ปุ่ม – ระยะ + hover */
#osm-plans-list-default .osm-taskbar ul{ margin-top: 18px; }
#osm-plans-list-default .osm-taskbar a.btn.btn-primary:hover{
  filter: brightness(1.05);
}
#osm-plans-list-default .osm-taskbar a.btn.btn-secondary:hover{
  border-color: rgba(22,98,243,.35);
}

/* 6) Hover การ์ด (ยกขึ้นนิดนึง) */
#osm-plans-list-default .osm-item-wrapper{
  transition: transform .25s ease, box-shadow .25s ease;
}
#osm-plans-list-default .osm-item-wrapper:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20,30,80,.16);
}

/* 7) Mobile: จัดให้กล่องราคาลงมาข้างล่างและกึ่งกลาง */
@media (max-width: 860px){
  #osm-plans-list-default .col-md-5 table{ margin: 10px auto 0; }
  #osm-plans-list-default .osm-taskbar ul{ justify-content: flex-start; }
}

/* 1) Glass effect เบาๆ ให้กล่องราคา */
#osm-plans-list-default .col-md-5 table{
  backdrop-filter: saturate(1.2) blur(6px);
}

/* 2) ทำหลายแพลนเป็นกริดสวยๆ (ถ้ามีมากกว่า 1 แผน) */
#osm-plans-list-default .osm-container .row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap:26px;
}

/* 3) Dark mode อัตโนมัติ (ถ้าอยากรองรับ) */
@media (prefers-color-scheme: dark){
  #osm-plans-list-default{
    --mpc-bg1:#c48aa1; --mpc-bg2:#99b8ff; --mpc-card:#0f1220; --mpc-text:#e8ebff;
  }
}

/* 4) เคารพ motion reduce */
@media (prefers-reduced-motion: reduce){
  #osm-plans-list-default .osm-item-wrapper{ transition:none; }
}

/* Calendar icon in front of Duration */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child{
  position: relative;
  padding-left: 28px;                 /* เผื่อที่ให้ไอคอน */
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 4px 2px;       /* (ซ้าย, บน) ปรับได้ตามชอบ */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<rect x='3' y='4' width='18' height='18' rx='3' ry='3' fill='none' stroke='%231662f3' stroke-width='2'/>\
<line x1='16' y1='2' x2='16' y2='6' stroke='%231662f3' stroke-width='2'/>\
<line x1='8' y1='2' x2='8' y2='6' stroke='%231662f3' stroke-width='2'/>\
<line x1='3' y1='10' x2='21' y2='10' stroke='%231662f3' stroke-width='2'/>\
<rect x='7' y='14' width='3' height='3' fill='%231662f3'/>\
<rect x='12' y='14' width='3' height='3' fill='%231662f3'/>\
</svg>");
}
/* label "Duration:" ที่เราใส่ด้วย ::before ให้คงไว้เหมือนเดิมได้เลย */

/* === Calendar icon + 'Duration:' label by pseudo-element === */

/* ทำให้เซลล์ Duration เป็น flex เพื่อเรียง [ไอคอน+label] แล้วตามด้วยค่า "30 Days" */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* แทนที่ ::before เดิม ให้เป็นไอคอน+label ในตัวเดียวกัน */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::before{
  content: "Duration:";                 /* ใส่ label ตรงนี้ */
  display: inline-block;
  font-weight: 600;
  color: #111827;
  padding-left: 24px;                    /* เผื่อที่ด้านซ้ายสำหรับไอคอน */
  line-height: 1.2;

  /* ไอคอนปฏิทิน (SVG data-URI) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<rect x='3' y='4' width='18' height='18' rx='3' ry='3' fill='none' stroke='%231662f3' stroke-width='2'/>\
<line x1='16' y1='2' x2='16' y2='6' stroke='%231662f3' stroke-width='2'/>\
<line x1='8' y1='2' x2='8' y2='6' stroke='%231662f3' stroke-width='2'/>\
<line x1='3' y1='10' x2='21' y2='10' stroke='%231662f3' stroke-width='2'/>\
<rect x='7' y='14' width='3' height='3' fill='%231662f3'/>\
<rect x='12' y='14' width='3' height='3' fill='%231662f3'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 0 50%;
}

/* เส้นคั่นให้ลงบรรทัดถัดไปแม้เซลล์เป็น flex */
#osm-plans-list-default .col-md-5 table tbody tr:first-child td:last-child::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(17,24,39,.14);
  margin: 12px 0 14px;
  flex-basis: 100%;   /* บังคับไปขึ้นบรรทัดใหม่ */
  order: 2;
}