/* -----------------------------------------------------------
	 Coastal Redesign — v2.2
	 - Line‑item hardware breakdown + 20% buy markup
	 - Rent/Buy, live totals, URL sharing, email & print
	 - Financials + NEW Price Comparison tool
	 ----------------------------------------------------------- */
:root {
	--bg: #F8F7F5;
	--surface: #FFFFFF;
	--primary: #0A2463;
	--secondary: #5C6B90;
	--accent: #B17C57;
	--ink: #222;
	--muted: #6a737d;
	--line: #e1e4e8;
	--header-h: 76px;
	--ease-out: cubic-bezier(.22,.61,.36,1);

	--r-lg: 16px;
	--r-md: 10px;
	--r-sm: 8px;

	--s-1: 8px;
	--s-2: 12px;
	--s-3: 16px;
	--s-4: 24px;
	--s-5: 32px;
	--s-6: 48px;
	--s-7: 64px;

	--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.05);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.05);

	--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	--font-serif: 'Lora', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--ink);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Soft transitions for common elements */
header { transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.sum-card, .card, .table-wrapper, .included { transition: box-shadow .28s ease, transform .28s ease, background-color .28s ease, border-color .28s ease; }
.sum-total, .kpi, .badge, .price, .per { transition: color .2s ease, opacity .2s ease; }

/* Trustworthy value-change cue: a brief background flash, no counting */
.value-flash { animation: value-flash 520ms ease-out; }
@keyframes value-flash {
	0% { background: linear-gradient(90deg, rgba(177,124,87,0.18), transparent); }
	40% { background: linear-gradient(90deg, rgba(177,124,87,0.10), transparent); }
	100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.value-flash { animation: none; }
}

/* Reveal-on-scroll animation */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .32s ease, transform .32s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5); }
header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); position: sticky; top: 0; z-index: 20; }
@supports (backdrop-filter: blur(8px)) { header { background: rgba(255,255,255,.82); backdrop-filter: blur(8px) saturate(1.05); } }
.header-content { display:flex; align-items:center; justify-content:space-between; padding: var(--s-3) 0; }
.brand h1 { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--primary); letter-spacing: .01em; }
.toolbar { display:flex; align-items:center; gap: var(--s-3); }
.seg { display:inline-flex; padding: 4px; background: #ebeef3; border-radius: var(--r-md); }
.seg button { border: 0; background: transparent; padding: .45rem .9rem; border-radius: var(--r-sm); cursor: pointer; color: var(--muted); font-weight: 500; font-size: .9rem; transition: all .2s ease; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.btn { border: 1px solid var(--primary); background: var(--primary); color: var(--surface); border-radius: var(--r-md); padding: .5rem 1rem; font-weight: 500; cursor: pointer; transition: all .2s ease; }
.btn:hover, .btn:focus-visible { background: #fff; color: var(--primary); outline: none; }

.grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media(min-width: 980px) { .grid { grid-template-columns: 1fr 1.2fr; } }
.h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: var(--primary); letter-spacing: -.02em; margin: 0; }
.lede { color: var(--secondary); max-width: 68ch; margin: var(--s-3) 0 0; font-size: 1.1rem; }
.section-heading { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary); margin: 0 0 var(--s-4); }
.section { padding: var(--s-7) 0; }

.plans, .bundles { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media(min-width: 840px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1120px) { .plans { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 720px) { .bundles { grid-template-columns: repeat(2, 1fr); } }
	.plans .card .gallery-link { color: var(--secondary); position: relative; font-weight: 600; }
	.plans .card .gallery-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .6; transform: scaleX(.6); transform-origin: left; transition: transform .2s var(--ease-out), opacity .2s ease; }
	.plans .card .gallery-link:hover::after,
	.plans .card .gallery-link:focus-visible::after { opacity: 1; transform: scaleX(1); }
	.plans .card .btn-choose[aria-pressed="true"] { background: var(--primary); color: white; border-color: var(--primary); box-shadow: var(--shadow-sm); }

.card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-md); background: var(--surface); text-align: left; transition: all .2s ease; cursor: pointer; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.card h3 { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.price { font-weight: 700; font-size: 2rem; color: var(--primary); }
.per { color: var(--muted); font-weight: 500; font-size: 1rem; }
.micro { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

.list { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.list li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: .95rem; }
.list li.optional { color: var(--secondary); }
.tick { width: 18px; height: 18px; color: #16a34a; flex-shrink: 0; }
.opt { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

/* Client vs Admin visibility */
.admin-only { display: none; }
body.admin .admin-only { display: block; }

/* Admin panel */
#adminPanel { border-top: 1px solid var(--line); background: #fff; }
.admin-grid { display:grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media(min-width: 900px){ .admin-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.admin-card { border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); background: var(--surface); box-shadow: var(--shadow-md); }
.admin-card h4 { margin: 0 0 var(--s-3); font-family: var(--font-serif); color: var(--primary); }
.admin-card label { display:flex; flex-direction:column; gap:6px; font-size:.9rem; color: var(--secondary); margin-bottom: var(--s-2); }
.admin-card input, .admin-card textarea { padding:.5rem .6rem; border:1px solid var(--line); border-radius: var(--r-sm); font: inherit; }
.admin-actions { display:flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.btn.secondary { background:#fff; color: var(--primary); border-color: var(--line); }

/* Admin redesign */
.admin-plan .editor-head { display:flex; align-items:center; justify-content:space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.admin-plan .badge { border:1px solid var(--line); color: var(--muted); padding: 2px 6px; border-radius: 999px; }
.admin-card-grid { display:grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media(min-width: 960px){ .admin-card-grid { grid-template-columns: 1.2fr 1fr; } }
.admin-card-grid .field-row { display:grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media(min-width: 720px){ .admin-card-grid .field-row { grid-template-columns: 1fr 1fr; } }
.admin-card-grid .hint { color: var(--muted); }
.admin-card-grid .preview { align-self:start; position: sticky; top: calc(var(--header-h) + 16px); }
.admin-card.preview { background: #fafcfe; }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: var(--s-7); }

/* Screen reader only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Emphasis styling: keep text normal, make the check icon green */
.list li.emphasis { color: inherit; font-weight: 600; }
.list li.emphasis .tick { color: #16a34a; }

.bundle { cursor: pointer; }
.card.bundle { transition: opacity .28s ease, filter .28s ease, transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease; }
.bundle .name { font-weight: 700; font-size: 1.05rem; }
.badge { font-weight: 500; font-size: .9rem; color: var(--secondary); }
.qty { display:flex; align-items:center; gap: var(--s-2); margin-top: var(--s-2); }
.qty input { width: 72px; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; }

/* Greyed/disabled state for bundles included in plan */
.bundle.disabled { opacity: .55; cursor: not-allowed; }
.bundle.disabled .badge { color: #166534; font-weight: 600; }
.bundle.disabled .qty, .bundle.disabled input { display: none !important; }

/* Subtle entrance animations when toggling included state */
@keyframes bundle-dim {
	from { opacity: 1; filter: none; }
	to { opacity: .55; filter: grayscale(0.1); }
}
@keyframes bundle-undim {
	from { opacity: .55; filter: grayscale(0.1); }
	to { opacity: 1; filter: none; }
}
.bundle.dim-animate { animation: bundle-dim .28s ease-out; }
.bundle.undim-animate { animation: bundle-undim .32s ease-out; }

.summary { position: relative; }
@media(min-width: 980px) { .summary { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; } }
.sum-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.sum-header { padding: var(--s-4); border-bottom: 1px solid var(--line); }
.sum-content { padding: var(--s-4); }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sum-row:first-child { padding-top: 0; }
.sum-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sum-total-block { padding-top: var(--s-4); }
.sum-total { font-size: 2.6rem; font-weight: 700; color: var(--primary); }
.sum-header div:first-child { font-size: 1.25rem !important; }
.sum-label { font-size: 1.1rem; font-weight: 700; font-family: var(--font-serif); }
.note { color: var(--muted); font-size: .8rem; margin-top: var(--s-3); }

.table-wrapper { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: var(--s-3); border-bottom: 1px solid var(--line); text-align: left; }
.table thead th { background: #f7f9fc; font-weight: 600; color: var(--secondary); text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
.table tbody th { font-weight: 600; color: var(--primary); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }

/* Mini table for hardware breakdown */
.mini-table { font-size: .88rem; }
.mini-table th:nth-child(2), .mini-table td:nth-child(2),
.mini-table th:nth-child(3), .mini-table td:nth-child(3),
.mini-table th:nth-child(4), .mini-table td:nth-child(4) { text-align:right; }

/* Financials + Comparison */
.fin-card, .compare-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); padding: var(--s-4); }
.fin-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.fin-grid .box { border:1px dashed var(--line); border-radius: var(--r-sm); padding: var(--s-3); }
.kpi { font-weight: 700; color: var(--primary); font-size: 1.25rem; }
.kpi-sub { color: var(--muted); font-size: .85rem; }
details.fin-assump { margin-top: var(--s-3); border-top:1px solid var(--line); padding-top: var(--s-3); }
.assump-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3); }
.assump-grid label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted) }
.assump-grid input { padding:.4rem .5rem; border:1px solid var(--line); border-radius: var(--r-sm); font:inherit }

.compare-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); }
.compare-grid .cell { border:1px dashed var(--line); border-radius: var(--r-sm); padding: var(--s-3); }

.plan-compare { 
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .9rem;
}
.plan-compare th, 
.plan-compare td {
	padding: var(--s-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	word-break: break-word;
}
.plan-compare thead th {
	background: #f7f9fc;
	font-weight: 600;
	color: var(--secondary);
	position: sticky;
	top: var(--header-h);
	z-index: 10;
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .05em;
}
.plan-compare tbody th {
	font-weight: 600;
	color: var(--primary);
	background: var(--surface);
	position: sticky;
	left: 0;
	z-index: 5;
	min-width: clamp(180px, 24vw, 260px);
}
.plan-compare td {
	min-width: clamp(180px, 26vw, 260px);
	background: var(--surface);
}
.plan-compare .emphasis {
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.plan-compare td.centered { text-align: center !important; }
.plan-compare td.centered.emphasis { justify-content: center; }
/* Center Internet management for Premium & Concierge only (use of-type for robustness) */
.plan-compare tr.int-mgmt td { text-align: left; }
.plan-compare tr.int-mgmt td:nth-of-type(2),
.plan-compare tr.int-mgmt td:nth-of-type(3) { text-align: center; }
.plan-compare tr.int-mgmt td:nth-of-type(2).emphasis,
.plan-compare tr.int-mgmt td:nth-of-type(3).emphasis { justify-content: center; }

@media (max-width: 720px) {
	.plan-compare { font-size: .85rem; }
	.plan-compare th, .plan-compare td { padding: var(--s-3); }
	.plan-compare td { min-width: 240px; }
	.plan-compare tbody th { min-width: 220px; }
}
.plan-compare tr.group th {
	background: #fafcfe;
	color: var(--secondary);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .75rem;
}

/* Removed chrome-style masked checkmark; using inline SVG tick instead */
.plan-compare tbody tr:last-child th,
.plan-compare tbody tr:last-child td {
	border-bottom: 0;
}

.plan-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	margin: var(--s-4) 0;
	padding: var(--s-2);
}

.print-only { display: none; }

/* Included-in-every-plan list */
.included { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); padding: var(--s-4); }
.includes-list .tick { color: #16a34a; }
.includes-grid { display:grid; grid-template-columns: 1fr; gap: var(--s-2) var(--s-5); }
@media(min-width: 720px){ .includes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(min-width: 1080px){ .includes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Galleries */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); }
@media(min-width: 840px){ .gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #f8fafc; }
.gallery-item figcaption { margin-top: .35rem; color: var(--muted); }
	/* Lightbox overlay */
	.lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 2rem; z-index: 1000; }
	.lightbox.open { display: flex; }
	.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 23, .6); backdrop-filter: saturate(120%) blur(6px); opacity: 0; transition: opacity .28s ease; }
	.lightbox.open .lightbox-backdrop { opacity: 1; }
	.lightbox-figure { position: relative; z-index: 1; max-width: min(90vw, 1200px); max-height: 80vh; display: flex; flex-direction: column; gap: .75rem; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .28s ease, transform .32s var(--ease-out); }
	.lightbox.open .lightbox-figure { opacity: 1; transform: translateY(0) scale(1); }
	.lightbox-figure img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow-lg); background: #0b1220; }
	.lightbox-figure figcaption { color: #c9d1e1; text-align: center; }
	.lightbox-close { position: absolute; top: -12px; right: -12px; background: rgba(17, 24, 39, .9); color: #e5edff; border: 1px solid rgba(148, 163, 184, .25); border-radius: 999px; padding: .4rem .55rem; line-height: 1; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .18s ease, background .2s ease; }
	.lightbox-close:hover { transform: scale(1.05); background: rgba(17, 24, 39, 1); }
	@media (prefers-reduced-motion: reduce) {
		.lightbox-backdrop, .lightbox-figure { transition: none; }
	}

@media (hover: hover) {
	.plan-compare tbody tr:hover td {
		background: #f7f9fc;
	}
}

@media print {
	body { background: #fff; }
	.wrap { max-width: 900px; }
	.toolbar, .no-print, .admin-only { display: none !important; }
	.print-only { display: block !important; }
	.plan-scroll { box-shadow: none; border: 1px solid #ccc; }
	header { position: static; }
	.summary { position: static !important; }
	.plan-compare thead th { position: static; }
	.sum-card { box-shadow: none; border: 1px solid #ccc; }
	.section { padding: 24px 0; }
	.section-heading { margin-bottom: 12px; }
	.plan-scroll { page-break-before: always; }
}