/* shirintaom.uz - uslublar.
   Tamoyil: deyarli hamma narsa Bootstrap'ning o'z utility/komponentlari;
   bu fayl (1) iliq "taom" mavzusini (krem fon, oltin akcent, pill tugmalar,
   to'q jigarrang footer) Bootstrap o'zgaruvchilariga ulaydi va (2) bir nechta
   kichik yordamchi sinf beradi. Yangi sinf qo'shishdan oldin Bootstrap'da
   tayyor ekvivalent yo'qligiga ishonch hosil qiling. */

/* ===== 1. Mavzu tokenlari: krem fon + bitta oltin akcent ===== */
:root {
    /* Brend rangi #FDB402 (amber); hover/active/on-primary shu rangning
       to'qroq tuslari (hue 43 saqlanadi, faqat yorqinlik kamayadi) */
    --st-primary: #fdb402;
    --st-primary-hover: #e3a202;
    --st-primary-active: #ca8f01;
    --st-primary-rgb: 253, 180, 2;
    --st-on-primary: #332700;     /* amber ustidagi matn - shu hue'ning eng to'qi */
    --st-footer-bg: #33241a;      /* footer - to'q espresso */

    /* Bootstrap global tokenlarini iliqlashtirish.
       Sahifa foni TOZA OQ (foydalanuvchi qarori: krem keng ekranda xunuk
       ko'rinadi) - iliqlik akcent, ramka va kichik panellarda saqlanadi. */
    --bs-body-bg: #ffffff;
    /* Matnlar qora (foydalanuvchi talabi) - juda yengil iliq tusli qora.
       -rgb variantlari ham shart: text-body / text-body-emphasis
       utility'lari rgba(var(--bs-body-color-rgb), ...) dan oladi. */
    --bs-body-color: #1f1b16;
    --bs-body-color-rgb: 31, 27, 22;
    --bs-emphasis-color: #121009;
    --bs-emphasis-color-rgb: 18, 16, 9;
    --bs-secondary-color: rgba(26, 22, 17, 0.78);
    --bs-tertiary-color: rgba(26, 22, 17, 0.55);
    --bs-secondary-bg: #f4ecda;   /* ikonka kvadratlari, placeholderlar */
    --bs-tertiary-bg: #f8f3e7;
    --bs-border-color: #ece2cd;
    --bs-border-color-translucent: rgba(74, 56, 35, 0.12);

    /* Radiuslar mo''tadil: rounded-4 (hero, panellar) 1rem emas 0.75rem */
    --bs-border-radius-xl: 0.75rem;

    --bs-link-color-rgb: 176, 116, 8;
    --bs-link-hover-color-rgb: 154, 100, 5;
    --bs-focus-ring-color: rgba(var(--st-primary-rgb), 0.3);

    /* warning = oltin (yulduzlar va och sariq panellar shu orqali).
       bg-subtle - mokapdagidek juda yengil sariq, to'q krem emas. */
    --bs-warning: var(--st-primary);
    --bs-warning-rgb: var(--st-primary-rgb);
    --bs-warning-bg-subtle: #fff5d6;
    --bs-warning-border-subtle: #ffe9ae;
}

.card { --bs-card-bg: #ffffff; }

/* ===== 2. Tugmalar: pill shakl, oltin asosiy ===== */
.btn { --bs-btn-border-radius: 50rem; }

.btn-primary {
    --bs-btn-bg: var(--st-primary);
    --bs-btn-border-color: var(--st-primary);
    --bs-btn-color: var(--st-on-primary);
    --bs-btn-hover-bg: var(--st-primary-hover);
    --bs-btn-hover-border-color: var(--st-primary-hover);
    --bs-btn-hover-color: var(--st-on-primary);
    --bs-btn-active-bg: var(--st-primary-active);
    --bs-btn-active-border-color: var(--st-primary-active);
    --bs-btn-active-color: var(--st-on-primary);
    --bs-btn-disabled-bg: var(--st-primary);
    --bs-btn-disabled-border-color: var(--st-primary);
    --bs-btn-disabled-color: var(--st-on-primary);
    --bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
    font-weight: 600;
}

.btn-outline-secondary {
    --bs-btn-color: #57462f;
    --bs-btn-border-color: #c2ae8d;
    --bs-btn-hover-bg: #6b5a45;
    --bs-btn-hover-border-color: #6b5a45;
    --bs-btn-active-bg: #5d4e3c;
    --bs-btn-active-border-color: #5d4e3c;
}

.text-bg-primary {
    background-color: var(--st-primary) !important;
    color: var(--st-on-primary) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--st-primary);
    --bs-nav-pills-link-active-color: var(--st-on-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--st-primary);
    --bs-pagination-active-border-color: var(--st-primary);
    --bs-pagination-active-color: var(--st-on-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--st-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--st-primary-rgb), 0.25);
}

/* ===== 3. Ikonkalar (SVG sprite'lar: fragments/icons.jte, tabler-icons.jte) ===== */
.bi {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Taksonomiya belgilarining kvadrati (ro'yxatlar, kategoriya plitkalari) */
.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
}

.icon-square .taxonomy-icon-img {
    width: 2.4rem;
    height: auto;
    border-radius: 2px;
}

/* Bosh sahifa kategoriya plitkasidagi katta taom rasmi */
.cat-tile-icon .taxonomy-icon-img {
    width: 4.75rem;
    height: auto;
    border-radius: 0;
}

/* Tugma (o'tish tugmachalari) ichidagi kichik bayroq/ikonka */
.btn .taxonomy-icon-img {
    width: 1.15rem;
    height: auto;
    border-radius: 1px;
    vertical-align: -0.1em;
}

h1 .taxonomy-icon-img {
    width: 2.2rem;
    height: auto;
    border-radius: 2px;
    vertical-align: -0.25rem;
}

/* ===== 4. Muqova-rasmli kartalar ===== */
.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.text-shadow-1 { text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25); }

/* Bosh sahifa hero kartasi balandligi */
.hero-cover { min-height: 340px; }

@media (min-width: 768px) {
    .hero-cover { min-height: 460px; }
}

/* Hero matni och rasmlarda ham o'qilishi uchun pastki qorong'ulashtirish */
.hero-cover-scrim {
    background: linear-gradient(180deg,
        rgba(26, 18, 10, 0) 40%,
        rgba(26, 18, 10, 0.65) 100%);
}

/* Retsept kartasi: rasm ustida yozuvli (mokap uslubi) */
.cover-card {
    position: relative;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
}

.cover-card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Och rangli rasmlarda ham oq yozuv o'qilishi uchun quyi qism yetarlicha
   qorong'ulashtiriladi */
.cover-card-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26, 18, 10, 0) 30%,
        rgba(26, 18, 10, 0.55) 65%,
        rgba(26, 18, 10, 0.93) 100%);
}

.cover-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
}

.cover-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.cover-card-meta {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.82rem;
}

/* ===== 5. Sayt-spesifik kichik yordamchilar ===== */
/* Menyu havolalari qora (default navbar rangi xira edi) */
.navbar {
    --bs-navbar-color: rgba(18, 16, 9, 0.85);
    --bs-navbar-hover-color: #121009;
    --bs-navbar-active-color: #121009;
}

/* Navbar qidiruvi: mobilda to'liq en, keng ekranda cheklangan */
.nav-search { flex: 1 1 auto; }

@media (min-width: 992px) {
    .nav-search { max-width: 300px; }
}

/* Mobil drawer: menyu bandlari katta va ajratilgan - o'qish oson */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse { padding-top: 0.5rem; }

    .navbar .navbar-nav .nav-link {
        font-size: 1.2rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .navbar .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; }

    /* Til/kirish qatori ham kattaroq */
    .navbar .navbar-collapse > .d-flex {
        padding: 0.5rem 0 0.75rem;
        font-size: 1.05rem;
    }

    .navbar .navbar-collapse > .d-flex .small { font-size: 1.05rem; }
}

/* Taksonomiya ro'yxati qatori: barcha ekranda katta (o'qish oson) */
.taxonomy-item .icon-square {
    width: 4rem;
    height: 4rem;
    font-size: 1.7rem;
}

.taxonomy-item .icon-square .taxonomy-icon-img { width: 3.4rem; }

.taxonomy-item-name { font-size: 1.25rem; }

.taxonomy-item-count { font-size: 1rem; }

@media (max-width: 767.98px) {
    /* Bosh sahifa plitkalaridagi nomlar ham kattaroq */
    .cat-tile-name { font-size: 1.05rem; }
}

/* "Eng so'nggilari" ro'yxatidagi kichik rasm */
.latest-thumb {
    width: 72px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Retsept sahifasi: muqova va bosqich rasmlari balandligi cheklanadi */
.recipe-cover-img {
    max-height: 460px;
    object-fit: cover;
}

/* Bosqich rasmi: ikkala o'lcham ham auto - nisbat saqlanadi (faqat
   max-height berilsa, en HTML atributida qotib, rasm eziladi) */
.recipe-step-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 360px;
}

/* Yon panel (ingredientlar kartasi) sticky bo'lganda tepadan ozgina joy */
.recipe-aside { top: 1rem; }

/* Ikki qatordan uzun matnni qisqartirish */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== 6. Footer: oq fon, iliq matn (foydalanuvchi talabi - to'q emas) ===== */
.site-footer {
    position: relative;
    background-color: #ffffff;
    border-top: 1px solid var(--bs-border-color);
}

/* Dekorativ taom rasmlari - o'ng chetda. Salat kosasi footer chegarasidan
   YUQORIGA chiqib turadi (mokapdagi overlay) - shu sabab footer overflow'ni
   yashirmaydi; salat manfiy right olmaydi (gorizontal skroll bo'lmasin). */
.footer-decor {
    position: absolute;
    pointer-events: none;
}

/* Keng ekranda dekor viewport chetiga emas, kontent (container, maks 1320px)
   chetiga yopishadi: calc(50% - Nrem) - markazdan kontener yarmigacha masofa.
   Kompozitsiya (mokapdagidek): rayhon chegarani ozgina kesib o'tadi, kosa
   uning ostida, barglari kosa orqasida qoladi (DOM tartibi: salat keyin). */
.footer-decor-basil {
    top: -2.5rem;
    right: max(3rem, calc(50% - 43rem));
    width: 130px;
    height: auto;
}

/* Kosa pastki-o'ng burchakda (mokapdagidek), pasti © tasmasi ustiga ozgina
   kirib turadi - shu sabab z-index (tasma DOM'da keyin keladi); © matni
   markazda, kosa unga yetmaydi */
.footer-decor-salad {
    bottom: -2.5rem;
    right: max(0.75rem, calc(50% - 46rem));
    width: 250px;
    height: auto;
    z-index: 1;
}

/* Kontent qismi pastki joyi - py-5 o'rniga (utility !important bilan
   urishmaslik uchun alohida klass): keng ekranda odatdagi 3rem. */
.site-footer-body { padding-bottom: 3rem; }

/* Tor ekranlarda (xl dan past) dekor yo'qolmaydi, kichrayadi: rayhon
   tepada logoning bo'sh o'ng yonida, kosa pastdagi zaxira bandda
   (padding-bottom shuning uchun katta - ustunlar matniga tegmaydi).
   Kosaning © tasmasiga kirishi 1rem - tasmaning ichki paddingidan oshmaydi,
   © matni ochiq qoladi. right musbat - gorizontal skroll chiqmaydi. */
@media (max-width: 1199.98px) {
    .site-footer-body { padding-bottom: 8.5rem; }

    .footer-decor-basil {
        width: 100px;
        top: -1.5rem;
        right: 1rem;
    }

    .footer-decor-salad {
        width: 160px;
        bottom: -1rem;
        right: 0.75rem;
    }
}

.site-footer h2 {
    color: var(--bs-emphasis-color);
    font-size: 0.95rem;
    font-weight: 600;
}

.site-footer a {
    color: #6d5d49;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--st-primary-hover);
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
}

.footer-social:hover,
.footer-social:focus-visible {
    background-color: #e9dec4;
}

/* ===== 7. Telegram brend tugmasi (login sahifasi) ===== */
.btn-telegram {
    --bs-btn-bg: #229ED9;
    --bs-btn-border-color: #229ED9;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1c8dc3;
    --bs-btn-hover-border-color: #1c8dc3;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #187fb0;
    --bs-btn-active-border-color: #187fb0;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 34, 158, 217;
}

/* ===== Озуқавий қиймат — сегментли макро-панел ===== */
.macro-bar {
    display: flex;
    gap: 3px;
    height: 14px;
    border-radius: 50rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.macro-bar span {
    display: block;
    height: 100%;
    border-radius: 50rem;
}

.macro-mini {
    height: 5px;
    margin-top: 0.3rem;
    border-radius: 50rem;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.macro-mini span {
    display: block;
    height: 100%;
    border-radius: 50rem;
}

.macro-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.macro-carbs { background: var(--st-primary); }
.macro-protein { background: #7b78f2; }
.macro-fat { background: #4cd29a; }

/* ===== Порция сони stepper (рецепт саҳифасида) ===== */
.serv-input {
    width: 3.4rem;
    -moz-appearance: textfield;
}

.serv-input::-webkit-outer-spin-button,
.serv-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== Юлдузли баҳолаш (CSS-only: DOM 5..1 + row-reverse) ===== */
.rate-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
}

.rate-stars input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rate-stars label {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--bs-border-color);
    cursor: pointer;
    transition: color 0.1s ease-in-out;
}

.rate-stars input:checked ~ label,
.rate-stars label:hover,
.rate-stars label:hover ~ label {
    color: var(--st-primary);
}

.rate-stars input:focus-visible + label {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ===== Чоп этиш: фақат рецепт мазмуни қолади ===== */
@media print {
    header,
    .site-footer,
    .btn,
    form {
        display: none !important;
    }

    .recipe-aside {
        position: static !important;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}

/* ===== Расм lightbox (рецепт муқова/қадам расмлари) ===== */
.recipe-cover-img,
.recipe-step-img {
    cursor: zoom-in;
}

.img-lightbox-content {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: zoom-out;
}

.img-lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
}

/* ===== Статик саҳифа (ёрдам, шартлар...) — ўқишга қулай тор устун ===== */
.static-page {
    max-width: 760px;
}

.static-page-body {
    line-height: 1.7;
}

.static-page-body h2 {
    font-size: 1.35rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.static-page-body h3 {
    font-size: 1.15rem;
    margin-top: 1.25rem;
}

/* ===== Тег/мақсад/жиҳоз chip'лари (автор формаси; admin.css'дагининг
   илиқ мавзудаги муқобили) ===== */
.tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    user-select: none;
}

.tag-chip input {
    margin-right: 0.35rem;
}

.tag-chip:has(input:checked) {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--st-primary);
}

/* ===== Мобил hamburger: рамкасиз, юмалоқ учли чизиқлар; очиқ ҳолатда amber ===== */
.navbar-toggler {
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--st-primary-rgb), 0.35);
}

.navbar-toggler-icon {
    width: 1.6em;
    height: 1.6em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231f1b16' stroke-linecap='round' stroke-width='2.4' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}

.navbar-toggler[aria-expanded="true"] {
    background-color: var(--bs-warning-bg-subtle);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ca8f01' stroke-linecap='round' stroke-width='2.4' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}

/* ===== Бош саҳифа бўлим сарлавҳалари: торда ҳавола синиб кетмасин ===== */
.section-head h2 {
    font-size: 1.5rem;
}

.section-head .icon-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .section-head h2 {
        font-size: 1.2rem;
    }

    .section-head h2 .bi {
        width: 18px;
        height: 18px;
    }

    .section-head .icon-link {
        font-size: 0.85rem;
    }
}