@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb.woff2') format('woff2'),
         url('../fonts/IRANSansWeb.woff') format('woff'),
         url('../fonts/IRANSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
         url('../fonts/IRANSansWeb_Bold.woff') format('woff'),
         url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
.crm-input {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    width: 100%;
    background: var(--color-surface);
    outline: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}
.crm-input:focus {
    border-color: var(--color-accent);
}
.spin {
    animation: crmSpin 1s linear infinite;
}
@keyframes crmSpin { 100% { transform: rotate(360deg); } }

.otp-inputs {
    direction: ltr;
}
.otp-digit {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: all 0.3s ease;
}
.otp-digit:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.2);
}

.crm-select-wrapper { position: relative; }
.crm-select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 36px; }
.crm-select-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #6b7280; }
input[name="phone"]::placeholder { direction: rtl; text-align: right; }
.crm-otp-error-box { background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 8px; margin-bottom: 16px; display: none; text-align: center; font-size: 0.85rem; font-weight: bold; border: 1px solid #fecaca; }
.crm-edit-phone-btn { background: #eff6ff; color: #1d4ed8; padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; text-decoration: none; border: 1px solid #bfdbfe; transition: all 0.2s; display: inline-block; }
.crm-edit-phone-btn:hover { background: #dbeafe; }
#otp-timer { color: #ef4444; font-weight: bold; font-family: 'IRANSans', Tahoma, sans-serif; }
.crm-custom-select { position: relative; cursor: pointer; background: var(--color-surface, #F9F9F9); border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 16px; height: 48px; display: flex; align-items: center; justify-content: space-between; font-family: 'IRANSans', sans-serif; text-align: right; transition: background 0.3s ease, border-color 0.3s ease; }
.crm-custom-select.open { background: #fff; border-color: var(--color-accent, #8bc34a); }
.crm-select-trigger { color: #6b7280; flex-grow: 1; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; min-width: 0; display: block; font-size: 0.95rem; }
.crm-custom-select.has-value .crm-select-trigger { color: #111827; }
.crm-select-options { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 8px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s; overflow: hidden; }
.crm-custom-select.open .crm-select-options { opacity: 1; visibility: visible; transform: translateY(0); }
.crm-select-option { padding: 12px 16px; transition: background 0.2s; border-bottom: 1px solid #f3f4f6; color: #374151; font-size: 0.95rem; }
.crm-select-option:last-child { border-bottom: none; }
.crm-select-option:hover { background: #f9fafb; color: #042523; font-weight: bold; }

.crm-select-icon { transition: transform 0.2s; color: #6b7280; }

@media (max-width: 768px) {
    .crm-select-option { font-size: 0.78rem; padding: 10px 12px; }
}


/* Remove black outline and use blue focus border */
.crm-input:focus, .otp-digit:focus, .crm-custom-select:focus, input:focus, textarea:focus, select:focus { outline: none !important; border-color: #1d4ed8 !important; box-shadow: 0 0 0 1px #1d4ed8 !important; }