/* =========================================================
   AWTI DEVICES HUB
   BRANDS CSS
   File: assets/css/brands.css
   ========================================================= */


/* =========================================================
   DEVICE SINGLE — BRAND WRAPPER
   ========================================================= */

.awti-device-single .awti-device-brand{

    display:inline-flex;
    align-items:center;
    gap:6px;

    margin:0 0 8px;
    padding:5px 10px;

    border:1px solid rgba(22,163,74,.20);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #f0fdfa,
            #eff6ff
        );

    color:#15803d;

    font-size:12px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.02em;

    box-shadow:
        0 3px 10px rgba(22,163,74,.06);
}


/* =========================================================
   BRAND NAME
   ========================================================= */

.awti-device-single .awti-device-brand-name{

    display:inline-block;

    color:#15803d;

    font-size:12px;
    font-weight:800;
}


/* =========================================================
   DEVICE BRAND LOGO
   ========================================================= */

.awti-device-single .awti-brand-logo{

    display:block;

    width:22px;
    height:22px;

    object-fit:contain;

    border-radius:5px;

    background:#fff;
}


/* =========================================================
   DEVICE BRAND LOGO — LARGE
   ========================================================= */

.awti-device-single .awti-brand-logo-large{

    display:flex;

    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;

    padding:8px;

    border:1px solid rgba(22,163,74,.15);
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 5px 16px rgba(15,23,42,.06);
}


.awti-device-single .awti-brand-logo-large img{

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================================
   BRAND HEADER
   ========================================================= */

.awti-device-single .awti-device-brand-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;
}


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

.awti-device-single .awti-device-brand-title{

    min-width:0;
}


.awti-device-single .awti-device-brand-title h1,
.awti-device-single .awti-device-brand-title h2{

    margin:0;

    color:#0f172a;

    font-size:clamp(24px,4vw,38px);
    line-height:1.15;

    font-weight:800;
}


.awti-device-single .awti-device-brand-title p{

    margin:5px 0 0;

    color:#64748b;

    font-size:13px;
}


/* =========================================================
   BRAND MODEL
   ========================================================= */

.awti-device-single .awti-device-model{

    margin-top:5px;

    color:#64748b;

    font-size:13px;
    font-weight:500;
}


/* =========================================================
   BRAND BADGE
   ========================================================= */

.awti-device-single .awti-brand-badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:5px 9px;

    border:1px solid rgba(37,99,235,.16);
    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:11px;
    font-weight:800;
}


/* =========================================================
   BRAND CARD
   ========================================================= */

.awti-device-single .awti-brand-card{

    position:relative;

    padding:18px;

    border:1px solid rgba(22,163,74,.18);
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

    box-shadow:
        0 7px 24px rgba(15,23,42,.06);

    overflow:hidden;
}


.awti-device-single .awti-brand-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #0d9488,
            #2563eb
        );
}


/* =========================================================
   BRAND LINK
   ========================================================= */

.awti-device-single .awti-brand-link{

    color:#15803d;

    font-weight:700;

    text-decoration:none;
}


.awti-device-single .awti-brand-link:hover{

    color:#2563eb;

    text-decoration:none;
}


/* =========================================================
   POPULAR BRANDS — WRAPPER
   IMPORTANT:
   Actual frontend HTML = .awti-popular-brands
   ========================================================= */

.awti-popular-brands{

    margin:24px 0;
}


/* =========================================================
   POPULAR BRANDS HEADER
   ========================================================= */

.awti-popular-brands .awti-popular-brands-head{

    margin-bottom:14px;
}


.awti-popular-brands .awti-section-eyebrow{

    display:block;

    margin-bottom:4px;

    color:#2563eb;

    font-size:10px;
    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.awti-popular-brands .awti-popular-brands-head h2{

    margin:0 0 4px;

    color:#0f172a;

    font-size:22px;
    line-height:1.3;

    font-weight:800;
}


.awti-popular-brands .awti-popular-brands-head p{

    margin:0;

    color:#64748b;

    font-size:13px;

    line-height:1.5;
}


/* =========================================================
   POPULAR BRANDS GRID
   ========================================================= */

.awti-popular-brands .awti-brand-grid{

    display:grid;

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

    gap:12px;
}


/* =========================================================
   POPULAR BRAND CARD
   ========================================================= */

.awti-popular-brands .awti-brand-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    padding:12px;

    border:1px solid
        rgba(37,99,235,.14);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 48%,
            #eff6ff 100%
        );

    box-shadow:
        0 4px 14px
        rgba(15,23,42,.04);

    text-decoration:none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.awti-popular-brands .awti-brand-card:hover{

    transform:translateY(-2px);

    border-color:
        rgba(37,99,235,.25);

    box-shadow:
        0 8px 22px
        rgba(15,23,42,.08);
}


/* =========================================================
   ⭐ ACTUAL FRONTEND BRAND LOGO CONTAINER
   Matches brands.php exactly
   ========================================================= */

.awti-popular-brands
.awti-brand-card__logo-wrap{

    width:48px;
    height:48px;

    min-width:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:5px;

    box-sizing:border-box;

    border-radius:12px;

    background:#ffffff;

    border:1px solid
        rgba(37,99,235,.12);

    overflow:hidden;

    flex:0 0 48px;
}


/* =========================================================
   ⭐ ACTUAL LOGO IMAGE
   ========================================================= */

.awti-popular-brands
.awti-brand-card__logo-image{

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    object-position:center;

    border:0;

    margin:0;

    padding:0;

    background:transparent;
}


/* =========================================================
   BRAND INITIAL FALLBACK
   ========================================================= */

.awti-popular-brands
.awti-brand-card__initial{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #dcfce7,
            #dbeafe
        );

    color:#2563eb;

    font-size:20px;

    font-weight:900;
}


/* =========================================================
   BRAND CONTENT
   ========================================================= */

.awti-popular-brands
.awti-brand-card__content{

    min-width:0;

    flex:1;
}


.awti-popular-brands
.awti-brand-card__name{

    display:block;

    overflow:hidden;

    color:#0f172a;

    font-size:14px;

    font-weight:800;

    line-height:1.3;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.awti-popular-brands
.awti-brand-card__count{

    display:block;

    margin-top:3px;

    color:#64748b;

    font-size:11px;

    line-height:1.3;
}


/* =========================================================
   BRAND ARROW
   ========================================================= */

.awti-popular-brands
.awti-brand-card__arrow{

    flex:0 0 auto;

    color:#2563eb;

    font-size:18px;

    font-weight:800;
}


/* =========================================================
   BRAND PAGE LOGO
   ========================================================= */

.awti-brand-page__logo{

    width:72px;
    height:72px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:8px;

    margin-bottom:12px;

    box-sizing:border-box;

    border-radius:16px;

    background:#fff;

    border:1px solid
        rgba(37,99,235,.14);

    box-shadow:
        0 5px 16px
        rgba(15,23,42,.06);

    overflow:hidden;
}


.awti-brand-page__logo-image{

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}


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

@media(max-width:700px){

    .awti-device-single .awti-device-brand{

        margin-bottom:6px;

        padding:4px 9px;

        font-size:11px;
    }


    .awti-device-single .awti-brand-logo{

        width:20px;
        height:20px;
    }


    .awti-device-single .awti-brand-logo-large{

        width:48px;
        height:48px;

        padding:7px;

        border-radius:12px;
    }


    .awti-device-single .awti-device-brand-header{

        gap:9px;
    }


    .awti-device-single
    .awti-device-brand-title h1,

    .awti-device-single
    .awti-device-brand-title h2{

        font-size:25px;
    }


    .awti-device-single .awti-brand-card{

        padding:15px;

        border-radius:14px;
    }


    /* Popular Brands */

    .awti-popular-brands
    .awti-brand-grid{

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

        gap:9px;
    }


    .awti-popular-brands
    .awti-brand-card{

        padding:10px;

        gap:8px;
    }


    .awti-popular-brands
    .awti-brand-card__logo-wrap{

        width:42px;
        height:42px;

        min-width:42px;

        flex-basis:42px;

        padding:4px;

        border-radius:10px;
    }


    .awti-popular-brands
    .awti-brand-card__name{

        font-size:13px;
    }


    .awti-popular-brands
    .awti-brand-card__arrow{

        font-size:16px;
    }


    .awti-brand-page__logo{

        width:60px;
        height:60px;
    }

}


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

@media(max-width:420px){

    .awti-popular-brands
    .awti-brand-grid{

        grid-template-columns:1fr;
    }

}