:root { --brand: #1f6f43; --brand-dark: #17532f; --brand-light: #e6f3ea; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }
.btn-brand { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-brand:disabled { background-color: #9dbfaa; border-color: #9dbfaa; color: #fff; }
.mk-main { padding: 0; }
.mk-nav .nav-link { font-weight: 500; }
.mk-hero { position: relative; background-size: cover; background-position: center bottom; min-height: 78vh; display: flex; align-items: center; }
.mk-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 45, 28, 0.88) 0%, rgba(15, 45, 28, 0.55) 55%, rgba(15, 45, 28, 0.15) 100%); }
.min-vh-75 { min-height: 75vh; }
.mk-icon-sm { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; filter: invert(1); }
.mk-step { position: relative; padding: 1.5rem 1rem; border-radius: 12px; background: #f8f9fa; height: 100%; }
.mk-step-icon { width: 64px; height: 64px; margin: 0 auto; color: var(--brand); }
.mk-step-icon img { width: 64px; height: 64px; }
.mk-step-number { position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mk-style-card { border: 0; border-radius: 16px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.mk-style-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; }
.mk-style-image { aspect-ratio: 16 / 10; background: #e9eef2; overflow: hidden; }
.mk-style-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-style-image-lg { aspect-ratio: 16 / 10; }
.mk-features li { padding-left: 1.5rem; position: relative; margin-bottom: 0.35rem; }
.mk-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.fence-map { height: 65vh; min-height: 420px; z-index: 0; }
.fence-drawing { cursor: crosshair; }
.fence-step { font-size: 0.9rem; min-width: 1.8rem; }
.fence-segments { max-height: 45vh; overflow-y: auto; }
.fence-segment { border-radius: 10px; transition: border-color 0.3s; }
.fence-segment-thumb { width: 72px; height: 48px; border-radius: 6px; object-fit: cover; background: #e9eef2; flex-shrink: 0; }
.fence-address-results { max-height: 200px; overflow-y: auto; }
.fence-map-viewer { height: 50vh; min-height: 320px; border-radius: 6px; z-index: 0; }
.leaflet-container { font-family: inherit; }
/* option cards in the modal */
.fence-option { border: 2px solid #dee2e6; border-radius: 12px; padding: 0.5rem; cursor: pointer; height: 100%; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.fence-option:hover { border-color: #9dbfaa; }
.fence-option.selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.fence-option.selected::after { content: "\2713"; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.fence-option img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: #e9eef2; }
.fence-option .fence-option-title { font-weight: 600; margin-top: 0.4rem; }
.fence-option .fence-option-sub { font-size: 0.8rem; color: #6c757d; }
.fence-option-post img { aspect-ratio: 3 / 4; object-fit: contain; background: #f4f6f8; }
.fence-swatch { width: 100%; aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; }
.fence-chip { border: 2px solid #dee2e6; border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer; font-weight: 600; background: #fff; }
.fence-chip.selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.fence-chip:hover { border-color: #9dbfaa; }
.fence-segment .flex-grow-1 { min-width: 0; }
.fence-modal-sticky { position: sticky; top: 0; }
@media (max-width: 991px) { .fence-modal-sticky { position: static; } }