/* "Your Subscription" tile on the My Account dashboard.
   Shares the --hpc-acct-* variables and .hpc-acct-btn button styles
   defined in hpc-my-account-conferences.css (loaded on the same page),
   so colors/buttons match the Conferences and Newsletters tiles exactly.
   Values below are matched directly against the my-account-COLUMNS
   mockups (both the "new user" plan-picker and "engaged user" active
   states), not just approximated. */

.hpc-acct-sub-active,
.hpc-acct-sub-not-active {
	font-size: 13px;
	padding: 11px 14px;
	border-radius: 7px;
	margin-bottom: 18px;
	font-weight: 600;
	line-height: 1.25em;
}

.hpc-acct-sub-active {
	background: #eef5ef;
	border: 1px solid #c6ddca;
	color: #1f5133;
}

.hpc-acct-sub-active.hpc-acct-sub-cancelled,
.hpc-acct-sub-active.hpc-acct-sub-on-hold {
	background: #fbf3ea;
	border-color: #e8d3b5;
	color: #8a5a1f;
}

.hpc-acct-sub-not-active {
	background: #fbf3f0;
	border: 1px solid #efd8d0;
	color: #8a3b2a;
}

.hpc-acct-sub-card {
	border: 1.5px solid var(--hpc-acct-line, #e3e0d9);
	border-radius: 9px;
	padding: 15px 16px;
	margin-bottom: 14px;
}

.hpc-acct-sub-card .k {
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--hpc-acct-muted, #6b7280);
	margin-bottom: 5px;
}

.hpc-acct-sub-card .v {
	font-family: Georgia, serif;
	font-size: 20px;
	font-weight: 700;
}

.hpc-acct-sub-card .sub {
	color: var(--hpc-acct-muted, #6b7280);
	font-size: 12px;
	margin-top: 4px;
}

.hpc-acct-sub-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.hpc-acct-sub-plan {
	border: 1.5px solid var(--hpc-acct-line, #e3e0d9);
	border-radius: 9px;
	padding: 16px;
	margin-bottom: 14px;
	position: relative;
}

/* Mockup marks the best-value plan with the brand green, not navy. */
.hpc-acct-sub-plan--best {
	border-color: var(--hpc-acct-green, #274536);
}

/* Small pill in the top-right corner, poking above the card border -
   matches the mockup's ".plan .tag" exactly (absolute, not inline). */
.hpc-acct-sub-plan-tag {
	position: absolute;
	top: -10px;
	right: 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
	background: var(--hpc-acct-green, #274536);
	padding: 4px 9px;
	border-radius: 20px;
	line-height: 1em;
}

.hpc-acct-sub-plan-name {
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 17px;
}

/* Big serif price (the headline of the card), with a small muted unit
   suffix - "$12" + "/mo" - not small muted text throughout. */
.hpc-acct-sub-plan-price {
	font-family: Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--hpc-acct-ink, #1c1c1c);
	margin: 4px 0 2px;
}

.hpc-acct-sub-plan-price .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.hpc-acct-sub-plan-unit {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--hpc-acct-muted, #6b7280);
}

.hpc-acct-sub-plan-note {
	color: var(--hpc-acct-muted, #6b7280);
	font-size: 12px;
	margin-bottom: 12px;
	min-height: 16px;
}

.hpc-acct-sub-plan form {
	margin: 0;
}

/* ------------------------------------------------------------------
   Button color variants.
   Scoped under #hpc-membership-status - the shortcode's own wrapper ID
   (this shortcode only ever renders once per page, so an ID here is
   safe). Elementor's global Kit CSS ships a rule like
   ".elementor-kit-7 button { background: ... }", which ties a
   class-scoped selector like ".hpc-acct-tile-body button.hpc-acct-btn"
   on specificity - meaning whichever stylesheet happens to print later
   wins, which was overriding these buttons with Elementor's default
   color regardless of what we set here. An ID selector outranks any
   number of classes, so scoping under #hpc-membership-status wins
   outright, independent of stylesheet load order.
   ------------------------------------------------------------------ */
/* The base .hpc-acct-btn class (font, padding, border-radius, etc. -
   defined in hpc-my-account-conferences.css) is only a single class
   selector, which Elementor's ".elementor-kit-7 button" rule (class +
   element type) outranks outright, not just ties. That let Elementor's
   Kit font-size/weight/padding/border-radius leak through even after the
   color variants above were fixed. Re-declare the full base look here,
   scoped to the same #hpc-membership-status ID, for every real <button>
   in this tile so nothing is left for Elementor's rule to win. */
#hpc-membership-status button.hpc-acct-btn {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
}

#hpc-membership-status a.hpc-acct-btn--outline,
#hpc-membership-status button.hpc-acct-btn--outline {
	background: #fff;
	color: var(--hpc-acct-navy, #124a73);
	border: 1.5px solid var(--hpc-acct-navy, #124a73);
	font-size: 14px;
}

#hpc-membership-status a.hpc-acct-btn--outline:hover,
#hpc-membership-status button.hpc-acct-btn--outline:hover {
	background:var(--hpc-acct-maroon);
	color:#ffffff;
	border: 1.5px solid var(--hpc-acct-maroon);
}

#hpc-membership-status button.hpc-acct-btn--navy {
	background: var(--hpc-acct-navy, #124a73);
	color: #fff;
}

#hpc-membership-status button.hpc-acct-btn--ghost {
	background: transparent;
	color: var(--hpc-acct-muted, #6b7280);
	border: 1px solid var(--hpc-acct-line, #e3e0d9);
}

/* "Choose Annual" - filled maroon, matching the mockup's .btn-maroon
   (the best-value plan button is NOT navy in the mockup). */
#hpc-membership-status button.hpc-acct-btn--maroon {
	background: var(--hpc-acct-maroon, #7d1f1f);
	color: #fff;
	border: none;
}

#hpc-membership-status button.hpc-acct-btn--maroon:hover {
	background-color:#5C140C;
}

/* While a plan button's add-to-cart/coupon request is in flight - JS-set,
   see js/hpc-my-account-plan-picker.js. Real <button> elements, so this
   also works purely as a safeguard even without the class (disabled attr
   isn't set, only the class, since the click needs to still register on
   older browsers that fall through to the no-JS form submit). */
#hpc-membership-status .hpc-acct-btn.is-disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Shared discount-code field for the plan picker. One field for both
   plans, not a separate "Apply" action - see
   js/hpc-my-account-plan-picker.js for why (a code alone doesn't say
   which plan it's for; it only does something combined with whichever
   Choose button gets clicked).
   ------------------------------------------------------------------ */
.hpc-acct-plan-coupon {
	margin-top: 4px;
}

.hpc-acct-plan-coupon-label {
	display: block;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--hpc-acct-muted, #6b7280);
	margin: 0 0 8px;
}

.hpc-acct-plan-coupon-input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--hpc-acct-line, #e3e0d9);
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	color: var(--hpc-acct-ink, #1c1c1c);
}

.hpc-acct-plan-coupon-input:focus {
	outline: none;
	border-color: var(--hpc-acct-navy, #124a73);
}

.hpc-acct-plan-coupon-apply {
	margin-top: 8px;
}

.hpc-acct-plan-coupon-message {
	font-size: 12px;
	margin-top: 6px;
	min-height: 15px;
}