/* Components layer for reusable UI pieces.
   Allowed: component blocks, elements, and state rules.
   Not allowed: base vars, layout helpers, feature-specific, forms.
   Override policy: may override 00-base.css and 10-layout.css; may be overridden by later layers.
   Notes for Codex: Edit only this file when changing component styling.
   Last updated: 2026-02-04 */


/* 
* Buttons
* Fields
* Icon Formatter
* Pills
* Field Label inline
* Data Icon Inline
* Tooltip
* Taxonomy Breadcrump Formatter
* Landing Page Teaser Slideshow buttons



.field--name-field-body,
.field--name-field-text {
  max-width: 960px;
  margin: 10px auto;
}



/* ========== Buttons ========== */
/* ============================= */

/* Nomads.site blue pill button */

.nomad-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:#0570A1;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 136, 229, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover */
.nomad-button:hover {
  background:#0570A1;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 136, 229, 0.28);
}

/* active */
.nomad-button:active {
  transform: translateY(0);
}

/* optional: remove ugly default button styles */
.nomad-button:focus {
  outline: none;
}


/* ========= Button ======== */

#edit-actions {
  margin-top: 24px;
}

#edit-actions .button,
#edit-actions .button--primary {
  appearance: none;
  background: #3b82c4;
  border: 1px solid #3b82c4;
  color: #fff;
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 42px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  text-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  margin: 0 auto;
  width: auto;
}

#edit-actions .button:hover,
#edit-actions .button--primary:hover,
#edit-actions .button:focus,
#edit-actions .button--primary:focus {
  background: #2f74b3;
  border-color: #2f74b3;
  color: #fff;
  text-decoration: none;
}

#edit-actions .button:active,
#edit-actions .button--primary:active {
  background: #2a699f;
  border-color: #2a699f;
}

#edit-actions .button:focus-visible,
#edit-actions .button--primary:focus-visible {
  outline: 2px solid rgba(59, 130, 196, 0.22);
  outline-offset: 2px;
}


.swiper-button-prev, 
.swiper-button-next {
  position: absolute !important;
}


.nomads-title-local-tasks__select {
  background-color:#3b9dc4;
}









/* ========== Icon formatter ========== */

/* Shared icon formatter typography */
.nomads-icon-formatter__label {
  margin: 0;
  font-size: 7pt;
  text-transform: uppercase;
  color: #0575b1;
  font-weight: 700;
  text-decoration: none;
  display: block;
}

.nomads-icon-formatter__title {
  margin: 0 auto 7px auto;
  font-size: 13pt;
  color: #444;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: block;
}

/* Ensure label links inherit shared typography */
.nomads-icon-formatter__label a {
  color: inherit;
  text-decoration: none;
  text-transform: inherit;
  font-weight: inherit;
}

/* Shared icon formatter icon alignment */
.nomads-icon-formatter__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}




/* ========== Pills ========== */

div .nomads-pill,
div .nomads-pill__label,
.price-range-wrapper,
.listing-menu-virtual-field a.listing-menu-virtual-field__link {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  margin: 2px;
  font-size: 10pt;
  line-height: 1.2;
  vertical-align: middle;
  border: 0;
  font-weight: 500;
  background-color: #0570A1;
  color: #fff;
  text-decoration: none;
}
div .nomads-pill a {
  text-decoration: none;
  color: #fff;
}
.paragraph-relevance-key-aspects__group--minor_relevance .nomads-pill {
  background-color:#3b9dc4;
}
.listing-menu-virtual-field a.listing-menu-virtual-field__link {
  font-size: 1.1em;
}

/* Shared pills base styles 
.nomads-pills:not(.nomads-pills--fitted-pills) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
*/

.nomads-pill__link {
  color: inherit;
  text-decoration: none;
}
.nomads-pill__label {
  color: inherit;
}

/* Fitted pills sizing override 
.nomads-pills--fitted-pills .nomads-pill {
  padding: 2px 5px;
  margin: 2px;
  font-size: 11px;
  line-height: 1.25;
  border: 0;
  font-weight: 600;
  background-color: #0570A1;
  color: #fff;
}
*/




/* ========== Field label inline ========== */

.field--label-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.field--label-inline .field__label {
  min-width: 150px;
  margin-right: 10px;
}

.field--label-inline .field__label::after {
  content: ":";
}

.field--label-inline .field__items,
.field--label-inline .field__item {
  display: inline;
}



/* ========== Data icons inline ========== */

.data-icons-inline .field {
  display: inline-block;
  font-size: 18pt;
  font-weight: 700;
  vertical-align: middle;
  margin: 0 10px 0 10px;
}

.data-icons-inline .nomads-icon-field-label__wrapper {
  vertical-align: middle;
}

.data-icons-inline .nomads-icon-field-label__wrapper span {
  margin: -3px 10px;
  vertical-align: middle;
}




/* ========== Tooltips ========== */

/* Tooltip anchor */
[data-tooltip]{
  position: relative;
}


/* Tooltip box */
[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
  z-index: 9999;

  padding: 6px 10px;
  border-radius: 8px;
  border: 0;
  background:#0570A1;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;

  white-space: normal;
  width: max-content;
  max-width: auto;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* Tooltip arrow */
[data-tooltip]::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -14px);
  z-index: 9999;

  border: 6px solid transparent;
  border-bottom-color: #0570A1;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* Show on hover/focus */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus::after,
[data-tooltip]:focus::before{
  opacity: 1;
}
/* .special-category-select__tree-link[data-tooltip]::after {
  transform: translate(-50%, calc(-100% - 30px));
}
.special-category-select__tree-link[data-tooltip]::before {
  transform: translate(-50%, -30px);
} */
.special-category-select__tree-label[data-tooltip]::after,
.special-category-select__tree-label[data-tooltip]::before {
  display: none;
}






/* ========== Taxonomy Breadcrumb ========== */

.taxonomy-breadcrumb span,
.taxonomy-breadcrumb span a {
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #777;
  font-size: 12pt;
  font-weight: 600;
}




.promoted-link {
  display: block;
  text-align: center;
}
.promoted-link a {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 20px;
  margin: 0 auto;
  font-size: 16pt;
  text-decoration: none;
  vertical-align: middle;
  border: 0;
  font-weight: 500;
  background-color: #0570A1;
  color: #fff;
}





/* =========== Subdomain slideshow arrows ============ */

/* Swiper arrows as bold white circles */
.swiper-container {
  position: relative;
}

.swiper-button-prev,
.swiper-button-next {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  border: 3px solid rgba(255,255,255,0.95);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
  font-weight: 900;
  color: #000;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* optional: vertically center better if autoheight jumps */
.swiper-button-prev,
.swiper-button-next {
  top: 50%;
}