/* ═══════════════════════════════════════════════
   Mohtavasaz Order Form — form.css
   Theme: White + Navy + Gold
═══════════════════════════════════════════════ */

:root {
    --navy:          #1A1A2E;
    --navy-lt:       #2E2E4E;
    --mof-gold:      #C9A84C;
    --mof-gold-lt:   #E8C96A;
    --mof-gold-dk:   #9A7A30;
    --mof-white:     #FFFFFF;
    --mof-bg:        #F7F8FC;
    --mof-border:    #E2E6F0;
    --mof-gray:      #6B7280;
    --mof-gray-lt:   #F1F3F9;
    --mof-green:     #16A34A;
    --mof-green-bg:  #F0FDF4;
    --mof-radius:    14px;
    --mof-radius-sm: 10px;
    --mof-shadow-sm: 0 2px 8px rgba(26,26,46,0.08);
    --mof-shadow:    0 4px 20px rgba(26,26,46,0.12);
    --mof-shadow-lg: 0 8px 32px rgba(26,26,46,0.14);
}

#mof-form-wrap {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    direction: rtl;
    max-width: 900px;
    margin: 0 auto;
    background: var(--mof-white);
    border-radius: 20px;
    padding: 0 0 2rem;
    overflow: hidden;
    box-shadow: var(--mof-shadow-lg);
    color: var(--navy);
    border: 1px solid var(--mof-border);
}

/* ─── Progress Bar ─── */
.mof-progress-bar {
    height: 4px;
    background: var(--mof-border);
    width: 100%;
}
.mof-progress-fill {
    height: 4px;
    background: var(--mof-gold);
    width: 20%;
    transition: width 0.4s ease;
}

/* ─── Steps Indicator ─── */
.mof-steps-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem 1rem;
    background: var(--mof-bg);
    border-bottom: 1px solid var(--mof-border);
    gap: 8px;
}
.mof-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    cursor: default;
    position: relative;
}
.mof-step-dot:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--mof-border);
    z-index: 0;
}
.mof-dot-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--mof-gray);
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.mof-dot-label {
    font-size: 11px;
    color: var(--mof-gray);
    white-space: nowrap;
    transition: color 0.3s;
}
.mof-step-dot.active .mof-dot-num {
    background: var(--mof-gold);
    border-color: var(--mof-gold);
    color: var(--mof-white);
}
.mof-step-dot.active .mof-dot-label {
    color: var(--mof-gold-dk);
    font-weight: 600;
}
.mof-step-dot.done .mof-dot-num {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--mof-white);
}
.mof-step-dot.done .mof-dot-label {
    color: var(--navy);
}

/* ─── Step Container ─── */
.mof-step {
    padding: 2rem 2.5rem;
    animation: mofFadeIn 0.35s ease;
}
@keyframes mofFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mof-step-header {
    margin-bottom: 1.8rem;
    border-right: 3px solid var(--mof-gold);
    padding-right: 1rem;
    border-radius: 0;
}
.mof-step-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.4rem;
}
.mof-step-header p {
    font-size: 0.9rem;
    color: var(--mof-gray);
    margin: 0;
}

/* ─── Site Type Cards ─── */
.mof-site-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.mof-type-card { cursor: pointer; }
.mof-type-card input[type="radio"] { display: none; }
.mof-type-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 1.2rem 0.8rem;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius);
    transition: all 0.22s;
    box-shadow: var(--mof-shadow-sm);
}
.mof-type-card:hover .mof-type-inner {
    border-color: var(--mof-gold);
    box-shadow: var(--mof-shadow);
    transform: translateY(-2px);
}
.mof-type-card input:checked + .mof-type-inner {
    background: #FFFBF0;
    border-color: var(--mof-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.18), var(--mof-shadow);
}
.mof-type-icon  { font-size: 2rem; }
.mof-type-label { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.mof-type-desc  { font-size: 0.78rem; color: var(--mof-gray); line-height: 1.4; }
.mof-type-price { font-size: 0.82rem; color: var(--mof-gold-dk); font-weight: 700; margin-top: 4px; }
.mof-type-price.mof-free { color: var(--mof-green); }

.mof-text-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    color: var(--navy);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    direction: rtl;
    box-shadow: var(--mof-shadow-sm);
}
.mof-text-input:focus {
    outline: none;
    border-color: var(--mof-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.mof-text-input::placeholder { color: #B0B8CC; }

/* ─── Goals (chips) ─── */
.mof-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.2rem;
}
.mof-goal-chip { cursor: pointer; }
.mof-goal-chip input { display: none; }
.mof-goal-chip span {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: 50px;
    font-size: 0.88rem;
    color: var(--navy);
    transition: all 0.2s;
    box-shadow: var(--mof-shadow-sm);
}
.mof-goal-chip:hover span {
    border-color: var(--mof-gold);
    box-shadow: var(--mof-shadow);
}
.mof-goal-chip input:checked + span {
    background: #FFFBF0;
    border-color: var(--mof-gold);
    color: var(--mof-gold-dk);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}
.mof-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    color: var(--navy);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    min-height: 90px;
    resize: vertical;
    direction: rtl;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--mof-shadow-sm);
}
.mof-textarea:focus {
    outline: none;
    border-color: var(--mof-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.mof-textarea::placeholder { color: #B0B8CC; }

/* ─── Features ─── */
.mof-feat-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--mof-border);
}
.mof-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.mof-feat-card { cursor: pointer; }
.mof-feat-card input { display: none; }
.mof-feat-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 1rem 0.6rem;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    transition: all 0.22s;
    height: 100%;
    box-sizing: border-box;
    box-shadow: var(--mof-shadow-sm);
}
.mof-feat-card:hover .mof-feat-inner {
    border-color: var(--mof-gold);
    box-shadow: var(--mof-shadow);
    transform: translateY(-1px);
}
.mof-feat-card input:checked + .mof-feat-inner {
    background: #FFFBF0;
    border-color: var(--mof-gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2), var(--mof-shadow);
}
.mof-feat-card.free input:checked + .mof-feat-inner {
    background: var(--mof-green-bg);
    border-color: var(--mof-green);
    box-shadow: 0 0 0 2px rgba(22,163,74,0.15), var(--mof-shadow-sm);
}
.mof-feat-icon  { font-size: 1.6rem; }
.mof-feat-label { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.mof-feat-desc  { font-size: 0.75rem; color: var(--mof-gray); line-height: 1.3; }
.mof-feat-price { font-size: 0.78rem; font-weight: 700; margin-top: 4px; }
.free-badge { color: var(--mof-green); }
.paid-badge { color: var(--mof-gold-dk); }

/* ─── Price Preview ─── */
.mof-price-preview {
    margin-top: 1.5rem;
    background: var(--mof-bg);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    padding: 1rem 1.5rem;
    box-shadow: var(--mof-shadow-sm);
}
.mof-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--mof-gray);
    border-bottom: 1px solid var(--mof-border);
}
.mof-price-row:last-child { border-bottom: none; }
.mof-price-row.total {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    padding-top: 0.8rem;
}
.mof-price-row.total span:last-child { color: var(--mof-gold-dk); }

/* ─── Design Styles ─── */
.mof-styles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.mof-style-card { cursor: pointer; }
.mof-style-card input { display: none; }
.mof-style-inner {
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius);
    overflow: hidden;
    transition: all 0.22s;
    box-shadow: var(--mof-shadow-sm);
}
.mof-style-card:hover .mof-style-inner {
    border-color: var(--mof-gold);
    box-shadow: var(--mof-shadow);
    transform: translateY(-2px);
}
.mof-style-card input:checked + .mof-style-inner {
    border-color: var(--mof-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.2), var(--mof-shadow);
}
.mof-style-preview {
    height: 60px;
    display: flex;
    overflow: hidden;
}
.mof-color-swatch { flex: 1; height: 100%; }
.mof-style-info {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mof-style-emoji { font-size: 1.3rem; }
.mof-style-label { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.mof-style-desc  { font-size: 0.78rem; color: var(--mof-gray); line-height: 1.4; }
.mof-style-tags  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mof-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--mof-bg);
    border: 1px solid var(--mof-border);
    border-radius: 50px;
    color: var(--mof-gray);
}

/* ─── Contact ─── */
.mof-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mof-field { display: flex; flex-direction: column; gap: 6px; }
.mof-field label { font-size: 0.85rem; color: var(--navy); font-weight: 600; }

.mof-contact-pref { margin-bottom: 1.5rem; }
.mof-pref-title { font-size: 0.9rem; font-weight: 600; color: var(--navy); display: block; margin-bottom: 0.8rem; }
.mof-pref-options { display: flex; gap: 12px; flex-wrap: wrap; }
.mof-pref-card { cursor: pointer; flex: 1; min-width: 100px; }
.mof-pref-card input { display: none; }
.mof-pref-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1rem;
    background: var(--mof-white);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    font-size: 0.88rem;
    color: var(--navy);
    transition: all 0.2s;
    text-align: center;
    box-shadow: var(--mof-shadow-sm);
}
.mof-pref-icon { font-size: 1.5rem; }
.mof-pref-card:hover .mof-pref-inner {
    border-color: var(--mof-gold);
    box-shadow: var(--mof-shadow);
}
.mof-pref-card input:checked + .mof-pref-inner {
    border-color: var(--mof-gold);
    background: #FFFBF0;
    color: var(--mof-gold-dk);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}

/* ─── Summary ─── */
.mof-summary {
    background: var(--mof-bg);
    border: 1.5px solid var(--mof-border);
    border-radius: var(--mof-radius-sm);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--mof-shadow-sm);
}
.mof-summary h3 { font-size: 0.95rem; color: var(--navy); font-weight: 700; margin: 0 0 0.8rem; }
.mof-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--mof-gray);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--mof-border);
}
.mof-summary-row:last-of-type { border-bottom: none; }
.mof-summary-row.total {
    color: var(--navy);
    font-weight: 700;
    font-size: 1rem;
    padding-top: 0.8rem;
}
.mof-summary-row.total span:last-child { color: var(--mof-gold-dk); }
.mof-disclaimer { font-size: 0.75rem; color: #B0B8CC; margin: 0.6rem 0 0; }

/* ─── Navigation ─── */
.mof-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 12px;
}
.mof-btn-next, .mof-btn-back, .mof-btn-submit {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.22s;
}
.mof-btn-next {
    background: var(--mof-gold);
    color: var(--mof-white);
    box-shadow: 0 4px 14px rgba(201,168,76,0.35);
}
.mof-btn-next:hover {
    background: var(--mof-gold-dk);
    transform: translateX(-2px);
    box-shadow: 0 6px 18px rgba(201,168,76,0.4);
}
.mof-btn-back {
    background: var(--mof-white);
    color: var(--navy);
    border: 1.5px solid var(--mof-border);
    box-shadow: var(--mof-shadow-sm);
}
.mof-btn-back:hover {
    border-color: var(--navy);
    box-shadow: var(--mof-shadow);
}
.mof-btn-submit {
    background: var(--navy);
    color: var(--mof-white);
    padding: 0.9rem 2.4rem;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(26,26,46,0.25);
}
.mof-btn-submit:hover {
    background: var(--navy-lt);
    box-shadow: 0 6px 20px rgba(26,26,46,0.3);
}
.mof-btn-submit:disabled { opacity: 0.6; cursor: wait; }

/* ─── Error ─── */
.mof-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: var(--mof-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* ─── Success ─── */
.mof-success-wrap {
    text-align: center;
    padding: 2.5rem 1rem;
}
.mof-success-icon { font-size: 4rem; margin-bottom: 1rem; }
.mof-success-wrap h2 { font-size: 1.5rem; color: var(--navy); font-weight: 700; margin-bottom: 0.5rem; }
.mof-success-wrap p  { color: var(--mof-gray); font-size: 0.95rem; }
.mof-contact-cta { margin-top: 2rem; }
.mof-contact-cta p { font-size: 0.9rem; color: var(--mof-gray); margin-bottom: 1rem; }
.mof-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mof-cta-btn {
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: var(--mof-shadow-sm);
}
.mof-cta-btn.whatsapp  { background: #25D366; color: #fff; }
.mof-cta-btn.telegram  { background: #0088CC; color: #fff; }
.mof-cta-btn.phone     { background: var(--navy); color: var(--mof-white); }
.mof-cta-btn:hover     { transform: translateY(-2px); box-shadow: var(--mof-shadow); }

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .mof-step { padding: 1.2rem 1rem; }
    .mof-steps-indicator { padding: 0.8rem 0.6rem; gap: 4px; }
    .mof-dot-label { display: none; }
    .mof-site-types { grid-template-columns: repeat(2, 1fr); }
    .mof-features { grid-template-columns: repeat(2, 1fr); }
    .mof-styles { grid-template-columns: 1fr 1fr; }
    .mof-nav { flex-direction: column-reverse; }
    .mof-btn-next, .mof-btn-submit { width: 100%; text-align: center; }
    .mof-btn-back { width: 100%; text-align: center; }
}