/*==================================================
 HomestayWeb Modern Theme 2026
 Part 1
==================================================*/


/*--------------------------------------------------
 1. Design Tokens
--------------------------------------------------*/

:root{

    /* Color */

    --color-primary:#4F7CFF;
    --color-primary-hover:#396CFF;

    --color-success:#48C78E;
    --color-info:#58B7FF;
    --color-warning:#FFC14D;
    --color-danger:#F66D6D;

    --color-text:#263449;
    --color-text-light:#6E7C91;

    --color-border:#E7ECF4;

    --color-bg:#F7F9FC;

    --color-card:#FFFFFF;

    /* Radius */

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

    /* Shadow */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.04);

    --shadow-md:
        0 10px 30px rgba(22,38,67,.08);

    --shadow-lg:
        0 20px 45px rgba(22,38,67,.12);

    /* Animation */

    --transition:.22s ease;

}

/*--------------------------------------------------
 2. Body
--------------------------------------------------*/

html{

    scroll-behavior:smooth;

}

body{

    background:var(--color-bg);

    color:var(--color-text);

    font-size:15px;

    line-height:1.7;

    font-family:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;

}

/*--------------------------------------------------
 3. Link
--------------------------------------------------*/

a{

    color:var(--color-primary);

    transition:all var(--transition);

}

a:hover{

    color:var(--color-primary-hover);

    text-decoration:none;

}

/*--------------------------------------------------
container
--------------------------------------------------*/

.container{

    padding-left:20px;

    padding-right:20px;

}
.row{

    /*margin-bottom:18px;*/

}
hr{

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

}
::selection{

    background:#DCE7FF;

}
img{

    max-width:100%;

    height:auto;

}
/*--------------------------------------------------
Typography
--------------------------------------------------*/

h1,
h2,
h3,
h4,
h5{

    color:var(--color-text);

    font-weight:700;

    letter-spacing:-.02em;

}

h1{

    font-size:34px;

}

h2{

    font-size:28px;

}

h3{

    font-size:23px;

}

h4{

    font-size:19px;

}

h5{

    font-size:17px;

}

p{

    color:var(--color-text-light);

}


/*--------------------------------------------------
 6. Navbar
--------------------------------------------------*/

.navbar{

    min-height:70px;

    border:none;

    border-radius:0;

    margin-bottom:30px;

    background:#fff;

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

    transition:all var(--transition);

}

.navbar-default{

    border:none;

    background:#fff;

}

.navbar-brand{

    height:70px;

    display:flex;

    align-items:center;

    padding-top:0;

    padding-bottom:0;

    font-weight:700;

    color:var(--color-text)!important;

}

.navbar-nav>li>a{

    height:70px;

    line-height:40px;

    font-size:15px;

    font-weight:600;

    color:var(--color-text-light)!important;

    transition:all var(--transition);

}

.navbar-nav>li>a:hover{

    color:var(--color-primary)!important;

    background:transparent!important;

}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover{

    background:transparent;

    color:var(--color-primary)!important;

}

.dropdown-menu{

    border:none;

    border-radius:14px;

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

    padding:8px;

}

.dropdown-menu>li>a{

    border-radius:10px;

    padding:10px 14px;

}

.dropdown-menu>li>a:hover{

    background:#EDF3FF;

}


/*--------------------------------------------------
 7. Button
--------------------------------------------------*/

.btn{

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    padding:10px 18px;

    transition:all var(--transition);

    box-shadow:none;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:focus{

    outline:none;

}

.btn-primary{

    background:var(--color-primary);

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

}

.btn-primary:hover{

    background:var(--color-primary-hover);

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

}

.btn-default{

    background:#fff;

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

    color:var(--color-text);

}

.btn-default:hover{

    background:#F5F8FD;

    border-color:#D9E3F4;

}

.btn-success{

    background:var(--color-success);

    border-color:var(--color-success);

}

.btn-info{

    background:var(--color-info);

    border-color:var(--color-info);

}

.btn-warning{

    background:var(--color-warning);

    border-color:var(--color-warning);

    color:#fff;

}

.btn-danger{

    background:var(--color-danger);

    border-color:var(--color-danger);

}

/*--------------------------------------------------
 8. Form
--------------------------------------------------*/

.form-control{

    height:46px;

    border-radius:12px;

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

    box-shadow:none;

    font-size:15px;

    transition:all var(--transition);

}

textarea.form-control{

    height:auto;

    min-height:120px;

}

.form-control:focus{

    border-color:#7CA6FF;

    box-shadow:
        0 0 0 4px rgba(79,124,255,.12);

}

.form-group{

    margin-bottom:20px;

}

.input-group-addon{

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

    background:#F9FBFE;

}

/*--------------------------------------------------
 9. Panel
--------------------------------------------------*/

.panel{

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

    border-radius:18px;

    overflow:hidden;

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

    transition:all var(--transition);

    background:#fff;

}

.panel:hover{

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

}

.panel-heading{

    border:none;

    padding:14px 18px;

    font-weight:700;

}

.panel-body{

    padding:20px;

}

.panel-footer{

    background:#fff;

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

}


/*--------------------------------------------------
 10. Thumbnail
--------------------------------------------------*/

.thumbnail{

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

    border-radius:18px;

    overflow:hidden;

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

    transition:all var(--transition);

    background:#fff;

}

.thumbnail:hover{

    transform:translateY(-3px);

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

}

.thumbnail img{

    transition:transform .35s ease;

}

.thumbnail:hover img{

    transform:scale(1.03);

}


/*--------------------------------------------------
 11. List Group
--------------------------------------------------*/

.list-group{

    border-radius:18px;

    overflow:hidden;

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

}

.list-group-item{

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

    padding:14px 16px;

    transition:all var(--transition);

}

.list-group-item:hover{

    background:#FAFCFF;

}

.list-group-item:first-child{

    border-top-left-radius:18px;

    border-top-right-radius:18px;

}

.list-group-item:last-child{

    border-bottom-left-radius:18px;

    border-bottom-right-radius:18px;

}

/*--------------------------------------------------
 12. Media
--------------------------------------------------*/

.media{

    display:flex;

    align-items:flex-start;

}

.media-left{

    padding-right:14px;

}

.media-object{

    border-radius:12px;

    transition:all .25s ease;

}

.media:hover .media-object{

    transform:scale(1.04);

}

/*--------------------------------------------------
 13. Well
--------------------------------------------------*/

.well{

    background:#fff;

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

    border-radius:18px;

    box-shadow:none;

}