@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;
    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);
}