/** Shopify CDN: Minification failed

Line 294:34 Unexpected "/"

**/
@charset "UTF-8";

/* Overlay/backdrop (ES-like) */
.cod-modal {
  display: none;               /* JS will toggle to block */
  position: fixed;
  inset: 0;
  background-color: #0006;     /* semi-opaque black like ES */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 20px;
  z-index: 99999999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modal content sizing & style (maps to ES modal sizes) */
.cod-modal .cod-modal-content {
  width: 94%;
  max-width: 560px;
  margin: 3.5% auto;
  background: #fff;
  padding: 18px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  outline: none;
  box-sizing: border-box;
}

/* Header & close */
.cod-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.cod-header h3 { margin:0; font-size:1.125rem; font-weight:700; color:#111827; }
.cod-close {
  color:#4d4d4d;
  font-size:28px;
  font-weight:700;
  background:none;
  border:0;
  cursor:pointer;
  line-height:1;
  padding:4px;
}

/* Cart items */
.cod-item { display:flex; gap:10px; align-items:center; margin:10px 0; }
.cod-item img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
.cod-item .info { flex:1; min-width:0; }
.cod-item .info div { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cod-item .info small { display:block; color:#6b7280; font-size:0.9rem; }

/* Summary (subtotal/total box) */
.cod-summary {
  margin-top:10px;
  background-color:#fff;
  padding:10px;
  border-radius:8px;
  border:1px solid #e6e6e6;
}
.cod-summary .row { display:flex; justify-content:space-between; padding:6px 0; color:#111827; font-size:0.95rem; }
.cod-summary .total { font-weight:900; margin-top:8px; border-top:1px solid #ececec; padding-top:10px; }

/* Inputs - ES-like look (only for these inputs) */
.cod-input { margin-bottom:12px; }
.cod-input input {
  display:block;
  width:100%;
  height:45px;
  padding:10px 14px;
  font-size:1rem;
  color:#212529;
  background-color:#fff;
  border:1px solid #c0c0c0;
  border-radius:6px;
  box-sizing:border-box;
}
.cod-input input::placeholder { color:#616161; opacity:1; }

/* Submit button - ES-like */
.cod-submit {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:50px;
  padding:10px 0;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#111827,#000000);
  border:0;
  border-radius:8px;
  cursor:pointer;
  margin-top:12px;
}
.cod-submit:disabled { opacity:.6; cursor:not-allowed; }

/* Notes */
.cod-notes { margin:12px 0; padding-left:18px; color:#333; line-height:1.4; }

/* Focus styles - visible */
.cod-modal [tabindex]:focus,
.cod-modal button:focus,
.cod-modal input:focus {
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 2px;
}

/* Prevent background scrolling when modal open (add .modal-open on body via JS) */
body.modal-open {
  overflow:hidden;
  height:100vh;
}

/* Prevent clicks below overlay while modal is open (overlay already covers viewport) */
/* Extra: ensure page siblings are not interactive when modal visible (only while aria-hidden false) */
.cod-modal[aria-hidden="false"] ~ * { pointer-events: none; user-select: none; }

/* Keep modal content interactive */
.cod-modal[aria-hidden="false"] .cod-modal-content { pointer-events: auto; user-select: auto; }

/* Responsive tweaks */
@media (min-width: 768px) {
  .cod-modal .cod-modal-content { width:500px; margin:2% auto; padding:20px; }
}
@media (min-width: 992px) {
  .cod-modal .cod-modal-content { width:560px; margin:1.5% auto; }
}
@media (max-width:520px) {
  .cod-modal .cod-modal-content { margin:12px; padding:14px; border-radius:8px; }
}
/* Horizontal form rows with label, icon, input */
.cod-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* Inline label on the left */
.cod-inline-label {
  min-width: 84px;            /* label column width on desktop */
  width: 84px;
  font-weight: 700;
  color: #111827;
  font-size: 0.95rem;
  margin: 0;
  display: inline-block;
}

/* Icon container */
.cod-field-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;        /* subtle gray like ES */
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Input wrapper takes remaining space */
.cod-input {
  flex: 1 1 auto;
  min-width: 0;               /* needed for ellipsis/overflow */
}

/* Input styles (ES-like) */
.cod-input input {
  width: 100%;
  height: 45px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #c0c0c0;
  background: #fff;
  font-size: 1rem;
  color: #212529;
  box-sizing: border-box;
}

/* Placeholder color */
.cod-input input::placeholder {
  color: #616161;
  opacity: 1;
}

/* Make sure label doesn't wrap weirdly */
.cod-inline-label { white-space: nowrap; }

/* Focus states */
.cod-input input:focus,
.cod-close:focus,
.cod-submit:focus {
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 2px;
}

/* Small screens: stack vertically for better usability */
@media (max-width: 520px) {
  .cod-form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .cod-inline-label {
    width: auto;
    min-width: 0;
    white-space: normal;
  }
  .cod-field-icon {
    width: 36px;
    height: 36px;
    align-self: flex-start;
  }
  .cod-input input { height: 44px; }
}

/* Optional: tighter spacing for dense layout */
.cod-form .cod-form-row + .cod-form-row { margin-top: 6px; }

/* Wrapper for icon + input */
.cod-field-wrap {
  display: flex;
  align-items: center; /* vertically center icon with input */
  width: 100%;
  box-sizing: border-box;
}

/* Icon box (like ::before pseudo-element behavior) */
.cod-field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: #eef2f6;
  border: 1px solid #e6e6e6;
  border-right: 0;               /* visually joins input */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  flex-shrink: 0;
  font-size: 18px;
  color: #111827;
  line-height: 1;
}

/* Style the icon element */
.cod-field-icon .bi {
  font-size: 18px;
  color: #111827;
  line-height: 1;
}

/* Input container (takes remaining space) */
.cod-input {
  flex: 1 1 auto;
  min-width: 0;              /* allow input to shrink in flex */
}

/* Input aligned perfectly with icon */
.cod-input input {
  flex: 1;
  width: 100%;
  height: 46px;
  padding: 0 12px;                /* remove top/bottom padding for perfect center */
  border: 1px solid #c0c0c0;
  border-left: 0;                 /* join with icon */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 1rem;
  color: #212529;
  background: #fff;
  display: flex;
  align-items: center;             /* vertically centers text */
  box-sizing: border-box;
}
/* Optional: vertically center text placeholder too */
.cod-input input::placeholder {
  display: flex;
  align-items: center;
  height: 100%;
}

* Small tweak for mobile screens */
@media (max-width: 520px) {
  .cod-field-wrap {
    flex-direction: row;           /* keep icon + input inline */
  }
  .cod-field-icon {
    width: 42px;
    height: 42px;
  }
  .cod-input input {
    height: 42px;
  }
}

/* If you want the icon box to use an image (instead of color), use background-image here:
.cod-field-icon { background-image: url("/path/to/your-gray-pattern.png"); background-size: cover; background-position: center; }
*/

/* Label column and overall row layout */
.cod-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* Left label */
.cod-inline-label {
  min-width: 84px;
  width: 84px;
  font-weight: 700;
  color: #111827;
  font-size: 0.95rem;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
}

/* Focus states */
.cod-field-icon:focus,
.cod-input input:focus,
.cod-submit:focus {
  outline: 3px solid rgba(13,110,253,0.14);
  outline-offset: 2px;
}

/* Mobile: stack nicely */
@media (max-width: 520px) a{
  .cod-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cod-inline-label {
    width: 100%;
  }
  .cod-field-wrap {
    flex-direction: row; /* keep icon + input inline on mobile as well */
  }
  .cod-field-icon {
    width: 42px;
    height: 42px;
  }
  .cod-input input { height: 44px; }
}