@font-face {
    font-family: 'Lalezar';
    src: url('fonts/Lalezar-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff; /* Changed to white */
    font-family: 'Vazirmatn', sans-serif;
}

#canvas-container, #canvas-container-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Added subtle radial gradient for premium look on white */
    background: radial-gradient(circle at center, #ffffff 0%, #f0f0f5 100%);
}

.content-overlay {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Let clicks pass through to canvas if needed */
}

.buttons-container {
    display: flex;
    gap: 20px;
    pointer-events: auto; /* Enable clicks on buttons */
}

.btn-custom {
    padding: 12px 30px;
    font-size: 18px; /* Reverted to larger font */
    font-weight: bold; /* Reverted to bold */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Visible border */
    border-radius: 50px; /* Reverted to pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333333; /* Keep dark text for readability */
    text-shadow: none;
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
    
    background: rgba(255, 255, 255, 0.8); /* Base white/glass */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0px;
}

.btn-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-about {
    background: rgba(75, 108, 183, 0.08); /* Very pale blue */
    border-color: rgba(75, 108, 183, 0.3);
}
.btn-about:hover {
    border-width: 4px; /* Make border thicker on hover */
    border-color: rgba(75, 108, 183, 0.6);
}

.btn-plan {
    background: rgba(86, 171, 47, 0.08); /* Very pale green */
    border-color: rgba(86, 171, 47, 0.3);
}
.btn-plan:hover {
    border-width: 4px; /* Make border thicker on hover */
    border-color: rgba(86, 171, 47, 0.6);
}

.btn-start {
    background: linear-gradient(135deg, #1e3c72 0%, #2a0845 100%); /* Dark blue to dark purple */
    color: white;
    border: 2px solid transparent; /* Reserve space for border */
    gap: 8px;
    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3); /* Match shadow to new color */
}

.btn-start:hover {
    background: linear-gradient(135deg, #2a0845 0%, #1e3c72 100%); /* Reverse gradient on hover */
    color: white;
    border-width: 4px; /* Thick border on hover */
    border-color: rgba(136, 170, 204, 0.8); /* Light ice blue border */
    box-shadow: 0 8px 25px rgba(30, 60, 114, 0.5);
}

.arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.btn-start:hover .arrow {
    transform: translateX(-5px); /* Move left because RTL */
}

/* --- Responsive Buttons --- */
@media (max-width: 600px) {
    .buttons-container {
        flex-direction: column-reverse; /* Stack vertically */
        align-items: stretch; /* Make buttons full width */
        gap: 15px;
        width: 85%; /* Take up most of the screen width */
        max-width: 320px;
    }
    .btn-custom {
        width: 100%; /* Fill container */
        justify-content: center;
        padding: 16px 20px; /* Slightly taller for easier tapping */
    }
    .content-overlay {
        bottom: 8%; /* Adjust bottom spacing for mobile */
    }
}

/* --- Loading Screen --- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 450px; /* Increased height for larger elements */
    gap: 25px; /* Adjusted gap for larger circles */
}

.loader-text {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 70px; /* Larger text */
    font-weight: 900;
    color: white; /* Base color for shadow-based outline */
    direction: rtl;
    /* Clean outline using shadows */
    text-shadow: 
        -1.5px -1.5px 0 #e0e0e0,  
         1.5px -1.5px 0 #e0e0e0,
        -1.5px  1.5px 0 #e0e0e0,
         1.5px  1.5px 0 #e0e0e0;
    letter-spacing: 0px;
    z-index: 2;
}

.loader-circles-wrapper {
    position: relative;
    width: 220px; /* Larger container */
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elegant-loader {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}

.circle {
    position: absolute;
    border: 5px solid #e0e0e0; /* Thicker lines for the 3 inner circles */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Base styles for the dot */
.circle .dot {
    position: absolute;
    background: linear-gradient(135deg, #1e3c72 0%, #2a0845 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(30, 60, 114, 0.5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Smallest Circle */
.circle-1 {
    width: 60px;
    height: 60px;
    animation: rotate 2.5s linear infinite;
}
.circle-1 .dot {
    top: -10px; 
    width: 20px;
    height: 20px;
}

/* Medium Circle */
.circle-2 {
    width: 120px;
    height: 120px;
    animation: rotate 3.5s linear infinite reverse;
}
.circle-2 .dot {
    top: -10px; 
    width: 20px;
    height: 20px;
}

/* Largest Circle */
.circle-3 {
    width: 180px;
    height: 180px;
    animation: rotate 4.5s linear infinite;
}
.circle-3 .dot {
    top: -10px; 
    width: 20px;
    height: 20px;
}

@keyframes rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Internal Pages Styles --- */
.internal-page-container {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    z-index: 10;
    position: relative;
    direction: rtl;
}

.internal-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 50px; /* Increased margin to replace the gap left by the removed logo */
}

.btn-nav {
    padding: 8px 20px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-nav:hover {
    background: #1e3c72;
    color: white;
}

.internal-logo-wrapper {
    width: 100%;
    max-width: 500px;
    height: 140px;
    margin-top: 5px;
    margin-bottom: 20px;
    z-index: 20;
    pointer-events: none;
}

/* Ensure the logo wrapper has enough breathing room on mobile to prevent overlapping the content box */
@media (max-width: 600px) {
    .internal-logo-wrapper {
        height: 140px; /* Give it enough height to fit the scaled logo */
        margin-top: 10px;
        margin-bottom: 40px; /* Force a larger gap before the content box starts */
    }
}

.content-box {
    width: 100%;
    max-width: 800px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid rgba(136, 170, 204, 0.6); /* Thick light blue border as requested */
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
}

.content-box h1, .content-box h2 {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 900;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a0845 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.content-box h1 { font-size: 32px; }
.content-box h2 { font-size: 24px; margin-top: 40px; }

.content-box p {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    text-align: justify;
    text-align-last: center; /* Center-aligned text inside the box */
}

@media (max-width: 600px) {
    .content-box {
        padding: 30px 20px;
        width: 95%;
        margin-top: 20px; /* Add some space between nav buttons and content box on mobile */
    }
    .internal-nav {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px; /* Reduced bottom margin on mobile to prevent huge gaps */
    }
}
#components-reconnect-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    bottom: 0;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

/* Ensure the loader inside the modal is perfectly centered and column-aligned */
#components-reconnect-modal .elegant-loader {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal .loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

#components-reconnect-modal .loader-circles-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix dots alignment in the modal (re-apply global circle/dot logic) */
#components-reconnect-modal .circle {
    position: absolute;
    border: 5px solid #e0e0e0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#components-reconnect-modal .dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Blazor's built-in state classes */
#components-reconnect-modal.components-reconnect-show {
    display: flex;
}

/* Specific messages for failed states */
#components-reconnect-modal.components-reconnect-failed .reconnect-text::before {
    content: 'خطا در اتصال مجدد. ';
}
#components-reconnect-modal.components-reconnect-rejected .reconnect-text::before {
    content: 'اتصال توسط سرور رد شد. ';
}

.reconnect-text {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 24px;
    color: #1e3c72;
    margin-top: 40px;
    font-weight: bold;
    direction: rtl;
    text-align: center;
}

.dot-animation::after {
    content: '...';
    display: inline-block;
    width: 30px;
    text-align: left;
    animation: dots 1.5s steps(4, end) infinite;
}

/* Keep the legacy error UI for unhandled exceptions but hidden by default */
#blazor-error-ui {
    display: none;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}