/* ============================================================
   Clock WP — Frontend Card CSS
   Card de horários na página do anúncio
   ============================================================ */

/* ─── Card Container ─────────────────────────────────────────── */
.clock-wp-card {
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 1.5rem;
	padding: 2rem;
	margin-top: 2rem;
	font-family: inherit;
}

/* ─── Card Header ────────────────────────────────────────────── */
.clock-wp-card__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.clock-wp-card__icon {
	color: var(--gcep-color-primary, #3b82f6);
	font-size: 1.5rem;
}

.clock-wp-card__title {
	font-size: 1.25rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

/* ─── Status Badge ───────────────────────────────────────────── */
.clock-wp-status-badge {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.clock-wp-status-badge.clock-wp-status--open {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.clock-wp-status-badge.clock-wp-status--closed {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.clock-wp-status-badge.clock-wp-status--lunch {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.clock-wp-status-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
}

.clock-wp-status--open .clock-wp-status-icon    { color: #16a34a; }
.clock-wp-status--closed .clock-wp-status-icon  { color: #dc2626; }
.clock-wp-status--lunch .clock-wp-status-icon   { color: #d97706; }

.clock-wp-status-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.clock-wp-status-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.clock-wp-status-message {
	font-size: 0.8125rem;
	opacity: 0.8;
}

/* ─── Weekly List ────────────────────────────────────────────── */
.clock-wp-weekly-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.clock-wp-day {
	display: flex;
	flex-direction: column;
	padding: 0.625rem 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 0.8125rem;
	gap: 0.125rem;
}

.clock-wp-day:last-child {
	border-bottom: none;
}

.clock-wp-day__main-row,
.clock-wp-day__lunch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.clock-wp-day__lunch-row {
	margin-top: 0.125rem;
	font-size: 0.75rem;
	color: #64748b;
}

.clock-wp-day__lunch-label {
	padding-left: 0.75rem;
	font-weight: 500;
}

.clock-wp-day__lunch-hours {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.clock-wp-day__name {
	color: #475569;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.clock-wp-day__hours {
	color: #334155;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.clock-wp-day--closed .clock-wp-day__name,
.clock-wp-day--closed .clock-wp-day__hours {
	color: #94a3b8;
}

.clock-wp-day__closed-label {
	font-weight: 400;
	font-style: italic;
}

/* ─── Hoje Badge ─────────────────────────────────────────────── */
.clock-wp-day--today {
	background: rgba(var(--gcep-color-primary-rgb, 59,130,246), 0.04);
	margin: 0 -0.25rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	border-radius: 0.5rem;
	border-bottom-color: transparent;
}

.clock-wp-day--today .clock-wp-day__name {
	color: var(--gcep-color-primary, #3b82f6);
	font-weight: 700;
}

.clock-wp-day--today .clock-wp-day__hours {
	color: var(--gcep-color-primary, #3b82f6);
	font-weight: 700;
}

.clock-wp-today-badge {
	font-size: 0.625rem;
	font-weight: 800;
	background: var(--gcep-color-primary, #3b82f6);
	color: #fff;
	padding: 0.0625rem 0.375rem;
	border-radius: 9999px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ─── Lunch Divider ──────────────────────────────────────────── */
.clock-wp-lunch-divider {
	color: #cbd5e1;
	font-weight: 400;
	margin: 0 0.125rem;
}

/* ─── Status Badge (shortcode standalone) ────────────────────── */
.clock-wp-status-badge--green,
.clock-wp-status-badge--red,
.clock-wp-status-badge--yellow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.clock-wp-status-badge--green  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.clock-wp-status-badge--red    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.clock-wp-status-badge--yellow { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

.clock-wp-status-badge--green .clock-wp-icon,
.clock-wp-status-badge--red .clock-wp-icon,
.clock-wp-status-badge--yellow .clock-wp-icon {
	font-size: 1rem;
}

.clock-wp-status-msg {
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.8;
	margin-left: 0.25rem;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
	.clock-wp-card {
		padding: 1rem;
		border-radius: 0.75rem;
	}

	.clock-wp-day {
		font-size: 0.75rem;
	}
}

/* ─── Header Status Badge ────────────────────────────────────── */
.clock-wp-header-status {
	display: inline-block;
	margin-top: -0.75rem;
	margin-bottom: 0.25rem;
	max-width: max-content;
	width: auto;
	align-self: center; /* Centraliza no contêiner flex no mobile */
}

@media (min-width: 768px) {
	.clock-wp-header-status {
		margin-top: -0.5rem;
		margin-bottom: 0.25rem;
		margin-left: -0.625rem;
		align-self: flex-start; /* Alinha à esquerda no desktop */
	}
}

.clock-wp-header-status .clock-wp-status-badge {
	margin-bottom: 0;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px; /* Formato de pílula compacta */
	box-shadow: none;
	border-width: 1px;
}

.clock-wp-header-status .clock-wp-status-icon {
	font-size: 0.9rem;
}

.clock-wp-header-status .clock-wp-status-content {
	flex-direction: row;
	align-items: center;
	gap: 0.25rem;
}

.clock-wp-header-status .clock-wp-status-label {
	font-size: 0.7rem;
	letter-spacing: 0.025em;
	line-height: 1;
}

.clock-wp-header-status .clock-wp-status-label:not(:last-child)::after {
	content: "•";
	margin-left: 0.25rem;
	opacity: 0.6;
}

.clock-wp-header-status .clock-wp-status-message {
	font-size: 0.7rem;
	line-height: 1;
	text-transform: none;
}

/* ─── Card Status Badge ──────────────────────────────────────── */

/* Slot de altura fixa — sempre presente no HTML, com ou sem badge */
.clock-wp-card-badge-slot {
	height: 1.25rem; /* 20px — altura compacta, só o suficiente para o badge */
	display: flex;
	align-items: center;
	margin-top: auto; /* empurra sempre para a base do card body */
	padding-bottom: 0; /* remove espaço extra abaixo do badge */
}

/* Remove o padding inferior do card body para o badge ficar colado ao rodapé */
.gcep-card-body {
	padding-bottom: 0.5rem !important;
}

.clock-wp-card-status-wrapper {
	display: contents; /* wrapper transparente — o span herda o flex do slot */
}

.clock-wp-card-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.45rem;
	border-radius: 9999px;
	border-width: 1px;
	border-style: solid;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.clock-wp-card-status-badge.clock-wp-status--open {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

.clock-wp-card-status-badge.clock-wp-status--closed {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

.clock-wp-card-status-badge.clock-wp-status--lunch {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}