/* =========================================================
   MC2 DELIVERY — restaurante/produto_editar.css
   FASE 4 — PADRONIZAÇÃO VISUAL
   Cores, raios e sombras usam o Design System global.
========================================================= */

/* =========================================================
PÁGINA
========================================================= */

.restaurante-produto-page {
width: 100%;
min-height: 100vh;
padding: 30px 20px 60px;
box-sizing: border-box;
}

.restaurante-produto-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
}

/* =========================================================
CABEÇALHO
========================================================= */

.restaurante-produto-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 25px;
margin-bottom: 28px;
}

.restaurante-produto-eyebrow {
display: block;
margin-bottom: 8px;
color: var(--mc2-primary, #EA1D2C);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}

.restaurante-produto-header h1 {
margin: 0;
color: var(--mc2-text, #111827);
font-size: 32px;
line-height: 1.15;
font-weight: 900;
}

.restaurante-produto-header p {
margin: 10px 0 0;
color: var(--mc2-text-secondary, #6B7280);
font-size: 14px;
line-height: 1.6;
}

/* =========================================================
VOLTAR
========================================================= */

.restaurante-produto-back {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 9px 14px;
box-sizing: border-box;
border: 1px solid var(--mc2-info-border, #DBEAFE);
border-radius: var(--mc2-radius-md, 12px);
background: var(--mc2-info);
color:  var(--mc2-surface);
text-decoration: none;
font-size: 13px;
font-weight: 800;
transition:
transform .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}

.restaurante-produto-back:hover {
transform: translateY(-1px);
background: var(--mc2-info-hover);
}

/* =========================================================
FORMULÁRIO
========================================================= */

.restaurante-produto-form {
background: var(--mc2-surface, #FFFFFF);
border: 1px solid var(--mc2-border, #E5E7EB);
border-radius: 20px;
overflow: hidden;
box-shadow:
var(--mc2-shadow-md);
}

/* =========================================================
SEÇÕES
========================================================= */

.restaurante-produto-section {
padding: 28px;
border-bottom: 1px solid var(--mc2-border-soft, #EEF0F3);
}

.restaurante-produto-section-heading {
margin-bottom: 24px;
}

.restaurante-produto-section-heading > span {
display: block;
margin-bottom: 5px;
color: var(--mc2-text-muted, #9CA3AF);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}

.restaurante-produto-section-heading h2 {
margin: 0;
color: var(--mc2-text, #111827);
font-size: 20px;
font-weight: 900;
}

.restaurante-produto-section-heading p {
margin: 7px 0 0;
color: var(--mc2-text-secondary, #6B7280);
font-size: 13px;
line-height: 1.55;
}

/* =========================================================
CAMPOS
========================================================= */

.restaurante-produto-field {
margin-bottom: 20px;
}

.restaurante-produto-field:last-child {
margin-bottom: 0;
}

.restaurante-produto-field label {
display: block;
margin-bottom: 8px;
color: var(--mc2-text, #111827);
font-size: 13px;
font-weight: 900;
}

.restaurante-produto-field input,
.restaurante-produto-field select,
.restaurante-produto-field textarea {
display: block;
width: 100%;
min-height: 48px;
padding: 0 14px;
box-sizing: border-box;
border: 1px solid var(--mc2-border-strong, #D1D5DB);
border-radius: var(--mc2-radius-md, 12px);
outline: none;
background: var(--mc2-surface, #FFFFFF);
color: var(--mc2-text, #111827);
font-family: inherit;
font-size: 14px;
transition:
border-color .18s ease,
box-shadow .18s ease;
}

.restaurante-produto-field textarea {
min-height: 130px;
padding: 13px 14px;
resize: vertical;
line-height: 1.55;
}

.restaurante-produto-field input::placeholder,
.restaurante-produto-field textarea::placeholder {
color: var(--mc2-text-muted, #9CA3AF);
}

.restaurante-produto-field input:focus,
.restaurante-produto-field select:focus,
.restaurante-produto-field textarea:focus {
border-color: var(--mc2-primary, #EA1D2C);
box-shadow:
0 0 0 3px rgba(var(--mc2-primary-rgb), .10);
}

.restaurante-produto-field small {
display: block;
margin-top: 7px;
color: var(--mc2-text-muted, #9CA3AF);
font-size: 11px;
line-height: 1.5;
}

/* =========================================================
PREÇO
========================================================= */

.restaurante-produto-price-input {
position: relative;
}

.restaurante-produto-price-input span {
position: absolute;
top: 50%;
left: 14px;
z-index: 1;
color: var(--mc2-text-secondary, #6B7280);
font-size: 14px;
font-weight: 900;
transform: translateY(-50%);
}

.restaurante-produto-price-input input {
padding-left: 40px;
}

/* =========================================================
UPLOAD
========================================================= */

.restaurante-produto-upload {
width: 100%;
}

.restaurante-produto-upload input[type="file"] {
height: auto;
min-height: 48px;
padding: 9px 11px;
cursor: pointer;
}

.restaurante-produto-upload input[type="file"]:hover {
border-color: var(--mc2-border-strong, #D1D5DB);
}

/* =========================================================
FOTO ATUAL
========================================================= */

.restaurante-produto-current-image {
margin-bottom: 22px;
}

.restaurante-produto-current-image-label {
display: block;
margin-bottom: 9px;
color: var(--mc2-text, #111827);
font-size: 13px;
font-weight: 900;
}

.restaurante-produto-current-image-preview {
width: 180px;
height: 180px;
overflow: hidden;
border: 1px solid var(--mc2-border, #E5E7EB);
border-radius: var(--mc2-radius-lg, 16px);
background: var(--mc2-surface-soft, #F3F4F6);
}

.restaurante-produto-current-image-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* =========================================================
SEM FOTO
========================================================= */

.restaurante-produto-no-image {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
padding: 16px;
box-sizing: border-box;
border: 1px dashed var(--mc2-border-strong, #D1D5DB);
border-radius: var(--mc2-radius-md, 12px);
background: var(--mc2-bg-alt, #FAFAFA);
}

.restaurante-produto-no-image > span {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: var(--mc2-radius-md, 12px);
background: var(--mc2-surface-soft, #F3F4F6);
font-size: 22px;
}

.restaurante-produto-no-image strong {
display: block;
color: var(--mc2-text, #111827);
font-size: 13px;
font-weight: 900;
}

.restaurante-produto-no-image small {
margin-top: 3px;
}

/* =========================================================
AÇÕES
========================================================= */

.restaurante-produto-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 20px 28px;
background: var(--mc2-bg-alt, #FAFAFA);
}

.restaurante-produto-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
box-sizing: border-box;
border-radius: var(--mc2-radius-md, 12px);
font-family: inherit;
font-size: 13px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
transition:
transform .15s ease,
opacity .15s ease,
box-shadow .15s ease;
}

.restaurante-produto-button:hover {
transform: translateY(-1px);
}

.restaurante-produto-button.secondary {
background: var(--mc2-surface, #FFFFFF);
border: 1px solid var(--mc2-border, #E5E7EB);
color: var(--mc2-text, #111827);
}

.restaurante-produto-button.secondary:hover {
border-color: var(--mc2-border-strong, #D1D5DB);
}

.restaurante-produto-button.primary {
border: none;
background: var(--mc2-primary, #EA1D2C);
color: var(--mc2-surface, #FFFFFF);
box-shadow:
0 8px 20px rgba(var(--mc2-primary-rgb), .18);
}

.restaurante-produto-button.primary:hover {
opacity: .94;
}

/* =========================================================
RESPONSIVO
========================================================= */

@media (max-width: 700px) {

.restaurante-produto-page {
    padding:
        20px
        15px
        40px;
}

.restaurante-produto-header {
    align-items: stretch;
    flex-direction: column;
}

.restaurante-produto-header h1 {
    font-size: 27px;
}

.restaurante-produto-back {
    align-self: flex-start;
}

.restaurante-produto-section {
    padding: 22px 18px;
}

.restaurante-produto-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 18px;
}

.restaurante-produto-button {
    width: 100%;
}

.restaurante-produto-current-image-preview {
    width: 160px;
    height: 160px;
}

}

@media (max-width: 480px) {

.restaurante-produto-page {
    padding:
        15px
        10px
        30px;
}

.restaurante-produto-form {
    border-radius: var(--mc2-radius-lg, 16px);
}

.restaurante-produto-header h1 {
    font-size: 24px;
}

.restaurante-produto-section {
    padding: 20px 15px;
}

.restaurante-produto-actions {
    padding: 15px;
}

.restaurante-produto-current-image-preview {
    width: 140px;
    height: 140px;
}

}