/**
 * Hostaway SVG icons — use class only in HTML.
 *
 * Usage: <i class="hcp-icon hcp-icon--guests" aria-hidden="true"></i>
 * Size:  hcp-icon--sm | hcp-icon--md (default) | hcp-icon--lg | hcp-icon--xl
 */
.hcp-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--hcp-icon) center / contain no-repeat;
  mask: var(--hcp-icon) center / contain no-repeat;
}

.hcp-icon--sm { width: 0.875em; height: 0.875em; }
.hcp-icon--md { width: 1.25em; height: 1.25em; }
.hcp-icon--lg { width: 2.5em; height: 2.5em; }
.hcp-icon--xl { width: 4em; height: 4em; }

/* Guests / people */
.hcp-icon--guests {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* Bedroom / home */
.hcp-icon--bedroom {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

/* Bed */
.hcp-icon--bed {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
}

/* Bathroom */
.hcp-icon--bathroom {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v2a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-2z'/%3E%3Cpath d='M6 12V6a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2'/%3E%3Cpath d='M8 20v1M16 20v1'/%3E%3C/svg%3E");
}

/* Star / rating */
.hcp-icon--star {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* Location pin */
.hcp-icon--location {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

/* Search */
.hcp-icon--search {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

/* Sleeping arrangement bed (compact) */
.hcp-icon--bed-fill {
  width: 20px;
  height: 14px;
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath fill='black' d='M.75 14c-.217 0-.396-.071-.538-.213A.73.73 0 0 1 0 13.25V7.625c0-.417.083-.808.25-1.175.167-.367.417-.667.75-.9V2.65C1 1.9 1.254 1.271 1.763.763 2.271.254 2.9 0 3.65 0h4.5c.367 0 .708.083 1.025.25.317.167.592.392.825.675.233-.283.504-.508.813-.675C11.121.083 11.458 0 11.825 0h4.5c.75 0 1.383.254 1.9.763.517.508.775 1.137.775 1.887v2.9c.333.233.583.533.75.9.167.367.25.758.25 1.175V13.25c0 .217-.071.396-.213.538A.73.73 0 0 1 19.25 14a.73.73 0 0 1-.538-.212A.73.73 0 0 1 18.5 13.25V12h-17v1.25c0 .217-.071.396-.213.538A.73.73 0 0 1 .75 14zm10-8.875h6.75V2.65c0-.333-.113-.608-.338-.825A1.12 1.12 0 0 0 16.325 1.5H11.75c-.283 0-.521.117-.713.35-.192.233-.287.5-.287.8v2.475zM2.5 5.125h6.75V2.65c0-.3-.096-.567-.288-.8A.94.94 0 0 0 8.25 1.5H3.65c-.317 0-.588.113-.813.338A1.11 1.11 0 0 0 2.5 2.65v2.475zM1.5 10.5h17V7.625c0-.283-.096-.521-.288-.713A.94.94 0 0 0 17.5 6.625h-15c-.283 0-.521.096-.713.288A.94.94 0 0 0 1.5 7.625V10.5z'/%3E%3C/svg%3E");
}

/* Alert / empty state */
.hcp-icon--alert {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

/* Gallery grid */
.hcp-icon--grid {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

/* Chevrons */
.hcp-icon--chevron-left {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.hcp-icon--chevron-right {
  --hcp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Spinner (load more) */
.hcp-icon--spinner {
  width: 40px;
  height: 40px;
  border: 4px solid color-mix(in srgb, var(--hostaway-color-primary, #FF385C) 25%, transparent);
  border-top-color: var(--hostaway-color-primary, #FF385C);
  border-radius: 50%;
  background: none;
  -webkit-mask: none;
  mask: none;
  animation: hcp-icon-spin 0.8s linear infinite;
}

/* Empty / muted icons */
.hostaway-no-results .hcp-icon--alert,
.no-results-icon .hcp-icon {
  color: var(--hostaway-color-text-muted, #94a3b8);
}

/* Gallery overlay sits on a light button, so the glyph uses text color */
.property-gallery .overlay .hcp-icon {
  width: 16px;
  height: 16px;
  color: var(--hostaway-color-text);
}