/* Brand styling for WooCommerce's native cart/checkout/my-account pages.
   Targets WooCommerce's own classic markup (form-row, input-text, .button,
   #place_order, shop_table, etc.) — no Divi dependency. Kept independent
   from app.css (Tailwind), which only targets the React SPA's markup. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root {
	--ica-navy: #0a1b3d;
	--ica-navy-700: #1c3a7e;
	--ica-teal: #1bbfa6;
	--ica-teal-dark: #148f7d;
}

body {
	font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
	color: var(--ica-navy);
	margin: 0;
}

/* Header */
.ica-native-header {
	border-bottom: 1px solid rgba(10, 27, 61, 0.1);
	background: #fff;
}
.ica-native-header__bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ica-native-header__logo img {
	height: 36px;
	width: auto;
	display: block;
}
.ica-native-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.ica-native-header__nav a {
	color: rgba(10, 27, 61, 0.8);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.ica-native-header__nav a:hover {
	color: var(--ica-navy);
}
.ica-native-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--ica-navy);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
.ica-native-header__cart span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ica-teal);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
@media (max-width: 720px) {
	.ica-native-header__bar {
		flex-wrap: wrap;
		height: auto;
		padding: 14px 20px;
	}
	.ica-native-header__nav {
		order: 3;
		width: 100%;
		gap: 16px;
		padding-top: 10px;
		border-top: 1px solid rgba(10, 27, 61, 0.08);
	}
}

/* Footer */
.ica-native-footer {
	background: var(--ica-navy);
	color: rgba(255, 255, 255, 0.75);
	margin-top: 60px;
}
.ica-native-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
}
.ica-native-footer__brand img {
	height: 32px;
	width: auto;
	filter: brightness(0) invert(1);
}
.ica-native-footer__brand p {
	max-width: 340px;
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}
.ica-native-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.ica-native-footer__contact a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}
.ica-native-footer__contact a:hover {
	color: #fff;
}
.ica-native-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 20px;
}
.ica-native-footer__legal p {
	max-width: 1280px;
	margin: 0 auto;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
}

.ica-native-page {
	padding: 40px 20px 80px;
}

.ica-native-page__container {
	max-width: 1000px;
	margin: 0 auto;
}
/* WooCommerce's classic checkout/cart markup floats its columns
   (form-row-first/last, the customer-details/order-review split). Without
   this the container's height collapses to 0 around the floated content and
   the footer rides up over it instead of appearing below. */
.ica-native-page__container::after {
	content: "";
	display: table;
	clear: both;
}

.ica-native-page h1,
.ica-native-page h2,
.ica-native-page h3 {
	color: var(--ica-navy);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ica-native-page a {
	color: var(--ica-teal-dark);
}

/* Buttons */
.ica-native-page .button,
.ica-native-page button.button,
.ica-native-page input.button,
.ica-native-page #place_order {
	background: var(--ica-navy) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0;
	text-transform: none !important;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.ica-native-page .button:hover,
.ica-native-page button.button:hover,
.ica-native-page input.button:hover,
.ica-native-page #place_order:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}
.ica-native-page .button.alt,
.ica-native-page #place_order {
	background: var(--ica-teal) !important;
}

/* Form fields */
.ica-native-page .input-text,
.ica-native-page select,
.ica-native-page textarea,
.ica-native-page .select2-selection {
	border: 1px solid rgba(10, 27, 61, 0.15) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	font-family: inherit;
	font-size: 14px;
}
.ica-native-page .input-text:focus,
.ica-native-page select:focus,
.ica-native-page textarea:focus {
	border-color: var(--ica-navy) !important;
	outline: none;
}
.ica-native-page .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(10, 27, 61, 0.7);
}

/* Cart / checkout review tables */
.ica-native-page table.shop_table {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(10, 27, 61, 0.1) !important;
}
.ica-native-page table.shop_table th {
	background: #f6f7f9;
	color: var(--ica-navy);
	font-weight: 700;
}
.ica-native-page table.shop_table td,
.ica-native-page table.shop_table th {
	border-color: rgba(10, 27, 61, 0.08) !important;
}

/* Notices */
.ica-native-page .woocommerce-error,
.ica-native-page .woocommerce-info,
.ica-native-page .woocommerce-message {
	border-top-color: var(--ica-teal) !important;
	border-radius: 12px;
}
.ica-native-page .woocommerce-error::before,
.ica-native-page .woocommerce-info::before,
.ica-native-page .woocommerce-message::before {
	color: var(--ica-teal) !important;
}

/* My account nav */
.ica-native-page .woocommerce-MyAccount-navigation ul {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(10, 27, 61, 0.1);
}
.ica-native-page .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ica-navy);
	color: #fff;
}