:root {
  --gold: #C9A84C;
  --gold-light: #d4b85a;
  --gold-dark: #a88a30;
  --gold-muted: rgba(201, 168, 76, 0.15);
  --obsidian: #0a0a0a;
  --obsidian-light: #1a1a1a;
  --obsidian-muted: rgba(10, 10, 10, 0.6);
  --bg: #fafafa;
  --bg-secondary: #f5f3ef;
  --text: #111;
  --text-muted: #888;
  --border: #e5e3df;
  --white: #fff;
  --red: #dc2626;
  --green: #16a34a;
  --amber: #f59e0b;
  --blue: #3b82f6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

footer { flex-shrink: 0; padding-bottom: 90px; }

.container {
  width: min(1400px, 95%);
  margin: auto;
}

/* =========== NAVBAR =========== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(10, 10, 10, 0.85);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
}

.navbar-arabic {
  font-size: clamp(8px, 1.5vw, 19px);
  font-weight: 400;
  color: var(--gold);
  opacity: 1.5;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .navbar-arabic { display: none; }
}

.navbar .logo {
  font-size: clamp(13px, 4vw, 22px);
  font-weight: 800;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
}

.navbar .logo img { height: clamp(1.4em, 3.5vw, 2.8em); }

@media (max-width: 900px) {
  .navbar .container { padding: 10px 14px; }
  .navbar .logo { gap: 8px; }
}

@media (max-width: 600px) {
  .navbar .container { padding: 8px 12px; justify-content: center; width: 90%; }
  .navbar .logo { gap: 5px; width: 90%; justify-content: center; font-size: 16px; }
  .navbar .logo img { height: 2.5em; }
}

@media (max-width: 480px) {
  .navbar .container { padding: 5px 8px; }
  .navbar .logo { gap: 4px; font-size: 14px; }
  .navbar .logo img { height: 2.5em; }
}

/* =========== HERO =========== */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  padding: 20px;
  max-width: 800px;
  margin: auto;
  animation: fadeIn 0.8s ease;
}

.hero-gold-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.hero-gold-line .line {
  height: 1px;
  width: 48px;
  background: linear-gradient(to left, transparent, var(--gold));
  opacity: 0.6;
}

.hero-gold-line .line:first-child {
  background: linear-gradient(to right, transparent, var(--gold));
}

.hero-gold-line span {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 400;
}

.hero h1 {
  font-size: 70px;
  font-weight: 800;
  letter-spacing: 4px;
  margin-bottom: 8px;
  line-height: 1.1;
}

.hero h2 {
  color: var(--gold);
  font-size: 90px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.1;
}

.hero .hero-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  max-width: 500px;
  line-height: 1.6;
  margin: 0 auto 30px;
}

/* Hero Search */
.hero-search {
  display: flex;
  max-width: 560px;
  margin: 0 auto 32px;
  gap: 8px;
}

.hero-search-input-wrap {
  position: relative;
  flex: 1;
}

.hero-search-input-wrap i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

.hero-search input {
  width: 100%;
  padding: 12px 40px 12px 18px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  height: 48px;
  transition: .2s;
}

.hero-search input::placeholder {
  color: rgba(255,255,255,0.4);
}

.hero-search input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.15);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
  height: 48px;
  letter-spacing: 1px;
}

.btn-gold:hover {
  background: var(--gold-light);
}

/* Hero CTAs */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: .3s;
  letter-spacing: 1px;
}

.btn-hero-outline:hover {
  border-color: var(--gold);
  background: rgba(255,255,255,0.08);
}

/* Hero bottom fade */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 128px;
  background: linear-gradient(to top, var(--bg), transparent);
}

/* =========== SECTIONS =========== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 28px;
  font-weight: 800;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  transition: .3s;
  white-space: nowrap;
}

.view-all-link:hover {
  background: var(--gold);
  color: white;
}

.view-all-link i { font-size: 15px; }

.section-prefix {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.section-prefix .line {
  height: 1px;
  width: 32px;
  background: var(--gold);
}

.section-prefix span {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 800;
}

.section-title p {
  color: var(--text-muted);
  font-size: 16px;
}

/* =========== PRODUCTS GRID =========== */
.products-section {
  padding: 60px 20px;
  background: var(--bg);
}

.products-grid {
  width: min(1400px, 95%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.4s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.product-card .card-body { flex: 1; }

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.product-card .img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-secondary);
}

.product-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.product-card:hover .img-wrap img {
  transform: scale(1.05);
}

.product-card .img-wrap .img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0);
  transition: all 0.4s;
}

.product-card:hover .img-wrap .img-overlay {
  background: rgba(10,10,10,0.06);
}

.product-card .brand-name {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.product-card .discount-badge {
  position: absolute;
  top: 14px;
  left: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: white;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  z-index: 2;
  line-height: 1.4;
}

.offer-detail-discount {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 4px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  z-index: 3;
  line-height: 1.4;
}
  gap: 4px;
  letter-spacing: 0.3px;
}

.product-card .card-rating {
  margin-right: auto;
  color: var(--gold);
  font-weight: 600;
  font-size: 11px;
}

.product-card .card-rating i {
  font-size: 10px;
}

.product-card .price-currency {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.card-brand {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* =========== BEST SELLERS GRID =========== */
.best-sellers-grid {
  width: min(1200px, 95%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.seller-card {
  background: white;
  border-radius: 12px;
  padding: 32px 20px 24px;
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seller-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  border-color: rgba(201,168,76,0.3);
}

.seller-card .seller-avatar-wrap {
  position: relative;
  margin-bottom: 12px;
}

.seller-card .seller-avatar-wrap img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(201,168,76,0.25);
  transition: border-color 0.3s;
}

.seller-card:hover .seller-avatar-wrap img {
  border-color: var(--gold);
}

.seller-card .verified-badge {
  position: absolute;
  bottom: 0;
  right: -4px;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

.seller-card .seller-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}



.seller-card .seller-stars span {
  color: var(--text-muted);
  font-size: 12px;
  margin-right: 4px;
  font-weight: 600;
}

.seller-card .seller-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.seller-card .seller-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seller-card .seller-stat .stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--obsidian);
}

.seller-card .seller-stat .stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

.seller-card .seller-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.product-card .type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--gold);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.product-card .card-body {
  padding: 16px;
}

.product-card .card-body h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}

.product-card .card-body .name-en {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.product-card .meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.product-card .meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 3px 8px;
  border-radius: 4px;
}

.product-card .meta-tag i {
  color: var(--gold);
  font-size: 12px;
}

.product-card .color-swatches {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.product-card .color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.product-card .color-more {
  font-size: 11px;
  color: var(--text-muted);
  align-self: center;
}

.product-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}

.product-card .price {
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
}

.product-card .price small,
.color-price-row .price-val small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

.product-card .discount-price {
  color: var(--gold);
  font-weight: 800;
  font-size: 17px;
}

.color-price-row .discount-price {
  color: var(--gold);
  font-weight: 800;
}

.old-price {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  margin-inline-end: 8px;
  padding: 0 4px;
}

.old-price::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(115deg, transparent 2%, rgba(201, 168, 76, 0.9) 18%, rgba(201, 168, 76, 0.9) 82%, transparent 98%);
  transform: rotate(-18deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.product-card .whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
  transition: .2s;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}

.product-card .whatsapp-btn:hover {
  background: #22c55e;
}

.product-card .shopper-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 12px;
  transition: .2s;
}

.product-card .shopper-link:hover {
  color: var(--gold);
}

.product-card .shopper-link img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201,168,76,0.3);
}

/* =========== SHOPPERS GRID =========== */
.shoppers-section {
  padding: 60px 20px;
}

.shoppers-grid {
  width: min(1200px, 95%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.shopper-card {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: .3s;
}

.shopper-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.shopper-card .cover {
  height: 120px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--border));
  overflow: hidden;
  position: relative;
}

.shopper-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.shopper-card:hover .cover img {
  transform: scale(1.05);
}

.shopper-card .cover .cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.15);
  transition: .3s;
}

.shopper-card:hover .cover .cover-overlay {
  background: rgba(10,10,10,0.08);
}

.shopper-card .card-body {
  padding: 0 16px 16px;
}

.shopper-card .avatar-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -32px;
  margin-bottom: 12px;
}

.shopper-card .avatar-section img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(201,168,76,0.5);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.shopper-card .featured-badge {
  font-size: 11px;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.1);
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.shopper-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.shopper-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.shopper-card h3 a:hover {
  color: var(--gold);
}

.shopper-card .name-en {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.shopper-card .bio {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shopper-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.shopper-card .product-count {
  font-size: 12px;
  color: var(--text-muted);
}

.shopper-card .social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopper-card .social-links a {
  color: var(--text-muted);
  transition: .2s;
}

.shopper-card .social-links a:hover {
  color: var(--gold);
}

/* =========== CTA BANNER =========== */
.cta-section {
  background: var(--obsidian);
  color: white;
  padding: 80px 20px;
  text-align: center;
  width: min(1200px, 95%);
  margin: 60px auto 0;
  border-radius: 20px;
}

.cta-section .gold-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.cta-section .gold-deco .line {
  width: 48px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold));
  opacity: 0.5;
}

.cta-section .gold-deco .line:first-child {
  background: linear-gradient(to right, transparent, var(--gold));
}

.cta-section .gold-deco span {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.cta-section h2 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 8px;
}

.cta-section .cta-sub {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.cta-section .cta-desc {
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.cta-section .cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.btn-cta-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: white;
  padding: 12px 40px;
  border-radius: 4px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
  letter-spacing: 1px;
}

.btn-cta-gold:hover {
  background: var(--gold-light);
}

.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 40px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: .3s;
  letter-spacing: 1px;
  background: none;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
}

.btn-cta-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* =========== BRANDS SECTION =========== */
.brands-section {
  padding: 40px 20px;
}

.brands-grid {
  width: min(1200px, 95%);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.brand-tag {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  transition: .2s;
  text-decoration: none;
}

.brand-tag:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* =========== FEATURES SECTION =========== */
.features-section {
  padding: 80px 20px;
  background: linear-gradient(to bottom, var(--white), var(--bg-secondary));
}

.features-grid {
  width: min(1200px, 95%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.feature {
  text-align: center;
  padding: 20px;
}

.feature .icon {
  width: 70px;
  height: 70px;
  margin: auto auto 20px;
  background: var(--gold-muted);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
}

.feature h3 {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.feature p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* =========== DIVIDER =========== */
.section-divider {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-divider .line {
  height: 1px;
  background: linear-gradient(to left, transparent, var(--border), transparent);
}

/* =========== BUTTONS =========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 4px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.btn-primary-solid {
  background: var(--obsidian);
  color: white;
}

.btn-primary-solid:hover {
  background: var(--obsidian-light);
}

.btn-ghost {
  background: var(--bg-secondary);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--border);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 2px solid var(--obsidian);
  color: var(--obsidian);
  font-weight: 600;
  font-size: 14px;
  transition: .3s;
}

.btn-outline:hover {
  background: var(--obsidian);
  color: white;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 2px solid var(--red);
  color: var(--red);
  font-weight: 600;
  font-size: 14px;
  transition: .3s;
  background: none;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
}

.btn-danger:hover {
  background: var(--red);
  color: white;
}

/* =========== FORMS =========== */
.form-control {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  background: var(--white);
  transition: .2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
}

.form-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

/* =========== CARDS =========== */
.card-flat {
  background: white;
  border-radius: 4px;
  border: 1px solid var(--border);
  padding: 24px;
}

.card {
  background: white;
  border-radius: 4px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.card-body {
  padding: 24px;
}

.stat-card {
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  display: block;
  transition: .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,168,76,0.06), transparent 60%);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border-color: rgba(201,168,76,0.2);
}

.stat-card .stat-number {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 4px;
  position: relative;
}

.stat-card .stat-label {
  font-size: 13px;
  font-weight: 500;
  position: relative;
}

/* =========== BADGES =========== */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.badge-red {
  background: var(--red);
  color: white;
}

.badge-gray {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.badge-green {
  background: var(--green);
  color: white;
}

.badge-gold {
  background: var(--gold);
  color: white;
}

.badge-amber {
  background: var(--amber);
  color: white;
}

/* =========== CHANNEL BADGE =========== */
.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 4px;
  background: var(--bg-secondary);
  font-size: 14px;
  margin: 4px;
}

/* =========== VERIFIED PAYMENT =========== */
.vpay-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.vpay-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}
.vpay-label i {
  font-size: 15px;
}
.vpay-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vpay-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
a.vpay-pill:hover {
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.vpay-pill img {
  height: 18px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}
.vpay-pill .vpay-other-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 11px;
}

/* =========== PROFILE STOREFRONT =========== */
.profile-storefront {
  background: #F9F8F4;
  min-height: 100vh;
}

.profile-cover {
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, var(--obsidian) 0%, #2a2a2a 50%, var(--obsidian-light) 100%);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-cover-has-image {
  background-color: #333;
}

.profile-cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(249,248,244,1) 100%);
}

.profile-info-section {
  width: min(1200px, 95%);
  margin: -80px auto 0;
  position: relative;
  z-index: 2;
}

.profile-info-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.profile-info {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.profile-avatar-wrap {
  flex-shrink: 0;
}

.profile-avatar-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  display: block;
}

.profile-meta {
  padding-bottom: 8px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-name {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  color: var(--obsidian);
}

.profile-edit-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  background: var(--gold);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: .2s;
  border: 2px solid white;
}

.profile-edit-badge:hover {
  background: var(--gold-light);
  transform: scale(1.1);
}


.profile-rating i {
  color: var(--gold);
  font-size: 15px;
}

.profile-rating span {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 6px;
}

.profile-count {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 8px;
}

.profile-actions-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  text-decoration: none;
  transition: .25s;
}

.action-btn-gray {
  background: #f0efeb;
  color: #333;
  border: 1px solid #e0ddd5;
}

.action-btn-gray:hover {
  background: #e6e4dd;
  color: #111;
}

.action-btn-gray i {
  font-size: 18px;
}

.action-btn-green {
  background: #2ECC71;
  color: white;
  border: none;
}

.action-btn-green:hover {
  background: #27ae60;
  color: white;
}

.action-btn-green i {
  font-size: 18px;
  color: white;
}

.profile-bio {
  width: min(1200px, 95%);
  margin: 24px auto 0;
  text-align: center;
  padding: 0 20px;
}

.profile-bio p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  max-width: 640px;
  margin: 0 auto;
}

.profile-nonshopper {
  text-align: center;
  margin-top: 20px;
}

/* ===== PROFILE PRODUCTS SECTION ===== */
.profile-products-section {
  width: min(1200px, 95%);
  margin: 0 auto;
  padding: 0 0 40px;
}

.profile-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, #ddd, transparent);
  margin: 40px auto;
  max-width: 600px;
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.profile-section-line {
  width: 4px;
  height: 28px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.profile-section-header h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: var(--obsidian);
}

.profile-reviews-list {
  display: flex;
  flex-direction: column;
}

.review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-comment {
  font-size: 14px;
  margin: 4px 0;
  color: #555;
}

.review-date {
  color: var(--text-muted);
  font-size: 12px;
}

/* =========== WISHLIST =========== */
.wishlist-page {
  width: min(900px, 95%);
  margin: 0 auto;
  padding: 40px 0;
}

.wishlist-header {
  text-align: center;
  margin-bottom: 40px;
}

.wishlist-tag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.wishlist-tag-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(to left, var(--gold), transparent);
}

.wishlist-tag-line:first-child {
  background: linear-gradient(to right, var(--gold), transparent);
}

.wishlist-tag {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
}

.wishlist-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--obsidian);
}

.wishlist-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin: 0 0 28px;
}

.btn-wishlist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .25s;
  font-family: 'Cairo', sans-serif;
  text-decoration: none;
}

.btn-wishlist-toggle:hover {
  background: var(--gold-light);
  color: white;
}

.btn-wishlist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  transition: transform .3s;
}

.btn-wishlist-toggle.open .btn-wishlist-icon {
  transform: rotate(45deg);
}

/* ===== INLINE FORM ===== */
.wishlist-form-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, margin 0.4s ease;
  margin: 0;
}

.wishlist-form-wrap.open {
  max-height: 900px;
  margin-bottom: 40px;
}

.wishlist-form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.wishlist-form-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--obsidian);
}

.wishlist-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.wishlist-form-group {
  margin-bottom: 0;
}

.wishlist-form-group.wishlist-form-full {
  margin-bottom: 24px;
}

.budget-group {
  display: flex;
  gap: 0;
  direction: ltr;
}

.budget-input {
  border-radius: 4px 0 0 4px !important;
  border-left: none !important;
  text-align: center;
}

.currency-select {
  width: 80px !important;
  flex-shrink: 0;
  border-radius: 0 4px 4px 0 !important;
  background: var(--bg-secondary);
  font-weight: 700;
  color: var(--obsidian);
  cursor: pointer;
}

.wishlist-form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-wishlist-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: white;
  padding: 12px 44px;
  border-radius: 8px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.btn-wishlist-submit:hover {
  background: var(--gold-light);
}

.btn-wishlist-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  background: white;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: .25s;
}

.btn-wishlist-cancel:hover {
  background: var(--bg-secondary);
}

/* ===== REQUESTS SECTION ===== */
.wishlist-requests-section {
  margin-top: 0;
}

.wishlist-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.wishlist-section-line {
  width: 5px;
  height: 28px;
  background: var(--gold);
  border-radius: 3px;
  flex-shrink: 0;
}

.wishlist-section-header h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: var(--obsidian);
}

.wishlist-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wishlist-card {
  background: white;
  border: 1px solid #e8e6e0;
  border-radius: 12px;
  padding: 20px 24px;
  transition: .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.wishlist-card:hover {
  border-color: #ddd;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.wishlist-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.wishlist-card-info {
  flex: 1;
  min-width: 0;
}

.wishlist-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.wishlist-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--obsidian);
}

.wishlist-card-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}

.wishlist-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wishlist-tag {
  font-size: 12px;
  color: var(--text-muted);
  background: #f5f5f2;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 600;
}

.wishlist-card-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.wishlist-name-en {
  font-size: 14px;
  color: var(--text-muted);
}

.btn-wishlist-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: white;
  border: none;
  padding: 8px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
  font-family: 'Cairo', sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.btn-wishlist-whatsapp:hover {
  background: #22c55e;
  color: white;
  transform: scale(1.03);
}

.btn-wishlist-whatsapp i {
  font-size: 18px;
}

.wishlist-card-bottom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f3ef;
}

.wishlist-card-notes {
  font-size: 13px;
  color: #999;
  margin: 0;
  line-height: 1.6;
}

.wishlist-card-owner-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0eee8;
  justify-content: flex-end;
}

.wishlist-empty {
  text-align: center;
  padding: 80px 0;
}

.wishlist-empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
}

.wishlist-empty h3 {
  color: var(--text-muted);
  margin: 0 0 8px;
}

.wishlist-empty p {
  color: #aaa;
}

/* Tablet (768px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .wishlist-page { padding: 30px 0; }
  .wishlist-title { font-size: 36px; }
  .wishlist-form-card { padding: 28px 24px; }
  .wishlist-form-row { gap: 14px; }
  .wishlist-card { padding: 18px 20px; }
  .wishlist-card-title { font-size: 17px; }
}

/* Phone */
@media (max-width: 600px) {
  .wishlist-page { padding: 20px 0; }
  .wishlist-header { margin-bottom: 28px; }
  .wishlist-title { font-size: 28px; }
  .wishlist-subtitle { font-size: 13px; margin-bottom: 20px; }
  .btn-wishlist-toggle { width: 100%; justify-content: center; padding: 12px 20px; font-size: 15px; border-radius: 8px; }
  .wishlist-form-wrap.open { max-height: 950px; margin-bottom: 28px; }
  .wishlist-form-card { padding: 20px 16px; border-radius: 10px; }
  .wishlist-form-title { font-size: 18px; margin-bottom: 18px; }
  .wishlist-form-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .wishlist-form-actions { flex-direction: column; gap: 10px; }
  .btn-wishlist-submit, .btn-wishlist-cancel { width: 100%; justify-content: center; padding: 12px 20px; }
  .wishlist-section-header { margin-bottom: 18px; }
  .wishlist-section-header h2 { font-size: 20px; }
  .wishlist-cards { gap: 12px; }
  .wishlist-card { padding: 16px; border-radius: 10px; }
  .wishlist-card-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wishlist-card-title { font-size: 16px; }
  .wishlist-card-price { font-size: 14px; }
  .wishlist-card-middle { flex-direction: column; align-items: stretch; gap: 10px; }
  .wishlist-name-en { font-size: 13px; }
  .btn-wishlist-whatsapp { width: 100%; justify-content: center; padding: 10px; border-radius: 8px; }
  .wishlist-card-notes { font-size: 12px; }
  .wishlist-card-owner-actions { justify-content: flex-start; }
  .wishlist-empty { padding: 50px 0; }
  .wishlist-empty-icon { font-size: 44px; }
}

/* =========== DASHBOARD =========== */
.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
  width: min(1400px, 95%);
  margin: 0 auto;
  align-items: start;
}

.dashboard-sidebar {
  background: white;
  border-radius: 4px;
  border: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 20px;
}

.dashboard-sidebar hr {
  border-color: var(--border);
  margin: 16px 0;
}

.dashboard-user img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid rgba(201,168,76,0.3);
}

.dashboard-user h5 {
  margin: 0 0 6px;
  font-size: 18px;
}

.dashboard-score {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.dashboard-nav-item {
  padding: 10px 14px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: .2s;
}

.dashboard-nav-item:hover,
.dashboard-nav-item.active {
  background: var(--bg-secondary);
  font-weight: 700;
}

.dashboard-main {
  min-width: 0;
}

.dashboard-main .section-header h2 {
  font-size: 24px;
  font-weight: 800;
}

.dashboard-table-card {
  padding: 0;
  overflow: hidden;
}

.dashboard-table-card td a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.dashboard-table-card td a:hover {
  color: var(--gold);
}

.dashboard-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dashboard-actions form {
  display: inline;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

/* ── Dashboard Offers Table ── */
.dashboard-offers-table { min-width: 700px; }
.dashboard-offers-table .th-img { width: 56px; }
.dashboard-offers-table .td-img { width: 56px; padding: 6px 8px !important; }
.offer-thumb { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; display: block; border: 1px solid var(--border); }
.dashboard-offers-table .td-product { min-width: 140px; }
.dashboard-offers-table .product-link { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; display: block; }
.dashboard-offers-table .product-link:hover { color: var(--gold); }
.dashboard-offers-table .product-name-ar { font-size: 12px; color: var(--text-muted); display: block; }
.dashboard-offers-table .td-brand { color: var(--gold); font-weight: 700; font-size: 13px; white-space: nowrap; }
.dashboard-offers-table .td-updated { white-space: nowrap; }
.updated-date { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.updated-time { font-size: 11px; color: var(--text-muted); }
.dashboard-offers-table .td-actions { min-width: 220px; }
.dashboard-offers-table .update-btn { background: var(--gold-muted); color: var(--gold-dark); font-weight: 700; }
.dashboard-offers-table .update-btn:hover { background: var(--gold); color: white; }

@media (max-width: 900px) {
  .dashboard-offers-table { min-width: 0; width: 100%; }
  .dashboard-offers-table .td-img { display: table-cell; }
  .dashboard-offers-table .td-updated { display: table-cell; }
  .dashboard-offers-table .td-actions .dashboard-actions { flex-direction: row; gap: 4px; }
}

@media (max-width: 600px) {
  .dashboard-offers-table .th-img { display: none; }
  .dashboard-offers-table .td-img { display: none; }
  .dashboard-offers-table .td-brand { display: none; }
  .dashboard-offers-table th, .dashboard-offers-table td { padding: 8px 6px !important; font-size: 12px; }
  .dashboard-offers-table .product-link { font-size: 13px; }
  .dashboard-offers-table .td-actions { min-width: 0; }
  .dashboard-offers-table .td-actions .dashboard-actions { gap: 2px; }
  .dashboard-offers-table .td-actions .btn-sm { padding: 4px 8px; font-size: 11px; }
  .updated-date { font-size: 11px; }
}

.dashboard-message-card {
  text-align: center;
  padding: 60px;
}

.dashboard-message-icon {
  font-size: 60px;
  margin-bottom: 16px;
  line-height: 1;
}

.dashboard-message-text {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.dashboard-stats-grid h4 {
  margin-bottom: 12px;
  font-size: 16px;
}

.dashboard-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.dashboard-list-item a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.dashboard-list-item a:hover {
  color: var(--gold);
}

.dashboard-list-item small {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.dashboard-empty {
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Dashboard Form Card ── */
.dashboard-form-card {
  padding: 32px;
}

.dashboard-form-card .form-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 12px;
  color: var(--gold);
}

.dashboard-form-card .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dashboard-form-card .form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.dashboard-form-card .form-group {
  margin-bottom: 16px;
}

.dashboard-form-card .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.dashboard-form-card .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: .2s;
}

.dashboard-form-card .form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
}

.dashboard-form-card .form-control::placeholder {
  color: #bbb;
}

.channel-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.channel-input-row .form-control {
  flex: 1;
}

.channel-delete-form {
  display: inline;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dashboard-sidebar {
    position: static;
    padding: 16px;
  }
  .dashboard-sidebar hr {
    display: none;
  }
  .dashboard-user {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
  }
  .dashboard-user img {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
  }
  .dashboard-user h5 {
    margin: 0;
    font-size: 16px;
  }
  .dashboard-score {
    margin-top: 2px;
  }
  .dashboard-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
  }
  .dashboard-nav-item {
    padding: 6px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .dashboard-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-main .section-header {
    flex-direction: column;
    gap: 12px;
  }
  .dashboard-main .section-header h2 {
    font-size: 22px;
  }
  .dashboard-form-card {
    padding: 20px;
  }
  .dashboard-form-card .form-grid-2,
  .dashboard-form-card .form-grid-3 {
    grid-template-columns: 1fr;
  }
  .dashboard-message-card {
    padding: 32px 16px;
  }
  .dashboard-message-icon {
    font-size: 40px;
  }
  .channel-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dashboard-table-card th,
  .dashboard-table-card td {
    padding: 10px 10px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .dashboard-layout { gap: 16px; }
  .dashboard-sidebar { padding: 14px; }
  .dashboard-user img { width: 48px; height: 48px; }
  .dashboard-user h5 { font-size: 15px; }
  .dashboard-nav-item { font-size: 12px; padding: 5px 12px; }
  .dashboard-main .section-header h2 { font-size: 20px; }
  .dashboard-form-card { padding: 20px; }
  .dashboard-form-card .form-grid-2 { grid-template-columns: 1fr; }
  .dashboard-stats-grid { gap: 14px; }
  .stat-card { padding: 16px; }
  .channel-input-row { flex-direction: column; align-items: stretch; }
  .dashboard-table-card table th,
  .dashboard-table-card table td { padding: 8px 10px; font-size: 12px; }
  .dashboard-message-card { padding: 30px 16px; }
  .dashboard-message-icon { font-size: 36px; }
}

@media (max-width: 600px) {
  .dashboard-layout {
    gap: 12px;
  }
  .dashboard-user img {
    width: 40px;
    height: 40px;
  }
  .dashboard-nav {
    gap: 2px;
  }
  .dashboard-nav-item {
    font-size: 11px;
    padding: 4px 8px;
  }
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .dashboard-actions {
    flex-direction: column;
    gap: 4px;
  }
  .dashboard-actions .btn-sm {
    width: 100%;
    justify-content: center;
  }
  .dashboard-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .dashboard-message-card {
    padding: 30px 16px;
  }
  .dashboard-message-icon {
    font-size: 36px;
  }
  .dashboard-message-card h3 {
    font-size: 18px;
  }
  .channel-input-row { flex-direction: column; align-items: stretch; }
  .dashboard-form-card { padding: 16px; }
  table th, table td {
    padding: 8px 8px;
    font-size: 11px;
  }
  .td-product a {
    font-size: 12px;
    word-break: break-word;
  }
  .dashboard-main .section-header h2 {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .profile-cover { height: 200px; }
  .profile-info-section { margin-top: -60px; width: min(1200px, 95%); margin-inline: auto; }
  .profile-info-row { flex-direction: column; align-items: center; }
  .profile-info { flex-direction: column; align-items: center; text-align: center; }
  .profile-avatar-img { width: 120px; height: 120px; border-width: 4px; }
  .profile-name { font-size: 26px; }
  .profile-meta { padding-bottom: 0; display: flex; flex-direction: column; align-items: center; }
  .profile-stats-row { justify-content: center; }
  .profile-actions { align-items: center; padding-bottom: 0; gap: 8px; }
  .profile-bio { text-align: center; }
  .profile-section-header h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .profile-cover { height: 160px; }
  .profile-info-section { margin-top: -50px; }
  .profile-avatar-img { width: 100px; height: 100px; border-width: 4px; }
  .profile-name { font-size: 22px; }
  .profile-bio p { font-size: 14px; }
  .profile-products-section { padding: 0 0 24px; }
  .profile-divider { margin: 24px auto; }
}

/* =========== REVIEW CARD =========== */
.review-card {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

/* =========== STAR RATING =========== */
.star-rating {
  color: var(--gold) !important;
}

/* =========== SAVED BUTTON =========== */
/* =========== PAGINATION =========== */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 30px;
}

.pagination a,
.pagination span {
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  transition: .2s;
}

.pagination a:hover {
  background: var(--gold);
  color: white;
}

.pagination .active {
  background: var(--gold);
  color: white;
}

/* =========== ALERTS =========== */
.alert {
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-success {
  background: #dcfce7;
  color: #166534;
}

.alert-danger {
  background: #fce4e4;
  color: #991b1b;
}

.alert-warning {
  background: #fef9c3;
  color: #854d0e;
}

.alert-info {
  background: #dbeafe;
  color: #1e40af;
}

/* Login error message */
.login-error-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.45);
  color: #f87171;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.login-error-box i {
  font-size: 16px;
  flex-shrink: 0;
}

/* =========== OFFER DETAIL =========== */
.offer-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.offer-detail-layout .gallery img {
  width: 100%;
  border-radius: 4px;
}

.offer-images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.offer-images-grid img {
  width: 100%;
  border-radius: 4px;
  height: 200px;
  object-fit: cover;
}

.color-price-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}

.color-price-row .color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border);
  margin-left: 8px;
  vertical-align: middle;
}

.color-price-row .price-val {
  font-weight: 800;
  color: var(--gold);
}

/* =========== TABLE =========== */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  text-align: right;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

/* =========== WISH CARD =========== */
.wish-card {
  background: white;
  border-radius: 4px;
  padding: 24px;
  border: 1px solid var(--border);
  transition: .3s;
  border-right: 4px solid var(--obsidian);
}

.wish-card.pinned {
  border-right-color: var(--gold);
  background: #fffdf5;
}

.wish-card:hover {
  transform: translateX(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* =========== BOTTOM DOCK =========== */
.bottom-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  backdrop-filter: blur(24px);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 40px;
  z-index: 999;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 34px;
  background: rgba(10, 10, 10, 0.9);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(201, 168, 76, 0.2);
  border-image: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
}

.bottom-dock.dock-hidden {
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  pointer-events: none;
}

.bottom-dock .dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 24px;
  transition: .2s;
  white-space: nowrap;
}

.bottom-dock .dock-item i {
  font-size: 20px;
  line-height: 1;
}

.bottom-dock .dock-item:hover {
  background: rgba(201,168,76,0.1);
  color: var(--gold);
}

/* =========== FOOTER =========== */
footer {
  background: var(--obsidian);
  color: rgba(255,255,255,0.5);
  padding: 60px 20px 30px;
  margin-top: 60px;
}

footer .container {
  width: min(1400px, 95%);
  margin: auto;
}

footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

footer h5 {
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 16px;
}

footer a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  transition: .2s;
}

footer a:hover {
  color: var(--gold);
}

footer hr {
  border-color: rgba(255,255,255,0.08);
  margin: 20px 0;
}

footer .copyright {
  text-align: center;
  font-size: 14px;
}

/* =========== OFFERS SEARCH =========== */
.offers-top-section {
  margin-bottom: 32px;
}

.offers-top-header {
  text-align: center;
  margin-bottom: 24px;
}

.offers-top-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.offers-top-line {
  width: 44px;
  height: 1.5px;
  background: linear-gradient(to left, #C5A85A, transparent);
  border-radius: 1px;
}

.offers-top-line:first-child {
  background: linear-gradient(to right, #C5A85A, transparent);
}

.offers-top-prefix span {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #C5A85A;
  text-transform: uppercase;
  font-weight: 700;
}

.offers-top-title {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--obsidian);
}

.offers-top-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.offers-search-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 24px 16px;
}

.offers-search-bar-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 44px;
}

.offers-search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #FDFBF7;
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s;
}

.offers-search-bar:focus-within {
  border-color: #C5A85A;
}

.offers-search-icon {
  padding: 0 14px 0 8px;
  font-size: 16px;
  color: #bbb;
  flex-shrink: 0;
  line-height: 1;
}

.offers-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0;
  font-size: 14px;
  font-family: 'Cairo', sans-serif;
  background: transparent;
  color: #222;
  height: 100%;
}

.offers-search-input::placeholder {
  color: #bbb;
}

.offers-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e0ddd5;
  background: #FDFBF7;
  color: #999;
  text-decoration: none;
  transition: .2s;
  flex-shrink: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.offers-clear-btn:hover {
  background: #f0eee8;
  color: #555;
}

.offers-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #999;
  background: #FDFBF7;
  color: #555;
  cursor: pointer;
  transition: .2s;
  flex-shrink: 0;
  font-size: 18px;
  padding: 0;
  font-family: inherit;
  box-sizing: border-box;
}

.offers-filter-toggle:hover {
  border-color: #555;
  color: #333;
}

.offers-filter-toggle.active {
  border-color: #C5A85A;
  color: #C5A85A;
  background: #FDFBF7;
}

.offers-filters-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin 0.3s ease;
  margin: 0;
}

.offers-filters-panel.open {
  max-height: 300px;
  margin-top: 14px;
}

.offers-filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  background: #FDFBF7;
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  padding: 18px 20px;
}

.offers-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offers-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-align: right;
}

.offers-filter-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  background: white;
  transition: .2s;
  color: #222;
  box-sizing: border-box;
}

.offers-filter-input:focus {
  outline: none;
  border-color: #C5A85A;
  box-shadow: 0 0 0 2px rgba(197,168,90,0.1);
}

.offers-filter-input::placeholder {
  color: #bbb;
}

.offers-search-bottom {
  margin-top: 12px;
  text-align: right;
}

.offers-result-count {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

@media (max-width: 900px) {
  .offers-top-title { font-size: 30px; }
  .offers-search-section { padding: 16px; }
  .offers-filter-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .offers-top-title { font-size: 22px; }
  .offers-top-sub { font-size: 13px; }
  .offers-top-header { margin-bottom: 16px; }
  .offers-search-section { padding: 12px; }
  .offers-search-bar-row { gap: 8px; height: 42px; }
  .offers-search-icon { display: none; }
  .offers-filter-toggle { width: 42px; min-width: 42px; height: 42px; font-size: 16px; }
  .offers-clear-btn { width: 42px; min-width: 42px; height: 42px; font-size: 14px; }
  .offers-filter-fields { grid-template-columns: 1fr; padding: 14px 16px; }
  .offers-search-bottom { text-align: center; }
}

/* =========== PAGE CONTENT =========== */
.page-content {
  padding: 40px 0;
}

/* =========== ANIMATIONS =========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========== COVER CROP MODAL =========== */
.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.crop-modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  width: min(700px, 92%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}

.crop-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.crop-modal-header h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.crop-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.crop-close-btn:hover {
  color: var(--text);
}

.crop-modal-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crop-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  max-height: 320px;
  overflow: hidden;
  background: #222;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.crop-frame {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(255,255,255,0.7);
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

.crop-frame-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

.crop-frame-wrap img.crop-dragging {
  cursor: grabbing;
}

.crop-hint {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.avatar-crop-wrap {
  aspect-ratio: 1 / 1;
  max-height: 320px;
  max-width: 320px;
  margin: 0 auto;
}

.crop-frame-circle {
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 0 0 999px rgba(0,0,0,0.5) !important;
}

.crop-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .crop-modal-content { width: 96%; border-radius: 8px; }
  .crop-modal-header { padding: 14px 16px; }
  .crop-modal-header h3 { font-size: 17px; }
  .crop-modal-body { padding: 12px; }
  .crop-frame-wrap { max-height: 200px; }
  .crop-modal-footer { padding: 12px 16px; }
}

/* =========== RESPONSIVE =========== */

/* =========== OFFER MODAL =========== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  direction: rtl;
}
.modal-container {
  background: white; border-radius: 16px;
  width: min(680px, 100%); max-height: 90vh;
  overflow-y: auto; padding: 28px 32px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  position: relative;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-title {
  font-size: 22px; font-weight: 800; margin: 0;
}
.modal-close-btn {
  background: none; border: none; font-size: 28px;
  color: #999; cursor: pointer; padding: 0; line-height: 1;
}
.modal-close-btn:hover { color: #333; }
/* Step bar */
.step-bar {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.step-segment {
  flex: 1; height: 4px; border-radius: 2px;
  background: #e0e0e0; transition: .3s;
}
.step-segment.active { background: #111; }
/* Step content */
.modal-step { display: flex; flex-direction: column; gap: 16px; }
.modal-step-content { display: flex; flex-direction: column; gap: 14px; }
.modal-btn-primary {
  width: 100%; padding: 14px; border-radius: 12px;
  border: none; background: #8E8E8E; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: 'Cairo', sans-serif; transition: .2s;
}
.modal-btn-primary.modal-btn-next { background: #8E8E8E; }
.modal-btn-primary:hover { opacity: .9; }
.modal-btn-submit { background: #111; }
.modal-btn-secondary {
  padding: 14px 24px; border-radius: 12px;
  border: 2px solid #e0e0e0; background: transparent;
  color: #555; font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: 'Cairo', sans-serif; transition: .2s;
}
.modal-btn-secondary:hover { border-color: #999; }
.modal-nav-row {
  display: flex; gap: 12px; justify-content: space-between; margin-top: 8px;
}
.modal-nav-row .modal-btn-primary { width: auto; flex: 1; }
.modal-nav-row .modal-btn-secondary { width: auto; }
.modal-btn-small {
  padding: 10px 18px; background: #111; color: #fff;
  border: none; border-radius: 8px; font-size: 13px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  font-family: 'Cairo', sans-serif;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.modal-section-title {
  font-size: 15px; font-weight: 700; margin: 8px 0 4px;
  color: #111;
}
.required { color: var(--red); }
/* Color dropdown */
.color-dropdown-wrap {
  position: relative; flex: 1; z-index: 1;
}
.color-dropdown-trigger {
  text-align: right !important; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.color-dropdown-menu {
  position: absolute; top: 100%; right: 0; left: 0;
  z-index: 50; background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  border: 1px solid #e5e5e5; border-radius: 10px;
  margin-top: 4px; padding: 6px; list-style: none;
  display: none; max-height: 240px; overflow-y: auto;
}
.color-dropdown-menu.open { display: block; }
.color-dropdown-menu li {
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-size: 14px; transition: .15s;
}
.color-dropdown-menu li:hover { background: #f5f5f5; }
/* Custom select wrapper */
.custom-select-wrap {
  position: relative;
}
.custom-select-wrap .custom-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-left: 36px !important;
  cursor: pointer;
  background: #fff;
}
.custom-select-wrap .select-arrow {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #999; font-size: 13px; pointer-events: none;
  line-height: 1;
}
/* Color swatch in dropdown */
.color-swatch {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; vertical-align: middle;
  margin-left: 10px; flex-shrink: 0;
}
.color-dropdown-menu li {
  display: flex; align-items: center; gap: 8px;
}
/* Color add */
.color-add-row { display: flex; gap: 10px; align-items: flex-start; }
.color-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.color-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--bg-secondary);
  border-radius: 8px; font-size: 14px;
}
.color-remove {
  background: none; border: none; color: var(--red);
  font-size: 20px; cursor: pointer; padding: 0; line-height: 1;
}
/* Suggested images */
.suggested-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.suggested-cell {
  aspect-ratio: 1; border: 2px dashed #e0e0e0;
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 32px; color: #ccc;
  cursor: pointer; transition: .2s;
}
.suggested-cell:hover { border-color: #999; }
.suggested-cell.selected { border-color: var(--gold); background: #fffdf5; }
/* Upload zone */
.upload-zone {
  border: 2px dashed #e0e0e0; border-radius: 12px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: .2s; position: relative;
}
.upload-zone:hover { border-color: #999; }
.upload-zone-inner { pointer-events: none; }
.upload-plus { font-size: 36px; color: #ccc; }
.upload-zone small { color: #aaa; }
.upload-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.upload-preview-item {
  position: relative; width: 80px; height: 80px;
  border-radius: 8px; overflow: hidden;
}
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-remove {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,.5); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; cursor: pointer;
}
/* Countries check grid */
.countries-check-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.country-check-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-secondary); transition: .2s;
}
.country-check-item:hover { border-color: var(--gold); }
.country-check-item:has(input:checked) {
  background: rgba(201,168,76,0.1); border-color: var(--gold);
}
.country-check-item input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #111; cursor: pointer;
}
/* Modal form controls */
.modal-step .form-group { margin-bottom: 0; }
.modal-step .form-control {
  width: 100%; padding: 10px 14px; border: 1px solid #e5e5e5;
  border-radius: 10px; font-family: 'Cairo', sans-serif;
  font-size: 14px; box-sizing: border-box; transition: .2s;
}
.modal-step .form-control:focus {
  outline: none; border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}
.modal-step .form-label {
  display: block; font-size: 14px; font-weight: 600;
  margin-bottom: 6px; color: #333;
}

@media (max-width: 768px) {
  .modal-container { padding: 24px 20px; max-height: 85vh; }
  .modal-title { font-size: 19px; }
  .modal-step .form-label { font-size: 13px; }
  .countries-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .modal-container { padding: 16px 12px; max-height: 80vh; border-radius: 12px; }
  .modal-title { font-size: 17px; }
  .form-row-2, .form-row-3, .color-add-row { grid-template-columns: 1fr; }
  .color-add-row { flex-direction: column; }
  .modal-nav-row { flex-direction: column; gap: 8px; }
  .modal-nav-row .modal-btn-primary,
  .modal-nav-row .modal-btn-secondary { width: 100%; }
  .suggested-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .upload-zone { padding: 16px; }
  .upload-plus { font-size: 28px; }
  .modal-btn-small { padding: 8px 14px; font-size: 12px; }
  .step-bar { margin-bottom: 16px; }
}

/* Desktop large screens (1200px+) */
@media (min-width: 1200px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .hero { min-height: 85vh; }
}

/* Tablet landscape / small desktop (901px–1199px) */
@media (min-width: 901px) and (max-width: 1199px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero h1 { font-size: 48px; }
  .hero h2 { font-size: 64px; }
  .hero { min-height: 75vh; }
  .cta-section { padding: 60px 30px; }
}

/* Tablet portrait (max-width: 900px) */
@media (max-width: 900px) {
  .hero h1 { font-size: 40px; }
  .hero h2 { font-size: 52px; }
  .hero { min-height: 70vh; }
  .hero-content { padding: 20px; }
  .hero .hero-subtitle { font-size: 16px; }
  .offer-detail-layout { grid-template-columns: 1fr; }
  .cta-section { padding: 19px 73px; }
  .cta-section h2 { font-size: 28px; margin-bottom: 4px; }
  .cta-section .cta-sub { margin-bottom: 4px; }
  .cta-section .cta-desc { margin-bottom: 20px; }
  .cta-section .gold-deco { margin-bottom: 12px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .shoppers-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .section-title h2 { font-size: 28px; }
  .brands-section { padding: 30px 16px; }
  .features-section { padding: 50px 16px; }
  .page-content { padding: 24px 0; }
  .filters-row { grid-template-columns: repeat(2, 1fr); }
  .card-flat { padding: 18px; }
  table th, table td { padding: 10px 12px; font-size: 13px; }
  .offer-images-grid { grid-template-columns: 1fr 1fr; }
  .bottom-dock { padding: 6px 8px; gap: 2px; }
  .bottom-dock .dock-item { padding: 6px 10px; font-size: 9px; }
  .bottom-dock .dock-item i { font-size: 18px; }
}

/* Phone (max-width: 600px) */
@media (max-width: 600px) {
  .hero h1 { font-size: 28px; }
  .hero h2 { font-size: 36px; }
  .hero .hero-subtitle { font-size: 14px; }
  .hero { min-height: 60vh; }
  .hero-search { flex-direction: column; }
  .hero-search input { font-size: 14px; padding: 12px 16px; }
  .hero-search button { width: 100%; justify-content: center; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .features-grid { grid-template-columns: 1fr; }
  .shoppers-grid { grid-template-columns: 1fr; gap: 16px; }
  .section-header { flex-direction: column; gap: 12px; }
  .section-title h2 { font-size: 22px; }
  .hero-search { flex-direction: column; }
  .cta-section { padding: 40px 20px; margin: 40px auto 0; border-radius: 16px; }
  .cta-section h2 { font-size: 24px; }
  .cta-section .cta-desc { font-size: 13px; }
  .cta-section .cta-actions { flex-direction: column; }
  .btn-cta-gold, .btn-cta-outline { width: 100%; justify-content: center; }
  .brands-section { padding: 20px 12px; }
  .brand-tag { font-size: 12px; padding: 6px 14px; }
  .filters-row { grid-template-columns: 1fr; }
  .stat-card { padding: 18px; }
  .stat-card .stat-number { font-size: 26px; }
  .card-flat { padding: 14px; }
  .page-content { padding: 16px 0; }
  table th, table td { padding: 8px 10px; font-size: 12px; }
  .offer-images-grid { grid-template-columns: 1fr; }
  .product-card .card-footer { flex-direction: column; gap: 10px; }
  .product-card .whatsapp-btn { width: 100%; justify-content: center; }
  footer { padding: 40px 16px 20px; }
  footer .footer-grid { gap: 24px; }
  .bottom-dock { bottom: 12px; padding: 4px 6px; gap: 0; border-radius: 28px; }
  .bottom-dock .dock-item { padding: 5px 8px; font-size: 8px; gap: 1px; }
  .bottom-dock .dock-item i { font-size: 16px; }
  .pagination a, .pagination span { padding: 6px 12px; font-size: 12px; }
  .wish-card { padding: 16px; }
  .nav-links { display: none; }
}

@media (max-width: 480px) {
  .dashboard-user img { width: 36px; height: 36px; }
  .dashboard-user h5 { font-size: 13px; }
  .dashboard-nav-item { font-size: 10px; padding: 4px 6px; }
  .dashboard-main .section-header h2 { font-size: 16px; }
  .dashboard-form-card { padding: 12px; }
  .dashboard-form-card .form-section-title { font-size: 14px; }
  .stat-card { padding: 16px; }
  .dashboard-table-card th,
  .dashboard-table-card td { padding: 6px; font-size: 10px; }
  .dashboard-actions .btn-sm { font-size: 10px; padding: 4px 10px; }
  .dashboard-message-card { padding: 24px 12px; }
  .dashboard-message-icon { font-size: 28px; }
  .dashboard-message-card h3 { font-size: 15px; }
  .dashboard-message-text { font-size: 12px; }
  .dashboard-list-item { padding: 6px 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .dashboard-list-item a { font-size: 12px; }
  .dashboard-list-item small { font-size: 10px; }
  .dashboard-stats-grid { gap: 10px; margin-top: 14px; }
}

/* =========== ADMIN LAYOUT =========== */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 100vh;
  padding: 0;
  max-width: 100%;
}

.admin-sidebar {
  background: linear-gradient(180deg, #0d0d0d 0%, var(--obsidian) 100%);
  padding: 16px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.admin-sidebar-header {
  padding: 0 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}

.admin-sidebar-header .line {
  width: 3px;
  height: 16px;
  background: var(--gold);
  border-radius: 2px;
}

.admin-sidebar-header span {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
  transition: all .2s ease;
  position: relative;
  border-right: 2px solid transparent;
}

.admin-nav-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  transition: color .2s ease;
}

.admin-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.admin-nav-item:hover i {
  color: rgba(255,255,255,0.6);
}

.admin-nav-item.active {
  background: rgba(201,168,76,0.1);
  color: var(--gold);
  border-right-color: var(--gold);
}
.admin-nav-item.active i {
  color: var(--gold);
}

.admin-badge {
  margin-right: auto;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.admin-badge.amber {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}

.admin-badge.red {
  background: rgba(220,38,38,0.18);
  color: #f87171;
}

/* Admin content area */
.admin-content {
  padding: 32px;
  background: var(--bg);
  min-height: 100vh;
  box-sizing: border-box;
}

/* Spacer to push logout to bottom of sidebar */
.admin-nav-spacer {
  flex: 1;
}

.admin-nav-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(255,255,255,0.08), transparent);
  margin: 0 14px 6px;
}

.admin-nav-bottom {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-title-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-title-prefix span {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
}

.admin-page-header h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
}

.admin-total {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Stats grid for admin dashboard */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.admin-off-layout { display:grid; grid-template-columns:1fr; gap:24px; }

@media (max-width: 1024px) {
  .admin-off-layout { grid-template-columns:1fr; }
}

@media (max-width: 900px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-layout {
    min-height: auto;
  }
  .admin-sidebar {
    position: relative;
    min-height: auto;
    height: auto;
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 12px 0;
  }
  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 12px;
    gap: 4px;
  }
  .admin-nav-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
  }
  .admin-nav-item i {
    font-size: 16px;
    width: 18px;
  }
  .admin-nav-item.active::before {
    display: none;
  }
  .admin-nav-item.active {
    background: rgba(201,168,76,0.2);
  }
  .admin-sidebar-header {
    display: none;
  }
  .admin-nav-spacer,
  .admin-nav-divider,
  .admin-nav-bottom {
    display: none;
  }
  .admin-content {
    padding: 20px 16px;
  }
  .admin-page-header h2 {
    font-size: 22px;
  }
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .admin-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .admin-content {
    padding: 16px 12px;
  }
  .admin-page-header h2 {
    font-size: 18px;
  }
  .admin-nav-item {
    font-size: 11px;
    padding: 6px 10px;
  }
  .admin-nav-item i {
    font-size: 14px;
    width: 16px;
  }
  .admin-table th,
  .admin-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .user-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .admin-content {
    padding: 12px 10px;
  }
}

.user-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

/* =========== CHECKBOX GRID (settings) =========== */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: .2s;
  user-select: none;
  position: relative;
}

.checkbox-item .cb-remove,
.country-check-item .cb-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: #bbb;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: .2s;
  flex-shrink: 0;
}

.checkbox-item .cb-remove:hover,
.country-check-item .cb-remove:hover {
  color: #e74c3c;
  background: rgba(231,76,60,0.1);
}

.checkbox-item:hover {
  border-color: var(--gold);
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

.checkbox-item:has(input:checked) {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
}

.checkbox-add-item {
  background: transparent;
  border-style: dashed;
  gap: 8px;
}

.checkbox-add-item input {
  background: white;
}

/* =========== TOGGLE SWITCH =========== */
.toggle-checkbox {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}
.toggle-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  transition: .3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: .3s;
}
.toggle-checkbox input:checked + .toggle-slider {
  background: var(--gold);
}
.toggle-checkbox input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* =========== ADMIN TABLE =========== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th {
  text-align: right;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  background: var(--bg-secondary);
  white-space: nowrap;
}
.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tbody tr:hover {
  background: rgba(201,168,76,0.04);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* =========== CHAT BOX (AI conversations) =========== */
.chat-box {
  display: flex;
  flex-direction: column;
  height: 68vh;
  min-height: 420px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.chat-msg {
  display: flex;
}

.chat-msg.from-client {
  justify-content: flex-start;
}

.chat-msg.from-assistant {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
}

.chat-msg.from-client .chat-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-right-radius: 4px;
}

.chat-msg.from-assistant .chat-bubble {
  background: rgba(201,168,76,0.12);
  border-bottom-left-radius: 4px;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.chat-time {
  margin-right: 6px;
  opacity: 0.8;
}

.chat-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-input-bar {
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 12px 16px;
}

.chat-input-bar form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.chat-input-bar textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
}

.chat-input-bar button {
  padding: 10px 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.ticket-badge.open {
  background: rgba(231,76,60,0.12);
  border-color: rgba(231,76,60,0.35);
  color: #ff6b6b;
}

.ticket-badge.closed {
  background: rgba(46,204,113,0.12);
  border-color: rgba(46,204,113,0.35);
  color: #2ecc71;
}

@media (max-width: 600px) {
  .chat-box { height: calc(100vh - 240px); min-height: 360px; }
  .chat-bubble { max-width: 88%; }
}

/* =========== KEY STATUS (AI settings) =========== */
.key-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.key-input-row .form-control {
  flex: 1;
  min-width: 200px;
}

.key-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

.key-status.saved {
  background: rgba(46,204,113,0.12);
  color: #2ecc71;
}



/* =========== SOCIAL MEDIA MANAGEMENT =========== */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.social-shopper-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.social-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gold-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}

.social-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 12px;
}

.social-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.social-product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.social-product-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

.social-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-product-info {
  flex: 1;
  min-width: 0;
}

.social-product-info strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-product-price {
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}

.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.social-post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.social-post-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-secondary);
}

.social-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-post-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--text-muted);
}

.social-platform-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(10,10,10,0.75);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.social-post-body {
  padding: 14px;
}

.social-post-caption {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
  min-height: 42px;
}

.social-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.social-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.social-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.template-prompts {
  margin-top: 6px;
}

.text-center {
  text-align: center;
}

@media (max-width: 768px) {
  .social-product-row { flex-wrap: wrap; }
  .social-post-actions { flex-direction: column; }
  .social-post-actions .btn { width: 100%; justify-content: center; }
}

/* Publish confirmation modal */
.publish-confirm-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  direction: rtl;
}
.publish-confirm-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.publish-confirm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.publish-confirm-header h4 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); }
.publish-confirm-close {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0;
}
.publish-confirm-close:hover { color: var(--gold); }
.publish-confirm-preview {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--bg-secondary); margin-bottom: 14px;
}
.publish-confirm-preview img {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
}
.publish-confirm-preview .social-platform-chip { top: 10px; right: 10px; }
.publish-confirm-caption {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--text);
}
.publish-confirm-caption p { margin: 6px 0 0; color: var(--text-muted); white-space: pre-wrap; }
.publish-confirm-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.4);
  color: var(--gold-dark);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
.publish-confirm-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  align-items: center;
}
@media (max-width: 480px) {
  .publish-confirm-footer { flex-direction: column; }
  .publish-confirm-footer .btn { width: 100%; }
}

/* ---------- Footer Official Social Icons ---------- */
.footer-social { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.footer-social-btn {
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,168,76,0.35);
  color:var(--gold); background:rgba(255,255,255,0.03);
  font-size:17px; text-decoration:none;
  transition:all .25s ease;
}
.footer-social-btn:hover {
  background:var(--gold); color:#0a0a0a;
  border-color:var(--gold); transform:translateY(-2px);
}

/* ---------- Demo Account / Demo Product Badges ---------- */
.demo-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#7C5CBF,#5B3FA8);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  vertical-align:middle;
  line-height:1.4;
  white-space:nowrap;
  font-family:'Cairo',sans-serif;
}
.demo-badge-lg { font-size:13px; padding:5px 14px; }

.demo-notice {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:12px 16px;
  border:1px dashed #7C5CBF;
  background:rgba(124,92,191,0.08);
  border-radius:8px;
  color:#5B3FA8;
  font-size:13px;
  line-height:1.7;
}
.demo-notice i { font-size:16px; margin-top:2px; }

.product-card .demo-product-badge {
  position:absolute;
  bottom:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#7C5CBF,#5B3FA8);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  z-index:3;
  line-height:1.4;
  font-family:'Cairo',sans-serif;
}
.offer-detail-discount ~ .demo-product-badge-lg,
.offer-detail-discount + .demo-product-badge-lg { bottom:12px; right:12px; }
.demo-product-badge-lg {
  position:absolute;
  bottom:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg,#7C5CBF,#5B3FA8);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:4px;
  z-index:4;
  line-height:1.4;
  font-family:'Cairo',sans-serif;
}

/* ---------- Footer SBC Verification Seal ---------- */
.footer-verify {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:24px 0 8px;
  flex-wrap:wrap;
}
.footer-verify-text {
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:right;
}
.footer-verify-text strong {
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.footer-verify-text span {
  color:rgba(255,255,255,0.55);
  font-size:12px;
  line-height:1.6;
}