/* The sale form: products left, the ticket right; one column when narrow. */

@layer components {
  .sale-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2.5rem;
    align-items: start;

    @media (max-width: 860px) { grid-template-columns: minmax(0, 1fr); }
  }
  .qty-col { width: 11rem; white-space: nowrap; }
  tr.sold-out td { color: #a5a5a5; }

  /* Phones: each product is a card row: photo | name, what's left and price |
     quantity. */
  .sale-products {
    @media (max-width: 640px) {
      table, tbody { display: block; overflow: visible; }
      tr {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        grid-template-areas: "thumb name qty" "thumb price qty";
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.1rem;
        padding: 0.6rem 0.7rem 0.6rem 1.1rem;
        border-bottom: 1px solid var(--line);
        /* the business strip, on the row */
        box-shadow: inset 5px 0 0 var(--biz), inset 6.5px 0 0 var(--ink);

        &:last-child { border-bottom: 0; }
      }
      td, .business tbody tr td:first-child:not(.grip) {
        padding: 0;
        border: 0;
        width: auto;
        box-shadow: none;
      }
      .thumb-col { grid-area: thumb; }
      .name-col { grid-area: name; align-self: end; }
      .price-col {
        grid-area: price;
        align-self: start;
        text-align: left;
        font-weight: 700;
      }
      .qty-col { grid-area: qty; }
      .thumb { width: 3rem; height: 3rem; }
    }
  }

  .ticket {
    position: sticky;
    top: 1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-box);
    padding: 1.2rem 1.3rem;
    background: var(--paper);

    @media (max-width: 860px) { position: static; }
    @media (max-width: 640px) { padding: 1rem; }

    h2 { margin-top: 0; font: 400 1.5rem/1.2 var(--font-display); }
    input[type="submit"] {
      width: 100%;
      justify-content: center;
      font-size: 1.1rem;
      padding: 0.8rem;
      margin-top: 0.5rem;
    }
    fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
    legend { padding: 0; margin-bottom: 0.5rem; }
  }
  .ticket-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px dashed var(--ink);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;

    strong {
      font: 400 2.2rem/1 var(--font-display);
      font-variant-numeric: tabular-nums;
    }
  }
  /* Payments on 5 columns: the label takes 3, the amount 2. */
  .payment-field {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;

    label { grid-column: span 3; font-weight: 700; }
    input {
      grid-column: span 2;
      width: 100%;
      min-width: 0;
      padding-inline: 0.5rem;
      text-align: right;
    }
  }
  .remaining {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    margin: -0.25rem 0 1.25rem;

    strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
    &.due strong { color: var(--alert); }
    &.change strong { color: var(--ok); }
  }

  /* Quick cash, under "Efectivo": coins (cover what's left) and little
     greenback-style bills. */
  .cash-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin: -0.15rem 0 0.9rem;

    button {
      position: relative;
      height: 2.6rem;
      padding: 0;
      justify-content: center;
      border-radius: 6px;
      touch-action: manipulation;
      transition: transform 0.1s;

      &:hover { transform: translateY(-1px) rotate(-1deg); }
      &:active { transform: scale(0.96); }
    }
  }
  .bill {
    --bill-ink: #2f6b3a;
    border: 2px solid var(--bill-ink);
    color: var(--bill-ink);
    background:
      repeating-linear-gradient(
        45deg, transparent 0 4px, rgb(47 107 58 / 0.06) 4px 5px),
      linear-gradient(135deg, #d9efd0, #b9dfaa);
    box-shadow:
      inset 0 0 0 2px #eef8e9, inset 0 0 0 3px rgb(47 107 58 / 0.55);

    &:hover {
      background:
        repeating-linear-gradient(
          45deg, transparent 0 4px, rgb(47 107 58 / 0.06) 4px 5px),
        linear-gradient(135deg, #cfe9c4, #addb9c);
    }
    /* The value in the corners, like a real bill; the center oval is the
       "portrait". */
    &::before, &::after {
      content: attr(data-value);
      position: absolute;
      font-size: 0.55rem;
      font-weight: 800;
      line-height: 1;
    }
    &::before { top: 4px; left: 5px; }
    &::after { bottom: 4px; right: 5px; }
    span {
      font: 400 0.95rem/1 var(--font-display);
      padding: 0.2rem 0.5rem;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, #f2faee 55%, #cfe9c4 100%);
      border: 1px solid rgb(47 107 58 / 0.5);
    }
  }
  .coins {
    border: 2px solid #8a6a10;
    background: linear-gradient(135deg, #fff7dc, #fbe8a6);

    &:hover { background: linear-gradient(135deg, #fff2c8, #f8df8a); }
    svg {
      width: 2.4rem;
      height: auto;

      ellipse, circle { fill: #f4c542; stroke: #8a6a10; stroke-width: 1.4; }
      .rim { fill: none; stroke-width: 1; }
    }
  }
}