/* ===== FORM ĐĂNG KÝ CỘNG TÁC VIÊN - SELLAZ ===== */
/* =========================================
   SELLAZ x SLICEWP FORM FINAL
   Login / Register / Account
   ========================================= */

:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Spacing chung */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(.form-row, .slicewp-form-field, p) {
  margin: 0px;
}

/* Fix khoảng trắng do hidden input 
:is(
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) p:has(input[type="hidden"]) {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

:is(
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) p:has(input[type="hidden"]) :is(input[type="hidden"], br) {
  display: none !important;
}
*/
/* Ẩn hidden input */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) input[type="hidden"] {
  display: none !important;
}

/* Label */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #111111;
}

/* Input */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"]) {
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
  box-shadow: none;
  box-sizing: border-box;
  font-size: 15px;
  color: #111111;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Focus */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"]):focus {
  border-color: #1faa4a;
  outline: none;
  box-shadow: 0 0 0 4px rgba(31, 170, 74, 0.10);
}

/* Password có icon mắt 
:is(
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) input[type="password"] {
  padding-right: 44px;
}
*/
/*Quên mật khẩu */

.slicewp-lost-password {
    margin-top: 20px;
}
/* Nút submit */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(input[type="submit"], button[type="submit"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 20px;
  margin-top: 6px;
  background: #20b14b;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(32, 177, 75, 0.18);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(input[type="submit"], button[type="submit"]):hover {
  background: #17963d;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(32, 177, 75, 0.22);
}

/* Wrapper nút */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(.form-submit, p.form-submit) {
  width: 100%;
  margin: 0 0 14px;
}

/* Link */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) a {
  font-size: 15px;
  text-decoration: none;
  transition: 0.2s ease;
}

:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) a:hover {
  color: #1faa4a;
  text-decoration: underline;
}

/* Error / notice */
:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(.error, .woocommerce-error, .slicewp-form-notice) {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

:is(
  .slicewp-affiliate-register,
  .slicewp-register-affiliate-form,
  .slicewp-login-form,
  .slicewp-affiliate-login-form,
  form.slicewp-form
) :is(.error, .woocommerce-error) {
  background: #fff4f4;
  border: 1px solid #ef5350;
  color: #c62828;
}

/* Mobile */
@media (max-width: 767px) {
  :is(
    .slicewp-affiliate-register,
    .slicewp-register-affiliate-form,
    .slicewp-login-form,
    .slicewp-affiliate-login-form,
    form.slicewp-form
  ) label {
    font-size: 14px;
  }

  :is(
    .slicewp-affiliate-register,
    .slicewp-register-affiliate-form,
    .slicewp-login-form,
    .slicewp-affiliate-login-form,
    form.slicewp-form
  ) input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="tel"]),
  :is(
    .slicewp-affiliate-register,
    .slicewp-register-affiliate-form,
    .slicewp-login-form,
    .slicewp-affiliate-login-form,
    form.slicewp-form
  ) :is(input[type="submit"], button[type="submit"]) {
    height: 50px;
    min-height: 50px;
    font-size: 14px;
  }
}

/* =========================================
   SELLAZ x ACCOUNT SLICEWP - TAB HOA HỒNG, RÚT TIỀN
   ========================================= */
/* ===== SliceWP filter bar: fix lệch nút Áp dụng ===== */
.slicewp-list-table-filters {
    text-align: left !important;
}

.slicewp-list-table-filters form {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

/* Xóa khoảng trắng và style mặc định của các thẻ p do plugin sinh ra */
.slicewp-list-table-filters form > p,
.slicewp-list-table-filters form > div,
.slicewp-list-table-filters .slicewp-date-picker-wrapper {
    margin: 0 !important;
}

/* Thẻ p đang bọc nút submit */
.slicewp-list-table-filters form > p:last-child {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

/* Khối chọn thời gian */
.slicewp-list-table-filters .slicewp-date-picker-wrapper {
    display: flex !important;
    align-items: stretch !important;
}

/* Nút chọn khoảng thời gian */
.slicewp-list-table-filters .slicewp-date-picker-input {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Nút Áp dụng */
.slicewp-list-table-filters .slicewp-button-primary,
.slicewp-list-table-filters button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Fix trường hợp theme thêm style lạ cho button */
.slicewp-list-table-filters button[type="submit"]::before,
.slicewp-list-table-filters button[type="submit"]::after {
    display: none !important;
    content: none !important;
}

/* Mobile */
@media (max-width: 767px) {
    .slicewp-list-table-filters form {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .slicewp-list-table-filters form > p:last-child,
    .slicewp-list-table-filters .slicewp-date-picker-wrapper {
        width: 100% !important;
    }

    .slicewp-list-table-filters .slicewp-date-picker-input,
    .slicewp-list-table-filters .slicewp-button-primary,
    .slicewp-list-table-filters button[type="submit"] {
        width: 100% !important;
    }
}
/* =========================================
   SELLAZ x ACCOUNT SLICEWP - SCROLL-X TABLE DASHBOARD
   ========================================= */
/* =====================================
   SliceWP responsive table - dùng chung
   ===================================== */
@media (max-width: 768px) {

  /* 1) Khung tab được phép cuộn ngang */
  .slicewp-tab {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) Chỉ target bảng cấp 1 trong mỗi tab
        -> không phá table lồng bên trong details */
  .slicewp-tab > table.slicewp-list-table {
    width: max-content;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
  }

  /* 3) Header/cell của bảng chính */
  .slicewp-tab > table.slicewp-list-table > thead > tr > th,
  .slicewp-tab > table.slicewp-list-table > tbody > tr > td,
  .slicewp-tab > table.slicewp-list-table > tfoot > tr > td {
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* 4) Các cột thường gặp trong SliceWP */
  .slicewp-tab > table.slicewp-list-table .slicewp-column-id {
    width: 60px;
    min-width: 60px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-amount {
    width: 110px;
    min-width: 110px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-reference {
    width: 120px;
    min-width: 120px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-type {
    width: 90px;
    min-width: 90px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-date {
    width: 160px;
    min-width: 160px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-status {
    width: 130px;
    min-width: 130px;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-actions {
    width: 110px;
    min-width: 110px;
    text-align: right;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-landing_url,
  .slicewp-tab > table.slicewp-list-table .slicewp-column-referrer_url {
    width: 220px;
    min-width: 220px;
  }

  /* 5) Link/action ở cột cuối */
  .slicewp-tab > table.slicewp-list-table .slicewp-column-actions a,
  .slicewp-tab > table.slicewp-list-table .slicewp-toggle-item-details {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .slicewp-tab > table.slicewp-list-table .slicewp-column-actions svg,
  .slicewp-tab > table.slicewp-list-table .slicewp-toggle-item-details svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  /* 6) Dòng details cho phép xuống dòng */
  .slicewp-tab > table.slicewp-list-table > tbody > tr.slicewp-list-table-item-details-row > td {
    white-space: normal;
  }

  /* 7) Table lồng bên trong details:
        trả về layout bình thường, không ép fixed */
  .slicewp-tab > table.slicewp-list-table > tbody > tr.slicewp-list-table-item-details-row table.slicewp-list-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .slicewp-tab > table.slicewp-list-table > tbody > tr.slicewp-list-table-item-details-row table.slicewp-list-table th,
  .slicewp-tab > table.slicewp-list-table > tbody > tr.slicewp-list-table-item-details-row table.slicewp-list-table td {
    white-space: normal;
    word-break: break-word;
  }
   /* 8) Bảng con trong phần details */
  .slicewp-tab > table.slicewp-list-table
  > tbody > tr.slicewp-list-table-item-details-row
  table.slicewp-list-table th.slicewp-column-id,
  .slicewp-tab > table.slicewp-list-table
  > tbody > tr.slicewp-list-table-item-details-row
  table.slicewp-list-table td.slicewp-column-id {
    width: 110px !important;
    min-width: 110px !important;
    white-space: nowrap;
  }
}