/* =========================================================
   ALLNAIJAMARKET — SPLIT SHOP DIRECTORIES
========================================================= */

.shop-directory-hero__eyebrow,
.directory-heading__eyebrow{
  display:inline-block;
  margin-bottom:6px;
  color:#86efac;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* =========================================================
   LOCATION REFRESH ACTION — COMPACT / AUTO WIDTH
========================================================= */

.directory-location-action{
  width:fit-content;
  max-width:calc(100% - 20px);
  margin:8px auto 9px;
}

.directory-location-action__button{
  width:auto;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding:6px 10px;

  border:1px solid rgba(34,197,94,.45);
  border-radius:8px;

  background:linear-gradient(
    135deg,
    rgba(22,101,52,.94),
    rgba(6,78,59,.94)
  );

  color:#fff;

  box-shadow:0 6px 15px rgba(0,0,0,.18);

  cursor:pointer;
  text-align:center;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.directory-location-action__button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  border-color:rgba(134,239,172,.85);
}

.directory-location-action__button:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
}

.directory-location-action__icon{
  display:grid;
  place-items:center;

  flex:0 0 24px;
  width:24px;
  height:24px;

  border-radius:7px;

  background:rgba(255,255,255,.14);

  font-size:12px;
}

.directory-location-action__copy{
  flex:0 1 auto;
  min-width:0;

  text-align:center;
}

.directory-location-action__copy strong{
  display:block;

  font-size:10px;
  line-height:1.15;
}

.directory-location-action__copy small{
  display:block;

  margin-top:2px;

  color:rgba(255,255,255,.82);

  font-size:8px;
  line-height:1.2;
}

.directory-location-action__arrow{
  flex:0 0 auto;

  font-size:12px;
  line-height:1;

  opacity:.9;
}


/* =========================================================
   VIRTUAL SHOP ONLINE NOTE — COMPACT / AUTO WIDTH
========================================================= */

.shop-directory-online-note{
  width:fit-content;
  max-width:calc(100% - 20px);

  margin:8px auto 9px;
  padding:6px 10px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  border:1px solid rgba(96,165,250,.35);
  border-radius:8px;

  background:linear-gradient(
    135deg,
    rgba(30,64,175,.28),
    rgba(15,23,42,.75)
  );

  text-align:center;
}

.shop-directory-online-note>span{
  display:grid;
  place-items:center;

  width:24px;
  height:24px;
  flex:0 0 24px;

  border-radius:7px;

  background:rgba(255,255,255,.1);

  font-size:12px;
}

.shop-directory-online-note>div{
  flex:0 1 auto;
  min-width:0;

  text-align:center;
}

.shop-directory-online-note strong,
.shop-directory-online-note small{
  display:block;
}

.shop-directory-online-note strong{
  font-size:10px;
  line-height:1.15;
}

.shop-directory-online-note small{
  margin-top:2px;

  color:#cbd5e1;

  font-size:8px;
  line-height:1.2;
}


/* =========================================================
   SHOP DIRECTORY SWITCHER
========================================================= */

.shop-directory-switcher{
  width:min(1040px,calc(100% - 20px));
  margin:14px auto;

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;

  padding:8px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;

  background:#08111f;
}

.shop-directory-switcher a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:8px;

  border-radius:11px;

  color:#cbd5e1;

  text-decoration:none;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.shop-directory-switcher a:hover,
.shop-directory-switcher a.is-active{
  background:linear-gradient(135deg,#166534,#047857);
  color:#fff;

  box-shadow:0 8px 20px rgba(16,185,129,.18);
}


/* =========================================================
   SHOP DIRECTORY
========================================================= */

.shop-directory{
  padding:16px 10px 34px;
}

.shop-directory .directory-heading{
  max-width:1100px;
  margin:0 auto 12px;
  text-align:left;
}

.shop-directory .directory-heading h2{
  margin:0 0 4px;
}

.directory-mode-note{
  margin:0 0 14px;
  color:#94a3b8;
  font-size:13px;
}


/* =========================================================
   SEARCH STATES
========================================================= */

.directory-search-state{
  display:none;
}

.directory-search-state.is-active{
  display:block;
}

.directory-default-state[hidden],
.directory-search-state[hidden]{
  display:none!important;
}


/* =========================================================
   SHOP GRID
========================================================= */

.shop-directory-grid{
  align-items:stretch;
}

.shop-directory-grid .market-card{
  position:relative;
  display:flex;
  flex-direction:column;
}

.shop-directory-grid .market-image{
  display:block;
  position:relative;
}

.shop-directory-grid .market-info{
  display:flex;
  flex:1;
  flex-direction:column;
}

.shop-directory-grid .market-info .btn-secondary{
  margin-top:auto;
  text-align:center;
}

.shop-directory-grid .shop-category{
  color:#dbeafe;
}


/* =========================================================
   SHOP LOCATION
========================================================= */

.shop-location{
  font-size:12px;
  line-height:1.45;
}

.shop-location--market{
  color:#f5d0a9;
}

.shop-location--independent{
  color:#fbbf24;
}

.shop-location--virtual{
  color:#c4b5fd;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.shop-directory-empty{
  grid-column:1/-1;

  padding:30px 18px;

  border:1px dashed rgba(255,255,255,.16);
  border-radius:16px;

  background:rgba(255,255,255,.025);

  text-align:center;
}

.shop-directory-empty h3{
  margin-bottom:5px;
}


/* =========================================================
   SHOP RATING
========================================================= */

.shop-rating{
  margin:5px 0 10px;
}

.shop-stars{
  color:#f59e0b;
}

.shop-rating-meta{
  color:#cbd5e1!important;
}


/* =========================================================
   RESULTS / SEARCH STATUS
========================================================= */

#resultsCount{
  max-width:1100px;

  margin:0 auto 10px;

  color:#86efac;

  font-size:13px;
  font-weight:800;
}

#typingIndicator{
  max-width:1100px;
  margin:0 auto 10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

  .shop-directory-switcher{
    grid-template-columns:1fr;
  }

  .shop-directory-switcher a{
    min-height:38px;
  }

  .directory-location-action,
  .shop-directory-online-note{
    max-width:calc(100% - 16px);
  }
}


/* =========================================================
   SAFE AUTO LIGHT / DARK THEME
========================================================= */

:root{
  color-scheme:light dark;
}

@media(prefers-color-scheme:light){

  .shop-directory-switcher{
    background:#fff;
    border-color:#d7e2dc;

    box-shadow:
      0 8px 24px rgba(15,23,42,.07);
  }

  .shop-directory-switcher a{
    color:#3e5147;
  }

  .shop-directory-online-note{
    background:linear-gradient(
      135deg,
      #eef5ff,
      #fff
    );

    color:#17211d;
  }

  .shop-directory-online-note small,
  .directory-mode-note{
    color:#66756e;
  }

  .shop-directory-grid .shop-category{
    color:#315c80;
  }

  .shop-rating-meta{
    color:#66756e!important;
  }

  .shop-directory-empty{
    background:#f8faf9;
    border-color:#ccd8d2;
    color:#17211d;
  }
}