:root{

  --main-color:#ff3d00;

  --second-color:#0d47a1;

  --gold-color:#ffc107;

  --bg-color:#f5f5f5;

  --text-color:#222;

  --white:#fff;
}



body{

  margin:0;
  padding:0;

  background:var(--bg-color);

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

  direction:rtl;
}



.container{

  width:90%;

  max-width:450px;

  margin:auto;

  margin-top:30px;

  margin-bottom:30px;
}



.card{

  background:var(--white);

  padding:20px;

  border-radius:25px;

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



.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.logo img{
    display:none;
    max-width:100%;
    width:auto;
    height:auto;
}

.logo img.loaded{
    display:block;
}


.app-text{

  text-align:center;

  color:#777;

  margin-bottom:20px;

  font-size:15px;
}



.title{

  text-align:center;

  color:var(--second-color);

  font-size:24px;

  margin-bottom:20px;
}



input,
select{

  width:100%;

  padding:14px;

  margin-top:12px;

  border:1px solid #ddd;

  border-radius:14px;

  box-sizing:border-box;

  font-size:15px;

  background:white;

  outline:none;

  font-family:'Cairo',sans-serif;
}



input:focus,
select:focus{

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

.day-row{
background:#f8f8f8;
padding:14px;
border-radius:16px;
margin-bottom:12px;
}

.closed-store{
opacity:.55;
filter:grayscale(100%);
background:#dcdcdc !important;
}

.closed-store{
opacity:.55;
filter:grayscale(100%);
background:#dcdcdc !important;
pointer-events:none;
transition:.3s;
}

.store-status{
margin-top:10px;
display:flex;
align-items:center;
gap:7px;
font-size:13px;
font-weight:bold;
width:max-content;
padding:6px 12px;
border-radius:14px;
background:#f3f3f3;
}

.status-dot{
width:11px;
height:11px;
border-radius:50%;
flex-shrink:0;
}

.open-dot{
background:#00c853;
box-shadow:0 0 10px rgba(0,200,83,.7);
}

.closed-dot{
background:#ff1744;
box-shadow:0 0 10px rgba(255,23,68,.7);
}

.open-text{
color:#00a844;
}

.closed-text{
color:#c40000;
}


.day-name{
display:block;
font-size:15px;
font-weight:bold;
margin-bottom:10px;
color:#333;
}

.time-selects{
display:flex;
align-items:center;
gap:10px;
}

.time-selects select{
flex:1;
padding:12px;
border-radius:12px;
border:1px solid #ddd;
background:white;
font-size:15px;
outline:none;
}

.time-separator{
font-weight:bold;
color:#ff6600;
font-size:15px;
white-space:nowrap;
}
.contact-admin-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
max-width:260px;
margin:18px auto 0;
padding:14px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff !important;
border-radius:16px;
font-size:16px;
font-weight:800;
text-decoration:none !important;
box-shadow:0 8px 20px rgba(37,211,102,.25);
transition:.3s;
}

.contact-admin-btn:hover{
transform:translateY(-2px);
}

.contact-admin-btn i{
font-size:20px;
}

button{

  width:100%;

  padding:14px;

  margin-top:15px;

  border:none;

  border-radius:14px;

  background:linear-gradient(

    45deg,

    var(--main-color),

    #ff7043

  );

  color:white;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  transition:0.3s;

  font-family:'Cairo',sans-serif;
}



button:hover{

  transform:scale(1.02);
}



.link{

  text-align:center;

  margin-top:15px;
}



.link a{

  color:var(--main-color);

  text-decoration:none;

  font-weight:bold;

  cursor:pointer;
}



.section{

  display:none;
}



.active{

  display:block;
}



.password-box{

  position:relative;

  width:100%;
}



.password-box input{

  padding-left:45px;
}



.password-box i{

  position:absolute;

  left:15px;

  top:50%;

  transform:translateY(-50%);

  color:#777;

  cursor:pointer;

  font-size:18px;
}



.map-title{

  margin-top:20px;

  color:#444;

  font-size:15px;
}



.map-box{

  width:100%;

  height:300px;

  border-radius:20px;

  overflow:hidden;

  margin-top:10px;

  border:2px solid #eee;
}



.upload-title{

  margin-top:20px;

  color:#444;

  font-size:15px;
}



.pending-icon{

  text-align:center;

  font-size:70px;

  color:var(--gold-color);

  margin-bottom:20px;
}



.pending-text{

  text-align:center;

  color:#666;

  line-height:2;
}