:root {
  --primary: #0f172a;
  --accent: #1fb6d5;
  --accent-hover: #1593ac;

  --bg-body: #f8fafc;
  --bg-card: #ffffff;

  --border-subtle: #e2e8f0;
  --border-focus: #cbd5e1;

  --text-main: #1e293b;
  --text-muted: #64748b;

  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 20px rgb(2 8 23 / 0.1);
  --shadow-lg: 0 20px 45px rgb(2 8 23 / 0.16);

  /* Silver */
  --silver-border: linear-gradient(
    135deg,
    #f8fafc 0%,
    #e2e8f0 25%,
    #94a3b8 55%,
    #e2e8f0 85%,
    #f8fafc 100%
  );
  --silver-glow: 0 8px 28px rgba(148, 163, 184, 0.28);

  --nav-height: 72px;

  /* Premium photo shape */
  --radius-organic: 30px 100px 30px 100px;

  /* Standard avatar size */
  --std-avatar: 190px;
}

html[data-theme="dark"] {
  --primary: #e5e7eb;
  --bg-body: #070b12;
  --bg-card: rgba(17, 24, 39, 0.92);

  --border-subtle: rgba(148, 163, 184, 0.18);
  --border-focus: rgba(148, 163, 184, 0.28);

  --text-main: #e5e7eb;
  --text-muted: rgba(229, 231, 235, 0.72);

  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.45);
  --shadow-md: 0 10px 24px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 20px 52px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --primary: #e5e7eb;
    --bg-body: #070b12;
    --bg-card: rgba(17, 24, 39, 0.92);

    --border-subtle: rgba(148, 163, 184, 0.18);
    --border-focus: rgba(148, 163, 184, 0.28);

    --text-main: #e5e7eb;
    --text-muted: rgba(229, 231, 235, 0.72);

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.45);
    --shadow-md: 0 10px 24px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 20px 52px rgb(0 0 0 / 0.55);
  }
}

.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* FILTERS / HEADER */
.filters-section {
  padding: 34px 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: radial-gradient(
      900px 260px at 10% 0%,
      rgba(31, 182, 213, 0.18),
      transparent 60%
    ),
    linear-gradient(180deg, #f0f9ff 0%, var(--bg-body) 100%);
}
html[data-theme="dark"] .filters-section {
  background: radial-gradient(
      900px 260px at 10% 0%,
      rgba(31, 182, 213, 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(7, 11, 18, 1) 0%, rgba(7, 11, 18, 0.2) 100%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .filters-section {
    background: radial-gradient(
        900px 260px at 10% 0%,
        rgba(31, 182, 213, 0.12),
        transparent 60%
      ),
      linear-gradient(180deg, rgba(7, 11, 18, 1) 0%, rgba(7, 11, 18, 0.2) 100%);
  }
}

.search-row {
  display: flex;
  grid-template-columns: 1fr 56px;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.search-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: 0.18s ease;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 182, 213, 0.16);
}
.search-btn {
  height: 52px;
  width: 56px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(31, 182, 213, 0.18);
  transition: 0.18s ease;
}
.search-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.reset-btn {
  height: 52px;
  width: 56px;
  border-radius: 14px;
  border: none;
  background: #bb2d3b;
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(31, 182, 213, 0.18);
  transition: 0.18s ease;
}
.reset-btn:hover {
  background: #b02a37;
  transform: translateY(-1px);
}

.filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
  min-height: 44px;
  max-width: 100%;
}
.filter-label {
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 6px;
  white-space: nowrap;
}
.f-opt {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.18s ease;
  white-space: nowrap;
}
.f-opt:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-main);
}
.f-opt.active {
  background: rgba(31, 182, 213, 0.16);
  color: var(--accent-hover);
}

.f-select {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-main);
  font-weight: 800;
  font-size: 0.88rem;
  padding-right: 6px;
  max-width: 220px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 8px;
}
.results-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.results-sub {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 700;
}
.sort-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  font-weight: 900;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.dot-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}
.dot-offline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

@media (max-width: 640px) {
  .container-xl {
    padding: 0 16px;
  }
  .filters-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .filter-group {
    justify-content: space-between;
    width: 100%;
  }
  .filter-group .f-opt {
    padding: 8px 10px;
  }
  .search-row {
    grid-template-columns: 1fr 54px;
  }
  .f-select {
    max-width: 100%;
  }
}

/* GRID */
main.container-xl {
  padding-top: 16px;
}
.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 18px 0 40px;
}
@media (max-width: 1100px) {
  .grid-layout {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .grid-layout {
    grid-template-columns: 1fr;
  }
}

/* CARD */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: 0.22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
a.card-link.card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
a.card-link.card > .card-img-container,
a.card-link.card > .card-body {
  width: 100% !important;
  min-width: 0 !important;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
}

/* Image area */
.card-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(
      260px 220px at 18% 20%,
      rgba(31, 182, 213, 0.16),
      transparent 60%
    ),
    radial-gradient(
      280px 220px at 86% 20%,
      rgba(148, 163, 184, 0.16),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(148, 163, 184, 0.08),
      rgba(148, 163, 184, 0.04)
    );
}
html[data-theme="dark"] .card-img-container {
  background: radial-gradient(
      260px 220px at 18% 20%,
      rgba(31, 182, 213, 0.12),
      transparent 60%
    ),
    radial-gradient(
      280px 220px at 86% 20%,
      rgba(148, 163, 184, 0.12),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(148, 163, 184, 0.07),
      rgba(148, 163, 184, 0.03)
    );
}

.img-wrapper {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.1);
  box-shadow: var(--shadow-md);
  transform: translateZ(0);
  isolation: isolate; /* stable layering */
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.6s ease;
  position: relative;
  z-index: 1;
}
.card:hover .card-img {
  transform: scale(1.1);
}

/* PREMIUM: PRO / SILVER -> organic portal */
.card.pro .img-wrapper,
.card.silver .img-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: var(--radius-organic);
}

/* STANDARD: round avatar */
.card:not(.pro):not(.silver) .img-wrapper {
  width: min(var(--std-avatar), 74%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 25px rgba(2, 8, 23, 0.1);
}
html[data-theme="dark"] .card:not(.pro):not(.silver) .img-wrapper {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Floating tier badge */
.float-badge {
  position: absolute;
  bottom: 12px;
  left: 5%;
  /*transform: translateX(-50%);
  padding: 6px 16px;*/
  /*border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.14);*/

  /* icon alignment */
  display: inline-flex;
  /*align-items: center;
  justify-content: center;
  gap: 8px;*/
}

/* icon (URL can be replaced anytime) */
.float-badge .tier-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  display: inline-block;
  transform: translateY(-0.5px);
}

.badge-pro {
  background: rgba(15, 23, 42, 0.92);
  color: #61e9ff;
  border: 1px solid rgba(97, 233, 255, 0.22);
}
.badge-silver {
  /*background: rgba(255, 255, 255, 0.92);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.4);*/

}

.badge-silver > .badge-silver-icon {
    /*position: absolute;*/
    width: 24px;
    height: 31px;
    z-index: 0;
    bottom: 0;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='31' viewBox='0 0 24 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5882 14.9538C21.8734 21.2897 15.2949 25.0497 8.89494 23.352C7.93106 23.0963 7.0262 22.7314 6.1903 22.2743C6.38078 22.5403 6.48063 22.7115 6.48063 22.7115C6.48063 22.7115 8.26001 24.0294 10.7583 24.8467C11.1111 24.9622 11.2432 25.4009 11.0009 25.6799C9.2601 27.6835 7.8847 29.5586 7.1789 30.5207C7.0302 30.7235 6.91122 30.8857 6.82481 31C7.24181 29.4593 7.17137 24.9918 4.75421 21.3497C0.981945 18.5188 -0.888946 13.6115 0.411766 8.80584C2.12664 2.46995 8.70505 -1.29006 15.1051 0.407642C21.5051 2.10534 25.3031 8.61786 23.5882 14.9538ZM9.53995 15.5735C9.60177 15.6347 9.66967 15.6862 9.74173 15.728C10.1259 15.9567 10.6319 15.907 10.9633 15.579L17.995 8.61775C18.3854 8.23123 18.3854 7.60457 17.995 7.21805C17.6046 6.83153 16.9716 6.83153 16.5811 7.21805L10.2544 13.4814L8.67261 11.9154C8.28218 11.5289 7.64917 11.5289 7.25874 11.9154C6.86832 12.3019 6.86832 12.9286 7.25874 13.3151L9.53995 15.5735Z' fill='url(%23paint0_linear_2180_1977)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2180_1977' x1='12' y1='0' x2='12' y2='31' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23BCB9B9'/%3E%3Cstop offset='1' stop-color='%23787777'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
}





html[data-theme="dark"] .badge-silver {
  /*background: rgba(17, 24, 39, 0.7);
  color: rgba(229, 231, 235, 0.92);
  border-color: rgba(148, 163, 184, 0.22);*/
}

/* Silver / Pro card emphasis */
.card.silver {
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--silver-border) border-box;
  box-shadow: var(--shadow-md), var(--silver-glow);
}
.card.pro {
  border: 2px solid rgba(15, 23, 42, 0.92);
  box-shadow: var(--shadow-lg), 0 0 26px rgba(15, 23, 42, 0.12);
}
html[data-theme="dark"] .card.pro {
  border-color: rgba(229, 231, 235, 0.55);
  box-shadow: var(--shadow-lg);
}

/* Content */
.card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: transparent;
}

.name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.card-name {
  font-weight: 950;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text-main);
}
.status-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 950;
  font-size: 0.82rem;
  white-space: nowrap;
  flex: 0 0 auto;
  color: #10b981;
}
.status-inline .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}
.status-inline.offline {
  color: #94a3b8;
}
.status-inline.offline .dot {
  background: #94a3b8;
}

.card-meta {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--text-muted);
  display: flex;
  /*align-items: center;*/
  gap: 8px;
  flex-wrap: wrap;
  flex-direction:column;
  align-items:start;
}
.topic-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(148, 163, 184, 0.1);
  font-weight: 900;
  font-size: 0.78rem;
  color: var(--text-main);
}
html[data-theme="dark"] .topic-pill {
  background: rgba(148, 163, 184, 0.08);
}

/* Photo gallery pill */
.gallery-pill {
  display: none; /* enabled by JS */
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  background: rgba(31, 182, 213, 0.1);
  border: 1px solid rgba(31, 182, 213, 0.28);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
  user-select: none;
}
.gallery-pill i {
  font-size: 0.95rem;
}
.gallery-pill .g-count {
  color: var(--text-main);
  font-weight: 950;
}

.card-bio {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.card-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Pricing text */
.price {
  font-weight: 950;
  font-size: 1rem;
  color: var(--text-main);
  white-space: nowrap;
}
.price .from {
  font-weight: 900;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-right: 6px;
}
.price .unit {
  font-weight: 800;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 4px;
}

.btn-view {
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 950;
  font-size: 0.86rem;
  cursor: pointer;
  transition: 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 18px rgba(31, 182, 213, 0.18);
  white-space: nowrap;
}
.btn-view:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 50px;
  flex-wrap:wrap;
}
.page-link {
  /*width: 42px;*/
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.18s ease;
}
.page-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.page-link.active {
  background: rgba(31, 182, 213, 0.12);
  border-color: rgba(31, 182, 213, 0.35);
}

/* Footer */
footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
  padding: 36px 0;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}
.f-link {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.f-link:hover {
  color: var(--text-main);
}
.copyright {
  text-align: center;
  color: rgba(148, 163, 184, 0.95);
  font-weight: 700;
  font-size: 0.86rem;
}

.hidden {
  display: none !important;
}



.glass-card {
  background: rgba(255, 255, 255, 0.86);;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 34px;
  width: 100%; max-width: 640px;
  padding: 64px 44px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
  text-align: center;
}

/* OFFICIAL SAD LOGO STYLING */
.sad-logo {
  width: 160px;
  height: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 15px 30px var(--brand-glow));
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.title {
  font-weight: 900;
  letter-spacing: -0.05em;
  font-size: 2.4rem;
  margin-bottom: 14px;
  line-height: 1.15;
}
.title span { color: var(--brand); }

.subtitle {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* BUTTONS */
.btn-main {
  background: var(--brand);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px -5px var(--brand-glow);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
}
.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -5px var(--brand-glow);
  filter: brightness(1.05);
  color: white;
}

.btn-soft {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 14px 26px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
}
.btn-soft:hover{
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  transform: translateY(-1px);
  color: var(--text);
}

#grid .card-link+.card-link {
    margin-left: 0;
}



.search-mini-footer{
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
  padding: 16px 0;
}

.search-mini-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.search-mini-footer__copy{
  color: rgba(148,163,184,0.95);
  font-weight: 600;
  font-size: .92rem;
}

.search-mini-footer__stores{
  display:flex;
  align-items:center;
  gap: 10px;
}

.store-badge-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  transition: .18s ease;
}

.store-badge-link img{
  display:block;
  height: 34px;   /* ίδιο vibe με screenshot */
  width: auto;
}

.store-badge-link:hover{ transform: translateY(-1px); }

@media (max-width: 640px){
  .search-mini-footer__inner{ justify-content:center; text-align:center; }
  .search-mini-footer__stores{ justify-content:center; }
}


#grid .card.offline .card-img-container img{

    filter: grayscale(0.55) saturate(0.55) contrast(0.98) brightness(1.05);
    opacity: 0.92;

}