/* =========================================================
   EMDAD SANAT SAMAN
   Global Stylesheet
   Dark / Light Mode
========================================================= */


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

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: 'Vazirmatn', sans-serif;
    overflow-x: hidden;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


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

:root {

    /* Brand */
    --brand-blue: #181ec8;
    --brand-blue-light: #3036e6;
    --brand-gold: #d6a84f;

    /* Dark */
    --bg: #0b1117;
    --bg-secondary: #101820;
    --card-bg: rgba(255, 255, 255, 0.025);
    --input-bg: rgba(255, 255, 255, 0.04);

    --text-primary: #ffffff;
    --text-secondary: #9da8b2;
    --text-muted: #59636d;

    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(24, 30, 200, 0.65);

    --shadow: rgba(0, 0, 0, 0.25);
}


/* =========================================================
   LIGHT MODE
========================================================= */

html.light {

    --bg: #f5f7fa;
    --bg-secondary: #ffffff;

    --card-bg: rgba(255, 255, 255, 0.80);
    --input-bg: #f5f7fa;

    --text-primary: #111820;
    --text-secondary: #5e6974;
    --text-muted: #7f8992;

    --border: rgba(15, 25, 35, 0.10);
    --border-hover: rgba(24, 30, 200, 0.45);

    --shadow: rgba(20, 30, 40, 0.08);
}


/* =========================================================
   BODY
========================================================= */

body {

    background:
        radial-gradient(circle at 50% 20%,
            rgba(24, 30, 200, 0.08),
            transparent 38%),
        var(--bg);

    color: var(--text-primary);
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: inherit;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar,
.top {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 20px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 100;
}


/* =========================================================
   BACK LINK
========================================================= */

.back {

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 14px;

    transition:
        color 0.2s ease;
}

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


/* =========================================================
   THEME SWITCH
========================================================= */

.theme-switch,
.theme {

    width: 58px;
    height: 32px;

    border-radius: 50px;

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

    background: var(--card-bg);

    backdrop-filter: blur(12px);

    cursor: pointer;

    position: relative;

    padding: 0;

    box-shadow:
        0 5px 20px var(--shadow);

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.theme-switch:hover,
.theme:hover {

    border-color:
        var(--border-hover);
}


/* =========================================================
   THEME ICON / SLIDER
========================================================= */

.theme-slider,
.theme-icon {

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: var(--text-primary);

    display: flex;

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

    font-size: 14px;

    position: absolute;

    top: 3px;
    right: 3px;

    transition:
        right 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

    box-shadow:
        0 2px 8px var(--shadow);
}


/* Light Mode */

html.light .theme-slider,
html.light .theme-icon {

    right: 28px;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.container {

    width: 100%;

    max-width: 850px;

    min-height: 100vh;

    margin: 0 auto;

    padding:
        100px 25px 100px;
}


/* =========================================================
   LANDING CONTENT
========================================================= */

.content {

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   LOGO
========================================================= */

.logo-image {

    width: 90px;
    height: 90px;

    object-fit: contain;

    margin-bottom: 18px;

    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
}


/* Form pages */

.logo {

    width: 75px;
    height: 75px;

    object-fit: contain;

    margin-bottom: 15px;

    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
}


/* =========================================================
   BRAND LOGO TEXT
========================================================= */

.logo-text,
.brand-logo {

    font-size: 42px;

    font-weight: 800;

    letter-spacing: -1px;

    margin-bottom: 18px;
}

.logo-text span,
.brand-logo span {

    color:
        var(--brand-blue);
}


/* Support previous class */

.logo {

    font-size: inherit;
}


/* =========================================================
   BADGE
========================================================= */

.badge {

    display: inline-block;

    padding:
        7px 16px;

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

    border-radius: 30px;

    color:
        var(--text-secondary);

    font-size: 13px;

    margin-bottom: 22px;

    background:
        var(--card-bg);

    backdrop-filter:
        blur(10px);
}


/* =========================================================
   HEADINGS
========================================================= */

h1 {

    font-size: 46px;

    font-weight: 800;

    line-height: 1.5;

    margin-bottom: 15px;
}

h1 span {

    color:
        var(--brand-blue);
}


/* Form page heading */

.header h1 {

    font-size: 34px;

    margin-bottom: 12px;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.line {

    width: 55px;

    height: 3px;

    background:
        var(--brand-blue);

    margin:
        0 auto 30px;

    border-radius: 10px;
}


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

.description {

    color:
        var(--text-secondary);

    font-size: 18px;

    line-height: 2.1;

    max-width: 650px;

    margin: 0 auto;
}


.subtitle {

    color:
        var(--text-secondary);

    line-height: 2;

    font-size: 16px;

    max-width: 650px;

    margin: 0 auto;
}


/* =========================================================
   ACTION CARDS
========================================================= */

.actions {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    max-width: 680px;

    margin:
        45px auto 0;
}


.action-card {

    display: block;

    text-decoration: none;

    padding:
        28px 24px;

    border-radius: 14px;

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

    background:
        var(--card-bg);

    backdrop-filter:
        blur(12px);

    color:
        var(--text-primary);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.action-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--border-hover);

    background:
        rgba(24, 30, 200, 0.07);

    box-shadow:
        0 15px 35px var(--shadow);
}


/* Supplier card */

.action-card.supplier:hover {

    border-color:
        rgba(214, 168, 79, 0.65);

    background:
        rgba(214, 168, 79, 0.06);
}


/* =========================================================
   ACTION CARD TEXT
========================================================= */

.action-title {

    font-size: 21px;

    font-weight: 700;

    margin-bottom: 10px;
}


.action-text {

    color:
        var(--text-secondary);

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 18px;
}


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

.action-button {

    display: inline-block;

    padding:
        9px 18px;

    border-radius: 7px;

    background:
        var(--brand-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;
}


.supplier .action-button {

    background:
        var(--brand-gold);

    color: #111;
}


/* =========================================================
   SERVICES
========================================================= */

.services {

    margin-top: 45px;

    color:
        var(--text-muted);

    font-size: 13px;

    line-height: 2;
}


.services span {

    margin:
        0 8px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    margin-top: 28px;

    color:
        var(--text-muted);

    font-size: 14px;
}


.contact a {

    color:
        var(--brand-gold);

    text-decoration: none;

    font-weight: 500;

    transition:
        opacity 0.2s ease;
}


.contact a:hover {

    opacity: 0.75;
}


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

.form-container {

    max-width: 720px;

    margin: 0 auto;

    padding:
        110px 20px 100px;
}


.header {

    text-align: center;

    margin-bottom: 45px;
}


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

.card {

    background:
        var(--bg-secondary);

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

    border-radius: 16px;

    padding: 30px;

    box-shadow:
        0 15px 40px var(--shadow);

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


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

.intro {

    margin-bottom: 28px;

    color:
        var(--text-secondary);

    font-size: 14px;

    line-height: 2;
}


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

.form-group {

    margin-bottom: 20px;
}


/* =========================================================
   LABEL
========================================================= */

label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color:
        var(--text-primary);
}


label span {

    color:
        var(--brand-gold);
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

input,
select,
textarea {

    width: 100%;

    padding:
        13px 14px;

    border-radius: 9px;

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

    background:
        var(--input-bg);

    color:
        var(--text-primary);

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

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* Focus */

input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--brand-blue);

    box-shadow:
        0 0 0 3px rgba(24, 30, 200, 0.08);
}


/* Placeholder */

input::placeholder,
textarea::placeholder {

    color:
        var(--text-muted);

    opacity: 1;
}


/* Select */

select {

    appearance: auto;

    cursor: pointer;
}


select option {

    background:
        var(--bg-secondary);

    color:
        var(--text-primary);
}


/* Textarea */

textarea {

    min-height: 120px;

    resize: vertical;

    line-height: 1.9;
}


/* File input */

input[type="file"] {

    padding: 11px;

    cursor: pointer;
}


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

.hint {

    color:
        var(--text-muted);

    font-size: 12px;

    margin-top: 6px;

    line-height: 1.8;
}


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

.submit {

    width: 100%;

    border: none;

    border-radius: 9px;

    padding: 14px;

    background:
        var(--brand-blue);

    color: #ffffff;

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

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    margin-top: 8px;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;
}


.submit:hover {

    transform:
        translateY(-2px);

    opacity:
        0.92;

    box-shadow:
        0 8px 20px rgba(24, 30, 200, 0.20);
}


.submit:active {

    transform:
        translateY(0);
}


/* Supplier submit */

.supplier-submit {

    background:
        var(--brand-gold);

    color:
        #111;
}


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

.note {

    text-align: center;

    margin-top: 22px;

    color:
        var(--text-muted);

    font-size: 12px;

    line-height: 1.8;
}


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

.footer {

    text-align: center;

    color:
        var(--text-muted);

    font-size: 12px;

    margin-top: 30px;
}


/* Landing fixed footer */

body>.footer {

    position:static ;

    bottom: 20px;

    left: 0;

    width: 100%;

    margin-top: 0;

    pointer-events: none;
}


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

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {

    /* فقط بعداً در صورت نیاز فعال شود */
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        2px solid var(--brand-blue);

    outline-offset: 3px;
}


/* =========================================================
   MOBILE — 700px
========================================================= */

@media (max-width: 700px) {

    .top-bar,
    .top {

        padding:
            18px 20px;
    }


    .container {

        padding:
            85px 20px 90px;
    }


    .logo-image {

        width: 78px;
        height: 78px;
    }


    .logo-text,
    .brand-logo {

        font-size: 32px;
    }


    h1 {

        font-size: 32px;

        line-height: 1.6;
    }


    .header h1 {

        font-size: 29px;
    }


    .description {

        font-size: 16px;

        line-height: 2;
    }


    .subtitle {

        font-size: 15px;

        line-height: 2;
    }


    .actions {

        grid-template-columns:
            1fr;

        gap: 14px;

        margin-top: 35px;
    }


    .action-card {

        padding:
            23px 20px;
    }


    .services {

        margin-top: 30px;

        line-height: 2.2;
    }


    .services span {

        display: none;
    }


    .contact {

        margin-top: 25px;
    }


    .form-container {

        padding:
            95px 18px 85px;
    }


    .card {

        padding:
            22px;
    }


    .footer {

        bottom: 15px;
    }
}


/* =========================================================
   SMALL MOBILE — 400px
========================================================= */

@media (max-width: 400px) {

    h1 {

        font-size: 28px;
    }


    .header h1 {

        font-size: 27px;
    }


    .description {

        font-size: 15px;
    }


    .subtitle {

        font-size: 14px;
    }


    .action-title {

        font-size: 19px;
    }


    .card {

        padding:
            19px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}