/* Where to publish your discount code
   (websites/templates/websites/website_discount_code_publishing.html).
   Tokens from akoore.css only; the report frame and the post-its bring
   their own styles. */

.dcp-page .btn-compact { padding: 4px 10px; font-size: 13px; }

.dcp-notice { margin: 0 0 var(--space-3); }
.dcp-notice p { margin: 0 0 var(--space-2); }
.dcp-notice p:last-child { margin-bottom: 0; }
.dcp-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dcp-meter {
  display: inline-block; width: 160px; max-width: 100%; height: 6px;
  background: var(--color-divider); vertical-align: middle;
}
.dcp-meter > span { display: block; height: 100%; background: var(--color-accent); }

.dcp-lead { font-size: 17px; font-weight: 600; margin: 0; }
.dcp-empty { margin: var(--space-3) 0; }

/* — The code form — */
/* One row of controls of ONE height (40px: inputs, selects and the button
   alike), each under a small label, the button on the same baseline; the
   browser defaults gave every control its own height. */
.dcp-code-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3); border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.dcp-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }  /* the kit's label margin would sink the row */
.dcp-field > span {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.dcp-field > span em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.dcp-field[hidden] { display: none; }
.dcp-field input, .dcp-field select {
  box-sizing: border-box; height: 40px; min-width: 0; margin: 0;
  font: inherit; font-size: 16px; line-height: 1; color: var(--color-text);
  padding: 0 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.dcp-field input:focus, .dcp-field select:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.dcp-field input[name="discount_code"] { width: 12em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.dcp-field--value input { width: 6.5em; }
.dcp-field--date input { width: 11em; }
.dcp-code-form .btn-primary { box-sizing: border-box; height: 40px; padding: 0 var(--space-4); }
.dcp-saved { flex-basis: 100%; margin: 0; font-size: 13px; }

/* — The three offers — */
.dcp-offers {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
/* Each offer is the kit's recommendation item (.k-reco, section 19): the
   card, its tags, its title and its parts come from the kit; here only the
   column layout of a part (label, text, copy buttons). */
.dcp-offer { min-width: 0; }
.dcp-block.k-reco__part { display: flex; flex-direction: column; gap: var(--space-2); }
.dcp-block-label { margin: 0; }
.dcp-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.dcp-text--title { font-weight: 700; }
.dcp-fill {
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: 0 2px;
}
.dcp-fill--empty {
  font-weight: 400; font-style: italic;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.dcp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dcp-page .is-flashed { outline: 2px solid var(--color-accent); }

/* — The places — */
.dcp-places { margin-top: var(--space-3); }
.dcp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dcp-table { min-width: 620px; }
.dcp-table td:first-child { min-width: 14em; }
.dcp-table td { vertical-align: top; }
.dcp-place strong { display: block; }
.dcp-place-url { display: block; font-size: 13px; overflow-wrap: break-word; }
.dcp-evidence { margin: 4px 0 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.dcp-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; font-size: 12px; }
/* Open and the well-known tag on ONE row, whatever the column width. */
.dcp-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 6px; white-space: nowrap; }

/* — The tiers: verified, not verified, set aside — */
.dcp-tier-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2); font-size: 16px;
}
.dcp-tier-title:first-of-type { margin-top: 0; }
.dcp-tier-note { margin: 0 0 var(--space-2); font-size: 14px; }
.dcp-table--unverified td:last-child { min-width: 16em; }
.dcp-found { margin: 0; padding-left: 1.1em; font-size: 13px; }
.dcp-found li { margin: 0 0 3px; overflow-wrap: anywhere; }
.dcp-dropped { margin: var(--space-3) 0 0; font-size: 14px; }
.dcp-dropped summary { cursor: pointer; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.dcp-dropped-reasons { margin: var(--space-2) 0 0; padding-left: 1.1em; }
.dcp-dropped-list {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: var(--space-2) 0 0; padding: 0;
  list-style: none; font-size: 12px;
}

@media (max-width: 640px) {
  .dcp-code-form { flex-direction: column; align-items: stretch; }
  .dcp-field input[name="discount_code"], .dcp-field--value input, .dcp-field--date input { width: 100%; }
  .dcp-code-form .btn-primary { width: 100%; }
  .dcp-offers { grid-template-columns: 1fr; }
}

/* The verified places as Essential rows: Open and I published it side by side. */
.dcp-essential .dcp-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dcp-inline-form { display: inline; margin: 0; }