/**
 * Checkout Shipping Rules & Out-of-State Notice Styles
 * Matches Wood Cabinet Factory mockup media_1791990297923_9c46fb75.png
 *
 * @package Room_And_Hearth
 */

/* ==========================================================================
   1. Out-of-State Notice Wrapper & Callout Card
   ========================================================================== */
.rh-out-of-state-wrapper {
	margin: 20px 0 24px;
	animation: rhFadeIn 0.25s ease-out;
}

@keyframes rhFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.rh-out-of-state-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: #fff9f6;
	border: 1.5px solid #f29a76;
	border-radius: 12px;
	padding: 24px 26px;
	box-shadow: 0 2px 10px rgba(184, 83, 47, 0.06);
	margin-bottom: 14px;
}

.rh-out-of-state-card__icon {
	color: #b8532f;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
}

.rh-out-of-state-card__content {
	flex: 1;
	text-align: left;
}

.rh-out-of-state-card__title {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 21px;
	font-weight: 700;
	color: #b8532f;
	margin: 0 0 8px;
	line-height: 1.25;
}

.rh-out-of-state-card__text {
	font-size: 14px;
	line-height: 1.55;
	color: #454038;
	margin: 0 0 18px;
}

.rh-out-of-state-card__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.rh-oos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.3;
	transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.rh-oos-btn svg {
	flex-shrink: 0;
}

.rh-oos-btn--call {
	background-color: #1b332b;
	color: #ffffff !important;
	border: none;
}

.rh-oos-btn--call:hover,
.rh-oos-btn--call:focus {
	background-color: #12241f;
	color: #ffffff !important;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(27, 51, 43, 0.25);
}

.rh-oos-btn--callback {
	background-color: #b8532f;
	color: #ffffff !important;
	border: none;
}

.rh-oos-btn--callback:hover,
.rh-oos-btn--callback:focus {
	background-color: #9f4423;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(184, 83, 47, 0.28);
}

/* ==========================================================================
   2. Info Message Box
   ========================================================================== */
.rh-out-of-state-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background-color: #f0f4f8;
	border: 1px solid #d4e0eb;
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #384c5a;
	margin-bottom: 20px;
}

.rh-out-of-state-info svg {
	color: #3f6e8f;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ==========================================================================
   3. Checkout Button Disabled State for Out-of-State
   ========================================================================== */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button.rh-checkout-btn-disabled,
button#place_order.rh-checkout-btn-disabled {
	opacity: 0.55 !important;
	pointer-events: none !important;
	cursor: not-allowed !important;
	background-color: #bcb6ab !important;
	border-color: #bcb6ab !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

/* ==========================================================================
   4. Checkout Trust Badges (Right Column)
   ========================================================================== */
.rh-checkout-trust-badges {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #e7e2d9;
}

.rh-checkout-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.rh-checkout-trust-item__icon {
	color: #2b261f;
	flex-shrink: 0;
	padding-top: 2px;
}

.rh-checkout-trust-item__content {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.rh-checkout-trust-item__title {
	font-size: 14px;
	font-weight: 700;
	color: #1f1b16;
	margin: 0 0 2px;
}

.rh-checkout-trust-item__desc {
	font-size: 12.5px;
	color: #6f6a5e;
	margin: 0;
}

@media (max-width: 600px) {
	.rh-out-of-state-card {
		flex-direction: column;
		gap: 14px;
		padding: 18px 18px;
	}
	.rh-out-of-state-card__title {
		font-size: 19px;
	}
	.rh-out-of-state-card__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.rh-oos-btn {
		width: 100%;
	}
}