/**
 * Componente: Restaurant Header (Estilos)
 * Ubicación: components/restaurant-header/restaurant-header.css
 * Design System: Premium Hero (Estilo ShadCN / Apple Minimal)
 *
 * @package UnionnFoodFlow
 */

.uff-restaurant-header {
	width: 100%;
	box-sizing: border-box;
	background: var(--uff-card-bg, #ffffff);
	border: 1px solid var(--uff-color-border, #e2e8f0);
	border-radius: var(--uff-radius-lg, 12px);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

/* Contenedor de la Imagen de Portada */
.uff-restaurant-header__cover {
	position: relative;
	width: 100%;
	height: 180px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.uff-restaurant-header__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

/* Botón flotante estilo Apple */
.uff-restaurant-header__fav-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
	color: var(--uff-text-muted, #64748b);
	padding: 0;
}

.uff-restaurant-header__fav-btn:hover {
	transform: scale(1.08);
	background: #ffffff;
	color: #ef4444; /* Favorito activo */
}

.uff-restaurant-header__fav-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

.uff-restaurant-header__fav-btn.is-favorite {
	color: #ef4444;
}

/* Fila de Marca inferior */
.uff-restaurant-header__brand-row {
	display: flex;
	padding: 24px;
	gap: 20px;
	position: relative;
	box-sizing: border-box;
}

/* Logotipo Flotante superpuesto en la portada */
.uff-restaurant-header__logo-wrapper {
	width: 80px;
	height: 80px;
	border-radius: var(--uff-radius-md, 8px);
	border: 4px solid var(--uff-card-bg, #ffffff);
	background: var(--uff-card-bg, #ffffff);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	margin-top: -54px;
	z-index: 2;
	overflow: hidden;
	flex-shrink: 0;
}

.uff-restaurant-header__logo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uff-restaurant-header__logo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f1f5f9;
	color: var(--uff-text-muted, #64748b);
}

/* Información del Restaurante */
.uff-restaurant-header__meta-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uff-restaurant-header__title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px;
}

.uff-restaurant-header__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--uff-text-main, #0f172a);
	line-height: 1.2;
}

/* Sistema de Valoraciones */
.uff-restaurant-header__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: #fafafa;
	border: 1px solid var(--uff-color-border, #e2e8f0);
	padding: 4px 8px;
	border-radius: 6px;
	height: 24px;
	box-sizing: border-box;
}

.uff-restaurant-header__rating .dashicons-star-filled {
	color: #f59e0b; /* Amber 500 */
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
}

.uff-restaurant-header__rating-score {
	font-size: 12px;
	font-weight: 700;
	color: var(--uff-text-main, #0f172a);
}

.uff-restaurant-header__rating-count {
	font-size: 11px;
	color: var(--uff-text-muted, #64748b);
}

.uff-restaurant-header__description {
	margin: 0;
	font-size: 13px;
	color: var(--uff-text-muted, #64748b);
	line-height: 1.4;
}

/* Etiquetas o Tags de Categorías */
.uff-restaurant-header__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.uff-restaurant-header__tag-badge {
	font-size: 11px;
	font-weight: 500;
	background-color: #f1f5f9; /* Slate 100 */
	color: var(--uff-text-main, #0f172a);
	padding: 2px 8px;
	border-radius: 4px;
}

/* Adaptación Responsiva Móvil */
@media (max-width: 580px) {
	.uff-restaurant-header__brand-row {
		flex-direction: column;
		padding: 16px;
		gap: 12px;
	}
	.uff-restaurant-header__logo-wrapper {
		margin-top: -46px;
		width: 64px;
		height: 64px;
	}
	.uff-restaurant-header__title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}
/* Embedded variant used by the real storefront. */
.uff-restaurant-header--embedded{overflow:visible;box-shadow:none;border:0;background:transparent}
.uff-restaurant-header--embedded .uff-restaurant-header__brand-row{padding:0;align-items:center;gap:16px}
.uff-restaurant-header--embedded .uff-restaurant-header__logo-wrapper{width:64px;height:64px;margin:0;border:1px solid var(--uff-color-border);border-radius:16px;box-shadow:none;padding:5px}
.uff-restaurant-header--embedded .uff-restaurant-header__logo{object-fit:contain}
.uff-restaurant-header--embedded .uff-restaurant-header__eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--uff-color-primary)}
.uff-restaurant-header--embedded .uff-restaurant-header__title{font-size:28px;color:var(--uff-color-text);margin:2px 0 4px}
.uff-restaurant-header--embedded .uff-restaurant-header__description{max-width:560px}
.uff-restaurant-header__hours{position:relative;margin-top:16px}.uff-restaurant-header__hours-trigger{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:var(--uff-color-primary,#253e66);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.uff-restaurant-header__hours-panel{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:min(420px,calc(100vw - 32px));padding:14px;border:1px solid var(--uff-color-border,#dbe3ee);border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(37,62,102,.16)}.uff-restaurant-header__hours-tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:#f1f5f9}.uff-restaurant-header__hours-tabs button{flex:1;padding:8px;border:0;border-radius:7px;background:transparent;color:#64748b;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.uff-restaurant-header__hours-tabs button[aria-selected=true]{background:#fff;color:var(--uff-color-primary,#253e66);box-shadow:0 1px 3px rgba(37,62,102,.12)}.uff-restaurant-header__hours-list{padding-top:8px}.uff-restaurant-header__hours-list>div{display:flex;justify-content:space-between;gap:16px;padding:8px 2px;border-bottom:1px solid #eef2f7;font-size:13px}.uff-restaurant-header__hours-list>div:last-child{border:0}.uff-restaurant-header__hours-list strong{font-weight:650;color:var(--uff-color-text,#253e66)}
@media(max-width:640px){.uff-restaurant-header--embedded .uff-restaurant-header__brand-row{flex-direction:row;padding:0}.uff-restaurant-header--embedded .uff-restaurant-header__logo-wrapper{margin:0;width:56px;height:56px}.uff-restaurant-header--embedded .uff-restaurant-header__title{font-size:23px}}