/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 13 2026 | 17:49:50 */
/* =========================================
   EASEMONEY CORE CSS — PART 1 (FOUNDATION)
   Safe for ALL articles
   ========================================= */

:root{
--em-text:#0f172a;
--em-sub:#334155;
--em-border:#e2e8f0;
--em-bg:#ffffff;
--em-soft:#f8fafc;
--em-green:#22c55e;
--em-blue:#2563eb;
--em-yellow:#eab308;
}

/* ===== Container ===== */

.em-container{
max-width:1000px;
margin:40px auto;
padding:0 14px;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--em-text);
}

/* ===== Headings ===== */

.em-container h2{
font-size:26px;
font-weight:800;
margin-bottom:10px;
line-height:1.32;
letter-spacing:-0.2px;
}

.em-container h3{
font-size:18.5px;
font-weight:800;
margin-bottom:8px;
line-height:1.4;
}

/* ===== Paragraphs ===== */

.em-container p{
font-size:15.2px;
line-height:1.78;
color:var(--em-sub);
margin-bottom:14px;
}

/* Improve readability on long articles */
.em-container p + p{
margin-top:2px;
}

/* ===== Universal Boxes ===== */

.em-box{
background:var(--em-bg);
border:1px solid var(--em-border);
border-radius:16px;
padding:16px;
margin-top:16px;
box-shadow:0 12px 28px rgba(2,6,23,.06);
font-size:14.3px;
line-height:1.65;
}

.em-soft{
background:var(--em-soft);
}

.em-bluebox{
background:#eff6ff;
border-left:5px solid var(--em-blue);
}

/* ===== Tips ===== */

.em-tip-green{
background:#f0fdf4;
border-left:5px solid var(--em-green);
padding:14px;
border-radius:12px;
margin-top:14px;
font-size:14px;
}

.em-tip-yellow{
background:#fefce8;
border-left:5px solid var(--em-yellow);
padding:14px;
border-radius:12px;
margin-top:14px;
font-size:14px;
}

/* ===== List System (cleaned, no override conflicts) ===== */

.em-list{
list-style:none;
padding:0;
margin:0;
}

.em-list li{
position:relative;
padding-left:28px;
margin-bottom:10px;
font-size:14.6px;
line-height:1.62;
color:var(--em-sub);
}

.em-list li::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:10px;
height:10px;
background:var(--em-green);
border-radius:50%;
box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

/* ===== Ordered Step List ===== */

.em-ol{
counter-reset:emstep;
list-style:none;
padding:0;
margin:12px 0 6px 0;
}

.em-ol li{
counter-increment:emstep;
position:relative;
padding:14px 14px 14px 56px;
margin-bottom:12px;
font-size:14.6px;
line-height:1.65;
color:var(--em-sub);
background:#ffffff;
border:1px solid var(--em-border);
border-radius:14px;
box-shadow:0 10px 26px rgba(2,6,23,.05);
}

.em-ol li::before{
content:counter(emstep);
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:13px;
color:#fff;
background:linear-gradient(135deg,#2563eb,#22c55e);
box-shadow:0 0 0 6px rgba(37,99,235,.12);
}

.em-ol li::after{
content:"";
position:absolute;
left:29px;
top:100%;
width:2px;
height:14px;
background:linear-gradient(#c7d2fe,transparent);
}

.em-ol li:last-child::after{
display:none;
}

/* ===== Mobile Optimization ===== */

@media(max-width:600px){

.em-container h2{font-size:22px;}
.em-container h3{font-size:17px;}

.em-container p{
font-size:14.8px;
line-height:1.75;
}

.em-ol li{
padding:13px 12px 13px 52px;
font-size:14.2px;
}

.em-ol li::before{
width:28px;
height:28px;
font-size:12px;
left:12px;
}

.em-ol li::after{
left:26px;
}

}
/* =========================================
   EASEMONEY CSS — PART 2
   ARTICLE STRUCTURE & KNOWLEDGE BLOCKS
   (EEAT + Discover Optimization Layer)
   ========================================= */


/* ===== Main Long Article Wrapper ===== */

.em-article{
max-width:1050px;
margin:40px auto;
padding:0 14px;
line-height:1.75;
}

.em-article-box{
background:#ffffff;
border:1px solid var(--em-border);
border-radius:18px;
padding:24px;
box-shadow:0 14px 34px rgba(2,6,23,.06);
}

/* headings inside long article */

.em-article h2{
font-size:26px;
font-weight:800;
margin-bottom:12px;
}

.em-article h3{
font-size:20px;
font-weight:800;
margin-top:24px;
margin-bottom:10px;
}

.em-article p{
color:var(--em-sub);
margin:12px 0;
}


/* ===== Highlight Information Blocks ===== */

.em-highlight{
background:#f1f5ff;
border-left:6px solid var(--em-blue);
padding:16px;
border-radius:14px;
font-size:14.7px;
line-height:1.7;
margin:20px 0;
}

.em-note{
background:#f8fafc;
border-left:6px solid var(--em-blue);
padding:16px;
border-radius:14px;
font-size:14.7px;
line-height:1.7;
margin-top:20px;
}

.em-warning{
margin-top:18px;
background:#fff7ed;
border-left:5px solid #f97316;
padding:14px;
border-radius:12px;
font-size:14px;
line-height:1.6;
}

.em-success{
background:#f0fdf4;
border-left:5px solid var(--em-green);
padding:14px;
border-radius:12px;
margin:18px 0;
}


/* ===== Educational Info Panel (renamed from em-info) ===== */

.em-edu-info{
background:#f8fafc;
border-left:5px solid var(--em-blue);
padding:14px;
border-radius:12px;
margin:16px 0;
font-size:14.4px;
line-height:1.7;
}


/* ===== Feature Grid (benefits / key points) ===== */

.em-feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px;
margin-top:14px;
}

.em-feature-item{
background:#f8fafc;
border:1px solid var(--em-border);
border-radius:14px;
padding:14px;
font-size:14px;
line-height:1.6;
display:flex;
gap:10px;
}

.em-feature-dot{
min-width:11px;
height:11px;
border-radius:50%;
background:var(--em-blue);
margin-top:6px;
box-shadow:0 0 0 5px rgba(37,99,235,.12);
}


/* ===== Step / Process Timeline ===== */

.em-steps{
max-width:1000px;
margin:40px auto;
padding:0 14px;
}

.em-step{
position:relative;
background:#ffffff;
border:1px solid var(--em-border);
border-radius:18px;
padding:18px 18px 18px 60px;
margin-bottom:16px;
box-shadow:0 14px 36px rgba(2,6,23,.06);
}

.em-step-number{
position:absolute;
left:16px;
top:18px;
width:32px;
height:32px;
background:var(--em-green);
color:#fff;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:14px;
box-shadow:0 0 0 6px rgba(34,197,94,.15);
}

.em-step h3{
font-size:17px;
margin-bottom:6px;
}

.em-step p{
margin:0;
font-size:14.5px;
line-height:1.6;
color:var(--em-sub);
}


/* ===== Comparison Tables (SEO-safe) ===== */

.em-table-wrap{
overflow-x:auto;
margin-top:18px;
}

.em-table{
width:100%;
border-collapse:collapse;
min-width:720px;
}

.em-table th{
background:#0f172a;
color:#fff;
padding:12px;
font-size:14px;
text-align:left;
}

.em-table td{
padding:12px;
border-bottom:1px solid var(--em-border);
font-size:14px;
vertical-align:top;
color:var(--em-sub);
}

.em-table tr:nth-child(even){
background:#f8fafc;
}


/* ===== Mobile Table Rendering (crawler safe) ===== */

@media(max-width:650px){

.em-table thead{display:none;}

.em-table,
.em-table tbody,
.em-table tr,
.em-table td{
display:block;
width:100%;
}

.em-table tr{
margin-bottom:14px;
border:1px solid var(--em-border);
border-radius:12px;
overflow:hidden;
}

.em-table td{
text-align:right;
padding-left:50%;
position:relative;
}

.em-table td::before{
content:attr(data-label);
position:absolute;
left:14px;
top:12px;
font-weight:700;
color:#0f172a;
text-align:left;
}

}


/* ===== Pros / Cons Guide Panels ===== */

.em-advice{
max-width:760px;
margin:28px auto;
}

.em-advice-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.em-advice-good,
.em-advice-bad{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:16px;
box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.em-advice-good .title{
color:#16a34a;
font-weight:800;
margin-bottom:12px;
}

.em-advice-bad .title{
color:#dc2626;
font-weight:800;
margin-bottom:12px;
}

.em-advice-row{
display:flex;
gap:12px;
margin-bottom:14px;
align-items:flex-start;
font-size:14px;
line-height:1.55;
color:#1f2937;
}

.em-advice-num{
min-width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
color:#fff;
flex-shrink:0;
}

.em-advice-good .em-advice-num{
background:linear-gradient(135deg,#16a34a,#22c55e);
}

.em-advice-bad .em-advice-num{
background:linear-gradient(135deg,#dc2626,#ef4444);
}


/* ===== Mobile Optimization ===== */

@media(max-width:768px){

.em-article h2{font-size:22px;}
.em-article h3{font-size:18px;}

.em-advice-wrap{
grid-template-columns:1fr;
gap:14px;
}

}
/* =========================================
   EASEMONEY CSS — PART 3
   CARDS, BUTTONS & CTA COMPONENTS
   (Conversion Layer)
   ========================================= */


/* ===== Universal Card Container ===== */

.em-cards{
max-width:1000px;
margin:30px auto;
padding:0 14px;
}

.em-card{
background:#ffffff;
border:1px solid var(--em-border);
border-radius:18px;
padding:16px;
margin-bottom:20px;
box-shadow:0 12px 26px rgba(2,6,23,.07);
transition:transform .18s ease, box-shadow .18s ease;
}

/* lift effect only on desktop */
@media(hover:hover){
.em-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 38px rgba(2,6,23,.12);
}
}


/* ===== Card Header ===== */

.em-head{
display:flex;
gap:14px;
align-items:center;
margin-bottom:10px;
}

.em-img{
width:96px;
height:60px;
object-fit:contain;
border-radius:8px;
background:var(--em-soft);
border:1px solid var(--em-border);
padding:4px;
}

.em-title{
font-size:16px;
font-weight:800;
line-height:1.35;
}

.em-stars{
color:#f59e0b;
font-size:14px;
margin-top:4px;
}


/* ===== Card Description ===== */

.em-desc{
font-size:14px;
line-height:1.7;
color:var(--em-sub);
margin:10px 0;
}

.em-features{
padding-left:18px;
margin:8px 0 12px;
font-size:14px;
line-height:1.65;
color:var(--em-sub);
}


/* ===== Small Tip inside Card ===== */

.em-tip{
background:#f0fdf4;
border-left:5px solid var(--em-green);
padding:12px;
border-radius:12px;
margin-top:10px;
font-size:13.8px;
line-height:1.6;
}


/* ===== Buttons ===== */

.em-btn-row{
display:flex;
gap:10px;
margin-top:14px;
}

.em-btn{
flex:1;
text-align:center;
padding:11px 12px;
border-radius:12px;
font-size:13.5px;
font-weight:700;
text-decoration:none;
transition:all .18s ease;
display:inline-block;
}

/* Read / Details button */
.em-read{
background:#0f172a;
color:#fff;
}

.em-read:hover{
background:#020617;
}

/* Apply / Check button */
.em-check{
background:#16a34a;
color:#fff;
}

.em-check:hover{
background:#15803d;
}


/* ===== CTA Box (Affiliate Blocks) ===== */

.em-cta{
max-width:760px;
margin:26px auto;
padding:18px;
border-radius:18px;
background:#ffffff;
border:1px solid var(--em-border);
box-shadow:0 14px 32px rgba(0,0,0,.08);
}

.em-cta-tag{
display:inline-block;
font-size:12px;
font-weight:700;
color:#fff;
background:linear-gradient(135deg,#2563eb,#7c3aed);
padding:6px 12px;
border-radius:999px;
margin-bottom:8px;
}

.em-cta-title{
font-size:18px;
font-weight:800;
margin-bottom:6px;
color:#111827;
}

.em-cta-rating{
font-size:13.5px;
color:#f59e0b;
margin-bottom:8px;
}

.em-cta-text{
font-size:13.6px;
line-height:1.55;
color:#374151;
margin-bottom:10px;
}

.em-cta-tip{
font-size:12.8px;
color:#065f46;
background:#ecfdf5;
padding:8px 12px;
border-radius:12px;
border-left:4px solid var(--em-green);
}


/* ===== Scroll Comparison Cards ===== */

.em-scroll{
display:flex;
gap:18px;
overflow-x:auto;
padding-bottom:8px;
scroll-snap-type:x mandatory;
}

.em-scroll::-webkit-scrollbar{
height:6px;
}

.em-scroll::-webkit-scrollbar-thumb{
background:#c7d2fe;
border-radius:10px;
}

.em-compare{
min-width:260px;
background:#fff;
border:1px solid var(--em-border);
border-radius:18px;
padding:16px;
box-shadow:0 12px 26px rgba(0,0,0,.06);
scroll-snap-align:start;
}

.em-compare-title{
font-size:17px;
font-weight:800;
margin-bottom:10px;
}

.em-compare-row{
font-size:14.4px;
line-height:1.7;
margin:6px 0;
}


/* ===== Credit Card Widget Base (clean foundation) ===== */

.em-cc-widget{
margin:20px auto;
padding:18px;
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff;
}

.em-cc-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:22px;
}

.em-cc-text{
flex:1 1 60%;
min-width:0;
}

.em-cc-actions{
flex:0 0 auto;
display:flex;
flex-direction:column;
gap:10px;
min-width:200px;
}

.em-btn-primary,
.em-btn-outline{
display:block;
text-align:center;
padding:12px 16px;
border-radius:999px;
font-weight:700;
text-decoration:none;
}

.em-btn-primary{
background:#2563eb;
color:#fff;
}

.em-btn-outline{
border:1.5px solid #2563eb;
color:#2563eb;
}


/* ===== Mobile Optimization ===== */

@media(max-width:720px){

.em-btn-row{
flex-direction:column;
}

.em-head{
flex-direction:row;
align-items:center;
}

.em-img{
width:82px;
height:52px;
}

.em-cc-inner{
flex-direction:column;
align-items:stretch;
}

.em-cc-actions{
width:100%;
min-width:0;
}

.em-btn-primary,
.em-btn-outline{
width:100%;
}

}
/* =========================================
   EASEMONEY CSS — PART 4
   AUTHORITY & TRUST SECTIONS (EEAT LAYER)
   FAQ REMOVED (PLUGIN SAFE)
   ========================================= */


/* ===== Credit Bureau Information Section ===== */

.em-bureau{
max-width:1100px;
margin:34px auto;
padding:0 14px;
}

.em-bureau-box{
background:#ffffff;
border:1px solid var(--em-border);
border-radius:22px;
padding:22px 18px;
box-shadow:0 18px 50px rgba(2,6,23,.08);
position:relative;
}

/* top accent bar */
.em-bureau-box::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#2563eb,#0ea5e9);
border-radius:22px 22px 0 0;
}

.em-bureau h2{
font-size:26px;
font-weight:900;
margin-bottom:10px;
}

.em-bureau-intro{
font-size:15px;
line-height:1.75;
color:var(--em-sub);
margin-bottom:18px;
}


/* bureau cards */

.em-bureau-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:16px;
}

.em-bureau-card{
background:#ffffff;
border:1px solid var(--em-border);
border-radius:16px;
padding:16px;
box-shadow:0 10px 25px rgba(2,6,23,.06);
}

.em-bureau-card h3{
font-size:18px;
font-weight:800;
margin-bottom:6px;
}

.em-bureau-card p{
font-size:14px;
line-height:1.65;
color:var(--em-sub);
}

.em-range{
margin-top:8px;
background:#f1f5f9;
border-radius:12px;
padding:8px 10px;
font-size:13px;
font-weight:600;
}


/* notes */

.em-bureau-note{
margin-top:18px;
background:#fefce8;
border:1px solid #fde68a;
border-radius:16px;
padding:14px;
font-size:14px;
line-height:1.7;
}

.em-bureau-support{
margin-top:16px;
background:#ecfeff;
border:1px solid #67e8f9;
border-radius:16px;
padding:13px;
font-size:14px;
line-height:1.7;
}


/* ===== Financial Advice Panels ===== */

.em-decision-card{
max-width:820px;
margin:30px auto;
padding:24px;
border-radius:22px;
background:linear-gradient(135deg,#fff7ed,#ffffff);
border:1.6px solid #fed7aa;
}

.em-decision-head{
font-size:20px;
font-weight:800;
color:#7c2d12;
margin-bottom:10px;
}

.em-decision-desc{
font-size:14px;
color:#475569;
line-height:1.65;
margin-bottom:18px;
}

.em-decision-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

/* pros */

.em-pros{
background:#ecfdf5;
border-radius:18px;
padding:16px 18px;
border:1px solid #bbf7d0;
}

.em-pros h3{
margin:0 0 10px;
color:#166534;
font-size:17px;
}

.em-pros p{
font-size:13.6px;
color:#14532d;
margin:8px 0;
line-height:1.6;
}

/* cons */

.em-cons{
background:#fef2f2;
border-radius:18px;
padding:16px 18px;
border:1px solid #fecaca;
}

.em-cons h3{
margin:0 0 10px;
color:#991b1b;
font-size:17px;
}

.em-cons p{
font-size:13.6px;
color:#7f1d1d;
margin:8px 0;
line-height:1.6;
}


/* example scenario */

.em-real-box{
background:#eff6ff;
border-left:5px solid #3b82f6;
border-radius:16px;
padding:14px 16px;
margin-top:20px;
font-size:13.6px;
color:#1e3a8a;
line-height:1.65;
}

/* final advice */

.em-final-talk{
background:#fef3c7;
border-left:5px solid #f59e0b;
border-radius:16px;
padding:14px 16px;
margin-top:18px;
font-size:14px;
color:#1f2937;
line-height:1.65;
}


/* ===== Bank Desk Educational Section ===== */

.em-bankdesk{
max-width:820px;
margin:32px auto;
padding:26px;
border-radius:22px;
background:#f8fafc;
border:1px solid var(--em-border);
}

.em-bankdesk-title{
font-size:20px;
font-weight:800;
color:#0f172a;
margin-bottom:14px;
}

.em-bankdesk-intro{
font-size:14px;
color:#475569;
line-height:1.7;
margin-bottom:18px;
}

.em-bankdesk-card{
background:#ffffff;
border-radius:18px;
padding:18px;
margin-bottom:18px;
border:1px solid #e5e7eb;
}

.em-bankdesk-card h3{
margin:0 0 12px;
font-size:17px;
color:#1d4ed8;
font-weight:700;
}

.em-bankdesk-card p{
font-size:13.8px;
color:#334155;
line-height:1.65;
margin:6px 0;
}

.em-bankdesk-card ul{
margin:8px 0 0 18px;
padding:0;
}

.em-bankdesk-card li{
font-size:13.8px;
margin-bottom:6px;
color:#334155;
}

.em-bankdesk-tip{
background:#ecfeff;
border-left:5px solid #06b6d4;
border-radius:16px;
padding:14px 16px;
margin-top:16px;
font-size:13.8px;
color:#0f172a;
line-height:1.7;
}


/* ===== Mobile Optimization ===== */

@media(max-width:720px){

.em-decision-grid{
grid-template-columns:1fr;
}

.em-bureau h2{
font-size:22px;
}

}
/* =========================================
   EASEMONEY CSS — PART 5
   UTILITIES, ADS & TOOLS HUB
   (Layout Stability + Engagement Layer)
   ========================================= */


/* ===== Advertisement Container ===== */

.em-ad{
max-width:1100px;
margin:36px auto;
padding:14px;
border:1px solid var(--em-border);
border-radius:18px;
background:linear-gradient(180deg,#f8fafc,#ffffff);
box-shadow:0 14px 35px rgba(2,6,23,.06);
text-align:center;
}

/* label */

.em-ad-label{
font-size:13px;
font-weight:700;
color:#475569;
margin-bottom:10px;
display:block;
}

/* reserved ad space (prevents CLS shift) */

.em-ad-slot{
width:728px;
height:90px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
background:#f1f5f9;
border-radius:10px;
}

/* ad description */

.em-ad-sub{
font-size:12px;
color:#64748b;
margin-top:8px;
max-width:520px;
margin-left:auto;
margin-right:auto;
line-height:1.5;
}

/* hide large banner on small devices */

@media(max-width:900px){
.em-ad{display:none;}
}



/* ===== Tools Hub Section ===== */

.em-tools{
max-width:1000px;
margin:50px auto 20px;
padding:0 14px;
color:#0f172a;
}

/* heading */

.em-tools h2{
font-size:26px;
font-weight:800;
margin-bottom:10px;
text-align:center;
}

.em-tools-sub{
text-align:center;
font-size:15px;
color:#475569;
margin-bottom:24px;
}


/* banner */

.em-tools-banner{
background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
border-left:6px solid #16a34a;
border-radius:16px;
padding:18px;
margin-bottom:28px;
text-align:center;
}

.em-tools-banner a{
font-weight:700;
color:#166534;
text-decoration:none;
}

.em-tools-banner a:hover{
text-decoration:underline;
}


/* grid */

.em-tools-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

@media(max-width:900px){
.em-tools-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:520px){
.em-tools-grid{grid-template-columns:1fr;}
}


/* tool cards */

.em-tool-card{
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:18px;
padding:18px;
box-shadow:0 12px 26px rgba(2,6,23,.06);
transition:transform .22s ease, box-shadow .22s ease;
position:relative;
overflow:hidden;
}

@media(hover:hover){
.em-tool-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(2,6,23,.12);
}
}

/* icon */

.em-tool-icon{
font-size:28px;
margin-bottom:10px;
}

/* title */

.em-tool-title{
font-size:17px;
font-weight:800;
margin-bottom:6px;
}

/* description */

.em-tool-desc{
font-size:14px;
color:#475569;
line-height:1.6;
}

/* button */

.em-tool-btn{
display:inline-block;
margin-top:12px;
background:#166534;
color:#fff !important;
padding:9px 14px;
border-radius:10px;
font-size:14px;
font-weight:700;
text-decoration:none;
transition:background .18s ease;
}

.em-tool-btn:hover{
background:#14532d;
}



/* ===== Value Row Info (charges rows, small specs) ===== */

.em-row{
display:flex;
justify-content:space-between;
gap:14px;
padding:10px 0;
border-bottom:1px dashed #e5e7eb;
font-size:14px;
}

.em-row:last-child{
border-bottom:none;
}

.em-row > span{
font-weight:700;
white-space:nowrap;
color:#16a34a;
}

@media(max-width:520px){
.em-row{
flex-direction:column;
align-items:flex-start;
}
.em-row span{
margin-top:4px;
}
}



/* ===== Disclaimer & Notice Blocks ===== */

.em-disclaimer{
margin-top:18px;
background:#eff6ff;
border-left:5px solid var(--em-blue);
padding:14px;
border-radius:12px;
font-size:14px;
line-height:1.6;
}

.em-note-box{
margin-top:18px;
background:#f8fafc;
border-left:5px solid var(--em-blue);
padding:14px;
border-radius:12px;
font-size:14px;
line-height:1.6;
}

.em-warning-box{
margin-top:18px;
background:#fff7ed;
border-left:5px solid #f97316;
padding:14px;
border-radius:12px;
font-size:14px;
line-height:1.6;
}
/* =========================================
   EASEMONEY CSS — PART 6
   PRODUCT & CREDIT CARD UI
   (Load ONLY on card / review pages)
   ========================================= */


/* ===== Axis ACE Feature Card ===== */

.em-ace-card{
max-width:820px;
margin:28px auto;
padding:22px 24px;
border-radius:22px;
background:
linear-gradient(#ffffff,#ffffff) padding-box,
linear-gradient(135deg,#97144d,#c2185b,#e91e63) border-box;
border:1.6px solid transparent;
box-sizing:border-box;
}

.em-ace-card h2{
font-size:20px;
margin:0 0 14px;
color:#0f172a;
font-weight:800;
}

.em-ace-title{
font-size:16.5px;
font-weight:800;
margin:20px 0 10px;
color:#7a003c;
}

.em-ace-box{
background:#fde7f0;
border-radius:16px;
padding:14px 16px;
font-size:13.8px;
margin-bottom:12px;
color:#334155;
line-height:1.6;
}

.em-ace-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.em-ace-example{
background:#ecfeff;
border-left:5px solid #06b6d4;
padding:14px 16px;
border-radius:16px;
font-size:13.7px;
color:#0f172a;
margin-top:12px;
line-height:1.6;
}

.em-ace-note{
background:#fef3c7;
border-left:5px solid #f59e0b;
padding:14px 16px;
border-radius:16px;
font-size:13.8px;
color:#1f2937;
margin-top:16px;
line-height:1.6;
}


/* ===== Charges & Cost Tables ===== */

.em-ace-cost{
max-width:860px;
margin:36px auto;
padding:26px;
border-radius:22px;
background:#ffffff;
box-shadow:0 18px 42px rgba(2,6,23,0.08);
border:1px solid #e5e7eb;
}

.em-ace-cost h2{
font-size:22px;
font-weight:800;
margin-bottom:12px;
}

.em-ace-cost-table{
width:100%;
border-collapse:collapse;
font-size:14px;
border:1px solid #e5e7eb;
border-radius:12px;
overflow:hidden;
}

.em-ace-cost-table th{
text-align:left;
padding:12px;
background:#e2e8f0;
color:#0f172a;
font-weight:800;
border-bottom:1px solid #cbd5e1;
}

.em-ace-cost-table td{
padding:12px;
border-bottom:1px solid #e5e7eb;
color:#1f2937;
}

.em-ace-cost-table tr:nth-child(even){
background:#f9fafb;
}

.em-ace-warning{
margin-top:16px;
background:#fee2e2;
border-left:5px solid #ef4444;
padding:15px 16px;
border-radius:14px;
font-size:14px;
color:#7f1d1d;
font-weight:700;
}


/* ===== Apply Guide Section ===== */

.em-ace-apply{
max-width:860px;
margin:36px auto;
padding:26px;
border-radius:22px;
background:#ffffff;
box-shadow:0 18px 40px rgba(2,6,23,0.08);
border:1px solid #e5e7eb;
}

.em-ace-section h3{
font-size:18px;
color:#7a003c;
margin-bottom:12px;
font-weight:800;
}

.em-ace-elig{
background:#f8fafc;
border-radius:16px;
padding:16px 18px;
font-size:14px;
line-height:1.7;
border:1px solid #e5e7eb;
}

.em-ace-doc-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.em-ace-doc{
background:#fff7fb;
border:1px solid #fde7f0;
border-radius:18px;
padding:16px;
font-size:14px;
line-height:1.7;
}

.em-ace-step{
margin-bottom:16px;
font-size:14px;
line-height:1.7;
}


/* ===== HPCL Credit Card Widget ===== */

.em-cc-widget.hpcl{
border-radius:20px;
padding:18px;
background:
linear-gradient(#ffffff,#ffffff) padding-box,
linear-gradient(135deg,#f97316,#ef4444,#dc2626) border-box;
border:1.6px solid transparent;
max-width:720px;
margin:22px auto;
box-shadow:0 12px 28px rgba(0,0,0,0.08);
}

.em-cc-tag{
display:inline-block;
font-size:11px;
font-weight:700;
color:#b91c1c;
background:#fee2e2;
padding:5px 12px;
border-radius:999px;
margin-bottom:8px;
}

.em-cc-rating{
font-size:13px;
color:#f59e0b;
margin-bottom:8px;
}

.em-cc-tip{
font-size:12.5px;
color:#7c2d12;
background:#fff7ed;
padding:8px 12px;
border-radius:12px;
border-left:4px solid #f97316;
}


/* ===== Lifestyle (Fibe) Widget ===== */

.em-cc-widget.fibe{
border-radius:18px;
padding:16px 18px;
background:
linear-gradient(#ffffff,#ffffff) padding-box,
linear-gradient(135deg,#f43f5e,#fb7185,#f59e0b) border-box;
border:1.5px solid transparent;
max-width:760px;
margin:18px auto;
}

.em-cc-widget.fibe .em-cc-tag{
color:#e11d48;
background:#ffe4e6;
}

.em-cc-widget.fibe .em-cc-tip{
background:#fef3c7;
border-left:4px solid #f59e0b;
}


/* ===== Mobile Optimization ===== */

@media(max-width:720px){

.em-ace-grid{
grid-template-columns:1fr;
}

.em-ace-doc-grid{
grid-template-columns:1fr;
}

}
/* =========================================
   EASEMONEY CSS — PART 7
   RESPONSIVE DATA TABLE SYSTEM
   (Mobile First + SEO Safe Tables)
   ========================================= */


/* ===== Table Wrapper ===== */

.em-table-wrap{
width:100%;
overflow-x:visible;   /* stop forcing scroll */
margin:20px 0 26px;
}


/* ===== Base Table ===== */

.em-data-table{
width:100%;
border-collapse:separate;
border-spacing:0;
min-width:0;
table-layout:fixed;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:16px;
overflow:hidden;
font-size:14.2px;
}


/* ===== Header ===== */

.em-data-table thead th{
background:#0f172a;
color:#ffffff;
padding:13px 14px;
font-weight:800;
text-align:left;
white-space:nowrap;
border-right:1px solid rgba(255,255,255,.08);
}

.em-data-table thead th:last-child{
border-right:none;
}


/* ===== Cells ===== */

.em-data-table td{
padding:13px 14px;
border-bottom:1px solid #e2e8f0;
color:#334155;
vertical-align:top;
line-height:1.6;
}

.em-data-table tr:last-child td{
border-bottom:none;
}


/* zebra readability */

.em-data-table tbody tr:nth-child(even){
background:#f8fafc;
}


/* hover readability (desktop only) */

@media(hover:hover){
.em-data-table tbody tr:hover{
background:#eef2ff;
}
}


/* ===== Important Column Highlight ===== */

.em-col-highlight{
font-weight:700;
color:#0f172a;
}


/* positive / negative indicators */

.em-positive{
color:#16a34a;
font-weight:700;
}

.em-negative{
color:#dc2626;
font-weight:700;
}

.em-neutral{
color:#475569;
font-weight:600;
}


/* ===== Compact Table Variant ===== */

.em-table-compact td,
.em-table-compact th{
padding:10px 11px;
font-size:13.6px;
}


/* ===== Mobile Card Conversion ===== */

@media(max-width:680px){

/* hide header */
.em-data-table thead{
display:none;
}

.em-data-table,
.em-data-table tbody,
.em-data-table tr,
.em-data-table td{
display:block;
width:100%;
}

/* each row becomes card */
.em-data-table tr{
margin-bottom:16px;
border:1px solid #e2e8f0;
border-radius:14px;
overflow:hidden;
background:#ffffff;
box-shadow:0 10px 22px rgba(2,6,23,.06);
}

/* cells */
.em-data-table td{
position:relative;
padding:12px 14px 12px 48%;
text-align:right;
border-bottom:1px dashed #e2e8f0;
}

.em-data-table td:last-child{
border-bottom:none;
}

/* label (MOST IMPORTANT PART) */
.em-data-table td::before{
content:attr(data-label);
position:absolute;
left:14px;
top:12px;
font-weight:800;
color:#0f172a;
text-align:left;
width:44%;
white-space:normal;
}

/* improve readability */
.em-data-table tr:nth-child(even){
background:#ffffff;
}

}


/* ===== Small Screen Optimization ===== */

@media(max-width:420px){

.em-data-table td{
padding:12px 12px 12px 46%;
font-size:13.5px;
}

.em-data-table td::before{
width:42%;
font-size:13px;
}

}
/* =========================================
   EASEMONEY DOCUMENT TABLE MODE
   (No horizontal scroll – Article Friendly)
   ========================================= */

.em-doc-table{
width:100%;
border-collapse:separate;
border-spacing:0;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:16px;
overflow:hidden;
font-size:14.2px;
}

/* header */
.em-doc-table thead th{
background:#0f172a;
color:#ffffff;
padding:13px 14px;
text-align:left;
font-weight:800;
}

/* rows */
.em-doc-table td{
padding:13px 14px;
border-top:1px solid #e2e8f0;
color:#334155;
line-height:1.6;
}

/* zebra */
.em-doc-table tbody tr:nth-child(even){
background:#f8fafc;
}

/* highlight best values */
.em-doc-best{
font-weight:800;
color:#16a34a;
}

/* MOBILE — convert to readable cards (NO SCROLL) */

@media(max-width:700px){

.em-doc-table thead{
display:none;
}

.em-doc-table,
.em-doc-table tbody,
.em-doc-table tr,
.em-doc-table td{
display:block;
width:100%;
}

.em-doc-table tr{
margin-bottom:14px;
border:1px solid #e2e8f0;
border-radius:14px;
overflow:hidden;
background:#ffffff;
box-shadow:0 10px 22px rgba(2,6,23,.06);
}

.em-doc-table td{
padding:10px 14px 10px 48%;
position:relative;
border-top:1px dashed #e2e8f0;
text-align:right;
}

.em-doc-table td:first-child{
padding:14px;
text-align:left;
font-weight:800;
background:#f1f5f9;
}

.em-doc-table td::before{
content:attr(data-label);
position:absolute;
left:14px;
top:10px;
font-weight:700;
color:#0f172a;
text-align:left;
}

}
