@font-face {
        font-family: "Ordibehesht";
        src: url(fonts/Ordibehesht.TTF) format("TTF");
        font-weight: normal;
        font-display: swap;
      }		
* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    background: transparent;
}
body {
	font-family: "Ordibehesht";
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
	background-attachment: fixed;
}

.header {
	width: 100%;
	position: fixed;
	background-color: #f0c80f;
	border-radius: 0 0 16px 16px;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	top: 0;
	box-sizing: border-box;
	z-index: 1;
}

.footer {
	width: 100%;
	position: fixed;
	background-color: #f0c80f;
	border-radius: 16px 16px 0 0;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	bottom: 0;
	box-sizing: border-box;
	z-index: 1;
}
.main {
    width: 90%;
    color: white;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    align-items: center;
	justify-content: center;
	margin: 20% 0;
}



h1 {
	width: 100%;
	color: #fff;
	font-size:1.2rem;
	text-align: center;
}

.btn {
	width: 100%;
	padding: 1rem;
	text-align: center;
	border-radius: 16px;
    border: 1px solid #333;
}

.btn:hover {
	color: #fff;
    background: #333;
}

.txt-box {
	width: 50%;
	border-radius: 16px;
	padding: 1rem;
	border: #f0c80f 1px solid;
	color: #fff;
	text-align: center;
	font-size: 1rem;
}
#phoneInput{
	width: 100%;
}
.loader {
            border: 16px solid #f3f3f3; /* خاکی روشن */
            border-top: 16px solid #3498db; /* رنگ آبی */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
            display: none; /* مخفی کردن انیمیشن به صورت پیش‌فرض */
  margin: 20px auto;
}

  @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
}


.survey-box {
    width: 100%;
    max-width: 1000px;
    padding: 2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5), -8px -8px 15px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.survey-box h3 {
    color: #f0c80f;
    margin: 2rem 0;
	width: 100%;
}

.t {
    color: #f0c80f;
    margin: 2rem 0;
	width: 100%;
}


.steps {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, transparent 50%, #f0c80f 50%, #f0c80f calc(50% + 3px), transparent calc(50% + 3px));
    position: relative;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.step.active {
    background: #f0c80f;
    color: #000;
    border: 2px solid #fff;
}

.step:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.7);
}

.step-content {
    position: relative;
    padding-top: 50px; /* فاصله دادن به محتویات زیر دکمه‌ها */
    display: none; 
}

.step-content.active {
    display: block;
}

.checkbox-container {
    width: 100%;
display: flex;
flex-flow: row wrap;
gap: 1rem;
justify-content: start;
align-items: center;
}


.checkbox-item {
	width: 23%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #fff;
    padding: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.checkbox-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 5px;
}

.checkbox-item.selected {
    border: 2px solid #f0c80f;
    background: rgba(240, 200, 15, 0.1);
}

.checkbox-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.hidden-input {
    opacity: 0; /* رادیو باتن‌ها پنهان می‌شوند ولی قابل انتخاب هستند */
    position: absolute; /* اطمینان از اینکه رادیو باتن‌ها در همان مکان قرار می‌گیرند */
    pointer-events: auto; /* اطمینان از اینکه رادیو باتن‌ها قابل انتخاب هستند */
}

.error-msg {
    margin-top: 10px;
    color: red;
    font-size: 14px;
}

button {
    background-color: #f0c80f;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    color: black;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #e0b70f;
}

.buttons {
    display: flex;
    justify-content: space-between;
}

/* برای مرحله اول که دکمه "بعدی" تنها وجود دارد */
.buttons {
    justify-content: center; /* قرار دادن دکمه "بعدی" در سمت چپ */
}


.confirm-btn {
    display: none; /* مخفی کردن دکمه تایید */
}

        .numpad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
            margin: 0 auto;
        }
        .numpad button {
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f0f0f0;
            transition: background-color 0.2s step-end;
        }
        .numpad button:hover {
            background-color: #e0b70f;
        }



.result {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.result h3 {
    margin-top: 0;
}

.result img {
    max-width: 200px;
    height: auto;
    margin-bottom: 15px;
}

.result p {
    font-size: 16px;
}

.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 8px;
    height: 20px;
    margin-top: 10px;
}

.progress {
    height: 100%;
    background-color: #4caf50;
    border-radius: 8px;
}

.highest-vote {
    background-color: #f9f9f9;
    padding: 20px;
    margin-top: 30px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.highest-vote h2 {
    margin-top: 0;
    color: #4caf50;
}

@media only screen and (max-width: 1000px) {

body{
	height: auto;
}
.checkbox-container {
	justify-content: center;
}
.checkbox-item {
	width: 40% !important;
}
}