/* Load Montserrat from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

:root{
  --ims-bg: #f6f8fb;
  --ims-card: #ffffff;
  --ims-accent: #E1972F;
  --ims-accent-dark: #b37319;
  --ims-muted: #6b7280;
  --ims-border: #e6e9ef;
  --ims-radius: 10px;
  --ims-shadow: 0 6px 18px rgba(24, 39, 75, 0.06);
}

/* Container */
.ims-invoices-shortcode-wrap {
  font-family: 'Montserrat', "Helvetica Neue", Arial, sans-serif;
  background: var(--ims-bg);
  /* padding: 28px; */
  border-radius: var(--ims-radius);
  box-shadow: none;
  margin: 20px auto;
  max-width: 1200px;
  width: calc(100% - 40px);
  box-sizing: border-box;
}

/* Card look */
.ims-invoices-shortcode-wrap > .ims-card {
  background: var(--ims-card);
  border-radius: calc(var(--ims-radius) - 4px);
  box-shadow: var(--ims-shadow);
  overflow: hidden;
}

/* Table wrapper: allow horizontal scrolling on small screens */
.ims-invoices-shortcode-wrap .ims-invoices-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 920px; /* prefers full layout, scrolls if needed */
  background: var(--ims-card);
}

/* Thead: sticky header, bold, nice background */
.ims-invoices-shortcode-wrap thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  color: #111827;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ims-border);
  text-align: left;
  vertical-align: middle;
  letter-spacing: 0.2px;
}

/* Table body */
.ims-invoices-shortcode-wrap tbody tr {
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  border-bottom: 1px solid var(--ims-border);
  background: transparent;
}

.ims-invoices-shortcode-wrap tbody tr:hover {
  background: rgba(31, 119, 255, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(31,119,255,0.03);
}

/* Cells */
.ims-invoices-shortcode-wrap td {
  padding: 12px 18px;
  font-size: 14px;
  color: #111827;
  vertical-align: middle;
  border: none;
  white-space: nowrap;
}

/* Right aligned numeric columns */
.ims-invoices-shortcode-wrap .ims-col-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

/* Action column */
.ims-invoices-shortcode-wrap .ims-col-action {
  text-align: center;
}

/* Edit button */
.ims-invoices-shortcode-wrap .ims-edit-button {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ims-accent), var(--ims-accent-dark));
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(31,119,255,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  border: 0;
  cursor: pointer;
}

.ims-invoices-shortcode-wrap .ims-edit-button:hover,
.ims-invoices-shortcode-wrap .ims-edit-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(31,119,255,0.14);
  opacity: 0.98;
}

/* Invoice title link */
.ims-invoices-shortcode-wrap td a {
  color: #b37319;
  text-decoration: none;
  font-weight: 600;
}
.ims-invoices-shortcode-wrap td a:hover {
  text-decoration: underline;
}

/* Updated date column small */
.ims-invoices-shortcode-wrap td:last-child {
  color: var(--ims-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Make the wrapper horizontally scrollable on small viewports */
.ims-invoices-shortcode-wrap {
  overflow-x: auto;
}

/* Small screens tweaks */
@media (max-width: 900px) {
  .ims-invoices-shortcode-wrap {
    padding: 16px;
  }
  .ims-invoices-shortcode-wrap thead th {
    padding: 10px 12px;
    font-size: 12px;
  }
  .ims-invoices-shortcode-wrap td {
    padding: 10px 12px;
    font-size: 13px;
  }
  .ims-invoices-shortcode-wrap .ims-edit-button {
    padding: 7px 10px;
    font-size: 13px;
  }
  /* allow the min-width to be smaller on mobile */
  .ims-invoices-shortcode-wrap .ims-invoices-table { min-width: 720px; }
}

/* Very small screens: make buttons smaller and wrap numeric signs */
@media (max-width: 520px) {
  .ims-invoices-shortcode-wrap .ims-invoices-table { min-width: 620px; }
  .ims-invoices-shortcode-wrap td { padding: 8px 10px; font-size: 13px; }
  .ims-invoices-shortcode-wrap thead th { padding: 8px 10px; font-size: 12px; }
  .ims-invoices-shortcode-wrap .ims-edit-button { padding: 6px 8px; font-size: 12px; border-radius: 6px; }
}

/* Optional utility: subtle zebra effect (light) */
.ims-invoices-shortcode-wrap tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.01);
}

/* Accessibility: focus outlines */
.ims-invoices-shortcode-wrap a:focus,
.ims-invoices-shortcode-wrap button:focus {
  outline: 3px solid rgba(31, 119, 255, 0.16);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Small helper to make very long numbers wrap gracefully if needed */
.ims-invoices-shortcode-wrap td {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* IMS public form — two-column layout + accent styling
   Relies on :root variables defined in your main public CSS:
   --ims-bg, --ims-card, --ims-accent, --ims-accent-dark, --ims-muted, --ims-border, --ims-radius, --ims-shadow
*/

/* IMS public form — two-column layout + accent styling
   Relies on :root variables defined in your main public CSS:
   --ims-bg, --ims-card, --ims-accent, --ims-accent-dark, --ims-muted, --ims-border, --ims-radius, --ims-shadow
*/

.ims-form {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  max-width: 1100px;
  margin: 20px auto;
  padding: 22px;
  background: var(--ims-card, #fff);
  border-radius: calc(var(--ims-radius, 10px) - 2px);
  box-shadow: var(--ims-shadow, 0 6px 20px rgba(0,0,0,0.06));
  box-sizing: border-box;
  color: #0f172a;
}

/* Larger gaps & spacing for better readability */
.ims-form .ims-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;            /* increased gap between columns */
  margin-bottom: 20px;  /* increased vertical spacing between rows */
  align-items: start;
}

/* Default column — two columns (approx 50% each) */
.ims-form .ims-col {
  flex: 0 0 calc(50% - 14px);
  min-width: 260px;
  box-sizing: border-box;
}

/* Full width helpers (if needed you can add class 'ims-full' to an .ims-col) */
.ims-form .ims-col.ims-full { flex-basis: 100%; min-width: 100%; }

/* Labels: increase size and weight for readability */
.ims-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 15px;             /* increased from 13px */
  color: var(--ims-muted, #6b7280);
}

/* Form controls: use accent color for border as requested (#E1972F via --ims-accent) */
.ims-form input[type="text"],
.ims-form input[type="number"],
.ims-form input[type="email"],
.ims-form input[type="date"],
.ims-form select,
.ims-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ims-accent, #E1972F); /* changed to accent color */
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: transparent;
  color: #0f172a;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

/* Focus state */
.ims-form input:focus,
.ims-form select:focus,
.ims-form textarea:focus {
  outline: none;
  border-color: var(--ims-accent, #E1972F);
  box-shadow: 0 8px 22px rgba(225,151,47,0.08);
}

/* Placeholders subtle */
.ims-form input::placeholder,
.ims-form textarea::placeholder {
  color: #c1b7a6;
}

/* Prefix-style currency wrapper */
.ims-form .ims-suffix { position: relative; display: block; }
.ims-form .ims-suffix input { padding-left: 48px; }  /* reserve left space for prefix */
.ims-form .ims-suffix .ims-sfx {
  position: absolute;
  left: 12px;                /* prefix on the left */
  top: 50%;
  transform: translateY(-50%);
  color: var(--ims-accent-dark, #b37319);
  font-weight: 700;
  pointer-events: none;
}

/* Make numeric inputs right aligned for readability */
.ims-form input[type="number"] { text-align: right; }

/* Highlighted info wrapper (wrap the input with ims-suffix ims-highlight in PHP) */
.ims-form .ims-suffix.ims-highlight {
  /* padding: 6px; */
  border-radius: 10px;
  overflow: visible;
}

.ims-form .ims-suffix.ims-highlight input[readonly] {
  background: linear-gradient(180deg, var(--ims-accent, #E1972F), var(--ims-accent-dark, #b37319));
  color: #fff;
  border: none;
  box-shadow: none;
  padding: 12px; /* keep space for prefix */
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-align: end; /* display the value like the screenshot */
}

/* Prefix color inside highlight should be white too */
.ims-form .ims-suffix.ims-highlight .ims-sfx {
  color: #fff;
  font-weight: 700;
}

/* Emphasize large info boxes */
.ims-form .ims-info {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ims-accent, #E1972F), var(--ims-accent-dark, #b37319));
  color: #fff;
  font-weight: 700;
}

/* Small helper text */
.ims-form .ims-note { font-size: 13px; color: var(--ims-muted, #6b7280); margin-top: 6px; }

/* Buttons */
.ims-form .ims-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ims-accent, #E1972F), var(--ims-accent-dark, #b37319));
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(18,70,168,0.08);
}
/* .ims-form .ims-btn:hover { transform: translateY(-2px); } */

/* Larger submit button with inline icon */
.ims-form .ims-btn.ims-btn-submit {
  padding: 14px 20px;            /* bigger tap target */
  font-size: 16px;              /* larger label */
  border-radius: 12px;          /* slightly larger radius */
  gap: 10px;                    /* spacing between text and icon (flex) */
  align-items: center;
  justify-content: center;
  min-width: 220px;             /* optional: ensure reasonably wide button */
  box-shadow: 0 10px 26px rgba(225,151,47,0.12);
  transition: transform 140ms ease, box-shadow 140ms ease;
  display: inline-flex;         /* important so gap & icon align nicely */
  vertical-align: middle;
}

/* Icon inside the button */
.ims-form .ims-btn .ims-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  line-height: 0;               /* keeps svg vertically centered */
}

/* scale-up hover */
.ims-form .ims-btn.ims-btn-submit:hover,
.ims-form .ims-btn.ims-btn-submit:focus {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(225,151,47,0.16);
}

/* Make sure SVG inherits color and is sized */
.ims-form .ims-btn .ims-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  color: #fff;                  /* svg stroke/fill uses currentColor */
}

/* If you want the icon to use accent color and text be white, keep defaults.
   If button background is light, override color accordingly:
.ims-form .ims-btn.ims-btn-submit { background: var(--ims-accent); color: #fff; }
*/


/* secondary button (remove CC) */
.ims-form .ims-btn.secondary {
  background: transparent;
  color: var(--ims-accent);
  border: 2px solid var(--ims-accent-dark);
  box-shadow: none;
}

.ims-form .ims-btn.secondary.ims-remove-cc {
  display: block;
  width: 20%;
}

/* CC repeater */
.ims-form .ims-cc-list {
  margin-bottom: 10px;
}

.ims-form .ims-cc-list p {
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 12px 0;
}
.ims-form .ims-cc-list input { width: 80%; }

/* File input styling */
.ims-form input[type="file"] {
  padding: 8px;
  border-radius: 8px;
  border: 2px dashed var(--ims-border, #e6e9ef);
  background: transparent;
  color: #0f172a;
}

/* IMS file-field styling (plugin-local, no Elementor classes) */
.ims-file-field {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: 6px;
}

/* Native file input styled to match other controls */
.ims-file-field input.ims-upload-field[type="file"] {
  display: block;
  width: 100%;
  /* height: 60px; */
  /* padding: 12px; */
  align-content: center;
  border-radius: 8px;
  border: 2px solid var(--ims-accent, #E1972F);
  background: #fff;
  color: var(--ims-muted, #6b7280);
  font-size: 0.95rem;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

/* Modern file button styling (file-selector button) */
.ims-file-field input.ims-upload-field[type="file"]::file-selector-button {
  margin-right: 12px;
  border: none;
  /* padding: 8px 12px; */
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ims-accent, #E1972F), var(--ims-accent-dark, #b37319));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* WebKit fallback for older browsers */
.ims-file-field input.ims-upload-field[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ims-accent, #E1972F), var(--ims-accent-dark, #b37319));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Hover / focus affordances */
.ims-file-field input.ims-upload-field[type="file"]::file-selector-button,
.ims-file-field input.ims-upload-field[type="file"]::-webkit-file-upload-button {
  transition: transform 120ms ease, opacity 120ms ease;
}
.ims-file-field input.ims-upload-field[type="file"]::file-selector-button:hover,
.ims-file-field input.ims-upload-field[type="file"]::-webkit-file-upload-button:hover {
  transform: translateY(-1px);
  opacity: 0.98;
}
.ims-file-field input.ims-upload-field[type="file"]:focus {
  outline: 3px solid rgba(225,151,47,0.18);
  outline-offset: 2px;
}

/* Error state (if you add an .error class on wrapper) */
.ims-file-field.error input.ims-upload-field[type="file"] {
  border-color: rgba(255,107,107,0.5);
}

/* no default forced visibility; wrapper visibility will be controlled inline / by JS */
.ims-hideable { /* controlled by inline style or JS */ }

/* Responsive: stack to single column on small screens */
@media (max-width: 880px) {
  .ims-form { padding: 16px; }
  .ims-form .ims-col { flex: 0 0 100%; min-width: 100%; }
  .ims-form .ims-sfx { right: 10px; }
}

/* Very small screens tweaks */
@media (max-width: 520px) {
  .ims-form { padding: 12px; }
  .ims-form label { font-size: 13px; }
  .ims-form .ims-btn { width: 100%; justify-content:center; }
  .ims-file-field input.ims-upload-field[type="file"] { height: 56px; padding: 10px; }
  .ims-file-field input.ims-upload-field[type="file"]::file-selector-button,
  .ims-file-field input.ims-upload-field[type="file"]::-webkit-file-upload-button {
    padding: 7px 14px;
    font-size: 0.94rem;
  }
}

/* Tiny utilities */
.ims-form .ims-error { color: #c53030; font-weight: 700; margin-bottom: 8px; }
.ims-form .ims-success { color: #2d8a3a; font-weight: 700; margin-bottom: 8px; }

/* Accessibility focus */
.ims-form input:focus, .ims-form select:focus, .ims-form textarea:focus, .ims-form button:focus {
  outline: 3px solid rgba(225,151,47,0.12);
  outline-offset: 2px;
}

/* Remove default number spinner for cleaner look (optional) */
.ims-form input[type=number]::-webkit-outer-spin-button,
.ims-form input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Make long labels/values wrap if needed */
.ims-form .ims-col { word-break: break-word; }