/* ================================================================
   Maurya Delivery Radius Engine — Frontend Popup CSS v1.0.0
   Premium quick-commerce style (Blinkit / Zepto / PharmEasy)
   ================================================================ */

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --mdre-primary:       #4f46e5;
  --mdre-primary-dark:  #3730a3;
  --mdre-primary-glow:  rgba(79, 70, 229, 0.18);
  --mdre-success:       #16a34a;
  --mdre-success-bg:    #f0fdf4;
  --mdre-success-border:#bbf7d0;
  --mdre-error:         #dc2626;
  --mdre-error-bg:      #fef2f2;
  --mdre-error-border:  #fecaca;
  --mdre-text:          #1e293b;
  --mdre-muted:         #64748b;
  --mdre-border:        #e2e8f0;
  --mdre-bg:            #ffffff;
  --mdre-radius:        18px;
  --mdre-radius-sm:     10px;
  --mdre-shadow:        0 32px 72px rgba(0,0,0,0.28), 0 8px 20px rgba(0,0,0,0.10);
  --mdre-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mdre-z:             9999990;
}

/* ── Overlay ──────────────────────────────────────────────────── */
.maurya-dre-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: var(--mdre-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--mdre-font);
}

body.maurya-dre-open {
  overflow: hidden !important;
}

/* ── Modal ────────────────────────────────────────────────────── */
.maurya-dre-modal {
  background: var(--mdre-bg);
  border-radius: var(--mdre-radius);
  box-shadow: var(--mdre-shadow);
  width: 100%;
  max-width: 488px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
  animation: mdre-modal-in 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  scrollbar-width: thin;
  scrollbar-color: var(--mdre-border) transparent;
}
.maurya-dre-modal::-webkit-scrollbar { width: 5px; }
.maurya-dre-modal::-webkit-scrollbar-track { background: transparent; }
.maurya-dre-modal::-webkit-scrollbar-thumb { background: var(--mdre-border); border-radius: 99px; }

@keyframes mdre-modal-in {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── Modal Header ─────────────────────────────────────────────── */
.maurya-dre-modal__header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 0;
}

.maurya-dre-modal__logo { flex-shrink: 0; }

.maurya-dre-modal__title {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--mdre-text) !important;
  line-height: 1.3 !important;
  border: none !important;
}

.maurya-dre-modal__close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 19px;
  line-height: 1;
  color: var(--mdre-muted);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.maurya-dre-modal__close:hover {
  background: #f1f5f9;
  color: var(--mdre-error);
}

/* ── Subtitle ─────────────────────────────────────────────────── */
.maurya-dre-modal__subtitle {
  margin: 10px 20px 18px !important;
  font-size: 13px !important;
  color: var(--mdre-muted) !important;
  line-height: 1.55 !important;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.maurya-dre-tabs {
  display: flex;
  margin: 0 20px 18px;
  background: #f8fafc;
  border: 1.5px solid var(--mdre-border);
  border-radius: var(--mdre-radius-sm);
  overflow: hidden;
  padding: 3px;
  gap: 3px;
}

.maurya-dre-tab {
  flex: 1;
  padding: 9px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mdre-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  font-family: var(--mdre-font);
}
.maurya-dre-tab--active {
  background: var(--mdre-primary);
  color: #fff;
  box-shadow: 0 2px 8px var(--mdre-primary-glow);
}
.maurya-dre-tab:hover:not(.maurya-dre-tab--active) {
  background: #f1f5f9;
  color: var(--mdre-text);
}

/* ── Panels ───────────────────────────────────────────────────── */
.maurya-dre-panel {
  padding: 0 20px 14px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.maurya-dre-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: var(--mdre-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: var(--mdre-font);
  text-decoration: none !important;
  box-sizing: border-box;
}
.maurya-dre-btn:active { transform: scale(0.97); }

/* GPS / detect button */
.maurya-dre-btn--gps {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(79,70,229,0.38);
}
.maurya-dre-btn--gps:hover {
  background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%);
  box-shadow: 0 6px 24px rgba(79,70,229,0.48);
}

/* Confirm / proceed button */
.maurya-dre-btn--confirm {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(22,163,74,0.38);
}
.maurya-dre-btn--confirm:hover {
  box-shadow: 0 6px 24px rgba(22,163,74,0.48);
}

/* Cancel button */
.maurya-dre-btn--cancel {
  background: #f8fafc;
  color: var(--mdre-muted);
  border: 1.5px solid var(--mdre-border);
  margin-top: 9px;
  font-weight: 600;
}
.maurya-dre-btn--cancel:hover { background: #f1f5f9; }

/* ── GPS Status ───────────────────────────────────────────────── */
.maurya-dre-gps-status {
  margin-top: 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mdre-muted);
  min-height: 22px;
  line-height: 1.5;
}
.maurya-dre-gps-status.success { color: var(--mdre-success); }
.maurya-dre-gps-status.error   { color: var(--mdre-error); }

.maurya-dre-coords-preview {
  margin-top: 9px;
  font-size: 12px;
  color: var(--mdre-muted);
  background: #f8fafc;
  padding: 9px 13px;
  border-radius: 8px;
  font-family: 'Courier New', Courier, monospace;
  border: 1px solid var(--mdre-border);
}

/* ── Pulse animation (GPS loading) ───────────────────────────── */
.maurya-dre-pulse {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mdre-primary);
  animation: mdre-pulse 1.1s ease-in-out infinite;
  margin-right: 5px;
  vertical-align: middle;
}
@keyframes mdre-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.6); opacity: 0.55; }
}

/* ── Address search ───────────────────────────────────────────── */
.maurya-dre-search-wrap { position: relative; }

.maurya-dre-address-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--mdre-border);
  border-radius: var(--mdre-radius-sm);
  font-size: 14px;
  font-family: var(--mdre-font);
  color: var(--mdre-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  background: #fff;
}
.maurya-dre-address-input:focus {
  border-color: var(--mdre-primary);
  box-shadow: 0 0 0 3px var(--mdre-primary-glow);
}
.maurya-dre-address-input::placeholder { color: #94a3b8; }

/* ── Suggestions ─────────────────────────────────────────────── */
.maurya-dre-suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--mdre-border);
  border-radius: var(--mdre-radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.13);
  z-index: calc(var(--mdre-z) + 10);
  max-height: 230px;
  overflow-y: auto;
}

.maurya-dre-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.13s;
  border-bottom: 1px solid #f8fafc;
}
.maurya-dre-suggestion-item:last-child { border-bottom: none; }
.maurya-dre-suggestion-item:hover      { background: #f8fafc; }

.maurya-dre-suggestion-icon { flex-shrink: 0; font-size: 13px; margin-top: 2px; }
.maurya-dre-suggestion-text { font-size: 13px; color: var(--mdre-text); line-height: 1.45; }

.maurya-dre-no-results {
  padding: 14px;
  font-size: 13px;
  color: var(--mdre-muted);
  text-align: center;
}

.maurya-dre-selected-address {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--mdre-success-bg);
  border: 1px solid var(--mdre-success-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--mdre-success);
  line-height: 1.5;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.maurya-dre-spinner-wrap {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  color: var(--mdre-muted);
  font-size: 13px;
}

.maurya-dre-spinner {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--mdre-primary);
  border-radius: 50%;
  animation: mdre-spin 0.72s linear infinite;
}
@keyframes mdre-spin { to { transform: rotate(360deg); } }

/* ── Result ──────────────────────────────────────────────────── */
.maurya-dre-result {
  margin: 0 20px 14px;
  padding: 14px 16px;
  border-radius: var(--mdre-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}
.maurya-dre-result.success {
  background: var(--mdre-success-bg);
  color: var(--mdre-success);
  border: 1.5px solid var(--mdre-success-border);
}
.maurya-dre-result.error {
  background: var(--mdre-error-bg);
  color: var(--mdre-error);
  border: 1.5px solid var(--mdre-error-border);
}

.maurya-dre-dist-info {
  display: block;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.88;
  margin-top: 5px;
}
.maurya-dre-fallback-note {
  color: #b45309;
  font-size: 11px;
}

/* ── Modal Footer ────────────────────────────────────────────── */
.maurya-dre-modal__footer {
  padding: 0 20px 22px;
  display: flex;
  flex-direction: column;
}

/* ── Delivery Bar ────────────────────────────────────────────── */
.maurya-dre-delivery-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
  color: #fff;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: calc(var(--mdre-z) - 10);
  font-family: var(--mdre-font);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 -4px 20px rgba(79,70,229,0.32);
}

.maurya-dre-bar__icon { font-size: 16px; flex-shrink: 0; }
.maurya-dre-bar__text { flex: 1; }

.maurya-dre-bar__change {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  padding: 5px 13px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--mdre-font);
  flex-shrink: 0;
}
.maurya-dre-bar__change:hover { background: rgba(255,255,255,0.28); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .maurya-dre-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .maurya-dre-modal {
    max-height: 96vh;
    border-radius: var(--mdre-radius) var(--mdre-radius) 0 0;
    max-width: 100%;
  }
  .maurya-dre-modal__title { font-size: 15px !important; }
  .maurya-dre-delivery-bar { flex-wrap: wrap; gap: 6px; }
}

/* ── Print — hide popup entirely ─────────────────────────────── */
@media print {
  .maurya-dre-overlay,
  .maurya-dre-delivery-bar { display: none !important; }
}