/* ============================================= */
/* === Registration Page Specific Styles === */
/* ============================================= */

:root {
    /* Define colors based on image - Teal/Aqua Tones */
    --clr-reg-nav-bg: #7b47b7;
    /* Teal background for navigator */
    --clr-reg-nav-text: #ffffff;
    --clr-reg-nav-subtitle: #e4e6eb;
    /* Lighter teal/white for subtitle */
    --clr-reg-nav-active-bg: #6f4dbb;
    /* Slightly lighter active bg */
    --clr-reg-nav-border: #4b2a7a;
    /* Slightly darker border */
    --clr-reg-form-bg: #ffffff;
    --clr-reg-page-bg: #f7f3ef;
    /* Beige background */
    --clr-reg-title: #471172;
    /* Dark teal for title */
    --clr-reg-instruction: #666666;
    /* Muted text color */
    --clr-reg-radio-border: #dcdcdc;
    --clr-reg-radio-border-active: #8c6ed1;
    --clr-reg-radio-bg-active: #d9c7f0;
    /* Light teal bg for selected radio */
    --clr-reg-radio-text: #333333;
    --clr-reg-radio-desc: #666666;
    --clr-reg-btn-prev-bg: #f0f0f0;
    /* Light gray for prev button */
    --clr-reg-btn-prev-text: #757575;
    --clr-reg-btn-prev-border: #e0e0e0;
    --clr-reg-btn-next-bg: var(--clr-primary);
    /* Use primary teal */
    --clr-reg-btn-next-text: #ffffff;
}

body.login-page {
    /* یا هر کلاسی که روی body دارید */
    background-color: var(--clr-reg-page-bg);
    /* رنگ پس زمینه کلی صفحه */
    /* حذف یا کامنت کردن display: flex مرکزی صفحه ورود، اگر با طرح‌بندی ثبت‌نام تداخل دارد */
    /* display: block; */
    /* align-items: initial; */
    /* justify-content: initial; */
}

.registration-layout-container {
    display: inline-flex;
    width: 1100px;
    min-height: 70vh;
    /* margin: 40px auto; */
    /* background-color: var(--clr-reg-form-bg); /* <<< حذف شود */
    background-color: transparent;
    /* یا همان رنگ پس‌زمینه صفحه */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* --- Step Navigator --- */
.registration-step-navigator {
    flex: 0 0 300px;
    background-color: #7b47b7;
    /* <<< پس‌زمینه تیله‌ای اینجا اعمال شود */
    /* padding: 30px 0; */
    color: var(--clr-reg-nav-text);
    /* ... بقیه استایل‌های نویگیتور ... */
}

.navigator-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navigator-list li {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid #4b2a7a;
    opacity: 0.7;
    /* Default state is slightly faded */
    transition: background-color 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.navigator-list li:last-child {
    border-bottom: none;
}

.step-number {
    font-size: 2.5rem;
    /* Large number */
    font-weight: 700;
    line-height: 1;
    margin-left: 25px;
    /* Space between number and text (RTL) */
    color: rgb(255 255 255);
}

.step-details {
    display: flex;
    flex-direction: column;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.step-subtitle {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 200;
}

.registration-main-title .step-number-prefix {
    color: #6f4dbb;
    /* رنگ دلخواه برای شماره گام */
    font-weight: bold;
    /* مثال: ضخیم کردن شماره گام */
    /* سایر استایل‌ها */
}

.registration-main-title .step-title-text {
    color: #471172;
    /* رنگ دلخواه برای متن عنوان */
    /* سایر استایل‌ها */
    margin-right: 5px;
    /* ایجاد کمی فاصله بین شماره و متن */
}

/* مثال برای استایل‌دهی به عناوین داخل فرم‌ها (اگر تغییرات h3 را نگه داشتید) */
.registration-step-title .step-number-prefix {
    color: #6f4dbb;
    /* رنگ متفاوت برای شماره گام در فرم‌ها */
    font-weight: normal;
}

.registration-step-title .step-title-text {
    color: #555;
    margin-right: 5px;
}


/* Active Step Styling */
.navigator-list li.active-step {
    box-shadow: 5px -9px 8px rgba(111, 77, 187, 0.2);
    background-color: var(--clr-reg-nav-active-bg);
    opacity: 1;
    font-weight: bold;
    /* Optional: make text bold */
}

.navigator-list li.active-step .step-number {
    color: var(--clr-reg-nav-text);
    /* Make number solid white */
}

/* Completed Step Styling (Optional - add JS to handle this class) */
.navigator-list li.completed-step {
    background: #4b2a7a;
    border-bottom: 1px solid #6f4dbb;
    opacity: 1;
    /* Or different style */
}

/* Add a checkmark or different indicator for completed steps if desired */


/* --- Form Content Area --- */
.registration-form-content {
    flex: 1;
    /* Takes remaining space */
    padding: 40px;
    /* Padding inside the white area */
    background-color: var(--clr-reg-form-bg);
    box-shadow: 0px 0px 25px #10444775;
    z-index: 2;
    max-height: 673px;
    overflow-y: auto; 
}

.form-card {
    /* This is now effectively the content area, no extra styling needed unless you want another inner border/bg */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* height: 80vh; */
}

.registration-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-reg-title);
    margin-bottom: 10px;
    text-align: right;
}

.registration-instruction {
    font-size: 1rem;
    color: var(--clr-reg-instruction);
    margin-bottom: 30px;
    text-align: right;
    font-weight: 300;
    /* Match image style */
    line-height: 1.7;
}

/* Override default form step title if it's showing */
.registration-step-title {
    display: none;
    /* Hide individual step titles if using main title */
}

/* --- Styled Radio Buttons (Step 1) --- */


.styled-radio-label {
    display: block;
    border: 2px solid transparent;
    /* Start with transparent border */
    border-radius: var(--border-radius-large);
    margin-bottom: 0;
    padding: 15px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    /* Ensure text content is aligned correctly */
    padding-right: 45px;
    /* Add padding to make space for the checkmark on the right (RTL) */
}

.styled-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.styled-radio-label .radio-text-content {
    padding: 0;
}

.styled-radio-label .radio-option-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-reg-radio-text);
    margin-bottom: 8px;
    display: block;
}

.styled-radio-label .radio-option-desc {
    font-size: 0.9rem;
    color: var(--clr-reg-radio-desc);
    line-height: 1.7;
    margin: 0;
}

/* Style the outer LABEL when checked */
.styled-radio-label:has(input[type="radio"]:checked) {
    /* Use :has() for modern browsers */
    border-color: var(--clr-reg-radio-border-active);
    background-color: var(--clr-reg-radio-bg-active);
}

/* Fallback for older browsers (might need JS to add a class) */
/* .styled-radio-label.checked { ... } */


/* Checkmark indicator (The Circle) */
.radio-checkmark {
    position: absolute;
    top: 18px;
    /* Adjust vertical position */
    right: 15px;
    /* Position on the right for RTL */
    width: 20px;
    height: 20px;
    border: 2px solid var(--clr-reg-radio-border);
    /* Default border color */
    border-radius: 50%;
    background-color: #fff;
    /* White background */
    transition: border-color 0.3s ease;
}

.styled-radio-label input[type="radio"]:checked~.radio-checkmark {
    /* Use ~ sibling selector */
    border-color: var(--clr-reg-radio-border-active);
    /* Active border color */
}

/* The Inner Dot (Visible only when checked) */
.radio-checkmark::after {
    content: '';
    display: block;
    width: 10px;
    /* Size of the inner dot */
    height: 10px;
    /* Size of the inner dot */
    background-color: var(--clr-reg-radio-border-active);
    /* Color of the dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    /* Start scaled down */
    transition: transform 0.2s ease-in-out;
    /* Animation for the dot */
}

/* Show the dot when the radio is checked */
.styled-radio-label input[type="radio"]:checked~.radio-checkmark::after {
    /* Use ~ sibling selector */
    transform: translate(-50%, -50%) scale(1);
    /* Scale up to full size */
}


/* Separator line */
.radio-separator {
    border: none;
    border-top: 1px solid var(--clr-border);
    /* Thinner separator */
    margin: 20px 0;
    /* Adjust margin */
}

/* Error Pulse for Radio Group */
.entity-type-selection.error-pulse .styled-radio-label {
    border: 2px solid var(--clr-error) !important;
    /* Ensure border shows red */
    animation: pulseError 0.5s ease-in-out 2;
    background-color: #fff5f5;
    /* Light red background on error */
}

/* Ensure checkmark border also pulses red if needed */
.entity-type-selection.error-pulse .radio-checkmark {
    border-color: var(--clr-error) !important;
}

/* Fallback for older browsers (might need JS to add a class) */
/* .styled-radio-label.checked {
    border-color: var(--clr-reg-radio-border-active);
    background-color: var(--clr-reg-radio-bg-active);
} */
#registration-steps-wrapper .ft-input,
#registration-steps-wrapper.ft-select,
.ft-textarea {

    height: 45px;
}

#registration-steps-wrapper .ft-input-box .ft-input-label {
    font-size: 0.8rem;
}

/* Checkmark indicator (Optional, if needed) */
.radio-checkmark {
    position: absolute;
    top: 18px;
    /* Adjust position for RTL */
    width: 20px;
    height: 20px;
    border: 2px solid var(--clr-reg-radio-border);
    border-radius: 50%;
    background-color: #fff;
}

.styled-radio-label input[type="radio"]:checked+.radio-text-content .radio-checkmark {
    background-color: var(--clr-reg-radio-border-active);
    border-color: var(--clr-reg-radio-border-active);
}

.styled-radio-label input[type="radio"]:checked+.radio-text-content .radio-checkmark::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Separator line */
.radio-separator {
    border: none;
    border-top: 3px solid var(--clr-reg-radio-border);
    margin: 30px 0px;
    /* Span across padding */
}

/* --- استایل برای حالت خطا در گروه رادیو باتن --- */


/* --- استایل برای حالت خطا در چک‌باکس قرارداد --- */
.ft-checkbox-contract.error-pulse label {
    color: var(--clr-error);
    /* متن لیبل قرمز شود */
}

.ft-checkbox-contract.error-pulse input[type="checkbox"] {
    border-color: var(--clr-error);
    /* بوردر چک‌باکس قرمز شود */
    animation: pulseError 0.5s ease-in-out 2;
    /* انیمیشن چشمک‌زن */
}

@keyframes pulseError {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 128, 120, 0.5);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(231, 128, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 128, 120, 0);
    }
}

/* --- استایل برای دکمه‌های باز کردن پاپ‌آپ در حالت خطا --- */
.popup-triggers button.error-pulse {
    border: 1px solid var(--clr-error);
    animation: pulseError 0.5s ease-in-out 2;
}


/* --- Navigation Buttons --- */
.registration-buttons {
    display: flex;
    justify-content: flex-end !important;
    /* Space out prev/next */
    margin-top: 30px;
    /* Space above buttons */
    /* padding-top: 20px; */
    /* border-top: 1px solid #eee; */
    /* Optional separator */
}

.registration-buttons .ft-btn {
        gap: 10px;
    min-width: 140px;
    /* Ensure buttons have some width */
    height: 45px;
    /* Slightly shorter buttons */
    font-size: 0.95rem;
}

.btn-prev {
    background-color: var(--clr-reg-btn-prev-bg) !important;
    color: var(--clr-reg-btn-prev-text) !important;
    border: 1px solid var(--clr-reg-btn-prev-border) !important;
}

.btn-prev:hover {
    background-color: #e0e0e0 !important;
    /* Slightly darker gray on hover */
}

.btn-next {
    background-color: var(--clr-reg-btn-next-bg) !important;
    color: var(--clr-reg-btn-next-text) !important;
}

.btn-next:hover {
    background-color: var(--clr-primary-dark) !important;
    /* Use existing hover color */
}

/* Arrows for buttons */
.arrow-prev::before,
.arrow-next::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    vertical-align: middle;
}

.arrow-prev::before {
    border-width: 6px 8px 6px 0;
    border-color: transparent var(--clr-reg-btn-prev-text) transparent transparent;
    margin-left: 8px;
    /* Space after arrow (RTL) */
}

.arrow-next::after {
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent var(--clr-reg-btn-next-text);
    margin-right: 8px;
    /* Space before arrow (RTL) */
}

/* --- Footer --- */
.registration-footer {
    text-align: center;
    font-size: 0.85rem;
    color: #a99d92;
    padding: 15px;
    margin-top: 0;
    /* Adjust spacing relative to container */
    clear: both;
    /* Ensure it's below floated elements if any */
    display: flex;
    justify-content: space-between;
}

.footer-version {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
}










.form-section-title {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--clr-disabled-text);
    /* Dark teal or your preferred title color */
    margin-top: 10px;
    /* Increased space above */
    margin-bottom: 10px;
    /* Space below title */
    text-align: right;
    position: relative;
    /* Needed if using absolute positioning for pseudo */
    display: flex;
    /* Use Flexbox for alignment */
    align-items: center;
    /* Vertically center text and line */
    width: 100%;
    flex-direction: row-reverse;
}

/* The dotted line using ::before */
.form-section-title::before {
    content: '';
    /* Allows the line to take up remaining space */
    border-bottom: 3px dotted var(--clr-border);
    /* Thickness of the line */
    /* Create dots using repeating gradient */
    width: 100%;

    /* Center vertically */
    /* Space between the end of the line and the text (RTL) */
    order: 1;
    /* Place the line *before* the text in the flex flow */
}

/* The text part */
.form-section-title .title-text-content {
    /* Style the inner span */
    order: 2;
    /* Place the text *after* the line in the flex flow */
    background-color: var(--clr-reg-form-bg);
    /* Crucial: Match form background */
    /* Space between the start of the text and where the line stops */
    /* Add padding-left if you want space after the text before the container edge */
    padding-left: 10px;
    white-space: nowrap;
    /* Prevent the title from wrapping */
    /* Ensure z-index is higher than pseudo element if they were to overlap */
    position: relative;
    z-index: 1;
}

/* Remove border-bottom if previously applied */
.form-section-title {
    border-bottom: none;
    padding-bottom: 0;
}

/* Adjust first title margin */
.form-section-title:first-of-type {
    margin-top: 0;
}

/* Ensure ft-row handles 3 items correctly */
.ft-row {
    display: flex;
    gap: 1.5rem;
    /* Adjust gap between columns */
    width: 100%;
    margin-bottom: 0 !important;
}

.ft-row>.ft-input-box {
    flex: 1;
    /* Make boxes share space equally */
    min-width: 0;
    /* Allow flex items to shrink */
    margin-bottom: 1rem;
    /* Add margin between rows */
}

/* Specific overrides if needed for 3 columns */
/* Maybe adjust flex-basis if you want different widths */

/* Category Info Display Box */
.category-info-box {
    /* Inherits flex: 1 from .ft-input-box */
    display: flex;
    flex-direction: column;
    /* Stack label and info box */
}

#category-info-display {
    border: 1px solid var(--clr-border);
    background-color: #f9f9f9;
    color: var(--clr-text-light);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0;
    /* Remove top margin if label is present */
    /* min-height is set inline for now */
    /* display: none; */
    /* Controlled by JS */
    width: 100%;
    /* Ensure it fills the box */
    flex-grow: 1;
    /* Allow it to take height */
}

#category-info-display h5 {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--clr-text);
    margin-bottom: 5px;
}

#category-info-display a {
    color: var(--clr-primary);
    font-weight: bold;
    text-decoration: underline;
    margin-top: 5px;
    display: inline-block;
}

/* Adjustments for mobile */
@media (max-width: 767px) {
    .ft-row {
        flex-direction: column;
        gap: 0;
    }
    .ft-row-two{
        flex-direction: row;
        gap: 10px;
        ;
    }
    .ft-row>.ft-input-box {
        margin-bottom: 1rem;
        /* Add margin back */
    }

    .category-info-box {
        margin-top: 0;
        /* Adjust spacing if needed */
    }

    #category-info-display {
        min-height: 60px;
        /* Adjust min height */
    }
    .ft-checkbox-contract label {
        font-size: 0.8rem;
        cursor: pointer;
    }
    .ft-step4-docs-note .text-normal {
        font-size: 14px;
    }
    .ft-file-display-area .file-chosen-name {
        font-size: 13px;
    }
    .ft-file-display-area .file-chosen-name {
        width: 135px;
    }
}

.entity-type-selection.error-pulse .styled-radio-label {
    border: 1px solid var(--clr-error) !important;
    /* Add border */
    animation: pulseError 0.5s ease-in-out 2;
}

@keyframes pulseError {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 128, 120, 0.5);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(231, 128, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 128, 120, 0);
    }
}

.registration-step {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}






/* Style for validated file display */
.validated-file-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #e8f5e9;
    /* Light green background */
    border: 1px solid #c8e6c9;
    /* Green border */
    border-radius: var(--border-radius);
    min-height: var(--input-height);
    /* Match input height */
    font-size: 0.9rem;
}

.validated-filename {
    color: #2e7d32;
    /* Darker green text */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.validated-filename i.icon-check {
    font-size: 1.2em;
}

.change-doc-btn {
    height: auto !important;
    /* Override default button height */
    min-width: auto !important;
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
    background-color: #ffffff !important;
    /* White button */
    color: var(--clr-secondary) !important;
    /* Theme secondary color */
    border: 1px solid var(--clr-secondary) !important;
}

.change-doc-btn:hover {
    background-color: #f5f5f5 !important;
}

.change-doc-btn i {
    margin-left: 4px;
}

/* Style for file info error text */
.file-info.error-text {
    color: var(--clr-error);
    font-weight: bold;
}







/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .site-title-fallback {
        margin: 1.5rem 0 0.5rem;
    }   
    .registration-layout-container {
        flex-direction: row;
        /* Stack navigator on top */
        width: max-content;
        min-height: initial;
    }

    .registration-step-navigator {
        flex: 0 0 auto;
        padding: 0;
        border-radius: 0 0 10px;
        box-shadow: inset 3px 0px 10px #10444775;
        /* Remove fixed width */
        /* width: 100%; */
        /* display: flex; */
        /* Arrange steps horizontally for small screens? Or keep vertical? */
        /* overflow-x: auto; */
        /* border-radius: 10px 10px 0 0; */
        /* Allow horizontal scroll if horizontal */
    }

    .navigator-list {
        display: flex
;
        width: 100%;
        justify-content: space-around;
        flex-direction: column;
    }

    .navigator-list li {
        flex-direction: column;
        /* Stack number/details */
        align-items: center;
        text-align: center;
        padding: 10px 15px;
        border-bottom: none;
        border-left: 1px solid var(--clr-reg-nav-border);
        /* Vertical separator */
        flex: 1;
        /* Share space */
        opacity: 0.7;
    }

    .navigator-list li:last-child {
        border-left: none;
    }

    .step-number {
        font-size: 1.8rem;
        margin-left: 0;
        margin: 5px;
    }

    .step-title {
        font-size: 0.85rem;
    }

    .step-subtitle {
        font-size: 0.7rem;
        display: none;
        /* Hide subtitle on small screens to save space */
    }

    .navigator-list li.active-step {
        background-color: var(--clr-reg-nav-active-bg);
        /* Remove bg color */
        opacity: 1;
        /* Add different indicator like underline or border */
        border-bottom: indianred;
        padding-bottom: 7px;
        /* Adjust padding for border */
    }

    .registration-form-content {
        padding: 30px 25px;
    }

    .registration-main-title {
        font-size: 1.3rem;
    }

    .registration-instruction {
        font-size: 0.9rem;
        text-align: justify;
    }
}

@media (max-width: 600px) {
    .site-title-fallback {
        margin: 1.5rem 0 0.5rem;
    }
    .registration-layout-container {
        width: 100%;
        margin: 10px 0;
        border-radius: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                display: flex
;
        flex-direction: row;
        border-radius: 0 10px 0 0;
    }

    .registration-form-content {
        padding: 15px;
        border-radius: 10px 0 0 10px;
        box-shadow: initial;
    }

    .registration-buttons {
        flex-direction: row;
        flex-direction: row-reverse;
                gap: 10px;
    }

    .registration-buttons .ft-btn {
        width: 100%;
        /* Full width buttons */
        min-width: initial;
    }

    .btn-prev {
        order: 2;
        /* Put prev button below next */
    }

    .btn-next {
        order: 1;
    }
    .registration-footer {
        flex-direction: column;
    }
    /* Adjust radio style padding for smaller screens */
    .styled-radio-label {
        padding: 12px;
    }

    .styled-radio-label .radio-option-title {
        font-size: 1rem;
        margin-right: 35px;
        top: 4px;
    }

    .styled-radio-label .radio-option-desc {
        font-size: 0.85rem;
    }

    .navigator-list li {
        padding: 8px 10px;
    }

    .step-number {
        font-size: 1.5rem;
    }

    .step-title {
        display: none;
    }
}


#entity-type-form,
#step4-docs-form,
#step5-address-form,
#step6-contract-form {
    min-height: 50vh;

    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
}

.ft-step4-docs-note {
    margin-bottom: 35px;
}

.ft-step4-docs-note .text-normal {
    font-size: 15px;
    display: flex
;
    gap: 10px;
    margin-bottom: 10px;
    align-items: baseline;
    text-align: justify;
    line-height: normal;

}
#max-filesize-display {
    font-size: 17px;
    font-weight: bold;
}
.ft-step4-docs-note i {
    font-size: 18px;
    color: #dbaa61;
    top: 4px;
    position: relative;
}

div#contract-display.contract-text-area { /* Target the DIV with the class */
    display: block; /* Ensure block layout */
    width: 100%;
    height: 340px; /* Adjust height as desired */
    padding: 15px; /* Maintain padding */
    border: 1px solid var(--clr-border); /* Use theme border */
    border-radius: var(--border-radius); /* Use theme border-radius */
    font-family: inherit; /* Inherit base font */
    font-size: 0.9rem; /* Adjust font size */
    line-height: 1.8; /* Adjust line height */
    color: var(--clr-text); /* Use theme text color */
    background-color: var(--clr-input-bg); /* Use theme input background */
    overflow-y: auto; /* Add scrollbar if content overflows */
    word-wrap: break-word; /* Ensure long words break */
    text-align: justify; /* Justify text */
}

/* Optional: Style specific HTML tags within the contract if needed */
div#contract-display.contract-text-area strong {
    font-weight: bold; /* Ensure strong tags are bold */
}
div#contract-display.contract-text-area br {
     content: ""; /* Ensure <br> works */
     display: block;
     margin-bottom: 0.6em; /* Adjust space created by <br> */
}
div#contract-display.contract-text-area p {
    margin-bottom: 1em; /* Add default paragraph spacing */
}
div#contract-display.contract-text-area ul {
    padding-right: 20px; /* Indent lists */
    margin-bottom: 1em;
}
div#contract-display.contract-text-area li {
    margin-bottom: 0.5em;
}


/* Ensure checkbox below div has adequate spacing */
.ft-checkbox-contract {
    display: flex;
    align-items: center;
    margin-top: 1rem; /* Add space above the checkbox */
    margin-bottom: 1rem;
    width: 100%;
    justify-content: right; /* Center checkbox */
}
.ft-checkbox-contract label {
    font-size: 0.9rem;
    cursor: pointer;
}



.ft-btn-gray {
    height: 45px;
    font-size: 0.9rem;
    background-color: var(--clr-reg-btn-prev-bg) !important;
    color: var(--clr-reg-btn-prev-text) !important;
    border: 1px solid var(--clr-reg-btn-prev-border) !important;
}

.ft-btn-gray:hover {
    background-color: #e0e0e0 !important;
    /* Slightly darker gray on hover */
}
.datepicker-plot-area{
    width: 223px;
    min-width: 200px;
    font: 14px vazirmatn;
    border: 1px solid #ccc;
    border-radius: 6px;}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; /* همیشه flex باشه */
    justify-content: center;
    align-items: center;
    z-index: 1050;
    padding: 15px;
    overflow-y: auto;

    /* --- کنترل نمایش و افکت با Transition --- */
    opacity: 0; /* شروع با حالت نامرئی */
    visibility: hidden; /* شروع با حالت غیرقابل دسترس */
    /*
       Transition برای opacity با سرعت 0.3 ثانیه.
       Transition برای visibility بلافاصله موقع باز شدن (delay: 0s)،
       و با تاخیر 0.3 ثانیه موقع بسته شدن (تا opacity صفر بشه).
    */
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

.popup.is-visible {
    opacity: 1; /* نمایش کامل */
    visibility: visible; /* قابل دسترس کردن */
    transition-delay: 0s; /* حذف تاخیر visibility موقع باز شدن */
}

.popup-content {
    background-color: var(--clr-white);
    padding: 25px 30px;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 650px; /* Adjust max width as needed */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    /* --- افکت بالا آمدن با Transition --- */
    transform: translateY(-20px); /* کمی بالاتر شروع بشه */
    opacity: 0; /* محتوای داخلی هم اول نامرئی باشه بهتره */
    /* Transition برای transform و opacity محتوا */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transition-delay: 0.05s; /* تاخیر کم برای نمایش محتوا بعد از پس‌زمینه */
}

.popup.is-visible .popup-content {
    transform: translateY(0); /* به جای اصلی برگرده */
    opacity: 1; /* محتوا نمایش داده بشه */
}

/* حذف انیمیشن قبلی چون دیگه لازم نیست */
/*
@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
*/

.popup-header {
    display: flex
    ;
        justify-content: space-between;
        font-family: 'Vazirmatn';
        align-items: baseline;
        border-bottom: 1px solid var(--clr-border);
        padding-bottom: 15px;
        margin-bottom: 20px;
}

.popup-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text-dark);
}


.close-popup {
    font-size: 1.3rem; /* کمی بزرگتر */
    line-height: 1;
    color: var(--clr-text-light);
    background: none; /* اطمینان از نداشتن پس‌زمینه */
    border: none; /* اطمینان از نداشتن بوردر */
    padding: 0; /* حذف پدینگ اضافی */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease; /* اضافه کردن ترنزیشن برای چرخش */
}
.close-popup:hover {
    color: var(--clr-error);
    transform: rotate(90deg); /* کمی چرخش موقع هاور */
}

.popup-form .ft-btn {
    height: var(--btn-height-normal);
}


.signatory-owners-popup-content .popup-description {
    font-size: 0.9rem;
    color: var(--clr-text-light);
    margin-bottom: 1rem;
    text-align: right;
}

#signatory-owners-list {
    max-height: 350px; 
    overflow-y: auto;
    padding-right: 10px; 
}

.signatory-owner {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dotted var(--clr-border); 
    position: relative; 
}
.signatory-owner:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.signatory-owner h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.remove-signatory-owner {
    position: absolute;
    left: 0;
    min-width: auto !important;
    padding: 5px 10px !important;
    height: 23px !important;
    margin-top: 5px !important;
    font-size: 0.85rem !important;
    background-color: var(--clr-error) !important;
    color: var(--clr-white) !important;
}
.remove-signatory-owner:hover {
    background-color: #d32f2f !important;
}
.remove-signatory-owner i {
    margin-left: 4px;
    font-size: 1em;
}

.popup-form .ft-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem !important;
}
.popup-buttons.ft-row {
    margin-bottom: 0 !important;
}
.popup-form .ft-row > .ft-input-box {
    margin-bottom: 0;
}
.popup-form .ft-input-box.active .ft-input-label,
.popup-form .ft-input-box.focus .ft-input-label {
    background-color: var(--clr-white); 
}


@media (max-width: 575px) {
     .popup-form .ft-row {
        flex-direction: column;
        gap: 1rem;
     }
     .popup-form .ft-row > .ft-input-box {
        margin-bottom: 0;
    }
}