/* ============================================================
   Shipping Countdown — floating widget
   Position, width, bottom injected dynamically via <style> in hookDisplayHeader
   ============================================================ */

/* ---- SCOPED RESET: prevent theme/Bootstrap interference ---- */
#sw-shipping-widget { position: fixed !important; z-index: 9500 !important; }
#sw-icon-bubble     { position: fixed !important; z-index: 9500 !important; }
.sw-modal-overlay   { position: fixed !important; z-index: 99999 !important; }

/* Force box-sizing on every descendant */
#sw-shipping-widget *,
.sw-modal-overlay * {
  box-sizing: border-box !important;
}

/* ---- Layout scoped reset: ALL flex properties forced to prevent Bootstrap override ---- */

/* Widget body: flex row, items centered, relative for absolute dismiss button */
.sw-widget-body {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; position: relative !important; width: 100% !important;
}

/* Inner content area between the two arrows */
.sw-main {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: space-around !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}

/* Logo cell */
.sw-logo-cell {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; padding: 0 8px !important;
}

/* Countdown cell */
.sw-countdown-cell {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}

/* Details cell */
.sw-details-cell {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; padding: 0 8px !important;
}

/* Countdown inner wrap */
.sw-countdown-wrap {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
}

/* Dot indicators row */
.sw-dots {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center !important; flex-wrap: wrap !important;
}

/* Closed mode body */
.sw-closed-body {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; flex-wrap: nowrap !important; width: 100% !important;
}

/* Modal overlay alignment (display toggled by JS — no display !important here) */
.sw-modal-overlay { align-items: center !important; justify-content: center !important; }

/* Modal logo wrapper: logo centered horizontally */
.sw-modal-logo-wrap {
  display: flex !important; justify-content: center !important; align-items: center !important;
}

/* Modal inner containers */
.sw-modal-list { display: flex !important; flex-direction: column !important; gap: 9px !important; }
.sw-modal-nav  { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; }

/* Bootstrap/theme button reset — inside widget only */
#sw-shipping-widget button,
.sw-modal-overlay button {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  float: none !important;
  margin: 0 !important;
  vertical-align: baseline !important;
  background-image: none;
  box-shadow: none;
  white-space: nowrap !important;
}

/* Override Bootstrap img max-width:100% / height:auto */
#sw-shipping-widget img,
.sw-modal-overlay img {
  max-width: none !important;
  height: auto;
}
.sw-logo       { max-width: 90px !important; height: 60px !important; object-fit: contain !important; display: block !important; flex-shrink: 0 !important; }
.sw-modal-logo { max-width: 90px !important; height: 150px !important; object-fit: contain !important; display: block !important; flex-shrink: 0 !important; }

/* Override Bootstrap p margin-bottom */
.sw-modal-intro,
.sw-closed-msg { margin-bottom: 0 !important; }

/* Override Bootstrap ul padding-left / list-style */
.sw-modal-list {
  padding-left: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

/* ============================================================
   Icon bubble (shows when widget dismissed)
   ============================================================ */
#sw-icon-bubble {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #e65100;
  color: #fff;
  cursor: pointer;
  display: none; /* JS shows it via style="display:flex" */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

#sw-icon-bubble svg {
  width: 28px;
  height: 28px;
  display: block;
}

#sw-icon-bubble:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Main widget shell
   ============================================================ */
#sw-shipping-widget {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 10px 6px 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}

#sw-shipping-widget:hover {
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.16);
}

/* ============================================================
   Widget body — visual properties
   ============================================================ */
.sw-widget-body {
  min-height: 72px;
}

.sw-widget-body * {
  box-sizing: border-box;
}

/* ============================================================
   Dismiss (×) button — absolute top-right in normal mode
   ============================================================ */
.sw-btn-dismiss {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  color: #bbb;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
}
.sw-btn-dismiss:hover { color: #666; }

/* ============================================================
   Arrow buttons — at left/right edges, vertically centered by flex parent
   ============================================================ */
.sw-arrow-btn {
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  color: #ccc;
  cursor: pointer !important;
  padding: 0 2px !important;
  transition: color 0.15s;
  flex-shrink: 0 !important;
  user-select: none;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.sw-arrow-btn:hover { color: #e65100; }
.sw-arrow-btn:disabled,
.sw-arrow-btn.sw-arrow-hidden { opacity: 0.2; pointer-events: none; }

/* ============================================================
   Countdown
   ============================================================ */
.sw-countdown-wrap {
  gap: 2px;
}

.sw-label {
  font-size: 10px;
  color: #aaa;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  display: block !important;
}

.sw-countdown {
  font-size: 20px;
  font-weight: 700;
  color: #e65100;
  letter-spacing: 1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sw-countdown.sw-expired     { color: #bbb; font-size: 14px; }
.sw-countdown.sw-unavailable { color: #bbb; font-size: 14px; }

/* ============================================================
   Details button
   ============================================================ */
.sw-btn-details {
  background: none !important;
  border: 1px solid #e65100 !important;
  color: #e65100 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  display: inline-block !important;
  line-height: 1.4 !important;
}
.sw-btn-details:hover {
  background: #e65100 !important;
  color: #fff !important;
}

/* ============================================================
   Dot indicators
   ============================================================ */
.sw-dots {
  min-height: 8px;
  gap: 5px;
  margin-top: 4px;
}

.sw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  transition: background 0.2s;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.sw-dot.sw-dot-active { background: #e65100; }

/* ============================================================
   Closed day mode
   ============================================================ */
.sw-closed-body {
  gap: 14px;
  padding: 8px 4px;
  position: relative;
  min-height: 62px;
}

.sw-closed-body * {
  box-sizing: border-box;
}

.sw-closed-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-closed-icon svg {
  width: 34px;
  height: 34px;
  color: #e65100;
  display: block;
}

.sw-closed-msg {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0;
  padding-right: 22px;
  display: block !important;
}

/* Override base dismiss positioning for closed mode */
.sw-closed-body .sw-btn-dismiss {
  top: 4px !important;
  right: 0 !important;
  font-size: 16px !important;
}

/* ============================================================
   Modal overlay — display controlled by JS (overlay.style.display)
   ============================================================ */
.sw-modal-overlay {
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.sw-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px 22px;
  width: 300px;
  max-width: 92vw;
  position: relative;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.sw-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  color: #aaa;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.sw-modal-close:hover { color: #333; }

/* Modal navigation bar */
.sw-modal-nav {
  margin-bottom: 14px;
}

.sw-arrow-sm { font-size: 26px !important; }

.sw-modal-count {
  font-size: 12px;
  color: #999;
  min-width: 36px;
  text-align: center;
  display: inline-block;
}

/* Modal logo wrapper */
.sw-modal-logo-wrap {
  margin-bottom: 10px;
}

/* Modal intro text (below logo, above list) */
.sw-modal-intro {
  font-size: 12px;
  color: #e65100;
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 14px 0 !important;
  padding: 0;
  text-align: center;
  display: block;
}

/* Modal info list */
.sw-modal-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 8px;
}
.sw-modal-list li:last-child { border-bottom: none; padding-bottom: 0; }

.sw-modal-key { color: #888; flex-shrink: 0; }
.sw-modal-val { font-weight: 600; color: #222; text-align: right; }

.sw-modal-val.sw-state-active      { color: #2e7d32; }
.sw-modal-val.sw-state-expired     { color: #bbb; }
.sw-modal-val.sw-state-unavailable { color: #bbb; }

/* Note value: multiline, normal weight */
#sw-modal-note {
  font-weight: normal;
  color: #555;
  text-align: right;
  white-space: pre-line;
}

/* ============================================================
   Mobile — overrides dynamic position/size for small screens
   ============================================================ */
@media (max-width: 480px) {
  #sw-shipping-widget {
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: calc(100vw - 32px) !important;
    transform: none !important;
  }

  #sw-icon-bubble {
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  #sw-icon-bubble:hover {
    transform: translateX(-50%) scale(1.1) !important;
  }
}