/* Buzi Coupons — the coupon box (checkout, "Porosit me 1 Klik") and "Llogaria ime → Kuponat". */
.buzi-coupons,
.buzi-coupons-account {
  --bcp-accent: #ef3b35;
  --bcp-ok: #1a8f3c;
  --bcp-ok-bg: #f1faf3;
  --bcp-err: #b42318;
  --bcp-err-bg: #fef3f2;
  --bcp-info-bg: #f2f6fc;
  --bcp-info: #1d4f91;
  --bcp-line: #e4e7eb;
  --bcp-muted: #6b7280;
  --bcp-text: #1f2328;
  --bcp-soon: #b54708;
  --bcp-soon-bg: #fffaeb;
  color: var(--bcp-text);
  box-sizing: border-box;
}
.buzi-coupons *,
.buzi-coupons-account * { box-sizing: border-box; }

/* ---- the box ------------------------------------------------------------ */
.buzi-coupons {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--bcp-line);
  border-radius: 12px;
  background: #fff;
}
.buzi-coupons p { margin: 0; }
.buzi-coupons__title { font-weight: 700; font-size: 16px; margin-bottom: 8px !important; }
.buzi-coupons__row { display: flex; gap: 8px; }
.buzi-coupons .buzi-coupons__code,
.buzi-coupons .buzi-coupons__second-input,
.buzi-coupons .buzi-coupons__amount-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c9ced6;
  border-radius: 8px;
  font-size: 16px; /* no zoom on phones */
  background: #fff;
}
.buzi-coupons .buzi-coupons__code { text-transform: uppercase; letter-spacing: .04em; }
.buzi-coupons .buzi-coupons__code::placeholder { text-transform: none; letter-spacing: 0; }
.buzi-coupons .button.buzi-coupons__add,
.buzi-coupons .button.buzi-coupons__use,
.buzi-coupons .button.buzi-coupons__save {
  flex: 0 0 auto;
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--bcp-ok);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 44px;
  cursor: pointer;
}
.buzi-coupons .button:hover { filter: brightness(.95); }
.buzi-coupons.is-busy { opacity: .7; }
.buzi-coupons.is-busy .buzi-coupons__add::after { content: "…"; }

.buzi-coupons__second { margin-top: 10px; }
.buzi-coupons__second[hidden],
.buzi-coupons__amount[hidden] { display: none !important; }
.buzi-coupons__label { display: block; font-size: 14px; color: var(--bcp-muted); }
.buzi-coupons__label input { margin-top: 4px !important; }

.buzi-coupons__state:empty { display: none; }
.buzi-coupons__msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.buzi-coupons__msg span { flex: 1 1 auto; }
.buzi-coupons__msg--ok { background: var(--bcp-ok-bg); color: var(--bcp-ok); }
.buzi-coupons__msg--error { background: var(--bcp-err-bg); color: var(--bcp-err); font-weight: 600; }
.buzi-coupons__msg--info { background: var(--bcp-info-bg); color: var(--bcp-info); }
.buzi-coupons__close,
.buzi-coupons__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}
.buzi-coupons__close:hover,
.buzi-coupons__remove:hover { background: rgba(0, 0, 0, .07); }

.buzi-coupons__list { list-style: none; margin: 10px 0 0; padding: 0; }
.buzi-coupons__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 6px 0 0;
  padding: 8px 6px 8px 12px;
  border: 1px dashed var(--bcp-ok);
  border-radius: 8px;
  background: var(--bcp-ok-bg);
}
.buzi-coupons__chip { font-weight: 700; letter-spacing: .04em; }
.buzi-coupons__until { font-size: 14px; color: var(--bcp-muted); }
.buzi-coupons__minus { margin-left: auto; font-weight: 700; color: var(--bcp-ok); white-space: nowrap; }
.buzi-coupons__remove { color: var(--bcp-err); }
.buzi-coupons__note { margin-top: 8px !important; font-size: 14px; color: var(--bcp-muted); }

.buzi-coupons__wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bcp-line);
}
.buzi-coupons__wallet-title { flex: 1 1 auto; font-size: 15px; }
.buzi-coupons__using { flex: 1 1 100%; color: var(--bcp-ok); font-weight: 600; }
.buzi-coupons__links { display: flex; gap: 14px; }
.buzi-coupons__change,
.buzi-coupons__stop {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bcp-info);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.buzi-coupons__amount { display: flex; flex: 1 1 100%; gap: 8px; }

/* ---- My account → Kuponat ------------------------------------------------ */
.buzi-coupons-account__total { font-size: 18px; margin: 0 0 12px; }
.buzi-coupons-account__table { width: 100%; }
.buzi-coupons-account__table th,
.buzi-coupons-account__table td { padding: 10px 12px; text-align: left; }
.buzi-coupons-account__amount { font-weight: 700; }
.buzi-coupons-account__table tr.is-soon td { background: var(--bcp-soon-bg); color: var(--bcp-soon); }
.buzi-coupons-account__soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bcp-soon);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.buzi-coupons-account__note { color: var(--bcp-muted); }
.buzi-coupons-account__note.is-warning { color: var(--bcp-err); }

/* Web 2.4: on a phone each amount is one row — the amount left, its dates on the right — no sideways scroll */
@media (max-width: 600px) {
  .buzi-coupons-account .buzi-coupons-account__table,
  .buzi-coupons-account .buzi-coupons-account__table tbody,
  .buzi-coupons-account .buzi-coupons-account__table tfoot { display: block !important; width: 100% !important; border: 0 !important; }
  .buzi-coupons-account .buzi-coupons-account__table thead { display: none !important; }
  .buzi-coupons-account .buzi-coupons-account__table tbody tr {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #eef0f3;
    border-radius: 8px;
  }
  .buzi-coupons-account .buzi-coupons-account__table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px;
    text-align: right;
  }
  .buzi-coupons-account .buzi-coupons-account__table td[data-title]::before {
    content: attr(data-title) " ";
    display: inline !important;
    float: none !important;
    color: var(--bcp-muted);
    font-size: 14px;
    font-weight: 400;
  }
  .buzi-coupons-account .buzi-coupons-account__table td.buzi-coupons-account__amount {
    grid-row: 1 / span 2;
    font-size: 19px;
    text-align: left;
  }
  .buzi-coupons-account .buzi-coupons-account__table td.buzi-coupons-account__expires { grid-row: 1; grid-column: 2; font-weight: 600; }
  .buzi-coupons-account .buzi-coupons-account__table td.buzi-coupons-account__earned { grid-row: 2; grid-column: 2; }
  .buzi-coupons-account .buzi-coupons-account__table tr.is-soon { background: var(--bcp-soon-bg); }
  .buzi-coupons-account .buzi-coupons-account__table tr.is-soon td { background: none !important; }
  .buzi-coupons-account .buzi-coupons-account__soon {
    display: block;
    width: max-content;
    margin: 4px 0 0 auto;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }
  .buzi-coupons-account .buzi-coupons-account__table tfoot tr { display: block; padding: 12px 10px 0; }
  .buzi-coupons-account .buzi-coupons-account__table tfoot th { display: block; padding: 0 !important; border: 0 !important; font-size: 16px; text-align: left; }
  .buzi-coupons-account .buzi-coupons-account__table tfoot td { display: none !important; }
}