/* Country Flags SVG Icons */
.country-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Slovakia Flag */
.country-flag.sk {
  background: linear-gradient(to bottom,
      #ffffff 0%, #ffffff 33.33%,
      #0b4ea2 33.33%, #0b4ea2 66.66%,
      #ee1c25 66.66%, #ee1c25 100%);
}

/* Czech Republic Flag */
.country-flag.cz {
  background: linear-gradient(to right,
      #ffffff 0%, #ffffff 50%,
      #d7141a 50%, #d7141a 100%);
  position: relative;
}

.country-flag.cz::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #11457e;
}

/* Poland Flag */
.country-flag.pl {
  background: linear-gradient(to bottom,
      #ffffff 0%, #ffffff 50%,
      #dc143c 50%, #dc143c 100%);
}

/* Hungary Flag */
.country-flag.hu {
  background: linear-gradient(to bottom,
      #ce1126 0%, #ce1126 33.33%,
      #ffffff 33.33%, #ffffff 66.66%,
      #008a00 66.66%, #008a00 100%);
}

/* Germany Flag */
.country-flag.de {
  background: linear-gradient(to bottom,
      #000000 0%, #000000 33.33%,
      #dd0000 33.33%, #dd0000 66.66%,
      #ffce00 66.66%, #ffce00 100%);
}

/* Austria Flag */
.country-flag.at {
  background: linear-gradient(to bottom,
      #ed2939 0%, #ed2939 33.33%,
      #ffffff 33.33%, #ffffff 66.66%,
      #ed2939 66.66%, #ed2939 100%);
}

/* Custom Select Styling with Flags */
.phb-country-selector select {
  padding-left: 40px !important;
  background-position: 12px center !important;
  background-size: 20px 15px !important;
}

/* Flag Backgrounds for Select Options */
.phb-country-selector select option[value="SK"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ffffff'/%3E%3Crect y='5' width='20' height='5' fill='%230b4ea2'/%3E%3Crect y='10' width='20' height='5' fill='%23ee1c25'/%3E%3C/svg%3E");
}

.phb-country-selector select option[value="CZ"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='10' height='15' fill='%23ffffff'/%3E%3Crect x='10' width='10' height='15' fill='%23d7141a'/%3E%3Cpolygon points='0,0 10,7.5 0,15' fill='%2311457e'/%3E%3C/svg%3E");
}

.phb-country-selector select option[value="PL"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='7.5' fill='%23ffffff'/%3E%3Crect y='7.5' width='20' height='7.5' fill='%23dc143c'/%3E%3C/svg%3E");
}

.phb-country-selector select option[value="HU"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ce1126'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23008a00'/%3E%3C/svg%3E");
}

.phb-country-selector select option[value="DE"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23000000'/%3E%3Crect y='5' width='20' height='5' fill='%23dd0000'/%3E%3Crect y='10' width='20' height='5' fill='%23ffce00'/%3E%3C/svg%3E");
}

.phb-country-selector select option[value="AT"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ed2939'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23ed2939'/%3E%3C/svg%3E");
}

/* Custom Select with Flag Icon */
.phb-country-selector {
  position: relative;
}

.phb-country-selector::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 15px;
  background-size: 20px 15px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Flag for each country in the select */
.phb-country-selector select option[value="SK"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ffffff'/%3E%3Crect y='5' width='20' height='5' fill='%230b4ea2'/%3E%3Crect y='10' width='20' height='5' fill='%23ee1c25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

.phb-country-selector select option[value="CZ"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='10' height='15' fill='%23ffffff'/%3E%3Crect x='10' width='10' height='15' fill='%23d7141a'/%3E%3Cpolygon points='0,0 10,7.5 0,15' fill='%2311457e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

.phb-country-selector select option[value="PL"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='7.5' fill='%23ffffff'/%3E%3Crect y='7.5' width='20' height='7.5' fill='%23dc143c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

.phb-country-selector select option[value="HU"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ce1126'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23008a00'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

.phb-country-selector select option[value="DE"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23000000'/%3E%3Crect y='5' width='20' height='5' fill='%23dd0000'/%3E%3Crect y='10' width='20' height='5' fill='%23ffce00'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

.phb-country-selector select option[value="AT"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ed2939'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23ed2939'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 12px;
  padding-left: 30px;
}

/* Flag for each country */
.phb-country-selector[data-selected="SK"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ffffff'/%3E%3Crect y='5' width='20' height='5' fill='%230b4ea2'/%3E%3Crect y='10' width='20' height='5' fill='%23ee1c25'/%3E%3C/svg%3E");
}

.phb-country-selector[data-selected="CZ"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='10' height='15' fill='%23ffffff'/%3E%3Crect x='10' width='10' height='15' fill='%23d7141a'/%3E%3Cpolygon points='0,0 10,7.5 0,15' fill='%2311457e'/%3E%3C/svg%3E");
}

.phb-country-selector[data-selected="PL"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='7.5' fill='%23ffffff'/%3E%3Crect y='7.5' width='20' height='7.5' fill='%23dc143c'/%3E%3C/svg%3E");
}

.phb-country-selector[data-selected="HU"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ce1126'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23008a00'/%3E%3C/svg%3E");
}

.phb-country-selector[data-selected="DE"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23000000'/%3E%3Crect y='5' width='20' height='5' fill='%23dd0000'/%3E%3Crect y='10' width='20' height='5' fill='%23ffce00'/%3E%3C/svg%3E");
}

.phb-country-selector[data-selected="AT"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ed2939'/%3E%3Crect y='5' width='20' height='5' fill='%23ffffff'/%3E%3Crect y='10' width='20' height='5' fill='%23ed2939'/%3E%3C/svg%3E");
}

/* Default flag (Slovakia) */
.phb-country-selector::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Crect width='20' height='5' fill='%23ffffff'/%3E%3Crect y='5' width='20' height='5' fill='%230b4ea2'/%3E%3Crect y='10' width='20' height='5' fill='%23ee1c25'/%3E%3C/svg%3E");
}

/* Hover and Focus States */
.phb-country-selector select:hover+.country-flag,
.phb-country-selector select:focus+.country-flag {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .country-flag {
    width: 18px;
    height: 13px;
    margin-right: 6px;
  }

  .phb-country-selector::before {
    width: 18px;
    height: 13px;
    background-size: 18px 13px;
    left: 10px;
  }
}