/* static/css/bina-custom-styles.css */

@font-face {
  font-family: vazir_font;
  src: url("../webfonts/Vazir.ttf");
}

body {
    font-family: vazir_font, sans-serif;
    background-color: #f8fafc;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gradient-bg {
    background: linear-gradient(135deg,rgb(6, 8, 122) 0%,rgb(0, 6, 26) 100%);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.demo-modal {
    transition: all 0.3s ease;
}

.ai-chat-bubble {
    border-radius: 20px 20px 0 20px;
}

.user-chat-bubble {
    border-radius: 20px 20px 20px 0;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;    }


@keyframes rainbow-border {
    0% { border-color: #ff0000; }
    14% { border-color: #ff7f00; }
    28% { border-color: #ffff00; }
    42% { border-color: #00ff00; }
    57% { border-color: #0000ff; }
    71% { border-color: #4b0082; }
    85% { border-color: #9400d3; }
    100% { border-color: #ff0000; }
    }

.rainbow-input {
    animation: rainbow-border 5s linear infinite;
    border-width: 2px;
    border-style: solid;
}

.rainbow-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    animation: none;
    border-color: #6366f1;
}

/*--------------------------------------------------------------
# message
--------------------------------------------------------------*/

.message_container {
    -moz-animation: cssAnimation 0s ease-in 3s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

/*--------------------------------------------------------------
# home page team members section
--------------------------------------------------------------*/

.team-container {
    width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
    white-space: nowrap;
}

.team-members-scroll {
    display: inline-flex;
    flex-direction: row;
    gap: 0.2rem;
}

.member-item {
    position: relative; /* برای موقعیت‌دهی به tooltip */
    display: inline-block;
    margin: 0 0.2rem;
}

.member-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* افزودن سایه برای زیبایی بیشتر */
    transition: all 0.3s ease; /* انیمیشن نرم برای تمام تغییرات */
    cursor: pointer;
}

/* افکت زوم روی تصویر هنگام هاور */
.member-item:hover .member-avatar {
    transform: scale(1.9); /* افزایش اندازه تصویر */
    z-index: 10; /* تصویر روی سایر تصاویر قرار می‌گیرد */
}

.member-tooltip {
    background-color: rgba(45, 55, 72, 0.9); /* رنگ پس‌زمینه نیمه‌شفاف */
    position: absolute;
    bottom: calc(100% + 10px); /* قرارگیری بالای تصویر با فاصله */
    left: 50%;
    width: 220px;
    color: white;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    visibility: hidden; /* پنهان کردن به طور پیش‌فرض */
    opacity: 0; /* شروع با شفافیت صفر */
    transition: all 0.3s ease; /* انیمیشن نرم برای نمایش */
    z-index: 100; /* اطمینان از اینکه tooltip روی همه چیز است */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: right;
    direction: rtl;
    transform: translateX(-50%) translateY(10px); /* شروع انیمیشن از کمی پایین‌تر */
}

/* نمایش tooltip هنگام هاور روی آیتم */
.member-item:hover .member-tooltip {
    visibility: visible; /* نمایش tooltip */
    opacity: 1; /* افزایش شفافیت به ۱۰۰٪ */
    transform: translateX(-50%) translateY(0); /* جابجایی به موقعیت اصلی */
}

.member-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* در پایین tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(45, 55, 72, 0.9) transparent transparent transparent; /* مثلث برای اشاره به تصویر */
}

.member-name {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 15px;
}

.member-description {
    line-height: 1.5;
    font-size: 0.9rem;
}