/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family: "Vazirmatn", sans-serif;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(32, 214, 178, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(32, 214, 178, 0.04),
            transparent 30%
        ),
        #06130f;

    color: #effffb;

    line-height: 1.8;
}

button,
input {
    font-family: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =====================================================
   VARIABLES
===================================================== */

:root {
    --bg: #06130f;
    --card: rgba(10, 34, 28, 0.84);
    --card-light: rgba(13, 42, 34, 0.9);

    --primary: #20d6b2;
    --primary-dark: #0ea58e;
    --primary-soft: rgba(32, 214, 178, 0.09);

    --gold: #c7a65a;

    --text: #effffb;
    --muted: #78958e;
    --muted-light: #a8bbb6;

    --border: rgba(59, 221, 191, 0.13);

    --danger: #ff7676;
    --success: #5ee7ad;
}


/* =====================================================
   HEADER
===================================================== */

.header {
    width: 100%;

    min-height: 70px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(59, 221, 191, 0.08);

    background: rgba(4, 18, 14, 0.88);

    backdrop-filter: blur(18px);
}

.logo {
    display: flex;
    align-items: center;

    gap: 12px;
}

.logo-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #04251d;
    background: var(--primary);

    font-size: 17px;
    font-weight: 900;

    box-shadow:
        0 8px 25px rgba(32, 214, 178, 0.13);
}

.logo-text h2 {
    font-size: 14px;
    font-weight: 800;
}

.logo-text span {
    display: block;

    color: var(--muted);

    font-size: 8px;
}

.back-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--muted-light);

    font-size: 10px;

    transition: 0.25s ease;
}

.back-home:hover {
    color: var(--primary);
}


/* =====================================================
   PAGE
===================================================== */

.register-page {
    min-height: calc(100vh - 70px);

    padding: 60px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.register-wrapper {
    width: min(950px, 100%);

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 16px;
}


/* =====================================================
   INTRO
===================================================== */

.intro-card {
    position: relative;

    overflow: hidden;

    padding: 48px 42px;

    border: 1px solid var(--border);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(32, 214, 178, 0.09),
            transparent 40%
        ),
        var(--card);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(32, 214, 178, 0.05);

    filter: blur(30px);
}

.intro-badge {
    width: fit-content;

    padding: 6px 11px;

    margin-bottom: 20px;

    border: 1px solid rgba(32, 214, 178, 0.18);

    border-radius: 999px;

    color: var(--primary);

    background: rgba(32, 214, 178, 0.04);

    font-size: 9px;
    font-weight: 700;
}

.intro-card h1 {
    position: relative;

    font-size: 39px;

    line-height: 1.45;

    font-weight: 900;

    margin-bottom: 18px;
}

.intro-card h1 span {
    color: var(--primary);
}

.intro-card > p {
    position: relative;

    max-width: 400px;

    color: var(--muted);

    font-size: 11px;

    line-height: 2.1;

    margin-bottom: 25px;
}

.intro-note {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 14px;

    border: 1px solid rgba(199, 166, 90, 0.12);

    border-radius: 13px;

    background: rgba(199, 166, 90, 0.025);
}

.note-icon {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--gold);

    border: 1px solid rgba(199, 166, 90, 0.25);

    font-size: 11px;
    font-weight: 800;
}

.intro-note strong {
    display: block;

    color: var(--gold);

    font-size: 10px;

    margin-bottom: 2px;
}

.intro-note p {
    color: var(--muted);

    font-size: 8px;

    line-height: 1.8;
}


/* =====================================================
   REGISTER CARD
===================================================== */

.register-card {
    padding: 35px;

    border: 1px solid var(--border);

    border-radius: 22px;

    background: var(--card-light);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.18);

    animation: fadeUp 0.7s ease both;
}

.form-header {
    margin-bottom: 25px;
}

.label {
    color: var(--primary);

    font-size: 9px;
    font-weight: 700;
}

.form-header h2 {
    font-size: 28px;

    font-weight: 900;

    margin-top: 3px;
}

.form-header p {
    color: var(--muted);

    font-size: 9px;

    margin-top: 2px;
}


/* =====================================================
   FORM
===================================================== */

.field {
    margin-bottom: 14px;
}

.field label {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 5px;

    color: #bed0cb;

    font-size: 9px;
    font-weight: 600;
}

.field label small {
    color: #607a73;

    font-size: 7px;
    font-weight: 400;
}

.field input {
    width: 100%;

    height: 44px;

    padding: 0 13px;

    border: 1px solid rgba(59, 221, 191, 0.10);

    outline: none;

    border-radius: 10px;

    background: rgba(3, 18, 14, 0.75);

    color: var(--text);

    font-size: 10px;

    transition: 0.25s ease;
}

.field input::placeholder {
    color: #4f6862;
}

.field input:focus {
    border-color: rgba(32, 214, 178, 0.48);

    background: rgba(4, 21, 17, 0.92);

    box-shadow:
        0 0 0 3px rgba(32, 214, 178, 0.05);
}


/* =====================================================
   PASSWORD
===================================================== */

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-left: 45px;
}

.toggle-password {
    position: absolute;

    left: 8px;
    top: 50%;

    transform: translateY(-50%);

    width: 30px;
    height: 30px;

    border-radius: 7px;

    color: #718983;

    background: transparent;

    cursor: pointer;

    font-size: 11px;

    transition: 0.2s ease;
}

.toggle-password:hover {
    color: var(--primary);
    background: rgba(32, 214, 178, 0.05);
}

.password-strength {
    margin-top: 6px;
}

.strength-bar {
    height: 3px;

    overflow: hidden;

    border-radius: 99px;

    background: rgba(255, 255, 255, 0.05);
}

.strength-bar span {
    display: block;

    height: 100%;

    width: 0%;

    border-radius: inherit;

    background: var(--primary);

    transition: 0.3s ease;
}

.password-strength small {
    color: #58726b;

    font-size: 7px;
}


/* =====================================================
   TERMS
===================================================== */

.terms {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin: 17px 0;

    color: #7f9892;

    font-size: 8px;

    cursor: pointer;
}

.terms input {
    margin-top: 4px;

    accent-color: var(--primary);

    cursor: pointer;
}


/* =====================================================
   MESSAGE
===================================================== */

.form-message {
    display: none;

    margin-bottom: 13px;

    padding: 10px 12px;

    border-radius: 9px;

    font-size: 8px;

    line-height: 1.8;
}

.form-message.show {
    display: block;
}

.form-message.error {
    color: #ffc0c0;

    border: 1px solid rgba(255, 118, 118, 0.14);

    background: rgba(255, 118, 118, 0.05);
}

.form-message.success {
    color: #aff3d0;

    border: 1px solid rgba(94, 231, 173, 0.14);

    background: rgba(94, 231, 173, 0.05);
}


/* =====================================================
   SUBMIT
===================================================== */

.submit-btn {
    width: 100%;

    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 10px;

    background: var(--primary);

    color: #04251d;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.25s ease;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(32, 214, 178, 0.15);
}

.submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.loader {
    display: none;

    width: 13px;
    height: 13px;

    border: 2px solid rgba(4, 37, 29, 0.25);
    border-top-color: #04251d;

    border-radius: 50%;

    animation: spin 0.7s linear infinite;
}

.submit-btn.loading .loader {
    display: block;
}


/* =====================================================
   LOGIN
===================================================== */

.login-link {
    margin-top: 17px;

    text-align: center;

    color: #617a74;

    font-size: 8px;
}

.login-link a {
    color: var(--primary);

    font-weight: 700;

    margin-right: 4px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 800px) {

    .register-wrapper {
        grid-template-columns: 1fr;
    }

    .intro-card {
        padding: 32px;
    }

    .intro-card h1 {
        font-size: 32px;
    }

}


@media (max-width: 520px) {

    .header {
        padding: 0 18px;
    }

    .logo-text {
        display: none;
    }

    .register-page {
        padding: 30px 12px;
    }

    .register-card,
    .intro-card {
        padding: 24px 20px;

        border-radius: 17px;
    }

    .intro-card {
        display: none;
    }

    .form-header h2 {
        font-size: 25px;
    }

}
/* =========================================================
   ALMAHDI — MASTER VISUAL THEME
   GEOMETRIC BACKGROUND + GREEN PREMIUM STYLE
   بدون تغییر Layout / Icon Size / Icon Position
========================================================= */


/* =========================================================
   COLORS
========================================================= */

:root {
    --master-bg: #f3faf7;
    --master-primary: #18b98d;
    --master-primary-dark: #0d8f6d;
    --master-text: #12382d;
    --master-muted: #648078;
    --master-border: rgba(24,185,141,.15);
}


/* =========================================================
   BASE
========================================================= */

html {
    background: var(--master-bg) !important;
}

body {

    background-color:
        var(--master-bg) !important;

    color:
        var(--master-text);

    position: relative;

    overflow-x: hidden;
}


/* =========================================================
   ⭐ GEOMETRIC BACKGROUND
   این بخش طرح اصلی را به همه صفحات می‌دهد
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;

    opacity: .22;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23117e5f' stroke-width='0.8' opacity='.72'%3E%3Cpath d='M22.5 0L45 13L67.5 0L90 13L90 39L67.5 52L67.5 78L45 90L22.5 78L0 90L0 64L22.5 51L22.5 26L0 13L22.5 0Z'/%3E%3Cpath d='M22.5 26L45 39L67.5 26L67.5 52L45 65L22.5 52Z'/%3E%3Cpath d='M0 39L22.5 26L45 39L45 65L22.5 78L0 65Z'/%3E%3Cpath d='M45 13L45 39L67.5 52L90 39'/%3E%3Cpath d='M22.5 51L45 39L67.5 52'/%3E%3C/g%3E%3C/svg%3E"),

        radial-gradient(
            circle at 15% 10%,
            rgba(24,185,141,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(24,185,141,.08),
            transparent 30%
        );

    background-repeat:
        repeat,
        no-repeat,
        no-repeat;

    background-size:
        135px 135px,
        auto,
        auto;

    background-position:
        center top,
        top left,
        bottom right;
}


/* =========================================================
   صفحه‌های اصلی را شفاف می‌کنیم
   تا هندسه پشتشان دیده شود
   این بخش به کارت‌ها دست نمی‌زند
========================================================= */

main,
.page,
.main,
.container,
.gallery-container,
.login-page,
.content,
.site-main,
.main-content {

    background:
        transparent !important;
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

body > * {

    position: relative;
    z-index: 1;
}


/* =========================================================
   MASTER VARIABLES
========================================================= */

body {

    --primary:
        var(--master-primary);

    --primary-dark:
        var(--master-primary-dark);

    --text:
        var(--master-text);

    --muted:
        var(--master-muted);

    --border:
        var(--master-border);
}


/* =========================================================
   HEADER
========================================================= */

.header,
.topbar,
.site-header {

    background:
        rgba(248,253,250,.90) !important;

    border-color:
        rgba(24,185,141,.13) !important;

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   NAV
========================================================= */

.header nav a,
.nav a,
.site-nav a,
.sidebar-nav a {

    color:
        #58756b !important;
}

.header nav a:hover,
.header nav a.active,
.nav a:hover,
.nav a.active,
.site-nav a:hover,
.site-nav a.active,
.sidebar-nav a:hover,
.sidebar-nav a.active {

    color:
        var(--master-primary) !important;
}


/* =========================================================
   CARDS
   اندازه و جای آیکون‌ها دست نخورده
========================================================= */

.card,
.panel,
.stat-card,
.category-card,
.image-card,
.login-card,
.featured,
.upload-panel,
.toolbar,
.posts-panel,
.welcome-card,
.about-card,
.program-card,
.contact-card,
.servant-card,
.gallery-item,
.memories-section,
.hero-card,
.modal-card,
.modalbox {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(237,248,243,.96)
        ) !important;

    border-color:
        var(--master-border) !important;

    box-shadow:
        0 18px 50px
        rgba(4,58,44,.10) !important;
}


/* =========================================================
   GREEN ELEMENTS
========================================================= */

.primary-btn,
.green-btn,
.read,
.view-gallery,
.search button {

    background:
        var(--master-primary) !important;

    color:
        #ffffff !important;
}


.primary-btn:hover,
.green-btn:hover,
.read:hover {

    background:
        var(--master-primary-dark) !important;
}


/* =========================================================
   LABELS / TITLES
========================================================= */

.label,
.eyebrow,
.tag,
.hero-small,
.category-count,
.cardtext label,
.category-info h3,
.section-heading > span,
.section-heading h2 span {

    color:
        var(--master-primary) !important;
}


/* =========================================================
   INPUTS
========================================================= */

input,
textarea,
select {

    background:
        rgba(250,254,252,.96) !important;

    color:
        var(--master-text) !important;

    border-color:
        var(--master-border) !important;
}


/* =========================================================
   ICONS
   ⚠️ فقط رنگ
   ❌ بدون width
   ❌ بدون height
   ❌ بدون position
   ❌ بدون margin
   ❌ بدون padding
========================================================= */

.logo-icon,
.brand-mark,
.brand-icon,
.quick-icon,
.servant-avatar,
.login-icon,
.admin-avatar,
.avatar,
.nav-icon,
.search-btn,
.menu-btn {

    color:
        var(--master-primary) !important;
}


/* =========================================================
   ICON BOX
========================================================= */

.logo-icon,
.brand-mark,
.brand-icon,
.quick-icon,
.servant-avatar,
.login-icon,
.admin-avatar,
.avatar {

    background:
        rgba(24,185,141,.09) !important;

    border-color:
        rgba(24,185,141,.18) !important;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    border-color:
        rgba(24,185,141,.16) !important;

    box-shadow:
        0 25px 75px
        rgba(3,55,42,.12) !important;
}


/* =========================================================
   TEXT
========================================================= */

.hero p,
.cardtext p,
.category-info p,
.topbar p,
.section-heading p,
.panel > small,
.feature-text p,
.modalbody p,
.modalbody div {

    color:
        var(--master-muted) !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

.ghost-btn,
.back-btn,
.small-btn,
.secondary-btn {

    border-color:
        var(--master-border) !important;

    color:
        var(--master-text) !important;
}


/* =========================================================
   GALLERY / IMAGE
========================================================= */

.category-card,
.image-card,
.gallery-item {

    overflow: hidden;
}


/* =========================================================
   FOOTER
========================================================= */

footer,
.footer {

    background:
        rgba(243,250,247,.90) !important;

    border-color:
        rgba(24,185,141,.12) !important;
}


/* =========================================================
   MODAL
========================================================= */

.modal {

    background:
        rgba(3,24,17,.58) !important;

    backdrop-filter:
        blur(9px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    body::before {

        opacity:
            .16;

        background-size:
            95px 95px,
            auto,
            auto;
    }
}


/* =========================================================
   ⭐ MUHARRAM MODE
   body class="moharram"
========================================================= */

body.moharram {

    --master-bg:
        #020604;

    --master-primary:
        #35ff9a;

    --master-primary-dark:
        #11c96e;

    --master-text:
        #effff6;

    --master-muted:
        #88a095;

    --master-border:
        rgba(53,255,154,.15);

    background-color:
        #020604 !important;
}


/* =========================================================
   MUHARRAM BACKGROUND
   قرمز انتزاعی، نه واقعی
========================================================= */

body.moharram::before {

    opacity:
        .36;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%2335ff9a' stroke-width='.7' opacity='.20'%3E%3Cpath d='M22.5 0L45 13L67.5 0L90 13L90 39L67.5 52L67.5 78L45 90L22.5 78L0 90L0 64L22.5 51L22.5 26L0 13L22.5 0Z'/%3E%3Cpath d='M22.5 26L45 39L67.5 26L67.5 52L45 65L22.5 52Z'/%3E%3C/g%3E%3C/svg%3E"),

        radial-gradient(
            ellipse 100px 50px at 8% 18%,
            rgba(170,12,30,.58),
            transparent 72%
        ),

        radial-gradient(
            ellipse 55px 100px at 82% 12%,
            rgba(210,18,40,.42),
            transparent 70%
        ),

        radial-gradient(
            ellipse 110px 55px at 68% 76%,
            rgba(160,8,28,.46),
            transparent 72%
        ),

        radial-gradient(
            ellipse 50px 100px at 18% 86%,
            rgba(190,15,38,.38),
            transparent 70%
        ),

        #020604;

    background-size:
        135px 135px,
        380px 320px,
        420px 360px,
        500px 390px,
        430px 370px;

    background-repeat:
        repeat;
}


/* =========================================================
   MUHARRAM CARDS
========================================================= */

body.moharram .card,
body.moharram .panel,
body.moharram .stat-card,
body.moharram .category-card,
body.moharram .image-card,
body.moharram .login-card,
body.moharram .featured,
body.moharram .upload-panel,
body.moharram .toolbar,
body.moharram .posts-panel,
body.moharram .welcome-card,
body.moharram .about-card,
body.moharram .program-card,
body.moharram .contact-card,
body.moharram .servant-card,
body.moharram .gallery-item,
body.moharram .memories-section,
body.moharram .hero-card,
body.moharram .modal-card,
body.moharram .modalbox {

    background:
        rgba(5,14,10,.90) !important;

    color:
        #effff6 !important;

    border-color:
        rgba(53,255,154,.14) !important;
}


/* =========================================================
   MUHARRAM HEADER
========================================================= */

body.moharram .header,
body.moharram .topbar,
body.moharram .site-header {

    background:
        rgba(2,8,5,.92) !important;

    border-color:
        rgba(53,255,154,.14) !important;
}


/* =========================================================
   MUHARRAM GREEN
========================================================= */

body.moharram .label,
body.moharram .eyebrow,
body.moharram .tag,
body.moharram .hero-small,
body.moharram .category-count,
body.moharram .cardtext label {

    color:
        #35ff9a !important;
}


/* =========================================================
   MOBILE MUHARRAM
========================================================= */

@media (max-width: 720px) {

    body.moharram::before {

        opacity:
            .27;

        background-size:
            95px 95px,
            240px 210px,
            280px 240px,
            320px 260px,
            280px 240px;
    }
}

/* ===== ناوبری بالای صفحه: بازگشت / ورود مدیر / ثبت‌نام ===== */
.auth-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(201, 166, 90, 0.35);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s ease;
}

.auth-nav a:hover,
.auth-nav a.active {
    background: rgba(201, 166, 90, 0.18);
    border-color: rgba(201, 166, 90, 0.8);
}

.auth-nav a.back-home {
    border-color: transparent;
}