@font-face {
    font-family: "IRANSansWeb";
    src: url("/assets/fonts/IRANSansWeb.eot"); /* IE */
    src: url("/assets/fonts/IRANSansWeb.eot?#iefix") format("embedded-opentype"), /* IE */
    url("/assets/fonts/IRANSansWeb.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/IRANSansWeb.ttf") format("truetype"); /* Safari, Android, iOS */
    font-weight: normal;
}
* {margin:0;padding:0;box-sizing:border-box;font-family:IRANSansWeb , sans-serif;}
body{margin:0;color:#fff;line-height:1.8;overflow-x:hidden;}

/* Page Background */
.page{
    min-height:100vh;
    width:100%;
    background-image:
        linear-gradient(rgba(0,0,0,0.4), rgba(255,255,255,0.5)),
        url('../images/travel-bg.jpg');
    background-position:top center;
    /*background-repeat:no-repeat;*/
    background-size:cover;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Header */
header{
    position:fixed;
    top:0;
    width:100%;
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 40px;
    z-index:1000;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(8px);
}

nav{display:flex;align-items:center;gap:20px;}
nav ul{list-style:none;display:flex;gap:25px;}
nav a{text-decoration:none;color:#fff;font-size:15px;}
.auth a{border:1px solid #fff;padding:6px 14px;border-radius:20px;margin-right:10px;}

/* Hamburger - Mobile Left */
.hamburgerregister {
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
    position:fixed;
    top:20px;
    right:20px;
    z-index:1001;
}
.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
    position:fixed;
    top:20px;
    left:20px;
    z-index:1001;
}
.hamburger div{
    width:25px;
    height:3px;
    background:white;
    transition:0.3s;
}

/* Mobile Drawer Menu */
#mobile-menu{
    display:flex;
    flex-direction:column;
    gap:15px;
    position:fixed;
    top:0;
    right:-300px;
    width:250px;
    height:100%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    padding:70px 20px 20px 20px;
    z-index:999;
    transition:0.5s;
}
#mobile-menu.open{
    right:0;
}
#mobile-menu a{color:white;text-decoration:none;font-size:16px;}

/* Content Sections */
section{
    width:100%;
    max-width:1600px;
    margin-top:300px;
    padding:0 20px;
    display:flex;
    justify-content:center;
    opacity:0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
section.visible{
    opacity:1;
    transform: translateY(0);
}
.box{
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(8px);
    border-radius:20px;
    padding:40px;
    width: 100%;
}
h1{font-size:32px;margin-bottom:20px;}
h2{font-size:26px;margin-bottom:15px;}

.list-product {
    min-height: 15vh;
    width: 100%;
    display: flex;
    align-items: center;     /* وسط عمودی */
    justify-content: center; /* وسط افقی */
}

.page-center {
    min-height: 70vh;
    width: 100%;
    display: flex;
    align-items: center;     /* وسط عمودی */
    justify-content: center; /* وسط افقی */
}

.login-card {
    max-width: 420px;
    width: 80%;
    background:rgba(255,255,255,0.70);
    backdrop-filter:blur(8px);
    border-radius: 1.2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;

}

.profile-card {

    width: 60%;
    background:rgba(255,255,255,0.70);
    backdrop-filter:blur(8px);
    border-radius: 1.2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
    margin-top: 50px;
}

.login-title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: #5f5046;
}

.login-subtitle {
    font-size: clamp(0.8rem, 1.8vw, .9rem);
    color: #777;
}

label {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: #5f5046;
}

/* INPUT STYLE */
/* حالت عادی */
.form-control {
    background-color: #f3eee9;
    border: 1px solid #aa9787;

}

/* فوکوس یا پر بودن */
.form-control:focus,
.form-control:not(:placeholder-shown) {
    background-color: #eee6de !important;
    border-color: #8f7d6e;
    box-shadow: 0 0 0 0.2rem rgba(170, 151, 135, 0.3);
}

/* 🔥 Autofill مرورگر (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #eee6de inset !important;
    -webkit-text-fill-color: #000 !important;
    border-color: #8f7d6e;
    transition: background-color 5000s ease-in-out 0s;
}

.form-control::placeholder {
    color: #9c8b7d;
    font-size: 0.9em;
}

/* BUTTON */
.btn-login {
    background: linear-gradient(135deg, #aa9787, #8f7d6e);
    border: none;
    padding: 0.65rem;
    font-size: clamp(0.9rem, 2vw, 1rem);
    border-radius: 0.6rem;
}

.btn-login:hover {
    background: linear-gradient(135deg, #8f7d6e, #6f5f52);
}



/* Tablet */
@media(max-width:1024px){
    h1{font-size:26px;}
    h2{font-size:22px;}
    body{font-size:15px;}
    .page{
        background-size: cover;
        /*background-repeat: no-repeat;*/
        background-position: center top;
    }
    section{margin-top:250px;}
}

/* Mobile */
@media(max-width:768px){
    header{padding:0 20px;}
    nav ul{display:none;}
    .hamburger{display:flex;}
    .hamburgerregister{display:flex;}
    h1{font-size:20px;}
    h2{font-size:16px;}
    body{font-size:12px;}
    .box{padding:25px;}
    section{margin-top:200px;}
    .profile-card {
        padding: 1.2rem;
        width: 90%;
    }
}

@media (max-width: 530px) and (max-width: 481px)  {
    .page {
        background-size: contain;
        /*background-repeat: no-repeat;*/
        background-position: center top;
    }
    .profile-card {
        padding: 1.2rem;
        width: 90%;
    }
}

/* Small Mobile */
@media(max-width:480px) {
    h1{font-size:14px;}
    h2{font-size:12px;}
    body{font-size:11px;}
    .box{padding:20px;}
    section{margin-top:150px;}

    .login-card {
        padding: 1.2rem;
    }
    .page-center {
        min-height: 50vh;
    }
    .profile-card {
        padding: 1.0rem;
        width: 90%;
    }
}