/* ===========================================================
   Bloom Flower — shared components (nav, mobile menu, tab bar, footer,
   WooCommerce global elements, badges, shadows)
   =========================================================== */

/* ---------- Header / Nav ---------- */
.bloom-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 249, 248, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(223, 190, 200, 0.3);
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
	transition: box-shadow .3s ease;
}
.bloom-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1rem;
	transition: padding-block .3s ease;
}
.bloom-header--scrolled .bloom-nav { padding-block: 0.5rem; }
.bloom-header--scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.bloom-nav__brand {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-headline-sm-size);
	color: var(--color-primary);
	letter-spacing: -0.01em;
	flex-shrink: 0;
}

.bloom-nav__links { display: none; }
.bloom-nav__list { display: flex; align-items: center; gap: 1.75rem; }
.bloom-nav__list a {
	font-family: var(--font-body);
	font-size: var(--text-label-lg-size);
	font-weight: var(--text-label-lg-weight);
	letter-spacing: var(--text-label-lg-ls);
	color: var(--color-on-surface-variant);
	transition: color .3s ease;
	padding-bottom: 4px;
}
.bloom-nav__list a:hover { color: var(--color-primary); }
.bloom-nav__list .current-menu-item a {
	color: var(--color-primary);
	font-weight: 700;
	border-bottom: 2px solid var(--color-primary);
}

/* Desktop dropdown submenus (Magazin / Evenimente) — hover or keyboard focus reveals. */
.bloom-nav__list li.menu-item-has-children { position: relative; }
.bloom-nav__list li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}
.bloom-nav__list li.menu-item-has-children > a::after {
	font-family: 'Material Symbols Outlined';
	content: 'keyboard_arrow_down';
	font-size: 18px;
	transition: transform .2s ease;
}
.bloom-nav__list li.menu-item-has-children:hover > a::after,
.bloom-nav__list li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

.bloom-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin-top: 0.75rem;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-ambient-l1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 60;
}
.bloom-nav__list li.menu-item-has-children:hover > .sub-menu,
.bloom-nav__list li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.bloom-nav__list .sub-menu li a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius-default);
	white-space: nowrap;
	color: var(--color-on-surface-variant);
}
.bloom-nav__list .sub-menu li a:hover { background: var(--color-surface-container-low); color: var(--color-primary); }
.bloom-nav__list .sub-menu li.bloom-submenu-view-all {
	margin-bottom: 0.35rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--color-outline-variant);
}
.bloom-nav__list .sub-menu li.bloom-submenu-view-all a { font-weight: 700; color: var(--color-primary); }
.bloom-nav__list .sub-menu .current-menu-item a {
	border-bottom: none;
	background: var(--color-surface-container-low);
	font-weight: 700;
}

.bloom-nav__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.bloom-nav__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	border: none;
	background: transparent;
	border-radius: var(--radius-full);
	color: var(--color-on-surface-variant);
	transition: background-color .2s ease, color .2s ease;
}

/* Keep the brand + 3 icon buttons from overflowing on narrow phones —
   flexbox `gap` is a hard minimum even under justify-content:space-between. */
@media (max-width: 400px) {
	.bloom-nav { gap: 0.5rem; }
	.bloom-nav__brand { font-size: 20px; }
	.bloom-nav__actions { gap: 0; }
}
.bloom-nav__icon-btn:hover { background: var(--color-surface-container); color: var(--color-primary); }
.bloom-nav__menu-toggle { display: inline-flex; }

.bloom-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-radius: var(--radius-full);
}
.bloom-cart-count--visible { display: flex; }

/* Mobile slide-down menu */
.bloom-mobile-menu {
	border-top: 1px solid rgba(223, 190, 200, 0.3);
	background: var(--color-surface);
	padding: 0.5rem var(--space-margin-mobile) 1rem;
}
.bloom-mobile-menu__list { display: flex; flex-direction: column; }
.bloom-mobile-menu__list a {
	display: block;
	padding: 0.85rem 0;
	font-size: var(--text-label-lg-size);
	font-weight: var(--text-label-lg-weight);
	color: var(--color-on-surface-variant);
	border-bottom: 1px solid var(--color-surface-container-high);
}
.bloom-mobile-menu__list .current-menu-item a { color: var(--color-primary); font-weight: 700; }

/* Mobile accordion submenus (Magazin / Evenimente) — assets/js/nav.js binds
   the toggle to the parent link itself (tapping "Magazin"/"Evenimente"
   opens the list instead of navigating) and drives state via
   bloom-mobile-menu__item--open. */
.bloom-mobile-menu__list li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.bloom-mobile-menu__submenu-chevron { transition: transform .25s ease; flex-shrink: 0; }
.bloom-mobile-menu__item--open > a .bloom-mobile-menu__submenu-chevron { transform: rotate(180deg); }

.bloom-mobile-menu__list .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
.bloom-mobile-menu__list .sub-menu a {
	padding: 0.7rem 0 0.7rem 1rem;
	font-size: var(--text-label-md-size);
	font-weight: 400;
	color: var(--color-on-surface-variant);
	border-bottom: none;
}
.bloom-mobile-menu__list .sub-menu li.bloom-submenu-view-all a { font-weight: 700; color: var(--color-primary); }
.bloom-mobile-menu__list .sub-menu .current-menu-item a { color: var(--color-primary); font-weight: 700; }

@media (min-width: 768px) {
	.bloom-nav__links { display: block; }
	.bloom-nav__menu-toggle { display: none; }
	.bloom-mobile-menu { display: none !important; }
}

/* ---------- Mobile bottom tab bar ---------- */
.bloom-tab-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	padding: 1rem 1.5rem;
	background: rgba(252, 249, 248, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(223, 190, 200, 0.3);
}
.bloom-tab-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--color-on-surface-variant);
}
.bloom-tab-bar__item--active { color: var(--color-primary); }
.bloom-tab-bar__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
body.bloom-has-tab-bar { padding-bottom: 90px; }

@media (min-width: 768px) {
	.bloom-tab-bar { display: none; }
	body.bloom-has-tab-bar { padding-bottom: 0; }
}

/* ---------- Footer ---------- */
.bloom-footer {
	margin-top: var(--space-section-gap);
	background: var(--color-surface-container);
}
.bloom-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
	padding-block: 4rem;
}
@media (min-width: 768px) {
	.bloom-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
}
.bloom-footer__brand {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-headline-sm-size);
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}
.bloom-footer__tagline { color: var(--color-secondary); max-width: 22rem; margin-bottom: 1.5rem; }
.bloom-footer__social { display: flex; gap: 1rem; }
.bloom-footer__social-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-primary);
	transition: background-color .2s ease, color .2s ease;
}
.bloom-footer__social-btn:hover { background: var(--color-primary); color: #fff; }
.bloom-footer__social-btn svg { width: 18px; height: 18px; }

.bloom-footer__heading {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-label-lg-size);
	color: var(--color-on-background);
	margin-bottom: 1.25rem;
}
.bloom-footer__list li + li { margin-top: 0.85rem; }
.bloom-footer__list a { color: var(--color-secondary); transition: color .2s ease; }
.bloom-footer__list a:hover { color: var(--color-primary); }

.bloom-footer__text { color: var(--color-secondary); margin-bottom: 1rem; line-height: 1.6; }
.bloom-footer__phone { color: var(--color-primary); font-family: var(--font-display); font-weight: 600; font-size: var(--text-headline-sm-size); }

.bloom-footer__col--badges { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.bloom-footer__badge { height: auto; display: block; max-width: 100%; }

.bloom-footer__bottom { border-top: 1px solid rgba(223, 190, 200, 0.2); }
.bloom-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	text-align: center;
	padding-block: 2rem;
	color: var(--color-secondary);
}
.bloom-footer__bottom-links { display: flex; gap: 1.5rem; }
.bloom-footer__bottom-links a:hover { color: var(--color-primary); }
@media (min-width: 768px) {
	.bloom-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Badges / pills ---------- */
.bloom-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 1rem;
	border-radius: var(--radius-full);
	font-size: var(--text-label-md-size);
	font-weight: var(--text-label-md-weight);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
.bloom-badge--primary-soft { background: rgba(181,16,106,0.1); color: var(--color-primary); }
.bloom-badge--primary-fixed { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed-variant); }
.bloom-badge--tertiary-fixed { background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed-variant); }
.bloom-badge--solid { background: var(--color-primary); color: #fff; font-size: 10px; padding: 4px 8px; letter-spacing: 0.1em; }

/* ---------- Shadows ---------- */
.bloom-shadow-l1 { box-shadow: var(--shadow-ambient-l1); }
.bloom-shadow-l2 { box-shadow: var(--shadow-ambient-l2); }
.bloom-shadow-petal { box-shadow: var(--shadow-petal); }

/* ---------- Newsletter form status ---------- */
.bloom-newsletter-status { display: block; margin-top: 0.75rem; font-size: var(--text-label-md-size); }
.bloom-newsletter-status--success { color: var(--color-tertiary); }
.bloom-newsletter-status--error { color: var(--color-error); }

/* ---------- Star ratings ---------- */
.bloom-stars { display: inline-flex; color: var(--color-star); gap: 1px; }
.bloom-stars .material-symbols-outlined { font-size: 18px; }

/* ---------- WooCommerce: global form/table styling (cart, checkout, my-account —
   pages with no bespoke mockup, styled through the shared design system) ---------- */
.bloom-woocommerce { padding-block: var(--space-section-gap); min-height: 40vh; }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: var(--text-body-md-size);
}
.woocommerce table.shop_table th {
	text-align: left;
	padding: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--text-label-md-size);
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--color-outline-variant);
}
.woocommerce table.shop_table td {
	padding: 1rem;
	border-bottom: 1px solid var(--color-surface-container-high);
}
.woocommerce-cart-form .product-thumbnail img,
.woocommerce table.shop_table img { border-radius: var(--radius-lg); width: 72px; height: auto; }

.woocommerce .quantity .qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea {
	font-family: var(--font-body);
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	background: #fff;
}
.woocommerce .quantity .qty { width: 4.5rem; padding: 0.75rem 0.5rem; text-align: center; }
.woocommerce form .form-row label { font-size: var(--text-label-md-size); font-weight: 600; color: var(--color-on-surface-variant); }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .cart-collaterals .checkout-button,
.woocommerce-page a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-weight: var(--text-label-lg-weight);
	font-size: var(--text-label-lg-size);
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	border: none;
	transition: filter .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { filter: brightness(1.08); }
.woocommerce a.button.alt { background: var(--color-on-background); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--color-surface-container-low);
	border-left: 4px solid var(--color-primary);
	padding: 1rem 1.5rem;
	border-radius: var(--radius-lg);
	list-style: none;
	font-family: var(--font-body);
}
.woocommerce-error { border-left-color: var(--color-error); }

.woocommerce nav.woocommerce-breadcrumb {
	font-family: var(--font-body);
	font-size: var(--text-label-md-size);
	color: var(--color-secondary);
	margin-bottom: 2rem;
}
.woocommerce nav.woocommerce-breadcrumb a { color: var(--color-secondary); }
.woocommerce nav.woocommerce-breadcrumb a:hover { color: var(--color-primary); }

.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-container-low);
	font-size: var(--text-label-md-size);
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--color-primary); color: #fff; }

/* Accordion (used on single Product / mobile) */
.bloom-accordion-item { border-top: 1px solid var(--color-outline-variant); }
.bloom-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 0;
	background: none;
	border: none;
	text-align: left;
	color: var(--color-on-surface);
}
.bloom-accordion-trigger:hover { color: var(--color-primary); }
.bloom-accordion-trigger .material-symbols-outlined { color: var(--color-secondary); transition: transform .25s ease; }
.bloom-accordion-item--open .bloom-accordion-trigger .material-symbols-outlined { transform: rotate(180deg); }
.bloom-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
	color: var(--color-on-surface-variant);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
}
.bloom-accordion-panel__inner { padding-bottom: 1.25rem; }