/*
 * صفحه‌های خصوصی «پروژه‌های من» (project/templates/project/app/). اول گوشی، بعد md و lg.
 * روی گوشی کارت‌ها مثل ProjectCard اپ سفید و لبه‌به‌لبه‌اند، با فاصله‌ی باریک خاکستری بینشان؛
 * از md به بعد کارت‌ها گوشه‌دار و چندستونه‌اند.
 */

.project-new {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.project-cards {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f2f3f7;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.15rem 1.25rem 1rem;
    background: #fff;
}

.project-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.project-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.project-card-pill {
    padding: .35rem .9rem;
    border-radius: 999px;
    background: #2444ae;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.project-card-meta {
    color: #586079;
    font-size: .85rem;
}

.project-card-more,
.project-card-edit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    font-weight: 700;
    color: #2444ae;
}

.project-card-more {
    padding: 0;
    border: 0;
    background: none;
    font-size: .95rem;
    text-decoration: none;
}

.project-card-edit {
    padding: .35rem 1.1rem;
    text-decoration: none;
    border: 1.5px solid #2444ae;
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
}

.project-card-more:hover,
.project-card-edit:hover {
    color: #1a3285;
}

.project-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #586079;
}

.project-empty i {
    font-size: 2.5rem;
    color: #8c92a8;
}

.project-empty-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
}

@media (min-width: 768px) {
    .project-cards {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
        background: none;
    }

    .project-card {
        border: 1px solid #e3e6ee;
        border-radius: 16px;
    }
}

/* ===== فرم ساخت و ویرایش (project/templates/project/app/project_form.html) ===== */

.project-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-alert {
    margin: 0 .75rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: #fce4e5;
    color: #8f1d26;
    font-size: .9rem;
}

.pf-alert p {
    margin: 0 0 .25rem;
}

.pf-steps {
    position: sticky;
    /* زیر هدر ثابت ۹۰ پیکسلی می‌ایستد */
    top: 89px;
    z-index: 5;
    display: flex;
    gap: .4rem;
    padding: .5rem .75rem;
    overflow-x: auto;
    background: #f2f3f7;
}

.pf-steps a {
    flex-shrink: 0;
    padding: .35rem .8rem;
    border: 1.25px solid #c9cedc;
    border-radius: 999px;
    color: #454c63;
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
}

/* بخشی که کاربر الان در آن است؛ project-form.js با پیمایش جابه‌جایش می‌کند، بی‌اسکریپت اولی می‌ماند */
.pf-steps a.is-active {
    border-color: #2444ae;
    background: #2444ae;
    color: #fff;
    font-weight: 700;
}

.pf-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1rem 1.25rem;
    background: #fff;
    scroll-margin-top: 150px;
}

.pf-section {
    display: flex;
    align-items: center;
    gap: .6rem;
    /* نوار سرتیتر تا لبه‌های کارت می‌رود؛ همان پدینگ .pf-card منفی */
    margin: -1.1rem -1rem 0;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--pf-line, #e3e6ee);
    background: var(--pf-band, #f2f3f7);
    color: var(--pf-accent, #2444ae);
    font-size: 1.05rem;
    font-weight: 800;
}

/* هر بخش فرم نوار سرتیتر رنگی خودش را دارد و بدنه‌اش سفید می‌ماند، تا فرم بلند به چهار تکه‌ی جدا شکسته شود */
#pf-main {
    --pf-band: #e9eefc;
    --pf-line: #d3dcf6;
    --pf-accent: #2444ae;
}

#pf-areas {
    --pf-band: #e4f4eb;
    --pf-line: #c8e6d4;
    --pf-accent: #1e7a4f;
}

#pf-specs {
    --pf-band: #fbf0dc;
    --pf-line: #f0dcb4;
    --pf-accent: #94590a;
}

#pf-old {
    --pf-band: #efe9f9;
    --pf-line: #ddd1f1;
    --pf-accent: #6a42a8;
}

.pf-section i {
    font-size: 1.35rem;
}

.pf-guide {
    margin: 0;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: #f7f8fb;
    color: #586079;
    font-size: .8rem;
    line-height: 1.8;
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem;
}

.pf-wide {
    grid-column: 1 / -1;
}

.pf-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.pf-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #454c63;
}

.pf-label b {
    margin-inline-start: .2rem;
    color: #c42e37;
}

.pf-field input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: .5rem .75rem;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #eeeff3;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    color: #171b2e;
}

.pf-field input:focus {
    outline: none;
    border-color: #2444ae;
    background: #fff;
}

.pf-field[data-auto].is-auto input {
    border: 1.5px dashed #2444ae;
    background: #fff;
}

.pf-field.is-invalid input {
    border-color: #c42e37;
    background: #fff;
}

.pf-badge {
    padding: 0 .5rem;
    border-radius: 999px;
    background: #dde1ff;
    color: #2444ae;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.6rem;
}

.pf-badge.is-manual {
    background: #e6e8ef;
    color: #171b2e;
}

.pf-reset {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: #2444ae;
    font-size: .8rem;
    font-weight: 700;
}

.pf-hint,
.pf-soon {
    margin: 0;
    color: #586079;
    font-size: .75rem;
    line-height: 1.7;
}

.pf-error {
    margin: 0;
    color: #a3222b;
    font-size: .8rem;
}

.pf-warning {
    margin: 0;
    padding: .4rem .65rem;
    border-radius: 9px;
    background: #ffefcf;
    color: #6b4100;
    font-size: .8rem;
    line-height: 1.7;
}

.pf-info summary {
    width: max-content;
    color: #2444ae;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}

.pf-info p,
.pf-info ul {
    margin: .35rem 0 0;
    color: #454c63;
    font-size: .8rem;
    line-height: 1.8;
}

.pf-extras summary {
    width: max-content;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: #2444ae;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.pf-extras[open] summary {
    margin-bottom: .75rem;
}

.pf-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #586079;
    font-size: .75rem;
}

.pf-group::before,
.pf-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e3e6ee;
}

.pf-total {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: #c3e7ff;
    color: #0b3a52;
}

.pf-total.is-invalid {
    background: #fce4e5;
    color: #8f1d26;
}

.pf-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
}

.pf-total-row b {
    font-size: 1.25rem;
    font-weight: 800;
}

.pf-total-row small,
.pf-total p {
    font-size: .75rem;
    font-weight: 500;
    margin: 0;
}

/* انتخاب‌ها: رادیوی واقعی، پنهان ولی قابل تمرکز؛ برچسب کنارش دکمه است */
.pf-choice {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.pf-choice legend {
    margin-bottom: .1rem;
    font-size: .9rem;
    font-weight: 700;
}

.pf-options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pf-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pf-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 40px;
    padding: .35rem .8rem;
    border: 1.25px solid #a9b0c3;
    border-radius: 10px;
    background: #fff;
    font-size: .85rem;
    text-align: center;
    cursor: pointer;
}

.pf-radio:checked + .pf-option {
    border-color: #2444ae;
    background: #2444ae;
    color: #fff;
    font-weight: 700;
}

.pf-radio:focus-visible + .pf-option {
    outline: 2px solid #2444ae;
    outline-offset: 2px;
}

.pf-radio:disabled + .pf-option {
    border-style: dashed;
    border-color: #c9cedc;
    color: #8c92a8;
    cursor: not-allowed;
}

.pf-option small {
    font-size: .7rem;
}

.pf-choice.is-invalid .pf-radio:checked + .pf-option {
    border-color: #c42e37;
    background: #c42e37;
}

.pf-segmented .pf-options {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.pf-cards .pf-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-cards .pf-option {
    min-height: 56px;
}

/* بنای قدیمی: فیلدها فقط وقتی «دارد» انتخاب شده؛ بدون :has همه دیده می‌شوند */
.pf-old:has(input[name="has_old_building"][value="0"]:checked) .pf-old-fields {
    display: none;
}

.pf-submit {
    position: sticky;
    bottom: calc(var(--site-tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    border-top: 1px solid #d6dae6;
    background: #fff;
}

.pf-summary {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #454c63;
    font-size: .8rem;
}

.pf-submit .btn {
    min-width: 10rem;
    min-height: 48px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .pf-card {
        overflow: hidden;
        border: 1px solid var(--pf-line, #e3e6ee);
        border-radius: 16px;
        padding: 1.25rem 1.5rem;
    }

    .pf-section {
        margin: -1.25rem -1.5rem 0;
        padding: .9rem 1.5rem;
    }

    .pf-alert,
    .pf-steps {
        margin-inline: 0;
    }

    .pf-cards .pf-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* روی صفحه‌ی پهن، دو سه گزینه‌ی کنار هم (دارد / ندارد) تمام عرض را نمی‌گیرند */
    .pf-segmented .pf-options {
        justify-content: start;
        grid-auto-columns: minmax(7rem, 11rem);
    }

    .pf-submit .btn {
        min-width: 14rem;
        min-height: 52px;
        font-size: 1.05rem;
    }

    .pf-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pf-grid .pf-wide {
        grid-column: span 2;
    }
}

@media (min-width: 992px) {
    .project-form {
        max-width: 960px;
    }

    .pf-submit {
        bottom: 0;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
    }
}

/* دکمه‌ی اصلی فرم عمومی «برآورد هزینه‌ی ساخت»: قرص سبز پررنگ تا از بقیه‌ی دکمه‌ها جدا دیده شود. روی گوشی خلاصه‌ی
   متراژ بالای دکمه است و دکمه تمام‌عرض. */
.pf-submit-cta {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
}

.pf-submit-cta .pf-summary {
    text-align: center;
}

.pf-submit-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #1f9d5c, #157347);
    box-shadow: 0 6px 18px rgba(21, 115, 71, .35);
    font-size: 1.05rem;
    font-weight: 700;
}

.pf-submit-cta .btn .bi {
    font-size: 1.2rem;
}

.pf-submit-cta .btn:hover,
.pf-submit-cta .btn:focus-visible {
    background: linear-gradient(135deg, #198754, #11603b);
    box-shadow: 0 8px 22px rgba(21, 115, 71, .45);
}

@media (min-width: 768px) {
    .pf-submit-cta {
        flex-direction: row;
        align-items: center;
        padding: .9rem 1.25rem;
    }

    .pf-submit-cta .pf-summary {
        text-align: start;
        font-size: .9rem;
    }

    .pf-submit-cta .btn {
        width: auto;
        min-width: 20rem;
        min-height: 58px;
        padding-inline: 2rem;
        font-size: 1.15rem;
    }
}

/* دکمه‌ی دستیار (assistant/widget.html) گوشه‌ی پایین است و روی «ذخیره»ی نوار پایین فرم می‌افتاد */
body:has(.pf-submit) #tabam-assistant-fab {
    bottom: calc(var(--site-tabbar-h) + 76px + env(safe-area-inset-bottom, 0px));
}

/* ===== برآورد پروژه (project/templates/project/app/project_estimate.html) ===== */

.pe-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* خلاصه فقط از lg؛ روی گوشی مثل اپ جمع‌ها در نوار پایین‌اند */
.pe-summary {
    display: none;
}

.pe-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pe-tabs {
    display: flex;
    border-bottom: 1px solid #d6dae6;
}

.pe-tab {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    color: #454c63;
    font-size: 1rem;
    text-decoration: none;
}

.pe-tab.is-active {
    border-bottom-color: #2444ae;
    color: #2444ae;
    font-weight: 700;
}

.pe-items {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f2f3f7;
}

.pe-item {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1.25rem .9rem;
    background: #fff;
}

.pe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.pe-item-title {
    font-size: 1rem;
    font-weight: 500;
}

.pe-meta {
    color: #171b2e;
    font-size: .9rem;
}

.pe-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    flex-shrink: 0;
    color: #2444ae;
    font-weight: 700;
    text-decoration: none;
}

.pe-empty {
    margin: 0;
    padding: 2rem 1.25rem;
    color: #586079;
    text-align: center;
}

.pe-bar {
    position: sticky;
    bottom: calc(var(--site-tabbar-h) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem 1.5rem 1rem;
    border-top: 1px solid #d6dae6;
    background: #f2f3f7;
    font-size: .95rem;
}

.pe-bar b {
    font-size: 1rem;
}

.pe-grand {
    padding-top: .55rem;
    border-top: 1px solid #d6dae6;
    color: #c42e37;
    font-weight: 700;
}

.pe-date {
    margin: 0;
    color: #586079;
    font-size: .75rem;
    text-align: center;
}

@media (min-width: 992px) {
    .pe-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .pe-summary {
        display: flex;
        flex-direction: column;
        gap: .9rem;
        flex: 0 0 300px;
        padding: 1.25rem;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        background: #fff;
    }

    .pe-main {
        flex: 1;
        overflow: hidden;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        background: #fff;
    }

    .pe-bar {
        position: static;
    }
}

.pe-figure {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.pe-figure span {
    color: #586079;
    font-size: .8rem;
}

.pe-figure b {
    font-size: 1.3rem;
    font-weight: 800;
}

.pe-figure-total b {
    color: #c42e37;
    font-size: 1.6rem;
}

.pe-figure small {
    font-size: .8rem;
    font-weight: 500;
}

.pe-specs {
    margin: 0;
}

.pe-specs div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid #edeff4;
    font-size: .85rem;
}

.pe-specs dt {
    font-weight: 400;
    color: #586079;
}

.pe-specs dd {
    margin: 0;
    font-weight: 700;
    text-align: left;
}

/* ===== جزئیات یک ردیف (project/templates/project/app/project_item.html) ===== */

.pi-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem 1.25rem 1.5rem;
    background: #fff;
}

.pi-amount {
    margin: 0;
    color: #454c63;
}

.pi-table-wrap {
    overflow-x: auto;
    border: 1px solid #d6dae6;
    border-radius: 12px;
}

.pi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.pi-table th,
.pi-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid #e3e6ee;
    text-align: right;
    vertical-align: top;
}

.pi-table th {
    background: #f7f8fb;
    color: #586079;
    font-size: .8rem;
}

.pi-table tr:last-child td {
    border-bottom: 0;
}

.pi-table td span {
    display: block;
    color: #586079;
    font-size: .8rem;
}

.pi-table td:last-child {
    white-space: nowrap;
}

.pi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.pi-total {
    padding-top: .75rem;
    border-top: 1px solid #d6dae6;
    font-weight: 700;
}

.pi-description h2 {
    margin: 0 0 .25rem;
    font-size: .9rem;
    font-weight: 700;
}

.pi-description p {
    margin: 0;
    color: #454c63;
    font-size: .9rem;
    line-height: 1.85;
}

.pi-back {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #2444ae;
    font-weight: 700;
    text-decoration: none;
}

@media (min-width: 768px) {
    .pi-card {
        max-width: 720px;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
    }
}

/* ===== برآورد مهمان و ذخیره‌ی آن (blog/building_cost_estimate.html، project_from_estimate.html) ===== */

/* خلاصه این‌جا روی گوشی هم دیده می‌شود، چون دکمه‌ی ذخیره و سهم مصالح و دستمزد در آن است */
.pe-summary.is-open {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: #fff;
}

.pe-split {
    margin: 0;
    color: #454c63;
    font-size: .85rem;
}

.pe-actions,
.pf-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pe-actions .btn,
.pf-actions .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 700;
}

.pe-note {
    margin: 0;
    color: #586079;
    font-size: .75rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .pf-actions {
        flex-direction: row;
    }

    .pf-actions .btn {
        min-width: 10rem;
    }
}

@media (min-width: 992px) {
    .pe-summary.is-open {
        gap: .9rem;
        padding: 1.25rem;
    }
}

/* ===== صفحه‌ی عمومی «برآورد هزینه‌ی ساخت» (blog/building_cost.html) ===== */

/* خط راهنمای بالای فرم عمومی؛ رنگی و پررنگ تا پیش از فرم دیده شود */
.bc-lead {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-inline-start: 4px solid #2444ae;
    border-radius: 12px;
    background: #eef1fb;
    color: #2444ae;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.9;
}

.bc-samples,
.bc-article {
    margin-top: 2rem;
}

/* ویدیوی آموزش بالای فرم؛ کادر ۱۶:۹ تمام‌عرض تا فایل و iframe آپارات یک اندازه داشته باشند */
.bc-video {
    margin: 0 0 1rem;
}

.bc-video video,
.bc-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    background: #000;
}

.bc-video figcaption {
    margin-top: .5rem;
    color: #6b7280;
    font-size: .85rem;
}

/* صفحه‌ی عمومی، برخلاف صفحه‌های خصوصی اپ، روی گوشی هم حاشیه دارد تا متن مقاله و راهنما به لبه‌ها نچسبد؛
   کارت‌های فرم هم برای همین قاب و گوشه‌ی گرد می‌گیرند */
.bc-page.container {
    padding-inline: 1rem;
}

.bc-page .pf-card {
    overflow: hidden;
    border: 1px solid #e3e6ee;
    border-radius: 16px;
}

/* از lg ستون صفحه هم‌عرض فرم (۹۶۰ پیکسل) و وسط‌چین است؛ سرِ صفحه، نمونه‌ها و مقاله هم زیر همان فرم می‌نشینند */
@media (min-width: 992px) {
    .bc-page.container {
        max-width: calc(960px + var(--bs-gutter-x));
        padding-inline: calc(var(--bs-gutter-x) * .5);
    }
}