/*
  Fixed "+420" prefix for telephone inputs (checkout + account forms).
  Markup: <div class="phone-group"><span class="phone-prefix"><i class="flag-cz"></i>+420</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;
}
/* CZ flag: white/red halves + blue triangle from the hoist to the centre (two half-boxes with diagonal gradients) */
.phone-group .phone-prefix .flag-cz {
  display: inline-block;
  width: 20px;
  height: 13px;
  margin-right: 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); /* keeps the white half visible on the light prefix background */
  background:
    linear-gradient(to top right, #11457e 50%, transparent 50%) left top / 50% 50% no-repeat,
    linear-gradient(to bottom right, #11457e 50%, transparent 50%) left bottom / 50% 50% no-repeat,
    linear-gradient(to bottom, #fff 50%, #d7141a 50%);
}
.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%;
}
/* info text under the checkout telephone field: own full-width row below the floated label + field */
.journal-checkout .phone-note {
  display: block;
  clear: both;
  float: none;
  width: 100%;
  margin: 0;
  padding-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  padding: 2px 0 0 0 !important;
}
.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;
}