/* LOQTA brand layer
   Brand: لقطة — كل يوم لقطة جديدة
   Colors: #FFC107 #0D0D0D #2B2B2B #F2F2F2 #FFFFFF
*/
:root {
  --loqta-yellow: #FFC107;
  --loqta-black: #0D0D0D;
  --loqta-charcoal: #2B2B2B;
  --loqta-light: #F2F2F2;
  --loqta-white: #FFFFFF;
}

html, body, input, select, textarea, button {
  font-family: 'Tajawal', Arial, sans-serif !important;
}

body {
  background: var(--loqta-light);
  color: var(--loqta-black);
}

header {
  background: var(--loqta-black) !important;
  color: var(--loqta-white);
  border-bottom: 2px solid var(--loqta-yellow);
}

header .wrapper,
header .box {
  background: transparent !important;
}

#logo {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

#logo .loqta-logo-img {
  width: 210px;
  max-width: 55vw;
  height: auto;
  display: block;
}

.loqta-tagline {
  color: var(--loqta-white);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.loqta-tagline span {
  color: var(--loqta-yellow);
}

.nav a.publish,
button,
input[type="submit"],
input[type="button"],
.btn,
.button {
  background: var(--loqta-yellow) !important;
  color: var(--loqta-black) !important;
  border-color: var(--loqta-yellow) !important;
  font-weight: 700 !important;
}

a {
  color: #9a7400;
}

a:hover {
  color: var(--loqta-black);
}

.home-search,
.search {
  background: var(--loqta-charcoal) !important;
}

.home-search input[type="text"],
.home-search input[type="search"],
.home-search select,
.search input[type="text"],
.search select {
  border-color: #555 !important;
  background: var(--loqta-white) !important;
  color: var(--loqta-black) !important;
}

.listing-grid .listing,
.listing-list .listing,
.category,
.box {
  border-radius: 12px;
}

.premium,
.listing.premium,
.listing-grid .premium {
  border-color: var(--loqta-yellow) !important;
}

.price,
.item-price,
.premium .price {
  color: var(--loqta-black) !important;
}

footer {
  background: var(--loqta-black) !important;
  color: var(--loqta-white) !important;
  border-top: 2px solid var(--loqta-yellow);
}

footer a {
  color: var(--loqta-yellow) !important;
}

@media (max-width: 700px) {
  #logo {
    justify-content: center;
  }
  #logo .loqta-logo-img {
    width: 165px;
  }
  .loqta-tagline {
    display: none;
  }
}