/*
 * MQ Delivery ETA - Front CSS
 *
 * @author    MQ Designs
 * @copyright 2025 MQ Designs
 * @license   Proprietary
 */
 
/* =============== MQ Delivery ETA – Front CSS =============== */

:root{
  --mqde-bg: #ffffff;
  --mqde-surface: #fbfbfc;
  --mqde-border: #e5e7eb;
  --mqde-text: #111827;
  --mqde-muted: #6b7280;

  --mqde-btn-bg: #ffffff;
  --mqde-btn-text: #4b5563;
  --mqde-btn-border: #d1d5db;
  --mqde-btn-bg-hover: #f9fafb;
  --mqde-btn-text-hover: #111827;
  --mqde-btn-border-hover: #bfc6cf;

  --mqde-choose-bg: #ffffff;
  --mqde-choose-text: #374151;
  --mqde-choose-border: #cfd6df;
  --mqde-choose-bg-hover: #f3f4f6;
  --mqde-choose-text-hover: #111827;
  --mqde-choose-border-hover: #9aa4b0;

  --mqde-shadow: 0 6px 20px rgba(0,0,0,0.06);
  --mqde-radius: 14px;
  
  --mqde-primary: #3b82f6;
  --mqde-modal-bg: #ffffff;
  --mqde-modal-text: #111827;
}

.mqde-banner,
.mqde-eta-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--mqde-surface);
  border: 1px solid var(--mqde-border);
  border-radius: var(--mqde-radius);
  color: var(--mqde-text);
}

.mqde-banner__inner,
.mqde-eta-text {
  display: flex;
  align-items: center;
  gap: .5rem .75rem;
}

.mqde-eta-card--cart {
    margin-top: .5rem;
}

.mqde-teaser {
  color: var(--mqde-muted);
}

.mqde-change{
  background: var(--mqde-btn-bg);
  color: var(--mqde-btn-text);
  border: 1px solid var(--mqde-btn-border);
  border-radius: 999px;
  padding: .55rem .8rem;
  font-size: .92rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mqde-change:hover,
.mqde-change:focus{
  background: var(--mqde-btn-bg-hover);
  color: var(--mqde-btn-text-hover);
  border-color: var(--mqde-btn-border-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transform: scale3d(1.03, 1.06, 1.09);
}

.mqde-change:active {  }

#mqde-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  font-family: inherit;
  color: var(--mqde-text);
}
.mqde-modal-open { overflow: hidden; }

#mqde-modal .mqde-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.55);
  opacity: 1;
}

#mqde-modal .mqde-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(960px, 92vw);
  max-height: 88vh;
  transform: translate(-50%, -50%);
  background: var(--mqde-bg);
  border-radius: 18px;
  box-shadow: var(--mqde-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--mqde-modal-bg);
  color: var(--mqde-modal-text);
  color-scheme: light dark;
}

#mqde-modal .mqde-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #eef2ff;
  color: #1f2937;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}
#mqde-modal .mqde-modal__close:hover { background: #e0e7ff; }

#mqde-modal .mqde-steps {
  display: block;
  width: 100%;
}

#mqde-modal .mqde-step {
  padding: 1.25rem 1.25rem 1.4rem;
}

#mqde-modal .mqde-stepbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
#mqde-modal .mqde-stepbar .mqde-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mqde-primary);
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .25rem;
  border-radius: 8px;
}
#mqde-modal .mqde-stepbar .mqde-back:hover { text-decoration: underline; }

.mqde-card.mqde-card--zone,
.mqde-card.mqde-card--carrier {
  color: var(--mqde-text);
}

.mqde-card__title { color: var(--mqde-text); }
.mqde-card__subtitle { color: var(--mqde-muted); }

#mqde-modal a { color: var(--mqde-primary); }

#mqde-modal .mqde-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.mqde-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
  padding: .5rem 0 .25rem;
}

.mqde-card.mqde-card--zone {
  appearance: none;
  border: 1px solid var(--mqde-border);
  background: var(--mqde-bg);
  border-radius: 12px;
  padding: .9rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease;
}
.mqde-card.mqde-card--zone:hover {
  border-color: #d5d9e3;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: scale3d(1.03, 1.06, 1.09);
}
.mqde-card__title {
  font-weight: 500;
  font-size: .98rem;
}

.mqde-carriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: .5rem 0 .25rem;
}

.mqde-card.mqde-card--carrier {
  border: 1px solid var(--mqde-border);
  background: var(--mqde-bg);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .65rem;
  transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease;
}
.mqde-card.mqde-card--carrier:hover {
  border-color: #d5d9e3;
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.mqde-card__head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.mqde-card--carrier .mqde-card__title {
  font-weight: 800;
  font-size: 1.05rem;
}
.mqde-card__subtitle {
  color: var(--mqde-muted);
  font-size: .9rem;
}

.mqde-tiers {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--mqde-border);
  border-radius: 12px;
  background: #fff;
}
.mqde-tiers thead th {
  text-align: left;
  font-weight: 700;
  font-size: .86rem;
  color: #374151;
  background: #f3f4f6;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--mqde-border);
}
.mqde-tiers tbody td {
  padding: .55rem .7rem;
  font-size: .92rem;
  border-bottom: 1px solid var(--mqde-border);
}
.mqde-tiers tbody tr:last-child td { border-bottom: 0; }

.mqde-card__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
}
.mqde-card .mqde-choose{
  background: var(--mqde-choose-bg);
  color: var(--mqde-choose-text);
  border: 1px solid var(--mqde-choose-border);
  border-radius: 10px;
  padding: .55rem .9rem;
  font-size: .92rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  opacity: 1;
}
.mqde-card .mqde-choose:hover,
.mqde-card .mqde-choose:focus{
  background: var(--mqde-choose-bg-hover);
  color: var(--mqde-choose-text-hover);
  border-color: var(--mqde-choose-border-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.mqde-card .mqde-choose:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.mqde-card{
  opacity: 1;
}

.mqde-note {
  font-size: .9rem;
  color: var(--mqde-muted);
  background: #f9fafb;
  border: 1px dashed var(--mqde-border);
  padding: .6rem .7rem;
  border-radius: 10px;
}

.mqde-cutoff    { font-variant-numeric: tabular-nums; }
.mqde-date-num,
.mqde-date-num-short,
.mqde-eta-min,
.mqde-eta-max   { font-variant-numeric: tabular-nums; }

.mqde-countdown, .mqde-cutoff, .mqde-cutoff-smart, .mqde-date, .mqde-date-max, .mqde-date-num, .mqde-date-num-short, .mqde-date-max-num, .mqde-date-max-num-short, .mqde-eta-min, .mqde-eta-max, .mqde-zone {
	font-weight: 700;
}

@media (max-width: 560px) {
  .mqde-banner,
  .mqde-eta-card { align-items: flex-start; }
  .mqde-change   { margin-top: .25rem; }
  #mqde-modal .mqde-modal__dialog { width: 94vw; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --mqde-bg: #0f172a;
    --mqde-surface: #0b1222;
    --mqde-border: #1f2a44;
    --mqde-text: #e5e7eb;
    --mqde-muted: #9ca3af;
    --mqde-shadow: 0 6px 20px rgba(0,0,0,0.45);
	--mqde-primary: #60a5fa;
    --mqde-modal-bg: #0b1222;
    --mqde-modal-text: #e5e7eb;
  }
  #mqde-modal .mqde-modal__close {
    background: #1f2937;
    color: #e5e7eb;
  }
  #mqde-modal .mqde-modal__close:hover { background: #111827; }

  .mqde-card.mqde-card--zone:hover,
  .mqde-card.mqde-card--carrier:hover {
    border-color: #334155;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
  .mqde-tiers { background: #0e1629; }
  .mqde-tiers thead th { background: #0b1326; color: #dbe2ef; }
}

.mqde-change{
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  width: auto !important;
  vertical-align: middle;
}

.mqde-change * { line-height: 1; }

.mqde-chunk{
  white-space: break-spaces;
}

.mqde-pattern{
  white-space: normal;
}

.mqde-countdown,
.mqde-cutoff,
.mqde-cutoff-smart {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

#order-confirmation .mqde-banner {
    display: none;
}

.modal-content .product-additional-info .mqde-eta-card {
    display: none;
}

@media (max-width: 560px) {
.mqde-banner {
    display: none;
}}