/* =========================
FULL WIDTH PAGE
========================= */

.page-id-2461 .site-content,
.page-id-2461 .content-area,
.page-id-2461 .inside-article{
width:100% !important;
max-width:100% !important;
}

.page-id-2461 #secondary,
.page-id-2461 .sidebar,
.page-id-2461 .widget-area{
display:none !important;
}

.page-id-2461 .inside-article{
margin:0 auto;
max-width:1200px;
padding:0 20px 30px;
}

/* =========================
REMOVE THEME SPACING
========================= */

.page-id-2461 .entry-header{
display:none;
}

.page-id-2461 .site-main{
margin-top:0 !important;
padding-top:0 !important;
}

/* =========================
HEADER SECTION
========================= */

.compare-header{
max-width:1200px;
margin:10px auto 10px;
padding:0;
}

.compare-header h1{
font-size:36px;
font-weight:700;
color:#1f3c73;
margin-bottom:6px;
}

.compare-header p{
font-size:15px;
color:#5a6b85;
margin-bottom:14px;
}

/* divider line */

.compare-header::after{
content:"";
display:block;
height:1px;
background:#e3e7ee;
margin-top:12px;
}

/* =========================
SEARCH BAR
========================= */

.compare-search{
display:flex;
width:100%;
max-width:900px;
margin-top:14px;
}

.compare-search input{
flex:1;
height:48px;
padding:0 16px;
border:1px solid #d5dbe5;
border-right:none;
border-radius:8px 0 0 8px;
font-size:15px;
background:#fff;
}

.compare-search button{
width:60px;
border:1px solid #d5dbe5;
border-left:none;
background:#f3f6fb;
border-radius:0 8px 8px 0;
cursor:pointer;
font-size:18px;
}

/* =========================
GRID
========================= */

.compare-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:20px;
}

/* =========================
CARD DESIGN
========================= */

.compare-card{
background:#ffffff;
border:1px solid #e6e6e6;
border-radius:8px;
padding:14px 12px;
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:center;
min-height:210px;
transition:all .2s ease;
}

.compare-card:hover{
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transform:translateY(-2px);
}

/* =========================
TITLE
========================= */

.compare-title{
font-size:13px;
font-weight:600;
line-height:1.3;
height:34px;
overflow:hidden;
margin-bottom:6px;
}

/* =========================
PHONE SECTION
========================= */

.compare-phones{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:6px 0;
}

.phone img{
width:75px;
height:95px;
object-fit:contain;
}

.vs{
font-size:13px;
font-weight:700;
color:#333;
}

/* =========================
BUTTON
========================= */

.compare-btn{
display:inline-block;
background:#2f6dfc;
color:#fff;
font-size:12px;
padding:6px 16px;
border-radius:4px;
text-decoration:none;
font-weight:600;
margin-top:6px;
}

.compare-btn:hover{
background:#1f4fd0;
}

/* =========================
PAGINATION
========================= */

.compare-pagination{
margin-top:28px;
text-align:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
}

.compare-pagination a{
padding:6px 10px;
background:#fff;
border:1px solid #ddd;
border-radius:5px;
text-decoration:none;
font-size:12px;
color:#333;
}

.compare-pagination a:hover{
background:#2f6dfc;
color:#fff;
border-color:#2f6dfc;
}

/* =========================
TABLET
========================= */

@media(max-width:1100px){
.compare-grid{
grid-template-columns:repeat(3,1fr);
}
}

/* =========================
MOBILE
========================= */

@media(max-width:700px){
.compare-grid{
grid-template-columns:repeat(2,1fr);
}

.phone img{
width:60px;
height:80px;
}

.compare-card{
min-height:auto;
}
}