/* =========================================================
   Gadget Specs Pro
   Part 1 - Foundation
   ========================================================= */

/*=============================
  CSS VARIABLES
==============================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

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

    --bg:#f5f7fb;
    --card:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --radius:14px;

    --shadow:
        0 3px 10px rgba(0,0,0,.05);

    --shadow-hover:
        0 12px 24px rgba(0,0,0,.12);

    --transition:.25s ease;

}

/*=============================
  RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

table{

    width:100%;

    border-collapse:collapse;

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-dark);

}

button{

    cursor:pointer;

    font:inherit;

}

/*=============================
  HEADINGS
==============================*/

h1{

    font-size:2rem;

    margin-bottom:20px;

    font-weight:700;

}

h2{

    font-size:1.65rem;

    margin-bottom:18px;

    font-weight:700;

}

h3{

    font-size:1.25rem;

    margin-bottom:14px;

}

h4{

    font-size:1.05rem;

    margin-bottom:10px;

}

p{

    margin-bottom:16px;

}

/*=============================
  CONTAINERS
==============================*/

.spec-box,
.compare-wrapper,
.compare-pro,
.alt-pro,
.related-gadgets,
.side-box,
.faq-box,
.rating,
.buy{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin:24px 0;

    overflow:hidden;

}

/*=============================
  SECTION TITLES
==============================*/

.specs-title,
.compare-title,
.price-title{

    padding:22px 24px;

    border-bottom:1px solid var(--border);

    background:#fff;

}

/*=============================
  GENERIC CARD
==============================*/

.gadget-card{

    background:#fff;

    border-radius:12px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.gadget-card:hover{

    transform:translateY(-3px);

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

}

/*=============================
  BUTTONS
==============================*/

.btn,
.view-btn,
.compare-btn,
.view-specs-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    transition:.2s;

    text-decoration:none;

}

.btn:hover,
.view-btn:hover,
.compare-btn:hover,
.view-specs-btn:hover{

    transform:translateY(-2px);

}

.view-btn,
.view-specs-btn{

    background:var(--primary);

    color:#fff;

}

.view-btn:hover,
.view-specs-btn:hover{

    background:var(--primary-dark);

    color:#fff;

}

.compare-btn{

    background:#111827;

    color:#fff;

}

.compare-btn:hover{

    background:#000;

    color:#fff;

}

.shopee{

    background:#ee4d2d;

    color:#fff;

}

.lazada{

    background:#0f146d;

    color:#fff;

}

/*=============================
  PRICE
==============================*/

.price,
.gsm-price,
.alt-price,
.related-price,
.compare-price{

    color:var(--danger);

    font-weight:700;

    font-size:1.15rem;

}

/*=============================
  IMAGES
==============================*/

.gsm-img img,
.alt-img img,
.compare-img img,
.related-img img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:contain;

    transition:.3s;

}

.gsm-card:hover img,
.alt-card:hover img,
.compare-card:hover img,
.related-item:hover img{

    transform:scale(1.05);

}

/*=============================
  UTILITIES
==============================*/

.text-center{

    text-align:center;

}

.mb-20{

    margin-bottom:20px;

}

.mt-20{

    margin-top:20px;

}

.hidden{

    display:none;

}

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

@media(max-width:768px){

    h1{

        font-size:1.7rem;

    }

    h2{

        font-size:1.45rem;

    }

    h3{

        font-size:1.15rem;

    }

}

/* =========================================================
   Part 2 - Specifications
   ========================================================= */

/*=============================
  SPEC BOX
==============================*/

.spec-box{

    padding:0;

}

.spec-heading{

    margin:0 0 8px;

}

.spec-summary{

    color:var(--text-light);

    margin-bottom:20px;

    line-height:1.7;

}

.spec-note{

    margin-top:18px;

    padding:14px 18px;

    background:#eff6ff;

    border-left:4px solid var(--primary);

    border-radius:8px;

    color:#374151;

    font-size:.95rem;

}

/*=============================
  TABS
==============================*/

.tabs{

    display:flex;

    overflow-x:auto;

    white-space:nowrap;

    gap:6px;

    padding:12px;

    background:#fff;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:20;

    scrollbar-width:thin;

}

.tabs::-webkit-scrollbar{

    height:6px;

}

.tabs::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.tab-btn{

    border:none;

    background:#f3f4f6;

    color:#374151;

    padding:10px 18px;

    border-radius:999px;

    font-weight:600;

    transition:.25s;

    flex-shrink:0;

}

.tab-btn:hover{

    background:#dbeafe;

    color:var(--primary);

}

.tab-btn.active{

    background:var(--primary);

    color:#fff;

}

/*=============================
  TAB CONTENT
==============================*/

.tab-content{

    display:none;

    padding:24px;

    animation:fadeTab .25s ease;

}

.tab-content.active{

    display:block;

}

@keyframes fadeTab{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*=============================
  SPEC TABLE
==============================*/

.spec-table{

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

    border-radius:12px;

    overflow:hidden;

    background:#fff;

}

.spec-table tr{

    transition:.2s;

}

.spec-table tr:nth-child(even){

    background:#fafafa;

}

.spec-table tr:hover{

    background:#f1f5f9;

}

.spec-table td{

    padding:15px 18px;

    border-bottom:1px solid var(--border);

    vertical-align:top;

}

.spec-table tr:last-child td{

    border-bottom:none;

}

.spec-table td:first-child{

    width:34%;

    font-weight:600;

    color:#374151;

    background:#f8fafc;

}

.spec-table td:last-child{

    color:#111827;

}

/*=============================
  VARIANT BOX
==============================*/

.variant-box{

    margin:25px 0;

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

    border-radius:12px;

    overflow:hidden;

    background:#fff;

}

.variant-box h4{

    margin:0;

    padding:16px 20px;

    background:#f8fafc;

    border-bottom:1px solid var(--border);

}

.variant-list{

    display:flex;

    flex-direction:column;

}

.variant-list>div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

    border-bottom:1px solid var(--border);

    transition:.2s;

}

.variant-list>div:last-child{

    border-bottom:none;

}

.variant-list>div:hover{

    background:#f9fafb;

}

.variant-spec{

    font-weight:600;

    color:#111827;

}

.variant-price{

    color:var(--danger);

    font-weight:700;

    font-size:1.05rem;

}

/*=============================
  SPEC TITLE BLOCKS
==============================*/

.spec-heading::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:var(--primary);

    border-radius:99px;

    margin-top:8px;

}

/*=============================
  PRICE SECTION
==============================*/

.price-title{

    margin-bottom:0;

}

.price-text{

    padding:22px 24px;

    color:var(--text-light);

    line-height:1.8;

}

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

@media(max-width:768px){

    .tab-content{

        padding:18px;

    }

    .spec-table td{

        display:block;

        width:100%;

        padding:12px 16px;

    }

    .spec-table td:first-child{

        background:#eef2ff;

        border-bottom:none;

        width:100%;

    }

    .spec-table tr{

        display:block;

        margin-bottom:14px;

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

        border-radius:10px;

        overflow:hidden;

    }

    .spec-table{

        border:none;

        background:none;

    }

    .variant-list>div{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}

/* =========================================================
   Part 3 - Cards, Lists & Compare
   ========================================================= */

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

.compare-grid,
.alt-grid,
.related-grid,
.gsmarena-list{

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:24px;
    margin-top:25px;

}

/*=============================
  PRODUCT CARDS
==============================*/

.compare-card,
.alt-card,
.related-item,
.gsm-card{

    background:#fff;
    border-radius:14px;
    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}

.compare-card:hover,
.alt-card:hover,
.related-item:hover,
.gsm-card:hover{

    transform:translateY(-5px);

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

}

/*=============================
  CARD IMAGE
==============================*/

.compare-img,
.alt-img,
.related-img,
.gsm-img{

    padding:25px;
    background:#fafafa;
    border-bottom:1px solid var(--border);

}

.compare-img img,
.alt-img img,
.related-img img,
.gsm-img img{

    width:100%;
    height:210px;
    object-fit:contain;

}

/*=============================
  CARD CONTENT
==============================*/

.compare-info,
.alt-info,
.related-info,
.gsm-info{

    padding:20px;

}

.compare-title,
.alt-title,
.related-title,
.gsm-info h3{

    font-size:1.05rem;
    font-weight:700;
    margin-bottom:10px;
    line-height:1.4;

}

.compare-price,
.alt-price,
.related-price,
.gsm-price{

    color:var(--danger);
    font-weight:700;
    margin-bottom:18px;

}

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

.alt-btn,
.view-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:100%;

    background:var(--primary);

    color:#fff;

    padding:12px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.alt-btn:hover,
.view-btn:hover{

    background:var(--primary-dark);

}

/*=============================
  COMPARE SUGGESTIONS
==============================*/

.compare-pro,
.alt-pro,
.related-gadgets{

    padding:28px;

}

.compare-pro h2,
.alt-pro h2,
.related-gadgets h2{

    margin-bottom:10px;

}

/*=============================
  GSM LIST
==============================*/

.gsm-card{

    padding:18px;

}

.gsm-wrap{

    display:flex;
    gap:18px;
    align-items:center;

}

.gsm-img{

    flex:0 0 120px;

    border:none;

    padding:0;

    background:none;

}

.gsm-info{

    flex:1;

    padding:0;

}

.gsm-info h3{

    margin-bottom:8px;

}

/*=============================
  COMPARE PAGE
==============================*/

.compare-top{

    display:grid;

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

    gap:25px;

    margin:30px 0;

}

.compare-top .compare-card{

    text-align:center;

    padding:25px;

}

.compare-top img{

    max-width:180px;

    margin:auto;

}

.compare-intro{

    color:var(--text-light);

    margin-bottom:25px;

}

/*=============================
  COMPARE TABLE
==============================*/

.compare-wrapper{

    overflow-x:auto;

    border-radius:14px;

}

.compare-table{

    min-width:720px;

    background:#fff;

}

.compare-table th{

    background:var(--primary);

    color:#fff;

    padding:16px;

    font-weight:700;

}

.compare-table td{

    padding:15px;

    border-bottom:1px solid var(--border);

}

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

    background:#fafafa;

}

.compare-table td:first-child{

    font-weight:600;

    background:#f8fafc;

    width:220px;

}

.section td{

    background:#111827 !important;

    color:#fff;

    font-weight:700;

    font-size:1rem;

}

.diff{

    background:#ecfdf5 !important;

    font-weight:600;

}

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

.gsm-pagination{

    margin:40px 0;

    text-align:center;

}

.gsm-pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:42px;

    height:42px;

    margin:4px;

    border-radius:8px;

    background:#fff;

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

    transition:.25s;

}

.gsm-pagination .current{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.gsm-pagination a:hover{

    background:var(--primary);

    color:#fff;

}

/*=============================
  SORT BAR
==============================*/

.gsm-sort{

    display:flex;

    gap:12px;

    margin-bottom:25px;

}

.gsm-sort a{

    background:#fff;

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

    padding:10px 16px;

    border-radius:8px;

    font-weight:600;

}

.gsm-sort a:hover{

    background:var(--primary);

    color:#fff;

}

/*=============================
  RESPONSIVE
==============================*/

@media(max-width:900px){

    .compare-top{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .compare-grid,
    .alt-grid,
    .related-grid,
    .gsmarena-list{

        grid-template-columns:1fr;

    }

    .gsm-wrap{

        flex-direction:column;

        text-align:center;

    }

    .gsm-img{

        flex:none;

    }

    .compare-table{

        min-width:650px;

    }

}

@media(max-width:480px){

    .compare-pro,
    .alt-pro,
    .related-gadgets{

        padding:18px;

    }

    .compare-img img,
    .alt-img img,
    .related-img img{

        height:170px;

    }

}

/* =========================================================
   Part 4 - FAQ, Sidebar, Search, Rating & Buy
   ========================================================= */

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

.faq-box{

    margin:30px 0;

}

.faq-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 24px;

    background:var(--primary);

    color:#fff;

    font-size:1.2rem;
    font-weight:700;

    cursor:pointer;

}

.faq-toggle{

    font-size:1rem;

}

.faq-content{

    display:none;

    background:#fff;

}

.faq-item{

    border-bottom:1px solid var(--border);

}

.faq-item:last-child{

    border-bottom:none;

}

.faq-question{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 24px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.faq-question:hover{

    background:#f8fafc;

}

.faq-icon{

    color:var(--primary);

    font-size:1.2rem;

    font-weight:bold;

}

.faq-answer{

    display:none;

    padding:0 24px 20px;

    color:var(--text-light);

    line-height:1.8;

}

/*=============================
  BUY BOX
==============================*/

.buy{

    padding:24px;

    text-align:center;

}

.buy .price{

    font-size:2rem;

    margin-bottom:20px;

}

.buy .btn{

    display:block;

    width:100%;

    margin-bottom:12px;

}

.buy .btn:last-child{

    margin-bottom:0;

}

/*=============================
  RATING
==============================*/

.rating{

    padding:25px;

    text-align:center;

}

.rating .stars{

    display:flex;
    justify-content:center;
    gap:8px;

    margin-bottom:15px;

}

.rating .stars span{

    font-size:2rem;

    color:#d1d5db;

    cursor:pointer;

    transition:.2s;

}

.rating .stars span:hover{

    transform:scale(1.15);

    color:#fbbf24;

}

.rating .stars .active{

    color:#f59e0b;

}

.rating-text{

    color:var(--text-light);

    margin-bottom:10px;

}

.rating-msg{

    color:var(--success);

    font-weight:600;

}

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

.header-search,
.compare-search-box,
.side-box{

    position:relative;

}

#headerSearch,
#compareSearch,
#sidebarSearch{

    width:100%;

    padding:14px 18px;

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

    border-radius:10px;

    font-size:1rem;

    transition:.25s;

}

#headerSearch:focus,
#compareSearch:focus,
#sidebarSearch:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

/*=============================
  SEARCH RESULTS
==============================*/

#headerResults,
#compareResults,
#sidebarResults{

    background:#fff;

    border-radius:12px;

    box-shadow:var(--shadow);

    margin-top:10px;

    overflow:hidden;

}

.search-item,
.result-item{

    display:flex;

    gap:14px;

    align-items:center;

    padding:14px;

    border-bottom:1px solid var(--border);

    cursor:pointer;

    transition:.2s;

}

.search-item:last-child,
.result-item:last-child{

    border-bottom:none;

}

.search-item:hover,
.result-item:hover{

    background:#f8fafc;

}

.search-img img,
.result-img img{

    width:60px;

    height:60px;

    object-fit:contain;

}

.search-title,
.result-title{

    font-weight:600;

}

.search-price,
.result-price{

    color:var(--danger);

    font-size:.95rem;

    margin-top:4px;

}

.no-result{

    padding:18px;

    text-align:center;

    color:var(--text-light);

}

/*=============================
  SELECTED DEVICES
==============================*/

.compare-selected{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}

.selected-item{

    display:flex;

    align-items:center;

    gap:8px;

    background:#eff6ff;

    color:var(--primary);

    padding:8px 14px;

    border-radius:999px;

    font-weight:600;

}

.remove{

    cursor:pointer;

    color:var(--danger);

    font-weight:bold;

}

/*=============================
  SIDEBAR
==============================*/

.side-box{

    padding:20px;

}

.side-box h3{

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:2px solid var(--border);

}

.side-item-flex{

    display:flex;

    gap:12px;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid var(--border);

}

.side-item-flex:last-child{

    border-bottom:none;

}

.side-item-flex img{

    width:70px;

    height:70px;

    object-fit:contain;

}

.side-item-flex .title{

    font-weight:600;

    line-height:1.4;

}

.side-item-flex .price{

    color:var(--danger);

    font-size:.95rem;

    margin-top:5px;

}

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

.brand-grid{

    display:grid;

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

    gap:10px;

}

.brand-item{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px;

    background:#f8fafc;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}

.brand-item:hover{

    background:var(--primary);

    color:#fff;

}

/*=============================
  UTILITIES
==============================*/

.gadget-intro{

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-light);

    margin-bottom:25px;

}

.price-title{

    margin-bottom:15px;

}

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

@media(max-width:768px){

    .faq-header{

        padding:18px;

        font-size:1.05rem;

    }

    .faq-question{

        padding:16px;

    }

    .faq-answer{

        padding:0 16px 18px;

    }

    .brand-grid{

        grid-template-columns:1fr;

    }

    .buy .price{

        font-size:1.6rem;

    }

    .rating .stars span{

        font-size:1.7rem;

    }

}


/* ================= PERFECT MOBILE FIT ================= */
@media (max-width:768px){

.compare-wrapper{
    overflow-x:hidden;
}

/* table layout fix */
.compare-table{
    width:100%;
    min-width:100% !important;
    table-layout:fixed;
}

/* ALL CELLS */
.compare-table th,
.compare-table td{
    word-break:break-word;
    font-size:12px;
    padding:8px 5px;
}

/* SPEC COLUMN */
.compare-table td:first-child,
.compare-table th:first-child{
    width:26%;
    font-size:11px;
}

/* DEVICE COLUMNS AUTO FIT */
.compare-table td:nth-child(2),
.compare-table td:nth-child(3){
    width:auto;
}

/* IMAGE RESPONSIVE */
.compare-table img{
    max-width:60px;
    width:100%;
    height:auto;
}

/* TEXT IMPROVEMENT */
.compare-table td{
    line-height:1.35;
}

/* VERY SMALL PHONES */
@media (max-width:400px){

    .compare-table th,
    .compare-table td{
        font-size:11px;
        padding:6px 4px;
    }

    .compare-table td:first-child{
        font-size:10px;
    }

    .compare-table img{
        max-width:50px;
    }
}

}