/* Book Now button (used inside existing dumpster cards, or the fallback grid) */
.nola-db-book-btn {
	display: inline-block;
	background: #b0754a;
	color: #fff !important;
	border: none;
	padding: 12px 28px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nola-db-book-btn:hover {
	background: #9a6440;
	color: #fff !important;
}

/*
 * Fallback [nola_dumpster_booking] grid / Elementor "Dumpster Size Grid"
 * widget. Uses flexbox + justify-content:center instead of CSS Grid on
 * purpose: when the last row doesn't fill completely (e.g. 5 sizes at 4
 * per row), flexbox centers that row's items as a group automatically --
 * no JS or extra markup needed to avoid a single card stranded alone on
 * the left.
 *
 * --nola-db-cols and --nola-db-gap are set inline per-instance (by the
 * shortcode, or by Elementor's responsive controls), so columns and
 * spacing can differ per breakpoint without editing this file.
 */
.nola-db-size-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nola-db-gap, 24px);
	margin: 24px 0;
}

.nola-db-size-card {
	flex: 1 1 calc((100% / var(--nola-db-cols, 4)) - var(--nola-db-gap, 24px));
	max-width: calc((100% / var(--nola-db-cols, 4)) - var(--nola-db-gap, 24px));
	min-width: 220px;
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Only the shortcode-rendered grid falls back to this simple mobile
   behavior; the Elementor widget lets the client set columns per
   breakpoint directly in the editor instead. */
@media (max-width: 768px) {
	.nola-db-grid-shortcode {
		--nola-db-cols: 2;
	}
}

@media (max-width: 480px) {
	.nola-db-grid-shortcode {
		--nola-db-cols: 1;
	}

	.nola-db-size-desc {
		font-size: 12.5px;
	}
}

.nola-db-size-image {
	margin: -24px -24px 16px;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.nola-db-size-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.nola-db-size-card h3 {
	margin: 0 0 8px;
}

.nola-db-size-desc {
	font-size: 13px;
	line-height: 1.5;
	color: #6b6b6b;
	margin: -4px 0 12px;
}

.nola-db-size-price {
	font-size: 20px;
	font-weight: 700;
	color: #b0754a;
	margin: 0 0 16px;
}

/*
 * Price block: an optional small price label ("Starting From", "Flat
 * Rate", etc.) sitting above the bold price amount. Rendered by
 * [nola_dumpster_price], and automatically inside the fallback grid /
 * Elementor widget cards.
 */
.nola-db-price-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 4px 0 16px;
}

.nola-db-price-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8477;
	background: #f3efe8;
	border: 1px solid #e5ded2;
	border-radius: 999px;
	padding: 3px 12px;
	line-height: 1.5;
}

.nola-db-price-amount {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: #b0754a;
}

.nola-db-price-amount .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Cards inside a hand-built layout (not the fallback grid/widget) are
   often narrower, so scale the price down slightly on small screens. */
@media (max-width: 480px) {
	.nola-db-price-label {
		font-size: 10px;
		padding: 3px 10px;
	}

	.nola-db-price-amount {
		font-size: 22px;
	}
}

/* Custom fields injected into the WooCommerce checkout page */
.nola-db-checkout-fields {
	margin: 24px 0;
	padding: 20px;
	background: #faf9f7;
	border: 1px solid #e5e0da;
	border-radius: 10px;
}

.nola-db-checkout-fields h3 {
	margin-top: 0;
}

.nola-db-service-note {
	font-size: 13px;
	color: #6b6b6b;
	margin-bottom: 16px;
}

.nola-db-checkout-fields .form-row {
	margin-bottom: 16px;
}

.nola-db-checkout-fields label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.nola-db-checkout-fields .required {
	color: #b3261e;
}

.nola-db-checkout-fields input,
.nola-db-checkout-fields select,
.nola-db-checkout-fields textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	box-sizing: border-box;
	background: #fff;
}