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

:root {
  --primary: #f84269;
  /* page colors */
  --color-background: #ffffff;
  --color-text: #0d171c;
  --color-dark: #121212;
  --color-light: #ffffff;

  /* font family fallbacks (replace or include font-face/import as needed) */
  --font-poppins: "Poppins";
  --font-noto-arabic: "Noto Sans Arabic";
  --font-noto-kufi-arabic: "Noto Kufi Arabic";
}

body {
  font-family: var(--font-noto-kufi-arabic), var(--font-noto-arabic);
  color: var(--color-text);
  padding: 0;
  width: 100%;
  line-height: 1.6;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}


h1 {
  text-align: center;
  margin: 20px 0;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-text);
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
}

/* Filter toggle button - hidden on desktop, shown via mobile.css */
.filter-toggle-btn {
  display: none;
}

/* Filter section styling */
.filters {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 25px auto;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-width: 1200px;
}



.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.filter-group label {
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--color-text);
}

/* ============================================
   ADVERTISING SLIDER STYLES
   ============================================ */
.slider-container {
  width: 90%;
  max-width: 800px;
  margin: 10px auto 20px auto;
  position: relative;
  direction: ltr; /* Ensure slides flow correctly regardless of page dir */
}

.slider-wrapper {
  position: relative;
  width: 100%;
  padding-top: 50%; /* 2:1 Aspect Ratio (Placeholder 800x400) */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  background: #000;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navigation Buttons */
.slider-btn {
  position: absolute;
  top: 40%; /* Moved up slightly to center on image, ignoring thumbnails */
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #333;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px; /* Center arrow visually */
}

.slider-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.prev { left: 10px; }
.next { right: 10px; }

/* Thumbnails */
.slider-thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.thumbnail {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail:hover {
  opacity: 1;
}

.thumbnail.active {
  opacity: 1;
  border-color: var(--primary);
  transform: scale(1.1);
}

/* ============================================ */

/* Visual label used for read-only fields inside cards */
.field-label {
  font-weight: 700;
  margin-left: 0.4rem;
  color: var(--primary);
}

.filter-group select {
  padding: 8px;
  border: 2px solid var(--primary);
  border-radius: 4px;
  background-color: white;
  font-family: var(--font-noto-arabic);
  font-size: 1rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin: 20px auto;
  width: 90%;
  max-width: 1200px;
  min-height: 180px;
  border: 1px solid var(--primary);
  border-radius: 16px;
  gap: 15px;
  overflow: hidden;
  background: #fff;
}

/* Logo image as full card  background */
.card .logo {
  min-width: 120px;
  max-width: 220px;
  min-height: 120px;
  max-height: 220px;
  border-radius: 10px;
}

.card .logo img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Text and button container above the overlay */
.card .text,
.card > .phone {
  position: relative;
  z-index: 3;
}

.card .text {
  flex: 1;
}

.cards {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
}

hr {
  border: none;
  border: 1px solid rgba(167, 160, 167, 0);
}

/* WhatsApp-like button styling */
.whatsUp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary);
  color: var(--color-light);
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
  border: 1px solid rgba(0, 0, 0, 0.322);
  font-weight: 600;
}
/* Desktop / hover interactions */
.whatsUp:hover,
.whatsUp:focus {
  transform: translateY(-3px) scale(1.01);
  opacity: 0.98;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  outline: none;
}
.whatsUp:active {
  transform: translateY(0) scale(0.995);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
  opacity: 0.98;
}
.whatsUp img {
  width: 20px;
  height: 20px;
  display: block;
  filter: none;
}
.whatsUp .wa-text {
  color: #000000;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
  font-weight: 700;
  text-shadow: #ffffff 0px 0px 4px;
}

/* New Phone Button Styling */
.phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.phone-btn:hover,
.phone-btn:focus {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.phone-btn:active {
  transform: scale(0.95);
}

.phone-btn .phone-icon {
  width: 20px;
  height: 20px;
  display: block;
  background-color: #000000;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/telephone-fill.svg") no-repeat center / contain;
  mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/telephone-fill.svg") no-repeat center / contain;
}

/* Action Buttons Container */
.action-buttons {
  display: flex;
  flex-direction: row; /* Aligns items horizontally */
  gap: 10px;
  align-items: center;
  justify-content: flex-end; /* Pushes buttons to the right (or left depending on direction) */
  margin-top: 10px;
}

/* Mobile adjustments */
@media (max-width: 425px) {
  .card .action-buttons {
    display: flex;
    flex-direction: row; /* Keep horizontal on mobile */
    justify-content: flex-end; /* Align left (in RTL context) */
    width: 100%;
    gap: 15px;
  }
  
  /* Reset WhatsApp button to be cleaner on mobile if needed, or keep full width? 
     User said "beside", so if we have phone buttons beside, WA button might need to not be full width 
     OR they are all in one row.
  */
  .whatsUp {
    width: auto; /* Let it size naturally or fill remaining space */
    flex-grow: 1; /* Allow WA button to take remaining space if desired */
    max-width: 200px;
  }

  .phone-btn {
     width: 40px !important; /* Force circle size */
     height: 40px !important;
     padding: 0;
     border-radius: 50%;
  }
}
@media (max-width: 425px) {
  .card {
    flex-direction: column;
    text-align: right;
    gap: 10px;
    padding: 15px;
    width: 90%;
    margin: 15px auto;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  p {
    text-align: right;
  }
  /* center text on small screens for better layout */
  .text {
    align-items: right;
    text-align: right;
  }
  hr {
    width: 90%;
    border: 1px solid rgb(167, 160, 167);
    border-radius: 50px;
  }

  .filters {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .filter-group {
    width: 100%;
    max-width: 300px;
  }
  h1 {
    font-size: 1.5rem;
  }
}

.logoo {
  flex-grow: 2;
}

/* Logo container with gradient overlay */
.logo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
  border-radius: 8px 8px 0 0;
}

.logo img {
  /* Cover-fit to fill the entire logo container */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #f5f5f5;
  border-radius: 8px;
}

.text {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 15px;
  align-items: right;
}

.text,
.location,
.phone,
.time,
.title {
  align-items: right;
  margin: 3px;
  text-shadow: var(--color-light) 0px 0px px;
  font-weight: 800;
}

/* use an external SVG icon (masked) so it can be colored via CSS variable */
.location::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.4rem;
  background-color: var(--primary);
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/geo-alt-fill.svg")
    no-repeat center / contain;
  mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/geo-alt-fill.svg")
    no-repeat center / contain;
}

/* clock icon for .time (masked external SVG, colored with var(--primary)) */
.time::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.4rem;
  background-color: var(--primary);
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/clock-fill.svg")
    no-repeat center / contain;
  mask: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/clock-fill.svg")
    no-repeat center / contain;
}

.title {
  font-size: 1.5rem;
}

.description {
  text-align: right;
}

.location,
.phone,
.time {
  font-size: 0.8rem;
}

/* Reusable text highlight class for readable text over images */
.text-highlight {
  background-color: rgba(255, 255, 255, 0.103);
  padding: 2px 2px;
  border-radius: 5px;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decorationbreak: clone;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 600px) {
  .description {
    padding: 3px 10px;
  }
  .title {
    font-size: 1rem;
  }
  .text,
  .location,
  .phone,
  .time,
  .description {
    font-size: 0.6rem;
    text-align: right;
  }
  pre {
    display: none;
  }
  .text {
    margin-left: auto;
  }
  .ReadMore,
  .preview,
  .full-view,
  .title,
  .description,
  .location,
  .phone,
  .time {
    margin: 3px;
  }
}

.phone img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.ReadMore {
  display: flex;
  justify-content: right;
  align-items: right;
  font-weight: 700;
  font-size: 0.7rem;
  margin: 2px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}

/* Preview paragraph styling */
.preview {
  display: block;
  margin-bottom: 8px;
}

/* Full view paragraph styling - initially hidden */
.full-view {
  display: none;
}

/* Show full view when expanded */
.expanded .full-view {
  display: block;
}

/* Hide preview when expanded */
.expanded .preview {
  display: none;
}

/* ============================================
   NEW: Animated Read More/Less (v2)
   ============================================ */
.description-container-v2 {
  overflow: hidden;
  max-height: 3.5em; /* ~2 lines of text */
  transition: max-height 0.4s ease-out;
  position: relative;
}

.description-container-v2.expanded {
  max-height: 500px; /* Large enough for any content */
  transition: max-height 0.5s ease-in;
}

.description-container-v2 .description-text {
  margin: 0;
  line-height: 1.6;
}

/* Fade overlay when collapsed */
.description-container-v2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.description-container-v2.expanded::after {
  opacity: 0;
}

/* Hide fade overlay when no overflow detected */
.description-container-v2.no-overflow {
  max-height: none; /* Remove height constraint */
}

.description-container-v2.no-overflow::after {
  display: none;
}

/* Read More button styling for v2 */
.ReadMore-v2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.75rem;
  margin: 8px 0;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.ReadMore-v2:hover {
  background: rgba(248, 66, 105, 0.1);
}

.ReadMore-v2 .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.ReadMore-v2.expanded .arrow {
  transform: rotate(180deg);
}

/* Hidden card class for filtering */
.card.hidden {
  display: none;
}

/* --- Branch Selector (Tabs) --- */
.branch-selector {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px auto;
  width: 90%;
  max-width: 800px;
  padding: 0 10px;
}

.branch-btn {
  flex: 1;
  padding: 15px 10px;
  font-family: var(--font-noto-kufi-arabic);
  font-size: 1.1rem;
  font-weight: bold;
  border: 2px solid var(--primary);
  border-radius: 12px;
  background-color: #fff;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.branch-btn:hover {
  background-color: #fff0f3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(248, 66, 105, 0.15);
}

.branch-btn.active {
  background-color: #ffe6eb;
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(248, 66, 105, 0.35);
  transform: scale(1.05);
  border-color: var(--primary);
}

/* Mobile adjustments for branch selector */
@media (max-width: 600px) {
  .branch-selector {
    gap: 8px;
  }
  .branch-btn {
    font-size: 0.9rem;
    padding: 10px 5px;
  }
}

/* ============================================
   NAVIGATION BAR
   ============================================ */
.main-nav {
  background: linear-gradient(135deg, var(--primary), #ff6b8a);
  padding: 0;
  width: 100%;
  margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 0;
}

.nav-logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  z-index: 1005;
}
.nav-logo span {
  z-index: 1005;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 5px;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: center;
}

.nav-links li a {
  display: block;
  padding: 15px 8px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
}

.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-links li a.active {
  background: rgba(255, 255, 255, 0.15);
  border-bottom-color: #fff;
  color: #fff;
}

/* Hamburger Menu Button */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================
   FORM PAGE STYLES
   ============================================ */
.form-container {
  background: #fff;
  padding: 30px;
  margin: 20px auto;
  width: 90%;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-title {
  text-align: center;
  color: var(--primary);
  margin-bottom: 20px;
}

.form-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 0.9rem;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: var(--font-noto-arabic);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.required-note {
  color: #e74c3c;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 20px;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--primary), #ff6b8a);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(248, 66, 105, 0.3);
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-area:hover {
  border-color: var(--primary);
}

.upload-icon {
  font-size: 3rem;
  color: #ccc;
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */
.about-container {
  background: #fff;
  padding: 40px;
  margin: 20px auto;
  width: 90%;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.about-logo {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
}

.about-title {
  color: var(--primary);
  font-size: 2rem;
  margin-bottom: 15px;
}

.about-description {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.about-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}

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

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary);
}

.stat-label {
  color: #777;
  font-size: 0.9rem;
}

/* ============================================
   SOCIAL MEDIA PAGE STYLES
   ============================================ */
.social-container {
  background: #fff;
  padding: 40px;
  margin: 20px auto;
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.social-title {
  text-align: center;
  color: var(--primary);
  margin-bottom: 30px;
}

.social-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 16px;
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.social-link:hover {
  transform: translateX(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.social-icon svg {
  width: 24px;
  height: 24px;
}

/* Brand colors for social icons */
.social-link.facebook .social-icon {
  background: linear-gradient(135deg, #1877f2, #0d65d9);
}

.social-link.instagram .social-icon {
  background: linear-gradient(135deg, #e4405f, #c13584, #833ab4);
}

.social-link.whatsapp .social-icon {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.social-link.telegram .social-icon {
  background: linear-gradient(135deg, #0088cc, #229ed9);
}

.social-link.tiktok .social-icon {
  background: linear-gradient(135deg, #000000, #25f4ee);
}

/* Hover color effects */
.social-link.facebook:hover {
  border-color: #1877f2;
}
.social-link.instagram:hover {
  border-color: #e4405f;
}
.social-link.whatsapp:hover {
  border-color: #25d366;
}
.social-link.telegram:hover {
  border-color: #0088cc;
}
.social-link.tiktok:hover {
  border-color: #000;
}

/* New Social Media Colors */
.social-link.x-twitter .social-icon {
  background: linear-gradient(135deg, #000000, #14171a);
}
.social-link.x-twitter:hover {
  border-color: #000000;
}

.social-link.youtube .social-icon {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}
.social-link.youtube:hover {
  border-color: #ff0000;
}

.social-link.linkedin .social-icon {
  background: linear-gradient(135deg, #0077b5, #005582);
}
.social-link.linkedin:hover {
  border-color: #0077b5;
}

.social-link.snapchat .social-icon {
  background: linear-gradient(135deg, #fffc00, #ffd000);
  /* Default color is white */
}
.social-link.snapchat:hover {
  border-color: #fffc00;
}

.social-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 2px;
}

.social-handle {
  color: #888;
  font-size: 0.85rem;
  direction: ltr;
}

/* ============================================
   SHARE PAGE STYLES
   ============================================ */
.share-container {
  background: #fff;
  padding: 40px;
  margin: 20px auto;
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.share-title {
  color: var(--primary);
  margin-bottom: 15px;
}

.share-description {
  color: #666;
  margin-bottom: 30px;
  line-height: 1.7;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.share-btn svg {
  flex-shrink: 0;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.share-btn:active {
  transform: translateY(0);
}

.share-btn.whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}
.share-btn.facebook {
  background: linear-gradient(135deg, #1877f2, #0d65d9);
}
.share-btn.twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8ddb);
}
.share-btn.telegram {
  background: linear-gradient(135deg, #0088cc, #229ed9);
}
.share-btn.copy {
  background: linear-gradient(135deg, var(--primary), #ff6b8a);
}

.app-link {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  font-family: monospace;
  word-break: break-all;
  margin-bottom: 15px;
}

.copy-success {
  color: #27ae60;
  font-weight: bold;
  display: none;
}

/* ============================================
   HERO SECTION (Supplier Page)
   ============================================ */
.hero-section {
  background: url("../Supplier/img/car-parts-hero.png") center center / cover
    no-repeat;
  background-color: #333;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dark overlay for better text readability */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-filter-box {
  background: linear-gradient(
    135deg,
    rgba(80, 20, 40, 0.25),
    rgba(40, 10, 20, 0.35)
  ); /* Much more transparent */
  backdrop-filter: blur(15px); /* Slightly reduced blur for clarity */
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(248, 66, 105, 0.15);
  border-radius: 20px;
  padding: 30px; /* Increased padding */
  min-width: 320px;
  max-width: 600px;
}

.hero-filter-box h2 {
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 8px; /* increased margin */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   
}

.hero-filter-box .hero-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin-bottom: 25px; /* increased margin */
}

.hero-filter-box .filter-group {
  margin-bottom: 20px; /* increased margin */
}

.hero-filter-box select {
  width: 100%;
  padding: 14px 15px; /* increased padding */
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: 15px; /* space between selects */
}

.hero-filter-box select:focus {
  border-color: var(--primary);
  outline: none;
}

/* ============================================
   BRAND GRID FILTER (Supplier Page)
   ============================================ */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  max-height: 300px; /* Optional: limit height if too many */
  overflow-y: auto; /* Scroll if needed, though with 4 cols it should fit */
  padding: 2px; /* Prevent shadow cutout */
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid transparent; /* Prepare for active border */
  border-radius: 12px;
  padding: 10px 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 70px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-family: inherit;
  color: #333;
}

.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.brand-card.active {
  border-color: var(--primary);
  background-color: #fff5f7;
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(248, 66, 105, 0.2);
}

.brand-card img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 5px;
  filter: grayscale(0%); /* Keep color */
}

.brand-card span {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Ensure images don't distort */
.brand-card img[src=""] {
  display: none;
}

/* Custom Scrollbar for Brand Grid */
.brand-grid::-webkit-scrollbar {
  width: 6px;
}

.brand-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.brand-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  transition: background 0.2s;
}

.brand-grid::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Firefox fallback */
.brand-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Tablet (min-width: 600px): 6 columns and wider filter box */
@media (min-width: 600px) {
  .hero-filter-box {
    max-width: 600px;
  }
  .brand-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Desktop (min-width: 1024px): 12 columns and even wider filter box */
@media (min-width: 1024px) {
  .hero-filter-box {
    max-width: 1100px; /* Wide enough (12*80px approx) */
  }
  .brand-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}
/* ============================================
   CUSTOM SELECT DROPDOWN STYLING
   ============================================ */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(248, 66, 105, 0.4); /* Light primary Color */
  border-radius: 12px !important;
  padding: 12px 15px 12px 40px; /* Left padding for arrow (RTL) */
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f84269' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center; /* Arrow on left for RTL */
  background-size: 18px;
  transition: all 0.2s ease;
  width: 100%;
}

select:hover {
  border-color: var(--primary);
  background-color: #fff0f3; /* Very light pink tint */
  box-shadow: 0 4px 12px rgba(248, 66, 105, 0.15);
}

select:focus {
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(248, 66, 105, 0.2);
}

/* Specific ID overrides to ensure consistency */
#locationFilter, #serviceFilter {
  border: 1px solid rgba(248, 66, 105, 0.4);
  border-radius: 12px;
  height: auto;
}

/* Attempting to style options (Browser dependent) */
option {
  padding: 10px;
  font-size: 1rem;
  background-color: #fff;
  color: #333;
}

.hero-search-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
}

.hero-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(248, 66, 105, 0.3);
}

.hero-image {
  flex: 1;
  text-align: center;
  min-width: 300px;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: contain;
}

.hero-title {
  text-align: center;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 30px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  background: none !important;
  box-shadow: none !important;
  padding: 0;
  border-radius: 0;
  width: auto;
  max-width: none;
}

/* Hero Features */
.hero-features {
  background: #fff;
  padding: 30px 20px;
  border-top: 1px solid #eee;
}

.hero-features-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.hero-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #555;
}

.hero-features-list li::before {
  content: ">>";
  color: var(--primary);
  font-weight: bold;
  font-size: 1.1rem;
}

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

.hero-map img {
  max-width: 200px;
  height: auto;
}

.hero-map p {
  margin-top: 10px;
  font-weight: bold;
  color: #555;
}

/* Mobile Hero */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-filter-box {
    width: 100%;
    max-width: 100%;
  }
  .hero-image {
    order: -1;
  }
  .hero-title {
    font-size: 1.5rem;
  }
  .hero-features-container {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================
   BOTTOM NAVIGATION BAR (3 Items)
   ============================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background-color: var(--primary);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 Equal columns */
  align-items: center;
  padding: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: none; /* Hidden by default on desktop */
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.75rem;
  gap: 4px;
  height: 100%;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  font-family: var(--font-noto-kufi-arabic);
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
  color: #fff;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.nav-item:active svg {
  transform: scale(0.9);
}

/* More Menu Overlay */
.more-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9998; /* Behind bottom-nav */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.more-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.more-menu-container {
  background: #fff;
  width: 100%;
  max-width: 600px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 30px 20px 90px 20px; /* Extra bottom padding for nav bar */
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
}

.more-menu-overlay.open .more-menu-container {
  transform: translateY(0);
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.menu-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text);
}

.close-menu-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%; /* Optional */
  font-size: 1.5rem;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s;
}

.close-menu-btn:hover {
  transform: scale(1.1);
  background: transparent;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--color-text);
  gap: 12px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.menu-item:hover {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
}

.menu-item span {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Mobile Visibility */
@media (max-width: 768px) {
  .bottom-nav {
    display: grid;
  }

  body {
    padding-bottom: 80px;
  }

  /* Completely hide old top hamburger menu */
  .hamburger-menu,
  .mobile-menu {
    display: none !important;
  }

  .main-nav {
    justify-content: center;
  }
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */
.pwa-install-banner {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff; /* Force solid white */
  padding: 12px 15px; /* Slightly larger */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow */
  z-index: 100000; /* Max z-index */
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  direction: rtl; /* Ensure RTL */
  animation: slideDown 0.5s ease forwards;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.pwa-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pwa-text h3 {
  font-size: 0.95rem;
  margin: 0 0 2px 0;
  color: #333; /* Dark text for contrast */
  font-weight: 800;
}

.pwa-text p {
  font-size: 0.8rem;
  margin: 0;
  color: #666;
}

.pwa-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-install-btn {
  background: var(--primary); /* Brand color */
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(248, 66, 105, 0.3);
}

.pwa-dismiss-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 1.5rem; /* Slightly larger for standalone X */
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s;
}

.pwa-dismiss-btn:hover,
.pwa-dismiss-btn:active {
  transform: scale(1.1); /* Subtle zoom instead of background change */
  background: transparent;
}

/* Base style: Hide number on mobile */
.phone-number {
  display: none;
}

/* ============================================
   RESPONSIVE BREAKPOINTS (769px - 1090px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1090px) {
  /* Fix for Tablet/Small Laptop whitespace ("doesn't fit 100%") */
  .cards, .filters, .hero-container {
    width: 98%; 
    max-width: 100%;
    margin: 10px auto;
    padding: 0 5px;
  }
  
  .nav-container {
    width: 100%;
    padding: 0 10px;
  }
  
  .nav-links li a {
    padding: 10px 5px;
    font-size: 0.8rem;
  }
  
  /* Ensure hero items wrap properly without huge gaps */
  .hero-container {
    justify-content: center;
    gap: 20px;
  }

  /* Fix header overlap for content pages */
  .about-container, .form-container {
    margin-top: 120px !important;
  }

  /* Stack action buttons vertically on tablet/desktop */
  .card .phone.action-buttons {
    flex-direction: column !important;
    gap: 10px;
    justify-content: center;
    width: auto; /* Adjust width to fit content */
    min-width: 60px; /* Ensure enough width for buttons */
  }

  .phone-btn {
    margin: 0 !important; /* Reset horizontal margins */
    width: auto !important; /* Allow width to grow */
    border-radius: 50px !important; /* Pill shape */
    padding: 0 15px !important; /* Add padding for text */
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    height: 40px !important;
  }
  
  /* Show number on desktop */
  .phone-number {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    color: #fff;
    direction: ltr; /* Ensure numbers display correctly */
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS (1091px+)
   ============================================ */
@media (min-width: 1091px) {
  /* Laptop / Medium Desktop adjustments */
  .cards, .filters, .hero-container {
    max-width: 95%;
    margin: 0 auto;
  }

  /* Stack action buttons vertically on larger screens too */
  .card .phone.action-buttons {
    flex-direction: column !important;
    gap: 10px;
    justify-content: center;
    width: auto;
  }
  
  .phone-btn {
    margin: 0 !important; 
    width: auto !important;
    border-radius: 50px !important;
    padding: 0 15px !important;
    justify-content: center;
    gap: 8px;
    height: 40px !important;
  }

  /* Show number on desktop */
  .phone-number {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    color: #fff;
    direction: ltr;
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS (1260px+)
   ============================================ */
@media (min-width: 1261px) {
  /* Large Desktop adjustments */
  .cards, .filters, .hero-container {
    max-width: 1200px; /* Cap width for very large screens */
  }
}
/* ============================================
   TERMS AND PRIVACY PAGE STYLES
   ============================================ */
.page-container {
  background: #fff;
  padding: 40px;
  margin: 30px auto;
  width: 90%;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-content {
  line-height: 1.8;
  color: #444;
  font-size: 1.05rem;
}

.page-content h3 {
  color: var(--primary);
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.page-content ul {
  margin-right: 20px;
  margin-bottom: 20px;
}

.page-content li {
  margin-bottom: 8px;
}

/* Specific h1 override for text pages if needed, 
   but global h1 is also fine. 
   Restoring the specific border look inside page-container */
.page-container h1 {
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 25px;
  /* Resetting some global h1 styles if they conflict, 
     but keeping the nice global container look is usually better.
     Let's keep it additive or just let global h1 rule. 
     The original had specific border-bottom. */
  box-shadow: none; /* simple look */
  text-align: right; /* text pages usually read better right-aligned in RTL */
  background: transparent;
  width: 100%;
}

.page-content strong {
  font-weight: bold;
  color: var(--primary);
}
/* ============================================
   SOCIAL MEDIA PAGE STYLES (PREMIUM REDESIGN)
   ============================================ */
.social-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.social-title {
  color: var(--primary);
  margin-bottom: 30px;
  font-size: 1.6rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(248, 66, 105, 0.1);
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.social-link {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 18px;
  text-decoration: none;
  color: white;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-weight: bold;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.social-link:active {
  transform: scale(0.98);
}

/* Glassy shimmer effect on hover */
.social-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}

.social-link:hover::after {
  left: 150%;
  transition: 0.7s ease-in-out;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.social-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.social-text-content {
  text-align: right;
  flex: 1;
}

.social-name {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.social-handle {
  font-size: 0.95rem;
  color: #ffffff; /* Explicit white */
  opacity: 1; /* Remove transparency */
  font-weight: 700; /* Make it thick */
  margin-top: 4px;
  font-family: var(--font-poppins);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Pop from background */
  text-transform: lowercase;
}

/* 
   Vibrant Gradients 
   Using modern, rich gradients with depth
*/
.facebook { 
  background: linear-gradient(135deg, #1877f2 0%, #0d5cb9 100%); 
}
.instagram { 
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); 
}
.x-twitter { 
  background: linear-gradient(135deg, #2a2a2a 0%, #000000 100%); 
}
.youtube { 
  background: linear-gradient(135deg, #ff0000 0%, #c40202 100%); 
}
.linkedin { 
  background: linear-gradient(135deg, #0077b5 0%, #004d75 100%); 
}
.whatsapp { 
  background: linear-gradient(135deg, #25d366 0%, #179148 100%); 
}
.telegram { 
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%); 
}
.snapchat { 
  background: linear-gradient(135deg, #FFFC00 0%, #FDBD00 100%); 
  color: #000 !important; 
}
/* Ensure text on bright backgrounds (like Snapchat) is readable */
.snapchat .social-handle, .snapchat .social-name {
    color: #000 !important;
    text-shadow: none; /* No shadow needed for black text on yellow */
}
.snapchat .social-icon { 
  background: rgba(0, 0, 0, 0.08); 
  color: #000;
}
.tiktok { 
  background: linear-gradient(135deg, #000000 0%, #1e1e1e 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle accent for tiktok */
.tiktok::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background: linear-gradient(45deg, rgba(37,244,238,0.2) 0%, transparent 50%, rgba(254,44,85,0.2) 100%);
   pointer-events: none;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .social-container {
    width: 95%;
    padding: 20px;
    margin: 20px auto;
  }
  .social-link {
    padding: 12px 18px;
  }
  .social-name {
    font-size: 1.1rem;
  }
}
/* ============================================
   ORDER FORM STYLES
   ============================================ */
.form-container {
  max-width: 600px;
  margin: 30px auto;
  padding: 30px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  direction: rtl; /* Ensure RTL layout */
}

.form-container h1 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 30px;
  font-size: 1.8rem;
  background: none;
  box-shadow: none;
  padding: 0;
  width: auto;
}

.form-group {
  margin-bottom: 20px;
  text-align: right;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--color-text);
}

.form-group input[type="text"],
.form-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
  border-color: var(--primary);
  outline: none;
}

/* Upload Area Styling */
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fafafa;
  text-align: center;
}

.upload-area:hover {
  background-color: #fff0f3;
  border-color: var(--primary);
}

.upload-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.upload-area p {
  margin: 5px 0;
  font-weight: bold;
  color: #555;
}

.upload-area small {
  color: #888;
}

/* Submit Button */
.submit-btn {
  width: 100%;
  padding: 15px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(248, 66, 105, 0.4);
}

.submit-btn:active {
  transform: scale(0.98);
}

/* ============================================
   SPLASH SCREEN STYLES
   ============================================ */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}

#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.splash-logo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(248, 66, 105, 0.2);
  animation: float 3s ease-in-out infinite;
}

.splash-title {
  font-size: 2rem;
  color: var(--primary);
  margin: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards 0.3s;
}

.splash-loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-top: 10px;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}