/* ============================================
   بخش 1: Modal Content Wrapper
   ============================================ */
/* تنظیمات اصلی مودال - تطبیق با index.html */
/* max-width: 28rem = 448px | transform: scale(0.75) = 75% اندازه اصلی */
#modal-content-wrapper {
    max-width: 28rem !important; /* max-w-md equivalent (448px) */
    transform: scale(0.75) translateX(0) !important; /* scale-75 equivalent */
    transform-origin: center !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   بخش 2: Responsive CSS Files
   ============================================ */
/* فایل‌های responsive به صورت جداگانه بر اساس تشخیص دیوایس لود می‌شوند */
/* pc.css, tablet.css, mobile.css در پوشه responsive/ */

/* ============================================
   بخش 3: Video Control Buttons
   ============================================ */
/* استایل‌های دکمه کنترل ویدیو (Play/Pause) */
/* background: rgba(0, 0, 0, 0.3) = پس‌زمینه نیمه‌شفاف | border-radius: 50% = دایره‌ای */
#video-play-pause-btn {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Hover Effect - بزرگ شدن دکمه و تیره‌تر شدن پس‌زمینه */
#video-play-pause-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

/* Active Effect - کوچک شدن دکمه هنگام کلیک */
#video-play-pause-btn:active {
    transform: scale(0.95);
}

/* ============================================
   بخش 4: Video Timeline Styles
   ============================================ */
/* استایل‌های تایم‌لاین ویدیو - نوار پیشرفت و دستگیره */
/* Container اصلی تایم‌لاین */
#videoTimeline {
    position: relative;
    height: 4px;
}

/* نوار پیشرفت ویدیو - عرض با transition نرم */
#videoProgress {
    transition: width 0.1s linear;
}

/* دستگیره تایم‌لاین - قابل drag برای seek کردن */
#videoHandle {
    transition: left 0.1s linear;
    touch-action: none; /* جلوگیری از scroll هنگام drag در موبایل */
}

/* Hover Effect - بزرگ شدن دستگیره و افزایش ارتفاع تایم‌لاین */
#videoTimeline:hover #videoHandle {
    transform: translateY(-50%) scale(1.2);
}

#videoTimeline:hover {
    height: 6px;
}

/* ============================================
   بخش 5: Media Container (تصاویر و ویدیو)
   ============================================ */
/* Container رسانه‌ها - تصویر/ویدیو کاور استوری */
/* border-radius: 16px = گوشه‌های گرد | overflow: hidden = برش تصویر */
#modal-story-media-container {
    overflow: hidden !important;
    border-radius: 16px !important;
}

/* استایل تصاویر و ویدیو - تطبیق با container */
/* object-fit: cover = پر کردن کامل container با حفظ نسبت */
#modal-story-image,
#modal-story-video,
#loop-story-image {
    border-radius: 16px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* ============================================
   بخش 6: Video Controls Hide
   ============================================ */
/* مخفی کردن controls پیشفرض ویدیو - استفاده از controls سفارشی */
/* pointer-events: auto = اجازه کلیک روی ویدیو برای play/pause */
#modal-story-video {
    /* حذف controls در همه مرورگرها */
    pointer-events: auto;
}

/* مخفی کردن controls در Chrome, Safari, Opera (WebKit) */
#modal-story-video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 0 !important;
}

#modal-story-video::-webkit-media-controls-play-button {
    display: none !important;
}

#modal-story-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

#modal-story-video::-webkit-media-controls {
    display: none !important;
}

/* مخفی کردن controls در Firefox */
#modal-story-video::-moz-media-controls {
    display: none !important;
}

/* مخفی کردن controls در سایر مرورگرها */
#modal-story-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* ============================================
   بخش 7: Timeline & Text Container Positioning
   ============================================ */
/* تنظیم موقعیت timeline و container متن برای جلوگیری از تداخل */
/* Container تایم‌لاین - در پایین ویدیو */
#timelineContainer {
    bottom: 0;
    z-index: 10;
}

/* تنظیم موقعیت متن هنگام نمایش timeline - جلوگیری از همپوشانی */
/* timelineContainer دارای padding: 1rem top + 0.75rem bottom + ارتفاع timeline ≈ 2rem */
#modal-text-container.has-timeline {
    bottom: calc(3rem + 20px) !important;
}

/* ============================================
   بخش 8: Text Content Styles
   ============================================ */
/* استایل‌های متن توضیحات استوری - تطبیق با کد فرانت‌اند */
/* text-align: justify = تراز دو طرفه | line-height: 1.6 = فاصله خط */
#text-content,
#modal-text-content {
    text-align: justify !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ============================================
   بخش 9: Product Info Styles (نام محصول و برند)
   ============================================ */
/* استایل‌های بخش اطلاعات محصول - نام محصول و لوگوی برند */
/* font-size: 0.875rem = 14px | color: #374151 = خاکستری تیره | font-weight: 700 = bold */
#modal-content-wrapper .text-sm.text-gray-700.font-bold.ml-8,
#story-content .text-sm.text-gray-700.font-bold.ml-8 {
    font-size: 0.875rem !important; /* text-sm */
    color: #374151 !important; /* text-gray-700 */
    font-weight: 700 !important; /* font-bold */
    margin-left: 2rem !important; /* ml-8 */
}

/* استایل لوگوی برند - عرض ثابت 103px | object-fit: contain = حفظ نسبت */
#modal-content-wrapper .ml-8.mt-2[alt="brand"],
#story-content .ml-8.mt-2[alt="brand"],
#modal-story-brand-image {
    margin-top: 0.5rem !important; /* mt-2 */
    width: 103px !important;
    height: auto !important; /* برای SVG از auto استفاده می‌کنیم */
    max-height: 16.3px !important; /* حداکثر ارتفاع برای تصاویر معمولی */
    object-fit: contain !important; /* حفظ نسبت تصویر */
}

/* ============================================
   بخش 10: Price & Buy Button Styles
   ============================================ */
/* استایل‌های قیمت و دکمه خرید - تطبیق با کد فرانت‌اند */
/* قیمت اصلی - رنگ خاکستری با خط روی آن (line-through) */
#modal-original-price,
#story-original-price {
    color: #C4C4C4 !important; /* text-[#C4C4C4] */
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    text-decoration: line-through !important; /* line-through */
}

/* قیمت فعلی - رنگ مشکی و bold */
#modal-current-price,
#story-current-price {
    color: #000000 !important; /* text-black */
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    display: flex !important;
    align-items: center !important;
}

/* استایل دکمه خرید - متن سفید و اندازه کوچک */
/* width: 29px | height: 21px = اندازه ثابت متن "خرید" */
#modal-buy-link span,
#story-content .flex.items-center.justify-center.gap-1 span {
    color: #ffffff !important; /* text-white */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: normal !important; /* بدون font-weight */
    display: flex !important;
    align-items: center !important;
    width: 29px !important;
    height: 21px !important;
}

/* ============================================
   بخش 11: Toggle Button Styles
   ============================================ */
/* استایل دکمه toggle متن (ادامه/کمتر) - بدون font-weight اضافی */
#toggle-btn,
#modal-toggle-btn {
    font-weight: normal !important; /* بدون font-weight */
}

/* استایل متن توضیحات - بدون font-weight اضافی */
#text-content,
#modal-text-content {
    font-weight: normal !important; /* بدون font-weight */
}

/* ============================================
   بخش 12: Badge Styles
   ============================================ */
/* استایل‌های Badge - "New" و "Discount" */
/* Badge "new" - در استوری (بالای دایره) | font-weight: 700 = bold */
.item-preview .absolute.bottom-\[-6px\],
.item-preview .absolute.bottom-\[-7px\] {
    font-weight: 700 !important; /* font-bold */
}

/* Badge discount - در استوری (بالای دایره) | font-weight: 700 = bold */
.item-preview .absolute.top-\[-2px\],
.item-preview .absolute.right-\[-2px\] {
    font-weight: 700 !important; /* font-bold */
}

/* Badge discount - در مودال | font-weight: 700 = bold */
#modal-discount-badge {
    font-weight: 700 !important; /* font-bold */
}

/* ============================================
   بخش 13: Product & Story Title Styles
   ============================================ */
/* استایل عنوان محصول - font-weight: 700 = bold */
#modal-story-product-name {
    font-weight: 700 !important; /* font-bold */
}

#modal-content-wrapper .text-sm.text-gray-700.font-bold.ml-8,
#story-content .text-sm.text-gray-700.font-bold.ml-8 {
    font-weight: 700 !important; /* font-bold */
}

/* استایل نام استوری - font-weight: 600 = semibold */
.name {
    font-weight: 600 !important; /* font-semibold */
}

/* ============================================
   بخش 14: Story Wrapper (Container اصلی)
   ============================================ */
/* Container اصلی استوری‌ها - عرض و ارتفاع سفارشی */
/* max-width: 1390px = حداکثر عرض | height: 183px = ارتفاع ثابت */
.amer-story-wrapper {
    width: 100% !important;
    max-width: var(--container-max-width, 1390px) !important;
    height: 183px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* جلوگیری از overflow */
}

/* ============================================
   بخش 15: Story Items Container
   ============================================ */
/* Container کارت‌های استوری - scroll افقی و drag-to-scroll */
/* overflow-x: auto = scroll افقی | cursor: grab = نشانگر grab */
.amer-story-wrapper > div:first-child,
#story-items-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; /* scroll نرم در iOS */
    cursor: grab !important;
    justify-content: flex-start !important; /* شروع از ابتدا */
    box-sizing: border-box !important;
}

/* تغییر cursor هنگام drag - grabbing */
.amer-story-wrapper > div:first-child:active {
    cursor: grabbing !important;
}

/* ============================================
   بخش 16: User Interaction (جلوگیری از انتخاب و drag)
   ============================================ */
/* جلوگیری از انتخاب متن و عکس - بهبود UX */
.amer-story-wrapper,
.amer-story-wrapper * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Story Items - بدون محدودیت عرض | flex-shrink: 0 = عدم کوچک شدن */
.amer-story-wrapper .flex.flex-col.items-center {
    flex-shrink: 0 !important;
    min-width: auto !important;
}

/* جلوگیری از drag تصاویر - فقط کلیک */
.amer-story-wrapper .item-link {
    cursor: pointer !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
}

/* جلوگیری از drag تصاویر - اجازه کلیک */
.amer-story-wrapper img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: auto !important; /* اجازه کلیک روی تصویر */
}

/* ============================================
   بخش 17: Image Story Progress Bar
   ============================================ */
/* Progress Bar برای استوری‌های عکس - نمایش پیشرفت 12 ثانیه‌ای */
/* Container اصلی progress bar */
.story-progress-bar {
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3); /* پس‌زمینه نیمه‌شفاف */
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

/* نوار پیشرفت - پر شدن از 0% به 100% */
.story-progress-fill {
    height: 100%;
    background-color: #ffffff; /* رنگ سفید */
    border-radius: 2px;
    transition: width 0.1s linear; /* transition نرم */
    width: 0%; /* شروع از 0% */
}

/* ============================================
   بخش 18: Scrollbar Hide
   ============================================ */
/* مخفی کردن scrollbar - بهبود ظاهر و UX */
/* Firefox */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE and Edge */
}

/* Chrome, Safari, Opera (WebKit) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================
   بخش 19: Horizontal Scroll Settings
   ============================================ */
/* تنظیمات scroll افقی برای container استوری‌ها */
/* padding-bottom: 10px = فضا برای نشان دادن scroll */
.amer-story-wrapper>div:first-child {
    padding-bottom: 10px; /* Space for scroll indication */
    width: 100%; /* Ensure full width */
    overflow-x: auto; /* Allow horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* ============================================
   بخش 20: Modal Content Overflow
   ============================================ */
/* اجازه نمایش دکمه‌های navigation خارج از container */
#modal-content-wrapper {
    overflow: visible !important;
}