/* Pop-top roof pages. Uses the theme's design tokens from style.css. */

.wc-pt-badges { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.wc-pt-badges li { margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #dfe8fb; font-size: 14px; }
.wc-pt-badges strong { color: #fff; }

.wc-pt h2 { scroll-margin-top: 100px; }
.wc-pt h3 { font-size: 1.15rem; }

/* tables */
.wc-pt-table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); }
.wc-pt-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.wc-pt-table th, .wc-pt-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--wc-line); color: #35404e; }
.wc-pt-table thead th { border-top: 0; background: var(--wc-tint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--wc-muted); font-weight: 700; }
.wc-pt-table tbody th { font-weight: 700; color: var(--wc-ink); }
.wc-pt-table tbody th a { color: var(--wc-blue); }
.wc-pt-table tbody th a:hover { color: var(--wc-blue-deep); text-decoration: underline; }
.wc-pt-table .num { text-align: right; white-space: nowrap; }
.wc-pt-table .num strong { font-size: 16px; color: var(--wc-ink); }
.wc-pt-table--compact td, .wc-pt-table--compact th { padding: 10px 16px; }
.wc-pt-table--compare td { width: 38%; }
.wc-pt-sub { font-size: 13px; color: var(--wc-muted); }
.wc-pt-sub a { color: var(--wc-blue); text-decoration: underline; }
.wc-pt-covers { display: none; font-weight: 400; font-size: 13px; color: var(--wc-muted); margin-top: 4px; line-height: 1.45; }
.wc-pt-note { font-size: 15px; background: var(--wc-tint); border-radius: var(--wc-radius); padding: 14px 18px; }

/* lists */
/* Tick lists use the site's own checkmark list style (Additional CSS). */

.wc-service-content ol.wc-pt-steps { list-style: none; padding: 0; counter-reset: pt; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wc-service-content ol.wc-pt-steps li { counter-increment: pt; margin: 0; padding: 18px 18px 18px 60px; font-size: 16px; position: relative; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); background: #fff; }
.wc-service-content ol.wc-pt-steps li::marker { content: none; }
.wc-service-content ol.wc-pt-steps li::before { content: counter(pt); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--wc-navy); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.wc-pt-steps strong { display: block; margin-bottom: 4px; }
.wc-pt-steps span { font-size: 15px; color: #35404e; line-height: 1.55; }

.wc-pt-callout { margin: 16px 0 0; padding: 16px 18px; border-left: 4px solid var(--wc-blue); background: var(--wc-tint); border-radius: 0 var(--wc-radius) var(--wc-radius) 0; font-size: 15px; color: #35404e; }

.wc-pt-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wc-pt-know-item { border: 1px solid var(--wc-line); border-radius: var(--wc-radius); padding: 18px; background: #fff; }
.wc-pt-know-item h3 { margin: 0 0 6px; font-size: 1.05rem; }
.wc-pt-know-item p { font-size: 15px; margin: 0; }

/* guides */
.wc-service-content ul.wc-pt-guides li a { font-weight: 600; }

/* calculator */
.wc-pt-calc { border: 1px solid var(--wc-line); border-radius: var(--wc-radius-lg); padding: 22px; background: linear-gradient(180deg, #fff 0%, var(--wc-tint) 100%); box-shadow: var(--wc-shadow-soft); }
.wc-pt-calc-label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wc-muted); margin: 0 0 10px; }
.wc-pt-calc select { width: 100%; padding: 12px 14px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-sm); font: inherit; font-size: 15px; background: #fff; margin-bottom: 18px; }
.wc-pt-calc-set { border: 0; padding: 0; margin: 0 0 18px; }
.wc-pt-calc-opt, .wc-pt-calc-ex { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-sm); background: #fff; margin-bottom: 8px; cursor: pointer; font-size: 15px; }
.wc-pt-calc-opt:hover, .wc-pt-calc-ex:hover { border-color: var(--wc-sky); }
.wc-pt-calc-opt input, .wc-pt-calc-ex input { accent-color: var(--wc-blue); width: 18px; height: 18px; flex: 0 0 auto; }
.wc-pt-calc-opt span:first-of-type, .wc-pt-calc-ex span:first-of-type { flex: 1; }
.wc-pt-calc-price { font-weight: 700; white-space: nowrap; }
.wc-pt-calc-ex.is-poa { cursor: default; color: var(--wc-muted); }
.wc-pt-calc-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.wc-pt-calc-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--wc-radius); background: var(--wc-navy); color: #fff; }
.wc-pt-calc-total-label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #b9c7e6; }
.wc-pt-calc-total-val { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15; }
.wc-pt-calc-total-note { display: block; font-size: 12.5px; color: #b9c7e6; }
.wc-pt-calc-total .wc-btn { background: #fff; color: var(--wc-navy); }
.wc-pt-calc-total .wc-btn:hover { color: var(--wc-navy); transform: translateY(-2px); }
.wc-pt-calc-sent { margin-top: 10px; font-size: 14px; color: #0f6b41; font-weight: 600; }

/* model grid */
.wc-pt-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wc-pt-model { display: block; padding: 16px 18px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s; }
.wc-pt-model:hover { border-color: var(--wc-blue); transform: translateY(-2px); box-shadow: var(--wc-shadow-soft); }
.wc-pt-model strong { display: block; color: var(--wc-ink); font-size: 15.5px; line-height: 1.35; }
.wc-pt-model span { display: block; margin-top: 4px; font-size: 14px; color: var(--wc-blue); font-weight: 600; }
.wc-pt-model--all { background: var(--wc-tint); }

.wc-pt a:not(.wc-btn):not(.wc-pt-model) { color: var(--wc-blue); }
.wc-pt p a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.wc-service-content ol.wc-pt-steps, .wc-pt-know, .wc-pt-models, .wc-pt-calc-extras { grid-template-columns: 1fr; }
	.wc-pt-table th, .wc-pt-table td { padding: 11px 12px; font-size: 14px; }
	.wc-pt-calc { padding: 16px; }
	.wc-pt-fits { display: none; }
	.wc-pt-covers { display: block; }
	.wc-pt-calc-total-val { font-size: 26px; }
	.wc-pt-calc-total .wc-btn { width: 100%; text-align: center; }
}