dashboard
/* =========================================
   STAYPOLO CANARIAS
   PREMIUM LANDING PAGE STYLE
========================================= */


/* RESET */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:var(--white);

    overflow-x:hidden;

}


img{

    width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



.section{

    padding:100px 0;

}



/* =========================================
   COLORS - STAYFLOW CANARIAS BRAND
========================================= */

:root{

    /* Azul profundo StayFlow */
    --primary:#08295B;

    /* Azul oceano da logo */
    --secondary:#0078D7;

    /* Amarelo sol */
    --accent:#F7B500;

    /* Azul escuro premium */
    --dark:#041B3A;


    /* Fundo claro */
    --light:#F4F8FC;


    /* Branco */
    --white:#FFFFFF;


    /* Texto */
    --text:#263238;

    --text-light:#607080;


    /* Sombras */
    --shadow:
    0 15px 40px rgba(8,41,91,.15);


    --border:#DCE6F2;


    --whatsapp:#25D366;

}





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


.header{


    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.4s;

    padding:20px 0;


}



.header.scrolled{

    background:white;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.nav-container{


    display:flex;

    align-items:center;

    justify-content:space-between;


}



.logo img{

    width:170px;

}





.navbar ul{


    display:flex;

    gap:35px;


}



.navbar a{


    font-size:15px;

    font-weight:500;

    color:white;

    transition:.3s;


}



.header.scrolled .navbar a{

    color:var(--primary);

}



.navbar a:hover{

    color:var(--accent);

}




.language-selector{


    position:relative;

}



.language-selector button{


    background:none;

    border:none;

    color:white;

    cursor:pointer;

}



.header.scrolled .language-selector button{

    color:var(--primary);

}




.languages{

    position:absolute;

    top:30px;

    right:0;

    background:white;

    padding:15px;

    border-radius:10px;

    display:none;

    box-shadow:0 10px 30px rgba(0,0,0,.1);


}


.languages a{


    display:block;

    padding:8px;

    color:#333;


}



.language-selector:hover .languages{

    display:block;

}



.menu-toggle{

    display:none;

}







/* =========================================
   HERO
========================================= */


.hero{


    height:100vh;

    min-height:700px;

    background:

    url("../images/hero.jpg")

    center/cover no-repeat;


    position:relative;

    display:flex;

    align-items:center;


}



.hero-overlay{


    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(4,27,58,.75),

    rgba(4,27,58,.35)

    );


}



.hero-content{


    position:relative;

    z-index:2;


}



.hero-text{


    max-width:700px;

    color:white;


}



.subtitle{


    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;


}


.hero h1{


    font-family:'Playfair Display',serif;

    font-size:64px;

    line-height:1.15;

    margin:25px 0;


}



.hero p{


    font-size:20px;

    line-height:1.7;

    margin-bottom:40px;

}



.hero-buttons{


    display:flex;

    gap:20px;


}




.btn-primary,
.btn-whatsapp{


    padding:16px 32px;

    border-radius:50px;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s;


}




.btn-primary{


    background:var(--secondary);

    color:white;


}



.btn-primary:hover{


    background:var(--accent);

    color:var(--dark);

    transform:translateY(-4px);

}


.btn-whatsapp{


    background:#25D366;

    color:white;


}





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


.section-header{


    text-align:center;

    max-width:750px;

    margin:0 auto 60px;


}



.section-header span{


    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;


}



.section-header h2{


    font-family:'Playfair Display';

    font-size:45px;

    color:var(--primary);

    margin:20px 0;


}



.section-header p{

    color:var(--text);

    line-height:1.8;

}






/* =========================================
   ABOUT
========================================= */


.about-grid{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;


}



.about-image img{


    border-radius:20px;

    height:500px;

    object-fit:cover;


}



.about-text p{


    color:var(--text);

    line-height:1.9;

    margin-bottom:20px;


}





/* =========================================
   SERVICES
========================================= */


.services{

    background:var(--light);

}




.services-grid{


    display:grid;

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

    gap:25px;


}



.service-card{


    background:white;

    padding:35px 25px;

    border-radius:20px;

    transition:.3s;


}



.service-card:hover{


    transform:translateY(-10px);

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


}



.service-card .icon{


    width:60px;

    height:60px;

    background:#f1e4cd;

    color:var(--secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:24px;

    margin-bottom:25px;


}



.service-card h3{


    color:var(--primary);

    margin-bottom:15px;


}



.service-card p{


    color:var(--text);

    line-height:1.7;


}

/* =========================================
   FEATURES / DIFERENCIAIS
========================================= */


.features{

    background:white;

}



.features-grid{


    display:grid;

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

    gap:30px;


}



.feature-item{


    text-align:center;

    padding:35px 20px;

    border-radius:20px;

    transition:.3s;


}



.feature-item:hover{


    background:#f8f5ef;

    transform:translateY(-8px);


}



.feature-item i{


    font-size:40px;

    color:var(--secondary);

    margin-bottom:20px;


}



.feature-item h3{


    color:var(--primary);

    margin-bottom:15px;

    font-size:20px;


}



.feature-item p{


    color:var(--text);

    line-height:1.7;


}







/* =========================================
   PROCESS
========================================= */


.process{


    background:var(--light);

}



.process-grid{


    display:grid;

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

    gap:30px;


}



.process-step{


    background:white;

    padding:40px 25px;

    border-radius:20px;

    text-align:center;

    position:relative;


}



.process-step .number{


    width:70px;

    height:70px;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:25px;

    font-weight:700;

    margin:0 auto 25px;


}



.process-step h3{


    color:var(--primary);

    margin-bottom:15px;


}



.process-step p{


    color:var(--text);

    line-height:1.7;


}








/* =========================================
   STATS
========================================= */


.stats{


    background:var(--primary);

    padding:70px 0;

}



.stats-grid{


    display:grid;

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

    gap:30px;


}



.stat{


    text-align:center;

    color:white;


}



.stat strong{


    display:block;

    font-family:'Playfair Display';

    font-size:45px;

    color:var(--secondary);

    margin-bottom:10px;


}



.stat span{


    font-size:16px;


}







/* =========================================
   GALLERY
========================================= */


.gallery-grid{


    display:grid;

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

    gap:25px;


}



.gallery-item{


    height:320px;

    overflow:hidden;

    border-radius:20px;


}



.gallery-item img{


    height:100%;

    object-fit:cover;

    transition:.5s;


}



.gallery-item:hover img{


    transform:scale(1.08);


}







/* =========================================
   CONTACT
========================================= */


.contact{


    background:#f8f6f1;

}



.contact-wrapper{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;


}



.contact-info span{


    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:3px;


}



.contact-info h2{


    font-family:'Playfair Display';

    font-size:45px;

    color:var(--primary);

    margin:20px 0;


}



.contact-info p{


    color:var(--text);

    line-height:1.8;

    margin-bottom:30px;


}



.contact-details div{


    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

    color:var(--primary);


}



.contact-details i{


    color:var(--secondary);

    font-size:20px;


}






.contact-form{


    background:white;

    padding:40px;

    border-radius:25px;

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


}



.input-group{


    margin-bottom:20px;


}



.input-group input,
.input-group select,
.input-group textarea{


    width:100%;

    padding:16px;

    border:1px solid #ddd;

    border-radius:10px;

    font-family:inherit;

    outline:none;


}



.input-group textarea{


    height:130px;

    resize:none;


}




.contact-form button{


    border:none;

    cursor:pointer;

}







/* =========================================
   CTA
========================================= */


.cta{


    background:

    linear-gradient(

    rgba(11,43,64,.95),

    rgba(11,43,64,.95)

    ),

    url("../images/cta.jpg")

    center/cover;


    padding:90px 0;

    text-align:center;

    color:white;


}



.cta h2{


    font-family:'Playfair Display';

    font-size:45px;

    margin-bottom:20px;


}



.cta p{


    font-size:18px;

    margin-bottom:35px;


}







/* =========================================
   FOOTER
========================================= */


.footer{


    background:#07141c;

    color:white;

    padding-top:70px;


}



.footer-grid{


    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;


}



.footer-brand img{


    width:180px;

    margin-bottom:20px;


}



.footer p{


    color:#aaa;

    line-height:1.7;


}



.footer h3{


    margin-bottom:20px;

    color:white;


}



.footer-links a,
.footer-social a{


    display:block;

    margin-bottom:15px;

    color:#aaa;

    transition:.3s;


}



.footer-links a:hover,
.footer-social a:hover{


    color:var(--secondary);


}




.copyright{


    margin-top:50px;

    padding:25px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.1);


}







/* =========================================
   WHATSAPP FLOAT
========================================= */


.whatsapp-float{


    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    z-index:999;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    animation:pulse 2s infinite;


}




@keyframes pulse{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.1);

    }


    100%{

        transform:scale(1);

    }


}







/* =========================================
   ANIMATION CLASSES
========================================= */


.fade-up{


    opacity:0;

    transform:translateY(40px);

    transition:.8s;


}



.fade-up.active{


    opacity:1;

    transform:translateY(0);


}

.owner-login{

    min-height:100vh;

    background:

    linear-gradient(
    rgba(4,27,58,.85),
    rgba(4,27,58,.85)
    ),

    url("../imagens/hero.jpg")

    center/cover;

    display:flex;

    align-items:center;

    justify-content:center;

}


.login-box{

    background:white;

    width:420px;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);

}


.login-box img{

    width:170px;

    margin:0 auto 30px;

}


.login-box h1{

    color:var(--primary);

    margin-bottom:15px;

}


.login-box p{

    color:var(--text-light);

    line-height:1.6;

    margin-bottom:30px;

}


.login-box input{

    width:100%;

    padding:15px;

    margin-bottom:15px;

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

    border-radius:10px;

}


.login-box button{

    width:100%;

    justify-content:center;

    border:none;

    cursor:pointer;

}

/* =========================================
   DASHBOARD OWNER
========================================= */


.dashboard{

    display:flex;

    min-height:100vh;

    background:#f4f8fc;

}



.dashboard-sidebar{

    width:260px;

    background:var(--primary);

    padding:35px 25px;

    color:white;

}



.dashboard-sidebar img{

    width:160px;

    margin-bottom:50px;

}



.dashboard-sidebar li{

    padding:18px 0;

    cursor:pointer;

    transition:.3s;

}



.dashboard-sidebar li:hover{

    color:var(--accent);

}



.dashboard-content{

    flex:1;

    padding:50px;

}



.dashboard-content h1{

    color:var(--primary);

    font-size:38px;

}



.dashboard-content p{

    color:var(--text-light);

    margin:15px 0 40px;

}



.dashboard-cards{

    display:grid;

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

    gap:25px;

}



.dashboard-card{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

}



.dashboard-card span{

    color:var(--text-light);

}



.dashboard-card strong{

    display:block;

    margin-top:15px;

    font-size:32px;

    color:var(--secondary);

}



.property-box{

    margin-top:40px;

    background:white;

    padding:35px;

    border-radius:20px;

}



.property-box h2{

    color:var(--primary);

    margin-bottom:10px;

}



.property-info{

    display:flex;

    gap:40px;

    margin-top:30px;

}



.property-info strong{

    color:var(--secondary);

}

/* =========================================
   OWNER PAGE HERO
========================================= */

.owner-hero{

    height:100vh;

    min-height:700px;

    background:

    url("../imagens/hero.jpg")

    center/cover no-repeat;

    position:relative;

    display:flex;

    align-items:center;

    padding-top:120px;

}


.owner-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    90deg,
    rgba(4,27,58,.80),
    rgba(4,27,58,.40)
    );

}


.owner-content{

    position:relative;

    z-index:2;

    color:white;

    max-width:750px;

}


.owner-content span{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

}


.owner-content h1{

    font-family:'Playfair Display',serif;

    font-size:55px;

    line-height:1.2;

    margin:25px 0;

}


.owner-content p{

    font-size:20px;

    line-height:1.7;

    margin-bottom:35px;

}

/* THANK YOU PAGE */

.thank-you{

min-height:100vh;

background:

linear-gradient(
135deg,
#041B3A,
#08295B
);

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}


.thank-box{

background:white;

max-width:550px;

padding:50px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

}


.thank-box img{

width:180px;

margin:0 auto 30px;

}


.check{

width:70px;

height:70px;

background:#F7B500;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:20px auto;

font-size:35px;

color:white;

}


.thank-box h1{

font-family:'Playfair Display';

color:var(--primary);

margin:20px 0;

}


.thank-box p{

color:var(--text);

line-height:1.7;

margin-bottom:15px;

}


.thank-buttons{

display:flex;

gap:15px;

justify-content:center;

margin-top:30px;

}

/* ================= ADMIN PANEL ================= */


.admin-panel{

min-height:100vh;
background:#f7f5f1;
padding:60px 20px;

}



.admin-container{

max-width:1000px;
margin:auto;

}



.admin-header{

text-align:center;
margin-bottom:40px;

}



.admin-header img{

width:180px;

}



.admin-header h1{

font-family:'Playfair Display',serif;
font-size:40px;

}



.admin-card{

background:white;
padding:35px;
border-radius:20px;
margin-bottom:30px;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.admin-card h2{

margin-bottom:25px;

}



.admin-card .input-group{

margin-bottom:15px;

}



.admin-card input,
.admin-card select{

width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:10px;
font-size:15px;

}



.owner-item{

padding:20px;
border-bottom:1px solid #eee;

}



.owner-item h3{

margin-bottom:8px;

}



.owner-item span{

font-size:14px;
color:#777;

}

.quick-actions {

display:flex;

gap:20px;

flex-wrap:wrap;

}



.action-card {

background:white;

padding:25px;

border-radius:15px;

width:220px;

text-align:center;

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

transition:0.3s;

}



.action-card:hover {

transform:translateY(-5px);

}



.action-card span {

font-size:40px;

}



.action-card h3 {

margin:15px 0 5px;

}



.action-card p {

color:#666;

}



.quick-actions a {

text-decoration:none;

color:inherit;

}

/* ===== CADASTRO DE IMOVEL ADMIN ===== */


.dashboard-content {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}



.page-header {

    width:100%;

    margin-bottom:35px;

    text-align:left;

}


.page-header h1 {

    font-size:34px;

    margin-bottom:10px;

}



.page-header p {

    color:#666;

    font-size:17px;

}




.form-card {


    width:100%;

    max-width:850px;

    background:#ffffff;

    padding:45px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,0.10);

}





.form-group {


    margin-bottom:30px;


}





.form-group label {


    display:block;

    font-size:17px;

    font-weight:600;

    margin-bottom:12px;


}





.form-group input,
.form-group select {


    width:100%;

    height:55px;

    padding:0 18px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:17px;

    background:#fff;


}




.form-group select {


    cursor:pointer;


}




.form-row {


    display:flex;

    gap:30px;

    margin-bottom:10px;


}





.form-row .form-group {


    flex:1;


}





.btn-large {


    width:100%;

    height:60px;

    margin-top:25px;

    font-size:20px;

    border-radius:14px;

    cursor:pointer;


}

.success-message {

background:#e8f8ed;

color:#187a36;

padding:18px;

border-radius:12px;

margin-bottom:25px;

font-size:17px;

font-weight:bold;

max-width:850px;

width:100%;

text-align:center;

}

/* ===== PROPRIETÁRIOS ADMIN ===== */


.owners-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:30px;

}



.owner-card{

background:white;

border-radius:18px;

padding:25px;

box-shadow:0 8px 25px rgba(0,0,0,0.08);

display:flex;

flex-direction:column;

gap:15px;

transition:0.3s;

}



.owner-card:hover{

transform:translateY(-5px);

}



.owner-avatar{

width:65px;

height:65px;

border-radius:50%;

background:#0b5ed7;

color:white;

font-size:30px;

font-weight:bold;

display:flex;

align-items:center;

justify-content:center;

}



.owner-info h2{

margin:0 0 10px;

font-size:22px;

}



.owner-info p{

margin:8px 0;

color:#555;

font-size:15px;

}



.owner-actions{

margin-top:15px;

}



.owner-actions a{

display:inline-block;

padding:10px 18px;

background:#0b5ed7;

color:white;

border-radius:10px;

text-decoration:none;

font-weight:bold;

}



.owner-actions a:hover{

opacity:0.85;

}

/* CORREÇÃO FINAL PAINEL ADMIN */

.dashboard-content{

    display:block !important;

    flex:1;

    padding:50px;

    text-align:left;

}


.page-header{

    width:100%;

    max-width:none;

    text-align:left;

    margin-bottom:35px;

}


.reservas-grid{

    width:100%;

    display:grid;

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

    gap:25px;

}


.reserva-card{

    text-align:left;

}
.dashboard-content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}


.dashboard-content > * {
    align-self: flex-start !important;
}

/* CONTEUDO ADMIN */

.admin-content{

    display:block !important;

    width:100%;

    padding:50px;

}


.admin-content .page-header{

    text-align:left;

    width:100%;

    max-width:none;

}


.reservas-grid{

    display:grid;

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

    gap:25px;

    width:100%;

}


.reserva-card{

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* =====================================
   RESERVAS ADMIN - CARDS PREMIUM
===================================== */


.reservas-grid{

    width:100%;

    display:grid;

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

    gap:25px;

    margin-top:35px;

}



.reserva-card{

    background:white;

    border-radius:20px;

    padding:30px;

    box-shadow:0 15px 35px rgba(0,0,0,0.08);

    border:1px solid #edf2f7;

    transition:.3s;

}



.reserva-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,0.12);

}



.reserva-card h2{

    color:#08295B;

    font-size:22px;

    margin-bottom:20px;

}



.reserva-card p{

    color:#607080;

    font-size:16px;

    margin:12px 0;

}



.reserva-card strong{

    color:#08295B;

}



.reserva-card p:last-child strong{

    color:#0078D7;

}




@media(max-width:1000px){


.reservas-grid{

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

}


}



@media(max-width:700px){


.reservas-grid{

    grid-template-columns:1fr;

}


}

/* ===== RESERVAS GRID CORREÇÃO ===== */

.reservas-grid{

    display:grid !important;

    grid-template-columns:repeat(3, minmax(250px, 1fr)) !important;

    gap:25px !important;

    width:100% !important;

}


.reserva-card{

    width:100% !important;

}

/* TESTE RESERVAS */

.reservas-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
}


.reserva-card {
    background: white !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* =================================
   PAGINA DE RESERVAS ADMIN
================================= */

.reservas-page{

    display:block !important;

    width:100% !important;

    padding:50px !important;

}


.reservas-page .reservas-grid{

    display:grid !important;

    grid-template-columns:repeat(3, 1fr) !important;

    gap:25px !important;

    width:100% !important;

    margin-top:30px;

}


.reservas-page .reserva-card{

    background:#ffffff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

}

/* =====================================
   CARDS DE RESERVAS ADMIN
===================================== */

.reserva-card{

    background:#ffffff;

    border-radius:22px;

    padding:30px;

    box-shadow:0 15px 35px rgba(8,41,91,0.12);

    border:1px solid #e8eef5;

    transition:.3s;

    min-height:260px;

}


.reserva-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(8,41,91,0.18);

}



.reserva-card h2{

    color:#08295B;

    font-size:22px;

    margin-bottom:25px;

}



.reserva-card p{

    color:#607080;

    font-size:16px;

    margin:15px 0;

}



.reserva-card strong{

    color:#0078D7;

}



/* STATUS */

.reserva-card p:last-child strong{

    background:#e8f5ff;

    padding:8px 15px;

    border-radius:20px;

    display:inline-block;

    font-size:14px;

}

/* ================================
   STAYFLOW ADMIN V2
================================ */


.page-actions{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}



.btn-secondary{

background:#e9eef5;

color:#08295B;

padding:12px 22px;

border-radius:10px;

font-weight:bold;

text-decoration:none;

}



.search-form{

display:flex;

gap:15px;

margin-bottom:30px;

}



.search-form input{

width:350px;

height:45px;

border-radius:10px;

border:1px solid #ddd;

padding:0 15px;

}



.owner-list{

background:white;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

overflow:hidden;

}



.owner-row{

display:flex;

align-items:center;

padding:18px 25px;

border-bottom:1px solid #eee;

gap:20px;

}



.owner-row:hover{

background:#f7fbff;

}



.owner-avatar{

width:50px;

height:50px;

border-radius:50%;

background:#0078D7;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:bold;

}



.owner-data{

flex:1;

}



.owner-data h3{

color:#08295B;

margin-bottom:5px;

}



.owner-data p{

margin:3px 0;

color:#666;

}



.owner-buttons a{

background:#08295B;

color:white;

padding:10px 18px;

border-radius:10px;

text-decoration:none;

font-weight:bold;

}

/* =====================================
   STAYFLOW ADMIN V2 - AJUSTES DE LAYOUT
===================================== */


/* Área principal */

.dashboard-content{

    flex:1;

    padding:50px;

    align-items:stretch;

}


/* Cabeçalho */

.page-header{

    width:100%;

    margin-bottom:35px;

    text-align:left;

}



/* Botões topo */

.page-actions{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



/* Busca */

.search-form{

    width:100%;

    display:flex;

    gap:15px;

    margin-bottom:35px;

}


.search-form input{

    flex:1;

    max-width:450px;

}



/* Lista proprietários */


.owner-list{

    width:100%;

    background:white;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



/* Cada usuário */


.owner-row{

    width:100%;

    display:flex;

    align-items:center;

    gap:25px;

    padding:22px 30px;

    min-height:90px;

}



/* Avatar */


.owner-avatar{

    flex:none;

}



/* Informações */


.owner-data{

    flex:1;

}



/* Botão */


.owner-buttons{

    margin-left:auto;

}



/* Espaço entre linhas */


.owner-row + .owner-row{

    margin-top:0;

}



/* Botões */

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:45px;

}

/* =========================================
   CORREÇÃO LISTA PROPRIETÁRIOS ADMIN V2
========================================= */


.dashboard-content{

    display:block !important;

    align-items:initial !important;

}



/* topo dos botões */

.page-actions{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    width:100%;

    margin-bottom:25px;

}



/* pesquisa */

.search-form{

    display:flex !important;

    flex-direction:row !important;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

}


.search-form input{

    height:45px;

    width:350px;

}





/* LISTA ENTRA ID */

.owner-list{

    width:100%;

    background:white;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.owner-row{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    width:100%;

    padding:18px 25px;

    gap:20px;

    border-bottom:1px solid #eee;

}



.owner-row:last-child{

    border-bottom:none;

}




.owner-avatar{

    flex:none;

}





.owner-data{

    flex:1;

}



.owner-buttons{

    margin-left:auto;

}



.owner-buttons a{

    background:#0078D7;

    color:white;

    padding:10px 20px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

}

/* =====================================
   PROPRIETARIOS ADMIN - LISTAGEM ESTILO ENTRA ID
===================================== */


.owners-grid{

    display:grid !important;

    grid-template-columns:repeat(3,1fr) !important;

    gap:25px !important;

    width:100% !important;

    margin-top:30px;

}



.owner-card{

    background:white !important;

    border-radius:20px !important;

    padding:25px !important;

    box-shadow:0 10px 30px rgba(8,41,91,.10) !important;

    border:1px solid #e8eef5 !important;

    display:flex !important;

    flex-direction:column !important;

    gap:15px !important;

    min-height:220px;

}



.owner-avatar{

    width:60px !important;

    height:60px !important;

    border-radius:50% !important;

    background:#0078D7 !important;

    color:white !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:26px !important;

    font-weight:bold !important;

}



.owner-info h2{

    color:#08295B !important;

    font-size:20px !important;

    margin-bottom:10px;

}



.owner-info p{

    color:#607080 !important;

    margin:8px 0 !important;

}



.owner-actions{

    margin-top:auto;

}



.owner-actions a{

    background:#0078D7 !important;

    color:white !important;

    padding:10px 18px !important;

    border-radius:10px !important;

    display:inline-block;

}



@media(max-width:1000px){

    .owners-grid{

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

    }

}



@media(max-width:700px){

    .owners-grid{

        grid-template-columns:1fr !important;

    }

}


/* =====================================
   PROPRIETARIOS - ESTILO MICROSOFT ENTRA ID
===================================== */


.owner-list{

    width:100%;

    background:white;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(8,41,91,.10);

    overflow:hidden;

    margin-top:30px;

}



.owner-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 25px;

    border-bottom:1px solid #edf2f7;

    transition:.3s;

}



.owner-row:hover{

    background:#f5f9ff;

}



.owner-row:last-child{

    border-bottom:none;

}



.owner-avatar{

    width:55px;

    height:55px;

    min-width:55px;

    border-radius:50%;

    background:#0078D7;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:bold;

    margin-right:20px;

}



.owner-row{

    gap:20px;

}



.owner-data{

    flex:1;

}



.owner-data h3{

    margin:0 0 6px;

    color:#08295B;

    font-size:18px;

}



.owner-data p{

    margin:4px 0;

    color:#607080;

    font-size:14px;

}



.owner-buttons a{

    background:#0078D7;

    color:white;

    padding:10px 20px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    font-size:14px;

}



.owner-buttons a:hover{

    background:#08295B;

}



/* MOBILE */

@media(max-width:700px){


.owner-row{

    flex-direction:column;

    align-items:flex-start;

}


.owner-buttons{

    width:100%;

}


.owner-buttons a{

    display:block;

    text-align:center;

}


}

.owner-hero {
    background-image: url('../images/proprietarios/hero.jpg');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   IMAGENS PÁGINA PROPRIETÁRIOS - STAYPOLO
========================================== */


/* HERO DOS PROPRIETÁRIOS */

.owner-hero {

    background-image: url('../images/proprietarios/hero.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}



/* OVERLAY PARA MELHORAR TEXTO */

.owner-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.45);

}



/* CONTEÚDO DO HERO */

.owner-content {

    position: relative;

    z-index: 2;

}



/* SEÇÕES DE IMAGEM */

.owner-image-section {

    padding: 60px 0;

}



.owner-image-section img {

    width: 100%;

    max-width: 1100px;

    height: 500px;

    object-fit: cover;

    display: block;

    margin: auto;

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

}




/* RESPONSIVO */

@media(max-width:768px){


.owner-image-section img {

    height: 300px;

}


.owner-hero {

    background-position:center;

}


}

.owner-hero {

    background-image: url('../images/proprietarios/hero.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.owner-hero {

    background-image: url('../images/proprietarios/hero.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

/* AJUSTE MENU IDIOMAS */

.nav-container {
    gap: 30px;
}


.navbar ul {
    display: flex;
    align-items: center;
    gap: 28px;
}


.navbar a {
    white-space: nowrap;
}


.language-selector {
    margin-left: 20px;
    flex-shrink: 0;
}

/* =========================================
   DASHBOARD OWNER
========================================= */


.dashboard{

    display:flex;

    min-height:100vh;

    background:#f4f8fc;

}



.dashboard-sidebar{

    width:260px;

    background:var(--primary);

    padding:35px 25px;

    color:white;

}

/* =====================================
   STAYPOLO OWNER DASHBOARD
   LAYOUT SEM SIDEBAR
===================================== */


.owner-dashboard{

    min-height:100vh;
    background:#f4f8fc;

}



.dashboard-content{

    width:100%;

    padding:50px;

    box-sizing:border-box;

}



/* CARDS PRINCIPAIS */

.dashboard-cards{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}



.dashboard-card{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(8,41,91,.10);

}



.dashboard-card span{

    color:#607080;

    font-size:15px;

}



.dashboard-card strong{

    display:block;

    margin-top:15px;

    font-size:30px;

    color:#0078D7;

}



.dashboard-card small{

    display:block;

    margin-top:10px;

    color:#777;

}



/* CAIXAS */

.property-box{

    background:white;

    margin-top:35px;

    padding:35px;

    border-radius:22px;

    box-shadow:0 15px 40px rgba(8,41,91,.10);

}



.property-box h2{

    color:#08295B;

}



.property-info{

    display:grid;

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

    gap:20px;

    margin-top:25px;

}



.property-info div{

    background:#f7f9fc;

    padding:20px;

    border-radius:15px;

}



.property-info strong{

    display:block;

    margin-top:10px;

    color:#08295B;

}




/* MOBILE */

@media(max-width:900px){


.dashboard-content{

    padding:25px;

}


.dashboard-cards{

    grid-template-columns:1fr;

}



.property-info{

    grid-template-columns:1fr;

}


}
/* =====================================
   AJUSTE FINAL OWNER DASHBOARD
===================================== */


.owner-dashboard{
    display:flex;
    min-height:100vh;
}



/* MENU LATERAL */

.dashboard-sidebar{

    width:280px;

    position:fixed;

    top:0;
    left:0;

    height:100vh;

    overflow-y:auto;

}



/* CONTEUDO */

.dashboard-content{

    margin-left:280px;

    padding:40px;

    width:calc(100% - 280px);

}



/* TITULO */

.dashboard-content h1{

    margin-top:0;

    color:#08295B;

}



/* CARDS */

.dashboard-cards{

    display:grid;

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

    gap:25px;

}



@media(max-width:900px){

.dashboard-sidebar{

    position:relative;

    width:100%;

}


.dashboard-content{

    margin-left:0;

    width:100%;

}


.dashboard-cards{

    grid-template-columns:1fr;

}


}

/* =====================================
   CORREÇÃO FINAL OWNER DASHBOARD
===================================== */

.owner-dashboard{

    display:flex;
    min-height:100vh;

}


/* MENU LATERAL */

.dashboard-sidebar{

    position:fixed;

    top:0;
    left:0;

    width:280px;

    height:100vh;

    background:#08295B;

    padding:35px 25px;

    overflow-y:auto;

    z-index:100;

}


/* CONTEÚDO AO LADO DO MENU */

.dashboard-content{

    margin-left:280px;

    width:calc(100% - 280px);

    padding:40px;

}



/* CARDS */

.dashboard-cards{

    display:grid;

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

    gap:25px;

}



/* MOBILE */

@media(max-width:900px){

    .dashboard-sidebar{

        position:relative;

        width:100%;

        height:auto;

    }


    .dashboard-content{

        margin-left:0;

        width:100%;

        padding:25px;

    }


    .dashboard-cards{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

.dashboard-sidebar{

    position:relative;

    width:100%;

}


.dashboard-content{

    margin-left:0;

    width:100%;

}


.dashboard-cards{

    grid-template-columns:1fr;

}


}

/* =====================================
   AJUSTE ESPAÇO MENU LATERAL
===================================== */

.dashboard-sidebar{

    width:260px !important;

    position:fixed;

    left:0;
    top:0;

    height:100vh;

    z-index:10;

}


.dashboard-content{

    margin-left:260px !important;

    width:calc(100% - 260px) !important;

    padding:40px !important;

}

/* =====================================
   SIDEBAR PADRÃO ADMIN / PROPRIETÁRIO
===================================== */

.dashboard-sidebar{

    width:240px;
    min-width:240px;

    height:100vh;

    background:#08295B;

    padding:25px 15px;

    color:white;

    overflow-y:auto;

}


.dashboard-content{

    flex:1;

    width:calc(100% - 240px);

    padding:30px;

    overflow-x:hidden;

}


.dashboard-sidebar h2{

    font-size:20px;

    text-align:center;

    margin-bottom:30px;

}


.menu-titulo{

    margin-top:18px;

    margin-bottom:8px;

    padding:10px 12px;

    font-size:12px;

    border-radius:10px;

    background:rgba(255,255,255,.08);

}


.dashboard-sidebar a{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:11px 14px;

    border-radius:10px;

    font-size:14px;

}


.dashboard-sidebar a:hover{

    background:rgba(255,255,255,.15);

}


.dashboard-sidebar a.active{

    background:white;

    color:#08295B;

}

/* =================================
   MENU RETRÁTIL SIDEBAR
================================= */

.submenu{

    display:none;

    list-style:none;

    padding-left:0;

}


.submenu li{

    margin-bottom:5px;

}



.submenu a{

    padding-left:25px !important;

    font-size:14px;

}

/* =====================================
   OWNER DASHBOARD PREMIUM FINAL
===================================== */


.owner-dashboard{

    display:flex;
    min-height:100vh;
    background:#f4f8fc;

}



/* SIDEBAR */

.owner-dashboard .dashboard-sidebar{

    width:260px;
    min-height:100vh;
    background:#08295B;
    padding:30px 20px;
    color:white;

}



.owner-dashboard .dashboard-sidebar h2{

    color:white;
    text-align:center;
    font-size:26px;
    margin-bottom:5px;

}



.sidebar-subtitle{

    text-align:center;
    color:#b9d0ee;
    margin-bottom:35px;

}




.dashboard-sidebar ul{

    list-style:none;
    padding:0;

}



.dashboard-sidebar li{

    margin-bottom:8px;

}



.dashboard-sidebar a{

    display:block;
    padding:13px 15px;
    color:white;
    border-radius:12px;
    transition:.3s;

}



.dashboard-sidebar a:hover{

    background:rgba(255,255,255,.15);

}




.menu-titulo{

    color:#9fb8d8;
    font-size:12px;
    margin-top:25px;
    margin-bottom:10px;
    font-weight:bold;

}






/* CONTEUDO */

.owner-dashboard .dashboard-content{

    flex:1;
    padding:35px;

}





/* HEADER */


.admin-header{

    background:white;
    border-radius:20px;
    padding:25px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 10px 30px rgba(8,41,91,.08);
    margin-bottom:30px;

}



.header-title h1{

    color:#08295B;
    margin:0 0 8px;

}



.header-title p{

    color:#607080;

}




.header-user{

    display:flex;
    align-items:center;
    gap:12px;
    background:#f4f8fc;
    padding:10px 18px 10px 10px;
    border-radius:50px;

}



.user-avatar{

    width:50px;
    height:50px;
    border-radius:50%;
    background:#0078D7;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    font-weight:bold;

}







/* CARDS */

.dashboard-cards{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-bottom:35px;

}



.dashboard-card{

    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(8,41,91,.08);
    border:1px solid #e5edf5;

}



.dashboard-card span{

    color:#607080;
    font-weight:600;

}



.dashboard-card strong{

    display:block;
    margin-top:15px;
    font-size:34px;
    color:#0078D7;

}





/* CAIXAS */

.property-box{

    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(8,41,91,.08);
    margin-bottom:30px;

}



.property-box h2{

    color:#08295B;
    margin-bottom:20px;

}




.property-box h3{

    font-size:24px;
    color:#0078D7;

}




/* INFO IMOVEL */


.property-info{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:25px;

}



.property-info div{

    background:#f4f8fc;
    padding:20px;
    border-radius:15px;

}




.property-info strong{

    color:#08295B;

}





@media(max-width:1000px){


.dashboard-cards{

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

}



.property-info{

    grid-template-columns:1fr;

}



}



@media(max-width:700px){


.owner-dashboard{

    flex-direction:column;

}


.dashboard-cards{

    grid-template-columns:1fr;

}


}