/* ============================================================
   HR Benefits Orbit Widget
   ============================================================ */

.hrbw-wrapper {
	position: relative;
	width: 100%;
	padding: 20px 0;
	overflow: hidden;
}

/* ---------- Header ---------- */
.hrbw-header {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 50px;
	position: relative;
	z-index: 3;
}

.hrbw-title {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
}

.hrbw-subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* ---------- Orbit layout ---------- */
.hrbw-orbit {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 30px;
	min-height: 440px;
}

/* Columns of cards */
.hrbw-col {
	display: flex;
	flex-direction: column;
	row-gap: 70px;
	position: relative;
	z-index: 3;
}

.hrbw-col--left  { align-items: flex-end; }
.hrbw-col--right { align-items: flex-start; }

/* Card position: har card ka X/Y offset repeater controls se
   aata hai (--hrbw-x / --hrbw-y CSS variables) */

/* ---------- Card ---------- */
.hrbw-card {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #eee;
	border-style: solid;
	border-radius: 14px;
	padding: 10px 14px 10px 18px;
	text-decoration: none;
	white-space: nowrap;
	transform: translate(var(--hrbw-x, 0px), var(--hrbw-y, 0px));
	transition: transform .25s ease, box-shadow .25s ease;
}

a.hrbw-card:hover {
	transform: translate(var(--hrbw-x, 0px), calc(var(--hrbw-y, 0px) - 3px));
}

/* Right-side cards: icon pehle, text baad mein */
.hrbw-card--right {
	flex-direction: row-reverse;
	padding: 10px 18px 10px 14px;
}

.hrbw-card__text {
	font-size: 15px;
	font-weight: 600;
	color: #1b1b1b;
	line-height: 1.3;
}

.hrbw-card__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hrbw-card__icon i,
.hrbw-card__icon svg {
	color: #fff;
	fill: #fff;
	font-size: 18px;
	line-height: 1;
}

/* ---------- Center circle ---------- */
.hrbw-center {
	position: relative;
	width: 340px;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* Image/SVG mode: uploaded graphic poori center design replace karti hai */
.hrbw-center--image {
	width: 460px;
	height: 460px;
}

.hrbw-center__svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hrbw-center__glow {
	position: absolute;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, #fddcd9 0%, transparent 72%);
	z-index: 1;
}

.hrbw-center__logo {
	position: relative;
	z-index: 2;
	width: 110px;
	height: 110px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(240, 90, 80, .12);
}

.hrbw-center__logo img {
	width: 55%;
	height: 55%;
	object-fit: contain;
	display: block;
}

/* ---------- Rings ---------- */
/* Fix 1: solid lines (dashed nahi) */
.hrbw-ring {
	position: absolute;
	border: 1px solid #f9c9c5;
	border-radius: 50%;
	pointer-events: none;
}

.hrbw-ring--inner {
	width: 300px;
	height: 300px;
}

.hrbw-ring--outer {
	width: 460px;
	height: 460px;
}

/* ---------- Dots on rings ---------- */
/* Dots ki X/Y position Content tab ke "Orbit Dots" repeater
   se control hoti hai (left/top %), size Style tab se */
.hrbw-dot {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f08a84;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Chhote laptops (1025px – 1280px): cards wrap ho saken */
@media (max-width: 1280px) {
	.hrbw-card {
		white-space: normal;
		max-width: 300px;
	}
}

/* Tablets (768px – 1024px) */
@media (max-width: 1024px) {
	.hrbw-center { width: 260px; height: 260px; }
	.hrbw-center--image { width: 340px; height: 340px; }
	.hrbw-ring--outer { width: 340px; height: 340px; }
	.hrbw-ring--inner { width: 230px; height: 230px; }
	.hrbw-center__glow { width: 190px; height: 190px; }
	.hrbw-center__logo { width: 95px; height: 95px; }

	.hrbw-card { max-width: 250px; }
	.hrbw-card__text { font-size: 13px; }
	.hrbw-card__icon { width: 36px; height: 36px; }
	.hrbw-dot { width: 14px; height: 14px; }

	.hrbw-col { row-gap: 44px; }
	.hrbw-orbit { gap: 16px; min-height: 380px; }
}

/* Mobile (767px se neeche) */
@media (max-width: 767px) {
	.hrbw-orbit {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 40px;
		min-height: 0;
	}

	/* Mobile order: center circle sab se pehle */
	.hrbw-center      { order: 1; width: 240px; height: 240px; }
	.hrbw-center--image { width: 260px; height: 260px; }
	.hrbw-col--left   { order: 2; }
	.hrbw-col--right  { order: 3; }

	.hrbw-col {
		align-items: stretch;
		width: 100%;
		max-width: 420px;
		row-gap: 16px;
	}

	.hrbw-card,
	.hrbw-card--right {
		width: 100%;
		max-width: none;
		justify-content: space-between;
		white-space: normal;
		transform: none !important;
	}

	.hrbw-ring--outer { width: 240px; height: 240px; }
	.hrbw-ring--inner { width: 180px; height: 180px; }
	.hrbw-center__glow { width: 170px; height: 170px; }
	.hrbw-center__logo { width: 90px; height: 90px; }
	.hrbw-dot { width: 12px; height: 12px; }
}