/* #region btnUser */

#btnUser > span > svg {
    font-size: 30px;
}

/* #endregion btnUser */

/* #region PackageGroup - CommentGroup */

/* Existing app.css content retained (carousel styles etc.) */
/* --- Carousel / DynamicCardCarousel styles (global) --- */

/* Root container */
.dynamic-carousel {
    gap: 8px;
    width: 100%;
}

/* Navigation icons */
.carousel-nav {
    min-width: 40px;
}

/* Viewport: holds the track and provides horizontal scrolling */
.carousel-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    padding: 6px;
}

/* Track: flex container for items */
.carousel-track {
    display: flex;
    gap: 12px;
    align-items: stretch;
    /* CSS variable --visible-count is set inline by component */
}

/* Each item: flexible width computed by visible count */
.carousel-item {
    flex: 0 0 calc(100% / var(--visible-count));
    min-width: 160px;
    max-width: 420px;
    scroll-snap-align: start;
}

/* Card visuals */
.product-card {
    border-radius: 12px;
    overflow: hidden;
}

/* Demo template helper */
.demo-template .mud-card-media {
    object-fit: cover;
}

/* Text truncation */
.mud-text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price style */
.price-text {
    color: rgba(0,0,0,0.87);
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 959px) {
    .carousel-item {
        min-width: 200px;
    }
}

@media (max-width: 599px) {
    .carousel-item {
        min-width: 260px;
        flex: 0 0 90%;
    }
}

/* Scrollbar styling (optional) */
.carousel-viewport::-webkit-scrollbar {
    height: 8px;
}

.carousel-viewport::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 10px;
}

/* --- ScrollableCardPanel styles --- */

/* Viewport now uses text-align:center so an intrinsic-width (inline-flex) track will be centered
   when it fits the viewport, and naturally overflows (starting at left) when wider than viewport. */
.scrollable-panel-viewport {
    /* keep overflow behavior and smooth scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* touch momentum scrolling */
    padding: 6px;
    /* Hide vertical overflow just in case */
    overflow-y: hidden;
    /* allow full width */
    width: 100%;
    /* center inline-level content when it doesn't overflow */
    text-align: center;
}

/* Flex track that holds cards in a single row.
   Use inline-flex so the track's width is intrinsic (content-sized). When the track width
   is smaller than the viewport, text-align:center on the viewport centers it.
   When the track is wider, it will overflow and horizontal scrollbar appears as expected. */
.scrollable-panel-track {
    display: inline-flex;
    gap: var(--gap, 12px);
    align-items: stretch;
    /* Keep items in a single row; they will not wrap */
    flex-wrap: nowrap;
}

/* Each card: fixed minimum width; allows many cards to flow horizontally */
.scrollable-card {
    flex: 0 0 auto; /* do not grow, do not shrink; stay at min-width unless container bigger */
    min-width: var(--card-min-width, 220px);
    max-width: 360px;
    box-sizing: border-box;
}

    /* Make card image fit nicely */
    .scrollable-card .mud-card-media img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Optional: small radius on cards */
    .scrollable-card .mud-card {
        border-radius: 10px;
        overflow: hidden;
    }

    /* Text truncation within cards */
    .scrollable-card .mud-text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Minimal scrollbar styling: show thin scrollbar on desktop, hide for WebKit when not needed */
.scrollable-panel-viewport::-webkit-scrollbar {
    height: 8px;
}

/* Subtle thumb */
.scrollable-panel-viewport::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 10px;
}

/* For a cleaner look, hide scrollbar on WebKit while preserving scroll functionality */
.scrollable-panel-viewport.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Firefox thin scrollbar */
.scrollable-panel-viewport {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* Responsive tweaks: smaller min-width for narrow viewports if desired */
@media (max-width: 599px) {
    .scrollable-card {
        /*min-width: 260px;*/
        max-width: 90%;
    }
}

/* در فایل CSS مربوط به کامپوننت یا فایل اصلی سایت (مثلاً app.css) */
.hover-elevate:hover {
    /* اطمینان از اعمال شدن کلاس بالاتر */
    box-shadow: var(--mud-elevation-12) !important;
}

/* برای اطمینان از اینکه انتقال (transition) بین دو حالت نرم باشد */
.mud-card {
    transition: box-shadow 0.3s ease; /* یک انتقال نرم ۰.۳ ثانیه‌ای */
}


/* #endregion PackageGroup - CommentGroup */

/* #region txtPhoneNumber */

#txtPhoneNumber {
    text-align: center;
}

/* #endregion txtPhoneNumber */

/* #region btnCallMe */

.mud-button-call-me:hover {
    /* تغییر رنگ پس‌زمینه دکمه در حالت هاور */
    background-color: var(--surface) !important; /* یا رنگ تیره تر مورد نظرتان */
    filter: brightness(85%); /* تیره کردن 15 درصدی رنگ فعلی */
    transition: background-color 0.3s ease, filter 0.3s ease; /* انیمیشن نرم */
}

    /* اگر می‌خواهید رنگ متن هم در هاور ثابت بماند */
    .mud-button-call-me:hover b {
        color: var(--primary-darken) !important;
    }

/* #endregion btnCallMe */

/* #region homeComment */

.multi-line-ellipsis-final {
    /* ۱. نمایش به صورت بلوک اجباری (برای حل تداخل با Flexbox MudBlazor) */
    display: block !important;
    /* ۲. فعال‌سازی Multi-line Ellipsis */
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    /* ۳. حداکثر تعداد خطوطی که باید نمایش داده شوند */
    -webkit-line-clamp: 3;
    /* ۴. مخفی کردن محتوای اضافی */
    overflow: hidden !important;
    text-overflow: ellipsis;
    /* ۵. اطمینان از تنظیمات متنی صحیح */
    direction: rtl;
    text-align: right;
    width: 100%;
}

/* #endregion homeComment */

/* #region menuItem */

.hover-border-link {
    /* ۱. حذف زیرخط پیش‌فرض MudLink (text-decoration) */
    text-decoration: none !important;
    /* ۲. ایجاد یک فاصله پایین‌تر از متن (اختیاری) */
    padding-bottom: 2px;
    /* ۳. تنظیم خط پیش‌فرض (شفاف یا ناپیدا) - مهم */
    border-bottom: 2px solid transparent;
    /* ۴. اضافه کردن انیمیشن برای نمایش نرم‌تر (اختیاری) */
    transition: border-bottom 0.2s ease-in-out;
}

    /* فعال کردن خط در حالت Hover */
    .hover-border-link:hover {
        /* تعریف خط: ضخامت، نوع (solid)، و رنگ مورد نظر شما */
        border-bottom: 2px solid var(--primary-darken) !important;
    }

/* #endregion menuItem */

/* #region textShadow */

.text-shadow b, .text-shadow {
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

/* #endregion textShadow */

/* #region boxShadow */

.boxShadow {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

/* #endregion boxShadow */

/* #region datePickerSetDate */

#datePickerSetDate {
    text-align: center;
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

.mud-input-adornment.mud-input-adornment-end button {
    color: var(--primary-darken);
}

.mud-toolbar.mud-toolbar-gutters.mud-picker-toolbar.mud-theme-primary.mud-picker-datepicker-toolbar,
.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-picker-calendar-day.mud-day.mud-selected.mud-theme-primary {
    background-color: var(--primary-darken) !important;
}

.mud-picker-calendar-container p {
    font-weight: bold !important;
}

/* #endregion datePickerSetDate */

/* #region txtSetDate */
#txtSetDate {
    text-align: center;
}

/* #endregion txtSetDate */

/* #region textAlignCenter */

.textAlignCenter {
    text-align: center !important;
}

/* #endregion textAlignCenter */

/* #region responsiveFont */

.responsiveFont b {
    font-size: clamp(14px, 2.5vw, 17px) !important;
}

/* #endregion \responsiveFont */

/* #region MudStepper */

.mud-step-label-icon.mud-primary {
    background-color: var(--primary-darken) !important;
}

.mud-typography.mud-typography-caption {
    display: none;
}

.mud-step-label-content {
    margin-top: 0px !important;
}

    .mud-step-label-content p {
        font-weight: bold;
        text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
    }

.mud-stepper-nav-connector-line {
    border-top-width: 2px !important;
}

.mud-step-label-icon.mud-primary, .mud-step-label-icon {
    width: 20px !important;
    height: 20px !important;
}

.mud-card-actions.mud-stepper-actions div {
    display: none;
}

.mud-card-actions.mud-stepper-actions {
    justify-content: center;
}

.mud-step-label-icon.mud-error circle,
.mud-step-label-icon.mud-error path {
    display: none;
}

.mud-step-label-icon.mud-error.mud-primary {
    background-color: #FF1744 !important;
}

.mud-stepper-content {
    padding: 0px !important;
}

/* #endregion MudStepper */

/* #region MudExpansionPanel */
.questionnaire .mud-expand-panel.mud-elevation-1.mud-expand-panel-border {
    background-color: var(--background);
}

.mud-expand-panel-text {
    font-weight: bold;
    color: var(--primary-darken);
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

.panelPriceSliderDisabled .mud-expand-panel-text {
    font-weight: bold;
    color: #76798c !important;
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

.panelPriceSliderDisabled .mud-icon-root.mud-svg-icon.mud-icon-size-medium.mud-expand-panel-icon
{
    display:none;
}

.mud-icon-root.mud-svg-icon.mud-icon-size-medium.mud-expand-panel-icon {
    color: var(--primary-darken);
}

.mud-expand-panel-text,
.mud-expand-panel-text b {
    font-size: clamp(13px, 2.5vw, 16px) !important;
}

    .mud-expand-panel-text b span {
        font-size: clamp(10px, 2.5vw, 13px) !important;
    }
/* #endregion MudExpansionPanel */

/* #region MudChip */

.mud-chip.mud-chip-filled.mud-chip-size-medium.mud-chip-color-secondary.mud-clickable.mud-ripple,
.mud-chip-filled {
    background-color: var(--primary-darken) !important;
    color: var(--surface) !important;
    font-size: clamp(11px, 2.5vw, 13px) !important;
}

.mud-chip-text {
    background-color: var(--surface) !important;
    color: var(--primary-darken) !important;
    font-size: clamp(11px, 2.5vw, 13px) !important;
}

.mud-chipset b {
    font-size: clamp(11px, 2.5vw, 13px) !important;
}

.chip-aspect-ratio-2-3 {
    aspect-ratio: 2 / 3;
    height: auto !important;
    width: 27vw !important;
    max-width: 150px !important;
    border-radius: 3px !important;
}

    .chip-aspect-ratio-2-3 .mud-image {
        width: 100% !important;
        height: 100% !important;
    }

.answer-chip-color svg {
    margin: 0px !important;
}
/* #endregion MudChip */

/* #region textarea */

textarea {
    text-align: justify !important;
}

/* #endregion textarea */

/* #region panelInputImageFile */

.mud-input-control-input-container .mud-paper.mud-paper-outlined.relative.rounded-lg.border-2.border-dashed.pa-4.mt-4.mud-width-full.mud-height-full {
    background-color: #e8ebf1;
}

.panel-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    cursor: pointer !important;
}

/* #endregion panelInputImageFile */

/*#region Dialog */

.mud-dialog {
    border-radius: 15px;
    border: 2px solid var(--primary-darken);
}

.mud-dialog-noAnimation {
    animation: none;
}

/*Mud-MudTextFiled*/
.mud-dialog .mud-input {
    font-size: 16px;
    font-weight: bold;
}

    .mud-dialog .mud-input > input.mud-input-root.mud-input-root-outlined, div.mud-input-slot.mud-input-root.mud-input-root-outlined {
        padding-top: 15px;
        padding-bottom: 18px;
        text-align: center !important;
    }

.mud-dialog .mud-input-helper-text.mud-input-error {
    font-size: 13px;
    font-weight: bold;
}

.mud-dialog .mud-input.mud-input-outlined {
    background-color: rgb(160 145 145 / 9%);
}

.mud-dialog .mud-input.mud-input-outlined {
    direction: ltr;
}

.mud-dialog .mud-input-label {
    font-size: 15px !important;
    font-weight: bold !important;
}

/*Dialog-MudButton*/
.mud-dialog .mud-button-form {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 13px;
    padding: 10px
}

.user-block {
    width: 120px !important;
    height: 120px !important;
}

/*Dialog-MudNumericField*/
#ActiveCode {
    text-align: center !important;
    letter-spacing: 15px;
}

.dialog-validationMessage {
    text-align: center !important;
}

.mud-dialog-title {
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

.mud-input-control.mud-input-error.mud-input-filled-with-label.mud-input-input-control.mud-input-number-control.mud-input-nospin .mud-input-helper-text div {
    font-size: 12px;
}

/*#endregion \Dialog  */

/* #region txtPassword */

#Password {
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center !important;
}

/* #endregion \txtPassword */

/* #region AccountMenu */

.mud-menu button {
    color: var(--primary-darken);
    padding: 0px;
}

.mobieView.mud-menu button svg {
    height: 30px;
    width: 30px;
}

.mud-menu-item p {
    font-weight: bold;
}

.mobieView.mud-list.mud-menu-list {
    min-width: 85px !important;
}

.mobieView.mud-menu-item p {
    font-size: 12px !important;
}
/* #endregion AccountMenu */

/* #region priceSlider */

.priceSlider {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.mud-typography.mud-typography-body2.mud-slider-track-tick-label
{
    font-weight:bold;
}

.panelPriceSlider .mud-expand-panel-content.mud-expand-panel-gutters {
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 10px;
}

/* #endregion priceSlider */

/* #region CraeteBoxProducts */

#CraeteBoxProducts .mud-chip-selected {
    border: 3.5px solid var(--primary-darken);
}

#CraeteBoxProducts .chip-aspect-ratio-2-3 {
    aspect-ratio: 2 / 3;
    height: auto !important;
    width: 50vw !important;
    border-radius: 3px !important;
}

    #CraeteBoxProducts .chip-aspect-ratio-2-3 .mud-image {
        width: 100% !important;
        height: 100% !important;
    }

/* #endregion CraeteBoxProducts */

/* #region MudDivider */

.mud-divider {
    border: 1.5px solid var(--primary-darken) !important;
    opacity: 1 !important;
}

/* #endregion MudDivider */

/* #region PaginationButton */

.mud-pagination-item-selected button {
    background-color: var(--primary-darken) !important;
}

/* #endregion PaginationButton */

/* #region selectedProduct */

#selectedProduct button {
    background-color: var(--background) !important;
    color: var(--primary-darken) !important;
    direction: ltr;
}

#selectedProduct .mud-chip-content {
    font-weight: bold;
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

/* #endregion selectedProduct */

/* #region Text-Error */

#textError b{
   font-size: clamp(10px, 1.7vw, 13px) !important;
}

.d-flex.mud-input-helper-text.mud-input-error {
    font-weight: bold !important;
}

/* #endregion Text-Error*/
/* #region MudSelect */
.mud-list-item-text p {
    font-weight: bold;
    color: var(--primary-darken);
    font-size: 14px;
}

#mudItemProvince .mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-adorned-end.mud-select-input,
#mudItemCity .mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-adorned-end.mud-select-input {
    font-size: 14px;
    color: var(--primary-darken);
    padding-top: 33px;
}

#mudItemProvince .mud-input.mud-input-filled.mud-input-filled-with-label.mud-input-adorned-end.mud-input-underline.mud-typography-subtitle1.mud-select-input,
#mudItemCity .mud-input.mud-input-filled.mud-input-filled-with-label.mud-input-adorned-end.mud-input-underline.mud-typography-subtitle1.mud-select-input {
    background-color: white;
    padding-inline-end: 0px;
}

/* #endregion MudSelect */

/* #region txtDescriptionPayment */
#txtDescriptionPayment, #txtDescriptionOrderProduct {
    font-size: clamp(11px, 2.5vw, 15px) !important;
}
/* #endregion txtDescriptionPayment */

/* #region txtSearchOrder */

#txtSearchOrder fieldset {
    border-radius: 10px;
}

/* #endregion \txtSearchOrder */

/* #region cmbSubjects */

#cmbSubjects .d-flex.mud-input-helper-text.mud-input-error{
    font-weight:bold !important;
}

#cmbSubjects .mud-input-control-helper-container.px-2 {
    background-color: white;
    margin-top: 0px;
}

/* #endregion cmbSubjects */

/*//=======================*/
/*#region ShortCuts  */
.text_align_center {
    text-align: center;
}

.display_flex {
    display: flex;
}

.justify_content_center {
    justify-content: center;
}

.font_family_iransans {
    font-family: "iransans" !important;
}

.font_weight_bold {
    font-weight: bold !important;
}

.font_weight_bolder {
    font-weight: bolder !important;
}

.font_size_12pt {
    font-size: 12pt !important;
}
/*#endregion \ShortCuts  */

/*//=======================*/

/*#region Loading Start Project */

.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
    }

    .loader::before {
        border-color: #f03355 #0000;
        animation: inherit;
        animation-duration: .5s;
        animation-direction: reverse;
    }

    .loader::after {
        margin: 8px;
    }

@keyframes l16 {
    100% {
        transform: rotate(1turn)
    }
}

/*#endregion \Loading Start Project  */