/*
 * Ported from the original widget's JS-injected <style> block. Selectors are
 * scoped to the stable ".coupon-widget-widget" class rather than a
 * per-instance element ID, since PHP renders a fresh instance ID for every
 * [coupon_widget] placement on a page.
 */
.coupon-widget-widget .c-card, .coupon-widget-widget .c-horizontal { transition: transform .2s, box-shadow .2s; }
.coupon-widget-widget .c-card:hover, .coupon-widget-widget .c-horizontal:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12); }
.coupon-widget-widget .ratio-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.coupon-widget-widget .ratio-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.coupon-widget-widget .placeholder-169 { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; border-radius: .5rem; background: #f1f3f5; color: #6c757d; font-weight: 600; }
.coupon-widget-widget .placeholder-169 .ph-title { padding: .25rem .5rem; line-height: 1.2; max-height: 70%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Coupon look */
.coupon-widget-widget .coupon { position: relative; border: 2px dashed #d0d5dd; border-radius: 16px; background: #fff; }
.coupon-widget-widget .coupon::before, .coupon-widget-widget .coupon::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #f8f9fa; transform: translateY(-50%); }
.coupon-widget-widget .coupon::before { left: -9px; }
.coupon-widget-widget .coupon::after { right: -9px; }
.coupon-widget-widget .coupon .tearline { height: 2px; background: repeating-linear-gradient(90deg, #d0d5dd 0 8px, transparent 8px 14px); opacity: .9; }

/* Horizontal list item */
.coupon-widget-widget .c-horizontal { display: flex; gap: 1rem; padding: 1rem; border-radius: 16px; background: #fff; height: 100%; align-items: stretch; }
.coupon-widget-widget .c-thumb-wrap { width: 200px; min-width: 200px; aspect-ratio: 16/9; }
@media (max-width: 575.98px) { .coupon-widget-widget .c-thumb-wrap { width: 140px; min-width: 140px; } }
.coupon-widget-widget .c-thumb-wrap .media { position: relative; width: 100%; height: 100%; }
.coupon-widget-widget .c-thumb-wrap .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; background: #f1f3f5; }
.coupon-widget-widget .price-badge { font-size: .8rem; padding: .25rem .5rem; border-radius: 999px; background: #e7f1ff; color: #0b5ed7; }
.coupon-widget-widget .meta { color: #6c757d; font-size: .9rem; }
.coupon-widget-widget .clickable { cursor: pointer; }
.coupon-widget-widget .clickable:focus { outline: 2px solid rgba(13, 110, 253, .4); outline-offset: 2px; }

/* Checkbox list */
.coupon-widget-widget .check-row { display: flex; align-items: center; gap: .5rem; }

/* Card footer stick-to-bottom and alignment for grid view */
.coupon-widget-widget .c-card.card { display: flex; flex-direction: column; }
.coupon-widget-widget .c-card.card .card-body { flex: 1 1 auto; }
.coupon-widget-widget .c-card.card .card-footer { background: transparent; border: 0; }

/* Skeleton loading cards — greyed-out blocks with a shimmer sweeping
   across, shown while the deal list loads. */
.coupon-widget-widget .cpw-skeleton-card { pointer-events: none; }
.coupon-widget-widget .cpw-skeleton {
  background: linear-gradient(90deg, #e9ecef 25%, #f3f4f6 37%, #e9ecef 63%);
  background-size: 400% 100%;
  animation: cpw-shimmer 1.4s ease infinite;
  border-radius: .5rem;
}
.coupon-widget-widget .cpw-skeleton-line { height: 14px; border-radius: 4px; }
.coupon-widget-widget .cpw-skeleton-title { height: 18px; width: 70%; }
.coupon-widget-widget .cpw-skeleton-line-sm { width: 50%; }
@keyframes cpw-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .coupon-widget-widget .cpw-skeleton { animation: none; background-position: 50% 50%; }
}

/* Vanilla modal visibility + backdrop — no Bootstrap JS dependency */
.coupon-widget-widget .modal { position: fixed; inset: 0; z-index: 1050; display: none; padding: 1rem; overflow-y: auto; background: transparent; }
.coupon-widget-widget .modal.show { display: block; }
.coupon-widget-widget .modal-dialog { margin: 1.5rem auto; max-width: 600px; pointer-events: none; }
.coupon-widget-widget .modal-dialog.modal-lg { max-width: 900px; }
.coupon-widget-widget .modal-dialog.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3rem); }
.coupon-widget-widget .modal-content { pointer-events: auto; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .15); border: 0; }
.coupon-widget-widget .modal-header,
.coupon-widget-widget .modal-footer { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.25rem; border: 0; }
.coupon-widget-widget .modal-footer { justify-content: flex-end; }
.coupon-widget-widget .modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.coupon-widget-widget .modal-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.coupon-widget-widget .btn-close { border: 0; background: transparent; width: 1rem; height: 1rem; opacity: .6; cursor: pointer; }
.coupon-widget-widget .btn-close::before { content: '\00d7'; display: block; font-size: 1.25rem; line-height: 1; }
.coupon-widget-widget .btn-close:hover { opacity: 1; }

.cpw-backdrop { position: fixed; inset: 0; background-color: #000; opacity: .5; z-index: 1040; }
body.cpw-modal-open { overflow: hidden; }