/* ============================================================
   pages.css — Shared styles for static content pages:
   Privacy Policy, Terms & Conditions, Refund Policy,
   Shipping Policy, FAQs, Customer Support.
   Include with: <link rel="stylesheet" href="{{ asset('frontend/assets/css/pages.css') }}">
   ============================================================ */

.policy-icon-circle {
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.policy-card {
	border: 0;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	margin-bottom: 30px;
	overflow: hidden;
}

.policy-card .card-body {
	padding: 32px;
}

@media (max-width: 576px) {
	.policy-card .card-body {
		padding: 20px;
	}
}

.policy-card-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.policy-card-header h1,
.policy-card-header h2 {
	margin: 0;
	font-weight: 700;
	color: var(--heading-color);
}

.policy-subtitle {
	color: #8a8a8a;
	font-size: 14px;
	margin-top: 2px;
	margin-bottom: 0;
}

/* Accordion */
.policy-accordion .accordion-item {
	border: 1px solid #eee;
	border-radius: 10px !important;
	margin-bottom: 14px;
	overflow: hidden;
}

.policy-accordion .accordion-item:last-child {
	margin-bottom: 0;
}

.policy-accordion .accordion-button {
	font-weight: 600;
	background-color: #fff;
	color: var(--text-dark);
	box-shadow: none;
	padding: 18px 20px;
}

.policy-accordion .accordion-button:not(.collapsed) {
	background-color: var(--primary-bg-color);
	color: var(--primary-color);
}

.policy-accordion .accordion-button::after {
	filter: none;
}

.policy-accordion .accordion-body {
	padding: 20px 24px 24px;
	color: #666;
	line-height: 1.7;
}

.policy-accordion .list-group-item {
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	padding: 12px 0;
	background: transparent;
}

.policy-accordion .list-group-item:last-child {
	border-bottom: 0;
}

/* Small icon grid cards (e.g. "How we use your info") */
.policy-mini-card {
	border: 0;
	background-color: #f8f9f7;
	border-radius: 12px;
	text-align: center;
	padding: 26px 12px;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.policy-mini-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.policy-mini-card i {
	font-size: 30px;
	color: var(--primary-color);
	margin-bottom: 10px;
	display: block;
}

.policy-mini-card h6 {
	margin: 0;
	font-weight: 600;
	font-size: 13.5px;
}

/* Two-column info cards (e.g. Terms & Conditions sections) */
.policy-info-card {
	border: 0;
	background-color: #f8f9f7;
	border-radius: 12px;
	height: 100%;
}

.policy-info-card .card-body {
	padding: 24px;
}

.policy-info-card h5 {
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 14px;
}

.policy-info-card ul {
	margin: 0;
	padding-left: 20px;
	color: #666;
}

.policy-info-card ul li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.policy-info-card ul li:last-child {
	margin-bottom: 0;
}

/* Table styling */
.policy-table thead {
	background-color: var(--primary-color);
}

.policy-table thead th {
	background-color: var(--primary-color) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
	font-weight: 600;
}

.policy-table td,
.policy-table th {
	vertical-align: middle;
	padding: 14px 16px;
}

/* Support / contact channel cards */
.support-channel-card {
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0,0,0,0.06);
	padding: 30px 24px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-channel-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.support-channel-card .support-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--primary-bg-color);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: 0 auto 18px;
}

.support-channel-card h5 {
	font-weight: 700;
	margin-bottom: 8px;
}

.support-channel-card p {
	color: #777;
	font-size: 14px;
	margin-bottom: 16px;
}

.support-channel-card .btn {
	text-transform: none !important;
	margin-top: auto;
}

.support-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 14px;
}

.support-status-badge.online {
	background-color: #e6f7ec;
	color: #1a7a3f;
}

.support-status-badge.offline {
	background-color: #fdecec;
	color: #c0392b;
}

.support-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
	display: inline-block;
	animation: support-pulse 1.6s infinite;
}

@keyframes support-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Vertical timeline (Shipping Policy steps) */
.policy-timeline {
	position: relative;
	padding-left: 40px;
}

.policy-timeline::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background-color: #e5e5e5;
}

.policy-timeline-step {
	position: relative;
	padding-bottom: 30px;
}

.policy-timeline-step:last-child {
	padding-bottom: 0;
}

.policy-timeline-step::before {
	content: "";
	position: absolute;
	left: -36px;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--primary-color);
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px var(--primary-color);
}

.policy-timeline-step h6 {
	font-weight: 700;
	margin-bottom: 6px;
}

.policy-timeline-step p {
	color: #666;
	margin-bottom: 0;
	font-size: 14px;
}

@media (max-width: 576px) {
	.policy-timeline {
		padding-left: 30px;
	}
	.policy-timeline-step::before {
		left: -24px;
		width: 18px;
		height: 18px;
	}
}

/* Quick-links row used on several pages ("related policies") */
.policy-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.policy-quicklinks a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 30px;
	background-color: var(--primary-bg-color);
	color: var(--primary-color) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.policy-quicklinks a:hover {
	background-color: var(--primary-color);
	color: #fff !important;
}