/* =========================================================
   Smart Mobile Care - GLOBAL / COMMON CSS
   ---------------------------------------------------------
   Common website styles only.

   Component-specific CSS:
   header.php          → Header CSS
   footer.php          → Footer CSS
   bottom-nav.php      → Bottom Nav CSS
   campaign-slider.php → Campaign CSS
   index.css           → Index Page CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#06b6d4;

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

    --dark:#111827;
    --text:#1f2937;
    --muted:#6b7280;

    --light:#f3f4f6;
    --white:#ffffff;

    --border:#e5e7eb;

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;

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

    --shadow-md:
        0 6px 18px rgba(0,0,0,.08);

    --shadow-lg:
        0 12px 30px rgba(0,0,0,.12);

}


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

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    font-size:16px;

    height:100%;

}


html,
body{

    width:100%;

    min-height:100%;

}


/* =========================================================
   BODY / PAGE LAYOUT
   ---------------------------------------------------------
   Important:
   Keeps footer at bottom when page content is short.
========================================================= */

body{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    margin:0;

    background:#f3f4f6;

    color:var(--text);

    font-family:
        'Poppins',
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;

    line-height:1.6;

    overflow-x:hidden;

}


/* =========================================================
   MAIN
   ---------------------------------------------------------
   Main expands to fill available page height.
========================================================= */

main{

    width:100%;

    flex:1 0 auto;

}


/* =========================================================
   FOOTER LAYOUT SUPPORT
========================================================= */

.footer{

    width:100%;

    flex-shrink:0;

}


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

img{

    max-width:100%;

    height:auto;

    vertical-align:middle;

}


/* =========================================================
   LINKS
========================================================= */

a{

    color:inherit;

}


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

button,
input,
textarea,
select{

    font-family:inherit;

}


button{

    cursor:pointer;

}


button:disabled{

    cursor:not-allowed;

}


/* =========================================================
   FORM ELEMENTS
========================================================= */

input,
textarea,
select{

    outline:none;

}


input::placeholder,
textarea::placeholder{

    color:#9ca3af;

}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}


/* =========================================================
   PAGE WRAPPER
========================================================= */

.page-wrapper{

    width:100%;

    min-height:400px;

    padding:30px 20px;

}


/* =========================================================
   COMMON SECTION
========================================================= */

.section{

    width:100%;

    padding:60px 20px;

}


/* =========================================================
   COMMON SECTION TITLE
========================================================= */

.section-title{

    margin-bottom:35px;

    text-align:center;

}


.section-title h2{

    margin:0 0 8px;

    color:var(--text);

    font-size:30px;

    line-height:1.3;

    font-weight:700;

}


.section-title p{

    max-width:700px;

    margin:0 auto;

    color:var(--muted);

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   COMMON CARD
========================================================= */

.card{

    background:var(--white);

    border:1px solid #eef2f7;

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

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

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:42px;

    padding:10px 18px;

    border:1px solid transparent;

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

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    line-height:1;

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

}


.btn:hover{

    transform:translateY(-2px);

}


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

.btn-primary{

    background:var(--primary);

    color:#fff;

}


.btn-primary:hover{

    background:var(--primary-dark);

    color:#fff;

    box-shadow:
        0 7px 18px rgba(37,99,235,.22);

}


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

.btn-secondary{

    background:#fff;

    color:var(--primary);

    border-color:var(--primary);

}


.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}


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

.btn-success{

    background:var(--success);

    color:#fff;

}


.btn-success:hover{

    background:#15803d;

    color:#fff;

}


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

.btn-danger{

    background:var(--danger);

    color:#fff;

}


.btn-danger:hover{

    background:#b91c1c;

    color:#fff;

}


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

.btn-light{

    background:#f3f4f6;

    color:#374151;

}


.btn-light:hover{

    background:#e5e7eb;

}


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

.btn-outline{

    background:transparent;

    color:var(--primary);

    border-color:var(--primary);

}


.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    padding:5px 9px;

    border-radius:20px;

    font-size:10px;

    font-weight:600;

    line-height:1.2;

}


.badge-primary{

    background:#eff6ff;

    color:var(--primary);

}


.badge-success{

    background:#f0fdf4;

    color:#15803d;

}


.badge-warning{

    background:#fffbeb;

    color:#b45309;

}


.badge-danger{

    background:#fef2f2;

    color:#b91c1c;

}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group{

    width:100%;

    margin-bottom:18px;

}


.form-group label{

    display:block;

    margin-bottom:7px;

    color:#374151;

    font-size:13px;

    font-weight:600;

}


/* =========================================================
   COMMON INPUT
========================================================= */

.form-control{

    width:100%;

    min-height:44px;

    padding:10px 13px;

    border:1px solid #d1d5db;

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

    background:#fff;

    color:#1f2937;

    font-size:13px;

    transition:.25s;

}


.form-control:focus{

    border-color:var(--primary);

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

}


/* =========================================================
   TEXTAREA
========================================================= */

textarea.form-control{

    min-height:110px;

    resize:vertical;

}


/* =========================================================
   SELECT
========================================================= */

select.form-control{

    cursor:pointer;

}


/* =========================================================
   COMMON SEARCH BOX
========================================================= */

.search-box{

    width:100%;

    background:#fff;

    padding:20px;

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

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

}


/* =========================================================
   COMMON ALERT
========================================================= */

.alert{

    width:100%;

    padding:12px 15px;

    margin-bottom:15px;

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

    font-size:13px;

    line-height:1.5;

}


.alert-success{

    background:#f0fdf4;

    color:#166534;

    border:1px solid #bbf7d0;

}


.alert-danger{

    background:#fef2f2;

    color:#991b1b;

    border:1px solid #fecaca;

}


.alert-warning{

    background:#fffbeb;

    color:#92400e;

    border:1px solid #fde68a;

}


.alert-info{

    background:#eff6ff;

    color:#1e40af;

    border:1px solid #bfdbfe;

}


/* =========================================================
   COMMON TABLE
========================================================= */

.table-wrapper{

    width:100%;

    overflow-x:auto;

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

}


table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}


th,
td{

    padding:12px 14px;

    border-bottom:1px solid #e5e7eb;

    text-align:left;

    font-size:13px;

}


th{

    background:#f8fafc;

    color:#374151;

    font-weight:600;

}


td{

    color:#4b5563;

}


tr:last-child td{

    border-bottom:none;

}


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

.grid{

    display:grid;

    gap:20px;

}


.grid-2{

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

}


.grid-3{

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

}


.grid-4{

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

}


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

.flex{

    display:flex;

}


.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}


.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.flex-wrap{

    flex-wrap:wrap;

}


.gap-5{

    gap:5px;

}


.gap-10{

    gap:10px;

}


.gap-15{

    gap:15px;

}


.gap-20{

    gap:20px;

}


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

.text-center{

    text-align:center;

}


.text-left{

    text-align:left;

}


.text-right{

    text-align:right;

}


.text-muted{

    color:var(--muted);

}


.text-primary{

    color:var(--primary);

}


.text-success{

    color:var(--success);

}


.text-danger{

    color:var(--danger);

}


/* =========================================================
   COMMON SPACING
========================================================= */

.mt-10{

    margin-top:10px;

}


.mt-20{

    margin-top:20px;

}


.mt-30{

    margin-top:30px;

}


.mb-10{

    margin-bottom:10px;

}


.mb-20{

    margin-bottom:20px;

}


.mb-30{

    margin-bottom:30px;

}


/* =========================================================
   HORIZONTAL LINE
========================================================= */

.divider{

    width:100%;

    height:1px;

    margin:20px 0;

    background:#e5e7eb;

}


/* =========================================================
   LOADING
========================================================= */

.loading{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:120px;

    color:var(--muted);

}


.spinner{

    width:28px;

    height:28px;

    border:3px solid #e5e7eb;

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

    border-radius:50%;

    animation:
        smartmobilecareSpin .8s linear infinite;

}


@keyframes smartmobilecareSpin{

    to{

        transform:rotate(360deg);

    }

}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state{

    width:100%;

    padding:45px 20px;

    text-align:center;

    background:#fff;

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

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

}


.empty-state i{

    display:block;

    margin-bottom:15px;

    color:#9ca3af;

    font-size:42px;

}


.empty-state h3{

    margin-bottom:7px;

    color:#374151;

    font-size:18px;

}


.empty-state p{

    color:var(--muted);

    font-size:13px;

}


/* =========================================================
   OVERLAY
========================================================= */

.overlay{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    background:
        rgba(0,0,0,.55);

}


.overlay.active{

    display:block;

}


/* =========================================================
   MODAL
========================================================= */

.modal{

    position:fixed;

    inset:0;

    z-index:10000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.modal.active{

    display:flex;

}


.modal-content{

    width:100%;

    max-width:500px;

    max-height:90vh;

    overflow-y:auto;

    padding:25px;

    background:#fff;

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.20);

}


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

.close-btn{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#f3f4f6;

    color:#374151;

    cursor:pointer;

    transition:.25s;

}


.close-btn:hover{

    background:#e5e7eb;

    transform:rotate(90deg);

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.whatsapp-float{

    position:fixed;

    right:18px;

    bottom:80px;

    z-index:900;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25d366;

    color:#fff;

    text-decoration:none;

    font-size:23px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.18);

    transition:.25s;

}


.whatsapp-float:hover{

    transform:
        translateY(-3px)
        scale(1.04);

    color:#fff;

}


/* =========================================================
   SCROLL TO TOP
========================================================= */

.scroll-top{

    position:fixed;

    right:18px;

    bottom:140px;

    z-index:899;

    width:42px;

    height:42px;

    display:none;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

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

}


.scroll-top.show{

    display:flex;

}


/* =========================================================
   HIDE / SHOW
========================================================= */

.desktop-only{

    display:block;

}


.mobile-only{

    display:none;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible{

    outline:
        2px solid var(--primary);

    outline-offset:2px;

}


/* =========================================================
   SELECTION
========================================================= */

::selection{

    background:var(--primary);

    color:#fff;

}


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

@media(max-width:992px){

    .container{

        padding-left:15px;

        padding-right:15px;

    }


    .section{

        padding:50px 15px;

    }


    .grid-4{

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

    }


    .grid-3{

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

    }

}


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

@media(max-width:768px){

    body{

        font-size:13px;

        /*
         * Bottom navigation-এর জন্য
         * নিচে প্রয়োজনীয় space.
         */

        padding-bottom:65px;

    }


    .container{

        padding-left:12px;

        padding-right:12px;

    }


    .section{

        padding:45px 12px;

    }


    .section-title{

        margin-bottom:25px;

    }


    .section-title h2{

        font-size:25px;

    }


    .section-title p{

        font-size:13px;

    }


    .grid-2,
    .grid-3,
    .grid-4{

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

    }


    .page-wrapper{

        padding:20px 12px;

    }


    .desktop-only{

        display:none !important;

    }


    .mobile-only{

        display:block;

    }


    .whatsapp-float{

        right:15px;

        bottom:80px;

    }


    .scroll-top{

        right:15px;

        bottom:135px;

    }

}


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

@media(max-width:480px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }


    .btn{

        min-height:40px;

        padding:9px 15px;

        font-size:12px;

    }


    .form-control{

        min-height:42px;

        font-size:12px;

    }


    .modal-content{

        padding:18px;

        border-radius:12px;

    }


    .empty-state{

        padding:35px 15px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html{

        scroll-behavior:auto;

    }


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

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}