/* ROLE PAGE */
.role-container{
    background:#FFE5B4;
    min-height:100vh;              /* height fix */
    display:flex;                  /* 🔥 center mate */
    flex-direction:column;
    justify-content:center;        /* vertical center */
    align-items:center;            /* horizontal center */
    padding:20px;
    text-align:center;
}

.role-title{
    color:#2D2474;
    margin-bottom:40px;
}

/* CARDS WRAPPER */
.role-cards{
    width:100%;
    max-width:420px;               /* same design */
}

/* CARD */
.role-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    border-radius:50px;
    margin-bottom:20px;
    text-decoration:none;
    color:white;
}

/* ICON */
.icon{
    font-size:28px;
}

/* TEXT */
.text{
    text-align:left;
    flex:1;
    margin-left:15px;
}

.text h3{
    margin:0;
}

.text p{
    font-size:14px;
    margin:3px 0 0;
}

/* ARROW */
.arrow{
    background:white;
    color:#333;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* OWNER CARD */
.owner-card{
    background:#FF9F80;
}

/* EMPLOYEE CARD */
.employee-card{
    background:#2D2474;
}

/* ✅ Responsive */
@media(max-width:500px){
    .role-cards{
        max-width:100%;
    }

    .role-card{
        padding:15px;
    }

    .text p{
        font-size:13px;
    }
}

/* REGISTER / LOGIN / PROFILE PAGE remain same */


/* REGISTER PAGE --------------------------------------------*/

.register-container{
width:420px;
margin:80px auto;
background:white;
padding:40px;
border-radius:20px;
text-align:center;
color:#333;
}

.register-container h2{
margin-bottom:20px;
color:#2D2474;
}

.register-container input{
width:100%;
padding:12px;
margin-bottom:15px;
border-radius:8px;
border:1px solid #ccc;
}

.register-container label{
display:block;
text-align:left;
font-size:14px;
margin-bottom:5px;
}

.register-container button{
width:100%;
padding:14px;
background:#2D2474;
color:white;
border:none;
border-radius:30px;
font-size:16px;
cursor:pointer;
}

.login-link{
margin-top:15px;
}

.login-link a{
color:#2D2474;
text-decoration:none;
font-weight:bold;
}


/* LOGIN PAGE ---------------------------------------*/

.login-container{
width:400px;
margin:120px auto;
background:white;
padding:40px;
border-radius:20px;
text-align:center;
color:#333;
}

.login-container h2{
color:#2D2474;
margin-bottom:25px;
}

.login-container input{
width:100%;
padding:12px;
margin-bottom:15px;
border-radius:8px;
border:1px solid #ccc;
}

.login-container button{
width:100%;
padding:14px;
background:#2D2474;
color:white;
border:none;
border-radius:30px;
font-size:16px;
cursor:pointer;
}

.forgot{
margin-top:10px;
}

.forgot a{
color:#2D2474;
font-size:14px;
text-decoration:none;
}

.login-link{
margin-top:15px;
}

.login-link a{
color:#2D2474;
font-weight:bold;
text-decoration:none;
}




/* PROFILE PAGE */

form{
width:500px;
margin:50px auto;
background:white;
padding:30px;
border-radius:15px;
}

form label{
display:block;
margin-top:10px;
}

form input, form textarea{
width:100%;
padding:10px;
margin-top:5px;
border:1px solid #ccc;
border-radius:6px;
}

form button{
margin-top:20px;
width:100%;
padding:12px;
background:#2D2474;
color:white;
border:none;
border-radius:25px;
}