/**
 * LUONG Night Life OS — front-end design system (single source of truth for
 * the shared tokens below; every other front-end stylesheet in this plugin
 * and its companion theme reuses these custom properties instead of
 * redefining them — see CHANGELOG.md "1.1.1 — Design system clean-up").
 *
 * Palette is drawn from the Luong crest itself (antique gold linework +
 * deep maroon on dark stone) rather than the generic void-black one-accent
 * look: a warm ivory canvas carries the everyday reading experience, with
 * the crest's maroon and gold reserved for the hero band, CTAs and prices.
 */
:root {
	/* Canvas + surfaces */
	--luong-canvas:      #F3E7C8;
	--luong-canvas-2:    #EAD8A8;
	--luong-surface:     #FFFFFF;
	--luong-surface-2:   #FFFBF1;
	--luong-ink:         #241804;
	--luong-mute:        #6E5B3C;
	--luong-dim:         #9C8760;

	/* Crest accents */
	--luong-gold:        #A2740E;
	--luong-gold-hi:     #C99423;
	--luong-gold-vip:    #8A5A00;
	--luong-maroon:      #6B1D1D;
	--luong-maroon-2:    #4A1414;

	/* Dark contrast band — hero, footer, popup, console. Used sparingly. */
	--luong-dark:        #1C1206;
	--luong-dark-2:      #120B04;
	--luong-ink-inverse: #F6ECD3;
	--luong-mute-inverse:#D8C39A;

	--luong-line:        rgba(107,29,29,.16);
	--luong-line-soft:   rgba(107,29,29,.09);

	--luong-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--luong-display: 'Petrona', Georgia, "Times New Roman", serif;
	--luong-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.luong-hero,
.luong-listings,
.luong-contact,
.luong-smart-menu,
.luong-rooms,
.luong-events { font-family: var(--luong-sans); color: var(--luong-ink); }

/* ---- Buttons ---- */
.luong-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 999px;
	border: 0;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.luong-btn:hover { transform: translateY(-1px); }
.luong-btn--neon {
	color: var(--luong-ink-inverse);
	background: linear-gradient(120deg, var(--luong-gold), var(--luong-maroon));
	box-shadow: 0 10px 26px rgba(107,29,29,.28);
}
.luong-btn--neon:hover { box-shadow: 0 12px 32px rgba(107,29,29,.4); filter: saturate(1.08); }
.luong-btn--wa { color: #05130c; background: #25D366; }
.luong-btn--tg { color: #04121f; background: #29B6F6; }

/* ---- Hero — the one bold, dark moment on an otherwise light page ---- */
.luong-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(130% 140% at 18% -30%, var(--luong-maroon-2), var(--luong-dark) 62%);
	border-radius: 28px;
	padding: clamp(48px, 9vw, 104px) 28px;
	text-align: left;
}
.luong-hero__glow {
	position: absolute; inset: -35% -10% auto auto; width: 55%; height: 70%;
	background: radial-gradient(55% 60% at 50% 50%, rgba(201,148,35,.32), transparent 72%);
	filter: blur(30px); pointer-events: none;
}
.luong-hero__inner { position: relative; z-index: 1; max-width: 640px; margin: 0; }
.luong-hero__eyebrow {
	font-family: var(--luong-mono); font-size: 13px; color: var(--luong-gold-hi);
	margin: 0 0 18px; opacity: .95; letter-spacing: .01em;
}
.luong-hero__title {
	font-family: var(--luong-display); font-weight: 600;
	font-size: clamp(36px, 6.4vw, 64px); line-height: 1.06; margin: 0 0 16px;
	color: var(--luong-ink-inverse);
}
.luong-hero__subtitle { color: var(--luong-mute-inverse); font-size: clamp(16px, 2.2vw, 19px); margin: 0 0 30px; max-width: 46ch; }

/* ---- Section titles ---- */
.luong-listings__title,
.luong-smart-menu__title,
.luong-rooms__title,
.luong-events__title {
	font-family: var(--luong-display); font-weight: 600;
	font-size: clamp(26px, 4vw, 40px); margin: 0 0 24px; color: var(--luong-ink);
}

/* ---- Experiences grid ---- */
.luong-listings__grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(var(--luong-cols, 3), minmax(0, 1fr));
}
@media (max-width: 860px) { .luong-listings__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .luong-listings__grid { grid-template-columns: 1fr; } }
.luong-exp {
	background: linear-gradient(180deg, var(--luong-surface), var(--luong-surface-2));
	border: 1px solid var(--luong-line-soft); border-radius: 20px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(36,24,4,.04);
	display: flex; flex-direction: column;
}
.luong-exp__media { height: 176px; background-size: cover; background-position: center; }
.luong-exp__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.luong-exp__name { margin: 0; font-size: 19px; font-weight: 700; }
.luong-exp__desc { margin: 0; color: var(--luong-mute); font-size: 14px; }
.luong-exp__includes { margin: 0; padding-left: 18px; color: var(--luong-dim); font-size: 13px; }
.luong-exp__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.luong-exp__price { font-size: 20px; font-weight: 800; color: var(--luong-gold-vip); }
.luong-exp__book {
	border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px; font-weight: 700; color: var(--luong-ink-inverse);
	background: linear-gradient(120deg, var(--luong-gold), var(--luong-maroon));
}

/* ---- Contact ---- */
.luong-contact { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.luong-contact__loc { color: var(--luong-mute); margin: 0; }
.luong-contact__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Floating book button ---- */
.luong-book-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 9998;
	border: 0; cursor: pointer; padding: 14px 22px; border-radius: 999px; font-weight: 800; color: var(--luong-ink-inverse);
	background: linear-gradient(120deg, var(--luong-gold), var(--luong-maroon));
	box-shadow: 0 10px 30px rgba(107,29,29,.4);
}

/* ---- Status pills (admin-ish, reused front) ---- */
.luong-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.luong-status--confirmed, .luong-status--seated { background: rgba(107,29,29,.1); color: var(--luong-maroon); }
.luong-status--pending { background: rgba(162,116,14,.14); color: var(--luong-gold-vip); }
.luong-status--cancelled, .luong-status--no-show { background: rgba(36,24,4,.08); color: var(--luong-mute); }

.luong-empty { color: var(--luong-dim); font-style: italic; }