/* Add custom CSS styles below */ 
.service-card-quick-view__timeline {
  overflow: scroll;
}

.navbar-brand .site-logo, .navbar-brand img {
    max-height: 3.5rem;
}

#app .navbar-brand .site-logo, .navbar-brand img {
    max-width: unset;
}
#app.index.topnav-is-dark .main-menu li.root-level>a {
    color: #ffffff;
}




/* ===================================================================== */
/* ==  Coupon Styles  | START  == */
/* ===================================================================== */
@property --hc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hc-coupon {
  --hc-teal: #34d8b8;
  --hc-blue: #5b82f0;
  --hc-purple: #8b7bf0;
  --hc-surface: rgba(18, 20, 38, 0.72);
  --hc-hole: #0f1124;
  --hc-text: #eaecf7;
  --hc-text-dim: #9298bd;

  position: relative;
  max-width: 640px;
  margin: 40px auto;
  padding: 36px 34px;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(139, 123, 240, 0.14), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(52, 216, 184, 0.14), transparent 55%),
    var(--hc-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 22px 48px -22px rgba(0, 0, 0, 0.75),
    0 0 60px -30px rgba(52, 216, 184, 0.55),
    0 0 60px -30px rgba(139, 123, 240, 0.55);
  color: var(--hc-text);
  text-align: center;
  font-family: inherit;
  overflow: hidden;
  box-sizing: border-box;
}
.hc-coupon * { box-sizing: border-box; }

/* الإطار المتدرّج الدوّار */
.hc-coupon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--hc-angle),
    var(--hc-teal), var(--hc-purple), var(--hc-blue), var(--hc-teal)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: hcSpin 8s linear infinite;
  pointer-events: none;
}

.hc-coupon .coupon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 18px;
  background: rgba(52, 216, 184, 0.10);
  border: 1px solid rgba(52, 216, 184, 0.35);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hc-teal);
}
.hc-coupon .coupon-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hc-teal);
  box-shadow: 0 0 8px var(--hc-teal);
  animation: hcPulse 1.8s ease-in-out infinite;
}

.hc-coupon h2 {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  background: linear-gradient(90deg, var(--hc-teal), #ffffff 55%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hc-coupon .coupon-description {
  margin: 0 auto 26px;
  max-width: 500px;
  line-height: 1.9;
  font-size: 15px;
  color: var(--hc-text-dim);
}

/* صف الكود بشكل تذكرة */
.hc-coupon .coupon-code-row {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 480px;
  margin: 0 auto;
  padding: 10px;
  border: 1.5px dashed rgba(52, 216, 184, 0.5);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.hc-coupon .coupon-code-row::before,
.hc-coupon .coupon-code-row::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hc-hole);
  transform: translateY(-50%);
}
.hc-coupon .coupon-code-row::before { right: -9px; }
.hc-coupon .coupon-code-row::after  { left: -9px; }

.hc-coupon .coupon-code-content {
  flex: 1;
  text-align: right;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-coupon .coupon-code-content > span {
  font-size: 12px;
  color: var(--hc-text-dim);
}
.hc-coupon [data-coupon-code] {
  display: block;
  direction: ltr;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 4px;
  color: #fff;
  text-shadow: 0 0 14px rgba(52, 216, 184, 0.6);
  cursor: pointer;
  outline-offset: 4px;
}

.hc-coupon .coupon-copy {
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  padding: 0 24px;
  border-radius: 11px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(120deg, var(--hc-blue), var(--hc-purple) 50%, var(--hc-teal));
  box-shadow: 0 8px 20px -8px rgba(91, 130, 240, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hc-coupon .coupon-copy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.hc-coupon .coupon-copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(139, 123, 240, 0.7);
}
.hc-coupon .coupon-copy:hover::after { left: 150%; }
.hc-coupon .coupon-copy:active { transform: translateY(0) scale(0.98); }
.hc-coupon .coupon-copy.copied {
  background: linear-gradient(120deg, #17b898, var(--hc-teal));
}

.hc-coupon .copy-message {
  min-height: 22px;
  padding-top: 10px;
  font-size: 13px;
  color: var(--hc-teal);
}
.hc-coupon .copy-message.error { color: #ff9090; }

.hc-coupon .coupon-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  margin: 22px auto 0;
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, var(--hc-teal), var(--hc-purple) 55%, var(--hc-blue));
  box-shadow: 0 12px 30px -12px rgba(139, 123, 240, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hc-coupon .coupon-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(52, 216, 184, 0.7);
}
.hc-coupon .coupon-cta span { transition: transform 0.25s ease; }
.hc-coupon .coupon-cta:hover span { transform: translateX(-6px); }

@keyframes hcSpin { to { --hc-angle: 360deg; } }
@keyframes hcPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-coupon::before,
  .hc-coupon .coupon-badge::before { animation: none; }
  .hc-coupon .coupon-copy::after,
  .hc-coupon .coupon-cta span { transition: none; }
}

@media (max-width: 600px) {
  .hc-coupon { padding: 26px 18px; }
  .hc-coupon h2 { font-size: 25px; }
  .hc-coupon .coupon-code-row { flex-direction: column; }
  .hc-coupon .coupon-code-content { text-align: center; }
  .hc-coupon .coupon-code-row::before,
  .hc-coupon .coupon-code-row::after { display: none; }
  .hc-coupon .coupon-copy { width: 100%; padding: 12px; }
}
/* ===================================================================== */
/* ==  Coupon Styles  |  END    == */
/* ===================================================================== */