/* ======================== WIDTH WRAPPER ======================== */
/* Put [aldesun_tariff_v2] inside <div class="tariff-wrap alignwide">…</div> */
.tariff-wrap{
  /* Use theme wide container if available; fallback to 1240px */
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin: 0 auto;
  padding: 0 16px;         /* small side padding on mobile */
}
/* If you need full-bleed like the hero, add class "alignfull" to wrapper */
.tariff-wrap.alignfull{ max-width:none; }

/* ======================== CONTAINER =========================== */
#tariff-bar-v2{
  position:relative;      /* anchor for the autocomplete menu */
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:stretch;
  max-width:100%;         /* fill wrapper */
  margin:2rem auto;
  padding:1rem 1.2rem;
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
#tariff-bar-v2 .frm_form_field{display:flex;flex-direction:column;gap:.35rem}
#tariff-bar-v2 .frm_form_field label{font-size:.9rem;font-weight:700;color:#0a2a79}

/* =================== UNIFIED CONTROL LOOK ===================== */
#tariff-bar-v2 input,
#tariff-bar-v2 select,
#tariff-bar-v2 button{
  height:46px;
  box-sizing:border-box;
  font: 1rem/1.2 inherit;
  padding:.55rem 1.1rem;
  border-radius:30px;
  background-color:#f7f9fc;   /* keep same color when filled/focused */
  color:#0a2a79;
  border:1px solid #c9cfe0;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#tariff-bar-v2 input:focus,
#tariff-bar-v2 select:focus{
  background-color:#f7f9fc;
  border-color:#0a2a79;
  box-shadow:0 0 0 2px rgba(10,42,121,.15);
}
#tariff-bar-v2 input::placeholder{color:#9aa3b2;opacity:1}

/* Prevent Chrome autofill from changing colors */
#tariff-bar-v2 input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #f7f9fc inset;
  -webkit-text-fill-color:#0a2a79;
  caret-color:#0a2a79;
}

/* ===================== KWH INPUT DECORATIONS ================== */
/* Pencil on the left only when placeholder is visible */
#myv2-kwh:placeholder-shown{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230a2a79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;background-size:18px;
  padding-left:2.1rem;
}
#myv2-kwh:not(:placeholder-shown){ background-image:none; }

/* Always show a caret on the right */
#myv2-kwh{
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230a2a79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:10px center, right 12px center;
  background-size:18px,18px;
  padding-right:2.2rem;
}

/* ==================== BUTTON APPEARANCE ======================= */
#tariff-bar-v2 #calc-button-wrapper{display:flex;justify-content:center;margin:.8rem auto 0}
#tariff-bar-v2 #myv2-calc-button{
  background:#0b0b73;color:#fff;font-weight:700;
  padding:.8rem 2.0rem;border:none;border-radius:30px;height:46px;
  transition:background .18s, transform .15s;
}
#tariff-bar-v2 #myv2-calc-button:hover:not([disabled]){background:#0e0e90;transform:translateY(-2px)}
#tariff-bar-v2 #myv2-calc-button[disabled]{opacity:.45;cursor:not-allowed}

/* ========== DESKTOP ROW (PLZ | kWh | Button on one line) ====== */
@media (min-width:640px){
  #tariff-bar-v2{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    column-gap:1.2rem; row-gap:0;
    align-items:end;
  }
  #tariff-bar-v2 #calc-button-wrapper{
    grid-column:3/4; grid-row:1; justify-self:end; margin:0;
  }
  #tariff-bar-v2 #myv2-calc-result{
    grid-column:1 / -1; grid-row:2; margin-top:1.2rem;
  }
}

/* ======================= MOBILE =============================== */
@media (max-width:639px){
  #tariff-bar-v2{flex-direction:column;gap:1rem}
}

/* ===================== RESULT / ERRORS ======================== */
#tariff-bar-v2 #myv2-calc-result p{color:#b00000;font-weight:600;margin-top:1rem}

/* ===================== RESULT CARD ============================ */
#tariff-bar-v2 .tariff-box{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  background:#fff;border:1px solid #ccc;border-radius:12px;
  padding:1.5rem;margin-top:2rem;box-shadow:0 4px 12px rgba(0,0,0,.05)
}
#tariff-bar-v2 .tariff-col{flex:1 1 30%;display:flex;flex-direction:column;justify-content:center}
#tariff-bar-v2 .tariff-info .tariff-badge{background:#ffd000;color:#003366;font-weight:700;padding:.3rem .6rem;border-radius:4px;display:inline-block;margin-bottom:.5rem}
#tariff-bar-v2 .tariff-info .tariff-name{font-size:1.4rem;font-weight:800;color:#003366}
#tariff-bar-v2 .tariff-info .tariff-sub{font-size:.9rem;color:#666}
#tariff-bar-v2 .tariff-features ul{list-style:none;padding:0;margin:0 0 1rem}
#tariff-bar-v2 .tariff-details ul{list-style:none;margin:0;padding:0}
#tariff-bar-v2 .tariff-details li{font-size:.9rem;margin-bottom:.2rem}
#tariff-bar-v2 .tariff-price{text-align:center}
#tariff-bar-v2 .tariff-amount{font-size:2rem;font-weight:800;color:#003366}
#tariff-bar-v2 .tariff-desc{font-size:.9rem;margin:.5rem 0}
#tariff-bar-v2 .tariff-month{font-size:.85rem;color:#4a4a4a;margin-top:.25rem}
#tariff-bar-v2 .btn-order{display:inline-block;margin-top:.8rem;padding:.5rem 1.2rem;background:#ffd000;color:#003366;font-weight:700;font-size:.95rem;border-radius:30px;text-decoration:none;transition:background .2s}
#tariff-bar-v2 .btn-order:hover{background:#ffbe00}

/* =================== AUTOCOMPLETE MENU ======================== */
#tariff-bar-v2 .ui-autocomplete{
  position:absolute;
  max-height:260px;overflow-y:auto;overflow-x:hidden;
  background:#fff;border:1px solid #cfd6e6;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  z-index:9999
}
#tariff-bar-v2 .ui-menu-item{padding:10px 14px;cursor:pointer}
#tariff-bar-v2 .ui-menu-item-wrapper{color:#0a2a79}
#tariff-bar-v2 .ui-menu-item-wrapper.ui-state-active{
  background:#eef5ff;color:#0a2a79
}

/* PLZ suggestions: bold PLZ */
#tariff-bar-v2 .my-sugg .my-plz{font-weight:800}

/* =================== KWH ICONS (fixed URIs) =================== */
#tariff-bar-v2 .kwh-sugg{display:flex;align-items:center;gap:.7rem}
#tariff-bar-v2 .kwh-ico{
  width:22px;height:22px;display:inline-block;flex:0 0 22px;
  background-repeat:no-repeat;background-size:22px 22px;opacity:.95
}

/* 1 person */
#tariff-bar-v2 .kwh-ico.p1{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a2a79'%3E%3Ccircle cx='12' cy='7' r='3.3'/%3E%3Cpath d='M4 20c0-4 3.7-6 8-6s8 2 8 6H4z'/%3E%3C/svg%3E");
}
/* 2 persons */
#tariff-bar-v2 .kwh-ico.p2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a2a79'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2 20c0-3.2 3-5 6-5s6 1.8 6 5H2z'/%3E%3Cpath d='M10 20c0-3 2.7-4.6 5.5-4.6S21 17 21 20H10z' opacity='.75'/%3E%3C/svg%3E");
}
/* 3 persons */
#tariff-bar-v2 .kwh-ico.p3{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a2a79'%3E%3Ccircle cx='6.2' cy='8.5' r='2.6'/%3E%3Ccircle cx='12' cy='7.2' r='3'/%3E%3Ccircle cx='17.8' cy='8.5' r='2.6'/%3E%3Cpath d='M1.6 20c0-2.7 2.5-4.2 5-4.2S12 17.3 12 20H1.6z'/%3E%3Cpath d='M6 20c0-3 2.8-4.6 5.7-4.6S18 17 18 20H6z' opacity='.8'/%3E%3C/svg%3E");
}
/* 4 persons */
#tariff-bar-v2 .kwh-ico.p4{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a2a79'%3E%3Ccircle cx='6.5' cy='8.3' r='2.3'/%3E%3Ccircle cx='11' cy='7.3' r='2.6'/%3E%3Ccircle cx='15.5' cy='8.3' r='2.3'/%3E%3Ccircle cx='20' cy='9.1' r='2'/%3E%3Cpath d='M2 20c0-2.5 2.3-3.9 4.6-3.9S12 17.5 12 20H2z'/%3E%3Cpath d='M6 20c0-3 2.8-4.6 5.7-4.6S18 17 18 20H6z' opacity='.85'/%3E%3C/svg%3E");
}