@font-face {font-family:Corinthia; src:url(/font/Corinthia.ttf); font-display:swap}
.butrecepty {background:#FFFFE0; color:#191970; padding:2px; padding-left:8px; padding-right:8px; border-radius:4px; font-size:38px; margin:15px; white-space:nowrap; font-family:Corinthia; border-radius:4px; border:1px solid #651300; display:inline-block}
.butrecepty:hover {background:#6298fe; color:white; border:1px solid #6298fe}
.butrecepty img {padding-right:6px; display:inline-block; vertical-align:text-top; width:45px}
.buttitle {color:#191970; padding:2px; border-radius:4px; font-weight:bold; font-size:23px; margin:5px; white-space:nowrap; margin-bottom:50px}
.linya {margin:20px 0; padding:0; height:10px; border:none; box-sizing:border-box; background-position:50%; color:orange; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="orange"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>'); background-size:6px 6px}
.titlerecepty {font-size:40px; font-family:Corinthia; font-weight:normal; margin-bottom:5px}
@media screen and (max-width:4800px) {
.titlerecepty {font-size:115px; font-family:Corinthia; font-weight:normal}}
@media screen and (max-width:2500px) {
.titlerecepty {font-size:85px; font-family:Corinthia; font-weight:normal}}
@media screen and (max-width:1600px) {
.titlerecepty {font-size:70px; font-family:Corinthia; font-weight:normal}}
@media screen and (max-width:1200px) {
.titlerecepty {font-size:60px; font-family:Corinthia; font-weight:normal}}
@media screen and (max-width:800px) {
.titlerecepty {font-size:50px; font-family:Corinthia; font-weight:normal}}
.titlereceptypd {font-weight:550}
.tablenewstitle {display:inline-block; padding-right:5px; vertical-align:top}
.td1newstitle {max-width:100px; text-align:center; background:#000081; font-weight:bold; color:white; padding:12px; font-size:16px}
.container {max-width:400px}
.td3newstitle {max-width:300px}
.td2newstitle1 {max-height:300px}
.hnewstitle {content-visibility:auto; text-align:center; font-weight:bold; font-size:15px; text-transform: uppercase}
.hnewstext {content-visibility:auto; text-align:left; font-size:15px}
.td4newstitle {text-align:left; font-size:14px; max-width:500px}
@media screen and (max-width:400px)
{.containers {max-width:250px;} .td3newstitle {max-width:200px}
.container1{font-size:12px}}
@media screen and (max-width:300px){
.containers {max-width:200px} .td3newstitle {max-width:150px; font-size:11px}
.container1{font-size:11px}}
.datatime {font-size:25px}
.newtime {font-size:10px}
.title1main {font-size:13px; text-align:right; font-style:italic}
.txtboldfon {background:blue; color:white; padding:3px}
.liniya3 {height:0; border:none; border-top:2px dotted #ddd; max-width:25%; margin-left:auto; margin-right:auto}
.figright {text-align:right}
.rating1, .rating2, .rating3, .rating4, .rating5 {border:none; background:white; margin-right:-4px; display:inline-block; cursor:pointer} 
#rat1 {font-size:12px; text-align:right}
.konturrecept {border:dotted 1px black; border-radius:14px}
.container {text-align:center; display:inline-block; list-style:none; margin-bottom:15px; position:relative}
.container1{margin:0; position:absolute; font-weight:300; line-height:1.1; font-size:20px; left:20px; top:0; padding:6px 20px 6px 10px; background:#0a156a; color:white; z-index:1}
.container1:hover {background:#006020}
.tabrecepty {margin-left:auto; margin-right:auto}
.borderrecept { max-width:500px; margin:auto}
.borderreceptimg {border-radius:10px; border:solid black 1px}
.yellow {text-align:left; padding:10px}
option:nth-of-type(1){color:#ff0000; font-weight:bold}
option:nth-of-type(2){color:#015400; font-weight:bold}
option:nth-of-type(3){color:#7700b7; font-weight:bold}
option:nth-of-type(4){color:#0100ff; font-weight:bold}
input[type=submit] {margin:5px; padding:6px; font-size:12px; background:green; border:none; color:white; padding:8px; font-weight:bold}
input[type=submit]:hover {cursor:pointer; background:blue; color:white; border:none; padding:8px}
option {background:#e8fffe}
optgroup {background:#e8fffe}
select {background:#f3ffa4}
.txtzagolov {color:#0151d6; font-style:italic; display:block}
.yellow {font-style:italic; background:#fcffd3; max-width:400px; font-size:15px; margin-left:auto; margin-right:auto; padding:8px; border-radius:20px; border-bottom-right-radius:80px}
@keyframes gradient {
0% {background-position:0 50%}
50% {background-position:100% 50%}
100% {background-position:0 50%}}
.grid-container {display:grid; grid-template-columns:1fr; grid-template-rows: 1fr; position:relative; width:300px; margin:10px; font-size:15px; margin-left:auto; margin-right:auto; margin-bottom:50px}
.image-element {border:dotted 1px black; border-radius:14px; width:300px; grid-column: 1 / 2; grid-row: 1 / 2; height:100%; margin-bottom:20px}
.text-overlay {align-self:center; justify-self:center; color:white; font-size:15px; content-visibility:auto; text-align:center; font-weight:bold; font-size:15px; text-transform: uppercase; margin:0; position:absolute; font-weight:300; line-height:1.1; font-size:20px; left:20px; top:0; padding:6px 20px 6px 10px; background:#0a156a; z-index:1; width:200px; text-decoration:none}
.text-overlay a {color:white}
:root {--accent:#ffd700; --text:#333; --bg:#f4f4f4}
body {font-family:'Segoe UI', sans-serif; color:var(--text)}
.recipes-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:25px; padding:20px; max-width:1200px; margin:0 auto; transition:opacity 0.3s ease}
.recipe-card {background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); display:flex; flex-direction:column; transition:transform 0.3s}
.recipe-card:hover {transform:translateY(-5px)}
.recipe-media {position:relative; height:200px; overflow:hidden; background:#ddd}
.recipe-img {width:100%; height:100%; object-fit:cover}
.recipe-counter {position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.7); padding:4px 10px; border-radius:20px; display:flex; align-items:center; gap:5px}
.icon-eye {width:18px; height:18px; color:#fff}
.digit {color:var(--accent); font-weight:bold; font-family:monospace; font-size:14px}
.recipe-info {padding:15px; text-align:left; flex-grow:1}
.recipe-title {font-size:18px; margin:0 0 10px; color:#222; text-decoration:none; display:block}
.recipe-desc {font-size:14px; color:#666; line-height:1.5; margin:0}
.sorting-bar {max-width:1200px; margin:20px auto; padding:0 20px; text-align:right}
select {padding:8px 15px; border-radius:8px; border:1px solid #ccc; cursor:pointer; outline:none}	
.pag-link, .pag-btn {appearance:none; border:none; cursor:pointer}
.pagination-wrapper {display:flex; justify-content:center; gap:10px; margin-top:30px}
.pag-link, .pag-btn {border:none; background:#fff; padding:10px 15px; border-radius:8px; cursor:pointer; font-weight:bold; box-shadow:0 2px 5px rgba(0,0,0,0.1); transition:0.3s}
.pag-link.active {background:#ffd700; color:#000}
.pag-link:hover:not(.active) {background:#f0f0f0}
.pag-dots {line-height:40px; color:#999}
.recipe-menu {max-width:1000px; margin:20px auto; padding:0 15px}
.menu-title {font-family:'Segoe UI', sans-serif; color:#2d3436; font-size:1.4rem; margin-bottom:1.5rem; text-align:center}
.recipe-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px}
.recipe-cardmenu {display:flex; align-items:center; padding:12px 15px; background:#fff; border:1px solid #eee; border-radius:10px; text-decoration:none; color:#444; transition:all 0.25s ease; font-size:0.95rem; font-weight:500}
.recipe-cardmenu svg {width:20px; height:20px; margin-right:10px; flex-shrink:0; color:#ff7675}
.recipe-cardmenu:hover {background:#ff7675; color:#fff; border-color:#ff7675; transform:translateY(-3px); box-shadow:0 5px 15px rgba(255, 118, 117, 0.3)}
.recipe-cardmenu:hover svg {color:#fff}
@media (max-width: 480px) {
.recipe-grid {grid-template-columns:repeat(2, 1fr);}
.recipe-cardmenu {padding:10px; font-size:0.85rem}}

.badimg {margin-bottom:0; margin:.625rem}
.badimg:hover {animation:pulse 2s ease-in-out infinite; cursor:pointer}
.count-num {color:#444; font-size:1.125rem; font-weight:bold}
.custom-slider {position:relative; width:100%}
.datanr {text-align:left}
.datarecept {font-size:.75rem; margin-left:auto; margin-right:0}
.down .icon-wrap {color:#ccc}
.down .icon-wrap:hover {border-color:#d32f2f; color:#d32f2f}
.icon-wrap {background:#f8f9fa; border-radius:50%; border:1px solid #eee; cursor:pointer; padding:.75rem; transition:all .2s ease}
.icon-wrap:hover {background:#fff; box-shadow:0 5px 15px rgba(0,0,0,0.1); transform:scale(1.1)}
.msg-status {border-radius:5px; font-size:.813rem; font-weight:bold; margin-top:.938rem; padding:.313rem}
.news-card {background:#f9f9f9; border-radius:8px; border:1px solid #ddd; display:flex; flex-direction:column; height:100%; overflow:hidden}
.news-card h2 {-webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box; font-size:1rem; height:2.4em; hyphens:auto; line-height:1.2; margin-top:10px; margin:0; overflow-wrap:break-word; overflow:hidden; padding:.938rem; word-break:normal}
.news-card img {border-radius:10px; display:block; height:180px; object-fit:cover; width:100%}
.news-slider-container {margin:0 auto; max-width:75rem; overflow:hidden; padding:2.5rem 0; width:100%}
.next {right:-10px}
.okimg {margin-bottom:0; margin:.625rem}
.okimg:hover {animation:pulse 2s ease-in-out infinite; cursor:pointer}
.prev {left:-10px}
.rating-bar-bg {background:#f0f0f0; border-radius:10px; height:.375rem; overflow:hidden; position:relative}
.rating-bar-fill {background:linear-gradient(to right, #4caf50, #81c784); height:100%; transition:width .5s ease}
.rating-container {align-items:flex-end; display:flex; justify-content:space-around; margin-bottom:1.25rem}
.rating-count {color:#999; font-size:.688rem}
.rating-header {margin-bottom:1.25rem}
.rating-item .label {color:#777; font-size:.688rem; font-weight:bold}
.rating-item {align-items:center; display:flex; flex-direction:column; gap:.5rem}
.rating-title {color:#333; display:block; font-weight:800; letter-spacing:1px}
.rating-wrapper {background:#fff; border-radius:15px; box-shadow:0 4px 15px rgba(0,0,0,0.05); font-family:sans-serif; margin:2.5rem auto; max-width:21.875rem; padding:1.25rem; text-align:center}
.ratingb {background:blue; color:#fff; cursor:default; text-align:center}
.ratingimg {border:1px solid black; margin:auto; width:12.5rem}
.ratingimg1 {border:1px solid black; margin:auto; width:12.5rem}
.ratingimgok {height:6.875rem; width:6.25rem}
.ratings {background:green; color:#fff; cursor:default; text-align:center}
.ratingtxt1 {color:green; font-size:.75rem; font-weight:bold; text-align:center}
.ratingtxt2 {color:blue; font-size:.75rem; font-weight:bold; text-align:center}
.result-fade {animation:fadeIn .5s ease-in}
.slider-btn {align-items:center; background:rgba(0,0,0,0.6); border-radius:50%; border:none; color:white; cursor:pointer; display:flex; height:40px; justify-content:center; padding:15px 10px; position:absolute; top:50%; transform:translateY(-50%); transition:0.3s; width:40px; z-index:10}
.slider-btn:hover {background:#000}
.slider-item {flex:0 0 85%; scroll-snap-align:start}
.slider-wrapper {display:flex; gap:15px; overflow-x:auto; padding:10px 0; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none}
.slider-wrapper::-webkit-scrollbar {display:none}
.success {background:#e8f5e9; color:#2e7d32}
.swiper-wrapper {display:flex; flex-direction:row}
.txtzagolov {font-size:.875rem; font-weight:normal; margin-bottom:2.5rem; text-align:center}
.up .icon-wrap {color:#ccc}
.up .icon-wrap:hover {border-color:#2e7d32; color:#2e7d32}
.warning {background:#ffebee; color:#d32f2f}
@keyframes fadeIn {from {opacity:0; transform:translateY(0.625rem)}to {opacity:1; transform:translateY(0)}}
@keyframes pulse {from {transform:scale(1)}50% {transform:scale(1.25)}to {transform:scale(1)}}
@media (max-width: 768px) {.slider-btn {display:none}}
@media (min-width: 768px) {.slider-item {flex:0 0 calc(33.333% - 10px)}}
h1 {text-align:center}