@import url('../fonts/vazir/font-vazir.css');

/* ═══════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════ */
.mf-form-wrapper {
    --mf-bg:              rgba(255,255,255,.6);
    --mf-border:          rgba(200,210,230,.5);
    --mf-surface:         rgba(255,255,255,.75);
    --mf-text:            #1a2130;
    --mf-muted:           #6b7280;
    --mf-primary:         #2563eb;
    --mf-primary-light:   rgba(37,99,235,.08);
    --mf-success:         #059669;
    --mf-error:           #dc2626;
    --mf-radius:          12px;
    --mf-radius-lg:       20px;
    --mf-font:            'Vazir','Vazir-FD','Shabnam',sans-serif;
    --mf-gradient:        linear-gradient(135deg,#34d399 0%,#10b981 40%,#059669 100%);
    --mf-shadow:          0 4px 20px rgba(0,0,0,.07);
    --mf-gap:             14px;

    direction:   rtl;
    font-family: var(--mf-font) !important;
    font-size:   0.875rem;
    color:       var(--mf-text);
}

/* inherit font everywhere */
.mf-form-wrapper * {
    font-family: inherit !important;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   FORM SHELL
═══════════════════════════════════════════ */
.mf-form {
    container-type: inline-size;
    display:        flex;
    flex-direction: column;
    gap:            var(--mf-gap);
    padding:        24px;
    background:     var(--mf-bg);
    border:         1px solid var(--mf-border);
    border-radius:  var(--mf-radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:     var(--mf-shadow);
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.mf-form-header {
    padding-bottom: 8px;
    border-bottom:  1px solid var(--mf-border);
    margin-bottom:  4px;
    text-align:     center;
}

.mf-form-title {
    margin:      0 0 4px;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--mf-text);
}

.mf-form-desc {
    margin:      0;
    font-size:   .8rem;
    color:       var(--mf-muted);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   GRID – 12 ستون
═══════════════════════════════════════════ */
.mf-fields-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mf-gap);
}

.mf-col-1  { grid-column: span 1; }
.mf-col-2  { grid-column: span 2; }
.mf-col-3  { grid-column: span 3; }
.mf-col-4  { grid-column: span 4; }
.mf-col-5  { grid-column: span 5; }
.mf-col-6  { grid-column: span 6; }
.mf-col-7  { grid-column: span 7; }
.mf-col-8  { grid-column: span 8; }
.mf-col-9  { grid-column: span 9; }
.mf-col-10 { grid-column: span 10; }
.mf-col-11 { grid-column: span 11; }
.mf-col-12 { grid-column: span 12; }

/* ═══════════════════════════════════════════
   FIELD
═══════════════════════════════════════════ */
.mf-field {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.mf-field > label {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--mf-text);
    margin:      0;
    padding-right: 2px;
}

.mf-required {
    color:       var(--mf-error);
    margin-right: 2px;
}

/* ── inputs ───────────────────────────── */
.mf-field input:not([type="checkbox"]),
.mf-field textarea,
.mf-field select {
    width:         100%;
    padding:       8px 12px;
    border:        1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background:    var(--mf-surface);
    color:         var(--mf-text);
    font-size:     .875rem;
    line-height:   1.5;
    transition:    border-color .18s, box-shadow .18s, background .18s;
    appearance:    none;
    -webkit-appearance: none;
}

.mf-field input:not([type="checkbox"])::placeholder,
.mf-field textarea::placeholder {
    color: var(--mf-muted);
}

.mf-field input:not([type="checkbox"]):focus,
.mf-field textarea:focus,
.mf-field select:focus {
    outline:      none;
    border-color: rgba(37,99,235,.45);
    background:   rgba(255,255,255,.95);
    box-shadow:   0 0 0 3px var(--mf-primary-light);
}

.mf-field textarea {
    min-height: 90px;
    resize:     vertical;
}

/* ── select arrow ─────────────────────── */
.mf-field select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: left 12px center;
    padding-left:        32px;
    cursor:              pointer;
}

/* ── multiselect ──────────────────────── */
.mf-multiselect {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    padding:       8px;
    border:        1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background:    var(--mf-surface);
}

.mf-multi-option {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 10px;
    border:        1px solid var(--mf-border);
    border-radius: 20px;
    cursor:        pointer;
    font-size:     .8rem;
    color:         var(--mf-muted);
    transition:    all .15s;
    user-select:   none;
}

.mf-multi-option:hover {
    border-color:  rgba(37,99,235,.4);
    color:         var(--mf-primary);
    background:    var(--mf-primary-light);
}

.mf-multi-option input[type="checkbox"] {
    display: none;
}

.mf-multi-option:has(input:checked) {
    border-color: var(--mf-primary);
    background:   var(--mf-primary-light);
    color:        var(--mf-primary);
    font-weight:  600;
}

/* ── checkbox ─────────────────────────── */
.mf-checkbox {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     4px 0;
}

.mf-checkbox input[type="checkbox"] {
    width:         18px;
    height:        18px;
    min-height:    unset !important;
    flex-shrink:   0;
    accent-color:  var(--mf-primary);
    cursor:        pointer;
}

.mf-checkbox label {
    cursor:      pointer;
    font-weight: 500 !important;
    margin:      0 !important;
}

/* ── error msg ────────────────────────── */

.mf-field-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
}

.mf-field-error {
    font-size:   .7rem;
    font-weight: 500;
    color:       var(--mf-error);
    text-align:  left;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════
   FOOTER  (captcha + submit)
═══════════════════════════════════════════ */
.mf-form-footer {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           stretch;
    gap:                   10px;
    margin-top:            4px;
}

.mf-captcha {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.mf-captcha > label {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--mf-text);
}

.mf-captcha-input {
    display:       flex;
    align-items:   center;
    gap:           8px;
    height:        40px;
    padding:       0 12px;
    border:        1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background:    var(--mf-surface);
    transition:    border-color .18s, box-shadow .18s;
    flex:          1;
}

.mf-captcha-input:focus-within {
    border-color: rgba(37,99,235,.45);
    box-shadow:   0 0 0 3px var(--mf-primary-light);
    background:   rgba(255,255,255,.95);
}

.mf-captcha-input span {
    flex-shrink: 0;
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--mf-text);
    white-space: nowrap;
}

.mf-captcha-input input {
    flex:       1;
    height:    40px;
    border:     none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding:    0 !important;
    font-size:  .9rem;
    min-width:  0;
}

.mf-captcha-input input:focus {
    outline: none;
}

.mf-submit {
    display:    flex;
    align-self: end;
}

.mf-submit button,
.mf-form button[type="submit"] {
    width:         100%;
    height:        40px;
    padding:       0 24px;
    border:        none;
    border-radius: var(--mf-radius);
    background:    var(--mf-gradient);
    color:         #fff;
    font-size:     .875rem;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    transform .15s, box-shadow .2s, opacity .2s;
}

.mf-form button[type="submit"]:hover {
    transform:  translateY(-1px);
    box-shadow: 0 8px 20px rgba(5,150,105,.25);
}

.mf-form button[type="submit"]:active  { transform: none; }

.mf-form button[type="submit"]:disabled {
    opacity: .65;
    cursor:  wait;
}

/* ═══════════════════════════════════════════
   UPLOAD
═══════════════════════════════════════════ */

.mf-upload-zone {
    position:      relative;
    border:        2px dashed var(--mf-border);
    border-radius: var(--mf-radius);
    background:    var(--mf-surface);
    transition:    all .2s;
    cursor:        pointer;
    overflow:      hidden;
}

.mf-upload-zone.drag-over {
    border-color: var(--mf-primary);
    background:   var(--mf-primary-light);
}

.mf-upload-input {
    position:  absolute;
    inset:     0;
    opacity:   0;
    cursor:    pointer;
    width:     100%;
    height:    100%;
    z-index:   2;
}

.mf-upload-ui {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         28px 16px;
    text-align:      center;
    pointer-events:  none;
}

.mf-upload-icon { color: var(--mf-muted); }

.mf-upload-zone.drag-over .mf-upload-icon { color: var(--mf-primary); }

.mf-upload-text {
    margin:      0;
    font-size:   .85rem;
    color:       var(--mf-muted);
}

.mf-upload-text span {
    color:           var(--mf-primary);
    font-weight:     600;
    text-decoration: underline;
}

.mf-upload-hint {
    margin:    0;
    font-size: .72rem;
    color:     #94a3b8;
}

.mf-upload-preview {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    padding:    0 12px 12px;
}

.mf-preview-item {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       4px 10px;
    border-radius: 20px;
    background:    var(--mf-primary-light);
    border:        1px solid rgba(37,99,235,.2);
    font-size:     .75rem;
    color:         var(--mf-primary);
    font-weight:   500;
}


/* ═══════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════ */
.mf-errors {
    padding:       10px 14px;
    border-radius: var(--mf-radius);
    background:    rgba(220,38,38,.07);
    border:        1px solid rgba(220,38,38,.2);
    color:         var(--mf-error);
    font-size:     .82rem;
    line-height:   1.6;
}

/* ═══════════════════════════════════════════
   SUCCESS SCREEN
═══════════════════════════════════════════ */
.mf-success-screen {
    min-height:      320px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
}

.mf-success-card {
    width:           100%;
    max-width:       480px;
    text-align:      center;
    padding:         36px 28px;
    border-radius:   var(--mf-radius-lg);
    background:      var(--mf-bg);
    border:          1px solid var(--mf-border);
    backdrop-filter: blur(16px);
    box-shadow:      var(--mf-shadow);
}

.mf-success-icon {
    width:         72px;
    height:        72px;
    margin:        0 auto 16px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 50%;
    background:    var(--mf-gradient);
    color:         #fff;
    box-shadow:    0 8px 24px rgba(5,150,105,.25);
}

.mf-success-card h3 {
    margin:      0 0 8px;
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--mf-text);
}

.mf-success-card p {
    margin:      0 auto 20px;
    max-width:   400px;
    color:       var(--mf-muted);
    line-height: 1.7;
    font-size:   .875rem;
}

.mf-home-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          40px;
    padding:         0 22px;
    border-radius:   var(--mf-radius);
    text-decoration: none;
    color:           #fff;
    font-weight:     600;
    font-size:       .875rem;
    background:      var(--mf-gradient);
    transition:      transform .15s, box-shadow .2s;
}

.mf-home-btn:hover {
    color:      #fff;
    transform:  translateY(-1px);
    box-shadow: 0 8px 20px rgba(5,150,105,.25);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* tablet: col ≥ 7 → 6 */
@container (max-width: 640px) {
    .mf-col-7,
    .mf-col-8,
    .mf-col-9,
    .mf-col-10,
    .mf-col-11 { grid-column: span 6; }
}

/* mobile: همه col ها → full width */
@container (max-width: 480px) {
    .mf-form { padding: 16px; }

    .mf-col-1,.mf-col-2,.mf-col-3,
    .mf-col-4,.mf-col-5,.mf-col-6,
    .mf-col-7,.mf-col-8,.mf-col-9,
    .mf-col-10,.mf-col-11 { grid-column: span 12; }

    .mf-form-footer {
        grid-template-columns: 1fr;
    }

    .mf-captcha { order: 1; }
    .mf-submit  { order: 2; }
}