/* Alternate "deck" layout for the Quotation Results page - plans as
   compact vertical cards in a responsive grid, instead of full-width rows.
   Reuses quotation-results.css for shared pieces (summary bar, modal,
   compare tray, price-box text styles) - this file only covers what's
   different: the grid itself and the card face. */

#quotation-results-decks-content {
	background: #fff;
}

.tis-results-decks-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 40px 80px;
	box-sizing: border-box;
}

.tis-plan-decks-wrap {
	margin-top: 24px;
}

.tis-plan-decks-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

.tis-plan-deck-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E3E7EE;
	border-radius: 4px;
	padding: 20px;
	box-sizing: border-box;
	/* Raised card effect - a hard-edged (no blur) offset shadow behind the
	   rectangle itself, not the text, which is what makes it read as
	   "angular" rather than a soft drop shadow. */
	box-shadow: 6px 6px 0 rgba( 20, 37, 83, 0.15 );
}

.tis-plan-deck-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.tis-plan-deck-top .tis-plan-logo {
	width: 60px;
	height: 40px;
}

.tis-plan-deck-top .tis-plan-result-name {
	font-size: 20px;
}

.tis-plan-deck-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #E3E7EE;
}

.tis-plan-deck-actions .tis-plan-details-link {
	font-size: 15px;
}

.tis-plan-deck-actions .tis-plan-compare-select {
	margin: 0;
	font-size: 15px;
	color: #142553;
}

.tis-plan-deck-price-box {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.tis-plan-deck-price-box .tis-plan-result-meta,
.tis-plan-deck-price-box .tis-plan-result-cfar,
.tis-plan-deck-price-box .tis-plan-result-preex {
	font-size: 15px;
}

.tis-plan-deck-price-box .tis-plan-buy-now-btn {
	margin-top: auto;
	padding-top: 12px;
}

@media ( max-width: 1200px ) {
	.tis-plan-decks-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 860px ) {
	.tis-plan-decks-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	.tis-results-decks-inner {
		padding: 20px 16px 60px;
	}

	.tis-plan-decks-grid {
		grid-template-columns: 1fr;
	}

	.tis-plan-deck-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}