/* ========= GENERAL ========= */
*{
    
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Inter',sans-serif;
}

body{
    min-height: 100vh;
background:linear-gradient(-45deg,#020617,#0f172a,#001f3f,#020617);
background-size:400% 400%;
animation:gradientMove 15s ease infinite;
color:white;
overflow-x:hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

footer{
    width: 100%;
}

@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.logo a {
  text-decoration: none;
  color: inherit;
}

/* ========= HEADER ========= */
header{
position:fixed;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 60px;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(15px);
border-bottom:1px solid rgba(0,255,255,0.2);
z-index:1000;
}

.logo{
font-family:'Orbitron',sans-serif;
font-size:26px;
color:#00f5ff;
text-shadow:0 0 20px #00f5ff;
letter-spacing:2px;
}

nav a{
margin-left:30px;
text-decoration:none;
color:white;
transition:0.3s;
}

nav a:hover{
color:#00f5ff;
}

/* ========= HERO ========= */
.hero{
height:60vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:0 20px;
}

.hero h1{
font-family:'Orbitron',sans-serif;
font-size:52px;
margin-bottom:20px;
color:#00f5ff;
text-shadow:0 0 25px #00f5ff;
animation:fadeIn 2s ease forwards;
}

.hero p{
max-width:600px;
opacity:0.8;
margin-bottom:40px;
animation:fadeIn 3s ease forwards;
}

.cta-btn{
padding:15px 40px;
border-radius:50px;
border:none;
background:#00f5ff;
color:#020617;
font-weight:bold;
cursor:pointer;
transition:0.4s;
box-shadow:0 0 25px #00f5ff;
}

.cta-btn:hover{
transform:scale(1.1);
box-shadow:0 0 45px #00f5ff;
}

/* ========= SECTIONS ========= */
.section{
    width: 100%;
padding:120px 60px;
text-align:center;
}

.section h2{
font-family:'Orbitron',sans-serif;
font-size:34px;
margin-bottom:70px;
color:#00f5ff;
text-shadow:0 0 15px #00f5ff;
}

.cards{
    max-width: 1000px;
    margin: 0 auto;
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.card{
background:rgba(255,255,255,0.05);
padding:40px;
width:300px;
min-height: 315px;
border-radius:20px;
backdrop-filter:blur(20px);
border:1px solid rgba(0,255,255,0.2);
transition:0.5s;
transform-style:preserve-3d;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

.card:hover{
transform:rotateY(10deg) rotateX(5deg) scale(1.05);
box-shadow:0 0 40px rgba(0,255,255,0.4);
}

.card i{
font-size:40px;
margin-bottom:20px;
color:#00f5ff;
}

/* ========= ORDER FORM ========= */
#orderForm input,#orderForm select{
padding:12px;
border-radius:10px;
border:none;
}

/* ========= ADMIN PANEL ========= */
#adminDashboard table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

#adminDashboard th, #adminDashboard td{
padding:15px;
border-bottom:1px solid rgba(0,255,255,0.2);
text-align:left;
}

#adminDashboard th{
color:#00f5ff;
}

#adminDashboard tr:hover{
background:rgba(0,255,255,0.1);
}

#adminDashboard button{
padding:8px 15px;
border:none;
border-radius:8px;
background:#00f5ff;
color:#0a0f1c;
cursor:pointer;
transition:0.3s;
}

#adminDashboard button:hover{
background:#00d4ff;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}

footer{
text-align:center;
padding:30px;
background:rgba(0,0,0,0.4);
border-top:1px solid rgba(0,255,255,0.2);
opacity:0.7;
}

#adminBox{
  display:none; /* JS მართავს */
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(420px, 92vw);
  padding:32px 28px;
  border-radius:18px;

  background:rgba(0, 255, 255, 0.06);
  border:1px solid rgba(0, 255, 255, 0.22);
  box-shadow:0 0 35px rgba(0,245,255,0.35);
  backdrop-filter:blur(16px);

  text-align:left;
  z-index:2147483647;
}

#adminBox{
  transition:all 0.25s ease-in-out;
  opacity:0;
  pointer-events:none;
}
#adminBox.show{
  opacity:1;
  pointer-events:auto;
}

#adminBox h2{
  margin:0 0 18px 0;
  color:#00f5ff;
  text-shadow:0 0 12px rgba(0,245,255,0.65);
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
  font-size:22px;
}

/* Form layout */
.admin-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-field input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;

  background:rgba(2, 6, 23, 0.55);
  border:1px solid rgba(0, 255, 255, 0.22);
  color:white;

  outline:none;
  transition:0.25s;
}

.admin-field input::placeholder{
  color:rgba(255,255,255,0.55);
}

.admin-field input:focus{
  border-color:rgba(0,245,255,0.75);
  box-shadow:0 0 0 4px rgba(0,245,255,0.12);
}

/* Button */
.admin-btn{
  width:100%;
  padding:12px 16px;
  border-radius:13px;
  border:none;

  background:#00f5ff;
  color:#020617;
  font-weight:800;
  cursor:pointer;

  transition:0.25s;
  box-shadow:0 0 18px rgba(0,245,255,0.45);
}

.admin-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 28px rgba(0,245,255,0.7);
}

.admin-btn:active{
  transform:translateY(0px);
}

#adminPanel{
    display: none;
}

#refreshOrdersBtn{
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    background-color: #00f5ff;
    color: #0a0f1c;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 25px #00f5ff
}
#refreshOrdersBtn:hover{
    transform:scale(1.1);
    box-shadow:0 0 45px #00f5ff;
}

@media only screen and (max-width: 720px){
    header{
        padding: 15px 20px;
    }
    .logo{
        font-size: 14px;
    }
    nav a{
        font-size: 12px;
    }
    .hero {
        height: 100vh;
    }
    /* Compact admin orders table for small screens */
    #adminDashboard{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    #adminDashboard table{
        font-size:13px;
        min-width:600px; /* allow horizontal scroll when necessary */
    }
    #adminDashboard th, #adminDashboard td{
        padding:8px;
    }
    #adminDashboard button{
        padding:6px 10px;
        font-size:12px;
    }
}