/* === Core Variables & Base Styles === */
:root {
    --autocad-bg: #212830;
    --grid-line-color: #38414a;
    --palette-bg: #3c4652;
    --palette-header-bg: #4a5460;
    --text-color: #d1d1d1;
    --highlight-blue: #3e83c7;
    --input-bg: #212830;
    --border-color: #2c353e;
    --error-color: #ff5555;
    --success-color: #55ff55;
}

html {
    scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', monospace;
    background-color: var(--autocad-bg);
    color: var(--text-color);
}

.blinking-cursor {
    animation: blink 1s step-start 0s infinite;
    font-weight: bold;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* === Login Page Specific Styles === */
.autocad-workspace {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
}

.login-palette {
    width: 90%;
    max-width: 450px;
    background-color: var(--palette-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

/* === Shared Component Styles === */
.palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--palette-header-bg);
    color: var(--text-color);
    padding: 8px 15px;
    font-size: 14px;
    border: 1px solid var(--border-color);
}

.palette-title {
    font-size: 1.2em;
    font-weight: bold;
        display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    color: #fafafa;
}
}

.palette-content {
    padding: 20px;
    background-color: var(--palette-bg);
    border: 1px solid var(--border-color);
    border-top: none; /* Avoid double border with header */
}

.error-message, .success-message { border: 1px solid; text-align: center; padding: 8px; margin-bottom: 15px; font-size: 12px; }
.error-message { background-color: rgba(255, 85, 85, 0.1); border-color: var(--error-color); color: var(--error-color); }
.success-message { background-color: rgba(85, 255, 85, 0.1); border-color: var(--success-color); color: var(--success-color); }

.input-table { display: table; width: 100%; border-collapse: collapse; }
.table-row { display: table-row; }
.table-cell { display: table-cell; padding: 8px; border: 1px solid var(--border-color); vertical-align: middle; }
.label-cell { background-color: rgba(0,0,0,0.1); font-size: 12px; width: 120px; }
.input-cell { background-color: var(--input-bg); }
.autocad-input { width: 100%; background-color: transparent; border: none; color: var(--text-color); font-family: 'Roboto Mono', monospace; font-size: 1em; padding: 5px; }
.autocad-input:focus { outline: 1px solid var(--highlight-blue); }

.action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
.autocad-button { background-color: var(--palette-header-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 8px 15px; font-family: 'Roboto Mono', monospace; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; text-decoration: none; flex-grow: 1; text-align: center; }
.autocad-button:hover { background-color: var(--highlight-blue); border-color: #5aa1e3; }

.command-line { background-color: var(--input-bg); padding: 10px 15px; color: var(--text-color); font-size: 14px; border: 1px solid var(--border-color); }
.recaptcha-container { margin-top: 20px; display: flex; justify-content: center; }

/* === Index Page Specific Styles === */
.autocad-workspace-static {
    padding-top: 60px; /* Add padding to prevent content from hiding under the sticky header */
    background-size: 40px 40px;
    background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
    background-attachment: fixed;
}
.palette-header.is-sticky {
    position: fixed; /* Changed to fixed for better consistency */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.main-content-area { max-width: 1000px; margin: 40px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 40px; }
.logo { flex-grow: 0; }
.header-right, .lang-switcher { display: flex; align-items: center; gap: 15px; }
.lang-option { background: none; border: 1px solid var(--border-color); color: var(--text-color); cursor: pointer; font-family: 'Roboto Mono', monospace; padding: 3px 8px; opacity: 0.6; }
.lang-option.active { background-color: var(--highlight-blue); opacity: 1; }
.nav-menu { display: flex; gap: 10px; align-items: center; }
.nav-item { color: var(--text-color); padding: 5px 10px; border-bottom: 2px solid transparent; transition: border-color 0.2s; text-decoration: none; }
.nav-item:hover { border-color: var(--highlight-blue); }
.main-viewport { text-align: center; padding: 60px 0; }
.hero-headline { font-size: 2.5em; margin-bottom: 10px; color: var(--highlight-blue); }
.hero-subheadline { font-size: 1.2em; margin-bottom: 30px; }

/* Content Palette Wrapper */
.content-palette { background-color: var(--palette-bg); border: 1px solid var(--border-color); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
.content-palette .palette-header { border: none; border-bottom: 1px solid var(--border-color); }
.content-palette .palette-content { border: none; background: none; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.feature-card { padding: 20px; text-align: center; background: var(--input-bg); border: 1px solid var(--border-color); }
.feature-icon { width: 48px; height: 48px; color: var(--highlight-blue); margin-bottom: 15px; }
.feature-card h3 { margin-bottom: 10px; }

/* Model Showcase (Vertical Layout) */
.model-showcase-vertical { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.main-model-wrapper { width: 100%; height: 500px; border: 1px solid var(--border-color); background-color: var(--input-bg); transition: opacity 0.2s ease-in-out; }
.main-model-wrapper.is-swapping { opacity: 0; }
.thumbnail-strip { display: flex; justify-content: center; gap: 20px; width: 100%; }
.thumbnail-model { height: 120px; width: 120px; border: 1px solid var(--border-color); cursor: pointer; transition: border-color 0.2s; }
.thumbnail-model:hover { border-color: var(--highlight-blue); }
model-viewer { width: 100%; height: 100%; }

/* Pricing Plan Section */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.plan-card { padding: 20px; text-align: center; background: var(--input-bg); border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--highlight-blue); box-shadow: 0 0 10px rgba(62, 131, 199, 0.5); }
.plan-card h3 { font-size: 1.5em; margin-bottom: 15px; }
.plan-price { font-size: 2em; color: var(--highlight-blue); margin-bottom: 20px; }
.plan-card ul { list-style: none; padding: 0; margin-bottom: 20px; text-align: left; flex-grow: 1; }
.plan-card li { margin-bottom: 10px; }

/* Scroll to Top Button */
.scroll-top-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: var(--palette-header-bg); border: 1px solid var(--border-color); color: var(--text-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
.scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); z-index: 10001;}
.scroll-top-btn:hover { background-color: var(--highlight-blue); border-color: #5aa1e3; }
.scroll-top-btn svg { width: 24px; height: 24px; }

/* Responsive Styles for Mobile */
.hamburger-button { display: none; } /* Hidden on desktop */
@media (max-width: 768px) {
    .header-right, .nav-menu { display: none; }
    .hamburger-button { display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 5px; z-index: 1001; }
    .hamburger-line { width: 25px; height: 3px; background-color: var(--text-color); transition: transform 0.3s, opacity 0.3s; }
    .hamburger-button.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-button.is-active .hamburger-line:nth-child(2) { opacity: 0; }
    .hamburger-button.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .nav-menu.is-active { display: flex; flex-direction: column; position: absolute; top: 56px; left: 0; width: 100%; background-color: var(--palette-header-bg); border: 1px solid var(--border-color); z-index: 999; }
    .nav-menu.is-active .nav-item { padding: 15px; text-align: center; width: 100%; }
    .hero-headline { font-size: 1.8em; }
    .main-model-wrapper { height: 300px; }
    .thumbnail-model { height: 80px; width: 80px; }
}

.is-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #1a1a1a; 
}

.main-content-area {
    padding-bottom: 60px;
        background: #4a5460;
}

/* === Tutorial Page Specific Styles === */

.tutorial-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px 20px;
        background: #4a5460;
}

/* استایل هر مرحله از آموزش */
.step {
    margin-bottom: 50px;
}
.step:last-child {
    margin-bottom: 0;
}

.step h2 {
    font-size: 1.8em;
    color: #ffffff; /* رنگ سفید برای خوانایی بیشتر */
    border-left: 4px solid var(--highlight-blue); /* استفاده از متغیر رنگ اصلی شما */
    padding-left: 15px;
    margin-bottom: 20px;
}

/* تنظیمات پاراگراف و لیست‌ها در هر مرحله */
.step p, .step ul {
    line-height: 1.6;
    margin-bottom: 15px;
}
.step ul {
    list-style-type: square;
    padding-left: 20px;
}
.step strong {
    color: #ffffff;
}

/* استایل تصاویر و ویدیوهای آموزشی */
.step img, .step video {
    max-width: 100%;
    display: block; /* برای حذف فاصله اضافی زیر عکس */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 10px;
}

.preview-container {
    display: flex;
    gap: 20px; /* فاصله بین دو ستون */
    align-items: stretch; /* مهم: این خاصیت باعث می‌شود ارتفاع هر دو ستون یکسان شود */
}

.preview-column {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* تخصیص عرض ۳/۴ (۷۵٪) به ستون دسکتاپ */
.preview-column.desktop-view {
    flex-basis: calc(75% - 10px); /* از calc برای محاسبه دقیق با در نظر گرفتن gap استفاده می‌کنیم */
}

/* تخصیص عرض ۱/۴ (۲۵٪) به ستون موبایل */
.preview-column.mobile-view {
    flex-basis: calc(25% - 10px);
}

.preview-column h3 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.preview-column img {
    width: 100%; /* عرض تصویر کاملاً ستون والد را پر می‌کند */
    height: 100%; /* ارتفاع تصویر کاملاً ستون والد را پر می‌کند */
    flex-grow: 1;  /* باعث می‌شود تصویر فضای خالی عمودی داخل ستون را پر کند */
    object-fit: cover; /* مهم: نسبت تصویر را حفظ کرده و از کشیدگی آن جلوگیری می‌کند */
    border-radius: 6px;
}

/* === Responsive Styles for Tutorial Page === */
@media (max-width: 768px) {
    .step h2 {
        font-size: 1.5em; /* کوچک‌تر کردن عنوان‌ها در موبایل */
    }

    /* تبدیل چیدمان دو ستونی به تک ستونی در موبایل */
    .preview-container {
        flex-direction: column;
    }
}

/* استایل برای بهبود نمایش پوستر در model-viewer */
#main-model-viewer::part(poster) {
    width: 100%;
    height: 100%;
    object-fit: cover; /* این باعث می‌شود تصویر بدون تغییر نسبت، کادر را پر کند */
}
.details-button {
    width: 100%; /* مهم: عرض دکمه را با عرض کارت یکی می‌کند */
    box-sizing: border-box; /* برای محاسبه صحیح پدینگ و عرض */
    flex-grow: 0 !important; /* جلوگیری از تغییر اندازه ناخواسته */
    padding: 8px 10px;
    font-size: 0.9em;
    display: block;
}



.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background-color: var(--palette-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 500px;      /* << تغییر: عرض ثابت */
    height: 600px;     /* << تغییر: ارتفاع ثابت */
    max-width: 90%;    /* << مهم: برای بهینه‌سازی در موبایل */
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.modal-overlay.is-visible .modal-container {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--palette-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2.5em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.modal-content {
    padding: 0; /* پدینگ را حذف می‌کنیم تا iframe کاملاً بچسبد */
    overflow: hidden; /* اسکرول به خود iframe منتقل می‌شود */
    flex-grow: 1;
    display: flex; /* برای کشیده شدن iframe */
}

/* استایل خود iframe */
#modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
}