/* Smart Recipe Add‑On — front‑end styles  v0.7.0 */

/* ====================================================================
   SRA Yield / Units scaler – responsive, theme‑proof, accessible
   ==================================================================== */

/* container --------------------------------------------------------- */
.mv-create-servings{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.4rem;
    margin:0.75rem 0 0.5rem;
    padding:0.6rem 0.75rem;
    font:inherit;
    text-align:left;
    justify-content:flex-start;
    background:var(--mv-create-bg-color,#fafafa);
    border:1px solid var(--mv-create-border-color,#e8e8e8);
    border-radius:8px;
}

/* label ------------------------------------------------------------- */
.mv-create-servings__label{
    font-weight:600;
    white-space:nowrap;
    margin-right:0.2rem;
    font-size:0.9em;
    letter-spacing:0.01em;
}

/* buttons (shared base) --------------------------------------------- */
.mv-create-servings__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.75rem;
    height:1.75rem;
    border:1px solid var(--mv-create-border-color,#ddd);
    border-radius:5px;
    background:#fff;
    color:inherit;
    font-weight:700;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
    user-select:none;
    transition:background .15s,transform .1s,box-shadow .15s;
}
.mv-create-servings__btn:hover{
    background:var(--mv-create-accent-color,#f0f0f0);
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.mv-create-servings__btn:active{transform:scale(.92);}

/* focus‑visible for keyboard nav (all interactive elements) --------- */
.mv-create-servings__btn:focus-visible,
.mv-create-servings__input:focus-visible,
.mv-create-units__select:focus-visible,
.sra-actions__btn:focus-visible{
    outline:2px solid var(--mv-create-accent-color,#4a90d9);
    outline-offset:2px;
}

/* reset button ------------------------------------------------------ */
.sra-btn--reset{
    font-size:1.1rem;
    margin-left:0.15rem;
}

/* numeric input ----------------------------------------------------- */
.mv-create-servings__input{
    flex:0 0 4ch !important;
    width:4ch !important;
    max-width:52px !important;
    min-width:40px;
    box-sizing:content-box;
    padding:0.22rem 0.4rem;
    border:1px solid var(--mv-create-border-color,#ddd);
    border-radius:5px;
    font:inherit;
    font-size:0.95em;
    text-align:center;
    color:currentColor !important;
    background:#fff !important;
    transition:border-color .15s,box-shadow .15s;
    -moz-appearance:textfield;
}
.mv-create-servings__input:focus{
    border-color:var(--mv-create-accent-color,#4a90d9);
    box-shadow:0 0 0 2px rgba(74,144,217,.18);
}
.mv-create-servings__input::-webkit-outer-spin-button,
.mv-create-servings__input::-webkit-inner-spin-button{
    -webkit-appearance:none; margin:0;
}

/* units drop‑down --------------------------------------------------- */
.mv-create-units__select{
    padding:0.22rem 0.5rem;
    border:1px solid var(--mv-create-border-color,#ddd);
    border-radius:5px;
    font:inherit;
    font-size:0.9em;
    background:#fff;
    cursor:pointer;
    transition:border-color .15s;
}
.mv-create-units__select:focus{
    border-color:var(--mv-create-accent-color,#4a90d9);
}

/* ====================================================================
   Action row (Print, etc.)
   ==================================================================== */
.sra-actions{
    display:flex;
    gap:0.5rem;
    margin:0.25rem 0 0.75rem;
}

.sra-actions__btn{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    padding:0.35rem 0.75rem;
    border:1px solid var(--mv-create-border-color,#ddd);
    border-radius:6px;
    background:#fff;
    color:inherit;
    font:inherit;
    font-size:0.85em;
    font-weight:500;
    cursor:pointer;
    transition:background .15s,box-shadow .15s;
    user-select:none;
}
.sra-actions__btn:hover{
    background:var(--mv-create-accent-color,#f5f5f5);
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.sra-actions__btn:active{transform:scale(.97);}

.sra-actions__btn svg{
    flex-shrink:0;
}

/* clear ingredient list below the action row ----------------------- */
.sra-actions + *{
    flex-basis:100%;
    clear:both;
}

/* ====================================================================
   Mobile (≤ 480 px)
   ==================================================================== */
@media (max-width:480px){
    .mv-create-servings{
        padding:0.5rem 0.6rem;
        gap:0.3rem;
    }
    .mv-create-units__select{
        flex:0 0 100%;
        margin-top:0.15rem;
    }
    .sra-btn--reset{
        margin-left:auto;   /* push reset to right of first row */
    }
    .sra-actions__btn{
        font-size:0.8em;
        padding:0.3rem 0.6rem;
    }
}

/* ====================================================================
   Tablet (481–768 px)
   ==================================================================== */
@media (min-width:481px) and (max-width:768px){
    .mv-create-servings{
        gap:0.35rem;
    }
}

/* ====================================================================
   Print — hide SRA controls, keep recipe clean
   ==================================================================== */
@media print{
    .mv-create-servings,
    .sra-actions{
        display:none !important;
    }
}