/* ================== FONT ================== */
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url("/resources/ui/fonts/IRANSans-Bold.eot");
    src: url("/resources/ui/fonts/IRANSans-Bold.eot?#iefix") format("embedded-opentype"),
    url("/resources/ui/fonts/IRANSans-Bold.woff") format("woff");
}

@font-face {
    font-family: Vazirmatn;
    src: url("/resources/ui/fonts/Vazirmatn-Regular.woff2") format("woff2");
}

* {
    font-family: Vazirmatn;
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #120f43;
    color: #fff;
    font: 600 15px/17px Vazirmatn;
    direction: rtl;
}



/* ================== LAYOUT ================== */
.login-wrap {
    width: 100%;
    min-height: 600px;
    position: relative;
    background: url(../../images/web.png) no-repeat center;
    background-size: 75% 100%;
    box-shadow: 0 12px 15px rgba(0,0,0,.24), 0 17px 50px rgba(0,0,0,.19);
}

.login-html {
    width: 37%;
    height: 100%;
    position: absolute;
    padding: 136px 18% 0 0;
}

.login-logo {
    position: absolute;
    width: 80px;
    margin-top: -94px;
    margin-right: 10px;
}

.login-title {
    position: absolute;
    margin-top: -16%;
    margin-right: 100px;
    color: #000;
}

.image-bottom .ui-widget-content {
    background: none !important;
}


/* ================== TABS ================== */
.login-html .sign-in,
.login-html .sign-up {
    display: none;
}

.login-html .tab {
    font-size: 18px;
    margin: 0 15px 10px 0;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab {
    color: #fff;
    border-color: orange;
}

/* ================== FORMS ================== */
.login-form {
    min-height: 345px;
    position: relative;
    perspective: 1000px;
}

.sign-in-htm,
.sign-up-htm {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transition: transform .4s ease;
    transform: rotateY(180deg);
}

.login-html .sign-in:checked ~ .login-form .sign-in-htm,
.login-html .sign-up:checked ~ .login-form .sign-up-htm {
    transform: rotateY(0);
}

/* ================== GROUP ================== */
.login-form .group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center; /* کل ورودی‌ها وسط */
}

.login-form .label {
    font-size: 12px;
    color: #ffd27d;
    margin-bottom: 4px;
}

.login-form .input,
.login-form .button,
.ui-inputfield {
    width: 95%;
    padding: 11px 16px;
    border-radius: 22px;
    border: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 14px;
    transition: .25s;
    font-family: Vazirmatn;
}

.login-form .input:focus,
.ui-inputfield:focus {
    background: rgba(255,255,255,.28);
    box-shadow: 0 0 0 2px rgba(255,210,125,.35);
    outline: none;
}

/* ================== BUTTON ================== */
.login-form .button {
    background: linear-gradient(135deg,#ff9800,#ff5722);
    font-weight: bold;
    cursor: pointer;
}

.login-form .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ================== SELECT ONE MENU ================== */
.ui-selectonemenu {
    width: 100%;
    height: 38px;
    border-radius: 22px;
    background: rgba(255,255,255,.18);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.ui-selectonemenu-label {
    color: #fff;
    font-size: 13px;
    padding: 7px 14px;
    direction: rtl !important;
    text-align: right !important;
    padding-right: 16px !important;
    padding-left: 42px !important; /* جا برای فلش */
    line-height: 25px;
}

/* ================== DROPDOWN ARROW ================== */
.ui-selectonemenu-trigger {
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 10px !important;
    right: auto !important;
    width: 34px;
}

.ui-selectonemenu-trigger .ui-icon {
    display: none !important;
}

.ui-selectonemenu-trigger::before {
    transition: transform .3s ease;
    content: "▾";
    font-size: 15px;
    color: #ffb74d;
    font-weight: bold;
}

.ui-selectonemenu.ui-state-focus .ui-selectonemenu-trigger::before {
    transform: rotate(180deg);
}

/* ================== DROPDOWN PANEL ================== */
.ui-selectonemenu-panel {
    background: rgba(30,30,60,.95);
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #000;
    text-align: right;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item:hover {
    background: rgba(255,152,0,.7);
    color: #fff;
}

.ui-selectonemenu-panel .ui-state-highlight {
    background: #ff9800;
    color: #000;
}

.ui-selectonemenu,
.ui-selectonemenu.ui-state-focus {
    box-shadow: none !important;
    border: none !important;
}

.ui-selectonemenu {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.login-form .group{
    align-items:initial;
}

.image-bottom{
    width: 15%;
    height: auto;
    margin-top: 480px;
    position: absolute;
    margin-right: 20%;
}



/* ================== RESPONSIVE ================== */
@media (max-width: 1100px) {
    .login-form .input, .login-form .button, .ui-inputfield{
        width: 83%;
    }
    .login-wrap {
        background: url(../../images/tabllet.png) no-repeat center;
        background-size: 120% auto;
    }
    .login-html {
        width: 70%;
        padding: 100px 32% 0 0;
    }

    .image-bottom{
        width: 32% !important;
        height: auto !important;
        margin-top: 500px !important;
        position: absolute !important;
        margin-right: 34% !important;
    }
}

@media (max-width: 600px) {
    .login-form .input, .login-form .button, .ui-inputfield{
        width: 80% !important;
    }

    .sign-up-htm{
       height: 235px !important;
    }

    .login-wrap {
        background: url(../../images/mobile.png) no-repeat center;
        background-size: 135% auto;
        margin-top: 5% !important;
    }
    .login-html {
        width: 90%;
        padding: 25% 13% 0 0;
    }

    .login-form .input, .login-form .button, .ui-inputfield{
        width: 76% !important;
        margin: 0 !important;
    }

    .ui-selectonemenu {
        box-sizing: border-box;
    }

    .ui-selectonemenu {
        display: block;
    }

    .ui-selectonemenu-label {
        width: 100% !important;
    }

    .image-bottom{
        width: 15% !important;
        height: auto !important;
        margin-top: 495px !important;
        position: absolute !important;
        margin-right: 20% !important;
    }

    .login-title{
        margin-top:-25%;
    }
}

@media (max-width: 400px) {
    .login-html {
        width: 90%;
        padding: 31% 13% 0 0;
    }

    .login-title {
        margin-top: -25%;
    }

    .sign-up-htm{
        height: 210px !important;
    }

    .login-form .input, .login-form .button, .ui-inputfield{
        width: 86% !important;
    }

    .ui-selectonemenu-label{
        width: 100% !important;
    }

    .image-bottom{
        margin-top: 475px !important;
        margin-right: 15% !important;
    }
}

@media (max-width: 391px){
    .image-bottom{
        margin-top: 475px !important;
        margin-right: 70% !important;
    }
}

@media (max-width: 390px) {
    .login-html {
        width: 90%;
        padding: 34% 13% 0 0;
    }

    .login-title {
        margin-top: -28%;
    }

    .sign-up-htm{
        height: 210px !important;
    }

    .login-form .input, .login-form .button, .ui-inputfield{
        width: 90% !important;
    }

    .ui-selectonemenu-label{
        width: 100% !important;
    }

    .image-bottom{
        margin-top: 470px !important;
        margin-right: 15% !important;
    }
}

@media (max-width: 360px) {
    .login-html {
        width: 90%;
        padding: 38% 13% 0 0;
    }
}

@media (hover: none) {
    .login-form .button:active {
        transform: scale(0.98);
        box-shadow: 0 4px 12px rgba(0,0,0,.35);
    }

    .ui-selectonemenu-panel .ui-selectonemenu-list-item:active {
        background: #ff9800;
        color: #000;
    }


}

.login-form .input:focus,
.ui-inputfield:focus {
    background: rgba(255,255,255,.28);
    box-shadow: 0 0 0 2px rgba(255,210,125,.35);
}