* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Dana";
    src: url("../fonts/Dana-Light.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.sit {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

.ll {
    max-width: 1920px; /* حداکثر عرض */
    width: 100%;
    height: 3500px;
    margin: 0 auto; /* وسط‌چین کردن افقی */
    position: relative;
    /* background-color: #0cafe63a; */
}

img {
    /* max-width: 100%; */
    height: auto;
    display: block;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #fffcf9;
    margin: 0;
    font-family: Dana, sans-serif;
    direction: rtl;
}

/********************************************************main**************************************************************************/
.breadcrumb1 {
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
    text-align: center;

}

/* استایل اصلی کارت آرایشگاه */
.salon-card {
    width: 874px; /* عرض ثابت کارت */
    height: auto; /* ارتفاع ثابت کارت */
    border-radius: 16px; /* گوشه‌های گرد */
    background-color: #ffffff; /* پس‌زمینه سفید */
    border: 1px solid #eceff1; /* حاشیه نازک خاکستری */
    padding: 10px; /* فاصله از لبه‌های داخلی */
    box-sizing: border-box; /* محاسبه padding در ابعاد کلی */
    display: flex; /* استفاده از flexbox برای چیدمان */
    flex-direction: column; /* چیدمان عمودی آیتم‌ها */
    gap: 20px; /* فاصله بین آیتم‌های فرزند */
    /* margin-right: 100px; فاصله از راست*/
    margin-top: 30px; /*فاصله از بالا*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* سایه ملایم */
}

/* استایل تصویر کاور آرایشگاه */
.salon-cover {
    width: 100%; /* عرض کامل نسبت به والد */
    height: 263px; /* ارتفاع ثابت */
    border-radius: 16px; /* گوشه‌های گرد */
    object-fit: cover; /* حفظ نسبت تصویر بدون کشیدگی */
    object-position: center; /* مرکزیت تصویر */
}

/* استایل بخش هدر (لوگو + اطلاعات) */
.salon-header {
    display: flex; /* چیدمان افقی */
    align-items: center; /* تراز عمودی وسط */
    gap: 20px; /* فاصله بین لوگو و اطلاعات */
    margin-top: -70px; /* حرکت به بالا برای قرارگیری روی تصویر */
    position: relative; /* برای z-index کار کند */
    z-index: 1; /* نمایش روی تصویر کاور */
}

/* استایل قاب لوگو */
.salon-logo {
    width: 129px; /* عرض ثابت */
    height: 129px; /* ارتفاع ثابت */
    border-radius: 16px; /* گوشه‌های گرد */
    background-color: #f9f9f9; /* پس‌زمینه روشن */
    display: flex; /* برای تراز کردن تصویر لوگو */
    align-items: center; /* تراز عمودی وسط */
    justify-content: center; /* تراز افقی وسط */
    border: 3px solid white; /* حاشیه سفید */
    margin-top: -70px;
    margin-right: 20px;
    box-shadow: 0 4px 8px rgba(216, 169, 76, 0.53); /* سایه ملایم */
}

/* استایل تصویر لوگو */
.salon-logo img {
    width: 90%; /* عرض مناسب */
    height:90%; /* ارتفاع مناسب */
    object-fit: contain; /* نمایش کامل تصویر بدون برش */
    border-radius: 12px; /* گوشه‌های گرد */

}

/* استایل نام سالن */
.salon-name {
    font-family: DanaFaNum, sans-serif; /* فونت فارسی */
    font-size: 20px; /* سایز مناسب */
    font-weight: 700; /* ضخامت متن */
    color: #37474f; /* رنگ متن تیره */
    margin-right: 160px;
    margin-top: -88px;
}

/* استایل بخش امتیازدهی */
.salon-rating {
    display: flex; /* چیدمان افقی ستاره‌ها */
    align-items: center; /* تراز عمودی وسط */
    margin-right: 160px;
}

.salon-identity {
    margin-top: 20px;
}

/* استایل ستاره‌ها */
.salon-rating img {
    width: 20px; /* سایز ثابت */
    height: 20px; /* سایز ثابت */
}

/* استایل عدد امتیاز */
.rating-score {
    font-family: DanaFaNum, sans-serif; /* فونت فارسی */
    font-size: 14px; /* سایز مناسب */
    color: #546e7a; /* رنگ متن خاکستری */
    font-weight: 400; /* ضخامت معمولی */
}

/* استایل بخش دکمه‌ها */
.salon-actions {
    display: flex; /* چیدمان افقی */
    gap: 15px; /* فاصله بین دکمه‌ها */
    justify-content: flex-end;
    margin-top: -95px; /* فاصله از بخش بالایی */
    margin-left: 19px;
}

/* استایل پایه دکمه‌ها */
.vip-service-btn,
.sample-salon-btn {
    font-family: DanaFaNum, sans-serif; /* فونت فارسی */
    background-color: #f1fff6; /* پس‌زمینه سبز روشن */
    color: #1ccd6c; /* متن سبز */
    border: 1px solid #1ccd6c; /* حاشیه سبز */
    border-radius: 8px; /* گوشه‌های گرد */
    padding: 10px 15px; /* فاصله داخلی */
    font-size: 16px; /* سایز متن */
    font-weight: 500; /* ضخامت متوسط */
    display: flex; /* برای تراز آیکون و متن */
    align-items: center; /* تراز عمودی وسط */
    gap: 8px; /* فاصله آیکون از متن */
    cursor: pointer; /* تغییر حالت نشانگر */
    transition: all 0.3s ease; /* انیمیشن hover */
}

/* استایل hover دکمه‌ها */
.vip-service-btn:hover,
.sample-salon-btn:hover {
    background-color: #e1f5ea; /* تغییر رنگ پس‌زمینه */
    transform: translateY(-2px); /* حرکت جزئی به بالا */
}

/* استایل آیکون دکمه‌ها */
.vip-service-btn img,
.sample-salon-btn img {
    width: 24px; /* سایز ثابت */
    height: 24px; /* سایز ثابت */
}

/* استایل عنوان بخش معرفی */
.section-title {
    font-size: 16px; /* سایز مناسب */
    color: #263238; /* رنگ متن تیره */
    font-weight: bold; /* ضخامت زیاد */
    margin-bottom: 10px; /* فاصله از متن توضیحات */
}

/* استایل متن توضیحات */
.salon-description {
    font-size: 14px; /* سایز مناسب */
    color: #546e7a; /* رنگ متن خاکستری */
    line-height: 1.6; /* فاصله بین خطوط */
    text-align: justify; /* تراز دوطرفه متن */
    margin: 0; /* حذف margin پیش‌فرض */
    word-wrap: break-word;
    white-space: normal;
}

.intro-section {
    margin-top: 33px;
}

.salon-details-card {
    width: 100%;
    max-width: 450px;
    background-color: #fff;
    border: 1px solid #eceff1;
    border-radius: 16px;
    padding: 20px;
    font-family: sans-serif;
    direction: rtl;
}

.details-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.details-labels,
.details-values {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.details-values {
    align-items: flex-end;
}

.details-values p {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #546e7a;
}

.details-labels p {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #263238;
}

.details-labels img {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    opacity: 0.7;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 230px;
}

.service-tag {
    background-color: #deedec;
    color: #1d404c;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 12px;
    white-space: nowrap;
}

.booking-section {
    display: flex;
    flex-direction: column;
    width: 429px;
    height: 173px;
    border-radius: 16px;
    border: 1px solid #eceff1;
    background-color: #ffffff;
    padding: 18px;
    gap: 15px;
}

.booking-title {
    font-family: DanaFaNum, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #263238;
}

.booking-description {
    font-family: DanaFaNum, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #707070;
}

.booking-button {
    width: 285px;
    height: 47px;
    border-radius: 9px;
    background-color: #d8a94c;
    border: 1px solid #d8a94c;
    font-family: DanaFaNum, sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 8px;
    color: #ffffff;
    text-align: center;
    margin-right: 37px;
}

.contact-box {
    width: 429px;
    height: 373px;
    border-radius: 16px;
    border: 1px solid #eceff1;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 15px;
    gap: 22px;
}

.contact-title {
    font-family: DanaFaNum, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #263238;
}

/*  آیکون و متن کنار هم (راست‌چین) */
.contact-item {
    display: flex;
    align-items: center; /* آیکون و متن عمودی وسط قرار بگیرن */
    gap: 8px; /* فاصله بین آیکون و متن */
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #707070;
    direction: rtl; /* برای چینش مناسب فارسی */
}

/* آیکون‌ها */
.contact-item img {
    width: 24px;
    height: 24px;
}

/*  تصویر پایین، وسط چین */
.contact-image {
    width: 328px;
    height: 186px;
    border-radius: 16px;
    align-self: center; /* باعث میشه تصویر در مرکز افقی قرار بگیره */
}

.salon-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* کل دو ستون رو وسط می‌چینه */
    align-items: flex-start; /* چسبیده به بالا */
    gap: 40px; /* فاصله بین ستون‌ها */
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
    padding: 40px 20px;
    box-sizing: border-box;
    direction: rtl;
    flex-wrap: nowrap;
    /* background-color: #810f0f5a; */
}

.salon-side-boxes {
    flex-shrink: 0; /* نذار کوچیک بشه */
}

.salon-card {
    min-width: 429px; /* باکس بزرگ سمت راست */
}

.salon-details-card,
.booking-section,
.contact-box {
    min-width: 429px;
    margin-bottom: 16px; /* فاصله بین باکس‌های سمت چپ */
}

.salon-side-boxes {
    display: flex;
    flex-direction: column;
    margin-top: 31px;
    flex-wrap: wrap;
}

.salon-content-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 874px;
    height: 3000px;
    /* background-color: #1ccd6c6a; */
    flex-wrap: wrap;
    justify-content: center;
    margin: -444px auto;
    align-content: center;
}

.tabs {
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    padding: 10px;
    gap: 20px;
    border: 1px solid #eceff1;
    width: 874px;
    height: 74px;
    direction: rtl;
    margin: 7px ;
}

.tab {
    background-color: transparent;
    border: none;
    color: #999999;
    font-family: DanaFaNum, sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    margin-top: 10px;
}

.tab:hover {
    color: #f9f9f9;
    background-color: #468189;
}

.barbers-section {
    width: 100%;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #eceff1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 874px;
    margin: 0 auto;
    direction: rtl;
}

.section-title {
    font-family: DanaFaNum, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #263238;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.barber-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    border-radius: 16px;
    padding: 24px;
}

.barber-card.dark {
    background-color: #2f2f2f;
    color: #f3f3f3;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
}

.barber-card.light {
    background-color: #fffaf5;
    color: #000;
    border: 1px solid #eee;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}

.barber-image {
    width: 122px;
    height: 122px;
    border-radius: 16px;
    object-fit: cover;
}

.barber-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.barber-name {
    font-family: DanaFaNum, sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.barber-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-score {
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
}

.barber-services {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.barber-services span {
    padding: 4px 12px;
    border-radius: 9px;
    background-color: #deedec;
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
    color: #1d404c;
    border: none;
    cursor: pointer;
}

.calendar-button {
    width: 207px;
    height: 48px;
    border-radius: 9px;
    border: 1px solid #c6922b;
    background-color: #fff;
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #c6922b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.calendar-button img {
    width: 24px;
    height: 24px;
}

.barber-title {
    font-family: DanaFaNum, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.barber-description {
    font-family: DanaFaNum, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.barber-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sample-works-section {
    width: 874px;
    height: 700px;
    background-color: #fff;
    border: 1px solid #eceff1;
    border-radius: 16px;
    padding: 24px;
    direction: rtl;
    margin: 13px auto;
    box-sizing: border-box;
}

.sample-works-section .section-title {
    font-family: DanaFaNum, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #263238;
    margin-bottom: 16px;
}

.comment-count {
    /* width: 68px;
    height: 23px; */
    color: #468189;
    font-size: 16px;
    font-weight: 500;
}

.sample-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 37px;
}

.sample-work-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sample-work-item img {
    width: 249px;
    height: 234px;
    object-fit: cover;
    border-radius: 12px;
}

.sample-work-item p {
    font-family: DanaFaNum, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #263238;
    margin: 0;
}

/* فرم ارسال دیدگاه */
.comment-form {
    background-color: #fafafa00;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #eceff1;
    margin-bottom: 32px;
}

/* ورودی‌ها */
.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: "DanaFaNum", sans-serif;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background-color: #f9faff;
    resize: vertical;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #b0bec5;
}

/* دکمه ثبت دیدگاه */
.comment-form button {
    width: 217px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #ffffff;
    color: #c6922b;
    border: 1.5px solid #c6922b;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    justify-content: center;
}

.comment-form button:hover {
    background-color: #f5a623;
    color: white;
}

/* بخش کلی نظرات */
.comments-section {
    direction: rtl;
    font-family: "DanaFaNum", sans-serif;
    max-width: 874px;
    margin: 0 auto;
    padding: 24px;
    background-color: #fff;
}

/* هر نظر */
.comment-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

/* ساختار داخلی هر نظر */
.comment-header {
    display: flex;
    gap: 2px;
    align-items: flex-start;
    flex-direction: column;
}

/* تصویر کاربر */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* اطلاعات متن و نام */
.comment-info {
    flex: 1;
}

/* نام کاربر */
.user-name {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
    color: #263238;
}

/* متن نظر */
.comment-text {
    font-size: 14px;
    line-height: 1.8;
    color: #37474f;
    margin-bottom: 8px;
}

/* متای نظر (زمان، لایک‌ها) */
.comment-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #9e9e9e;
}

/* قلب و لایک */
.likes {
    color: #e53935;
}

/* لینک پاسخ */
.reply-link {
    display: flex;
    margin-top: 12px;
    color: #f5a623;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    justify-content: end;
}

.reply-link:hover {
    color: #ff9800;
}

/* باکس پاسخ (برای پاسخ ادمین یا هر کسی) */
.reply-box {
    background-color: #f5f7fa;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    margin-right: 56px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* دکمه مشاهده بیشتر */
.load-more {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 40px;
    transition: color 0.3s ease;
    color: #c6922b;
    margin-bottom: 16px;
}

.load-more:hover {
    color: #ff9800;
}

.booking-wrapper {
    width: 382px;
    height: 77px;
    border-radius: 16px;
    border: 1px solid #eceff1;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.booking-wrapper button {
    width: 219px;
    height: 40px;
    border-radius: 9px;
    background-color: #d8a94c;
    margin-right: -9px;
}

@media only screen and (max-width: 900px) {
    /* تمام باکس‌های اصلی سایت وسط‌چین می‌شن */
    .salon-info-container,
    .salon-side-boxes,
    .salon-card,
    .salon-details-card,
    .booking-section,
    .contact-box {
        margin-left: auto;
        margin-right: auto;
    }

    .salon-card,
    .booking-section,
    .contact-box {
        width: 100%;
        max-width: 400px; /* یا هر عدد مناسب */
        margin: 0 auto;
    }

    .contact-box {
        margin-top: 18px;
    }

    .breadcrumb1 {
        text-align: center;
        margin-right: 0px;
    }

    /* استایل اصلی کارت آرایشگاه در موبایل */
    .salon-card {
        width: 90%;
        height: auto;
        padding: 15px;
        margin: 34px 23px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* سایه ملایم */
        display: flex; /* استفاده از flexbox */
        flex-direction: column; /* چیدمان عمودی */
        gap: 15px; /* فاصله بین آیتم‌های فرزند */
    }

    /* استایل تصویر کاور در موبایل */
    .salon-cover {
        height: 180px; /* ارتفاع ثابت */
        border-radius: 12px; /* گوشه‌های گرد */
        width: 100%; /* عرض کامل */
        object-fit: cover; /* پوشش کامل فضای تعیین شده */
    }

    /* استایل قاب لوگو در موبایل */
    .salon-logo {
        width: 80px; /* عرض کوچک‌تر برای موبایل */
        height: 80px; /* ارتفاع کوچک‌تر برای موبایل */
        margin-top: -40px; /* حرکت به بالا برای قرارگیری روی تصویر کاور */
        margin-right: 15px; /* فاصله از سمت راست */
        margin-bottom: 10px; /* فاصله از پایین */
        align-self: flex-start; /* تراز به سمت چپ */
    }

    /* استایل تصویر لوگو در موبایل */
    .salon-logo img {
        width: 60px; /* عرض کوچک‌تر */
        height: 60px; /* ارتفاع کوچک‌تر */
    }

    /* کانتینر برای چیدمان نام و امتیاز در یک خط */
    .name-rating-container {
        display: flex; /* استفاده از flexbox */
        justify-content: space-between; /* فاصله بین عناصر */
        align-items: center; /* تراز عمودی وسط */
        width: 100%; /* عرض کامل */
        margin-bottom: 15px; /* فاصله از پایین */
    }

    .salon-identity {
        margin-top: -72px;
        margin-right: 104px;
    }

    /* استایل نام سالن در موبایل */
    .salon-name {
        font-size: 18px; /* سایز فونت مناسب موبایل */
        margin: 0; /* حذف margin پیش‌فرض */
        order: 1; /* ترتیب نمایش اول */
    }

    /* استایل بخش امتیازدهی در موبایل */
    .salon-rating {
        margin: 0; /* حذف margin پیش‌فرض */
        order: 2; /* ترتیب نمایش دوم */
        display: flex; /* استفاده از flexbox */
        align-items: center; /* تراز عمودی وسط */
    }

    /* استایل ستاره‌های امتیاز در موبایل */
    .salon-rating img {
        width: 16px; /* سایز کوچک‌تر */
        height: 16px; /* سایز کوچک‌تر */
    }

    /* استایل عدد امتیاز در موبایل */
    .rating-score {
        margin-right: 5px; /* فاصله از سمت راست */
    }

    /* استایل بخش دکمه‌ها در موبایل */
    .salon-actions {
        display: flex; /* تغییر از column به flex */
        flex-direction: row; /* چیدمان افقی */
        gap: 10px; /* فاصله بین دکمه‌ها */
        margin-top: 15px;
    }

    .vip-service-btn,
    .sample-salon-btn {
        width: 50%; /* هر دکمه نیمی از فضای disponible را بگیرد */
        padding: 10px; /* کاهش padding برای فضای بهتر */
        font-size: 13px; /* کاهش سایز فونت برای متناسب شدن */
        white-space: nowrap; /* جلوگیری از شکستن متن */
        overflow: hidden; /* مخفی کردن متن اضافی */
        text-overflow: ellipsis; /* نمایش ... برای متن‌های بلند */
    }

    /* استایل بخش معرفی در موبایل */
    .intro-section {
        margin-top: 10px; /* فاصله از بالا */
    }

    /* استایل عنوان بخش معرفی در موبایل */
    .intro-section p:first-child {
        font-size: 16px; /* سایز فونت */
        color: #263238; /* رنگ متن */
        font-weight: 500; /* ضخامت متن */
        margin-bottom: 8px; /* فاصله از پایین */
    }

    /* استایل متن توضیحات در موبایل */
    .salon-description {
        font-size: 14px; /* سایز فونت مناسب موبایل */
        line-height: 1.8; /* فاصله بین خطوط */
        color: #546e7a; /* رنگ متن */
    }

    /* کارت کلی کمی فشرده‌تر میشه */
    .salon-details-card {
        padding: 16px; /* پدینگ کمتر برای جا گرفتن محتوا */
    }

    /* فونت برچسب‌ها کوچیک‌تر میشه */
    .details-labels p {
        font-size: 13px; /* قبلاً 15px بود */
    }

    /* فونت مقادیر کوچیک‌تر میشه */
    .details-values p {
        font-size: 13px;
    }

    /* آیکون‌ها کمی کوچیک‌تر می‌شن */
    .details-labels img {
        width: 16px;
        height: 16px;
    }

    /* تگ‌های خدمات کمی کوچیک‌تر می‌شن */
    .service-tag {
        font-size: 12px;
        padding: 4px 10px;
    }

    /* فاصله بین آیتم‌ها کمتر میشه */
    .details-labels,
    .details-values {
        gap: 12px;
    }

    /* فاصله بین دو ستون (راست و چپ) کمتر میشه */
    .details-grid {
        gap: 16px;
    }

    .booking-section {
        width: 100%; /* پر کردن عرض والد در موبایل */
        max-width: 380px; /* حداکثر عرض مناسب موبایل */
        height: auto; /* اجازه می‌ده ارتفاع با محتوا تنظیم بشه */
        padding: 14px; /* پدینگ کمتر */
        gap: 12px; /* فاصله بین اجزای داخلی کمتر */
    }

    .booking-title {
        font-size: 14px; /* کوچکتر برای موبایل */
    }

    .booking-description {
        font-size: 11px; /* کوچکتر برای توضیح */
    }

    .booking-button {
        width: 100%; /* دکمه تمام عرض شود */
        max-width: 260px;
        height: 42px;
        font-size: 14px;
        margin-right: 0; /* دکمه وسط‌چین یا چسبیده به والد */
        align-self: center; /* وسط‌چین در flex عمودی */
    }

    .contact-box {
        width: 100%; /* باکس پرکننده عرض گوشی */
        max-width: 400px; /* حداکثر عرض روی موبایل */
        padding: 12px; /* پدینگ کمتر */
        gap: 6px; /* فاصله بین اجزا کمتر */
    }

    .contact-title {
        font-size: 14px; /* عنوان کوچکتر */
    }

    .contact-item {
        font-size: 13px; /* فونت متن آدرس و شماره کوچکتر */
        gap: 6px; /* فاصله بین آیکون و متن کمتر */
    }

    .contact-item img {
        width: 20px;
        height: 20px; /* آیکون‌ها کوچیک‌تر */
    }

    .salon-info-container {
        flex-direction: column;
        display: flex;
        flex-direction: column;
        justify-content: center; /* وسط عمودی */
        align-items: center; /* وسط افقی */
        min-height: 100vh;
        padding: 49px;
    }

    .tabs {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
        max-width: 90%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .tab {
        font-size: 14px;
        padding: 19px 10px;
        white-space: nowrap;
        flex-shrink: 1;
    }

    .salon-content-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
        width: 100%;
        height: auto;
        padding: 15px;
        margin: -47px 0px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .barbers-section {
        width: 90%;
        height: auto;
        padding: 15px;
        margin: 34px 23px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .barbers-section {
        max-width: 90%;
        margin: 0 auto;
    }

    .barber-card {
        padding: 16px;
        gap: 16px;
        transform: scale(0.96);
        transition: transform 0.3s ease;
    }

    .barber-image {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        object-fit: cover;
    }

    .barber-info {
        font-size: 90%;
    }

    .barber-header {
        gap: 8px;
    }

    .barber-name {
        font-size: 15px;
    }

    .calendar-button {
        font-size: 13px;
        padding: 6px 12px;
    }

    .calendar-button img {
        width: 16px;
        height: 16px;
    }

    .barber-rating img {
        width: 16px;
        height: 16px;
    }

    .rating-score {
        font-size: 12px;
    }

    .barber-services span {
        font-size: 12px;
        padding: 4px 8px;
    }

    .barber-title {
        font-size: 14px;
        margin-top: 12px;
    }

    .barber-description {
        font-size: 13px;
        line-height: 1.7;
    }

    .sample-works-section {
        width: 90%;
        height: auto;
        padding: 15px;
        margin: 34px 23px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .sample-works-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .salon-side-boxes {
        margin-top: -51px;
    }

    .sample-works-section {
        max-width: 90%;
        margin: 0 auto;
        transform: scale(0.96);
    }

    .sample-works-grid {
        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); */
        gap: 16px;
    }

    .sample-work-item {
        text-align: center;
    }

    .sample-work-item img {
        width: 100%;
        max-width: 125px;
        height: auto;
        border-radius: 12px;
        object-fit: cover;
        transition: all 0.3s ease;
    }

    .sample-work-item p {
        font-size: 13px;
        margin-top: 8px;
    }

    .section-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .box {
        transform: scale(0.7);
        transform-origin: top center;
    }

    .booking-wrapper {
        transform: scale(0.8);
        transform-origin: top center;
        margin-top: -342px;
    }
}

@media screen and (max-width: 615px) {
    .salon-card {
        transform: scale(0.8);
        transform-origin: top center;
    }

    .salon-side-boxes {
        transform: scale(0.8);
        transform-origin: top center;
        margin: -120px 23px;
    }

    .tabs {
        transform: scale(0.9);
        transform-origin: top center;
        margin-top: 30px;
    }

    .tab {
        font-size: 15px;
    }

    .barbers-section {
        transform: scale(0.92);
        transform-origin: top center;
        max-width: 95%;
        padding: 10px;
        gap: 12px;
    }

    .barber-card {
        padding: 12px;
        gap: 12px;
        transform: scale(0.94);
        transform-origin: top center;
    }

    .barber-image {
        width: 64px;
        height: 64px;
        border-radius: 10px;
    }

    .barber-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .barber-name {
        font-size: 14px;
    }

    .calendar-button {
        font-size: 12px;
        padding: 5px 10px;
        align-self: flex-start;
    }

    .calendar-button img {
        width: 14px;
        height: 14px;
        margin-left: 4px;
    }

    .barber-rating img {
        width: 14px;
        height: 14px;
    }

    .rating-score {
        font-size: 11px;
    }

    .barber-services span {
        font-size: 11px;
        padding: 3px 6px;
    }

    .barber-title {
        font-size: 13px;
        margin-top: 8px;
    }

    .barber-description {
        font-size: 12px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 480px) {
    .barbers-section {
        padding: 10px;
    }

    .barber-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        border-radius: 12px;
        transform: scale(0.95);
        transform-origin: top center;
    }

    .barber-image {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .barber-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
    }

    .barber-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .barber-name {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .calendar-button {
        width: 174px;
        height: 40px;
        font-size: 14px;
        padding: 6px 8px;
        margin-top: 8px;
        border: none;
        border-radius: 6px;
        text-align: center;
    }

    .calendar-button img {
        width: 16px;
        height: 14px;
        vertical-align: middle;
        margin-left: 6px;
    }

    .barber-rating {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
    }

    .barber-rating img {
        width: 14px;
        height: 14px;
    }

    .rating-score {
        font-size: 11px;
        margin-right: 4px;
    }

    .barber-services {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .barber-services span {
        font-size: 11px;
        padding: 3px 6px;
        background-color: #e0e0e0;
        border-radius: 4px;
    }

    .barber-title {
        font-size: 13px;
        font-weight: bold;
        margin-top: 4px;
    }

    .barber-description {
        font-size: 12px;
        line-height: 1.5;
    }

    .booking-wrapper {
        padding: 10px;
        text-align: center;
        margin-top: auto;
    }

    .booking-button {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 8px;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .booking-text {
        font-size: 14px;
        margin: 0;
        color: white;
    }
}