/* wc-insurance-gateway — shared modal chrome.
 *
 * EM-104: trimmed on relocation from the mu-plugin dev-stub's dev-modal.css.
 * This file ships CSS only for DOM that coverage-picker.js /
 * product-page.js / cart-page.js actually build: the combined modal shell
 * (.ins-modal*), the per-tier stepper section (.ins-tier-*, .ins-stepper*,
 * .ins-summary-*, .ins-actions-*), and the single-select tier grid
 * (.ins-k5-section-title for the section heading, .ins-tier-grid /
 * .ins-tier-cell* for the row of selectable cells, .ins-tier-detail* for
 * the expanding description panel below it — buildRadioSection()'s own
 * markup, redesigned from a card-list to a table-cell grid + detail panel
 * to match the reference product-page pattern the developer asked to
 * follow). Modal header is dark (#171717) with a brand-color underline,
 * matching that same reference — not the earlier all-white header.
 *
 * Dropped everything that belonged to code this plugin does NOT ship: the
 * old "legacy tabs" modal layout (.ins-modal-section*, .ins-modal-tabs,
 * .ins-tab*, .ins-plan-detail*, .ins-modal-pill, .ins-actions-right —
 * ui/modal.js, not ported), the old grid/table cart row + toggle UI
 * (.ins-wrap, .ins-card*, .ins-thead, .ins-th-*, .ins-tier-banner,
 * .ins-name-cell*, .ins-izmeni, .ins-vdiv, .ins-price, .ins-qty,
 * .ins-qnum-box, .ins-total, .ins-x*, .ins-empty-cta*, .ins-toggle-* —
 * ui/product-widget.js, not ported), the k9 host layout (.ins-k9-* —
 * also ui/product-widget.js), the original card-list tier tabs
 * (.ins-k5-tabs, .ins-k5-tab*, .ins-k5-clear — superseded by the tier
 * grid above), the k5 tabbed wrapper nothing ported ever creates
 * (.ins-k5-wrap, .ins-k5-tabbed, .ins-k5-header, .ins-k5-badge), and an
 * orphaned #ins-toast rule (the real toast element cart-page.js creates
 * is #wc-ig-cart-toast, styled in cart-widget.css).
 */
:root {
  --ins-primary: #e21382;
  --ins-primary-hover: #b90f68;
  --ins-secondary: #fdeaf3;
}

.ins-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}
.ins-modal.is-open {
  display: block;
}
.ins-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.ins-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f9f9f9;
  border-radius: 8px;
  max-width: 90%;
  width: 800px;
  /* 94vh rather than 90vh: with the compacted sections the two-coverage-type
     stepper modal measures ~610px, and 90vh on a 768px-tall laptop is 594 --
     i.e. it would scroll by a hair for want of ~20px. */
  max-height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
/* wc-ig-coverage-sections wraps the combined modal's two coverage-type
   sections (EW / ADTH) -- stacked, each full width, one above the other
   (was briefly side-by-side columns per an earlier, reference-blind
   request; corrected once the actual reference was available -- its own
   modal stacks a full-width section header + tier row per coverage type,
   not two columns side by side).

   Stepper sections carry their own card border (.ins-tier-group below) and
   so are separated by spacing alone; radio sections are borderless blocks
   and still need a rule between them. */
.wc-ig-coverage-sections > * + * {
  margin-top: 12px;
}
.wc-ig-coverage-sections > .ins-k5-section + .ins-k5-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
}
@media (max-width: 640px) {
  .ins-modal-content {
    width: 520px;
  }
}
.ins-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  border-bottom: 3px solid var(--ins-primary, #FFCB05);
  background: #171717;
}
.ins-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ins-modal-shield {
  color: var(--ins-primary, #FFCB05);
  font-size: 24px;
}
.ins-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ins-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ins-modal-intro {
  padding: 9px 24px;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
}
.ins-modal-intro p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
/* Sized so the combined two-section stepper modal fits a laptop viewport
   without scrolling: ~50px header + ~35px intro + two ~150px section cards
   + ~60px footer lands near 460px, inside the 90vh cap even at 768px tall.
   overflow-y stays as a safety net -- a coverage type with many tiers, or a
   short/zoomed viewport, must still be reachable rather than clipped -- but
   it should not engage in the ordinary 2-tiers-per-type case.
   .wc-ig-coverage-sections' own padding replaces the per-section padding
   the section cards used to supply. */
.ins-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  background: #fff;
}
.ins-modal-body > .wc-ig-coverage-sections {
  padding: 12px 16px;
}
.ins-tier-list {
  padding: 2px 16px;
}
/* .ins-tier-group wraps one coverage type's stepper section inside the
   combined coverage-sections modal. Rendered as a self-contained card:
   title row with a status badge, tier rows, then its own total bar. */
.ins-tier-group {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}
.ins-tier-group .ins-k5-section-title {
  padding: 8px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fcfcfc;
}
/* Takes the slack so the status badge is pushed to the far right. */
.ins-k5-section-name {
  flex: 1;
  min-width: 0;
}
.ins-section-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0f0f0;
  color: #767676;
}
.ins-section-badge.ins-actions-full {
  background: #e6f4ec;
  color: #2e8b57;
}
.ins-tier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f4f4f4;
}
.ins-tier-row:last-child {
  border-bottom: none;
}
.ins-tier-row.is-active {
  background: linear-gradient(to right, var(--ins-secondary, #fffbe6) 0%, transparent 100%);
  margin: 0 -16px;
  padding: 9px 16px;
  border-bottom: 1px solid #ececec;
}
.ins-tier-row.is-active .ins-tier-name::before {
  content: "✓";
  color: #2e8b57;
  font-weight: 700;
  margin-right: 6px;
}
.ins-tier-info {
  flex: 1;
  min-width: 0;
}
.ins-tier-name {
  font-weight: 600;
  line-height: 1.2;
  font-size: 14px;
  color: #2c2c2c;
}
.ins-tier-meta {
  font-size: 12px;
  color: #777;
  margin-top: 3px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ins-tier-dot {
  width: 3px;
  height: 3px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
}
.ins-quick-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #c79b00;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.ins-quick-link:hover {
  color: #8a6a00;
}
/* Cost sits beside the stepper, not stacked under it. Stacked, the wrap was
   the tallest thing in the row (30px stepper + 14px cost + gap) and set a
   72px row height; side by side the row is the stepper's own 30px plus
   padding. Across four rows that is most of what keeps the two-section
   modal off a scrollbar. */
.ins-stepper-wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.ins-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
}
.ins-stepper button {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #2c2c2c;
  font-family: inherit;
}
.ins-stepper button:hover:not(:disabled) {
  background: #eee;
}
.ins-stepper button:disabled {
  color: #ccc;
  cursor: not-allowed;
}
.ins-stepper input {
  width: 38px;
  height: 30px;
  text-align: center;
  background: #fff;
  border: 0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  -moz-appearance: textfield;
}
.ins-stepper input::-webkit-outer-spin-button,
.ins-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ins-stepper.is-zero input {
  color: #aaa;
  font-weight: 400;
}
.ins-stepper.is-active input {
  color: #2e8b57;
}
/* High-specificity + !important, same reason as the segmented pill and the
   specs accordion in product-page-theme.css: this store's theme paints every
   bare <button> with its own solid brand background and light text, which
   beats the plain-class rules above regardless of source order. Left alone,
   the quick-link and the steppers render as solid pink blocks -- and the
   disabled "+" at the coverage cap loses its #ccc greying entirely, so a
   capped section looks identical to an available one. The add/close buttons
   are deliberately excluded: they are meant to be solid brand.
   Scoped to .ins-modal so nothing outside the modal is touched. */
.ins-modal .ins-stepper button.ins-stepper-plus,
.ins-modal .ins-stepper button.ins-stepper-minus {
  background: transparent !important;
  color: #2c2c2c !important;
}
.ins-modal .ins-stepper button.ins-stepper-plus:hover:not(:disabled),
.ins-modal .ins-stepper button.ins-stepper-minus:hover:not(:disabled) {
  background: #ececec !important;
}
.ins-modal .ins-stepper button.ins-stepper-plus:disabled,
.ins-modal .ins-stepper button.ins-stepper-minus:disabled {
  background: transparent !important;
  color: #c4c4c4 !important;
}
.ins-modal button.ins-quick-link {
  background: transparent !important;
  color: #b07d00 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 500;
}
.ins-modal button.ins-quick-link:hover {
  background: transparent !important;
  color: #7d5800 !important;
}
/* min-width, not the old fixed height, is what reserves the space now the
   cost is beside the stepper -- without it the stepper shifts sideways the
   moment a row goes from 0 to 1. Kept transparent rather than hidden for
   the same reason. */
.ins-row-cost {
  font-size: 11px;
  color: #2e8b57;
  font-weight: 700;
  /* Wide enough for a four-figure line cost with decimals
     ("+ 1.499,90 RSD"); anything narrower and a high quantity overflows the
     reserve and nudges the stepper leftwards mid-interaction. */
  min-width: 96px;
  text-align: right;
  white-space: nowrap;
}
.ins-row-cost.ins-row-cost-zero {
  color: transparent;
}
.ins-modal-summary {
  border-top: 1px solid #e0e0e0;
  background: var(--ins-secondary, #fffbe6);
  padding: 8px 16px;
}
.ins-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ins-summary-label {
  font-size: 13px;
  color: #5a4500;
}
.ins-summary-value {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.ins-summary-split {
  margin-top: 3px;
  font-size: 11px;
  color: #806010;
  line-height: 1.4;
}
.ins-summary-split em {
  font-style: normal;
  font-weight: 700;
}
.ins-modal-actions {
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e0e0e0;
  background: #f9f9f9;
}
.ins-actions-left {
  font-size: 13px;
  color: #2c2c2c;
  font-weight: 500;
}
.ins-actions-left.ins-actions-empty {
  color: #777;
  font-weight: 400;
}
.ins-actions-left.ins-actions-full {
  color: #2e8b57;
  font-weight: 700;
}
.ins-modal-add-btn {
  padding: 10px 18px;
  background: var(--ins-primary, #FFCB05);
  border: 2px solid var(--ins-primary, #FFCB05);
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}
.ins-modal-add-btn:hover {
  background: var(--ins-primary-hover, #e6b800);
  border-color: var(--ins-primary-hover, #e6b800);
}
.ins-modal-footer {
  padding: 12px 24px;
  border-top: 2px solid #e0e0e0;
  background: #f9f9f9;
}
.ins-modal-footer .ins-modal-add-btn {
  width: 100%;
  padding: 10px 15px;
}
.ins-k5-section {
  margin-bottom: 12px;
}
.ins-k5-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 8px;
}
.ins-k5-section-icon {
  color: var(--ins-primary, #FFCB05);
  font-size: 14px;
}
/* Single-select tier grid (buildRadioSection) -- a row of cells rather
   than a card list. Selected = solid brand fill + white text + a
   checkmark badge; a detail panel below the row expands with the
   selected tier's full name/duration/description. */
.ins-tier-grid {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}
.ins-tier-cell {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  position: relative;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
  transition: background 0.15s;
}
.ins-tier-cell + .ins-tier-cell {
  border-left: 1px solid #e0e0e0;
}
.ins-tier-cell input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ins-tier-cell:hover {
  background: var(--ins-secondary, #fdeaf3);
}
.ins-tier-cell-name,
.ins-tier-cell-dur,
.ins-tier-cell-price {
  display: block;
}
.ins-tier-cell-name {
  font-size: 13px;
  font-weight: 700;
  color: #2c2c2c;
}
.ins-tier-cell-dur {
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}
.ins-tier-cell-price {
  font-size: 14px;
  font-weight: 700;
  color: #2c2c2c;
  margin-top: 6px;
}
.ins-tier-cell-check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ins-primary, #FFCB05);
  font-size: 11px;
  align-items: center;
  justify-content: center;
}
.ins-tier-cell.is-selected {
  background: var(--ins-primary, #FFCB05);
}
.ins-tier-cell.is-selected:hover {
  background: var(--ins-primary-hover, #e6b800);
}
.ins-tier-cell.is-selected .ins-tier-cell-name,
.ins-tier-cell.is-selected .ins-tier-cell-dur,
.ins-tier-cell.is-selected .ins-tier-cell-price {
  color: #fff;
}
.ins-tier-cell.is-selected .ins-tier-cell-check {
  display: flex;
}
.ins-tier-detail {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 6px;
}
.ins-tier-detail-title {
  font-size: 13px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 4px;
}
.ins-tier-detail-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .ins-modal-content {
    max-height: 95vh;
    width: 95%;
    max-width: 95%;
  }
}