/* =========================================================
COMPANY WARRANTY
FULL SCREEN APPLICATION
========================================================= */
@font-face {
font-family: 'Vazir';
src: url('../fonts/Vazir.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vazir';
src: url('../fonts/Vazir-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vazir';
src: url('../fonts/Vazir-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vazir';
src: url('../fonts/Vazir-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vazir';
src: url('../fonts/Vazir-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
html,
body,
.warranty-page,
.warranty-page * {
font-family: 'Vazir', sans-serif;
}
/* ---------------------------------------------------------
Global Page
--------------------------------------------------------- */
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
background: #ffffff !important;
overflow: hidden !important;
}
/* =========================================================
PAGE 1 — WELCOME PAGE
========================================================= */
/* ---------------------------------------------------------
Remove WordPress Theme Layout
ONLY when warranty application exists
--------------------------------------------------------- */
body:has(.warranty-home) {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-width: 100% !important;
background: #ffffff !important;
overflow: hidden !important;
}
/* Header */
body:has(.warranty-home) header,
body:has(.warranty-home) .site-header,
body:has(.warranty-home) .wp-site-header {
display: none !important;
}
/* Footer */
body:has(.warranty-home) footer,
body:has(.warranty-home) .site-footer,
body:has(.warranty-home) .wp-site-footer {
display: none !important;
}
/* Page Title */
body:has(.warranty-home) .entry-title,
body:has(.warranty-home) .page-title,
body:has(.warranty-home) .wp-block-post-title,
body:has(.warranty-home) .post-title {
display: none !important;
}
/* ---------------------------------------------------------
Remove WordPress Containers
--------------------------------------------------------- */
body:has(.warranty-home) main,
body:has(.warranty-home) #page,
body:has(.warranty-home) .site,
body:has(.warranty-home) .site-content,
body:has(.warranty-home) .content-area,
body:has(.warranty-home) .content,
body:has(.warranty-home) .entry-content,
body:has(.warranty-home) .page-content,
body:has(.warranty-home) .wp-site-blocks,
body:has(.warranty-home) .is-layout-constrained,
body:has(.warranty-home) .is-layout-flow {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Warranty Application
--------------------------------------------------------- */
.warranty-home {
position: relative;
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 24px !important;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff !important;
direction: rtl;
overflow: hidden !important;
isolation: isolate;
}
/* ---------------------------------------------------------
Main Application Banner
--------------------------------------------------------- */
.warranty-home .banner-container {
position: relative;
width: 100% !important;
max-width: 1500px;
height: calc(100vh - 48px);
min-height: 0 !important;
margin: 0 auto;
padding: 80px 100px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
border-radius: 24px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
/* ---------------------------------------------------------
Logo
--------------------------------------------------------- */
.warranty-home .brand-logo-container {
position: absolute !important;
top: 20px !important;
left: 20px !important;
width: 120px !important;
height: auto;
z-index: 10 !important;
}
.warranty-home .brand-logo-container img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ---------------------------------------------------------
Text
--------------------------------------------------------- */
.warranty-home .text-section {
position: relative;
flex: 1;
padding-left: 40px;
z-index: 2;
}
.warranty-home .text-section h1 {
margin: 0 0 20px;
color: #053277;
font-size: 2.8rem;
font-weight: 800;
line-height: 1.4;
}
.warranty-home .text-section p {
margin: 0 0 40px;
max-width: 90%;
color: #6b7280;
font-size: 1.15rem;
line-height: 2;
}
/* ---------------------------------------------------------
Button
--------------------------------------------------------- */
.warranty-home .btn-register {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
background: #053277;
color: #ffffff;
border-radius: 50px;
text-decoration: none;
font-family: inherit;
font-size: 1.1rem;
font-weight: 700;
box-shadow:
0 8px 20px rgba(5, 50, 119, 0.20);
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.warranty-home .btn-register:hover {
background: #04285f;
transform: translateY(-3px);
box-shadow:
0 12px 25px rgba(5, 50, 119, 0.30);
}
/* ---------------------------------------------------------
Arrow
--------------------------------------------------------- */
.warranty-home .btn-register svg {
width: 20px;
height: 20px;
margin-right: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------
Image Section
--------------------------------------------------------- */
.warranty-home .image-section {
position: relative;
flex: 1;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------------
Background Shape
--------------------------------------------------------- */
.warranty-home .blob-bg {
position: absolute;
width: 450px;
height: 450px;
background: #e8e8e8;
border-radius:
40% 60% 70% 30% /
40% 50% 60% 50%;
transform: rotate(-15deg);
z-index: 1;
}
/* ---------------------------------------------------------
Outline
--------------------------------------------------------- */
.warranty-home .blob-outline {
position: absolute;
width: 480px;
height: 480px;
border: 1.5px solid #053277;
border-radius:
50% 50% 30% 70% /
60% 40% 60% 40%;
transform:
rotate(10deg)
translate(-20px, 10px);
opacity: 0.8;
z-index: 1;
}
/* ---------------------------------------------------------
Mattress
--------------------------------------------------------- */
.warranty-home .main-product-img {
position: relative;
display: block;
z-index: 2;
width: auto;
max-width: 110%;
height: auto;
transform: translateY(20px);
filter:
drop-shadow(
0 20px 30px rgba(0, 0, 0, 0.10)
);
}
/* ---------------------------------------------------------
Shield
--------------------------------------------------------- */
.warranty-home .shield-icon-wrapper {
position: absolute;
top: 10px;
right: 40px;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
background: #ffffff;
border-radius: 50%;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.08);
z-index: 3;
}
.warranty-home .shield-icon-wrapper img {
display: block;
width: 100%;
height: auto;
}
/* =========================================================
PAGE 1 — DECORATION
========================================================= */
.warranty-home::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -310px;
right: -180px;
background:
radial-gradient(
circle,
rgba(5, 50, 119, 0.20) 0%,
rgba(5, 50, 119, 0.12) 42%,
rgba(5, 50, 119, 0.04) 68%,
transparent 72%
);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.warranty-home::after {
content: "";
position: absolute;
width: 620px;
height: 620px;
bottom: -390px;
left: -270px;
background:
radial-gradient(
circle,
rgba(5, 50, 119, 0.18) 0%,
rgba(5, 50, 119, 0.10) 42%,
rgba(5, 50, 119, 0.035) 67%,
transparent 72%
);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.warranty-home .banner-container::before {
content: "";
position: absolute;
width: 390px;
height: 390px;
top: -260px;
left: -170px;
border: 55px solid rgba(5, 50, 119, 0.07);
border-radius: 50%;
box-shadow:
0 0 0 28px rgba(5, 50, 119, 0.035);
pointer-events: none;
z-index: 0;
}
.warranty-home .banner-container::after {
content: "";
position: absolute;
width: 330px;
height: 330px;
right: -190px;
bottom: -210px;
border: 45px solid rgba(5, 50, 119, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 22px rgba(5, 50, 119, 0.035);
pointer-events: none;
z-index: 0;
}
.warranty-home .banner-container > * {
position: relative;
z-index: 2;
}
/* =========================================================
PAGE 2 — MOBILE VERIFICATION
========================================================= */
/* ---------------------------------------------------------
Remove WordPress Theme Layout
ONLY when Page 2 exists
--------------------------------------------------------- */
body:has(.warranty-page) {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
background: #ffffff !important;
overflow: hidden !important;
}
/* Header */
body:has(.warranty-page) header,
body:has(.warranty-page) .site-header,
body:has(.warranty-page) .wp-site-header {
display: none !important;
}
/* Footer */
body:has(.warranty-page) footer,
body:has(.warranty-page) .site-footer,
body:has(.warranty-page) .wp-site-footer {
display: none !important;
}
/* Page Title */
body:has(.warranty-page) .entry-title,
body:has(.warranty-page) .page-title,
body:has(.warranty-page) .wp-block-post-title,
body:has(.warranty-page) .post-title {
display: none !important;
}
/* ---------------------------------------------------------
Remove WordPress Containers
--------------------------------------------------------- */
body:has(.warranty-page) main,
body:has(.warranty-page) #page,
body:has(.warranty-page) .site,
body:has(.warranty-page) .site-content,
body:has(.warranty-page) .content-area,
body:has(.warranty-page) .content,
body:has(.warranty-page) .entry-content,
body:has(.warranty-page) .page-content,
body:has(.warranty-page) .wp-site-blocks,
body:has(.warranty-page) .is-layout-constrained,
body:has(.warranty-page) .is-layout-flow {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Page 2 Full Screen
--------------------------------------------------------- */
.warranty-page {
position: relative;
width: 100vw !important;
height: 100vh !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
direction: rtl;
background: #ffffff !important;
overflow: hidden !important;
isolation: isolate;
}
/* ---------------------------------------------------------
Page 2 Main Container
--------------------------------------------------------- */
.warranty-page .page-container {
position: relative;
width: calc(100vw - 48px);
height: calc(100vh - 48px);
max-width: 1500px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
background: #ffffff;
border-radius: 24px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.06);
overflow: hidden;
z-index: 1;
}
/* ---------------------------------------------------------
Page 2 Background Decorations
EXACTLY SAME AS PAGE 1
--------------------------------------------------------- */
.warranty-page::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -310px;
right: -180px;
background:
radial-gradient(
circle,
rgba(5, 50, 119, 0.20) 0%,
rgba(5, 50, 119, 0.12) 42%,
rgba(5, 50, 119, 0.04) 68%,
transparent 72%
);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.warranty-page::after {
content: "";
position: absolute;
width: 620px;
height: 620px;
bottom: -390px;
left: -270px;
background:
radial-gradient(
circle,
rgba(5, 50, 119, 0.18) 0%,
rgba(5, 50, 119, 0.10) 42%,
rgba(5, 50, 119, 0.035) 67%,
transparent 72%
);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Top Left Ring */
.warranty-page .page-container::before {
content: "";
position: absolute;
width: 390px;
height: 390px;
top: -260px;
left: -170px;
border: 55px solid rgba(5, 50, 119, 0.07);
border-radius: 50%;
box-shadow:
0 0 0 28px rgba(5, 50, 119, 0.035);
pointer-events: none;
z-index: 0;
}
/* Bottom Right Ring */
.warranty-page .page-container::after {
content: "";
position: absolute;
width: 330px;
height: 330px;
right: -190px;
bottom: -210px;
border: 45px solid rgba(5, 50, 119, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 22px rgba(5, 50, 119, 0.035);
pointer-events: none;
z-index: 0;
}
/* ---------------------------------------------------------
Page 2 Content Above Decorations
--------------------------------------------------------- */
.warranty-page .page-container > * {
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------
Page 2 Logo
EXACT SAME POSITION AS PAGE 1
--------------------------------------------------------- */
.warranty-page .brand-logo-container {
position: absolute !important;
top: 20px !important;
left: 20px !important;
right: auto !important;
width: 120px !important;
height: auto;
margin: 0 !important;
padding: 0 !important;
z-index: 20 !important;
}
.warranty-page .brand-logo-container img {
display: block;
width: 100% !important;
height: auto !important;
object-fit: contain;
}
/* =========================================================
PAGE 2 — RESPONSIVE
========================================================= */
@media (max-width: 992px) {
.warranty-home .banner-container {
flex-direction: column;
min-height: auto;
padding: 60px 40px;
gap: 40px;
text-align: center;
}
.warranty-home .text-section {
width: 100%;
padding-left: 0;
}
.warranty-home .text-section h1 {
font-size: 2.4rem;
}
.warranty-home .text-section p {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.warranty-home .image-section {
width: 100%;
min-height: 380px;
}
}
@media (max-width: 576px) {
.warranty-home .banner-container {
padding: 50px 20px;
border-radius: 20px;
}
.warranty-home .brand-logo-container {
width: 80px;
top: 15px;
left: 15px;
}
.warranty-home .text-section {
padding-top: 30px;
}
.warranty-home .text-section h1 {
font-size: 2rem;
}
.warranty-home .text-section p {
font-size: 1rem;
}
.warranty-home .image-section {
min-height: 300px;
}
.warranty-home .blob-bg {
width: 280px;
height: 280px;
}
.warranty-home .blob-outline {
width: 300px;
height: 300px;
}
.warranty-home .shield-icon-wrapper {
width: 60px;
height: 60px;
top: -10px;
right: 10px;
padding: 12px;
}
}
@media (max-width: 576px) {
.warranty-page .page-container {
width: 100vw !important;
height: 100vh !important;
border-radius: 0;
box-shadow: none;
}
.warranty-page .brand-logo-container {
top: 15px !important;
left: 15px !important;
width: 80px !important;
}
}
/* =========================================================
SHORT HEIGHT SCREENS
========================================================= */
@media (max-height: 700px) and (min-width: 577px) {
.warranty-home {
padding: 16px !important;
}
.warranty-home .banner-container {
height: calc(100vh - 32px);
padding: 50px 70px;
}
.warranty-home .image-section {
min-height: 300px;
}
.warranty-page {
padding: 16px !important;
}
.warranty-page .page-container {
width: calc(100vw - 32px);
height: calc(100vh - 32px);
}
}
/* =========================================================
PAGE 2 — FORCE FULL VIEWPORT
========================================================= */
html:has(.warranty-page),
body:has(.warranty-page) {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Remove every WordPress wrapper around Page 2 */
body:has(.warranty-page) #page,
body:has(.warranty-page) .site,
body:has(.warranty-page) main,
body:has(.warranty-page) .site-main,
body:has(.warranty-page) .site-content,
body:has(.warranty-page) .content-area,
body:has(.warranty-page) .content,
body:has(.warranty-page) .entry,
body:has(.warranty-page) .entry-content,
body:has(.warranty-page) .page-content,
body:has(.warranty-page) .wp-site-blocks,
body:has(.warranty-page) .is-layout-constrained,
body:has(.warranty-page) .is-layout-flow {
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* The actual Page 2 */
body:has(.warranty-page) .warranty-page {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
min-width: 100vw !important;
min-height: 100vh !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Page 2 card */
body:has(.warranty-page) .warranty-page .page-container {
width: 100% !important;
max-width: 1500px !important;
height: calc(100vh - 48px) !important;
min-height: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* =========================================================
PAGE 2 — VERIFICATION CONTENT STYLES
========================================================= */
.warranty-page .verification-wrapper {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
box-sizing: border-box;
}
/* ---------------------------------------------------------
Timeline (مراحل پیشرفت)
--------------------------------------------------------- */
.timeline-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 70px;
width: 100%;
max-width: 600px;
direction: rtl;
}
.timeline-container .step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.timeline-container .step-circle {
width: 45px;
height: 45px;
border-radius: 50%;
background: #f3f4f6;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: bold;
color: #9ca3af;
transition: all 0.4s ease;
}
/* استایل مرحله فعال (Pulse Effect) */
.timeline-container .step.active .step-circle {
background: #053277;
border-color: #053277;
color: #ffffff;
box-shadow: 0 0 15px rgba(5, 50, 119, 0.4);
transform: scale(1.15);
animation: pulse-glow 2s infinite;
}
.timeline-container .step-text {
margin-top: 15px;
font-size: 0.95rem;
color: #9ca3af;
font-weight: 500;
white-space: nowrap;
transition: all 0.3s ease;
}
.timeline-container .step.active .step-text {
color: #053277;
font-weight: 800;
}
.timeline-container .step-line {
flex: 1;
height: 2px;
background: #e5e7eb;
margin: 0 10px;
position: relative;
top: -16px;
}
/* انیمیشن درخشش برای مرحله فعلی */
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 rgba(5, 50, 119, 0.4); }
70% { box-shadow: 0 0 0 12px rgba(5, 50, 119, 0); }
100% { box-shadow: 0 0 0 0 rgba(5, 50, 119, 0); }
}
/* ---------------------------------------------------------
Form Container (فرم دریافت شماره)
--------------------------------------------------------- */
.form-container {
width: 100%;
max-width: 480px;
text-align: center;
}
.form-title {
color: #053277;
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 35px;
}
.mobile-form {
display: flex;
flex-direction: column;
align-items: flex-start;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 35px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(5, 50, 119, 0.08);
}
.input-label {
font-size: 1.05rem;
color: #4b5563;
margin-bottom: 12px;
font-weight: 700;
}
.input-group {
position: relative;
width: 100%;
margin-bottom: 30px;
}
.input-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
display: flex;
align-items: center;
transition: color 0.3s ease;
z-index: 2;
}
.input-group input {
width: 100%;
padding: 16px 20px 16px 50px;
font-family: inherit;
font-size: 1.2rem;
color: #1f2937;
background: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 14px;
box-sizing: border-box;
transition: all 0.3s ease;
text-align: left;
letter-spacing: 1px;
}
/* وقتی کاربر روی فیلد کلیک میکند */
.input-group:focus-within input {
outline: none;
border-color: #053277;
background: #ffffff;
box-shadow: 0 4px 20px rgba(5, 50, 119, 0.08);
}
.input-group:focus-within .input-icon {
color: #053277;
}
/* دکمه ارسال */
.btn-submit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: #053277;
color: #ffffff;
border: none;
border-radius: 14px;
font-size: 1.15rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(5, 50, 119, 0.2);
}
.btn-submit svg {
margin-right: 12px;
transition: transform 0.3s ease;
}
.btn-submit:hover {
background: #04285f;
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(5, 50, 119, 0.3);
}
.btn-submit:hover svg {
transform: translateX(-5px);
}
/* Responsive adjustments for mobile */
@media (max-width: 576px) {
.warranty-page .verification-wrapper {
padding: 20px;
}
.timeline-container {
margin-bottom: 40px;
transform: scale(0.85); /* کوچک کردن هوشمندانه تایم لاین در موبایل */
}
.form-title {
font-size: 1.6rem;
}
.mobile-form {
padding: 25px 20px;
}
}
/* =========================================================
اصلاحات نهایی (تراز فیلد موبایل + دایرههای پسزمینه)
========================================================= */
/* 1. آوردن متن "مثلا 0912..." دقیقا کنار آیکون گوشی */
.input-icon {
right: 18px !important;
left: auto !important;
}
.input-group input {
/* تنظیم فاصله از راست برای جا دادن آیکون و چسباندن متن به آن */
padding: 16px 55px 16px 20px !important;
text-align: right !important;
direction: rtl !important;
}
.input-group input::placeholder {
text-align: right;
}
/* 2. رفع مشکل مخفی شدن دایرهها زیر صفحه سفید */
/* ابتدا دایرههای قبلی که زیر لایه میماندند را غیرفعال میکنیم */
.warranty-page::before,
.warranty-page::after {
display: none !important;
}
/* حالا هالههای رنگی را به داخل خود کانتینر اصلی میآوریم تا کاملا مشخص باشند */
.warranty-page .verification-wrapper::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -150px;
right: -150px;
background: radial-gradient(circle, rgba(5, 50, 119, 0.10) 0%, rgba(5, 50, 119, 0.03) 50%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* این همان دایره سمت چپ پایین است که حالا به زیبایی دیده میشود */
.warranty-page .verification-wrapper::after {
content: "";
position: absolute;
width: 620px;
height: 620px;
bottom: -200px;
left: -180px;
background: radial-gradient(circle, rgba(5, 50, 119, 0.10) 0%, rgba(5, 50, 119, 0.03) 50%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* مطمئن میشویم دایرهها روی محتوای فرم و تایملاین قرار نمیگیرند */
.timeline-container,
.form-container {
position: relative;
z-index: 2;
}
/* =========================================================
استایلهای ارور و اعتبارسنجی
========================================================= */
.error-message {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
color: #ef4444;
font-size: 0.95rem;
font-weight: 700;
margin-top: 8px;
margin-bottom: 15px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
transition:
opacity 0.25s ease,
transform 0.25s ease,
max-height 0.25s ease,
margin 0.25s ease;
}
.error-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
max-height: 60px;
margin-top: 8px;
margin-bottom: 15px;
}
.error-message svg {
flex-shrink: 0;
margin-left: 8px;
}
/* افکت قرمز شدن فیلد هنگام خطا */
.input-group.has-error input {
border-color: #ef4444 !important;
background: #fef2f2 !important;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15) !important;
color: #b91c1c !important;
}
.input-group.has-error .input-icon {
color: #ef4444 !important;
}
/* انیمیشن لرزش فرم */
@keyframes shakeError {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-7px); }
40%, 80% { transform: translateX(7px); }
}
.shake-animation {
animation: shakeError 0.4s ease-in-out;
}
/* =========================================================
PAGE 3 — OTP VERIFICATION STYLES
========================================================= */
.otp-form-container {
text-align: center;
}
.otp-form {
align-items: center; /* تراز کردن تمام المانهای داخل فرم در مرکز */
padding-top: 30px;
padding-bottom: 25px;
}
.subtitle {
color: #4b5563;
font-size: 1.15rem;
margin-top: -20px;
margin-bottom: 35px;
}
.subtitle span {
font-weight: 800;
color: #053277;
letter-spacing: 1px;
}
/* استایل خانههای ورود کد */
.otp-inputs {
display: flex;
gap: 12px;
justify-content: center;
width: 100%;
margin-bottom: 25px;
}
.otp-input {
width: 55px;
height: 65px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #f9fafb;
color: #053277;
font-size: 1.8rem;
font-weight: 800;
text-align: center;
transition: all 0.3s ease;
font-family: inherit;
}
.otp-input:focus {
outline: none;
border-color: #053277;
background: #ffffff;
box-shadow: 0 4px 15px rgba(5, 50, 119, 0.1);
transform: translateY(-2px);
}
.otp-input::placeholder {
color: #9ca3af;
font-weight: 300;
}
/* استایل بخش تایمر */
.timer-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #6b7280;
font-size: 1rem;
font-weight: 500;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.timer-wrapper svg {
width: 18px;
height: 18px;
opacity: 0.7;
transition: transform 0.4s ease;
}
#countdown {
display: inline-block;
min-width: 45px;
font-weight: 700;
color: #4b5563;
}
/* استایل دکمه تایمر وقتی زمان تمام شد (قابلیت کلیک) */
.timer-wrapper.can-resend {
color: #053277;
font-weight: 800;
cursor: pointer;
background: rgba(5, 50, 119, 0.05);
padding: 8px 15px;
border-radius: 20px;
margin-top: -8px;
margin-bottom: 22px;
}
.timer-wrapper.can-resend svg {
opacity: 1;
}
.timer-wrapper.can-resend:hover {
background: rgba(5, 50, 119, 0.1);
}
.timer-wrapper.can-resend:hover svg {
transform: rotate(180deg); /* چرخش جذاب آیکون رفرش هنگام هاور */
}
/* لینک تغییر شماره */
.change-phone-link {
display: inline-block;
margin-top: 25px;
color: #053277;
font-size: 1.05rem;
font-weight: 700;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
.change-phone-link::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #053277;
bottom: -4px;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.change-phone-link:hover {
color: #04285f;
}
.change-phone-link:hover::after {
transform: scaleX(1);
}
@media (max-width: 576px) {
.otp-inputs {
gap: 8px;
}
.otp-input {
width: 45px;
height: 55px;
font-size: 1.4rem;
}
}
/* =========================================================
PAGE 3 — OTP UX / VALIDATION / ANIMATIONS
========================================================= */
/* ---------------------------------------------------------
OTP Error Message
--------------------------------------------------------- */
.otp-error-message {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
margin-top: -8px;
margin-bottom: 20px;
padding: 11px 16px;
color: #053277;
background: rgba(5, 50, 119, 0.06);
border: 1px solid rgba(5, 50, 119, 0.14);
border-radius: 10px;
font-size: 0.92rem;
font-weight: 700;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
max-height: 0;
overflow: hidden;
transition:
opacity 0.3s ease,
transform 0.3s ease,
max-height 0.3s ease,
margin 0.3s ease;
}
.otp-error-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
max-height: 60px;
margin-top: 0;
}
.otp-error-message svg {
flex-shrink: 0;
}
/* ---------------------------------------------------------
OTP Error State
--------------------------------------------------------- */
.otp-inputs.otp-error .otp-input {
border-color: rgba(5, 50, 119, 0.55);
background: rgba(5, 50, 119, 0.035);
color: #053277;
box-shadow:
0 4px 15px rgba(5, 50, 119, 0.08);
}
/* ---------------------------------------------------------
OTP Shake
--------------------------------------------------------- */
@keyframes otpShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-7px);
}
40% {
transform: translateX(7px);
}
60% {
transform: translateX(-5px);
}
80% {
transform: translateX(5px);
}
}
.otp-inputs.otp-shake {
animation: otpShake 0.45s ease;
}
/* ---------------------------------------------------------
OTP Success State
--------------------------------------------------------- */
.otp-inputs.otp-success .otp-input {
border-color: #053277;
background: rgba(5, 50, 119, 0.07);
color: #053277;
box-shadow:
0 5px 20px rgba(5, 50, 119, 0.14);
transform: translateY(-2px);
}
/* ---------------------------------------------------------
Success Animation
--------------------------------------------------------- */
@keyframes otpSuccess {
0% {
transform: scale(1);
}
45% {
transform: scale(1.06);
}
100% {
transform: scale(1);
}
}
.otp-inputs.otp-success .otp-input {
animation: otpSuccess 0.4s ease;
}
/* ---------------------------------------------------------
Submit Button Loading
--------------------------------------------------------- */
.btn-submit.is-loading {
cursor: wait;
background: #04285f;
transform: none !important;
box-shadow:
0 8px 25px rgba(5, 50, 119, 0.18);
}
.btn-submit.is-loading svg {
display: none;
}
/* ---------------------------------------------------------
Loading Spinner
--------------------------------------------------------- */
.otp-loading-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #ffffff;
border-radius: 50%;
animation:
otpSpinner 0.7s linear infinite;
}
@keyframes otpSpinner {
to {
transform: rotate(360deg);
}
}
/* ---------------------------------------------------------
Success Check
--------------------------------------------------------- */
.otp-success-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
color: #053277;
margin-left: 8px;
animation:
otpCheckAppear 0.4s ease;
}
@keyframes otpCheckAppear {
0% {
opacity: 0;
transform: scale(0.5);
}
70% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ---------------------------------------------------------
Timer
--------------------------------------------------------- */
.timer-wrapper {
user-select: none;
}
.timer-wrapper:not(.can-resend) {
cursor: default;
}
#countdown {
color: #053277;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.timer-wrapper.can-resend {
animation:
resendAppear 0.45s ease;
}
@keyframes resendAppear {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ---------------------------------------------------------
Input Filled Animation
--------------------------------------------------------- */
@keyframes otpDigitAppear {
0% {
transform: scale(0.88);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.otp-input.otp-filled {
animation:
otpDigitAppear 0.18s ease;
}
/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */
@media (max-width: 576px) {
.otp-error-message {
font-size: 0.85rem;
padding: 10px 12px;
}
.otp-inputs.otp-error .otp-input,
.otp-inputs.otp-success .otp-input {
box-shadow:
0 3px 12px rgba(5, 50, 119, 0.10);
}
}
/* =========================================================
استایلهای جدید و حرفهای خطا و موفقیت (آپدیت نهایی)
========================================================= */
/* --- ظاهر جدید و جذاب پیام خطا --- */
.otp-error-message {
background: #fff1f2 !important; /* پسزمینه ملایم قرمز */
border: 1px solid #fecdd3 !important;
color: #e11d48 !important; /* متن قرمز استاندارد */
box-shadow: 0 4px 15px rgba(225, 29, 72, 0.08) !important;
}
.otp-error-message svg {
color: #e11d48 !important;
}
.otp-inputs.otp-error .otp-input {
border-color: #f43f5e !important;
background: #fff1f2 !important;
color: #e11d48 !important;
box-shadow: 0 4px 15px rgba(244, 63, 94, 0.15) !important;
}
/* --- انیمیشن موجی (Wave) برای خانهها در حالت موفقیت --- */
.otp-inputs.otp-success .otp-input {
border-color: #10b981 !important; /* سبز زمردی زیبا */
background: #f0fdf4 !important;
color: #047857 !important;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2) !important;
animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
/* ایجاد تاخیر برای هر خانه تا موج به ترتیب اجرا شود */
.otp-inputs.otp-success .otp-input:nth-child(1) { animation-delay: 0.0s !important; }
.otp-inputs.otp-success .otp-input:nth-child(2) { animation-delay: 0.05s !important; }
.otp-inputs.otp-success .otp-input:nth-child(3) { animation-delay: 0.1s !important; }
.otp-inputs.otp-success .otp-input:nth-child(4) { animation-delay: 0.15s !important; }
.otp-inputs.otp-success .otp-input:nth-child(5) { animation-delay: 0.2s !important; }
@keyframes successPop {
0% { transform: scale(1) translateY(0); }
50% { transform: scale(1.1) translateY(-6px); background: #d1fae5; }
100% { transform: scale(1) translateY(0); }
}
/* --- تغییر رنگ و ظاهر دکمه در حالت موفقیت --- */
.btn-submit.btn-success {
background: #10b981 !important;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
animation: btnPulse 2s infinite !important;
pointer-events: none;
}
@keyframes btnPulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* انیمیشن کشیده شدن زنده آیکون تیک */
.animated-check {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: drawCheck 0.5s ease forwards;
animation-delay: 0.3s;
}
@keyframes drawCheck {
to { stroke-dashoffset: 0; }
}
/* =========================================================
اصلاح تراز آیکون و زیبایی دکمه ارسال مجدد
========================================================= */
.timer-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
direction: rtl !important;
gap: 8px !important;
transition: all 0.3s ease !important;
}
.timer-wrapper svg {
width: 17px !important;
height: 17px !important;
transform: translateY(2px) !important; /* اصلاح خطای دید عمودی با فونت فارسی */
opacity: 0.8 !important;
}
.timer-text-content {
display: flex !important;
align-items: center !important;
gap: 4px !important;
margin-top: 2px !important; /* همتراز کردن دقیق متن با مرکز آیکون */
}
#countdown {
margin-right: 4px !important;
font-weight: 800 !important;
}
/* استایل دکمه وقتی زمان تمام میشود و قابلیت کلیک دارد */
.timer-wrapper.can-resend {
background: #f0f4fa !important; /* یک پسزمینه آبی بسیار ملایم */
padding: 10px 18px !important;
border-radius: 50px !important; /* دکمه کاملاً کپسولی و گرد */
color: #053277 !important;
box-shadow: 0 4px 12px rgba(5, 50, 119, 0.05) !important;
}
.timer-wrapper.can-resend svg {
opacity: 1 !important;
}
.timer-wrapper.can-resend:hover {
background: #e4ebf5 !important;
transform: translateY(-1px) !important;
}
/* =========================================================
PAGE 4 — CUSTOMER INFO STYLES (اطلاعات مشتری)
========================================================= */
/* STREAMING_CHUNK:Styling the timeline completed state... */
/* استایل مرحله تکمیل شده در تایملاین */
.timeline-container .step.completed .step-circle {
background: #10b981; /* سبز موفقیت */
border-color: #10b981;
color: #ffffff;
transform: scale(1.05);
}
.timeline-container .step.completed .step-text {
color: #10b981;
font-weight: 700;
}
/* خط فعال بین مرحله انجام شده و مرحله فعلی */
.timeline-line.active-line {
background: #053277;
opacity: 0.5;
}
/* STREAMING_CHUNK:Styling the CSS Grid form layout... */
/* کانتینر فرم اطلاعات مشتری */
.info-form-container {
max-width: 650px !important; /* عریضتر برای جا دادن دو ستون */
}
/* شبکه گرید برای فیلدها */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* دو ستون مساوی */
gap: 20px 25px; /* فاصله عمودی و افقی بین فیلدها */
width: 100%;
margin-bottom: 30px;
margin-top: 10px;
}
/* گروه هر فیلد (لیبل بالا، اینپوت پایین) */
.input-group-vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.input-group-vertical .input-label {
font-size: 1rem;
color: #053277;
margin-bottom: 8px;
font-weight: 700;
margin-right: 5px;
}
/* اینپوتهای اصلی فرم */
.grid-input {
width: 100%;
padding: 14px 20px;
font-family: inherit;
font-size: 1.1rem;
color: #1f2937;
background: #ffffff;
border: 2px solid #d1d5db;
border-radius: 12px;
box-sizing: border-box;
transition: all 0.3s ease;
text-align: right;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.grid-input::placeholder {
color: #9ca3af;
font-weight: 400;
font-size: 0.95rem;
}
.grid-input:focus {
outline: none;
border-color: #053277;
box-shadow: 0 4px 15px rgba(5, 50, 119, 0.08);
}
/* STREAMING_CHUNK:Customizing the select dropdown arrows... */
/* استایل دهی به Select (منوی کشویی) */
.select-wrapper {
width: 100%;
position: relative;
}
.custom-select {
appearance: none; /* حذف فلش پیشفرض مرورگر */
-webkit-appearance: none;
-moz-appearance: none;
padding-left: 45px; /* فضا برای فلش سفارشی در سمت چپ */
cursor: pointer;
background-color: #ffffff;
}
.custom-select:disabled {
background-color: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
border-color: #e5e7eb;
}
/* ایجاد فلش زیبا با SVG در پسزمینه (سمت چپ) */
.select-wrapper::after {
content: "";
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
pointer-events: none; /* اجازه کلیک روی فلش برای باز شدن منو */
transition: transform 0.3s ease;
}
/* وقتی فوکوس میشود فلش میچرخد */
.custom-select:focus + .select-wrapper::after {
transform: translateY(-50%) rotate(180deg);
}
/* استایل ارور فیلدها */
.input-group-vertical.has-error .grid-input {
border-color: #f43f5e !important;
background: #fff1f2 !important;
}
.input-group-vertical.has-error .input-label {
color: #e11d48 !important;
}
/* STREAMING_CHUNK:Making the grid responsive... */
/* تنظیمات ریسپانسیو برای موبایل */
@media (max-width: 650px) {
.form-grid {
grid-template-columns: 1fr; /* تبدیل دو ستون به یک ستون */
gap: 15px;
}
.info-form-container {
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================================================
FORM SUCCESS STATE (انتقال به حالت موفقیت فرم)
========================================================= */
/* غیرفعال کردن فوکوس روی فیلدهای غیرفعال */
.form-success-state .grid-input:disabled {
background: #f0fdf4 !important; /* پسزمینه سبز ملایم */
border-color: #10b981 !important; /* حاشیه سبز */
color: #047857 !important; /* متن سبز تیره */
cursor: default;
opacity: 1; /* جلوگیری از کم رنگ شدن در حالت disabled مرورگر */
box-shadow: none;
}
/* سبز کردن آیکون فلش سلکتباکسها */
.form-success-state .select-wrapper::after {
background-image: url('data:image/svg+xml;utf8,');
}
/* =========================================================
PAGE 5 — WARRANTY CODE STYLES (کد گارانتی - مرحله ۳)
========================================================= */
/* STREAMING_CHUNK:Styling the warranty code form layout... */
/* کانتینر فرم کد گارانتی (جمع و جور تر از اطلاعات مشتری) */
.code-form-container {
max-width: 480px !important;
}
/* بزرگنمایی و وسطچین کردن فیلد کد گارانتی */
.grid-input.center-text {
text-align: center !important;
font-size: 1.35rem !important;
letter-spacing: 2px;
padding: 16px 20px;
}
/* تغییر رنگ Placeholder برای فیلد وسطچین */
.grid-input.center-text::placeholder {
letter-spacing: 0; /* فاصله حروف Placeholder طبیعی باشد */
font-size: 1.1rem;
}
/* تنظیم فاصله تیترها در مرحله ۳ */
.code-form-container .form-title {
margin-bottom: 20px;
font-size: 2.4rem;
}
.code-form-container .subtitle {
margin-bottom: 40px;
font-size: 1.25rem;
color: #4b5563;
}
/* =========================================================
PAGE - PRODUCT INFO STYLES (اطلاعات محصول)
========================================================= */
/* محدود کردن عرض فرم برای زیبایی در حالت تکستونه */
.product-form-container {
max-width: 480px !important;
}
/* فاصله بین فیلدهای فرم محصول */
.product-form .input-group-vertical {
margin-bottom: 25px;
}
/* تغییر رنگ Placeholder سلکتباکسها به خاکستری روشن (مطابق عکس) */
.product-form .custom-select:invalid {
color: #9ca3af;
}
/* بولد کردن متن لیبلها (مدل محصول: / سایز محصول:) */
.product-form .input-label {
font-size: 1.05rem;
color: #053277;
margin-bottom: 12px;
font-weight: 800;
}
/* =========================================================
WELCOME BANNER (کادر خوشآمدگویی)
========================================================= */
.welcome-banner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #f0fdf4; /* سبز بسیار ملایم */
border: 1px solid #10b981; /* حاشیه سبز زمردی */
color: #047857; /* متن سبز تیره و خوانا */
padding: 12px 24px;
border-radius: 50px; /* گوشههای کاملا گرد */
margin-bottom: 25px;
font-size: 1.05rem;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
animation: fadeDown 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.welcome-banner svg {
width: 22px;
height: 22px;
opacity: 0.9;
}
.welcome-banner strong {
font-weight: 800;
margin-left: 2px;
}
/* انیمیشن نرم ورود از بالا به پایین */
@keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-15px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* کاهش کمی فاصله تیتر اگر کادر پیام وجود داشت */
.code-form-container:has(.welcome-banner) .form-title {
margin-top: 5px;
}
/* =========================================================
PAGE 6 — TERMS & CONDITIONS STYLES (تایید شرایط)
========================================================= */
.terms-form-container {
max-width: 650px !important;
width: 100%;
display: flex;
flex-direction: column;
}
.terms-scroll-box {
width: 100%;
height: clamp(240px, 36vh, 360px);
overflow-y: auto;
background: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 14px;
padding: 20px 25px;
margin-bottom: 20px;
text-align: right;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.02);
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
box-sizing: border-box;
flex-shrink: 1;
}
.terms-scroll-box::-webkit-scrollbar {
width: 6px;
}
.terms-scroll-box::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.terms-scroll-box::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.terms-heading {
color: #053277;
font-size: 1.1rem;
font-weight: 800;
margin-top: 25px;
margin-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 8px;
}
.terms-scroll-box .terms-heading:first-child {
margin-top: 0;
}
.terms-list {
margin: 0;
padding-right: 20px;
}
.terms-list li {
color: #4b5563;
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 8px;
font-weight: 500;
}
.terms-list li::marker {
color: #053277;
}
.checkbox-container {
display: flex;
justify-content: flex-start;
width: 100%;
margin: 5px 0 18px;
flex-shrink: 0;
}
.custom-checkbox-wrapper {
display: flex;
align-items: center;
position: relative;
cursor: not-allowed;
font-size: 1.05rem;
color: #9ca3af;
font-weight: 700;
user-select: none;
transition: all 0.3s ease;
}
.custom-checkbox-wrapper.is-enabled {
cursor: pointer;
color: #053277;
}
.custom-checkbox-wrapper input {
position: absolute;
opacity: 0;
cursor: not-allowed;
height: 0;
width: 0;
}
.custom-checkbox-wrapper.is-enabled input {
cursor: pointer;
}
.checkmark {
position: relative;
height: 24px;
width: 24px;
background-color: #f3f4f6;
border: 2px solid #d1d5db;
border-radius: 6px;
margin-left: 12px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.custom-checkbox-wrapper.is-enabled .checkmark {
background-color: #f9fafb;
border-color: #d1d5db;
}
.custom-checkbox-wrapper.is-enabled:hover .checkmark {
border-color: #053277;
}
.custom-checkbox-wrapper input:checked ~ .checkmark {
background-color: #053277;
border-color: #053277;
box-shadow: 0 3px 10px rgba(5, 50, 119, 0.2);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.custom-checkbox-wrapper input:checked ~ .checkmark:after {
display: block;
animation: checkAnim 0.2s ease forwards;
}
@keyframes checkAnim {
0% {
height: 0;
width: 0;
opacity: 0;
}
100% {
height: 10px;
width: 5px;
opacity: 1;
}
}
.custom-checkbox-wrapper.has-error .checkmark {
border-color: #e11d48;
background: #fff1f2;
}
.custom-checkbox-wrapper.has-error .checkbox-text {
color: #e11d48;
}
.terms-success-container {
max-width: 550px !important;
width: 100%;
margin: 0 auto;
text-align: center;
background: #ffffff;
padding: clamp(30px, 5vh, 50px) 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(16, 185, 129, 0.1);
animation: fadeUpSuccess 0.5s ease forwards;
box-sizing: border-box;
}
.success-icon {
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
background: #d1fae5;
color: #10b981;
border-radius: 50%;
margin: 0 auto 30px;
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}
.terms-success-container .form-title {
color: #10b981;
font-size: 2rem;
margin-bottom: 15px;
}
.terms-success-container .subtitle {
color: #4b5563;
font-size: 1.1rem;
margin-bottom: 25px;
line-height: 1.6;
}
.success-message {
color: #053277;
font-weight: 700;
font-size: 1.2rem;
background: #f0f4fa;
padding: 15px;
border-radius: 10px;
display: inline-block;
}
@keyframes fadeUpSuccess {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-height: 800px) and (min-width: 577px) {
.terms-scroll-box {
height: clamp(220px, 32vh, 300px);
padding: 16px 20px;
margin-bottom: 14px;
}
.checkbox-container {
margin-bottom: 12px;
}
.terms-heading {
margin-top: 18px;
margin-bottom: 8px;
}
.terms-list li {
line-height: 1.65;
margin-bottom: 5px;
}
}
@media (max-height: 700px) and (min-width: 577px) {
.terms-scroll-box {
height: 220px;
padding: 14px 18px;
}
.checkbox-container {
margin-bottom: 10px;
}
.custom-checkbox-wrapper {
font-size: 0.95rem;
}
.checkmark {
width: 21px;
height: 21px;
}
}
@media (max-width: 576px) {
.terms-scroll-box {
height: 260px;
padding: 15px;
margin-bottom: 18px;
}
.checkbox-container {
margin-bottom: 16px;
}
.terms-success-container {
padding: 30px 20px;
}
.success-icon {
width: 70px;
height: 70px;
}
.custom-checkbox-wrapper {
font-size: 0.95rem;
}
}
/* =========================================================
ACCOUNT MENU — FINAL
========================================================= */
.account-menu-container {
position: absolute;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
z-index: 99999;
direction: rtl;
}
/* ---------------------------------------------------------
PROFILE BUTTON
--------------------------------------------------------- */
.account-menu-trigger {
width: 48px;
height: 48px;
padding: 0;
margin: 0;
border-radius: 50%;
background: #f9fafb;
border: 2px solid #e8e8e8;
color: #053277;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
z-index: 3;
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.03);
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease;
}
.account-menu-trigger svg {
width: 22px;
height: 22px;
}
/* ---------------------------------------------------------
PROFILE BUTTON — OPEN
--------------------------------------------------------- */
.account-menu-container.is-open .account-menu-trigger {
background: #053277;
border-color: #053277;
color: #ffffff;
box-shadow:
0 6px 15px rgba(5, 50, 119, 0.20);
}
/* ---------------------------------------------------------
DROPDOWN
--------------------------------------------------------- */
.account-dropdown {
position: absolute;
top: 60px;
right: 0;
width: 240px;
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 16px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
z-index: 5;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;
}
/* ---------------------------------------------------------
DROPDOWN — OPEN
--------------------------------------------------------- */
.account-menu-container.is-open .account-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* ---------------------------------------------------------
DROPDOWN HEADER
--------------------------------------------------------- */
.dropdown-header {
padding: 16px 20px;
background: #f8fafc;
border-bottom: 1px solid #e8e8e8;
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
text-align: right;
}
.dropdown-header .user-name {
color: #053277;
font-weight: 800;
font-size: 1.05rem;
margin-bottom: 4px;
}
.dropdown-header .user-mobile {
color: #374151;
font-size: 0.9rem;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
}
/* ---------------------------------------------------------
MENU LIST
--------------------------------------------------------- */
.dropdown-menu-list {
list-style: none;
margin: 0;
padding: 8px 0;
}
.dropdown-menu-list li {
margin: 0;
padding: 0;
}
.dropdown-menu-list li a {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 12px 20px;
color: #1f2937;
text-decoration: none;
font-size: 0.95rem;
font-weight: 700;
transition:
background-color 0.2s ease,
color 0.2s ease,
padding-right 0.2s ease;
}
.dropdown-menu-list li a svg {
margin-left: 12px;
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.7;
}
.dropdown-menu-list li a:hover {
background: #f0f4fa;
color: #053277;
padding-right: 25px;
}
.dropdown-menu-list li a:hover svg {
opacity: 1;
}
/* ---------------------------------------------------------
LOGOUT
--------------------------------------------------------- */
.dropdown-menu-list li:last-child a {
border-radius: 0 0 16px 16px;
}
.dropdown-menu-list li a.logout-action {
color: #e11d48;
border-top: 1px solid #f3f4f6;
margin-top: 4px;
}
.dropdown-menu-list li a.logout-action:hover {
background: #fff1f2;
color: #e11d48;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 576px) {
.account-menu-container {
top: 15px;
right: 15px;
width: 48px;
height: 48px;
}
.account-dropdown {
width: 220px;
}
}
/* =========================================
Account Dropdown - Clickable Items
========================================= */
.account-menu-container {
z-index: 99999;
}
.account-dropdown {
z-index: 100000;
pointer-events: none;
}
.account-menu-container.is-open .account-dropdown {
pointer-events: auto;
}
.account-dropdown .dropdown-menu-list {
position: relative;
z-index: 100001;
}
.account-dropdown .dropdown-menu-list li {
position: relative;
z-index: 100002;
}
.account-dropdown .dropdown-menu-list li a {
position: relative;
z-index: 100003;
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
pointer-events: auto;
}
/* =========================================================
ACCOUNT DROPDOWN — CLICK FIX
فقط رفع تداخل لایهها، بدون تغییر ظاهر
========================================================= */
.warranty-page .page-container > .account-menu-container {
position: absolute !important;
z-index: 99999 !important;
}
.warranty-page .page-container > .account-menu-container .account-dropdown {
z-index: 100000 !important;
}
.warranty-page .page-container > .account-menu-container .dropdown-menu-list,
.warranty-page .page-container > .account-menu-container .dropdown-menu-list li,
.warranty-page .page-container > .account-menu-container .dropdown-menu-list li a {
position: relative;
z-index: 100001 !important;
pointer-events: auto !important;
}
/* =========================================================
WARRANTY VERIFICATION — MOBILE RESPONSIVE
فقط موبایل
========================================================= */
@media (max-width: 576px) {
/* -----------------------------------------------------
صفحه اصلی موبایل
----------------------------------------------------- */
html:has(.warranty-page),
body:has(.warranty-page) {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body:has(.warranty-page) .warranty-page {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 100dvh !important;
padding: 12px !important;
box-sizing: border-box !important;
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
/* -----------------------------------------------------
کارت اصلی
----------------------------------------------------- */
body:has(.warranty-page) .warranty-page .page-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: calc(100dvh - 24px) !important;
margin: 0 !important;
border-radius: 20px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* -----------------------------------------------------
لوگو
----------------------------------------------------- */
.warranty-page .brand-logo-container {
display: block !important;
position: absolute !important;
top: 18px !important;
left: 18px !important;
right: auto !important;
width: 78px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 20 !important;
}
.warranty-page .brand-logo-container img {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/* -----------------------------------------------------
محتوای صفحه
----------------------------------------------------- */
.warranty-page .verification-wrapper {
width: 100% !important;
height: auto !important;
min-height: calc(100dvh - 24px) !important;
padding: 100px 20px 40px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* =====================================================
TIMELINE
===================================================== */
.warranty-page .timeline-container {
width: 100% !important;
max-width: 430px !important;
margin: 0 auto 48px !important;
padding: 0 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
direction: rtl !important;
box-sizing: border-box !important;
}
/* هر مرحله */
.warranty-page .timeline-container .step {
flex: 0 0 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
z-index: 2 !important;
}
/* دایره */
.warranty-page .timeline-container .step-circle {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 50% !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
border-width: 2px !important;
box-sizing: border-box !important;
}
/* مرحله فعال */
.warranty-page .timeline-container .step.active .step-circle {
transform: scale(1.08) !important;
box-shadow:
0 0 0 4px rgba(5, 50, 119, 0.08),
0 5px 15px rgba(5, 50, 119, 0.18) !important;
animation: mobile-timeline-pulse 2s infinite !important;
}
/* متن مرحله */
.warranty-page .timeline-container .step-text {
margin-top: 10px !important;
font-size: 0.72rem !important;
line-height: 1.5 !important;
font-weight: 500 !important;
white-space: nowrap !important;
text-align: center !important;
}
.warranty-page .timeline-container .step.active .step-text {
font-weight: 800 !important;
}
/* خطوط بین مراحل */
.warranty-page .timeline-container .step-line {
flex: 1 1 auto !important;
width: auto !important;
min-width: 18px !important;
height: 2px !important;
margin: 20px 6px 0 !important;
position: relative !important;
top: 0 !important;
background: #e5e7eb !important;
border-radius: 999px !important;
}
/* =====================================================
FORM
===================================================== */
.warranty-page .form-container {
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* عنوان */
.warranty-page .form-title {
font-size: 1.45rem !important;
line-height: 1.7 !important;
margin: 0 0 22px !important;
font-weight: 800 !important;
}
/* خود باکس فرم */
.warranty-page .mobile-form {
width: 100% !important;
padding: 24px 20px !important;
box-sizing: border-box !important;
border-radius: 18px !important;
}
/* عنوان فیلد */
.warranty-page .input-label {
font-size: 0.9rem !important;
margin-bottom: 10px !important;
}
/* فیلد شماره */
.warranty-page .input-group {
width: 100% !important;
margin-bottom: 22px !important;
}
.warranty-page .input-group input {
width: 100% !important;
min-height: 52px !important;
padding: 14px 55px 14px 16px !important;
font-size: 1rem !important;
border-radius: 13px !important;
box-sizing: border-box !important;
}
/* آیکون */
.warranty-page .input-icon {
right: 16px !important;
}
/* دکمه */
.warranty-page .btn-submit {
width: 100% !important;
min-height: 52px !important;
padding: 14px 16px !important;
font-size: 1rem !important;
border-radius: 13px !important;
box-sizing: border-box !important;
}
/* خطای فرم */
.warranty-page .error-message {
width: 100% !important;
box-sizing: border-box !important;
font-size: 0.8rem !important;
line-height: 1.6 !important;
text-align: right !important;
}
/* -----------------------------------------------------
انیمیشن تایملاین
----------------------------------------------------- */
@keyframes mobile-timeline-pulse {
0% {
box-shadow:
0 0 0 0 rgba(5, 50, 119, 0.25);
}
70% {
box-shadow:
0 0 0 7px rgba(5, 50, 119, 0);
}
100% {
box-shadow:
0 0 0 0 rgba(5, 50, 119, 0);
}
}
}
/* =========================================================
گوشیهای خیلی کوچک
========================================================= */
@media (max-width: 380px) {
body:has(.warranty-page) .warranty-page {
padding: 8px !important;
}
.warranty-page .brand-logo-container {
top: 14px !important;
left: 14px !important;
width: 68px !important;
}
.warranty-page .verification-wrapper {
padding: 88px 14px 32px !important;
}
.warranty-page .timeline-container {
margin-bottom: 40px !important;
}
.warranty-page .timeline-container .step-circle {
width: 37px !important;
height: 37px !important;
min-width: 37px !important;
min-height: 37px !important;
font-size: 0.85rem !important;
}
.warranty-page .timeline-container .step-text {
font-size: 0.65rem !important;
}
.warranty-page .timeline-container .step-line {
min-width: 10px !important;
margin-left: 4px !important;
margin-right: 4px !important;
}
.warranty-page .form-title {
font-size: 1.3rem !important;
}
.warranty-page .mobile-form {
padding: 20px 16px !important;
}
}
/* =========================================================
MOBILE — FIX UNNECESSARY PAGE HEIGHT / SCROLL
========================================================= */
@media (max-width: 576px) {
html:has(.warranty-page),
body:has(.warranty-page) {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body:has(.warranty-page) .warranty-page {
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
}
body:has(.warranty-page) .warranty-page .page-container {
height: auto !important;
/* مهم: ارتفاع اجباری داخلی حذف میشود */
min-height: 0 !important;
overflow: visible !important;
}
.warranty-page .verification-wrapper {
height: auto !important;
/* مهم: این هم نباید صفحه را بیدلیل بلند کند */
min-height: 0 !important;
overflow: visible !important;
}
}
/* =========================================================
PAGE — MY WARRANTIES / ACTIVE WARRANTIES LIST
========================================================= */
/* ---------------------------------------------------------
Main Container
--------------------------------------------------------- */
.warranty-page .list-page-container {
max-width: 1000px !important;
}
/* ---------------------------------------------------------
Table Wrapper
--------------------------------------------------------- */
.warranty-page .list-page-container .table-wrapper {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 120px 20px 40px;
box-sizing: border-box;
position: relative;
z-index: 10;
}
/* ---------------------------------------------------------
Main White Card
--------------------------------------------------------- */
.warranty-page .list-page-container .table-container-box {
width: 100%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(5, 50, 119, 0.08);
padding: 35px 40px;
box-sizing: border-box;
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.warranty-page .table-header-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
margin-bottom: 35px;
border-bottom: 2px solid #e8e8e8;
padding-bottom: 25px;
}
.warranty-page .table-header-section h2 {
color: #053277;
font-size: 2.2rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 5px;
}
.warranty-page .table-header-section p {
color: #555555;
font-size: 1.1rem;
line-height: 1.8;
margin: 0;
}
/* ---------------------------------------------------------
New Warranty Button
--------------------------------------------------------- */
.warranty-page .btn-new-warranty {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
background: #053277;
color: #ffffff;
border: 2px solid #053277;
padding: 12px 24px;
border-radius: 12px;
font-size: 1rem;
font-weight: 800;
line-height: 1.5;
text-decoration: none;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.warranty-page .btn-new-warranty svg {
flex-shrink: 0;
}
.warranty-page .btn-new-warranty:hover {
background: #ffffff;
color: #053277;
border-color: #053277;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(5, 50, 119, 0.15);
}
.warranty-page .btn-new-warranty:active {
transform: translateY(0);
}
/* ---------------------------------------------------------
Responsive Table Wrapper
--------------------------------------------------------- */
.warranty-page .responsive-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------------------------------------------------------
Desktop Table
--------------------------------------------------------- */
.warranty-page .warranty-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 12px;
text-align: right;
table-layout: auto;
}
.warranty-page .warranty-table thead th {
color: #777777;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.6;
padding: 0 20px 10px;
border: none;
white-space: nowrap;
}
.warranty-page .warranty-table tbody tr {
background: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.warranty-page .warranty-table tbody tr:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(5, 50, 119, 0.06);
}
.warranty-page .warranty-table td {
padding: 18px 20px;
font-size: 1.05rem;
line-height: 1.7;
color: #333333;
vertical-align: middle;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
background: #ffffff;
}
.warranty-page .warranty-table td:first-child {
border-radius: 0 14px 14px 0;
border-right: 1px solid #e8e8e8;
}
.warranty-page .warranty-table td:last-child {
border-radius: 14px 0 0 14px;
border-left: 1px solid #e8e8e8;
}
/* ---------------------------------------------------------
Table Text
--------------------------------------------------------- */
.warranty-page .warranty-table .td-bold {
font-weight: 800;
color: #053277;
}
.warranty-page .warranty-table .td-counter {
font-weight: 800;
color: #777777;
font-size: 1.1rem !important;
text-align: center;
}
.warranty-page .warranty-table .td-date {
color: #777777;
white-space: nowrap;
}
/* ---------------------------------------------------------
Warranty Code
--------------------------------------------------------- */
.warranty-page .badge-code {
display: inline-block;
background: #f8f8f8;
border: 1px solid #e8e8e8;
padding: 6px 12px;
border-radius: 8px;
font-family: Arial, sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: #053277;
letter-spacing: 1px;
white-space: nowrap;
}
/* ---------------------------------------------------------
Active Status
--------------------------------------------------------- */
.warranty-page .status-active {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: #053277;
padding: 6px 14px;
border-radius: 30px;
font-weight: 800;
font-size: 0.9rem;
border: 1px solid #e8e8e8;
white-space: nowrap;
}
.warranty-page .status-dot {
width: 8px;
height: 8px;
background: #053277;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(5, 50, 119, 0.10);
}
.warranty-page .status-inactive {
display: inline-flex;
align-items: center;
background: #f8f8f8;
color: #777777;
padding: 6px 14px;
border-radius: 30px;
font-weight: 700;
font-size: 0.9rem;
border: 1px solid #e8e8e8;
white-space: nowrap;
}
/* ---------------------------------------------------------
Empty State
--------------------------------------------------------- */
.warranty-page .warranty-empty-state {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 55px 30px 45px;
box-sizing: border-box;
}
.warranty-page .warranty-empty-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f8f8f8;
border: 1px solid #e8e8e8;
color: #053277;
margin-bottom: 20px;
}
.warranty-page .warranty-empty-icon svg {
width: 34px;
height: 34px;
}
.warranty-page .warranty-empty-state h3 {
margin: 0 0 10px;
color: #053277;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.7;
}
.warranty-page .warranty-empty-state p {
max-width: 500px;
margin: 0;
color: #777777;
font-size: 0.95rem;
line-height: 1.9;
}
/* =========================================================
TABLET / MOBILE
========================================================= */
@media (max-width: 850px) {
.warranty-page .list-page-container .table-wrapper {
padding: 70px 16px 30px;
}
.warranty-page .list-page-container .table-container-box {
padding: 25px 20px;
border-radius: 18px;
}
.warranty-page .table-header-section {
flex-direction: column;
align-items: stretch;
gap: 20px;
margin-bottom: 25px;
padding-bottom: 20px;
}
.warranty-page .table-header-section h2 {
font-size: 1.8rem;
}
.warranty-page .table-header-section p {
font-size: 1rem;
}
.warranty-page .btn-new-warranty {
width: 100%;
box-sizing: border-box;
}
/* Hide desktop table header */
.warranty-page .warranty-table thead {
display: none;
}
/* Turn table into cards */
.warranty-page .warranty-table,
.warranty-page .warranty-table tbody,
.warranty-page .warranty-table tr,
.warranty-page .warranty-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
.warranty-page .warranty-table {
border-spacing: 0;
}
.warranty-page .warranty-table tbody tr {
margin-bottom: 20px;
border: 2px solid #e8e8e8 !important;
border-radius: 16px !important;
padding: 10px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.025);
}
.warranty-page .warranty-table tbody tr:hover {
transform: none;
}
.warranty-page .warranty-table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 12px 20px !important;
border: none !important;
border-radius: 0 !important;
text-align: left;
}
.warranty-page .warranty-table td::before {
content: attr(data-label);
flex-shrink: 0;
font-weight: 700;
color: #777777;
font-size: 0.9rem;
line-height: 1.6;
text-align: right;
}
.warranty-page .warranty-table td.td-counter {
display: none;
}
.warranty-page .badge-code {
font-size: 0.9rem;
padding: 5px 9px;
}
.warranty-page .status-active,
.warranty-page .status-inactive {
font-size: 0.85rem;
padding: 5px 11px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 576px) {
.warranty-page .list-page-container .table-wrapper {
padding: 60px 12px 25px;
}
.warranty-page .list-page-container .table-container-box {
padding: 22px 15px;
border-radius: 16px;
}
.warranty-page .table-header-section {
gap: 16px;
}
.warranty-page .table-header-section h2 {
font-size: 1.5rem;
line-height: 1.7;
}
.warranty-page .table-header-section p {
font-size: 0.9rem;
line-height: 1.8;
}
.warranty-page .btn-new-warranty {
min-height: 50px;
padding: 12px 16px;
font-size: 0.95rem;
border-radius: 12px;
}
.warranty-page .warranty-table tbody tr {
margin-bottom: 16px;
border-radius: 14px !important;
}
.warranty-page .warranty-table td {
padding: 11px 15px !important;
gap: 10px;
font-size: 0.9rem;
line-height: 1.7;
}
.warranty-page .warranty-table td::before {
font-size: 0.82rem;
}
.warranty-page .badge-code {
font-size: 0.82rem;
padding: 4px 8px;
}
.warranty-page .status-active,
.warranty-page .status-inactive {
font-size: 0.8rem;
padding: 4px 9px;
}
.warranty-page .warranty-empty-state {
padding: 40px 15px 30px;
}
.warranty-page .warranty-empty-icon {
width: 60px;
height: 60px;
margin-bottom: 16px;
}
.warranty-page .warranty-empty-icon svg {
width: 29px;
height: 29px;
}
.warranty-page .warranty-empty-state h3 {
font-size: 1.15rem;
}
.warranty-page .warranty-empty-state p {
font-size: 0.85rem;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.warranty-page .list-page-container .table-wrapper {
padding-left: 8px;
padding-right: 8px;
}
.warranty-page .list-page-container .table-container-box {
padding-left: 12px;
padding-right: 12px;
}
.warranty-page .table-header-section h2 {
font-size: 1.35rem;
}
.warranty-page .warranty-table td {
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 0.85rem;
}
}
/* =========================================================
FIX — پایینتر آوردن تایملاین صفحه ثبت گارانتی
========================================================= */
/* دسکتاپ و تبلت */
.warranty-page .verification-wrapper > .timeline-container {
position: relative;
top: 36px;
}
/* موبایل: فاصله کمتر تا فرم فشرده نشود */
@media (max-width: 576px) {
.warranty-page .verification-wrapper > .timeline-container {
top: 20px;
}
}
/* =========================================================
RESPONSIVE REPAIR — ROYAL WARRANTY
Homepage, phone registration, OTP, my warranties
========================================================= */
/* Allow scrolling on warranty pages instead of clipping content */
html:has(.warranty-home),
body:has(.warranty-home),
html:has(.warranty-page),
body:has(.warranty-page) {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* -------------------- Homepage -------------------- */
body:has(.warranty-home) .warranty-home {
width: 100% !important;
height: auto !important;
min-height: 100vh !important;
min-height: 100svh !important;
padding: 24px !important;
overflow: visible !important;
}
body:has(.warranty-home) .warranty-home .banner-container {
width: 100% !important;
height: auto !important;
min-height: calc(100vh - 48px) !important;
min-height: calc(100svh - 48px) !important;
overflow: hidden !important;
}
body:has(.warranty-home) .warranty-home .main-product-img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 992px) {
body:has(.warranty-home) .warranty-home {
padding: 16px !important;
}
body:has(.warranty-home) .warranty-home .banner-container {
min-height: calc(100svh - 32px) !important;
gap: 24px !important;
padding: 76px 28px 28px !important;
}
body:has(.warranty-home) .warranty-home .image-section {
width: 100% !important;
min-width: 0 !important;
min-height: 260px !important;
max-width: 100% !important;
}
body:has(.warranty-home) .warranty-home .text-section {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
body:has(.warranty-home) .warranty-home .text-section h1 {
font-size: clamp(1.55rem, 4vw, 2.4rem) !important;
line-height: 1.7 !important;
overflow-wrap: anywhere;
}
body:has(.warranty-home) .warranty-home .text-section p {
font-size: clamp(.95rem, 2.5vw, 1.1rem) !important;
line-height: 1.9 !important;
}
}
@media (max-width: 576px) {
body:has(.warranty-home) .warranty-home {
padding: 10px !important;
}
body:has(.warranty-home) .warranty-home .banner-container {
width: 100% !important;
min-height: calc(100svh - 20px) !important;
padding: 76px 18px 22px !important;
gap: 12px !important;
border-radius: 18px !important;
}
body:has(.warranty-home) .warranty-home .brand-logo-container {
top: 12px !important;
left: 12px !important;
width: 72px !important;
}
body:has(.warranty-home) .warranty-home .text-section {
padding: 0 !important;
}
body:has(.warranty-home) .warranty-home .text-section h1 {
font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
line-height: 1.7 !important;
}
body:has(.warranty-home) .warranty-home .text-section p {
font-size: .95rem !important;
line-height: 1.9 !important;
}
body:has(.warranty-home) .warranty-home .btn-register {
max-width: 100%;
box-sizing: border-box;
}
body:has(.warranty-home) .warranty-home .image-section {
min-height: 210px !important;
height: auto !important;
}
body:has(.warranty-home) .warranty-home .main-product-img {
max-width: 100% !important;
max-height: 260px;
object-fit: contain;
}
body:has(.warranty-home) .warranty-home .blob-bg {
max-width: 75vw;
max-height: 75vw;
}
body:has(.warranty-home) .warranty-home .blob-outline {
max-width: 80vw;
max-height: 80vw;
}
}
/* -------------------- Registration and OTP -------------------- */
/* Override fixed viewport sizing that was hiding content */
body:has(.warranty-page) .warranty-page {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
min-height: 100vh !important;
min-height: 100svh !important;
max-height: none !important;
padding: 24px !important;
box-sizing: border-box !important;
overflow: visible !important;
align-items: center !important;
}
body:has(.warranty-page) .warranty-page > .page-container {
width: 100% !important;
height: auto !important;
min-height: calc(100vh - 48px) !important;
min-height: calc(100svh - 48px) !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .verification-wrapper {
width: 100% !important;
height: auto !important;
min-height: calc(100vh - 48px) !important;
min-height: calc(100svh - 48px) !important;
padding: 100px 32px 48px !important;
box-sizing: border-box !important;
justify-content: center !important;
}
body:has(.warranty-page) .warranty-page .timeline-container {
width: 100% !important;
max-width: 600px !important;
margin: 0 auto clamp(28px, 5vh, 60px) !important;
box-sizing: border-box;
}
body:has(.warranty-page) .warranty-page .form-container {
width: 100% !important;
max-width: 480px !important;
min-width: 0 !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .mobile-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .input-group,
body:has(.warranty-page) .warranty-page .input-group input,
body:has(.warranty-page) .warranty-page .btn-submit {
max-width: 100%;
box-sizing: border-box;
}
body:has(.warranty-page) .warranty-page .otp-inputs {
max-width: 100%;
gap: clamp(6px, 1.5vw, 12px) !important;
box-sizing: border-box;
}
body:has(.warranty-page) .warranty-page .otp-input {
width: clamp(38px, 5vw, 55px) !important;
min-width: 0 !important;
height: clamp(48px, 6vw, 65px) !important;
box-sizing: border-box;
}
/* -------------------- My warranties -------------------- */
body:has(.warranty-page) .warranty-page .list-page-container {
width: 100% !important;
max-width: 1200px !important;
height: auto !important;
min-height: calc(100svh - 48px) !important;
margin: 0 auto !important;
overflow: visible !important;
}
body:has(.warranty-page) .warranty-page .list-page-container .table-wrapper {
width: 100% !important;
flex: 0 0 auto !important;
min-width: 0 !important;
padding: 112px 28px 36px !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .list-page-container .table-container-box {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .responsive-table-wrapper {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
body:has(.warranty-page) .warranty-page .warranty-table {
max-width: 100%;
}
/* -------------------- Small screens -------------------- */
@media (max-width: 576px) {
body:has(.warranty-page) .warranty-page {
padding: 10px !important;
align-items: flex-start !important;
}
body:has(.warranty-page) .warranty-page > .page-container {
min-height: calc(100svh - 20px) !important;
border-radius: 16px !important;
}
body:has(.warranty-page) .warranty-page .verification-wrapper {
min-height: 0 !important;
padding: 96px 16px 32px !important;
}
body:has(.warranty-page) .warranty-page .timeline-container {
gap: 0 !important;
margin-bottom: 28px !important;
}
body:has(.warranty-page) .warranty-page .timeline-container .step-circle {
width: 36px !important;
height: 36px !important;
font-size: .9rem !important;
}
body:has(.warranty-page) .warranty-page .timeline-container .step-text {
font-size: clamp(.62rem, 2.6vw, .75rem) !important;
white-space: nowrap !important;
}
body:has(.warranty-page) .warranty-page .timeline-container .step-line {
min-width: 8px !important;
margin: 0 4px !important;
}
body:has(.warranty-page) .warranty-page .form-title {
font-size: clamp(1.25rem, 5vw, 1.55rem) !important;
line-height: 1.8 !important;
margin-bottom: 20px !important;
}
body:has(.warranty-page) .warranty-page .mobile-form {
padding: 22px 16px !important;
}
body:has(.warranty-page) .warranty-page .otp-input {
width: clamp(36px, 12vw, 48px) !important;
height: clamp(46px, 14vw, 56px) !important;
font-size: 1.35rem !important;
}
body:has(.warranty-page) .warranty-page .list-page-container {
min-height: calc(100svh - 20px) !important;
}
body:has(.warranty-page) .warranty-page .list-page-container .table-wrapper {
padding: 82px 10px 20px !important;
}
body:has(.warranty-page) .warranty-page .list-page-container .table-container-box {
padding: 20px 12px !important;
}
body:has(.warranty-page) .warranty-page .warranty-table td {
min-width: 0 !important;
overflow-wrap: anywhere;
}
body:has(.warranty-page) .warranty-page .warranty-table td::before {
max-width: 42%;
}
}
@media (max-width: 380px) {
body:has(.warranty-page) .warranty-page {
padding: 6px !important;
}
body:has(.warranty-page) .warranty-page .verification-wrapper {
padding-right: 10px !important;
padding-left: 10px !important;
}
body:has(.warranty-page) .warranty-page .timeline-container .step-text {
font-size: .6rem !important;
}
body:has(.warranty-page) .warranty-page .list-page-container .table-wrapper {
padding-right: 6px !important;
padding-left: 6px !important;
}
}
/* VIEWPORT FIX — warranty pages only */
html:has(.warranty-home),
body:has(.warranty-home),
html:has(.warranty-page),
body:has(.warranty-page) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
overflow-x: clip !important;
}
body:has(.warranty-home) .warranty-home,
body:has(.warranty-page) .warranty-page {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page > .page-container {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 1500px !important;
min-width: 0 !important;
margin-inline: auto !important;
box-sizing: border-box !important;
}
body:has(.warranty-page) .warranty-page .list-page-container {
width: 100% !important;
max-width: 1500px !important;
min-width: 0 !important;
margin-inline: auto !important;
box-sizing: border-box !important;
}
@media (min-width: 993px) {
body:has(.warranty-home) .warranty-home .banner-container {
max-width: 1500px !important;
margin-inline: auto !important;
}
body:has(.warranty-page) .warranty-page .verification-wrapper {
padding-inline: clamp(32px, 5vw, 80px) !important;
}
}
/* =========================================================
PAGE 1 — MOBILE RESPONSIVE
========================================================= */
@media (max-width: 768px) {
body:has(.warranty-home) {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.warranty-home {
width: 100% !important;
height: auto !important;
min-height: 100svh !important;
padding: 12px !important;
overflow: visible !important;
}
.warranty-home .banner-container {
width: 100% !important;
height: auto !important;
min-height: calc(100svh - 24px) !important;
padding: 76px 22px 28px !important;
border-radius: 18px;
flex-direction: column;
justify-content: center;
gap: 20px;
overflow: hidden;
}
.warranty-home .brand-logo-container {
top: 16px !important;
left: 16px !important;
width: 88px !important;
}
.warranty-home .text-section {
flex: none;
width: 100%;
padding: 0;
text-align: center;
order: 1;
}
.warranty-home .text-section h1 {
margin-bottom: 12px;
font-size: clamp(1.65rem, 7vw, 2.2rem);
line-height: 1.5;
}
.warranty-home .text-section p {
max-width: none;
margin: 0 0 22px;
font-size: 1rem;
line-height: 1.9;
}
.warranty-home .btn-register {
padding: 13px 28px;
font-size: 1rem;
}
.warranty-home .image-section {
flex: none;
width: 100%;
min-height: 0;
aspect-ratio: 1 / 0.82;
order: 2;
}
.warranty-home .blob-bg {
width: min(72vw, 300px);
height: min(72vw, 300px);
}
.warranty-home .blob-outline {
width: min(78vw, 325px);
height: min(78vw, 325px);
}
.warranty-home .main-product-img {
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: none;
}
.warranty-home .shield-icon-wrapper {
top: 2%;
right: 5%;
width: 56px;
height: 56px;
padding: 10px;
}
}
/* گوشیهای باریک */
@media (max-width: 380px) {
.warranty-home .banner-container {
padding-right: 16px !important;
padding-left: 16px !important;
}
.warranty-home .text-section h1 {
font-size: 1.55rem;
}
.warranty-home .text-section p {
font-size: 0.95rem;
}
}