:root {
    --c-primary: #0d9488;
    --c-primary-dark: #0f766e;
    --c-primary-darker: #115e59;
    --c-primary-light: #5eead4;
    --c-primary-soft: #ccfbf1;
    --c-primary-softer: #f0fdfa;
    --c-accent: #fb7185;
    --c-accent-dark: #e11d48;
    --c-accent-soft: #ffe4e6;
    --c-warm: #f59e0b;
    --c-warm-soft: #fef3c7;
    --c-success: #16a34a;
    --c-success-soft: #dcfce7;
    --c-danger: #dc2626;
    --c-danger-soft: #fee2e2;
    --c-info: #0ea5e9;
    --c-text: #1a2e2c;
    --c-text-mid: #3f5a56;
    --c-text-muted: #7c9a95;
    --c-border: #d9ebe7;
    --c-border-soft: #ecf7f4;
    --c-white: #ffffff;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(13, 148, 136, 0.05);
    --shadow-sm: 0 2px 8px rgba(13, 148, 136, 0.08);
    --shadow-md: 0 8px 24px rgba(13, 148, 136, 0.12);
    --font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif !important;
    --container-max: 100%;
    --container-pad: 14px;
}

@media (min-width: 640px) {
    :root {
        --container-max: 640px;
        --container-pad: 20px;
    }
}

@media (min-width: 992px) {
    :root {
        --container-max: 940px;
        --container-pad: 24px;
    }
}

@media (min-width: 1280px) {
    :root {
        --container-max: 1040px;
    }
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    direction: rtl;
}

body {
    font-family: var(--font);
    direction: rtl !important;
    font-feature-settings: "ss01" on, "ss02" on;
    color: var(--c-text);
    line-height: 1.6;
    font-size: 13.5px;
    font-weight: 400;
    background: #f6fbfa;
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(13, 148, 136, 0.13), transparent), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(251, 113, 133, 0.09), transparent), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(245, 158, 11, 0.07), transparent);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
}

#form1,
.RadAjaxPanel,
.RadAjaxPanel_Bootstrap,
div[id$="RadAjaxPanel1"],
div[id$="RadAjaxPanel2"],
.RadAjaxLoadingPanel,
.RadAjaxLoadingPanel_Bootstrap {
    background: transparent !important;
}

/* ============================================================
           HEADER — ساده و تمیز، غیر استیکی
           ============================================================ */
.app-header {
    background: #ffffff;
    border-bottom: 1px solid var(--c-border-soft);
    width: 100%;
}

.app-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px var(--container-pad);
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-header-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--c-primary-softer);
    border: 1px solid var(--c-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
}

    .app-header-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.app-header-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-header-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.app-header-slogan {
    font-size: 11px;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 400;
}

.app-header-link {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--c-primary-softer);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.2s;
    font-size: 12.5px;
    border: 1px solid var(--c-primary-soft);
}

    .app-header-link:hover {
        background: var(--c-primary);
        color: #fff !important;
        border-color: var(--c-primary);
    }
.app-header-name:hover {
    color: var(--c-primary);
}
@media (min-width: 640px) {
    .app-header-inner {
        padding: 12px var(--container-pad);
        gap: 12px;
    }

    .app-header-logo {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        padding: 6px;
    }

    .app-header-name {
        font-size: 15px;
    }

    .app-header-slogan {
        font-size: 11.5px;
    }

    .app-header-link {
        width: 38px;
        height: 38px;
        font-size: 13.5px;
        border-radius: 10px;
    }
}

/* ============================================================
           MAIN
           ============================================================ */
.app-main {
    flex: 1 0 auto;
    padding: 20px 0 40px;
}

@media (min-width: 640px) {
    .app-main {
        padding-top: 28px;
        padding-bottom: 56px;
    }
}

@media (min-width: 992px) {
    .app-main {
        padding-top: 36px;
        padding-bottom: 72px;
    }
}

.app-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    width: 100%;
}

/* ============================================================
           FOOTER
           ============================================================ */
.app-footer {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(217, 235, 231, 0.5);
    padding: 20px 0 22px;
    flex-shrink: 0;
}

.app-footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.app-footer-link {
    color: var(--c-text-muted);
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

    .app-footer-link i {
        color: var(--c-primary);
        font-size: 13px;
    }

    .app-footer-link:hover {
        color: var(--c-primary-dark);
    }

.app-footer-copy {
    width: 100%;
    text-align: center;
    font-size: 11.5px;
    color: var(--c-text-muted);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(217, 235, 231, 0.4);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .app-footer-copy .heart {
        color: var(--c-accent);
        font-size: 12px;
        animation: heartBeat 1.6s ease-in-out infinite;
    }
    .heart {
        color: var(--c-accent);
        font-size: 12px;
        animation: heartBeat 1.6s ease-in-out infinite;
    }
@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

/* ============================================================
           Utility
           ============================================================ */
.dr-rtl {
    direction: rtl;
    text-align: right;
}

.dr-ltr {
    direction: ltr;
    text-align: left;
}

.d-none {
    display: none !important;
}

.display-none {
    display: none !important;
}

/* ---------- فرم ---------- */
.field {
    margin-bottom: 8px;
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-mid);
    margin-bottom: 4px;
}

.input-wrap {
    display: flex;
    align-items: stretch;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

    .input-wrap:focus-within {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px var(--c-primary-soft);
    }

    .input-wrap .input-icon {
        background: var(--c-primary-softer);
        color: var(--c-primary);
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        min-width: 38px;
    }

    .input-wrap .form-control,
    .input-wrap input,
    .input-wrap textarea {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 9px 12px;
        font-size: 13.5px;
        font-family: var(--font);
        color: var(--c-text);
        width: 100%;
        outline: none;
    }

@media (min-width: 640px) {
    .input-wrap .form-control,
    .input-wrap input,
    .input-wrap textarea {
        padding: 10px 14px;
        font-size: 14px;
    }
}

.input-wrap textarea {
    min-height: 60px;
    resize: vertical;
    line-height: 1.6;
}

    .input-wrap input::placeholder,
    .input-wrap textarea::placeholder {
        color: var(--c-text-muted);
    }

/* ---------- دکمه‌ها ---------- */
.btn-primary-modern {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
    color: #fff !important;
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
}

    .btn-primary-modern:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(13, 148, 136, 0.30);
        color: #fff;
    }

@media (min-width: 640px) {
    .btn-primary-modern {
        padding: 10px 22px;
        font-size: 14px;
    }
}

.btn-outline-modern {
    background: var(--c-white);
    color: var(--c-primary) !important;
    border: 1.2px solid var(--c-primary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    width: 100%;
}

    .btn-outline-modern:hover {
        background: var(--c-primary);
        color: #fff !important;
    }

/* ---------- Validation ---------- */
.fieldvalidator {
    display: block;
    color: var(--c-danger);
    font-size: 11px;
    margin-top: 3px;
    font-weight: 500;
}

/* ---------- Telerik Override ---------- */
.RadGrid_Bootstrap {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--c-border-soft) !important;
    font-family: var(--font) !important;
}

/* ---------- Loader ---------- */
.ajax-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 14px;
}

.loader {
    width: 28px;
    height: 28px;
    border: 3px solid var(--c-primary-soft);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: loaderSpin 0.9s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}