/* ===========================
   BASE
   =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Display font */
.font-display {
  font-family: "Playfair Display", serif;
}

/* Background gradient */
.invoice-gradient {
  background: radial-gradient(circle at top, rgba(40, 80, 140, 0.9), rgba(8, 15, 35, 0.98));
  min-height: 100vh;
}

/* ===========================
      CARD (GLASS)
      =========================== */
.card-glass {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

  /* SINGLE SOURCE OF ROUNDING */
  border-radius: 28px;
  overflow: hidden;
  /* clips all inner sections to rounded corners */
}

/* IMPORTANT:
      Do NOT let inner sections create their own rounding (causes seams). */
.card-glass .bg-white,
.card-glass .bg-slate-50,
.card-glass .total-highlight {
  border-radius: 0 !important;
}

/* Ensure the very last visible block inside the card also respects rounding via clipping */
.card-glass>* {
  margin: 0;
  /* avoid tiny gaps showing page background */
}

/* ===========================
      SMALL UI
      =========================== */
.email-phone-separator {
  font-size: 14px;
  color: #64748b;
  line-height: 1;
  margin: 0 2px;
}

/* ===========================
      INPUTS
      =========================== */
.invoice-input {
  width: 100%;
  max-width: 100%;
  display: block;

  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.25;
  background: #fff;
  outline: none;
}

.invoice-input:focus {
  border-color: #cbd5e1;
}

textarea.invoice-input {
  font-family: inherit;
  min-height: 72px;
}

.reason-textarea {
  resize: none;
  overflow: hidden;
  min-height: 42px;
  line-height: 1.4;
}

/* ===========================
      TABLE (Items)
      =========================== */
table th {
  padding: 10px 8px;
  font-weight: 600;
  color: #0f172a;
}

table td {
  padding: 10px 8px;
  color: #111827;
  vertical-align: middle;
}

#items-container input,
#items-container select {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 14px;
  background: #fff;
}

.auto-expand-input {
  min-width: 280px;
  width: 100%;
  white-space: nowrap;
}

#items-container select {
  cursor: pointer;
}

/* ===========================
      BUTTONS
      =========================== */
.btn-primary {
  background: linear-gradient(90deg, #ff4d6d, #ff7a59);
  box-shadow: 0 10px 18px rgba(255, 77, 109, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(255, 77, 109, 0.3);
}

.btn-secondary {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  transition: transform 0.12s ease;
}

.btn-secondary:hover {
  transform: translateY(-1px);
}

/* Small hint next to Additional Charges title */
.charges-hint {
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
  margin-left: 8px;
}

.tip-btn {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  background: white;
  cursor: pointer;
}

.tip-btn.active {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}

.no-tip-btn.active {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}

#tip-amount-display::before {
  content: "≈ ";
  font-weight: 400;
}


/* ===========================
      TOTALS (Screen)
      =========================== */
/* Flat start. No overlay. No top fade. No borders. No rounding. */
.total-highlight {
  background: linear-gradient(180deg, #0b2447, #0b3c6f);
  margin: 0 !important;
  padding: 24px;
  border: none !important;
  border-radius: 0 !important;
}

/* If any border line appears between white and blue, remove it */
.total-highlight,
.total-highlight * {
  outline: none;
}


/* ===========================
      PRINT HIDE (ONLY FOR PRINT)
      =========================== */
/* Do NOT hide on screen */
.no-print {
  display: block !important;
}

/* ===========================
      PRINT / PDF MODE
      =========================== */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html,
  body {
    zoom: 0.85;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  header {
    display: none !important;
  }

  .p-4,
  .md\:p-8 {
    padding: 0 !important;
  }

  .card-glass {
    background: white !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .email-phone-separator {
    color: #000 !important;
  }

  .no-print {
    display: none !important;
  }

  #add-item-btn,
  #clear-btn,
  #print-btn {
    display: none !important;
  }

  /* Receiver + Invoice details on same horizontal line in PDF */
  .invoice-meta-grid .grid {
    display: grid !important;
    align-items: start !important;
  }

  .invoice-meta-grid {
    display: grid !important;
    grid-template-columns: 55% 45% !important;
    column-gap: 24px !important;
    align-items: start !important;
  }

  .invoice-meta-grid h4 {
    margin-top: 0 !important;
  }

  .invoice-meta-grid textarea {
    min-height: auto !important;
  }

  #reason-input {
    display: none !important;
  }

  #reason-print {
    display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
  font-size: 14px;
  line-height: 1.4;
  }

  /* Make inputs plain text in PDF */
  input,
  textarea {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  table {
    table-layout: fixed;
    width: 100%;
  }

  .col-item { width: 35%; }
  .col-qty,
  .col-tax-rate { text-align: center; }

  .col-tax,
  .col-gross { text-align: right; }

  /* Hide editable inputs in Item column, show print-only spans */
  .print-source {
    display: none !important;
  }

  /* Show printable text */
  .print-target {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Allow wrapping ONLY in Item column */
  th.item-cell,
  td.item-cell {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Keep other columns tight */
  th:not(.item-cell),
  td:not(.item-cell) {
    white-space: nowrap !important;
  }

  th {
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }
  
  td {
    font-size: 12px !important;
  }

  /* Reduce padding so columns fit */
  th,
  td {
    padding: 6px 8px;
  }

  textarea {
    resize: none !important;
    overflow: hidden !important;
    min-height: auto !important;
  }
  .col-tax-percent,
  td.tax {
    text-align: center !important;
  }
  .col-tax-percent {
    width: 52px !important;
  }

  .col-tax-amount {
    width: 80px;
  }

  .col-gross {
    width: 90px;
  }

  select {
    border: none !important;
    background: transparent !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  select::-ms-expand {
    display: none !important;
  }

  .bg-slate-50 {
    background: transparent !important;
  }

  .rounded-xl,
  .rounded-3xl {
    border-radius: 0 !important;
  }

  /* Totals in PDF should look like invoice text */
  .total-highlight {
    background: transparent !important;
    color: #000 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .total-highlight * {
    color: #000 !important;
  }

  /* Keep Additional Charges fields in one row in PDF */
  #additional-charges-fields {
    font-weight: 600;
    display: grid !important;
    grid-template-columns: 58% 12% 30% !important;
    column-gap: 10px !important;
    align-items: end !important;
  }

  /* Hide elements with .print-hidden ONLY in print */
  .print-hidden {
    display: none !important;
  }

  .charges-hint {
    font-size: 10px !important;
    color: #6b7280 !important;
  }

  a[href]:after {
    content: "" !important;
  }

  #invoice-note,

  /* === Shared layout for Transfer & Tax sections === */
  .transfer-section,
  .tax-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* === Labels: same size + bold === */
  .transfer-section label,
  .tax-section label {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
  }

  /* === Content text: aligned + consistent === */
  #transfer-details,
  #sender-tax-info {
      font-size: 14.5px !important;
      line-height: 1.5 !important;
      font-weight: 500 !important;
  
    /* bold but readable */
    white-space: pre-wrap !important;
    overflow: visible !important;
  }


  /* Hide section if empty */
  .hide-if-empty-print {
    display: none !important;
  }

  /* Optional spacing before tax section */
  .tax-section {
    margin-top: 16mm;
  }

}