/* ─────────────────────────────────────────────────────────────────────────────
   screen-price.css — Price / Products Screen Styles
───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/NotoSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/NotoSans-Italic.ttf') format('truetype');
}

#screen-price {
  background: var(--scaffold);
}

#screen-price .price-body {
  font-family: 'NotoSans', sans-serif;
  flex: 1;
  display: flex;
  overflow: hidden;
}



/* ── Two-column Layout ────────────────────────────────────────────────────────── */
.price-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.price-form-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 24px;
  background: var(--surface);
}

.price-list-inner {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

/* ── Products Header ──────────────────────────────────────────────────────────── */
.products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* ── Product Row ──────────────────────────────────────────────────────────────── */
.product-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: border-color .13s, background .13s;
}

.product-row:hover {
  border-color: rgba(45, 106, 79, .25);
  background: #F4FAF7;
}

.prod-icon {
  width: 36px;
  height: 36px;
  background: var(--brand-surf);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.prod-info {
  flex: 1;
  min-width: 0;
}

.prod-info .prod-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-info .prod-sub {
  font-size: 12px;
  color: var(--text-mid);
  margin-top: 2px;
}

/* Desktop/tablet: no constraints — show the full amount always */
.prod-amount {
   font-family: 'NotoSans', 'Figtree', sans-serif; /* ← add this */
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  flex-shrink: 0;
}

.prod-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ── Total Row ────────────────────────────────────────────────────────────────── */
.total-row {
  background: var(--brand);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 20px;
}

.total-row span {
  color: #fff;
}

.total-row .total-label {
  font-size: 15px;
  font-weight: 500;
}

.total-row .total-amount {
  font-family: 'NotoSans', 'Figtree', sans-serif; /* ← add this */
  font-size: 18px;
  font-weight: 700;
}

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .price-form-panel {
    display: none;
  }

  .price-list-inner {
    padding: 14px 16px;
  }

  /* Mobile only: cap the amount width and shrink the font so it never
     overlaps the product name. prod-info keeps flex:1 so the name
     always gets remaining space first. */
  .prod-amount {
      font-family: 'NotoSans', 'Figtree', sans-serif; /* ← add this */
    max-width: 28vw;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}