/* =========================================
   SYRIAN SHOP — FUTURE AI DESIGN
   Requires original css/style.css
   ========================================= */

:root {
  --green: #00a86b;
  --green2: #00bd88;
  --mint: #d7fff0;
  --ink: #102a2a;
  --muted: #647b7b;
  --line: #d8e8e5;
  --bg: #f1f8f7;
  --white: #ffffff;
  --shadow: 0 20px 55px rgba(5,64,60,.11);
  --radius: 22px;
  --neon: #48f3c3;
  --violet: #7b7bf5;
}

/* GENERAL */

body {
  background:
    radial-gradient(ellipse 65% 28% at 7% 8%, #c6fff046, transparent 70%),
    radial-gradient(ellipse 48% 30% at 94% 24%, #d8d9ff70, transparent 75%),
    var(--bg);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid #18cfa4 !important;
  outline-offset: 3px;
}

/* HEADER */

.header {
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid #d6e9e4;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 6px 30px #123d3510;
}

.header::before {
  height: 3px;
  background: linear-gradient(
    90deg,
    #007a3d,
    #00db9c 35%,
    #8a85ff 70%,
    #111827
  );
}

.topbar {
  background: linear-gradient(
    105deg,
    #0c302d,
    #124c44 58%,
    #163c56
  );
}

.brandname {
  font-weight: 900;
  letter-spacing: -.045em;
}

.brandname span {
  background: linear-gradient(110deg,#008e63,#00cfa7);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.brandmark {
  border-radius: 12px;
  box-shadow:
    0 0 0 3px #e3fff2,
    0 10px 24px #008e6333;
  overflow: hidden;
}

/* SEARCH */

.searchbar {
  background: rgba(255,255,255,.88);
  border: 1px solid #cae3df;
  border-radius: 17px;
  box-shadow: 0 5px 22px #19564a0b;
  transition: box-shadow .2s, border-color .2s;
}

.searchbar:focus-within {
  border-color: #25c9a3;
  box-shadow:
    0 0 0 4px #26cfa51b,
    0 12px 35px #12594a18;
}

/* BUTTONS */

.btn,
.iconbtn,
.close,
.mini-btn {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn {
  border-radius: 14px;
  font-weight: 750;
}

.btn:hover,
.iconbtn:hover,
.mini-btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(120deg,#007e60,#00b989);
  color: white;
  box-shadow: 0 8px 20px #009e7840;
}

.btn-primary:hover {
  background: linear-gradient(120deg,#006f55,#00a77c);
  box-shadow: 0 13px 25px #009e784b;
}

.btn-ghost,
.btn-light,
.iconbtn {
  background: #ffffffdc;
  border: 1px solid #d4e8e4;
  box-shadow: 0 5px 18px #164c4210;
}

.iconbtn {
  border-radius: 14px;
}

.iconbtn:hover {
  border-color: #48cdb1;
  background: #f0fff9;
}

/* NAVIGATION */

.nav {
  border-top-color: #e7f0ee;
}

.nav a {
  transition: color .2s;
}

.nav a:hover {
  color: #009a78;
}

/* FUTURISTIC HERO */

.hero {
  padding-top: 30px;
}

.hero-panel {
  isolation: isolate;
  background:
    radial-gradient(circle at 85% 20%,#00d9ad35,transparent 35%),
    radial-gradient(circle at 65% 110%,#8886ff3d,transparent 42%),
    linear-gradient(125deg,#092b2b,#0c4542 55%,#102c4d);
  border: 1px solid #7af2d140;
  border-radius: 32px;
  box-shadow: 0 25px 70px #083c3b35;
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(#b8fff20a 1px,transparent 1px),
    linear-gradient(90deg,#b8fff20a 1px,transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg,transparent 15%,#000 100%);
}

.hero-panel::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -120px;
  top: -150px;
  border: 1px solid #80ffe644;
  border-radius: 50%;
  box-shadow:
    0 0 0 50px #80ffe609,
    0 0 0 100px #80ffe608;
  pointer-events: none;
}

.eyebrow {
  background: #a5ffef13;
  border-color: #8effe64d;
  color: #baffeb;
  backdrop-filter: blur(12px);
}

.hero h1 {
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero p {
  color: #d0e8e4;
}

.hero .btn-primary {
  background: linear-gradient(110deg,#dcfff4,#ffffff);
  color: #075c4c;
  box-shadow: 0 10px 30px #041f2140;
}

.hero .btn-light {
  background: #ffffff16;
  border: 1px solid #c4fff350;
  backdrop-filter: blur(10px);
}

.hero-emblem {
  filter: drop-shadow(0 18px 34px #0cf5a63d);
}

.stats {
  border-top: 1px solid #ffffff2b;
  padding-top: 19px;
}

.stats strong {
  color: #d7fff4;
}

/* SECTIONS */

.section-head h2 {
  font-weight: 850;
}

.section-head p {
  color: var(--muted);
}

/* CATEGORY CARDS */

.category,
.listing,
.trust-card,
.admin-stat,
.dash-item,
.empty {
  background: rgba(255,255,255,.89);
  border: 1px solid #dcece9;
  box-shadow: 0 7px 24px #114a3d0b;
}

.category {
  border-radius: 21px;
  position: relative;
  overflow: hidden;
  padding-top: 19px;
  padding-bottom: 19px;
}

.category::after {
  content: "";
  position: absolute;
  inset: auto 18% 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #11c9a3,
    transparent
  );
  opacity: 0;
  transition: opacity .2s;
}

.category:hover,
.category.active {
  border-color: #5fd9c0;
  transform: translateY(-5px);
  box-shadow: 0 18px 34px #087c6b22;
}

.category:hover::after,
.category.active::after {
  opacity: 1;
}

.cat-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(135deg,#ddfff2,#e8e9ff);
  border: 1px solid #ffffff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 16px #0b8c7420;
  font-size: 1.55rem;
}

/* FILTERS AND INPUTS */

.filterrow select,
.filterrow input,
.field input,
.field select,
.field textarea,
.chat-send input {
  border: 1px solid #d0e5e0;
  border-radius: 13px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.filterrow select:focus,
.filterrow input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.chat-send input:focus {
  outline: none;
  border-color: #1bc6a3;
  box-shadow: 0 0 0 4px #1bc6a31c;
}

/* LISTING CARDS */

.listing {
  border-radius: 22px;
  overflow: hidden;
}

.listing:hover {
  transform: translateY(-6px);
  border-color: #9ee7d5;
  box-shadow: 0 23px 45px #105d5024;
}

.listing-photo {
  background: linear-gradient(145deg,#e0f7ef,#e9eaff);
}

.listing-photo img {
  transition: transform .45s ease;
}

.listing:hover .listing-photo img {
  transform: scale(1.055);
}

.pill {
  background: #f7fffded;
  color: #007e62;
  border: 1px solid #dcfff2;
  backdrop-filter: blur(8px);
}

.heart {
  box-shadow: 0 4px 14px #093a3526;
  backdrop-filter: blur(10px);
}

.heart:hover {
  background: #fff1f3;
  color: #e02d61;
  transform: scale(1.08);
}

.price {
  color: #008e6f;
}

.sellerline {
  border-top-color: #e8f0ee;
}

.avatar,
.big-avatar {
  background: linear-gradient(140deg,#d9fff0,#e9eaff);
  color: #087b66;
}

/* TRUST CARDS */

.trust-card {
  border-radius: 22px;
  transition: transform .2s,box-shadow .2s;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px #135c4d16;
}

.trust-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg,#d7fff0,#eaeaff);
}

/* CALL TO ACTION */

.cta {
  background: linear-gradient(110deg,#dcfff0,#e8f1ff);
  border: 1px solid #b9e9dc;
  border-radius: 26px;
  box-shadow: 0 12px 30px #146f5b13;
}

/* FOOTER */

.footer {
  background: linear-gradient(
    120deg,
    #092925,
    #0d3634 65%,
    #132d43
  );
}

/* GLASS MODAL WINDOWS */

.modal-backdrop {
  background: rgba(3,20,28,.69);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal {
  background: #fbfffe;
  width: min(720px,100%);
  border: 1px solid #d4fff0a6;
  border-radius: 28px;
  box-shadow:
    0 36px 100px #001e2e80,
    0 0 0 1px #ffffff50;
  animation: neoModalIn .25s ease-out;
}

@keyframes neoModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-head {
  background: linear-gradient(120deg,#f1fffa,#f5f6ff);
  border-bottom: 1px solid #d9eae7;
  padding: 22px 25px;
}

.modal-head h2 {
  font-weight: 850;
  letter-spacing: -.02em;
}

.close {
  background: #e6f5f0;
  border: 1px solid #d2e8e0;
  border-radius: 13px;
}

.close:hover {
  background: #ffe8e8;
  color: #9d2525;
}

.modal-content {
  padding: 25px;
}

/* TABS */

.tabs {
  background: #eaf4f1;
  border: 1px solid #e1ece9;
  border-radius: 15px;
}

.tabs button {
  border-radius: 11px;
}

.tabs button.active {
  color: #00886a;
  box-shadow: 0 5px 16px #095b4d15;
}

/* CHAT */

.chat-messages {
  background: linear-gradient(145deg,#f0faf7,#f1f2ff);
  border: 1px solid #dcebe7;
  border-radius: 18px;
}

.bubble {
  border-radius: 17px 17px 17px 5px;
  box-shadow: 0 4px 12px #143e3610;
}

.bubble.mine {
  border-radius: 17px 17px 5px 17px;
  background: #d6fff0;
  border-color: #b1eed8;
}

/* NOTIFICATIONS */

.toast {
  background: linear-gradient(110deg,#073e38,#12584e);
  border: 1px solid #70e5c97a;
  border-radius: 16px;
  box-shadow: 0 18px 40px #002f2c44;
}

/* DETAILS AND ADMIN */

.detail-image {
  border-radius: 20px;
}

.detail-price {
  color: #008b6b;
}

.mini-btn {
  border-radius: 11px;
}

.admin-stat {
  border-radius: 17px;
}

/* MOBILE NAVIGATION */

.mobile-nav {
  background: #fffffff0;
  backdrop-filter: blur(20px);
  border-top: 1px solid #d4e8e2;
}

/* MODERN SVG ICONS */

.neo-icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconbtn .neo-icon {
  width: 22px;
  height: 22px;
}

.mobile-nav .neo-icon {
  width: 23px;
  height: 23px;
}

/* RESPONSIVE */

@media (max-width:720px) {
  .hero-panel {
    border-radius: 24px;
  }

  .category {
    border-radius: 16px;
  }

  .cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .listing {
    border-radius: 17px;
  }

  .modal {
    border-radius: 21px;
  }

  .modal-content {
    padding: 17px;
  }

  .modal-head {
    padding: 17px;
  }

  .mobile-nav button {
    gap: 4px;
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* SYRIAN SHOP - VISIBLE FUTURE DESIGN */

/* خلفية الموقع */
body {
  background: linear-gradient(135deg, #eefcf8, #eef0ff) !important;
}

/* الشريط العلوي */
.header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(25px);
  box-shadow: 0 8px 30px rgba(0, 100, 80, 0.12) !important;
}

/* الأزرار المستقبلية */
.btn-primary {
  background: linear-gradient(120deg, #007f63, #00d4a2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(0, 190, 145, 0.35) !important;
  color: white !important;
}

.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 35px rgba(0, 190, 145, 0.45) !important;
}

/* مربع البحث */
.searchbar {
  border: 2px solid #57d8bd !important;
  border-radius: 20px !important;
  background: white !important;
  box-shadow: 0 0 25px rgba(0, 210, 165, 0.15) !important;
}

/* بطاقات التصنيفات */
.category {
  background: linear-gradient(145deg, #ffffff, #e8fff7) !important;
  border: 1px solid #b4eee0 !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(0, 110, 90, 0.12) !important;
}

.category:hover {
  transform: translateY(-7px) scale(1.03) !important;
}

/* بطاقات الإعلانات */
.listing {
  border-radius: 25px !important;
  border: 1px solid #bdeee1 !important;
  box-shadow: 0 12px 35px rgba(0, 100, 80, 0.13) !important;
}

.listing:hover {
  transform: translateY(-7px) !important;
}

/* النوافذ المنبثقة */
.modal-backdrop {
  backdrop-filter: blur(15px) !important;
  background: rgba(5, 20, 35, 0.7) !important;
}

.modal {
  background: linear-gradient(145deg, #ffffff, #effff9) !important;
  border: 1px solid #83efd5 !important;
  border-radius: 30px !important;
  box-shadow: 0 30px 90px rgba(0, 50, 70, 0.45) !important;
}

/* أيقونات التصنيفات */
.cat-icon {
  background: linear-gradient(135deg, #baffdf, #dcdcff) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 20px rgba(0, 180, 140, 0.22) !important;
}

/* قسم البداية */
.hero-panel {
  background: linear-gradient(125deg, #071f29, #075c50, #263b79) !important;
  border-radius: 35px !important;
  box-shadow: 0 25px 60px rgba(0, 80, 90, 0.3) !important;
}


/* Syrian Shop: accessible, responsive dialogs (2026-10-28) */
.modal-backdrop.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.modal {
  width: min(720px, 100%) !important;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  flex: 0 0 auto;
  position: relative;
  top: auto;
}
.modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.modal-content > *, .modal-content .field, .modal-content .user-row,
.modal-content .dash-info { min-width: 0; }
.modal-content input, .modal-content select, .modal-content textarea {
  max-width: 100%;
}
.modal-content .tabs { flex-wrap: wrap; }
.modal-content .tabs button { min-width: max-content; flex: 1 1 auto; }
.modal-content .user-row p { overflow-wrap: anywhere; }
.modal-content #signOut {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-block: 12px 4px;
  color: #a52626;
  border: 1px solid #e8bcbc;
  background: #fff6f6;
}
@media (max-width: 720px) {
  .modal-backdrop.open { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); border-radius: 18px !important; }
  .modal-content { padding: 16px !important; }
  .modal-content .dash-actions { padding: 0; }
}
@media (max-height: 500px) {
  .modal-backdrop.open { padding: 4px; }
  .modal { max-height: calc(100dvh - 8px); }
  .modal-head { padding: 10px 16px; }
}

/* V13 compact popular category cards */
#categoriesGrid {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 10px;
}

#categoriesGrid .category {
  min-width: 0;
  padding: 12px 8px;
  font-size: 12px;
}

#categoriesGrid .cat-icon {
  width: 44px;
  height: 44px;
  font-size: 23px;
}