/* ============================================================================
   Orilogy Coupons - "Available Coupons" in My Account and at Checkout

   Shares the same brand tokens as the rest of the account/auth work
   (orilogy-account.css, orilogy-auth.css): ink/cream/forest, a mono label
   for anything code-like (the coupon code itself, tags, the "almost there"
   nudge), hairline-bordered cards, pill buttons. The goal is that a coupon
   card reads as part of the same system as an order card, not a bolted-on
   widget.
   ========================================================================= */

.ocp-list,
.ocp-checkout {
	--ocp-ink: var(--e-global-color-primary, #241f20);
	--ocp-cream: var(--e-global-color-secondary, #f2ebde);
	--ocp-forest: #183b19;
	--ocp-sans: var(--e-global-typography-text-font-family, inherit);
	--ocp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	--ocp-paper: #fffefb;
	--ocp-line: color-mix(in srgb, var(--ocp-ink) 16%, transparent);
	--ocp-hair: color-mix(in srgb, var(--ocp-ink) 8%, transparent);
	--ocp-muted: color-mix(in srgb, var(--ocp-ink) 52%, transparent);

	font-family: var(--ocp-sans);
	color: var(--ocp-ink);
}

.ocp-list * {
	box-sizing: border-box;
}

.ocp-empty {
	margin: 0;
	padding: 18px 0;
	color: var(--ocp-muted);
	font-size: 14px;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------ */

.ocp-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ocp-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 18px;
	background: var(--ocp-paper);
	border: 1px solid var(--ocp-hair);
	border-radius: 12px;
	transition: border-color .18s ease;
}

.ocp-card:hover {
	border-color: var(--ocp-line);
}

.ocp-card-main {
	min-width: 0;
}

.ocp-code {
	margin: 0 0 2px;
	font-family: var(--ocp-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ocp-ink);
}

.ocp-headline {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ocp-ink);
}

.ocp-desc {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--ocp-muted);
	max-width: 46ch;
}

.ocp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.ocp-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border: 1px solid var(--ocp-line);
	border-radius: 999px;
	font-family: var(--ocp-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ocp-ink);
}

.ocp-tag--muted {
	color: var(--ocp-muted);
	border-color: var(--ocp-hair);
}

.ocp-card-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.ocp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font-family: var(--ocp-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
}

.ocp-btn--solid {
	background: var(--ocp-ink);
	color: #fff;
}

.ocp-btn--solid:hover {
	background: var(--ocp-forest);
}

.ocp-btn--solid[disabled] {
	opacity: .6;
	cursor: default;
}

.ocp-btn--ghost {
	border-color: var(--ocp-line);
	color: var(--ocp-ink);
}

.ocp-btn--ghost:hover {
	border-color: var(--ocp-ink);
	background: color-mix(in srgb, var(--ocp-ink) 5%, transparent);
}

.ocp-btn.is-done {
	background: var(--ocp-forest) !important;
	color: #fff !important;
	border-color: var(--ocp-forest) !important;
}

/* ---------------------------------------------------------------------------
   "Almost there" nudges
   ------------------------------------------------------------------------ */

.ocp-almost {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px dashed var(--ocp-line);
}

.ocp-almost-label {
	margin: 0 0 8px;
	font-family: var(--ocp-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ocp-muted);
}

.ocp-nudge {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
	color: var(--ocp-muted);
}

.ocp-nudge-code {
	flex: 0 0 auto;
	font-family: var(--ocp-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--ocp-ink);
}

/* ---------------------------------------------------------------------------
   Checkout panel - collapsible, sits above the two-column checkout layout
   ------------------------------------------------------------------------ */

.ocp-checkout {
	max-width: var(--orilogy-checkout-width, 100%);
	margin: 0 0 28px;
	background: var(--ocp-paper);
	border: 1px solid var(--ocp-hair);
	border-radius: 14px;
	overflow: hidden;
}

.ocp-checkout-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 18px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.ocp-checkout-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ocp-ink);
}

.ocp-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ocp-ink);
	color: #fff;
	font-family: var(--ocp-mono);
	font-size: 11px;
	font-weight: 600;
}

.ocp-chevron {
	flex: 0 0 auto;
	color: var(--ocp-muted);
	transition: transform .22s ease;
}

.ocp-checkout-toggle[aria-expanded="false"] .ocp-chevron {
	transform: rotate(-90deg);
}

.ocp-checkout-body {
	padding: 0 18px 18px;
}

.ocp-checkout-body[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.ocp-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.ocp-card-actions {
		width: 100%;
	}

	.ocp-card-actions .ocp-btn {
		flex: 1;
	}
}

/* ---------------------------------------------------------------------------
   Checkout panel, COMPACT - a disclosure inside the discount field's block

   Since 5.22 this is the normal shape at checkout. The panel used to be a
   bordered card at the very top of the page, immediately above WooCommerce's
   own "Have a coupon?" link, which meant a customer hunting for somewhere to
   type a code found two panels about coupons and no field. Now the field owns
   that spot and this sits under it, so it has to read as part of that block
   rather than as a second card competing with it: no border, no ground of its
   own, and a mono label at the scale of the field's own label.
   ------------------------------------------------------------------------ */

.ocp-checkout--inline {
	max-width: none;
	margin: 11px 0 0;
	padding-top: 10px;
	background: none;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--ocp-ink) 12%, transparent);
	border-radius: 0;
	overflow: visible;
}

.ocp-checkout--inline .ocp-checkout-toggle {
	padding: 2px 0;
	gap: 10px;
}

.ocp-checkout--inline .ocp-checkout-title {
	font-family: var(--ocp-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ocp-checkout--inline .ocp-checkout-body {
	padding: 0;
}

/* The cards themselves tighten up: inside a 400px-ish summary column they
   have roughly half the width they get in the My Account tab, so the two
   buttons stack instead of sitting beside a headline. */
.ocp-checkout--inline .ocp-card {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--ocp-hair);
	border-radius: 0;
}

.ocp-checkout--inline .ocp-card:first-child {
	border-top: 0;
}

.ocp-checkout--inline .ocp-card-actions {
	width: 100%;
}

.ocp-checkout--inline .ocp-card-actions .ocp-btn {
	flex: 1;
}

.ocp-checkout--inline .ocp-desc {
	display: none;              /* the headline and the tags carry it here */
}

.ocp-checkout--inline .ocp-almost {
	margin-top: 10px;
	padding-top: 10px;
}