/* =========================================================
   MyCoupon — Stores Directory
   Scope: page-stores.php only
   Colors inherit from global theme variables.
========================================================= */

.stores-directory{
  padding:22px 0 42px;
}

.stores-directory__header{
  margin-bottom:22px;
}

.stores-directory__title{
  margin:10px 0 4px;
  color:var(--ink);
  font-size:32px;
  font-weight:800;
  line-height:1.45;
}

.stores-directory__intro{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.stores-tools{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  background:var(--surface);
}

.stores-search{
  position:relative;
  display:flex;
  align-items:center;
  direction:rtl;
}

.stores-search__icon{
  position:absolute;
  right:20px;
  left:auto;
  inset-inline-end:auto;
  inset-inline-start:auto;
  width:21px;
  height:21px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.stores-search__input{
  width:100%;
  height:50px;
  direction:rtl;
  text-align:right;
  padding:0 54px 0 16px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:0;
  background:var(--white);
  color:var(--ink);
  font:inherit;
  font-size:14px;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.stores-search__input::placeholder{color:var(--muted-light)}
.stores-search__input:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px var(--shadow-04);
}

.stores-letters{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  padding-bottom:2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.stores-letters::-webkit-scrollbar{display:none}

.stores-letter,
.stores-sort__button{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink-soft);
  font:inherit;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}

.stores-letter{
  flex:0 0 auto;
  min-width:38px;
  height:36px;
  padding:0 11px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
}

.stores-letter:hover,
.stores-sort__button:hover{
  border-color:var(--line-strong);
  color:var(--brand);
}

.stores-letter.is-active,
.stores-sort__button.is-active{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--surface-faint);
}

.stores-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line-soft);
}

.stores-active-only{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink-soft);
  font-size:13px;
  cursor:pointer;
  user-select:none;
}

.stores-active-only input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin:0;
  border:1px solid var(--line-strong);
  border-radius:5px;
  background:var(--white);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.stores-active-only input::after{
  content:"";
  width:8px;
  height:4px;
  border-inline-start:2px solid var(--white);
  border-bottom:2px solid var(--white);
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
}

.stores-active-only input:checked{
  border-color:var(--brand);
  background:var(--brand);
}
.stores-active-only input:checked::after{transform:rotate(-45deg) scale(1)}

.stores-sort{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.stores-sort__label{
  color:var(--muted);
  font-size:12px;
}

.stores-sort__button{
  min-height:36px;
  padding:0 13px;
  border-radius:9px;
  font-size:12px;
  font-weight:600;
}

.stores-results{
  margin-top:26px;
}

.stores-results__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.stores-results__title{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}

.stores-results__count{
  color:var(--muted);
  font-size:12px;
}

.stores-empty[hidden]{display:none !important;}

.stores-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.store-directory-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}

@media (hover:hover) and (pointer:fine){
  .store-directory-card:hover{
    border-color:var(--line-strong);
    box-shadow:0 8px 22px var(--shadow-04);
  }
}

.store-directory-card__link{
  min-height:126px;
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  grid-template-rows:1fr auto;
  column-gap:13px;
  align-items:center;
  padding:14px 15px 0;
}

.store-directory-card__logo-wrap{
  grid-row:1;
  width:82px;
  height:64px;
  display:grid;
  place-items:center;
  min-width:0;
}

.store-directory-card__logo{
  width:82px;
  height:60px;
  object-fit:contain;
}

.store-directory-card__fallback{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--surface-muted);
  color:var(--muted);
  font-size:20px;
  font-weight:800;
}

.store-directory-card__content{
  grid-row:1;
  min-width:0;
}

.store-directory-card__name{
  margin:0;
  color:var(--ink);
  font-size:15.5px;
  font-weight:750;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.store-directory-card__meta{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.store-directory-card__action{
  grid-column:1 / -1;
  grid-row:2;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin-top:8px;
  border-top:1px solid var(--line-soft);
  color:var(--muted);
  font-size:12.5px;
  transition:color .16s ease;
}

.store-directory-card__action svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.store-directory-card__link:hover .store-directory-card__action{color:var(--brand)}

.stores-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:180px;
  padding:24px;
  border:1px dashed var(--line-strong);
  border-radius:14px;
  background:var(--surface-faint);
  text-align:center;
}
.stores-empty strong{font-size:15px;color:var(--ink)}
.stores-empty span{font-size:12px;color:var(--muted)}

.stores-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:24px;
}

.stores-page{
  appearance:none;
  -webkit-appearance:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  color:var(--ink-soft);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.stores-page svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stores-page:hover{border-color:var(--line-strong);color:var(--brand)}
.stores-page.is-current{
  border-color:var(--brand);
  background:var(--brand);
  color:var(--white);
}
.stores-page:disabled{opacity:.45;cursor:default}

@media (max-width:1024px){
  .stores-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:768px){
  .stores-directory{padding-top:14px;padding-bottom:30px}
  .stores-directory__title{font-size:25px}
  .stores-directory__intro{font-size:12.5px}
  .stores-tools{padding:14px}
  .stores-search__input{height:46px;font-size:16px}
  .stores-toolbar{align-items:flex-start;flex-direction:column}
  .stores-sort{width:100%}
  .stores-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .store-directory-card__link{
    min-height:146px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    justify-items:center;
    text-align:center;
    row-gap:4px;
    padding:12px 10px 0;
  }
  .store-directory-card__logo-wrap{grid-row:1;width:72px;height:58px}
  .store-directory-card__logo{width:72px;height:54px}
  .store-directory-card__content{grid-row:2;min-width:0;width:100%}
  .store-directory-card__name{font-size:14px}
  .store-directory-card__meta{font-size:12px}
  .store-directory-card__action{
    grid-column:1;
    grid-row:3;
    width:100%;
    justify-content:center;
    margin-top:6px;
    font-size:12px;
  }
}

@media (max-width:380px){
  .stores-grid{grid-template-columns:1fr}
  .store-directory-card__link{
    min-height:110px;
    grid-template-columns:74px minmax(0,1fr);
    grid-template-rows:1fr auto;
    justify-items:stretch;
    text-align:right;
    column-gap:10px;
  }
  .store-directory-card__logo-wrap{grid-row:1;width:70px}
  .store-directory-card__content{grid-row:1}
  .store-directory-card__action{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
}

@media (max-width:768px){
  .stores-search__icon{right:18px}
  .stores-search__input{padding-right:50px}
}

@media (min-width:769px){
  .stores-search__icon{right:24px}
  .stores-search__input{padding-right:60px}
}


/* Store-directory rating summary. */
.store-directory-card__rating{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  direction:rtl;
  color:var(--muted);
  font-size:12px;
  line-height:1;
}
.store-directory-card__stars{
  display:inline-flex;
  direction:rtl;
  gap:0;
  font-size:16px;
  line-height:1;
}
.store-directory-card__stars span{color:#b9b9b9}
.store-directory-card__stars span.is-active{color:#ffd600}
.store-directory-card__rating-value{
  color:var(--ink-soft);
  font-weight:700;
}
.store-directory-card__rating-count{color:var(--muted-light)}
@media(max-width:768px){
  .store-directory-card__rating{justify-content:center}
  .store-directory-card__stars{font-size:15px}
}