/* ---------------------------------------------------
 * Levels page
 * --------------------------------------------------- */
/* For the default [pmpro_levels] shortcode */
#pmpro_levels_table { max-width: 800px; margin-left: auto; margin-right: auto; }
#pmpro_levels_table thead {}
#pmpro_levels_table tbody {}

/* When using layout=3col in the [pmpro_advanced_levels] shortcode */
body #pmpro_levels.pmpro_levels-3col { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level { width:100%; min-width:300px; max-width: 350px; border-radius: 5px; box-shadow: var(--box-shadow-1); background-color:#ffffff; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div {}
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-header { text-align: center; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-content { text-align: center; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-content .pmpro_level-price {}
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-content .pmpro_level-select {}
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-content .pmpro_level-select .pmpro_btn {}
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-content .pmpro_level-select + p { margin-bottom: 0; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-footer {}
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-footer.pmpro_level-expiration { padding-top: 0; }
body #pmpro_levels.pmpro_levels-3col > .pmpro_level > div .entry-footer.pmpro_level-expiration .entry-meta { display: flex; flex-direction: column; }

/* When using layout=div in the [pmpro_advanced_levels] shortcode */
body #pmpro_levels.pmpro_levels-div { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
body #pmpro_levels.pmpro_levels-div > .pmpro_level { width:100%; min-width:300px; max-width: 350px; border-radius: 5px; box-shadow: var(--box-shadow-1); background-color:#ffffff; }
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div {}
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-header { text-align: center; }
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-content { text-align: center; }
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-content p:last-child {}
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-footer {}
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-footer {}
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-footer .entry-meta { display: flex; flex-direction: column; }
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-footer .entry-meta .pmpro_btn {}
body #pmpro_levels.pmpro_levels-div > .pmpro_level > div .entry-footer .entry-meta .pmpro_level-price { margin-top: 30px; margin-bottom: 0; }

/* When using either layout in [pmpro_advanced_levels] shortcode */
body #pmpro_levels .pmpro_level ul { text-align: left; }

/*	2024-09-16:
	pmpro v 3.1.3 (or thereabouts) changed the structure of the [pmpro_advanced_levels] shortcode html output.
	Now there is a div.pmpro_card under div.pmpro_level
	Also, insidediv.pmpro_card, there is a title and the rest of the content is inside another div.pmpro_card_content
*/
body #pmpro_levels.pmpro_levels-3col > .pmpro_level .pmpro_card {
	background-color: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	margin: 0;

	.pmpro_card_title {
		/* padding: 0; */
	}
	.pmpro_card_content {
		/* padding: 0; */

		.pmpro_level-description {
			margin-top: 30px;
		}
	}
}

/* ---------------------------------------------------
 * Checkout
 * --------------------------------------------------- */

.pmpro-checkout .site-content { background-color:var(--color-light-grey); }
.pmpro-checkout .site-main {}
.pmpro-checkout .site-main article { max-width: 800px; margin-left:auto; margin-right:auto; }
.pmpro-checkout .site-main .entry-header {}
.pmpro-checkout .site-main .entry-content {}

.pmpro-checkout .site-main .entry-content .pmpro_form {}
.pmpro-checkout .site-main .entry-content .pmpro_form .pmpro_checkout { background: white; padding: 12px 30px 23px; border-radius: 5px; margin:30px auto; box-shadow: var(--box-shadow-1); }
.pmpro-checkout .site-main .entry-content .pmpro_form .pmpro_checkout hr { display: none; }

.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields {}
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields p { margin-bottom:0; }
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields div { margin-bottom:0; }
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields {}
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields .pmpro_level_name_text {}
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields .pmpro_level_description_text {}
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields #pmpro_level_cost { margin-top: 20px; }
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields #pmpro_level_cost .pmpro_level_cost_text {}
.pmpro-checkout .site-main .entry-content .pmpro_form #pmpro_pricing_fields .pmpro_checkout-fields #pmpro_level_cost .pmpro_level_expiration_text {}

.pmpro-checkout .site-main .entry-content .pmpro_form .pmpro_checkout-fields .pmpro_payment-expiration select,
.pmpro-checkout .site-main .entry-content .pmpro_form .pmpro_checkout-fields .pmpro_payment-cvv .input { max-width: 115px; }

/* ---------------------------------------------------
 * Confirmation
 * --------------------------------------------------- */

.pmpro-confirmation .site-content { background-color:var(--color-light-grey); }
.pmpro-confirmation .site-main article { max-width: 800px; margin-left:auto; margin-right:auto; }
.pmpro-confirmation .site-main article hr { display: none; }
.pmpro-confirmation .pmpro_invoice_details { background: white; padding: 20px 30px; border-radius: 5px; margin:30px auto; box-shadow: var(--box-shadow-1); }
.pmpro-confirmation .pmpro_invoice_details p:last-child { margin-bottom: 0; }