.floating-btn {
  width: 52px;
  height: 52px;
  background-color: #fff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
  transition: transform 0.3s ease;
}

.floating-btn:hover {
  transform: scale(1.1);
}

.floating-btn.whatsapp {
  background-color: #25D366;
}
.floating-btn.phone {
  background-color: #8183BE;
}

.tooltip-wrapper {
  position: relative;
}

.tooltip { 
  border-radius : 8px;
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background:#fff;
  color: #000;
  padding: 6px 10px;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}

/* Pulse animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.floating-btn.instagram {
  background: linear-gradient(45deg,
    #f09433 0%,   /* نارنجی */
    #e6683c 25%,  /* قرمز مایل */
    #dc2743 50%,  /* قرمز */
    #cc2366 75%,  /* صورتی */
    #bc1888 100%  /* بنفش */
  );
}
.floating-btn.telegram {
  background: linear-gradient(135deg, #0088cc, #00bfff);
}

/* Quantity widget (unique classes) */
		.qty-widget {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			border-radius: 999px;
			padding: 8px 10px;
			background: #f7f8fc;
			box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
			direction: rtl;
			margin: 16px;
		}

		.qty-badge {
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
			color: #fff;
			border-radius: 999px;
			padding: 6px 12px;
			font-weight: 600;
			font-size: 14px;
			line-height: 1;
			display: flex;
			align-items: center;
		}

		/* Buttons */
		.qty-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			text-decoration: none;
			font-size: 20px;
			font-weight: 700;
			user-select: none;
			border: 1px solid rgba(17,17,17,0.06);
			background: #ffffff;
			color: #111;
			transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
			cursor: pointer;
		}
		.qty-btn:hover { box-shadow: 0 4px 10px rgba(17,17,17,0.1); }
		.qty-btn:active { transform: translateY(1px) scale(0.98); }

		/* Angular visibility helper */
		.ng-hide { display: none !important; }

		/* Input */
		.qty-input {
			width: 74px;
			height: 36px;
			border: 1px solid rgba(17,17,17,0.08);
			background: #fff;
			border-radius: 10px;
			text-align: center;
			font-weight: 700;
			font-size: 15px;
			color: #111;
			outline: none;
			transition: border-color 120ms ease, box-shadow 120ms ease;
		}
		.qty-input:focus {
			border-color: var(--accent);
			box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15);
		}
		/* Remove number input spinners */
		.qty-input::-webkit-outer-spin-button,
		.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
		.qty-input { -moz-appearance: textfield; }

		/* Responsive */
		@media (max-width: 480px) {
			.qty-widget { gap: 6px; padding: 6px 8px; }
			.qty-btn { width: 34px; height: 34px; font-size: 18px; }
			.qty-input { width: 64px; height: 34px; font-size: 14px; }
			.qty-badge { font-size: 13px; padding: 5px 10px; }
		}


.table-of-content {background-color: #efefef;padding: 10px 20px;border: 1px solid #000;border-radius: 15px;display: inline-block;margin-bottom: 20px;}
.headline-h2 {}
.headline-h3 {margin-right: 25px;}
.headline-h4 {margin-right: 50px;}
.headline-h5 {margin-right: 75px;}
.headline-h6 {margin-right: 100px;}
/* Table-Of-Content */