/**
 * Preloved Bazaar design system overrides.
 *
 * Loaded site-wide at high priority so it wins against Motta's
 * compiled CSS without needing per-selector !important except on
 * load-bearing properties Motta would otherwise stretch.
 *
 * Brand:
 *   - Primary teal #2095b8 — sampled from the canonical logo SVG
 *     (wp-content/uploads/2024/01/pglogo.svg).
 *   - Darker variants for hover + active states derived as a single
 *     hue scale.
 *
 * Rationale for !important on a handful of declarations:
 *   - Motta forces `min-width: 160px; padding: 0 28px` on every
 *     <button>. Without !important our radius + colour wins but the
 *     button stays pill-sized.
 *   - .motta-button--ghost is rendered with a >50% radius by Motta
 *     itself which produces the pill shape we're replacing.
 */

:root,
body,
.elementor-kit-7 {
	/* Brand colour token cascade. Motta exposes the var; we redefine
	   it at :root so every selector that reads var(--mt-color__primary)
	   gets teal. */
	--mt-color__primary: #2095b8;
	--mt-color__primary--dark: #1a7a98;
	--mt-color__primary--darker: #155e75;
	--mt-color__primary--light: #ffffff;
	--mt-color__primary--gray: #e6f4f9;
	--mt-color__primary--grayer: #c9e7f0;
	--mt-color__primary--grayest: #93cde0;
	--mt-color__primary--box-shadow: rgba(32, 149, 184, 0);

	/* Lift the global radius from 2px to 8px so default buttons +
	   inputs adopt the rounded-rect look from the design reference. */
	--mt-border__radius: 8px;

	/* Preloved Bazaar tokens. */
	--pb-primary: #2095b8;
	--pb-primary-dark: #1a7a98;
	--pb-primary-darker: #155e75;
	--pb-text-on-primary: #ffffff;
	--pb-radius: 8px;
	--pb-radius-lg: 12px;
}

/* ============================================================
   Buttons — design language: rounded-rect, outline for secondary,
   filled teal for primary. Matches screenshot reference (Vinted
   "Upload photos" style).
   ============================================================ */

/* Neutralise Motta's pill ghost — it sets a >50% radius which
   produced the oval-pill look. */
body .motta-button,
body .motta-button--ghost,
body .motta-button--primary,
body .motta-button--secondary,
body .motta-button--pill {
	border-radius: 8px !important;
	min-width: 0 !important;
	padding: 0 18px !important;
	height: 44px;
	line-height: 44px;
	font-weight: 600;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Default ghost = outline secondary. */
body .motta-button--ghost {
	background: transparent !important;
	color: var(--pb-primary-darker) !important;
	border: 1.5px solid var(--pb-primary-darker) !important;
}
body .motta-button--ghost:hover {
	background: var(--pb-primary) !important;
	color: #ffffff !important;
	border-color: var(--pb-primary) !important;
}

/* Filled primary variant we add ourselves. */
.pb-btn,
.pb-btn-primary,
body a.pb-btn,
body button.pb-btn,
body a.pb-btn-primary,
body button.pb-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--pb-primary);
	color: var(--pb-text-on-primary);
	border: 1.5px solid var(--pb-primary);
	border-radius: var(--pb-radius);
	padding: 10px 18px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.pb-btn:hover,
.pb-btn-primary:hover {
	background: var(--pb-primary-dark);
	border-color: var(--pb-primary-dark);
	color: #ffffff;
}
.pb-btn:active,
.pb-btn-primary:active {
	background: var(--pb-primary-darker);
	border-color: var(--pb-primary-darker);
	transform: translateY(1px);
}

/* Outline secondary variant. */
.pb-btn-secondary,
body a.pb-btn-secondary,
body button.pb-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #ffffff;
	color: var(--pb-primary-darker);
	border: 1.5px solid var(--pb-primary-darker);
	border-radius: var(--pb-radius);
	padding: 10px 18px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.pb-btn-secondary:hover {
	background: var(--pb-primary);
	color: #ffffff;
	border-color: var(--pb-primary);
}

/* ============================================================
   Header — Account icon button + List now CTA layout.
   Set here so the JS that injects them inherits the right rules.
   ============================================================ */

/* The Account button becomes a 44x44 outline-circle icon. We keep
   the .motta-button container but override its shape just here. */
.header-account .pb-account-icon-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: 1.5px solid #e5e7eb !important;
	color: #374151 !important;
	transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
	text-decoration: none;
	line-height: 1;
}
.header-account .pb-account-icon-btn:hover {
	border-color: var(--pb-primary) !important;
	color: var(--pb-primary) !important;
	background: rgba(32, 149, 184, 0.06) !important;
}
.header-account .pb-account-icon-btn svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

/* List now button beside Account in the header. */
.header-account .pb-list-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--pb-primary);
	color: #ffffff;
	border: 1.5px solid var(--pb-primary);
	border-radius: var(--pb-radius);
	padding: 0 18px;
	height: 44px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	margin-right: 10px;
	transition: background-color 120ms ease, border-color 120ms ease;
	white-space: nowrap;
}
.header-account .pb-list-now:hover {
	background: var(--pb-primary-dark);
	border-color: var(--pb-primary-dark);
	color: #ffffff;
}
.header-account .pb-list-now svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

/* Layout the header-account inline group with the list-now CTA. */
.header-account {
	display: inline-flex !important;
	align-items: center;
	gap: 0;
}