/* =========================================================
   FONT
========================================================= */

@font-face {

    font-family: "IRANSansLocal";

    src:
        url("../Font/IRANSans_Medium.ttf")
        format("truetype");

    font-weight: 400;

    font-style: normal;

    font-display: swap;
}


/* =========================================================
   FONT GLOBAL
========================================================= */

html,
body,
button,
input,
textarea,
select,
.swal2-container,
.swal2-popup {

    font-family:
        "IRANSansLocal",
        Tahoma,
        Arial,
        sans-serif !important;
}


/* ===== Reset ===== */
@font-face {

   font-family: IRANSans;
   src: url("../Fonts/IRANSansXFaNum-Medium.ttf");
 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: IRANSans;
}

/* ===== Background Animation ===== */

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

/* ===== Login Box ===== */
.login-box {
    width: 100%;
    max-width: 360px;
    padding: 35px 30px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    animation: fadeUp 0.8s ease;
}

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

.login-box h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #222;
}

/* ===== Inputs ===== */
.input-group {
    margin-bottom: 18px;
}

.input-group input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    outline: none;
    transition: 0.3s;
}

.input-group input:focus {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

/* ===== Button ===== */
.login-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    background: #d24545;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

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

/* ===== Extra ===== */
.extra {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.extra a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
    .login-box {
        margin: 0 15px;
        padding: 30px 20px;
    }
}
/* لوگو بالای باکس */
.logo-container {
    text-align: center;
    margin-bottom: 20px;
    animation: fadeDown 0.8s ease;
}

.logo-img {
    width: 157px;
    height: 110px;
    border-radius: 0%;
}

/* انیمیشن لوگو */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    font-family: IRANSans;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f4f8;
  }

  .input-container {
    position: relative;
    width: 350px;
  }

  input {
      font-family: IRANSans;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 10px;
    outline: none;
    text-align: center; /* متن وسط‌چین */
    transition: all 0.3s ease;
    background: #fff;
    direction: rtl; /* پشتیبانی از فارسی */
  }

  /* انیمیشن هنگام فعال شدن */
  input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
    transform: scale(1.05);
  }

  label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
    text-align: center;
  }

  /* وقتی input فعال یا پر شده است */
  input:focus + label,
  input:not(:placeholder-shown) + label {
    top: -10px;
    font-size: 12px;
    color: #4CAF50;
    background: #fff;
    padding: 0 5px;
  }
  
 


/* =========================================================
   LOGIN DIALOG
========================================================= */

.swal2-container {

    direction: rtl !important;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;
}


/* =========================================================
   POPUP
========================================================= */

.login-dialog-popup {

    width: 400px !important;

    max-width:
        calc(100% - 28px) !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 24px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .22) !important;

    direction: rtl !important;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;

    animation:
        loginDialogShow
        .32s
        cubic-bezier(.2,.8,.2,1)
        both;
}


/* =========================================================
   حذف فاصله پیش فرض
========================================================= */

.login-dialog-container {

    margin: 0 !important;

    padding: 0 !important;

    width: 100% !important;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;
}


/* =========================================================
   کارت اصلی
========================================================= */

.login-dialog {

    position: relative;

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 72%,
            #fffafa 100%
        );
}


/* =========================================================
   نوار بالایی
========================================================= */

.login-dialog-top {

    width: 100%;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #bf3838,
            #d24545,
            #e15b5b
        );
}


/* =========================================================
   دکمه بستن
========================================================= */

.login-dialog-close {

    position: absolute;

    top: 17px;

    left: 17px;

    width: 34px;

    height: 34px;

    padding: 0;

    border: none;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #f7f7f7;

    color:
        #8c8c8c;

    cursor: pointer;

    font-size: 15px;

    transition:
        all .2s ease;

    z-index: 5;
}

.login-dialog-close:hover {

    background:
        rgba(210, 69, 69, .10);

    color:
        #d24545;

    transform:
        rotate(90deg);
}


/* =========================================================
   محتوا
========================================================= */

.login-dialog-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding:
        34px 30px 29px;
}


/* =========================================================
   آیکون
========================================================= */

.login-dialog-icon {

    position: relative;

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff3f3,
            #fde8e8
        );

    color:
        #d24545;

    font-size: 29px;

    margin-bottom: 20px;

    box-shadow:
        0 10px 28px
        rgba(210, 69, 69, .13);
}


/* حلقه دور آیکون */

.login-dialog-icon::before {

    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid
        rgba(210, 69, 69, .14);

    border-radius: 50%;
}


/* نقطه کوچک تزئینی */

.login-dialog-icon::after {

    content: "";

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #d24545;

    top: 4px;

    right: 9px;

    box-shadow:
        0 0 0 5px
        rgba(210, 69, 69, .07);
}


/* =========================================================
   عنوان
========================================================= */

.login-dialog-title {

    width: 100%;

    text-align: center;

    color:
        #252525;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;

    font-size:
        20px;

    font-weight:
        800;

    line-height:
        1.8;

    margin-bottom:
        11px;
}


/* =========================================================
   پیام
========================================================= */

.login-dialog-message {

    width: 100%;

    box-sizing: border-box;

    padding:
        13px 17px;

    border-radius:
        13px;

    background:
        #fafafa;

    border:
        1px solid
        #eeeeee;

    color:
        #666666;

    text-align:
        center;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;

    font-size:
        13.5px;

    font-weight:
        500;

    line-height:
        2.05;

    direction:
        rtl;

    unicode-bidi:
        plaintext;

    margin-bottom:
        20px;
}


/* =========================================================
   دکمه
========================================================= */

.login-dialog-button {

    width: 100%;

    height: 48px;

    border: none;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background:
        linear-gradient(
            135deg,
            #d24545,
            #c63d3d
        );

    color:
        #ffffff;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif !important;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    box-shadow:
        0 9px 22px
        rgba(210, 69, 69, .20);

    transition:
        all .2s ease;
}

.login-dialog-button:hover {

    background:
        linear-gradient(
            135deg,
            #bf3838,
            #b83232
        );

    box-shadow:
        0 12px 27px
        rgba(210, 69, 69, .27);

    transform:
        translateY(-1px);
}

.login-dialog-button:active {

    transform:
        translateY(0);

    box-shadow:
        0 6px 14px
        rgba(210, 69, 69, .18);
}

.login-dialog-button i {

    font-size:
        13px;

    opacity:
        .9;
}


/* =========================================================
   انیمیشن ورود
========================================================= */

@keyframes loginDialogShow {

    from {

        opacity:
            0;

        transform:
            translateY(18px)
            scale(.96);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   موبایل
========================================================= */

@media (max-width: 480px) {

    .login-dialog-popup {

        width:
            calc(100% - 24px) !important;

        border-radius:
            21px !important;
    }


    .login-dialog-content {

        padding:
            29px 21px 22px;
    }


    .login-dialog-close {

        top:
            13px;

        left:
            13px;

        width:
            31px;

        height:
            31px;
    }


    .login-dialog-icon {

        width:
            68px;

        height:
            68px;

        font-size:
            26px;

        margin-bottom:
            17px;
    }


    .login-dialog-title {

        font-size:
            18px;

        margin-bottom:
            9px;
    }


    .login-dialog-message {

        padding:
            12px 13px;

        font-size:
            12.5px;

        line-height:
            2;
    }


    .login-dialog-button {

        height:
            46px;

        font-size:
            13.5px;
    }
}