/* ==========================================================
   Infopaisa Credit Card Compare
   File: compare-cards.css
   ========================================================== */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/

:root {

	--ip-primary: #000080;
	--ip-secondary: #ffbc00;

	--ip-success: #16a34a;
	--ip-danger: #dc2626;
	--ip-warning: #f59e0b;

	--ip-white: #ffffff;
	--ip-black: #111827;

	--ip-gray-50: #f9fafb;
	--ip-gray-100: #f3f4f6;
	--ip-gray-200: #e5e7eb;
	--ip-gray-300: #d1d5db;
	--ip-gray-500: #6b7280;
	--ip-gray-700: #374151;
	--ip-gray-900: #111827;

	--ip-radius-sm: 6px;
	--ip-radius: 12px;
	--ip-radius-lg: 20px;

	--ip-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
	--ip-shadow: 0 8px 24px rgba(0,0,0,.08);
	--ip-shadow-lg: 0 15px 40px rgba(0,0,0,.12);

	--ip-transition: .25s ease;

	--ip-container: 1240px;

}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

.ip-compare-page *,
.ip-compare-page *::before,
.ip-compare-page *::after{

	box-sizing:border-box;

}

.ip-compare-page{

	background:#f7f8fb;

	color:var(--ip-gray-900);

	font-size:16px;

	line-height:1.6;

	margin:0;

	padding:0 0 60px;

	font-family:inherit;

}

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/

.ip-container{

	max-width:var(--ip-container);

	margin:auto;

	padding:0 20px;

}

/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/

.ip-compare-page img{

	max-width:100%;

	height:auto;

	display:block;

}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

.ip-compare-page a{

	color:var(--ip-primary);

	text-decoration:none;

	transition:var(--ip-transition);

}

.ip-compare-page a:hover{

	color:#1a1aa8;

}

/*--------------------------------------------------------------
# Section Spacing
--------------------------------------------------------------*/

.ip-compare-section,
.ip-related-cards,
.ip-winner-summary,
.ip-compare-cta,
.ip-compare-faq{

	padding:50px 0;

}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

.ip-section-heading{

	text-align:center;

	margin-bottom:35px;

}

.ip-section-heading h2{

	margin:0 0 10px;

	font-size:32px;

	font-weight:700;

	color:var(--ip-primary);

	line-height:1.2;

}

.ip-section-heading p{

	margin:0;

	color:var(--ip-gray-500);

	font-size:16px;

}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.ip-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:8px;

	padding:12px 22px;

	border-radius:10px;

	font-weight:600;

	font-size:15px;

	cursor:pointer;

	border:none;

	transition:var(--ip-transition);

	text-decoration:none;

}

.ip-btn-primary{

	background:var(--ip-primary);

	color:#fff;

}

.ip-btn-primary:hover{

	background:#11119f;

	color:#fff;

	transform:translateY(-2px);

}

.ip-btn-outline{

	background:#fff;

	border:1px solid var(--ip-primary);

	color:var(--ip-primary);

}

.ip-btn-outline:hover{

	background:var(--ip-primary);

	color:#fff;

}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/

.ip-card{

	background:#fff;

	border-radius:var(--ip-radius);

	box-shadow:var(--ip-shadow-sm);

	padding:20px;

	transition:var(--ip-transition);

}

.ip-card:hover{

	transform:translateY(-4px);

	box-shadow:var(--ip-shadow);

}

/*--------------------------------------------------------------
# Empty State
--------------------------------------------------------------*/

.ip-compare-empty{

	max-width:520px;

	margin:80px auto;

	padding:45px;

	text-align:center;

	background:#fff;

	border-radius:20px;

	box-shadow:var(--ip-shadow);

}

.ip-compare-empty-icon{

	font-size:64px;

	margin-bottom:20px;

}

.ip-compare-empty h1{

	margin-bottom:12px;

	color:var(--ip-primary);

	font-size:34px;

}

.ip-compare-empty p{

	color:var(--ip-gray-500);

	margin-bottom:28px;

}

/*--------------------------------------------------------------
# Utility
--------------------------------------------------------------*/

.ip-text-center{

	text-align:center;

}

.ip-hidden{

	display:none!important;

}

.ip-flex{

	display:flex;

}

.ip-grid{

	display:grid;

}

.ip-gap{

	gap:20px;

}

/*==============================================================
# Breadcrumb
==============================================================*/

.ip-breadcrumb{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:8px;

	padding:18px 0;

	font-size:14px;

	color:var(--ip-gray-500);

}

.ip-breadcrumb a{

	font-weight:500;

	color:var(--ip-primary);

}

.ip-breadcrumb span{

	color:var(--ip-gray-500);

}

/*==============================================================
# Hero
==============================================================*/

.ip-compare-hero{

	background:linear-gradient(
		180deg,
		#eef4ff 0%,
		#ffffff 100%
	);

	padding:40px 0 70px;

	border-bottom:1px solid var(--ip-gray-200);

}

.ip-hero-header{

	text-align:center;

	max-width:760px;

	margin:0 auto 45px;

}

.ip-hero-header h1{

	font-size:42px;

	line-height:1.2;

	font-weight:800;

	color:var(--ip-primary);

	margin:0 0 14px;

}

.ip-hero-header p{

	font-size:18px;

	color:var(--ip-gray-500);

	margin:0;

}

/*==============================================================
# Compare Cards Layout
==============================================================*/

.ip-hero-cards{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:24px;

	flex-wrap:nowrap;

}

/*==============================================================
# Compare Card
==============================================================*/

.ip-hero-card{

	position:relative;

	background:#fff;

	width:320px;

	padding:26px;

	border-radius:20px;

	box-shadow:var(--ip-shadow);

	transition:.25s;

}

.ip-hero-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--ip-shadow-lg);

}

/*==============================================================
# Badge
==============================================================*/

.ip-card-badge{

	position:absolute;

	top:18px;

	left:18px;

	background:var(--ip-secondary);

	color:#000;

	font-size:12px;

	font-weight:700;

	padding:6px 10px;

	border-radius:30px;

	text-transform:uppercase;

	letter-spacing:.4px;

}

/*==============================================================
# Image
==============================================================*/

.ip-card-image{

	height:180px;

	display:flex;

	align-items:center;

	justify-content:center;

	margin-bottom:24px;

}

.ip-card-image img{

	max-height:170px;

	object-fit:contain;

}

/*==============================================================
# Bank
==============================================================*/

.ip-card-bank{

	font-size:13px;

	font-weight:600;

	color:var(--ip-gray-500);

	text-transform:uppercase;

	letter-spacing:.5px;

	margin-bottom:6px;

}

/*==============================================================
# Card Name
==============================================================*/

.ip-card-title{

	font-size:24px;

	font-weight:700;

	line-height:1.3;

	margin:0 0 16px;

	color:var(--ip-black);

	min-height:62px;

}

/*==============================================================
# Rating
==============================================================*/

.ip-card-rating{

	display:inline-flex;

	align-items:center;

	gap:6px;

	background:#fff7e1;

	color:#b45309;

	padding:8px 14px;

	border-radius:30px;

	font-size:15px;

	font-weight:700;

	margin-bottom:22px;

}

.ip-card-rating span{

	font-weight:500;

	color:#666;

}

/*==============================================================
# Fee Grid
==============================================================*/

.ip-fee-grid{

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:14px;

	margin-bottom:24px;

}

.ip-fee-grid>div{

	background:#f8f9fc;

	border-radius:12px;

	padding:14px;

	text-align:center;

	border:1px solid var(--ip-gray-200);

}

.ip-fee-grid label{

	display:block;

	font-size:12px;

	color:var(--ip-gray-500);

	margin-bottom:8px;

	text-transform:uppercase;

	font-weight:600;

}

.ip-fee-grid strong{

	display:block;

	font-size:22px;

	font-weight:700;

	color:var(--ip-primary);

}

/*==============================================================
# Buttons
==============================================================*/

.ip-card-buttons{

	display:flex;

	align-items:center;

	gap:12px;

	margin-top:20px;

}

.ip-card-buttons .ip-btn{

	flex:1;

}

/*==============================================================
# Remove Card
==============================================================*/

.ip-remove-card{

	width:44px;

	height:44px;

	border:none;

	border-radius:50%;

	background:#fff3f3;

	color:#dc2626;

	font-size:20px;

	cursor:pointer;

	transition:.25s;

}

.ip-remove-card:hover{

	background:#dc2626;

	color:#fff;

	transform:rotate(90deg);

}

/*==============================================================
# VS Circle
==============================================================*/

.ip-vs-circle{

	width:70px;

	height:70px;

	border-radius:50%;

	background:var(--ip-primary);

	color:#fff;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:20px;

	font-weight:700;

	box-shadow:0 8px 24px rgba(0,0,0,.15);

	flex-shrink:0;

}

/*==============================================================
# Card Hover
==============================================================*/

.ip-hero-card:hover .ip-card-title{

	color:var(--ip-primary);

}

.ip-hero-card:hover img{

	transform:scale(1.04);

	transition:.25s;

}/*==============================================================
# Breadcrumb
==============================================================*/

.ip-breadcrumb{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:8px;

	padding:18px 0;

	font-size:14px;

	color:var(--ip-gray-500);

}

.ip-breadcrumb a{

	font-weight:500;

	color:var(--ip-primary);

}

.ip-breadcrumb span{

	color:var(--ip-gray-500);

}

/*==============================================================
# Hero
==============================================================*/

.ip-compare-hero{

	background:linear-gradient(
		180deg,
		#eef4ff 0%,
		#ffffff 100%
	);

	padding:40px 0 70px;

	border-bottom:1px solid var(--ip-gray-200);

}

.ip-hero-header{

	text-align:center;

	max-width:760px;

	margin:0 auto 45px;

}

.ip-hero-header h1{

	font-size:42px;

	line-height:1.2;

	font-weight:800;

	color:var(--ip-primary);

	margin:0 0 14px;

}

.ip-hero-header p{

	font-size:18px;

	color:var(--ip-gray-500);

	margin:0;

}

/*==============================================================
# Compare Cards Layout
==============================================================*/

.ip-hero-cards{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:24px;

	flex-wrap:nowrap;

}

/*==============================================================
# Compare Card
==============================================================*/

.ip-hero-card{

	position:relative;

	background:#fff;

	width:320px;

	padding:26px;

	border-radius:20px;

	box-shadow:var(--ip-shadow);

	transition:.25s;

}

.ip-hero-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--ip-shadow-lg);

}

/*==============================================================
# Badge
==============================================================*/

.ip-card-badge{

	position:absolute;

	top:18px;

	left:18px;

	background:var(--ip-secondary);

	color:#000;

	font-size:12px;

	font-weight:700;

	padding:6px 10px;

	border-radius:30px;

	text-transform:uppercase;

	letter-spacing:.4px;

}

/*==============================================================
# Image
==============================================================*/

.ip-card-image{

	height:180px;

	display:flex;

	align-items:center;

	justify-content:center;

	margin-bottom:24px;

}

.ip-card-image img{

	max-height:170px;

	object-fit:contain;

}

/*==============================================================
# Bank
==============================================================*/

.ip-card-bank{

	font-size:13px;

	font-weight:600;

	color:var(--ip-gray-500);

	text-transform:uppercase;

	letter-spacing:.5px;

	margin-bottom:6px;

}

/*==============================================================
# Card Name
==============================================================*/

.ip-card-title{

	font-size:24px;

	font-weight:700;

	line-height:1.3;

	margin:0 0 16px;

	color:var(--ip-black);

	min-height:62px;

}

/*==============================================================
# Rating
==============================================================*/

.ip-card-rating{

	display:inline-flex;

	align-items:center;

	gap:6px;

	background:#fff7e1;

	color:#b45309;

	padding:8px 14px;

	border-radius:30px;

	font-size:15px;

	font-weight:700;

	margin-bottom:22px;

}

.ip-card-rating span{

	font-weight:500;

	color:#666;

}

/*==============================================================
# Fee Grid
==============================================================*/

.ip-fee-grid{

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:14px;

	margin-bottom:24px;

}

.ip-fee-grid>div{

	background:#f8f9fc;

	border-radius:12px;

	padding:14px;

	text-align:center;

	border:1px solid var(--ip-gray-200);

}

.ip-fee-grid label{

	display:block;

	font-size:12px;

	color:var(--ip-gray-500);

	margin-bottom:8px;

	text-transform:uppercase;

	font-weight:600;

}

.ip-fee-grid strong{

	display:block;

	font-size:22px;

	font-weight:700;

	color:var(--ip-primary);

}

/*==============================================================
# Buttons
==============================================================*/

.ip-card-buttons{

	display:flex;

	align-items:center;

	gap:12px;

	margin-top:20px;

}

.ip-card-buttons .ip-btn{

	flex:1;

}

/*==============================================================
# Remove Card
==============================================================*/

.ip-remove-card{

	width:44px;

	height:44px;

	border:none;

	border-radius:50%;

	background:#fff3f3;

	color:#dc2626;

	font-size:20px;

	cursor:pointer;

	transition:.25s;

}

.ip-remove-card:hover{

	background:#dc2626;

	color:#fff;

	transform:rotate(90deg);

}

/*==============================================================
# VS Circle
==============================================================*/

.ip-vs-circle{

	width:70px;

	height:70px;

	border-radius:50%;

	background:var(--ip-primary);

	color:#fff;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:20px;

	font-weight:700;

	box-shadow:0 8px 24px rgba(0,0,0,.15);

	flex-shrink:0;

}

/*==============================================================
# Card Hover
==============================================================*/

.ip-hero-card:hover .ip-card-title{

	color:var(--ip-primary);

}

.ip-hero-card:hover img{

	transform:scale(1.04);

	transition:.25s;

}
/*==============================================================
# Winner Summary
==============================================================*/

.ip-winner-summary{

	background:#fff;

	border-top:1px solid var(--ip-gray-200);

	border-bottom:1px solid var(--ip-gray-200);

}

.ip-winner-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:24px;

	margin-top:35px;

}

.ip-winner-card{

	position:relative;

	background:#fff;

	border:1px solid var(--ip-gray-200);

	border-radius:18px;

	padding:24px;

	text-align:center;

	box-shadow:var(--ip-shadow-sm);

	transition:var(--ip-transition);

	overflow:hidden;

}

.ip-winner-card::before{

	content:"";

	position:absolute;

	left:0;

	top:0;

	width:100%;

	height:5px;

	background:var(--ip-secondary);

}

.ip-winner-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--ip-shadow-lg);

}

.ip-winner-icon{

	width:72px;

	height:72px;

	margin:0 auto 18px;

	border-radius:50%;

	background:#eef4ff;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:34px;

}

.ip-winner-label{

	font-size:14px;

	color:var(--ip-gray-500);

	text-transform:uppercase;

	letter-spacing:.4px;

	margin-bottom:10px;

	font-weight:600;

}

.ip-winner-card strong{

	display:block;

	font-size:19px;

	font-weight:700;

	color:var(--ip-primary);

	line-height:1.4;

}

/*==============================================================
# Sticky Compare Navigation
==============================================================*/

.ip-compare-nav{

	position:sticky;

	top:0;

	z-index:999;

	background:#fff;

	border-bottom:1px solid var(--ip-gray-200);

	box-shadow:0 2px 12px rgba(0,0,0,.05);

}

.ip-nav-scroll{

	display:flex;

	align-items:center;

	gap:12px;

	overflow-x:auto;

	white-space:nowrap;

	padding:14px 0;

	scrollbar-width:none;

}

.ip-nav-scroll::-webkit-scrollbar{

	display:none;

}

.ip-nav-scroll a{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:12px 22px;

	border-radius:30px;

	font-size:15px;

	font-weight:600;

	color:var(--ip-gray-700);

	background:#f3f4f6;

	transition:var(--ip-transition);

	flex-shrink:0;

}

.ip-nav-scroll a:hover{

	background:#e8edff;

	color:var(--ip-primary);

}

.ip-nav-scroll a.active{

	background:var(--ip-primary);

	color:#fff;

	box-shadow:0 8px 18px rgba(0,0,128,.25);

}

/*==============================================================
# Compare Section
==============================================================*/

.ip-compare-section{

	scroll-margin-top:90px;

}

.ip-compare-section+.ip-compare-section{

	border-top:1px solid var(--ip-gray-200);

}

/*==============================================================
# Section Animation
==============================================================*/

.ip-compare-section{

	animation:ipFade .4s ease;

}

@keyframes ipFade{

	from{

		opacity:0;

		transform:translateY(20px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*==============================================================
# Toolbar
==============================================================*/

.ip-compare-toolbar{

	display:flex;

	align-items:center;

	justify-content:space-between;

	flex-wrap:wrap;

	gap:15px;

	margin:0 0 24px;

}

.ip-toggle{

	display:flex;

	align-items:center;

	gap:10px;

	font-weight:600;

	cursor:pointer;

	color:var(--ip-gray-700);

}

.ip-toggle input{

	display:none;

}

.ip-toggle-slider{

	width:48px;

	height:26px;

	background:#d1d5db;

	border-radius:30px;

	position:relative;

	transition:.25s;

}

.ip-toggle-slider::after{

	content:"";

	position:absolute;

	left:3px;

	top:3px;

	width:20px;

	height:20px;

	background:#fff;

	border-radius:50%;

	transition:.25s;

	box-shadow:0 2px 8px rgba(0,0,0,.18);

}

.ip-toggle input:checked+.ip-toggle-slider{

	background:var(--ip-primary);

}

.ip-toggle input:checked+.ip-toggle-slider::after{

	transform:translateX(22px);

}

.ip-copy-link,
.ip-share-compare{

	border:none;

	background:#fff;

	padding:12px 18px;

	border-radius:10px;

	font-weight:600;

	cursor:pointer;

	border:1px solid var(--ip-gray-300);

	transition:var(--ip-transition);

}

.ip-copy-link:hover,
.ip-share-compare:hover{

	background:var(--ip-primary);

	color:#fff;

	border-color:var(--ip-primary);

}
/*==============================================================
# Comparison Table
==============================================================*/

.ip-table-wrapper{

	width:100%;

	overflow-x:auto;

	background:#fff;

	border-radius:18px;

	box-shadow:var(--ip-shadow-sm);

	border:1px solid var(--ip-gray-200);

}

.ip-table-wrapper::-webkit-scrollbar{

	height:8px;

}

.ip-table-wrapper::-webkit-scrollbar-thumb{

	background:var(--ip-gray-300);

	border-radius:20px;

}

.ip-compare-table{

	width:100%;

	min-width:950px;

	border-collapse:separate;

	border-spacing:0;

	background:#fff;

}

/*==============================================================
# Header
==============================================================*/

.ip-compare-table thead th{

	position:sticky;

	top:62px;

	z-index:10;

	background:#f8f9fc;

	padding:22px;

	text-align:center;

	border-bottom:2px solid var(--ip-gray-200);

	font-size:16px;

	font-weight:700;

	color:var(--ip-primary);

}

/*==============================================================
# First Column
==============================================================*/

.ip-compare-table th:first-child,
.ip-compare-table td:first-child{

	position:sticky;

	left:0;

	z-index:9;

	background:#fff;

	min-width:220px;

	font-weight:700;

	color:var(--ip-gray-900);

	border-right:1px solid var(--ip-gray-200);

}

/* Sticky Header + First Column */

.ip-compare-table thead th:first-child{

	z-index:12;

	background:#f8f9fc;

}

/*==============================================================
# Cells
==============================================================*/

.ip-compare-table td,
.ip-compare-table th{

	padding:18px;

	border-bottom:1px solid var(--ip-gray-200);

	vertical-align:top;

	font-size:15px;

}

.ip-compare-table td{

	color:var(--ip-gray-700);

}

/*==============================================================
# Zebra Rows
==============================================================*/

.ip-compare-table tbody tr:nth-child(even){

	background:#fafbfc;

}

/*==============================================================
# Hover Row
==============================================================*/

.ip-compare-table tbody tr:hover{

	background:#eef4ff;

}

/*==============================================================
# Card Heading
==============================================================*/

.ip-card-heading{

	text-align:center;

	min-width:250px;

}

.ip-card-heading img{

	height:150px;

	width:auto;

	margin:0 auto 16px;

	object-fit:contain;

}

.ip-card-heading h3{

	font-size:20px;

	font-weight:700;

	color:var(--ip-black);

	margin:0;

	line-height:1.35;

}

/*==============================================================
# Best Cell
==============================================================*/

.ip-best{

	background:#ecfdf5 !important;

	position:relative;

	font-weight:700;

	color:var(--ip-success);

}

.ip-best-badge{

	display:inline-block;

	margin-top:8px;

	padding:4px 10px;

	background:var(--ip-success);

	color:#fff;

	font-size:11px;

	font-weight:700;

	border-radius:30px;

	text-transform:uppercase;

	letter-spacing:.5px;

}

/*==============================================================
# Feature Column
==============================================================*/

.ip-compare-table td:first-child{

	background:#f9fafb;

	font-size:15px;

	font-weight:700;

}

/*==============================================================
# Buttons Inside Table
==============================================================*/

.ip-compare-table .ip-btn{

	width:100%;

	padding:12px;

	font-size:14px;

}

/*==============================================================
# Lists
==============================================================*/

.ip-compare-table ul{

	margin:0;

	padding-left:18px;

}

.ip-compare-table li{

	margin-bottom:6px;

}

/*==============================================================
# Paragraphs
==============================================================*/

.ip-compare-table p{

	margin:0 0 10px;

	line-height:1.6;

}

/*==============================================================
# Images
==============================================================*/

.ip-compare-table img{

	max-width:100%;

	display:block;

}

/*==============================================================
# Empty Values
==============================================================*/

.ip-compare-table td:empty::before{

	content:"—";

	color:var(--ip-gray-500);

}

/*==============================================================
# Difference Highlight
==============================================================*/

.ip-row-different{

	background:#fff8e7 !important;

}

.ip-row-hidden{

	display:none;

}

/*==============================================================
# Table Animation
==============================================================*/

.ip-table-wrapper{

	animation:ipTableFade .35s ease;

}

@keyframes ipTableFade{

	from{

		opacity:0;

		transform:translateY(18px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*==============================================================
# Mobile Scroll Hint
==============================================================*/

.ip-scroll-hint{

	text-align:center;

	font-size:13px;

	color:var(--ip-gray-500);

	padding:12px 0;

}

.ip-scroll-hint::before{

	content:"← Swipe to compare →";

}
/*==============================================================
# Accordion
==============================================================*/

.ip-accordion{

	background:#fff;

	border:1px solid var(--ip-gray-200);

	border-radius:18px;

	margin-bottom:24px;

	box-shadow:var(--ip-shadow-sm);

	overflow:hidden;

}

.ip-accordion summary{

	list-style:none;

	cursor:pointer;

	padding:22px 28px;

	font-size:20px;

	font-weight:700;

	color:var(--ip-primary);

	display:flex;

	align-items:center;

	justify-content:space-between;

	transition:var(--ip-transition);

	user-select:none;

}

.ip-accordion summary::-webkit-details-marker{

	display:none;

}

.ip-accordion summary::after{

	content:"+";

	font-size:28px;

	font-weight:700;

	color:var(--ip-primary);

	transition:.3s;

}

.ip-accordion[open] summary::after{

	content:"−";

	transform:rotate(180deg);

}

.ip-accordion summary:hover{

	background:#eef4ff;

}

.ip-accordion-content{

	padding:24px;

	background:#fff;

	border-top:1px solid var(--ip-gray-200);

	animation:ipAccordion .3s ease;

}

@keyframes ipAccordion{

	from{

		opacity:0;

		transform:translateY(-8px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*==============================================================
# Documents
==============================================================*/

.ip-document-list{

	margin:0;

	padding:0;

	list-style:none;

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:16px;

}

.ip-document-list li{

	background:#f8f9fc;

	padding:16px;

	border-radius:12px;

	border:1px solid var(--ip-gray-200);

	font-weight:600;

	display:flex;

	align-items:center;

	gap:12px;

}

.ip-document-list li::before{

	content:"📄";

	font-size:20px;

}

/*==============================================================
# Note Box
==============================================================*/

.ip-note{

	background:#fff9e8;

	border-left:4px solid var(--ip-secondary);

	padding:20px;

	border-radius:12px;

	color:var(--ip-gray-700);

	line-height:1.7;

}

/*==============================================================
# FAQ
==============================================================*/

.ip-compare-faq{

	background:#fff;

}

.ip-faq-item{

	background:#fff;

	border:1px solid var(--ip-gray-200);

	border-radius:16px;

	margin-bottom:18px;

	box-shadow:var(--ip-shadow-sm);

	overflow:hidden;

}

.ip-faq-item summary{

	cursor:pointer;

	padding:22px 26px;

	font-size:18px;

	font-weight:700;

	color:var(--ip-primary);

	list-style:none;

	display:flex;

	justify-content:space-between;

	align-items:center;

}

.ip-faq-item summary::-webkit-details-marker{

	display:none;

}

.ip-faq-item summary::after{

	content:"+";

	font-size:24px;

}

.ip-faq-item[open] summary::after{

	content:"−";

}

.ip-faq-item p{

	margin:0;

	padding:0 26px 24px;

	color:var(--ip-gray-700);

	line-height:1.8;

}

/*==============================================================
# Related Cards
==============================================================*/

.ip-related-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:24px;

}

.ip-related-card{

	background:#fff;

	border-radius:18px;

	padding:24px;

	text-align:center;

	box-shadow:var(--ip-shadow-sm);

	border:1px solid var(--ip-gray-200);

	transition:var(--ip-transition);

}

.ip-related-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--ip-shadow-lg);

}

.ip-related-card img{

	height:140px;

	object-fit:contain;

	margin:0 auto 18px;

}

.ip-related-card h3{

	font-size:19px;

	margin:0 0 10px;

	color:var(--ip-black);

	line-height:1.4;

}

.ip-related-rating{

	display:inline-flex;

	align-items:center;

	gap:6px;

	background:#fff7e1;

	padding:8px 14px;

	border-radius:30px;

	margin-bottom:18px;

	font-weight:700;

	color:#b45309;

}

/*==============================================================
# CTA
==============================================================*/

.ip-compare-cta{

	padding:70px 0;

}

.ip-cta-box{

	background:linear-gradient(
		135deg,
		var(--ip-primary),
		#2020b5
	);

	color:#fff;

	border-radius:24px;

	padding:60px;

	text-align:center;

	box-shadow:var(--ip-shadow-lg);

}

.ip-cta-box h2{

	color:#fff;

	font-size:38px;

	margin:0 0 16px;

}

.ip-cta-box p{

	font-size:18px;

	max-width:700px;

	margin:0 auto 34px;

	color:rgba(255,255,255,.92);

	line-height:1.7;

}

.ip-cta-buttons{

	display:flex;

	justify-content:center;

	gap:18px;

	flex-wrap:wrap;

}

.ip-cta-box .ip-btn-primary{

	background:var(--ip-secondary);

	color:#000;

	font-weight:700;

}

.ip-cta-box .ip-btn-primary:hover{

	background:#ffd34d;

}

.ip-cta-box .ip-btn-outline{

	border:2px solid rgba(255,255,255,.6);

	background:transparent;

	color:#fff;

}

.ip-cta-box .ip-btn-outline:hover{

	background:#fff;

	color:var(--ip-primary);

}
/*==============================================================
# Responsive - Large Desktop
==============================================================*/

@media (max-width:1200px){

	.ip-container{

		padding:0 18px;

	}

	.ip-hero-card{

		width:300px;

	}

}

/*==============================================================
# Responsive - Tablet
==============================================================*/

@media (max-width:992px){

	.ip-hero-header h1{

		font-size:34px;

	}

	.ip-hero-header p{

		font-size:16px;

	}

	.ip-winner-grid{

		grid-template-columns:repeat(2,1fr);

	}

	.ip-related-grid{

		grid-template-columns:repeat(2,1fr);

	}

	.ip-document-list{

		grid-template-columns:1fr;

	}

	.ip-cta-box{

		padding:40px;

	}

}

/*==============================================================
# Responsive - Mobile
==============================================================*/

@media (max-width:768px){

	/* Hero */

	.ip-compare-hero{

		padding:30px 0 45px;

	}

	.ip-hero-header{

		margin-bottom:30px;

	}

	.ip-hero-header h1{

		font-size:28px;

	}

	.ip-hero-header p{

		font-size:15px;

	}

	/* Compare Cards */

	.ip-hero-cards{

		flex-direction:column;

		gap:18px;

	}

	.ip-vs-circle{

		width:52px;

		height:52px;

		font-size:15px;

	}

	.ip-hero-card{

		width:100%;

		max-width:420px;

		padding:22px;

	}

	.ip-card-title{

		font-size:20px;

		min-height:auto;

	}

	.ip-card-image{

		height:150px;

	}

	.ip-card-image img{

		max-height:140px;

	}

	/* Winner */

	.ip-winner-grid{

		grid-template-columns:1fr;

		gap:18px;

	}

	/* Toolbar */

	.ip-compare-toolbar{

		flex-direction:column;

		align-items:stretch;

	}

	.ip-copy-link,

	.ip-share-compare{

		width:100%;

	}

	/* Navigation */

	.ip-nav-scroll{

		padding-bottom:8px;

	}

	.ip-nav-scroll a{

		font-size:14px;

		padding:10px 18px;

	}

	/* Tables */

	.ip-table-wrapper{

		border-radius:12px;

	}

	.ip-compare-table{

		min-width:760px;

	}

	.ip-compare-table th,

	.ip-compare-table td{

		padding:14px;

		font-size:14px;

	}

	.ip-card-heading{

		min-width:220px;

	}

	.ip-card-heading img{

		height:120px;

	}

	.ip-card-heading h3{

		font-size:18px;

	}

	/* Accordion */

	.ip-accordion summary{

		padding:18px;

		font-size:18px;

	}

	.ip-accordion-content{

		padding:18px;

	}

	/* CTA */

	.ip-cta-box{

		padding:32px 22px;

		border-radius:18px;

	}

	.ip-cta-box h2{

		font-size:28px;

	}

	.ip-cta-box p{

		font-size:15px;

	}

	.ip-cta-buttons{

		flex-direction:column;

	}

	.ip-cta-buttons .ip-btn{

		width:100%;

	}

	/* Related */

	.ip-related-grid{

		grid-template-columns:1fr;

	}

}

/*==============================================================
# Small Mobile
==============================================================*/

@media (max-width:480px){

	.ip-container{

		padding:0 14px;

	}

	.ip-breadcrumb{

		font-size:12px;

	}

	.ip-section-heading h2{

		font-size:24px;

	}

	.ip-section-heading p{

		font-size:14px;

	}

	.ip-card-bank{

		font-size:12px;

	}

	.ip-card-title{

		font-size:18px;

	}

	.ip-card-rating{

		font-size:13px;

		padding:6px 12px;

	}

	.ip-fee-grid{

		grid-template-columns:1fr;

	}

	.ip-card-buttons{

		flex-direction:column;

	}

	.ip-remove-card{

		width:100%;

		border-radius:12px;

		height:46px;

		font-size:16px;

	}

	.ip-btn{

		width:100%;

	}

	.ip-compare-table{

		min-width:680px;

	}

	.ip-compare-table td:first-child,

	.ip-compare-table th:first-child{

		min-width:170px;

	}

	.ip-winner-icon{

		width:60px;

		height:60px;

		font-size:28px;

	}

	.ip-related-card{

		padding:18px;

	}

	.ip-related-card img{

		height:110px;

	}

	.ip-related-card h3{

		font-size:17px;

	}

}

/*==============================================================
# Landscape Phones
==============================================================*/

@media (max-height:500px) and (orientation:landscape){

	.ip-compare-hero{

		padding:25px 0;

	}

	.ip-hero-header{

		margin-bottom:20px;

	}

}

/*==============================================================
# Print
==============================================================*/

@media print{

	.ip-compare-nav,

	.ip-copy-link,

	.ip-share-compare,

	.ip-remove-card,

	.ip-cta-box{

		display:none !important;

	}

	.ip-compare-page{

		background:#fff;

	}

	.ip-table-wrapper{

		overflow:visible;

		box-shadow:none;

		border:none;

	}

}
/*==============================================================
# Smooth Animations
==============================================================*/

.ip-btn,
.ip-hero-card,
.ip-related-card,
.ip-winner-card,
.ip-accordion,
.ip-faq-item,
.ip-compare-table tbody tr{

	transition:
		background-color .25s ease,
		color .25s ease,
		border-color .25s ease,
		box-shadow .25s ease,
		transform .25s ease,
		opacity .25s ease;

}

/*==============================================================
# Focus Accessibility
==============================================================*/

.ip-btn:focus-visible,
.ip-remove-card:focus-visible,
.ip-nav-scroll a:focus-visible,
.ip-accordion summary:focus-visible,
.ip-faq-item summary:focus-visible{

	outline:3px solid var(--ip-secondary);

	outline-offset:3px;

	border-radius:8px;

}

/*==============================================================
# Better Selection
==============================================================*/

.ip-compare-page ::selection{

	background:var(--ip-primary);

	color:#fff;

}

/*==============================================================
# Image Loading
==============================================================*/

.ip-card-image img,
.ip-card-heading img,
.ip-related-card img{

	transition:opacity .3s ease,transform .3s ease;

}

.ip-card-image img:hover,
.ip-related-card img:hover{

	transform:scale(1.05);

}

/*==============================================================
# Loading Skeleton
==============================================================*/

.ip-skeleton{

	position:relative;

	overflow:hidden;

	background:#e5e7eb;

	border-radius:8px;

}

.ip-skeleton::after{

	content:"";

	position:absolute;

	inset:0;

	background:linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.7),
		transparent
	);

	transform:translateX(-100%);

	animation:ipSkeleton 1.2s infinite;

}

@keyframes ipSkeleton{

	to{

		transform:translateX(100%);

	}

}

/*==============================================================
# Scrollbar
==============================================================*/

.ip-nav-scroll,
.ip-table-wrapper{

	scrollbar-color:var(--ip-primary) transparent;

}

.ip-nav-scroll::-webkit-scrollbar,
.ip-table-wrapper::-webkit-scrollbar{

	height:8px;

}

.ip-nav-scroll::-webkit-scrollbar-thumb,
.ip-table-wrapper::-webkit-scrollbar-thumb{

	background:var(--ip-primary);

	border-radius:20px;

}

/*==============================================================
# Reduced Motion
==============================================================*/

@media (prefers-reduced-motion:reduce){

	*,
	*::before,
	*::after{

		animation:none !important;

		transition:none !important;

		scroll-behavior:auto !important;

	}

}

/*==============================================================
# Optional Dark Mode
==============================================================*/

@media (prefers-color-scheme:dark){

	.ip-compare-page{

		background:#111827;

		color:#f3f4f6;

	}

	.ip-hero-card,
	.ip-related-card,
	.ip-winner-card,
	.ip-accordion,
	.ip-faq-item,
	.ip-table-wrapper{

		background:#1f2937;

		border-color:#374151;

	}

	.ip-compare-table td:first-child,
	.ip-compare-table th:first-child{

		background:#1f2937;

	}

	.ip-compare-table tbody tr:nth-child(even){

		background:#172033;

	}

	.ip-section-heading h2,
	.ip-card-title,
	.ip-related-card h3{

		color:#ffffff;

	}

	.ip-section-heading p,
	.ip-note,
	.ip-faq-item p{

		color:#d1d5db;

	}

}

/*==============================================================
# Print Improvements
==============================================================*/

@media print{

	body{

		background:#fff !important;

	}

	.ip-hero-card,
	.ip-related-card,
	.ip-winner-card{

		box-shadow:none;

		border:1px solid #ccc;

		break-inside:avoid;

	}

	.ip-compare-table{

		font-size:12px;

	}

}

/*==============================================================
# Utility Classes
==============================================================*/

.ip-text-success{

	color:var(--ip-success);

}

.ip-text-danger{

	color:var(--ip-danger);

}

.ip-text-warning{

	color:var(--ip-warning);

}

.ip-bg-primary{

	background:var(--ip-primary);

	color:#fff;

}

.ip-rounded{

	border-radius:var(--ip-radius);

}

.ip-shadow{

	box-shadow:var(--ip-shadow);

}

.ip-shadow-lg{

	box-shadow:var(--ip-shadow-lg);

}

/*==============================================================
# End of File
==============================================================*/