/*
  ETH Transport Quote – Vibrant UI
  This stylesheet is intentionally scoped to the plugin wrapper so it won't
  leak into the theme, and so it can reliably override theme defaults.
*/

:root{
  /* Slightly brighter base so text is clearly readable on mobile/tablet */
  --eth-bg: #0b1224;
  --eth-card: rgba(255,255,255,.10);
  --eth-border: rgba(255,255,255,.14);
  --eth-text: #f3f7ff;
  --eth-muted: rgba(234,242,255,.75);
  --eth-ac1: #7c3aed;
  --eth-ac2: #06b6d4;
  --eth-ac3: #22c55e;
  --eth-shadow: 0 18px 55px rgba(0,0,0,.40);
}

.eth-transport-quote.eth-tq-wrap{
  padding: 20px 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--eth-text);
}

.eth-transport-quote .eth-tq-card{
  max-width: 980px;
  margin: 0 auto;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(124,58,237,.35), transparent 55%),
              radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,.28), transparent 55%),
              var(--eth-bg);
  border: 1px solid var(--eth-border);
  border-radius: 18px;
  box-shadow: var(--eth-shadow);
  overflow: hidden;
}

.eth-transport-quote .eth-tq-header{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--eth-border);
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.22));
}

.eth-transport-quote .eth-tq-header h2{ margin:0; font-size: 22px; letter-spacing:.2px; }
.eth-transport-quote .eth-tq-sub{ margin:6px 0 0; color: var(--eth-muted); }

.eth-transport-quote .eth-tq-badge{
  align-self:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
}

/* =====================
   Step-style picker (clickable)
   ===================== */
.eth-transport-quote .eth-tq-picker{
  margin: 12px 22px 0;
  padding: 14px 14px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77,201,240,0.10), rgba(118,86,245,0.08));
}
.eth-transport-quote .eth-tq-picker-steps{display:flex; gap:8px; align-items:center; margin-bottom:10px;}
.eth-transport-quote .eth-tq-step{
  width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
  color: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
}
.eth-transport-quote .eth-tq-step.is-active{
  color:#fff;
  border-color: rgba(6,182,212,.65);
  box-shadow: 0 0 0 2px rgba(6,182,212,.12);
}
.eth-transport-quote .eth-tq-picker-title{font-weight:700; margin-bottom:10px; color: rgba(255,255,255,0.92);}
.eth-transport-quote .eth-tq-picker-grid{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px;}
.eth-transport-quote .eth-tq-pick{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background: rgba(0,0,0,0.14);
  color:#fff;
  padding:14px 10px;
  display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .10s ease, border-color .14s ease, filter .14s ease, box-shadow .14s ease;
}
.eth-transport-quote .eth-tq-pick[data-type="pets"]{background: linear-gradient(135deg, rgba(59,130,246,.42), rgba(59,130,246,.16));}
.eth-transport-quote .eth-tq-pick[data-type="caravan"]{background: linear-gradient(135deg, rgba(34,197,94,.42), rgba(34,197,94,.16));}
.eth-transport-quote .eth-tq-pick[data-type="motorcycles"]{background: linear-gradient(135deg, rgba(249,115,22,.42), rgba(249,115,22,.16));}
.eth-transport-quote .eth-tq-pick[data-type="pallets"]{background: linear-gradient(135deg, rgba(239,68,68,.42), rgba(239,68,68,.16));}
.eth-transport-quote .eth-tq-pick[data-type="general"]{background: linear-gradient(135deg, rgba(14,165,233,.42), rgba(14,165,233,.16));}
.eth-transport-quote .eth-tq-pick:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.26); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(0,0,0,.25);}
.eth-transport-quote .eth-tq-pick.is-active{border-color: rgba(6,182,212,.80); box-shadow: 0 0 0 2px rgba(6,182,212,.16);}
.eth-transport-quote .eth-tq-pick-ico{font-size:24px; line-height:1;}
.eth-transport-quote .eth-tq-pick-txt{font-weight:800; font-size:13px; opacity:0.98;}
@media (max-width: 720px){
  .eth-transport-quote .eth-tq-picker{margin-left: 16px; margin-right: 16px;}
  .eth-transport-quote .eth-tq-picker-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.eth-transport-quote .eth-tq-form{ padding: 18px 22px 22px; }
.eth-transport-quote .eth-tq-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 900px){
  .eth-transport-quote .eth-tq-grid{ grid-template-columns: 1fr; }
}

.eth-transport-quote .eth-tq-field label{
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(234,242,255,.92);
}

.eth-transport-quote .eth-tq-field input,
.eth-transport-quote .eth-tq-field select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  color: var(--eth-text);
  outline: none;
  caret-color: var(--eth-text);
}

.eth-transport-quote .eth-tq-field input:focus,
.eth-transport-quote .eth-tq-field select:focus{
  border-color: rgba(6,182,212,.65);
  box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}

.eth-transport-quote .eth-tq-field input::placeholder{ color: rgba(243,247,255,.72); }
.eth-transport-quote .eth-tq-field small{ color: rgba(234,242,255,.70); display:block; margin-top: 6px; }

.eth-tq-type{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.eth-tq-type label{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  user-select:none;
}
.eth-tq-type input{ accent-color: var(--eth-ac2); }

.eth-transport-quote .eth-tq-result{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
}

.eth-transport-quote .eth-tq-result-row{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
@media (max-width: 900px){
  .eth-transport-quote .eth-tq-result-row{ flex-direction: column; align-items: stretch; }
}

.eth-transport-quote .eth-tq-result-label{ font-size: 12px; color: rgba(234,242,255,.7); }
.eth-transport-quote .eth-tq-result-price{ font-size: 32px; font-weight: 900; letter-spacing: .3px; margin-top: 4px; }
.eth-transport-quote .eth-tq-result-meta{ margin-top: 6px; color: rgba(234,242,255,.78); font-size: 13px; }

.eth-transport-quote .eth-tq-actions{ display:flex; gap: 10px; }

.eth-transport-quote .eth-tq-btn{
  appearance:none;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  cursor:pointer;
}
.eth-transport-quote .eth-tq-btn-ghost{
  color: var(--eth-text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
}
.eth-transport-quote .eth-tq-btn-primary{
  color: #07101f;
  background: linear-gradient(135deg, var(--eth-ac2), var(--eth-ac1));
}

.eth-tq-breakdown{ margin-top: 10px; }
.eth-tq-bd-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.eth-tq-bd-row{
  display:flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.eth-tq-bd-row-total{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.25);
}

.eth-tq-msg{
  margin-top: 10px;
  font-weight: 700;
}
.eth-tq-msg.ok{ color: #7CFFB0; }
.eth-tq-msg.err{ color: #FFB4B4; }

.eth-tq-footnote{
  margin: 14px 0 0;
  color: rgba(234,242,255,.65);
  font-size: 12px;
}


/* Services strip (visual categories) */
.eth-tq-services{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  margin:14px 0 16px;
}
.eth-tq-service{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  user-select:none;
  font-weight:600;
}
.eth-tq-service:hover{ background: rgba(255,255,255,.10); }
.eth-tq-service.active{ outline:2px solid rgba(122,184,255,.55); }
.eth-tq-ico{ font-size:18px; line-height:1; }
@media (max-width: 720px){
  .eth-tq-services{ grid-template-columns: 1fr 1fr; }
}

/* --- Hard override for themes that force low-contrast inputs --- */
.eth-tq-wrap input,
.eth-tq-wrap select,
.eth-tq-wrap textarea {
  color: var(--eth-text) !important;
  -webkit-text-fill-color: var(--eth-text) !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.eth-tq-wrap input::placeholder,
.eth-tq-wrap select:invalid {
  color: rgba(255,255,255,0.65) !important;
}
.eth-tq-wrap label,
.eth-tq-wrap .eth-tq-note,
.eth-tq-wrap .eth-tq-sub {
  color: rgba(255,255,255,0.92) !important;
}

/* --- Route map (shown after calculation) --- */
.eth-tq-map-wrap{
  margin-top: 14px;
}
.eth-tq-map{
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
@media (max-width: 720px){
  .eth-tq-map{ height: 260px; }
}


.eth-transport-quote .eth-tq-premium-box{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);}
.eth-transport-quote .eth-tq-premium-toggle{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.eth-transport-quote .eth-tq-premium-toggle input{margin-top:4px;accent-color: var(--eth-ac3);}
.eth-transport-quote .eth-tq-premium-toggle strong{font-size:15px;}
.eth-transport-quote .eth-tq-premium-toggle small{color: rgba(234,242,255,.82);}
.eth-transport-quote .eth-tq-premium-rule{display:inline-block;margin-top:6px;font-weight:700;color:#fff;}
.eth-transport-quote .eth-tq-premium-live{margin-top:8px;font-weight:700;color:#fff;}


.eth-transport-quote .eth-tq-accept.eth-tq-loading,
.eth-transport-quote .eth-tq-accept.eth-tq-sent{
  opacity:.72;
  cursor:not-allowed;
}


.eth-tq-market-rate{margin:0 0 14px;}
.eth-tq-market-rate label{display:block;margin:0 0 6px;}
.eth-tq-market-rate select{width:100%;max-width:320px;padding:10px 12px;border:1px solid #d0d7de;border-radius:10px;background:#fff;}


.eth-transport-quote .eth-tq-market-rate-fixed{
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #d8dee6;
  border-radius: 12px;
  background: #f7f9fc;
}
.eth-transport-quote .eth-tq-market-rate-value{
  font-weight: 700;
  margin-top: 4px;
}