@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Dancing+Script:wght@700&display=swap');

nav {
    padding:20px 0px 0px 40px;
}

.main-nav {
    display: inline-flex;
    justify-content: space-between;
    font-size: 24px !important;
}

.recipes-list{
    display: flex;
    gap: 50px;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30px 0px 30px 110px;
    max-width: 1400px;         /* Sau 100% dacă vrei chiar pe tot ecranul */
    margin: 0 auto;
    width: 120%;
}

.recipe-card{
    width: 100%;
    max-width: 300px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px;
    gap: 8px;
    overflow: hidden;
    background: beige;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.recipe-card:hover {
    /* Mută cardul în sus cu 8 pixeli */
    transform: translateY(-8px);

    /* Face umbra de sub card mai mare și mai pronunțată */
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.3), 0 20px 35px 0 rgba(0, 0, 0, 0.25);
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h3{
    text-align: center;
    text-wrap: wrap;
    text-justify: auto;
    margin-top: 0;
    margin-bottom: 0px;
    color: maroon;
    font-family: 'Dancing Script', cursive !important;
    font-size: 45px;
    font-weight: 100 !important; /* Folosește varianta maximă de grosime disponibilă în font */
    letter-spacing: 0.5px;
}

.category-info {
    text-align: center;
    font-size: 25px;
    color: darkorange;
    margin-top: 0;
    margin-bottom: 0px;
}

.bottom-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0px;
    align-items: center;
    color:indigo !important;
}

.messages {
    font-size: 25px;
}

.bottom-info * {
    font-size: 20px;
}

.user-info{
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    color: darkblue !important;
}

.user-info * {
    font-size: 20px;
}

.select-label{
    display: flex;
    flex-direction: row;    /* 👈 SCHIMBARE: Le așază pe verticală, una sub cealaltă */
    align-items: flex-start;   /* Le aliniază pe toate la marginea din stânga */
    justify-content: flex-start;
    gap: 5px !important;
    padding:20px 10px 20px 10px;
    background: transparent;
    float: right !important; /* Îl obligă să plutească în dreapta */
    width: auto !important;
}

.select-label * {
    border-radius: 8px;
    color: black;
    font-size: 18px !important; /* Dimensiunea dorită */
    line-height: normal !important;
    border: none !important;
}

.choices {
    display: flex;
    gap: 10px;
}

.main-nav {
    display: flex;
    justify-content: space-between;
}

.imagine_prezentare{
    width: 300px !important;
    height: 250px !important;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0px;
}

/* 1. Revenim la fundalul simplu pe body */
html, body {
    max-width: 100% !important;
    width: 99%;
    overflow-x: hidden;
    background-color: bisque;
    margin: 0;
    padding: 0;
}

/* 2. Blocăm containerul în partea de sus a ecranului */
.banner-container-fix {
    position: absolute ;
    top: 10px;              /* Lasă un mic spațiu elegant de 10px sus */
    left: 50%;              /* Îl aduce pe mijloc */
    transform: translateX(-50%); /* Centrează perfect elementul pe orizontală */
    z-index: 10;             /* Îl ține deasupra fundalului, dar sub alte elemente interactive */

    width: 100%;           /* Lățimea fixă a bannerului tău */
    height: 200px;

    /* 👈 AICI APLICĂM ROTUNJIREA */
    border-radius: 20px !important;    /* Ajustează valoarea (ex: 15px, 25px) pentru o rotunjire mai mare sau mai mică */
    overflow: hidden;       /* 👈 OBLIGATORIU: Taie colțurile ascuțite ale imaginii din interior */
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 1) !important;
}

/* Asigură așezarea perfectă a pozei în container */
.banner-container-fix img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.imagine_prezentare {
    width: 100%;
    height: 50%;
    object-fit: cover;
    display: block;
}

.adding-recipe{
    padding:0px 0px 20px 20px;
 }

.update-recipe{
    padding:0px 0px 20px 20px;

 }
.recipe-delete{
    padding: 40px 0px 0px 20px;
    font-size: larger !important;
 }

.delete-choice{
    width: 60px;
    height: 40px !important;
    border-radius: 8px;
    font-size: medium;
    gap: 50px !important;
}

.choices{
    display: flex;
    padding:10px 0px 0px 60px;
}

.recipe-detail{
    padding:0px 0px 0px 30px;
}

.comments{
    padding:0px 0px 0px 30px;
}

.comment {
    background: blanchedalmond;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    position: relative;
    width: 60ch;                 /* Setează lățimea fixă la aprox. 60 de caractere */
    max-width: 100%;             /* Se asigură că box-ul rămâne responsiv pe ecrane mici */
    overflow-wrap: break-word;
    padding: 0px 10px 0px 10px;
}

.recipe-view{
    display: block;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: burlywood;
    font-size: larger;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6),
                inset 0 0 30px rgba(92, 58, 33, 0.4),
                inset 0 0 100px rgba(92, 58, 33, 0.2);
    padding: 30px 30px;
    position: relative;
}

.recipe-delete-modify{
    display: flex !important;
    border-radius: 8px;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
}

.recipe-delete-modify a {
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 8px;
    border-bottom: none !important;
    box-shadow: none !important;
}

.bottom-info a {
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

.user-delete {
    display: block;
    padding: 30px 30px;
    margin: 30px 0px 0px 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: burlywood;
    font-size: larger;
    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(92, 58, 33, 0.4),
        inset 0 0 100px rgba(92, 58, 33, 0.2);
    position: relative;
}

.connecting {
     margin: 30px 0px 0px 30px;
}

.confirm_delete a {
    padding: 50px 10px 0px 0px;
    justify-content: flex-end;
    color: red;
}

.titlu-sub-banner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    pointer-events: none !important; /* Permite click-ul pe butoane */
    font-family: 'Dancing Script', cursive !important;
    font-size: 7rem !important;
}

.register {
     padding: 20px 0px 30px 30px !important;
}

.retetele-mele {
    display: flex !important;
    flex-direction: column; /* Pune cele două rețete una sub alta */
    padding: 0px 0px 0px 50px;             /* Elimină spațiul implicit din stânga listei */
    font-size: larger;
}

.wrapper {
    font-size: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
}

#search {
    font-size: 22px;
    border-radius: 8px; /* Ajustează valoarea (ex: 4px, 6px, 8px) în funcție de cât de rotund îl vrei */
    border: 1px solid #ccc;
    padding: 6px 12px; /* Opțional: adaugă puțin spațiu interior pentru text */
}

.wrapper form button[type="submit"] {
    border-radius: 8px; /* Aceeași rază ca la casetă pentru a fi simetrice */
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
}

.sort-hamburger-container {
    position: relative;
    display: inline-block;
}

.hamburger-btn {
    background: burlywood;
    border: 1px solid #ccc;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 10px;
    user-select: none;
}

.select-label {
    display: none; /* Ascuns implicit */
    position: absolute;
    right: 0;
    top: 42px;
    background-color: burlywood;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 240px;

    /* Așezăm filtrele pe verticală în interiorul meniului */
    flex-direction: column;
    gap: 10px;
}

.select-label label {
    font-weight: bold;
    margin-top: 5px;
}

.select-label select {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
}

.sort-hamburger-container:focus-within .select-label {
    display: flex;
}

@media screen and (max-width: 1400px) {

    /* Stilurile tale anterioare (meniu, welcome, etc.) rămân neschimbate */
    /* FORȚĂM MĂRIREA PENTRU TOATE ELEMENTELE DIN FORMULAR */
    .select-label label,
    .select-label form label,
    .select-label input,
    .select-label button,
    .select-label select {
        display: flex !important;
        font-size: 35px !important; /* Dimensiunea dorită */
        line-height: normal !important;
        flex-direction: row !important; /* Le așază pe un singur rând (orizontal) */
        justify-content: flex-start !important; /* Le trage/lipește la maxim în STÂNGA */
        align-items: center !important; /* Le aliniază frumos la mijloc pe verticală */
        flex-wrap: nowrap !important; /* Împiedică elementele să sară pe rândul următor */
        gap: 5px !important; /* Pune un spațiu mic între căsuțe ca să aibă loc toate */
        width: 100% !important;
    }

    .main-nav a,
    .retetele-mele a,
    .welcome {
        font-size: 50px !important;
        display: inline-block !important;
    }

    .titlu-sub-banner {
    display: none !important;
    }

    .user-info * {
    font-size: 30px;
    }

    .category-info {
    font-size: 35px;
    color: brown;
    font-family: 'Arial', cursive !important;
    }

    .messages {
    font-size: 50px;
    }

    .card-content h3 {
        font-family: 'Dancing Script', cursive !important;
        font-size: 60px !important;
        color: black;
    }

    .recipes-list{
    display: flex;
    gap: 50px;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30px 10px 30px 30px;
    max-width: 1400px;         /* Sau 100% dacă vrei chiar pe tot ecranul */
    margin: 0 auto;
    width: 120%;
    }

    html, body {
    overflow-x: hidden;
    max-width: 99% !important;
    width: 100% !important;
    background-color: bisque;
    margin: 0;
    padding: 0;
    }

    /* Adăugăm padding suplimentar și pe buton pentru a se potrivi ca înălțime cu search-ul */
    .select-label button {
        padding: 10px 20px !important;
        cursor: pointer;
        flex-shrink: 0 !important;
    }

    .select-label input[type="text"],
    .select-label select {
        width: auto !important; /* Nu le lăsa să ocupe tot ecranul */
        max-width: 180px !important; /* Ajustează această valoare în pixeli dacă vrei căsuțe mai mari sau mai mici */
    }

    #search {
        font-size: 32px; /* Ajustează la 20px dacă îl vrei și mai mare */
        width: auto !important;            /* Anulează lățimea completă */
        max-width: 300px !important;
        height: 65px !important;       /* Setăm o înălțime fixă clară în pixeli */
        padding: 2px 15px !important;  /* Padding doar pe stânga/dreapta, înălțimea e controlată de height */
        box-sizing: border-box !important;
    }

    .wrapper form button[type="submit"] {
        font-size: 40px !important;
        height: 65px !important;       /* Aceeași înălțime fixă ca la căsuță */
        padding: 2px 20px !important;  /* Oferim puțin mai mult spațiu lateral pe buton */
        box-sizing: border-box !important;

        cursor: pointer;
        display: inline-flex;          /* Ajută la centrarea textului în interiorul butonului */
        align-items: center;
    }

    .wrapper form label {
        font-size: 50px !important;
    }

    .hamburger-btn {
        font-size: 50px !important;
        padding: 8px 16px;
        background-color: burlywood !important;
        color: black !important;
    }

    .select-label label {
        font-size: 50px !important;
    }

    .select-label select {
        font-size: 35px !important;
        padding: 8px;
    }

    .recipe-view {
        width: 100% !important;        /* Forțează containerul să ocupe toată lățimea ecranului */
        max-width: 100% !important;    /* Elimină orice limită anterioară de lățime */
        box-sizing: border-box;        /* Include padding-ul și bordura în lățimea totală de 100% */

        padding: 20px 15px !important; /* Reducem padding-ul ca să lăsăm mai mult loc pentru text pe telefoane */

        /* Păstrăm restul stilurilor tale vizuale intacte */
        background: burlywood;
        font-size: 35px !important; /* Mărește dimensiunea generală a textului (ajustează de la 22px la 26px dacă vrei mai mare) */
        line-height: 1.5 !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6),
                    inset 0 0 30px rgba(92, 58, 33, 0.4),
                    inset 0 0 100px rgba(92, 58, 33, 0.2);
    }

    .comment {
        font-size: 35px !important;
        background: blanchedalmond;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        position: relative;
        width: 60ch;                 /* Setează lățimea fixă la aprox. 60 de caractere */
        max-width: 100%;             /* Se asigură că box-ul rămâne responsiv pe ecrane mici */
        overflow-wrap: break-word;
        padding: 0px 10px 0px 10px;
    }

    .comment span {
        font-size: 38px !important; /* Aici pui dimensiunea mai mare pe care o dorești pe mobil */
    }

    .print-btn {
        font-size: 30px !important;
    }
}

.print-btn {
    background-color: sandybrown; /* O culoare vișinie/maro asortată */
    color: black;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.print-btn:hover {
    background-color: #a52a2a;
}

@media print {
    /* Ascundem tot ce este inutil pe foaia A4 */
    header, footer, nav,
    .wrapper, .search-section, .sort-hamburger-container,
    .comments-section,.comments, form, button, .select-label,
    .banner-container-fix, .retetele-mele, .print-btn {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
    }

    body, html {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Forțăm rețeta să înceapă pe prima pagină, curat */
    .recipe-view {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10mm 0 0 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        page-break-before: avoid !important;
        break-before: avoid !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Ajustăm textul și titlurile rețetei pentru imprimare */
    .recipe-view, .recipe-view ul, .recipe-view ol, .recipe-view li, .recipe-view p {
        font-size: 12pt !important;
        color: #000 !important;
        line-height: 1.5 !important;
    }

    .recipe-view h1, .recipe-view h2, .recipe-view h3, .recipe-view .title-reteta {
        display: block !important;
    }
}

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: #ffffff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    width: 90%;
    max-width: 500px;
}
.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    gap: 15px;
}
.cookie-btn {
    background-color: #e67e22; /* O culoare portocalie, potrivită pentru un site de rețete */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.cookie-btn:hover {
    background-color: #d35400;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.btn-accept {
    background-color: #e67e22; /* Portocaliu */
    color: white;
}

.btn-accept:hover {
    background-color: #d35400;
}

.btn-reject {
    background-color: #7f8c8d; /* Gri discret pentru refuz */
    color: white;
}

.btn-reject:hover {
    background-color: #95a5a6;
}

.site-domain {
    font-weight: bold;
    color: #f1c40f; /* Un galben-auriu cald care arată excelent */
    font-style: italic;
}
.cookie-policy-link {
    color: #f1c40f; /* Folosește același galben-auriu ca numele domeniului */
    text-decoration: underline; /* Îl lăsăm subliniat ca utilizatorul să știe că este un link activ */
    font-weight: bold;
    transition: color 0.2s;
}

.cookie-policy-link:hover {
    color: #e67e22; /* Se schimbă în portocaliu când pui mouse-ul pe el */
}

.despre-view {
    display: block;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: burlywood;
    font-size: larger;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6),
                inset 0 0 30px rgba(92, 58, 33, 0.4),
                inset 0 0 100px rgba(92, 58, 33, 0.2);
    padding: 30px 30px;
    position: relative;

    /* Aliniere în stânga și lățime maximă pentru lizibilitate */
    max-width: 800px;
    margin: 40px 0 40px 20px; /* 20px distanță de marginea din stânga a ecranului */
    text-align: left;
}

/* Stiluri suplimentare pentru textele din interior ca să se potrivească cu tema maronie */
.despre-view h1, .despre-view h2 {
    color: #5c3a21;
    margin-top: 25px;
}
.despre-view ul {
    padding-left: 20px;
}
.despre-view li {
    margin-bottom: 12px;
}
.despre-notă {
    background-color: rgba(92, 58, 33, 0.1);
    border-left: 4px solid #5c3a21;
    padding: 15px;
    margin-top: 30px;
    border-radius: 4px;
}