.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}
.login-card {
  background-color: #FFFFFF;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin-top: 30px;
}
.login-card h2 {
  margin-bottom: 10px;
  color: #333;
}
.login-subtitle {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 25px;
}
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f1f1;
}
.input-group input {
  flex: 1;
  height: 40px;
  padding: 10px 15px;
  border: none;
  outline: none;
  background: transparent;
}
.input-icon {
  padding: 0 10px;
  color: #ff6a00;
}
.login-options {
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.login-options a {
  text-decoration: none;
  color: #ff6a00;
}
.login-btn {
  width: 100%;
  height: 50px;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background:linear-gradient(135deg,#ff6a00,#ff9f00);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.signup-link {
  margin-top: 15px;
  font-size: 0.9rem;
}
.signup-link a {
  color: #007bff;
  text-decoration: none;
}
@media (max-width: 768px) {
  .login-split-container {
    flex-direction: column;
  }
.login-left,
.login-right {
    flex: unset;
    width: 100%;
    margin-top: 20px;
  }
  .login-left img {
    height: 250px;
  }
}
.register-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}
.register-card {
  background-color: #FFFFFF;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin-top: 30px;
}
.register-card h2 {
  margin-bottom: 10px;
  color: #333;
}
.register-subtitle {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 25px;
}
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f1f1;
}
.input-group input {
  flex: 1;
  padding: 10px 15px;
  border: none;
  outline: none;
  background: transparent;
}
.input-icon {
  padding: 0 10px;
  color: #ff6a00;
}
.error-msg {
  color: red;
  font-size: 0.8rem;
  text-align: left;
  margin: -10px 0 10px 0;
}
.register-btn {
  width: 100%;
  height: 50px;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background:linear-gradient(135deg,#ff6a00,#ff9f00);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-top: 10px;
}
.register-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.login-link {
  margin-top: 15px;
  font-size: 0.9rem;
}
.login-link a {
  color: #007bff;
  text-decoration: none;
}
@media (max-width: 768px) {
  .register-split-container {
    flex-direction: column;
  }
  .register-left,
  .register-right {
    flex: unset;
    width: 100%;
    margin-top: 20px;
  }
  .register-left img {
    height: 250px;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}
.modal-content h3 {
  margin-bottom: 20px;
  color: #333;
}
.modal-content p {
  margin-bottom: 10px;
  color: #555;
}
.modal-content input {
  width: 90%;
  height: 40px;
  padding: 10px 15px;
  margin-bottom: 15px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  outline: none;
}
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.modal-btn {
  flex: 1;
  height: 50px;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  background:linear-gradient(135deg,#ff6a00,#ff9f00);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.modal-btn.cancel {
  background: #ddd;
  color: #333;
  animation: none;
}
.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.dashboard-container{
    min-height:95vh;
    background:#f5f6fa;
    display:flex;
}
.sidebar{
    width:260px;
    background:#ffffff;
    border-right:1px solid #eee;
    padding:25px 20px;
}
.sidebar h2{
    font-size:20px;
    margin-bottom:20px;
    font-weight:600;
}
.sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}
.sidebar li{
    padding:12px 15px;
    margin-bottom:8px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    transition:all 0.3s ease;
}
.sidebar li:hover{
    background:#f0f3ff;
}
.sidebar li.active{
    background:#4f6cff;
    color:#fff;
    font-weight:500;
}
.dashboard-content{
    flex:1;
    padding:25px;
    background:#f9fafc;
}
@media (max-width:1024px){
    .sidebar{
        width:220px;
        padding:20px;
    }
    .sidebar h2{
        font-size:18px;
    }
    .sidebar li{
        font-size:14px;
    }
}
@media (max-width:768px){
.dashboard-container{
        flex-direction:column;
    }
    .sidebar{
        width:94%;
        border-right:none;
        border-bottom:1px solid #eee;
        padding:10px 10px;
    }
    .sidebar h2{
        display:none;
    }
    .sidebar ul{
        display:flex;
        justify-content:space-around;
    }
    .sidebar li{
        flex:1;
        text-align:center;
        font-size:13px;
        margin:0;
        padding:10px 5px;
        border-radius:6px;
    }
    .dashboard-content{
        padding:15px;
    }
}
@media (max-width:480px){
    .sidebar li{
        font-size:12px;
        padding:8px 4px;
    }
    .dashboard-content{
        padding:12px;
    }
}
.orders-page{
padding:20px;
}
.orders-title{
font-size:24px;
margin-bottom:20px;
}
.orders-filter{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}
.orders-filter button{
padding:8px 16px;
border:none;
background:#eee;
border-radius:20px;
cursor:pointer;
}
.orders-filter button.active{
background:#4f6cff;
color:white;
}
.orders-wrapper{
display:flex;
flex-direction:column;
gap:20px;
}
.order-card{
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
flex-wrap:wrap;
}
.order-left{
display:flex;
align-items:center;
gap:15px;
}
.order-img{
width:70px;
height:70px;
border-radius:8px;
object-fit:cover;
}
.order-info h4{
margin-bottom:5px;
}
.order-price{
font-weight:600;
margin-top:5px;
}
.order-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}
.order-status{
padding:6px 14px;
border-radius:20px;
font-size:12px;
color:white;
}
.completed{
background:#2ecc71;
}
.pending{
background:#f39c12;
}
.inprogress{
background:#3498db;
}
.order-btn{
background:#4f6cff;
color:white;
border:none;
padding:7px 14px;
border-radius:6px;
cursor:pointer;
}
.address-wrapper{
padding:20px;
}
.address-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.add-address-btn{
background:#4f6cff;
color:white;
border:none;
padding:8px 15px;
border-radius:6px;
cursor:pointer;
}
.address-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.address-card{
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}
.address-actions{
margin-top:12px;
display:flex;
gap:10px;
}
.edit-btn{
background:#4f6cff;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}
.delete-btn{
background:#e74c3c;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}
@media(max-width:768px){
.order-card{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.order-right{
align-items:flex-start;
}
}
.dashboard-sidebar{
width:250px;
background:white;
padding:25px;
border-right:1px solid #eee;
}
.dashboard-sidebar ul{
list-style:none;
padding:0;
}
.dashboard-sidebar li{
padding:12px;
border-radius:8px;
cursor:pointer;
margin-bottom:8px;
}
.dashboard-sidebar li.active{
background:#4f6cff;
color:white;
}
.dashboard-summary{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-bottom:25px;
}
.summary-card{
background:white;
padding:20px;
border-radius:10px;
text-align:center;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}
.profile-page{
  padding:20px;
}
.profile-card{
  background:white;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}
.profile-avatar img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
}
.profile-details{
  flex:1;
}
.profile-view p{
  margin-bottom:8px;
}
.edit-profile-btn{
  margin-top:15px;
  background:#4f6cff;
  color:white;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  cursor:pointer;
}
.profile-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.profile-form input{
  padding:10px;
  border-radius:6px;
  border:1px solid #ddd;
}
.profile-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.save-btn{
  background:#2ecc71;
  color:white;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  cursor:pointer;
}
.cancel-btn{
  background:#e74c3c;
  color:white;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  cursor:pointer;
}
@media(max-width:768px){
  .profile-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .profile-details{
    width:100%;
  }
}