/* --------- TWPS: основен контейнер начало --------- */
.twps-wrap{ margin: 18px 0; }
.twps-wrap *{ box-sizing: border-box; }

.twps-box{
  border: 1px solid #e6d6e9;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.twps-head{ margin-bottom: 10px; }
.twps-title{ font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.twps-sub{ font-size: 13px; line-height: 1.5; color: #555; }
/* --------- TWPS: основен контейнер край --------- */


/* --------- TWPS: контроли начало --------- */
.twps-controls{
  display: grid;
  grid-template-columns: max-content 90px 1fr; /* label | qty (тясно) | брояч */
  align-items: center;
  gap: 10px 12px;
  margin: 12px 0 10px;
}

.twps-label{
  font-weight: 800;
  white-space: nowrap;
}

.twps-qty{
  width: 90px;
  max-width: 90px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 2px solid #d8c2e4;   /* по-ясна рамка */
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.twps-qty:focus{
  outline: none;
  border-color: #4b007b;
  box-shadow: 0 0 0 3px rgba(75,0,123,0.10), 0 6px 14px rgba(0,0,0,0.06);
}

.twps-count{
  justify-self: end; /* вдясно в реда */
  color:#666;
  font-size: 13px;
  white-space: nowrap;
}
/* --------- TWPS: контроли край --------- */



/* --------- TWPS: редове начало --------- */
.twps-table{ display: grid; gap: 16px; margin: 10px 0 12px; }

.twps-row{
  border: 2px solid #d8c2e4;            /* по-ярка рамка */
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,0.10); /* по-ясна сянка */
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.twps-row:hover{
  border-color: #b58ad0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.twps-row__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 10px;
}

.twps-row__title{ font-weight: 900; }

.twps-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.twps-field label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  color:#555;
  margin-bottom: 6px;
}

.twps-field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.07);
}

.twps-field select:focus{
  outline: none;
  border-color: #4b007b;
  box-shadow: 0 0 0 3px rgba(75,0,123,0.10), 0 8px 18px rgba(0,0,0,0.07);
}

/* INVALID: червено очертаване + редът става по-ясен */
.twps-field select.twps-invalid{
  border-color: #c62828 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,0.12) !important;
}

.twps-row.is-invalid{
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,0.10), 0 14px 32px rgba(0,0,0,0.10);
}

/* Custom checkbox */
.twps-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 10px;
  font-size: 13px;
  user-select: none;
}

.twps-hidden{ display:none !important; }
/* --------- TWPS: редове край --------- */


/* --------- TWPS: copy button inline (след пакет 1) начало --------- */
.twps-copy-btn.twps-copy-btn--inline{
  width: 100%;
  margin-top: 10px;
  border: 1px dashed rgba(75,0,123,0.45);
  background: rgba(75,0,123,0.04);
  color: #4b007b;
  border-radius: 14px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  box-shadow: none;
}

.twps-copy-btn.twps-copy-btn--inline:hover{
  background: rgba(75,0,123,0.07);
}

.twps-copy-btn.twps-copy-btn--inline:active{
  transform: translateY(1px);
}
/* --------- TWPS: copy button inline (след пакет 1) край --------- */



/* --------- TWPS: бутон/съобщения начало --------- */
.twps-note{
  font-size: 13px;
  color:#555;
  margin: 10px 0 10px;
}

.twps-btn{
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 13px 14px;
  font-weight: 900;
  cursor: pointer;
  background: #4b007b;
  color: #fff;
}

.twps-btn:hover{ filter: brightness(1.05); }
.twps-btn:active{ transform: translateY(1px); }

.twps-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(75,0,123,0.14);
}

.twps-btn[disabled]{ opacity: .65; cursor: not-allowed; }
.twps-btn.is-loading{ opacity: .75; cursor: wait; }

.twps-msg{ margin-top: 10px; font-size: 13px; }
.twps-msg.is-ok{ color: #1a7f37; }
.twps-msg.is-err{ color: #c62828; }
/* --------- TWPS: бутон/съобщения край --------- */


/* --------- TWPS: qty lock (cart) начало --------- */
.twps-fixed-qty{
  display:inline-block;
  min-width: 34px;
  text-align:center;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
  font-weight: 700;
}
/* --------- TWPS: qty lock (cart) край --------- */


/* --------- TWPS: responsive начало --------- */
@media (max-width: 680px){
  .twps-grid{ grid-template-columns: 1fr; }

  /* Лейбъл + qty на ЕДИН ред; брояч под тях */
  .twps-controls{
    display: grid;
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      "label qty"
      "count count";
    gap: 10px 12px;
    align-items: center;
  }

  .twps-label{ grid-area: label; }
  .twps-qty{ grid-area: qty; width: 100%; max-width: none; }
  .twps-count{
    grid-area: count;
    justify-self: end;
  }
}
/* --------- TWPS: responsive край --------- */