/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Droid Arabic Kufi";
  src: url("/assets/droid_arabic_kufi_regular-f5128f4f.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



.offer-locations-select {
  position: relative;
}

.offer-locations-select__trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d6c7dd;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  font-size: 14px;
  color: #2a2330;
  cursor: pointer;
}

.offer-locations-select__trigger:focus-visible {
  outline: 2px solid #733680;
  outline-offset: 1px;
}

.offer-locations-select__chevron {
  color: #6f6176;
  font-size: 12px;
}

.offer-locations-select__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #d6c7dd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(41, 14, 49, 0.12);
  padding: 6px;
}

.offer-locations-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  color: #2a2330;
  cursor: pointer;
}

.offer-locations-select__option:hover {
  background: #f7f2fa;
}

.offer-locations-select__option--all {
  font-weight: 600;
}

.offer-locations-select__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #733680;
  margin: 0;
  flex: 0 0 auto;
}

.offer-locations-select__divider {
  height: 1px;
  background: #ece4f0;
  margin: 4px 2px;
}