/* Odstąpienie od umowy — front */

/* Wszystkie elementy modułu przejmują krój pisma z motywu sklepu.
   Rozmiary podajemy w em, żeby skalowały się razem z otoczeniem. */
[class^="ew-"],
[class*=" ew-"] {
  font-family: inherit;
}

.ew-form-wrapper { margin-bottom: 2rem; }

.ew-section-title { margin: 1.75em 0 .75em; }

.ew-alert { margin-bottom: 1.25rem; }

.ew-text { margin-bottom: 1rem; }

.ew-products { width: 100%; }
.ew-products th { vertical-align: middle; }
.ew-products td { vertical-align: middle; }

.ew-product { display: flex; align-items: flex-start; gap: .75rem; }
.ew-product-image { width: 64px; height: auto; flex: 0 0 auto; border-radius: 4px; }
.ew-product-info { display: flex; flex-direction: column; gap: .25rem; }
.ew-product-name { font-weight: 600; }
.ew-product-ref { font-size: .85em; opacity: .7; }

.ew-product-row--excluded { opacity: .65; }

.ew-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 3px;
  font-size: .75em;
  font-weight: 600;
  color: #fff;
  width: fit-content;
}
.ew-badge--full { background: #e74c3c; }
.ew-badge--partial { background: #f39c12; }
.ew-badge--excluded { background: #7f8c8d; }

.ew-exclusion-msg { font-size: .85em; opacity: .8; }

.ew-reason { margin-top: .35rem; display: flex; align-items: center; gap: .5rem; }
.ew-reason label { margin: 0; font-weight: 600; }

.ew-qty-select { max-width: 90px; margin: 0 auto; }
.ew-qty-none { opacity: .5; }

.ew-comment { width: 100%; }

.ew-submit-wrapper { margin-top: 1.5rem; text-align: center; }

/* Przyciski sterowane zmiennymi z konfiguracji modułu */
.ew-btn {
  color: var(--ew-btn-color, #fff);
  background-color: var(--ew-btn-bg, #24B9D7);
  border: 1px solid var(--ew-btn-border, #24B9D7);
}
.ew-btn:hover, .ew-btn:focus {
  color: var(--ew-btn-color-hover, #fff);
  background-color: var(--ew-btn-bg-hover, #20a3bd);
  border-color: var(--ew-btn-border-hover, #20a3bd);
}

.ew-btn-submit {
  color: var(--ew-submit-color, #fff);
  background-color: var(--ew-submit-bg, #2ecc71);
  border: 1px solid var(--ew-submit-border, #2ecc71);
  padding: .65rem 1.5rem;
}
.ew-btn-submit:hover, .ew-btn-submit:focus {
  color: var(--ew-submit-color-hover, #fff);
  background-color: var(--ew-submit-bg-hover, #27ae60);
  border-color: var(--ew-submit-border-hover, #27ae60);
}

.ew-history-btn { margin-top: .25rem; display: inline-block; }

@media (max-width: 767px) {
  .ew-products thead { display: none; }
  .ew-products tbody tr { display: block; border-bottom: 1px solid rgba(0,0,0,.1); padding: .75rem 0; }
  .ew-products tbody td { display: flex; justify-content: space-between; border: 0; padding: .25rem 0; }
  .ew-products tbody td.ew-col-product { display: block; }
  .ew-products tbody td[data-label]::before { content: attr(data-label); font-weight: 600; opacity: .7; }
  .ew-qty-select { margin: 0; }
}

/* Lista zamówień i zgłoszeń ---------------------------------------------- */

.ew-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ew-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ew-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  background: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ew-card-ref { font-weight: 700; }
.ew-card-total { font-weight: 600; }

.ew-card-body { padding: 1rem; flex: 1 1 auto; }
.ew-card-foot { padding: 0 1rem 1rem; }
.ew-card-foot .ew-btn { width: 100%; }

.ew-card-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
}

.ew-card-label { opacity: .7; }
.ew-days-left { opacity: .7; font-size: .9em; }

.ew-history-table td, .ew-history-table th { vertical-align: middle; }

.ew-status {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 3px;
  color: #fff;
  font-size: .8em;
  font-weight: 600;
}
.ew-status--muted { background: #95a5a6; }

.ew-link { text-decoration: underline; }

/* Formularz gościa -------------------------------------------------------- */

.ew-guest { max-width: 520px; }
.ew-guest-intro { margin-bottom: 1.25rem; }
.ew-guest-form .form-group { margin-bottom: 1rem; }
.ew-guest-login { margin-top: 1rem; font-size: .9em; }

/* Potwierdzenie i szczegóły ---------------------------------------------- */

.ew-success { font-size: 1.05em; }
.ew-confirmation-ref { margin: 1rem 0; }

.ew-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.ew-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  margin-bottom: 1rem;
}

.ew-detail-message {
  padding: 1rem;
  background: rgba(0, 0, 0, .03);
  border-radius: 4px;
}

.ew-timeline { list-style: none; padding: 0; margin: 0; }

.ew-timeline-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.ew-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.ew-timeline-date { opacity: .7; font-size: .9em; min-width: 150px; }
.ew-timeline-status { font-weight: 600; }

@media (max-width: 767px) {
  .ew-history-table thead { display: none; }
  .ew-history-table tbody tr { display: block; border-bottom: 1px solid rgba(0,0,0,.1); padding: .5rem 0; }
  .ew-history-table tbody td { display: flex; justify-content: space-between; border: 0; padding: .25rem 0; }
  .ew-history-table tbody td::before { content: attr(data-label); font-weight: 600; opacity: .7; }

  .ew-timeline-item { flex-wrap: wrap; }
  .ew-timeline-date { min-width: 0; }
}

.ew-order-confirmation {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
}
.ew-order-confirmation-text { margin-bottom: .5rem; opacity: .85; }