/*
  Fixed "+370" prefix for telephone inputs (checkout + account forms).
  Markup: <div class="phone-group"><span class="phone-prefix"><i class="flag-lt"></i>+370</span><input class="form-control"></div>
*/
.phone-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.phone-group .phone-prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  color: #666;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.phone-group .phone-prefix .flag-lt {
  display: inline-block;
  width: 20px;
  height: 13px;
  margin-right: 6px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fdb913 0, #fdb913 33.34%, #006a44 33.34%, #006a44 66.67%, #c1272d 66.67%, #c1272d 100%);
}
.phone-group input.form-control {
  flex: 1 1 0%; /* basis 0: theme sets width:100% !important, which would wrap the input under the prefix */
  min-width: 0;
  border-radius: 0 4px 4px 0;
}
/* error message (inserted after the input) drops to its own line */
.phone-group .text-danger {
  flex-basis: 100%;
}
.has-error .phone-group .phone-prefix {
  border-color: #ea2e49; /* same as the theme's .has-error input border */
}

/* Journal2 one-page checkout, floating labels (#container.default-checkout, e.g. moea.lt):
   the field takes the whole row, the label sits inside the input after the prefix */
.default-checkout .journal-checkout .left .checkout-content label + .phone-group,
.default-checkout .journal-checkout .left .checkout-register label + .phone-group {
  width: 100%;
  float: none;
}
.default-checkout .phone-group .phone-prefix {
  font-size: 16px;
}
.default-checkout .form-group label[for="input-payment-telephone"] {
  left: 99px; /* prefix width + input padding-left (13px) */
}

/* Journal2 one-page checkout, label beside the field (e.g. eternl.lt): layout comes from
   pages.css ("label + div" floats right at 65%), look matches the square inputs and the "LT-" postcode prefix */
.j-container:not(.default-checkout) .journal-checkout .phone-group .phone-prefix {
  padding: 0 8px;
  font-size: 15px;
  color: #9c9c9c;
  background: #fbfbfb;
  border-radius: 0;
}
.j-container:not(.default-checkout) .journal-checkout .phone-group input.form-control {
  border-radius: 0;
}

/* account forms (form-horizontal, smaller square inputs) */
.form-horizontal .phone-group .phone-prefix {
  font-size: 13px;
  border-color: #e4e4e4;
  border-radius: 0;
  background: #f7f7f7;
}
.form-horizontal .phone-group input.form-control {
  border-radius: 0;
}