/* ================== تنظیمات فونت  ================== */
@font-face {
    font-family: 'Vazir';
    src: url("../../fonts/Vazir.woff") format('woff'),
         url("../../fonts/Vazir.ttf") format('truetype');
    font-weight: 400; 
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url("../../fonts/Vazir-Medium.woff2") format('woff2'),
         url("../../fonts/Vazir-Medium.woff") format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url("../../fonts/Vazir-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ================== متغیرهای سراسری ================== */
:root {
    --primary-color: #3a3a3a;
    --accent-color: #F7DD89;
    --text-color: #303030;
    --color-bg-light: #fbf1ca;
    --color-bg: #fdf8e1;
    --font: 'Vazir', sans-serif; 
    --font-size-headings: clamp(16px, 1.2vw, 18px);
    --font-size-btn: clamp(13px, 4vw, 16px);
    --font-size-text: clamp(14px, 4.2vw, 17px);
    --en-font: 'Inter';
    --slide-count: 5;
    --slider-gap: 15px;
}

/*=============general=============*/

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

body { 
    font-family: var(--font);
    background: var(--color-bg); 
    transition: 0.4s; 
    overflow-x: hidden; 
    width: 100%;
    position: relative;
}

input, button, textarea, select {
    font-family: inherit;
}

.shilton-single-recipe-wrapper {
    width: 100%;
    direction: rtl; /* برای فارسی */
    margin-top: clamp(150px, 12vh, 170px);
}

/* پشتیبانی هوشمند از زبان انگلیسی در ساختار رسپی */
html[lang^="en"] .shilton-single-recipe-wrapper {
    direction: ltr; /* عوض شدن جهت و چیدمان ستون‌ها به صورت اتوماتیک */
}

html[lang^="en"] .shilton-single-recipe-wrapper p {
    font-size: clamp(16px, 4.2vw, 17px);
    margin-left: 10px;
}

.container {
    width: 85%; 
    margin-inline: auto;
    max-width: 1500px; 
}

.bg-circle {
    position: fixed;
    width: 1300px;
    height: 1250px;
    background: #fff1bb;
    border-radius: 50%; 
    top: -300px; 
    left: -400px;
    z-index: -1; 
    pointer-events: none; 
}

/* ================== TITLE ================== */

.recipe-header {
    margin-bottom: 20px;
}

.recipe-title  {
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    padding-right: 5px;
}

.recipe-title-underline {
    width: 40%; 
    height: 1px;
    background: #c2c1c177;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* تنظیمات عنوان برای زبان انگلیسی */
html[lang^="en"] .recipe-title {
    text-align: left;
    padding-right: 0;
    padding-left: 5px;
}

html[lang^="en"] .recipe-title-underline {
    margin-right: 0;
    margin-left: 5px;
}

/* ================== GRID LAYOUT ================== */

.recipe-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start; 
}

.recipe-text-content {
    grid-column: 1; 
    text-align: right;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 2.4;
    color: var(--primary-color);
}

/* اصلاح لیست‌ها برای رسپی */
.recipe-text-content ul,
.recipe-text-content ol {
    padding-inline-start: 35px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.recipe-text-content li {
    margin-bottom: 10px;
}

/* تنظیم چپ چین شدن متن در زبان انگلیسی */
html[lang^="en"] .recipe-text-content {
    text-align: left;
}

.recipe-text-content img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin: 40px 0;
}

.recipe-featured-media {
    grid-column: 2; 
    justify-self: center; 
    position: relative;
    width: calc(80% - 100px);
    min-width: 250px; 
    margin: 0 auto; 
    border-radius: 25px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.185);
    display: flex;
    justify-content: center;
    align-items: center;
}

.recipe-cover-image {
    width: 100%;
    height: auto;
    max-height: 500px; 
    object-fit: cover;
    display: block;
}

.recipe-inline-player {
    width: 100%;
    border-radius: 25px;
    background: #000;
    display: none; 
    outline: none;
}

.recipe-video-trigger-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: rgba(30, 32, 38, 0.85); 
    border-radius: 18px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.recipe-video-trigger-box:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(30, 32, 38, 1);
}

.play-icon-svg {
    width: 36px;
    height: 36px;
    color: #AAB8C2; 
}

.play-icon-svg:hover {
    color: #ffdd81; 
}

/* ================== RELATED RECIPES ================== */

.recipe-gallery-section {
    margin-top: 50px;
    margin-bottom: 80px;
}

.recipe-gallery-section h2 {
    font-size: var(--font-size-headings);
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 25px;
}

html[lang^="en"] .recipe-gallery-section h2 {
    text-align: left;
}

.recipe-gallery .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap; 
    gap: var(--slider-gap);
    overflow: hidden; 
    scroll-behavior: smooth;
    box-sizing: border-box;
    padding: 5px 2px 15px 2px;
}

.recipe-gallery .swiper-slide {
    flex: 0 0 auto;
    width: calc((100% - (var(--slider-gap) * (var(--slide-count) - 1))) / var(--slide-count)) !important; 
    margin-right: 0 !important; 
}

.related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: 20px; 
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(65, 27, 10, 0.05);
    transition: all 0.3s ease-in-out;
    width: 100%;
    height: 260px; 
    min-height: 260px;
    max-height: 260px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.04);
}

.related-card img {
    width: 100%;
    height: 260px; 
    object-fit: cover; 
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transition: transform 0.4s ease;
}

.related-card h4 {
    margin-top: auto; 
    padding: 0 12px; 
    font-size: clamp(9px, 0.9vw, 12px);
    font-weight: 600;
    color: #ffffff;
    background: #424242;
    width: 100%;
    height: 50px; 
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(65, 27, 10, 0.1);
}

.related-card:hover img {
    transform: scale(1.05);
}

.recipe-gallery .swiper-pagination {
    margin-top: 10px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    bottom: auto !important;
}

.recipe-gallery .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #30303067 !important;
    opacity: 1;
    border-radius: 20px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.recipe-gallery .swiper-pagination-bullet-active {
    background: var(--accent-color) !important;
    width: 30px; 
    box-shadow: 0 2px 8px rgba(247, 221, 137, 0.4);
}

/* ==========================================================================
   Responsive Design (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 1300px) {
    :root {
        --slide-count: 4; 
        --slider-gap: 15px;
    }
    .recipe-content-wrapper { gap: 30px; }
    .bg-circle { width: 800px; height: 800px; top: -150px; left: -200px; }
    .recipe-title { text-align: right !important; margin-bottom: 35px; }
    html[lang^="en"] .recipe-title { text-align: left !important; }
    .recipe-text-content { margin-top: 10px; }
}

@media (max-width: 991px) {
    :root {
        --slide-count: 4; 
        --slider-gap: 15px;
    }
    /* فیکس رسپانسیو */
    main.shilton-single-recipe-wrapper.container {
        margin: 130px auto 0; 
        width: 85%;
    }
    .recipe-content-wrapper { grid-template-columns: 1fr;}
    .recipe-featured-media { grid-column: 1; order: 1; width: 70%; }
    .recipe-text-content { grid-column: 1; order: 2; }
    .recipe-title { text-align: right !important; margin-bottom: 35px; }
    html[lang^="en"] .recipe-title { text-align: left !important; }
    .recipe-title-underline { display: none; }
}

@media (max-width: 767px) {
    :root {
        --slide-count: 3; 
        --slider-gap: 12px;
    }
    main.shilton-single-recipe-wrapper.container {
        margin-top: 120px;
    }
    .recipe-video-trigger-box { width: 60px; height: 60px; }
    .play-icon-svg { width: 28px; height: 28px; }
    
    .related-card { height: 210px; min-height: 210px; max-height: 210px; }
    .related-card img { height: 160px; }
}

@media (max-width: 575px) {
    :root {
        --slide-count: 2; /* دقیقاً مثل فایل اورجینال */
        --slider-gap: 12px; 
    }
    
    /* یکسان‌سازی قدرت انتخابگر برای رفع مشکل ارث‌بری از سایز تبلت و باز شدن فضا برای متن اصلی */
    main.shilton-single-recipe-wrapper.container {
        width: 90%; /* فول عرض در موبایل */
        margin-top: 120px;
        padding: 0 20px;
    }
    
    .recipe-featured-media { 
        order: 1; 
        width: 100%; /* خروج از حالت باکسی محدود */
    }
    
    .recipe-text-content { 
        padding: 0; /* حذف پدینگ اضافی که متن رو جمع می‌کرد */
    }
    
    .related-card { height: 190px; min-height: 190px; max-height: 190px; }
    .related-card img { height: 140px; }
    .related-card h4 { height: 50px; font-size: 11px; }
    
    .bg-circle { width: 500px; height: 500px; top: -50px; left: -50px; }
    .recipe-gallery-section h2 { text-align: start; }
}