/* ===========================
   Inline panel dưới mỗi item
   =========================== */
.wcl-add-learner-cell { background:#fffbe6; }
.wcl_cart_item_name{
  background: #ddeac6 !important;
}
.wcl-inline-panel{
  border:1px solid #e6d48a;
  padding:12px;
  border-radius:6px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.wcl-inline-fields label{ margin-right:12px; display:inline-block; }
.wcl-inline-fields input{ min-width:220px; }
.wcl-inline-list{ flex:1 1 300px; }
.wcl-al-row{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.wcl-al-row span{ min-width:240px; display:inline-block; }

/* (giữ nếu nơi khác có dùng modal) */
#wcl-add-learner-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99999; }
#wcl-add-learner-modal .wcl-modal-body{ background:#fff; max-width:480px; margin:10vh auto; padding:20px; border-radius:8px; }
.wcl-add-learner{ margin:0 4px; }
#wcl_al_list .wcl-al-row{ display:flex; gap:8px; align-items:center; margin:6px 0; }
#wcl_al_list .wcl-al-row span{ display:inline-block; min-width:180px; }

/* Hàng learners nằm dưới mỗi item – full width, không phá layout bảng */
.wcl-learners-row .wcl-learners-cell{
  padding:6px 12px;
  border-top:1px solid #d6e4c6;
  background:#fffef8;
}

.wcl-learners-inline{
  padding:10px;
  border:1px solid #cfe4b2;
  background:#fffdf5;
  margin-top:8px;
}

/* Lưới các hàng learner trong box */
.wcl-li-rows{
  display:grid;
  grid-template-columns: 1.1fr 1.5fr 1.5fr auto 40px; /* cột cuối là nút × */
  gap:10px;
  align-items:center;
}
.wcl-li-row{ display:contents; }

.wcl-li-name,
.wcl-li-email,
.wcl-li-email2{
  width:100%;
  padding:10px 12px;
  border:1px solid #cfcfcf;
  border-radius:4px;
  font-size:15px;
}

.wcl-li-price{
  font-weight:700;
  font-size:16px;
  text-align:right;
  white-space:nowrap;
  padding:0 8px;
}

.wcl-li-remove,
.wcl-li-add,
.wcl-li-plus-inline{ /* .wcl-li-add giữ để tương thích nếu có dùng ở nơi khác */
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid #e0e0e0; border-radius:6px;
  background:#fff; cursor:pointer;
  font-size:28px; font-weight: 500; line-height:1; box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.wcl-li-remove{ color:#b00020; }
.wcl-li-remove:hover{ background:#ffe5e8; border-color:#f1a6b0; color:#b00020 !important; }

.wcl-li-hint{ grid-column:1 / -1; color:#777; font-size:12px; margin-top:16px; }

/* ===========================
   Cột ACTIONS: nút + và nút ×
   =========================== */
/* Nút + ở ACTIONS (thêm learner) */
.wcl-li-plus, .wcl-li-plus-inline{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-left:0px;
  border:1px solid #e0e0e0; border-radius:6px;
  background:#fff; cursor:pointer; vertical-align:middle;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  text-decoration:none;
  font-size:0; /* đề phòng theme set font khác */
  position:relative; color:#f28c00; font-weight:700;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.wcl-li-plus::before, .wcl-li-plus-inline::before{
  content:'+'; position:relative; font-size:20px; line-height:1; color:#f28c00; font-weight:700;
}
.wcl-li-plus:hover, .wcl-li-plus:focus, .wcl-li-plus-inline:hover,.wcl-li-plus-inline:focus{ background:#ffe6c2; border-color:#f9c27a; color: #fff; }
.wcl-li-plus:hover::before, .wcl-li-plus:focus::before, .wcl-li-plus-inline:hover::before, .wcl-li-plus-inline:focus::before{
  color: #fff;
}
/* Biến link "REMOVE" thành nút × nhưng giữ link gốc */
.wcl-li-remove-item-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-left:6px;
  border:1px solid #e0e0e0; border-radius:6px;
  background:#fff; cursor:pointer; vertical-align:middle;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  text-decoration:none; position:relative;
  color:transparent !important; font-size:0;
}
.wcl-li-remove-item-btn::before{
  content:'×';
  color:#b00020; font-size:20px; line-height:1; font-weight:700;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.wcl-li-remove-item-btn:hover{ background:#ffe5e8; border-color:#f1a6b0; }

/* ===========================
   Responsive
   =========================== */
@media (max-width:980px){
  .wcl-li-rows{ grid-template-columns:1fr; }
  .wcl-li-price{ text-align:left; padding:8px 0; }
}

/* Panel drop-in “Pay with card” như ảnh 1 */
#wcl-bt-dropin .braintree-dropin{ border:1px solid #e3e0d9; border-radius:6px; }
#wcl-bt-dropin .braintree-dropin__card-form{ padding:0; }

/* Braintree – shared look */
.wcl-bt-box{
  border:1px solid #e3e0d9; background:#fffdf5; border-radius:6px; padding:16px; margin-top:12px;
}
.wcl-bt-box__title{ font-weight:700; margin-bottom:12px; }
.wcl-bt-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(220px,1fr));
}
.wcl-bt-field label{ display:block; font-size:14px; color:#444; margin-bottom:6px; }
.wcl-bt-field input, .wcl-bt-field select{
  width:100%; padding:10px 12px; border:1px solid #cfcfcf; border-radius:4px; font-size:15px; background:#fff;
}
.wcl-bt-field--full{ grid-column:1 / -1; }
.wcl-bt-checkbox{ display:flex; align-items:center; gap:10px; user-select:none; }
.wcl-bt-error{ color:#b00020; background:#ffe5e8; border:1px solid #f1a6b0; border-radius:4px; padding:10px 12px; }

/* paytype radios */
.wcl-bt-paytype{ margin:8px 0 6px; }
.wcl-bt-paytype label{ margin-right:18px; }
@media (max-width: 980px){
  .wcl-bt-grid{ grid-template-columns: 1fr; }
}
.wcl--hidden{display:none !important;}

/* Trạng thái mặc định: ẩn */
#wcl-braintree-card,
#wcl-braintree-ach {
  display: none;
  opacity: 0;
  transition: opacity .18s ease;  /* ngắn để không giật */
  will-change: opacity;
}

/* Khi hiển thị */
#wcl-braintree-card.is-active,
#wcl-braintree-ach.is-active {
  opacity: 1;
}

/* panel đang hiển thị */
#wcl-braintree-card.is-active,
#wcl-braintree-ach.is-active { opacity: 1; }

/* panel ẩn */
#wcl-braintree-card[hidden],
#wcl-braintree-ach[hidden] { display:none !important; }
input.wcl-error-2{
  color: red !important;
  border-color: red !important;
}