@charset "UTF-8";
/* Webfonts: assets/css/fonts.css (loaded first in views/partials/head.php). */

:root {
    /* Brand & semantic */
    --fc-brand-primary: #d4112f;
    --fc-princeton-orange: #f67925;
    --fc-green: #04a725;
    --fc-texas-green: #0b9321;
    --fc-slimy-green: #19a11e;
    --fc-forest-green: #016b16;
    --fc-salem: #008019;
    --fc-fruit-salad: #4caf50;
    --fc-alizarin: #e91e1e;
    --fc-red: #f70000;
    --fc-cinnabar: #eb2424;
    --fc-dark-red: #ad0101;
    --fc-bootstrap-danger: #dc3545;
    --fc-shiraz: #b20b1b;
    --fc-bright-maroon: #90232e;
    --fc-claret: #b5003d;
    --fc-allports: #0a6593;
    --fc-deep-blue: #143052;
    --fc-pattens-blue: #e1ecf1;
    --fc-malibu: #7cd7ff;
    --fc-jaffa: #f5853a;
    --fc-pumpkin: #ff6b08;
    --fc-vivid-tangerine: #ff7c81;
    --fc-gorse: #ffec58;
    --fc-antique-brass: #b77a55;
    --fc-brown-rust: #8d6247;

    /* Blue gradient band */
    --fc-gradient-sky-top: rgba(252, 252, 252, 1);
    --fc-gradient-sky-mid: rgba(224, 239, 251, 1);
    --fc-gradient-sky-bottom: rgba(198, 230, 248, 1);

    /* Neutrals */
    --fc-black: #000;
    --fc-night: #111;
    --fc-mine-shaft: #1b1b1b;
    --fc-cod-gray: #1e1e1e;
    --fc-shark: #292929;
    --fc-dark-charcoal: #333;
    --fc-charcoal-37: rgb(37, 37, 37);
    --fc-boulder-78: rgb(78, 78, 78);
    --fc-emperor: #525252;
    --fc-emperor-555: #555;
    --fc-dove-gray: #646464;
    --fc-granite-gray: #666;
    --fc-dim-gray: #696969;
    --fc-bootstrap-secondary: #6c757d;
    --fc-boulder: #757575;
    --fc-spanish-gray: #9e9e9e;
    --fc-nickel: #a2a1a4;
    --fc-nobel: #a3a3a3;
    --fc-dark-medium-gray: #a9a9a9;
    --fc-dark-gray: #aaa;
    --fc-gray: #e9e9e9;
    --fc-bright-gray: #eee;
    --fc-gainsboro: #ddd;
    --fc-seashell: #dcdcdc;
    --fc-platinum: #eaeaea;
    --fc-silver-chalice: #bdbdbd;
    --fc-gray-nurse: #bebebe;
    --fc-silver: #c2c2c2;
    --fc-light-gray: #d0d0d0;
    --fc-alto: #d1d1d1;
    --fc-alto-2: #d2d2d2;
    --fc-alto-3: #d4d4d4;
    --fc-alto-4: #e1e1e1;
    --fc-wild-sand: #f0f0f0;
    --fc-concrete: #f1f1f1;
    --fc-gallery: #f2f2f2;
    --fc-wild-sand-2: #f3f3f3;
    --fc-cultured: #f5f5f5;
    --fc-lavender-blush: #ffeded;
    --fc-pippin: #ffeeee;
    --fc-alabaster: #fafafa;
    --fc-smoke-white: #fbfbfb;
    --fc-remy: #fcdada;
    --fc-fair-pink: #fce8da;
    --fc-white-smoke: #fefefe;
    --fc-white: #fff;
    --fc-pale-pink: #dafcfc;
    --fc-chinese-white: #dceedf;

    /* Alpha & overlays */
    --fc-a-black-0: rgba(0, 0, 0, 0);
    --fc-a-black-6: rgba(0, 0, 0, 0.06);
    --fc-a-black-8: rgba(0, 0, 0, 0.08);
    --fc-a-black-28: rgba(0, 0, 0, 0.28);
    --fc-a-black-35: rgba(0, 0, 0, 0.35);
    --fc-a-black-45: rgba(0, 0, 0, 0.45);
    --fc-a-black-55: rgba(0, 0, 0, 0.55);
    --fc-a-black-75: rgba(0, 0, 0, 0.75);
    --fc-a-black-78: rgba(0, 0, 0, 0.78);
    --fc-a-black-82: rgba(0, 0, 0, 0.8196078431);
    --fc-a-black-98: rgb(0 0 0 / 98%);
    --fc-a-white-12: rgba(255, 255, 255, 0.12);
    --fc-a-white-14: rgba(255, 255, 255, 0.14);
    --fc-a-white-22: rgba(255, 255, 255, 0.22);
    --fc-a-white-45: rgba(255, 255, 255, 0.45);
    --fc-a-white-65: rgba(255, 255, 255, 0.65);
    --fc-a-white-85: rgba(255, 255, 255, 0.85);
    --fc-a-white-98: rgba(255, 255, 255, 0.98);
    --fc-a-orange-3: rgba(246, 121, 37, 0.031372549);
    --fc-a-orange-20: rgba(246, 121, 37, 0.2);
    --fc-a-orange-22: rgba(246, 121, 37, 0.22);
    --fc-a-orange-25: rgba(246, 121, 37, 0.25);
    --fc-a-orange-35: rgba(246, 121, 37, 0.35);
    --fc-a-orange-38: rgba(246, 121, 37, 0.38);
    --fc-a-linen-65: rgba(238, 226, 216, 0.65);
    --fc-a-linen-75: rgba(238, 226, 216, 0.75);
    --fc-overlay-dark: #000000e0;

    /* Style-v2 (loaded after style.css) */
    --fc-whisper: #f6f6f6;
    --fc-gray-chateau: #8e8e8e;
    --fc-fiery-orange: #cb6520;
    --fc-trout: #4b5156;
    --fc-matterhorn: #414141;
}


html {
  scroll-behavior: smooth;
}   

.fc-row-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.fc-cart-items .fc-row-container--cart-stock>.fc-col-half,
.fencing-section--has-border {
    border: 1px solid var(--fc-princeton-orange);
}

/* Icons */
.fc-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    vertical-align: top;
}

.text-orange {
    color: var(--fc-princeton-orange);
}

.fc-icon-xs {
    width: 15px;
    height: 15px;
}


.bg-orange {
    background: var(--fc-princeton-orange)
}

.btn-fc i {
    margin-right: 5px;
}

/**
 * Basic typography style for copy text
 */
.fencing-container {
    color: var(--fc-black);
    font-family: "Poppins", sans-serif !important;
}

.fencing-container .fc-font-1 {
    font-family: "Poppins", sans-serif !important;
}

.fencing-container .fc-font-2 {
    font-family: "League Gothic", sans-serif !important;
}

.fencing-container h1,
.fencing-container h2,
.fencing-container h3,
.fencing-container h4,
.fencing-container h5,
.fencing-container p,
.fencing-container input,
.fencing-container select,
.fencing-container label {
    margin: 0;
    font-family: "Poppins", sans-serif !important;
}

/**
 * Planner (/fc/planner): reserve vertical scrollbar space so the layout does not shift
 * when page height grows and the document scrollbar appears.
 */
html:has(body.fc-planner-page) {
    scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
    html:has(body.fc-planner-page) {
        overflow-y: scroll;
    }
}

/**
 * Planner (/fc/planner): compact buttons (override Bootstrap .btn padding utilities).
 */
.fc-planner-page .btn:not(.btn-close) {
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 0.4rem 0.7rem !important;
}
.fc-planner-page .fencing-section__bottom .btn {
    padding: 6px 20px !important;
}
.fc-planner-page .fencing-section__bottom.fc-step3-bottom .btn {
    padding: 15px 20px !important;
}

/* Step 3 bottom bar: phones + tablet/iPad until xl (stack or 3-col row); single strip from xl */
@media (max-width: 1199.98px) {
    .fc-planner-page .fc-step3-bottom {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .fc-planner-page .fc-step3-bottom [data-tab="1"] .btn {
        min-height: 44px;
        white-space: normal;
        text-align: center;
        word-break: break-word;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .fc-planner-page .fc-step3-bottom [data-tab="1"] .btn > b,
    .fc-planner-page .fc-step3-bottom [data-tab="1"] .btn > span {
        display: inline-block;
        max-width: 100%;
    }

    .fc-planner-page .fc-step3-bottom .fc-step3-options-actions .btn {
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }
}
.fc-planner-page .btn.btn-sm:not(.btn-close) {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem !important;
}

.fc-planner-page .modal .btn.btn-lg:not(.btn-close) {
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem !important;
}

.fc-planner-page .fc-btn-create-plan.btn:not(.btn-close) small {
    font-size: 0.7rem;
}

/* Tab 2 — Project Notes: full width (global .fc-form-control--textarea uses 500px on large screens) */
.fc-planner-page textarea.fc-form-control--textarea[name="notes"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Step 3 panel action controls use .btn-fc without .btn */
.fc-planner-page .btn-fc:not(.btn-fc--large-text) {
    font-size: 0.8125rem !important;
    line-height: 1.35;
    padding: 0.45rem 0.85rem !important;
}

/**
 * Planner: compact fields to match compact buttons (~0.8125rem).
 */
.fc-planner-page .form-control,
.fc-planner-page .form-select,
.fc-planner-page .fc-form-control,
.fc-planner-page .custom-gate .form-control,
.fc-planner-page .custom-gate select {
    border: 1px solid var(--fc-dark-gray) !important;
}

.fc-planner-page .form-control:not(textarea),
.fc-planner-page .form-select {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    padding: 0.4rem 0.65rem !important;
    min-height: calc(1.35em + 0.8rem + 2px);
}

.fc-planner-page textarea.form-control {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    padding: 0.45rem 0.65rem !important;
}

.fc-planner-page .fc-label-group .form-control {
    padding: 14px 15px 11px !important;
        font-size: 1rem !important;
}

.fc-planner-page .fc-label-group .fc-form-label {
    font-size: 0.75rem;
    top: -9px;
}

.fc-planner-page .fc-form-control:not(textarea) {
    font-size: 1rem !important;
    padding: 0.4rem 0.65rem !important;
}

.fc-planner-page .fencing-mb-input input,
.fc-planner-page .measurement-box-number {
    font-size: 1rem !important;
    font-weight: 500;
}

.fc-planner-page .fencing-mb-input span {
    font-size: 0.8125rem;
}

.fc-planner-page .fencing-qty-btn {
    height: auto;
    min-height: 2.25rem;
    padding: 0.35rem 0.65rem;
}

.fc-planner-page .custom-gate .form-control,
.fc-planner-page .custom-gate select {
    font-size: 0.8125rem !important;
}

/**
 * Planner: smaller Colour Options (Step 4 — loaded into [data-load="color-options"]).
 */
.fc-planner-page [data-load="color-options"] .fc-card-header {
    padding: 6px 10px;
    font-size: 0.875rem;
}

.fc-planner-page [data-load="color-options"] .fc-color-options-section-count {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.9;
}

.fc-planner-page [data-load="color-options"] .fc-color-options-section-count:empty {
    display: none;
}

.fc-planner-page .fc-color-options {
    padding: 6px 10px;
}

.fc-planner-page .fc-color-options .fc-color-options__slide {
    margin-bottom: 0.45rem;
}

.fc-planner-page .fc-color-options p {
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0;
    font-size: 0.75rem;
}

.fc-planner-page .fc-color-options p strong {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fc-planner-page .fc-color-options p span,
.fc-planner-page .fc-color-options span {
    font-size: 0.6875rem;
}

.fc-planner-page .fc-step-4 .fc-color-options .fc-select {
    padding-left: 12px;
    text-align: left;
}

.fc-planner-page .fc-step-4 .fc-color-options .fc-select p {
    text-align: left;
}

.fc-planner-page .fc-step-4 .fc-select {
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .fc-planner-page .fc-step-4 .fc-select {
        height: auto;
        min-height: 52px;
    }
}

.fc-planner-page .fc-step-4 .fc-color-options .fc-select::after,
.fc-planner-page .fc-step-4 .fc-color-options .fc-select-2::after {
    height: 18px;
    width: 18px;
    top: auto;
    bottom: 8px;
    right: 8px;
    left: auto;
}

.fc-planner-page .fc-step-4 .fc-select-color {
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.fc-planner-page .fc-step-4 .fc-select-color:active,
.fc-planner-page .fc-step-4 .fc-select-color.is-pressed {
    transform: scale(0.96);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.18);
    filter: brightness(0.94);
    border-color: var(--fc-princeton-orange);
}

/* Project plan modal — Color Options cards */
#submit-modal.fencing-modal--project-plans .fc-select-color {
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#submit-modal.fencing-modal--project-plans .fc-select-color:active,
#submit-modal.fencing-modal--project-plans .fc-select-color.is-pressed {
    transform: scale(0.96);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.18);
    filter: brightness(0.94);
    border-color: var(--fc-princeton-orange);
}

/* Submit modals — Anything Else We Can Help You With? cards */
#submit-modal .fc-other-products .fc-form-check-img {
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#submit-modal .fc-other-products .fc-form-check-img:active,
#submit-modal .fc-other-products .fc-form-check-img.is-pressed {
    transform: scale(0.96);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.14);
    filter: brightness(0.96);
    border-color: var(--fc-princeton-orange) !important;
}

/* Step 4 — colour options skeleton (2 / 4 / 6 tiles; matches Slick columns) */
.fc-planner-page .fc-color-options-skeleton__header {
    padding: 6px 10px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.fc-planner-page .fc-color-options-skeleton__header-bar {
    display: block;
    width: 42%;
    max-width: 280px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    background-size: 200% 100%;
    animation: fc-fencing-skeleton-shimmer 1.05s ease-in-out infinite;
}

.fc-planner-page .fc-color-options-skeleton__track {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
    width: calc(100% + 12px);
    box-sizing: border-box;
    padding: 6px 10px 10px;
}

.fc-planner-page .fc-color-options-skeleton__cell {
    box-sizing: border-box;
    padding: 0 6px 10px;
    flex: 0 0 50%;
    max-width: 50%;
}

.fc-planner-page .fc-color-options-skeleton__tile {
    height: 56px;
    border-radius: 8px;
    border: 2px solid var(--fc-alto-4);
    background: var(--fc-white-smoke);
    padding: 10px 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.fc-planner-page .fc-color-options-skeleton__line {
    display: block;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--fc-alabaster) 0%,
        #e2e2e2 50%,
        var(--fc-alabaster) 100%
    );
    background-size: 200% 100%;
    animation: fc-fencing-skeleton-shimmer 1.05s ease-in-out infinite;
}

.fc-planner-page .fc-color-options-skeleton__line--title {
    width: 58%;
    height: 9px;
    margin-bottom: 5px;
}

.fc-planner-page .fc-color-options-skeleton__line--sub {
    width: 40%;
    height: 7px;
    animation-delay: 0.06s;
}

@media (max-width: 767.98px) {
    .fc-planner-page .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 3) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .fc-planner-page .fc-color-options-skeleton__cell {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .fc-planner-page .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 5) {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .fc-planner-page .fc-color-options-skeleton__cell {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }

    .fc-planner-page .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 5) {
        display: block !important;
    }

    .fc-planner-page .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 7) {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-planner-page .fc-color-options-skeleton__header-bar,
    .fc-planner-page .fc-color-options-skeleton__line {
        animation: none;
        background: var(--fc-alabaster);
    }
}

/* Step 4 — per-section skeleton host ↔ colour cards crossfade */
/* Stack host + mount in one grid cell so opacity transitions don’t double vertical space */
.fc-planner-page .fc-planner-color-options-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.fc-planner-page .fc-planner-color-options-wrap > .js-fc-color-options-skeleton-host,
.fc-planner-page .fc-planner-color-options-wrap > .js-fc-color-options-mount {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.fc-planner-page .fc-planner-color-options-wrap > .js-fc-color-options-skeleton-host {
    z-index: 0;
}

.fc-planner-page .fc-planner-color-options-wrap > .js-fc-color-options-mount:not(.fc-d-none) {
    z-index: 1;
}

.fc-planner-page .js-fc-color-options-skeleton-host {
    transition: opacity 0.38s ease;
}

.fc-planner-page .js-fc-color-options-skeleton-host.fc-planner-skeleton-host--exiting {
    opacity: 0;
    pointer-events: none;
}

.fc-planner-page .js-fc-color-options-skeleton-host.fc-planner-skeleton-host--hidden {
    visibility: hidden;
}

.fc-planner-page .js-fc-color-options-mount {
    transition: opacity 0.42s ease;
}

.fc-planner-page .js-fc-color-options-mount.fc-color-options-mount--entering {
    opacity: 0;
}

.fc-planner-page .js-fc-color-options-mount.fc-color-options-mount--visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fc-planner-page .js-fc-color-options-skeleton-host,
    .fc-planner-page .js-fc-color-options-mount {
        transition-duration: 0.01ms !important;
    }
}

/* Step 4 — colour row header: green circle + white check vs red circle + white exclamation */
.fc-planner-page .fc-step-4 .fc-color-options-planner-heading {
    min-width: 0;
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 0.12rem;
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon[data-bs-toggle='tooltip'] {
    cursor: help;
}

@media (min-width: 576px) {
    .fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon {
        margin-top: 0;
    }
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon--good {
    background-color: #198754;
    border: 1px solid #fff;
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon--bad {
    background-color: #dc3545;
    border: 1px solid #fff;
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-status-icon__inner {
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.fc-planner-page .fc-step-4 .fc-color-options-planner-title-text {
    min-width: 0;
}

/**
 * Project plan (/fc/project-plan): compact buttons & fields (match planner scale).
 */
.fc-project-plan-page .fencing-tab-add {
    display: none !important;
}

html:not([data-fc-debug="1"]) .fc-project-plan-page .fc-cart-item-slug {
    display: none !important;
}

.fc-project-plan-page .btn:not(.btn-close) {
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 0.4rem 0.7rem !important;
}

.fc-project-plan-page .btn.btn-sm:not(.btn-close) {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem !important;
}

.fc-project-plan-page .modal .btn.btn-lg:not(.btn-close) {
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem !important;
}

.fc-project-plan-page .btn-fc:not(.btn-fc--large-text) {
    font-size: 0.8125rem !important;
    line-height: 1.35;
    padding: 0.45rem 0.85rem !important;
}

.fc-project-plan-page .form-control,
.fc-project-plan-page .form-select,
.fc-project-plan-page .fc-form-control,
.fc-project-plan-page .custom-gate .form-control,
.fc-project-plan-page .custom-gate select {
    border: 1px solid var(--fc-dark-gray) !important;
}

.fc-project-plan-page .form-control:not(textarea),
.fc-project-plan-page .form-select {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    min-height: calc(1.35em + 0.8rem + 2px);
}

.fc-project-plan-page textarea.form-control {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    padding: 0.45rem 0.65rem !important;
}

.fc-project-plan-page .fc-label-group .form-control {
    padding: 0.55rem 0.65rem 0.38rem !important;
    font-size: 0.8125rem !important;
}

.fc-project-plan-page .fc-label-group .fc-form-label {
    font-size: 0.75rem;
    top: -9px;
}

.fc-project-plan-page .fc-form-control:not(textarea) {
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.65rem !important;
}

.fc-project-plan-page .fencing-mb-input input,
.fc-project-plan-page .measurement-box-number {
    font-size: 0.8125rem !important;
    font-weight: 500;
}

.fc-project-plan-page .fencing-mb-input span {
    font-size: 0.8125rem;
}

.fc-project-plan-page .fencing-qty-btn {
    height: auto;
    min-height: 2.25rem;
    padding: 0.35rem 0.65rem;
}

/* Item List & Cart (#update_cart-list): smaller action + qty controls; exclude View Total Cost */
.fc-project-plan-page #update_cart-list .btn:not(.js-fc-view-total-cost) {
    padding: 0.28rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
    border-radius: 0.25rem;
}

.fc-project-plan-page #update_cart-list .fencing-qty-btn {
    min-height: 1.85rem;
    padding: 0.22rem 0.45rem;
    font-size: 0.7rem;
}

.fc-project-plan-page .custom-gate .form-control,
.fc-project-plan-page .custom-gate select {
    font-size: 0.8125rem !important;
}

.fc-project-plan-page .fc-color-options {
    padding: 6px 5px;
}

.fc-project-plan-page .fc-color-options p {
    line-height: 1.3;
    margin-bottom: 0;
    font-size: 0.75rem;
}

.fc-project-plan-page .fc-color-options p strong {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fc-project-plan-page .fc-color-options p span,
.fc-project-plan-page .fc-color-options span {
    font-size: 0.6875rem;
}

.fc-project-plan-page .fc-color-options .fc-select,
.fc-project-plan-page .fc-color-options .fc-select-2 {
    padding: 6px 8px;
}

.fc-project-plan-page .fc-color-options .fc-select::after,
.fc-project-plan-page .fc-color-options .fc-select-2::after {
    height: 16px;
    width: 16px;
    top: 8px;
    right: 8px;
}

.fc-project-plan-page .fencing-modal .fc-color-options .fc-select::after,
.fc-project-plan-page .fencing-modal .fc-color-options .fc-select-2::after {
    top: auto;
    bottom: 10px;
    right: 10px;
}

/* Project plan — Color Options skeleton (2 mobile / 4 tablet+; matches Slick) */

.fc-project-plan-page .fc-project-plan-color-skeleton {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-pending:not(.fc-project-plan-color-slick-ready) .fc-project-plan-color-skeleton {
    display: block;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-ready .fc-project-plan-color-skeleton {
    display: none !important;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0 -6px;
    width: calc(100% + 12px);
    max-width: calc(100% + 12px);
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__cell {
    box-sizing: border-box;
    padding: 10px 6px;
    flex: 0 0 50%;
    max-width: 50%;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__tile {
    min-height: 118px;
    border-radius: 10px;
    border: 2px solid var(--fc-alto-4);
    background: var(--fc-white-smoke);
    padding: 12px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Tile stays static — shine runs only on the bar pseudo-elements below */

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__divider {
    display: block;
    width: 100%;
    height: 0;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--fc-alto-4);
    flex-shrink: 0;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line {
    display: block;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #d5d5d5;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
}

/* Row1 → divider → row2 / row3 (matches fence line / hr / colour title & subtitle) */
.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row1 {
    width: 78%;
    height: 10px;
    margin-bottom: 0;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row1::after {
    animation-delay: 0.05s;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row2 {
    width: 62%;
    height: 11px;
    margin-bottom: 6px;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row2::after {
    animation-delay: 0.22s;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row3 {
    width: 44%;
    height: 9px;
    margin-bottom: 0;
}

.fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line--row3::after {
    animation-delay: 0.38s;
}

@media (max-width: 767.98px) {
    .fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 3) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__cell {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 5) {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line::after {
        animation: none !important;
        opacity: 0;
    }

    .fc-project-plan-page .fc-project-plan-color-skeleton .fc-color-options-skeleton__line {
        background: var(--fc-alabaster);
    }
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-pending:not(.fc-project-plan-color-slick-ready) {
    position: relative;
    min-height: 0;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-pending:not(.fc-project-plan-color-slick-ready) .js-fc-project-plan-color-slick {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-ready .js-fc-project-plan-color-slick.slick-initialized {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease-out;
}

/* Project plan — Color Options slick (2 mobile / 4 tablet+; fc-project-plan-color-slick.js) */

/* Tablet / iPad: stack Your Project Details (customer + fence summary vs Color Options) full width; two columns from lg */
@media (max-width: 991.98px) {
    .fc-project-plan-page .fc-project-details .row > .col-md {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Flex columns default min-width:auto — Slick’s wide track was expanding the column past the grid */
.fc-project-plan-page .fc-project-details .row > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

/* Fixed table layout so the cell width follows the column, not the slick track’s intrinsic width */
.fc-project-plan-page .fc-table--colour {
    table-layout: fixed;
    width: 100%;
}

.fc-project-plan-page .fc-table--colour .fc-table--colour__slick-cell {
    width: 100%;
}

.fc-project-plan-page .fencing-section:has(.fc-project-plan-color-slick-area) {
    overflow: visible;
}

.fc-project-plan-page .fc-table--colour td {
    overflow: visible;
    vertical-align: top;
}

.fc-project-plan-page .fc-table-rounded-border:has(.fc-project-plan-color-slick-area) {
    overflow: visible;
}

.fc-project-plan-page .fc-card:has(.fc-project-plan-color-slick-area),
.fc-project-plan-page .fc-card:has(.fc-project-plan-color-slick-area) .fc-card-body,
.fc-project-plan-page .fc-card:has(.fc-project-plan-color-slick-area) .fc-table-rounded-border {
    overflow: visible;
}

.fc-project-plan-page .fc-project-plan-color-slick-area {
    position: relative;
    overflow: visible;
    margin-bottom: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fc-project-plan-page .js-fc-project-plan-color-slick.slick-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: 52px;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-list {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Stretch visible slides to one row height; cards fill slide height.
   Slick’s default .slick-track { margin: auto } centers a short track — override so tiles start at the left. */
.fc-project-plan-page .js-fc-project-plan-color-slick .slick-track {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: stretch;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-slide {
    display: flex;
    height: auto;
    align-items: stretch;
    text-align: left;
}

.fc-project-plan-page .js-fc-project-plan-color-slick.slick-initialized .slick-slide > div {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-color__slide {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
}

.fc-project-plan-page .fc-project-plan-color__slide .fc-color-options {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-color__slide .fc-colour-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-color__slide .fc-colour-item > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fc-project-plan-page .fc-project-plan-color-sections {
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0.95;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-prev:before,
.fc-project-plan-page .js-fc-project-plan-color-slick .slick-next:before {
    display: none !important;
    content: none !important;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow {
    position: absolute;
    top: 42%;
    z-index: 12;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow:focus-visible {
    outline: 2px solid var(--fc-princeton-orange);
    outline-offset: 2px;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow__inner {
    position: absolute;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 0.95rem;
    line-height: 1;
    color: #2d2d2d;
    transition: color 0.2s ease, transform 0.2s ease;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow:hover {
    background: var(--fc-white);
    box-shadow:
        0 2px 6px rgba(246, 121, 37, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1.04);
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow:hover .fencing-styles-arrow__icon {
    color: var(--fc-princeton-orange);
}

.fc-project-plan-page .fc-project-plan-color-slick-area .slick-prev.fencing-styles-arrow {
    left: -30px;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .slick-next.fencing-styles-arrow {
    right: -30px;
}

/* Edit mode — Colour Options carousel arrows hidden (table toggles project-details--edit → editable) */
.fc-project-plan-page .fc-table--colour.project-details--editable .fc-project-plan-color-slick-area .fencing-styles-arrow {
    display: none !important;
}

.fc-project-plan-page .fc-table--colour.project-details--editable .fc-project-plan-color-slick-area .js-fc-project-plan-color-slick.slick-slider {
    padding-bottom: 40px;
}

.fc-project-plan-page .fc-table--colour.project-details--editable .js-fc-project-plan-color-slick .slick-dots {
    max-width: 100%;
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow.slick-disabled {
    opacity: 0.28;
    pointer-events: none;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fc-project-plan-page .fc-project-plan-color-slick-area .fencing-styles-arrow.slick-disabled .fencing-styles-arrow__icon {
    color: #9a9a9a;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-single-page .js-fc-project-plan-color-slick.slick-slider,
.fc-project-plan-page .js-fc-project-plan-color-slick.slick-slider:has(.slick-dots li:only-child) {
    padding-bottom: 0;
}

.fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-single-page .slick-dots,
.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots:has(li:only-child) {
    display: none !important;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 96px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li {
    position: relative;
    display: inline-flex;
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li button {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    opacity: 0.45;
    color: var(--fc-black);
}

.fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--fc-princeton-orange);
}

@media (max-width: 767.98px) {

    /* Project plan Slick: arrows only on mobile — no bullet pager */
    .fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots {
        display: none !important;
    }

    .fc-project-plan-page .js-fc-project-plan-color-slick.slick-slider,
    .fc-project-plan-page .fc-table--colour.project-details--editable .fc-project-plan-color-slick-area .js-fc-project-plan-color-slick.slick-slider {
        padding-bottom: 22px;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-single-page .js-fc-project-plan-color-slick.slick-slider {
        padding-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .fc-project-plan-page .js-fc-project-plan-color-slick.slick-slider {
        padding-bottom: 48px;
    }

    .fc-project-plan-page .fc-table--colour.project-details--editable .fc-project-plan-color-slick-area .js-fc-project-plan-color-slick.slick-slider {
        padding-bottom: 36px;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area.fc-project-plan-color-slick-single-page .js-fc-project-plan-color-slick.slick-slider,
    .fc-project-plan-page .js-fc-project-plan-color-slick.slick-slider:has(.slick-dots li:only-child) {
        padding-bottom: 22px;
    }
}

@media (max-width: 991.98px) {

    .fc-project-plan-page .fc-table--colour.project-details--editable .js-fc-project-plan-color-slick .slick-dots {
        max-width: 100%;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area .slick-prev.fencing-styles-arrow {
        left: -36px;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area .slick-next.fencing-styles-arrow {
        right: -36px;
    }

    .fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots {
        max-width: calc(100% - 88px);
        gap: 10px;
        bottom: 6px;
    }

    .fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li button {
        width: 20px;
        height: 20px;
    }

    .fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li button:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    .fc-project-plan-page .js-fc-project-plan-color-slick .slick-dots li.slick-active button:before {
        opacity: 1;
        color: var(--fc-princeton-orange);
    }
}

@media (max-width: 575.98px) {
    .fc-project-plan-page .fc-project-plan-color-slick-area {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }

    .fc-project-plan-page .fc-table--colour.project-details--editable .fc-project-plan-color-slick-area {
        padding-left: 0;
        padding-right: 0;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area .slick-prev.fencing-styles-arrow {
        left: 0;
    }

    .fc-project-plan-page .fc-project-plan-color-slick-area .slick-next.fencing-styles-arrow {
        right: 0;
    }
}

/* Project plan: primary cart CTA (overrides compact .btn rules) */
.fc-project-plan-page .fc-cart-items .btn-submit.btn-green.btn-lg {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    padding: 0.95rem 1.5rem !important;
}

body {
    background: var(--fc-smoke-white);
    font-family: "Poppins", sans-serif;
}

/**
* Basic styles for links
*/
a {
    color: var(--primary);
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

p {
    font-family: "Poppins", sans-serif !important;
}

a div {
    cursor: pointer;
}

.fc-empty-img {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fc-cultured);
    border-radius: 8px;
    color: var(--fc-black);
}

.fc-color-options p {
    font-weight: 400;
    line-height: 22px;
}

.fc-color-options p strong {
    font-size: 18px;
    font-weight: 600;
}

.fc-color-options p span {
    font-size: 14px;
}

.fc-color-options span {
    font-size: 14px;
}

.fencing-content {
    background-color: var(--fc-white);
}

.fencing-content-title {
    font-size: 16px;
    font-weight: normal;
    margin: 0;
}

@media (max-width: 992px) {
    .fencing-content-title {
        font-size: 14px;
    }
}

.step-label {
    font-family: "League Gothic", sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 38px;
    margin-bottom: 3px;

    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */   
}

@media (max-width: 992px) {
    .fc-project-plan .step-label {
        font-size: 24px;
        margin-bottom: 0;
    }
}

.step-label span {
    color: var(--fc-brand-primary);
}

.fencing-divider {
    border-bottom: 1px solid var(--fc-bright-gray);
}

.fencing-form-group {
    margin-bottom: 15px;
}

.ftm-measurement {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* The Modal (background) */
.fencing-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 13;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: var(--fc-a-black-28);
    /* Black w/ opacity */
}

.fc-modal-divider {
    border-bottom: 1px solid var(--fc-bright-gray);
    margin: 0 25px 0;
}

.fencing-modal .fc-modal-frame {
    display: flex;
    place-content: center;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Modal Content/Box */
.fencing-modal-content {
    background-color: var(--fc-white-smoke);
    position: relative;
    width: 90%;
    max-width: 688px;
    border-radius: 20px;
}

.fencing-modal-lg {
    max-width: 1194px;
}

.fencing-modal-md {
    max-width: 720px;
}

#fc-control-modal .fc-row-container {
    margin: auto;
}

.fc-form-check {
    position: relative;
}

.fc-form-check .fc-mb-1 {
    margin-bottom: 16px !important;
}

.fc-form-check label {
    display: block;
    cursor: pointer;
    font-size: 14px;
}

.fc-form-check-inline label {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
}

/* Slat Fence: keep "Width Dimension From" radios on one line */
.js-radio-field[data-slug="width_dimension_from"] {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
}

.js-radio-field[data-slug="width_dimension_from"] .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.js-radio-field[data-slug="width_dimension_from"] .form-check-input {
    margin-top: 0;
    margin-right: 8px;
}

.js-radio-field[data-slug="width_dimension_from"] .form-check-label {
    margin-bottom: 0;
}

.fc-position-relative {
    position: relative;
}

.fc-form-check-img input[type=radio],
.fc-form-check input[type=radio],
.fc-form-check-img input[type=checkbox],
.fc-form-check input[type=checkbox] {
    -ms-transform: scale(1.5);
    /* IE 9 */
    -webkit-transform: scale(1.5);
    /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

.fc-form-check-img {
    position: relative;
    border: 2px solid var(--fc-gray);
    color: var(--fc-black);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.fc-form-check-img label {
    cursor: pointer;
}

.fc-form-check-img input[type=radio],
.fc-form-check-img input[type=checkbox] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
}

.fc-form-check-img .fc-rounded {
    border-radius: 8px 8px 0 0 !important;
    height: 170px;
    object-fit: cover;
    width: 100%;
}

.fc-form-check-img .fc-empty-img {
    height: 170px;
}

.fc-form-check-img.fc-selected,
.fc-form-check-img:hover {
    border: 2px solid var(--fc-princeton-orange) !important;
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
}

.fc-form-check-img p {
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .fc-form-check-img p {
        font-size: 14px;
    }
}

.fc-form-control {
    border: 1px solid var(--fc-gainsboro);
    width: -webkit-fill-available;
    font-size: 16px;
    padding: 15px;
    border-radius: 8px;
}

.fc-form-control--textarea {
    width: 500px;
    height: 120px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fc-form-control--textarea {
        width: 100%;
        height: auto;
    }
}

.fc-form-control-sm {
    font-size: 14px;
    padding: 7px 12px;
}

.fc-form-control.error {
    border-color: var(--fc-alizarin);
}

label.error {
    color: var(--fc-alizarin);
}

label.error {
    background: var(--fc-alizarin);
    z-index: 999;
    color: var(--fc-white);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: -13px;
}

.fc-form-check label.error {
    top: -30px;
    position: absolute;
}

/* Step 2 uses .fc-input-msg — hide jQuery Validate duplicate labels */
[data-section="2"] label.error,
.fencing-section--step2 label.error {
    display: none !important;
}

h2.fc-header-title {
    font-family: "League Gothic", sans-serif !important;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 45px;
    text-transform: uppercase;
    color: var(--fc-black);
    margin-bottom: 7px;
}

@media (max-width: 992px) {
    h2.fc-header-title {
        font-size: 40px;
        line-height: 38px;
    }
}

h2.fc-header-title+p {
    font-size: 18px;
    color: var(--fc-granite-gray);
}

@media (max-width: 992px) {
    h2.fc-header-title+p {
        font-size: 14px;
    }
}

.fc-video-bg {
    background: linear-gradient(var(--fc-a-black-0), var(--fc-a-black-75)), url(../img/webp/video-bg.webp);
    width: 100%;
    max-width: 200px;
    background-size: cover;
    border-radius: 8px;
    color: var(--fc-white);
    padding: 10px 20px;
    cursor: pointer;
}

.fc-video-bg i {
    font-size: 50px;
}

.fc-video-bg h4 {
    font-size: 20px;
}

/* Header tabs */
.fc-header-tab {
    margin-top: 19px;
}

.fc-header-tab__area {
    display: flex;
}

.fc-header-tab a {
    background: var(--fc-white);
    border: 1px solid var(--fc-gray);
    border-right: 0;
    border-bottom: 0;
    padding: 10px 0 5px 0;
    cursor: pointer;
    padding-left: 25px;
    padding-right: 25px;
    text-decoration: none;
    color: var(--fc-nobel);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 24px;
    margin-right: -10px;
    transition: all 0.2s ease;
}

.fc-header-tab a:last-child {
    border-right: 1px solid var(--fc-gray);
}

@media (min-width: 768px) {
    .fc-header-tab a:not(.fc-tab-active):hover {
        background: var(--fc-princeton-orange);
        color: var(--fc-white);
        border-color: var(--fc-princeton-orange);
    }

    .fc-header-tab a:not(.fc-tab-active):hover .fencing-tab-name {
        color: var(--fc-white);
    }
}

a.tab-selected {
    color: var(--fc-black);
}

a.fc-tab-active {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
    border-color: var(--fc-princeton-orange) !important;
    border-radius: 16px 16px 0 0;
    background-color: var(--fc-white);
    color: var(--fc-black);
}

/* Inner title uses .fencing-tab-name (gray by default); keep Project Options black on tab 2 */
.fc-planner-page .fc-header-tab a.fc-tab-active .fencing-tab-name {
    color: var(--fc-black);
}

/* Modal close — orange circle + white X (brand Princeton orange) */
.fencing-modal-close {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border: 2px solid var(--fc-princeton-orange);
    border-radius: 50%;
    background: var(--fc-princeton-orange);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 2px 8px var(--fc-a-orange-22);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    z-index: 6;
}

.fencing-modal-close::before,
.fencing-modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2.5px;
    margin-top: -1.25px;
    margin-left: -9px;
    border-radius: 1px;
    background-color: var(--fc-white);
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.45s ease;
}

.fencing-modal-close::before {
    transform: rotate(45deg);
}

.fencing-modal-close::after {
    transform: rotate(-45deg);
}

.fencing-modal-close:hover {
    background: var(--fc-pumpkin);
    border-color: var(--fc-pumpkin);
    box-shadow: 0 4px 14px var(--fc-a-orange-38);
    transform: scale(1.05);
}

.fencing-modal-close:hover::before {
    transform: rotate(405deg);
}

.fencing-modal-close:hover::after {
    transform: rotate(315deg);
}

.fencing-modal-close:hover::before,
.fencing-modal-close:hover::after {
    background-color: var(--fc-white);
    opacity: 1;
}

.fencing-modal-close:focus {
    outline: none;
}

.fencing-modal-close:focus-visible {
    outline: 2px solid var(--fc-white);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--fc-a-orange-25);
}

/* Bootstrap modal close — orange circle + white X */
.modal .modal-header .btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: -0.35rem -0.35rem -0.35rem auto;
    border-radius: 50%;
    opacity: 1;
    border: 2px solid var(--fc-princeton-orange);
    background-color: var(--fc-princeton-orange);
    background-image: none;
    box-shadow: 0 2px 8px var(--fc-a-orange-20);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.modal .modal-header .btn-close::before,
.modal .modal-header .btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    margin-left: -7px;
    border-radius: 1px;
    background-color: var(--fc-white);
    transition: background-color 0.2s ease, transform 0.45s ease;
}

.modal .modal-header .btn-close::before {
    transform: rotate(45deg);
}

.modal .modal-header .btn-close::after {
    transform: rotate(-45deg);
}

.modal .modal-header .btn-close:hover {
    opacity: 1;
    background-color: var(--fc-pumpkin);
    border-color: var(--fc-pumpkin);
    box-shadow: 0 4px 12px var(--fc-a-orange-35);
}

.modal .modal-header .btn-close:hover::before {
    transform: rotate(405deg);
}

.modal .modal-header .btn-close:hover::after {
    transform: rotate(315deg);
}

.modal .modal-header .btn-close:focus {
    outline: none;
    box-shadow: 0 2px 8px var(--fc-a-orange-20);
}

.modal .modal-header .btn-close:focus-visible {
    outline: 2px solid var(--fc-princeton-orange);
    outline-offset: 3px;
    opacity: 1;
    border-color: var(--fc-princeton-orange);
}

.toast-header .btn-close {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    margin-left: 0.35rem;
    border-radius: 50%;
    opacity: 1;
    border: 2px solid var(--fc-a-white-45);
    background-color: var(--fc-a-black-35);
    box-shadow: 0 2px 6px var(--fc-a-black-35);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    background-size: 0.9em;
}

.toast-header .btn-close:hover {
    opacity: 1;
    background-color: var(--fc-a-black-55);
    border-color: var(--fc-a-white-85);
}

.toast-header .btn-close:focus-visible {
    outline: 2px solid var(--fc-white);
    outline-offset: 2px;
}

.fencing-modal-title {
    font-weight: 400;
    padding: 0px;
    font-size: 30px;
    text-transform: uppercase;
}

@media (max-width: 992px) {
    .fencing-modal-title {
        font-size: 30px;
    }
}

.fencing-modal-title h4 {
    text-transform: capitalize;
    text-align: center;
    line-height: 44px;
}

#submit-modal .fencing-modal-title h4 {
    font-family: "League Gothic", sans-serif !important;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

@media (max-width: 992px) {
    #submit-modal .fencing-modal-title h4 {
        text-align: left;
        font-size: 24px;
    }
}

.fencing-modal-body {
    padding: 0 40px 0;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
}

.fencing-modal-body .body-title {
    margin-bottom: 5px;
    font-size: 1.2em;
}

.fc-dropdown_option .body-title {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-bottom: 16px;
}

.fc-dropdown_option select {
    border: 1px solid var(--fc-spanish-gray);
    font-size: 14px;
    padding: 10px 10px 10px 24px;
    width: 100%;
    border-radius: 5px;
    /* Arrow */
    appearance: none;
    background-image: url(../img/webp/arrow-s.webp);
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 13px auto;
}

.fencing-modal-footer {
    border-top: 1px solid var(--fc-gray);
    padding: 20px;
}

.fencing-modal-notes {
    font-family: "Inter", sans-serif;
    padding: 20px 20px 0;
}

.fencing-modal-head {
    position: relative;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .fencing-modal-head {
        margin-bottom: 15px;
    }
}

.fencing-modal-head h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: 400;
}

.fmh-gradient {
    background: var(--fc-allports);
    background: linear-gradient(90deg, var(--fc-allports) 30%, var(--fc-deep-blue) 100%);
    color: var(--fc-white);
}

/* Form Input range */
.fencing-input-range {
    display: flex;
    justify-content: space-between;
}

.fencing-input-range input {
    width: 100%;
    margin: 0 20px;
}

.fencing-input-range .fi-btn {
    background: var(--fc-pattens-blue);
    border: 0;
    font-size: 2em;
    font-weight: 400;
    padding: 6px 15px;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.fencing-input-range .fi-btn:hover {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
}

.fir-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 20px;
}

.fir-info {
    font-size: 14px;
    margin-bottom: 5px;
}

/* Panel Items */
.fencing-panel-items {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

/* Slat Fence: min-height from JS so tall posts are not clipped (flex-end keeps bottom aligned) */
.fencing-panel-items.fc-slat-scale {
    height: auto;
    min-height: var(--fc-slat-display-height-px, 240px);
    padding-top: var(--fc-slat-display-pad-top-px, 0px);
    padding-bottom: var(--fc-slat-display-pad-bottom-px, 0px);
    align-items: flex-end;
    box-sizing: border-box;
    overflow: visible;
}

/* Gate taller than fence panels: grow from the top (posts extend to gate height) */
.fencing-panel-items.fc-slat-scale.fc-slat-align-top {
    align-items: flex-start;
}

/* Slat Step 3: gate margin-top (JS) drops shorter gate to fence panel baseline */
.fencing-panel-items.fc-slat-scale .fencing-panel-container[data-type="slat"],
.fencing-panel-items.fc-slat-scale .fencing-panel-container[data-type="slat_fence_infill"] {
    align-items: flex-start;
}

.fencing-panel-item {
    background: var(--fc-pattens-blue);
    background: linear-gradient(180deg,var(--fc-gradient-sky-top) 0%, var(--fc-gradient-sky-mid) 50%, var(--fc-gradient-sky-bottom) 100%);
    height: 120px;
    width: 150px;
    border: 2px solid var(--fc-alto);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fencing-panel-items .fencing-panel-container {
    margin: 0 auto;
}

.fc-project-plan .fencing-panel-items {
    height: 240px;
    align-items: flex-end;
}

/* Project plan: slat dynamic height (wrapper is .fc-result, not .fencing-panel-items) */
.fc-project-plan .fencing-panel-items.fc-slat-scale {
    height: auto;
    min-height: var(--fc-slat-display-height-px, 240px);
    padding-bottom: var(--fc-slat-display-pad-bottom-px, 0px);
    align-items: flex-end;
    display: flex;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-result.fc-slat-scale {
    height: auto;
    min-height: var(--fc-slat-display-height-px, 240px);
    align-items: flex-end;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
}

.fc-project-plan .fencing-panel-items.fc-slat-scale.fc-slat-align-top,
.fc-project-plan-page .fc-result.fc-slat-scale.fc-slat-align-top {
    align-items: flex-start;
}

/*
 * Slat / Slat Infill on project plan: hscroll uses overflow-x:auto which forces overflow-y to clip.
 * JS sets --fc-slat-hscroll-min-height-px; min-height prevents vertical cutoff in the section.
 */
.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll:has(.fc-result.fc-slat-scale) {
    min-height: var(--fc-slat-hscroll-min-height-px, 0px);
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll .dl-row:has(.fc-result.fc-slat-scale),
.fc-project-plan-page #fc-fence-list .plan-item:has(.fc-result.fc-slat-scale),
.fc-project-plan-page #fc-fence-list .fc-project-plan-section:has(.fc-result.fc-slat-scale) {
    overflow: visible;
}

.fc-project-plan .fencing-btn-modal {
    pointer-events: none;
}

.fc-center-point {
    position: absolute;
    width: 100%;
    border-top: 3px solid var(--fc-dim-gray);
    bottom: -82px;
    height: 0;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 5px;
    line-height: 14px;
}

.fc-panel-unit {
    display: block;
}
.fc-hinges {
    position: absolute;
    display: flex;
    flex-direction: column;
}
.fc-hinges .fa-hinge-type {
    font-size: 7px;
    margin: 1px;
    background: var(--fc-alto);
    border: 1px solid var(--fc-cod-gray);
    border-radius: 2px;
    width: 5px;
    height: 5px;
}
.hinge-type-opt-1 .fc-hinges .fa-hinge-type {
    background: var(--fc-white);
}

.hinge-type-opt-1 .fa-hinge-type {
    border-radius: 100%;
}
.hinge-type-opt-2 .fa-hinge-type {
    height: 10px;
    width: 7px;
}
.hinge-type-opt-2 .fa-hinge-type:last-child {
    display: none;
}
.hinge-type-opt-1 .fc-hinges-left .fc-hinges {
    left: 2px;       
}
.hinge-type-opt-1 .fc-hinges-right .fc-hinges {
    right: 2px;       
}
.hinge-type-opt-2 .fc-hinges-left .fc-hinges {
    left: -4px;       
}
.hinge-type-opt-2 .fc-hinges-right .fc-hinges {
    right: -4px;       
}

.fc-hinges-top {
    top: 10px;
}
.fc-hinges-left .fc-hinges-center {
    align-items: flex-end;
    top: 45%;
    right: -5px;
}
.fc-hinges-right .fc-hinges-center {
    left: -5px;
    top: 45%;
}
.fc-hinges-center i {
    font-size: 10px;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--fc-boulder);
    border: 1px solid var(--fc-cod-gray);
}

.fc-hinges-bot {
    bottom: 10px; 
}

[data-group="a"] .fc-center-point {
    left: 0;
}

#fc-planning-form .fc-center-point {
    display: none;
}

.fc-center-point .fc-start-c-p,
.fc-center-point .fc-end-c-p {
    display: none;    
}


.first-item .fc-center-point .fc-start-c-p,
.last-item .fc-center-point .fc-end-c-p {
    display: block;
}

.fc-center-point:before {
    display: inline-block;
    content: "";
    width: 11px;
    left: -11px;
    bottom: 1px;
    border-top: 10px solid;
    position: absolute;
    z-index: 9;
}

.fc-center-point.fc-last-c-p:after {
    display: inline-block;
    content: "";
    width: 11px;
    right: -11px;
    bottom: 1px;
    border-top: 10px solid;
    position: absolute;
}

.fencing-panel-gate .fc-center-point {
    width: calc(100% + 10px);
}

.raked-panel-container .fc-center-point {
    bottom: -78px;
}

[data-group="a"] .raked-panel-container .fc-center-point {
    bottom: -76px;
}

.fc-overall {
    margin-left: auto;
    position: initial;
    text-align: center;
    bottom: 65px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

#fc-fence-list .plan-item {
    margin-bottom: 16px;
}

/* Project plans — horizontal scroll on inner strip only; outer height follows content (no inner vertical scroll).
   overflow-x:auto + overflow-y:visible on one element forces overflow-y:auto (extra vertical scrollbar).
   Center/spacing lines use position:absolute below panels (~82px); pad .fc-result so they stay inside the clip rect. */
.fc-project-plan-page #fc-fence-list {
    min-width: 0;
}

.fc-project-plan-page #fc-fence-list .plan-item {
    min-width: 0;
    overflow: visible;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll {
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

@supports not (overflow: clip) {
    .fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll {
        overflow-y: hidden;
    }
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll .dl-row {
    min-width: 100%;
    width: max-content;
    box-sizing: border-box;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll .fc-result {
    width: max-content;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: clamp(72px, 8vw, 96px);
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll .fc-result.fc-slat-scale {
    padding-bottom: var(--fc-slat-display-pad-bottom-px, 88px);
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-hscroll .fencing-panel-container {
    width: max-content;
    max-width: none;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head__overall .fc-overall {
    margin-left: 0;
    margin-right: 0;
    bottom: auto;
    display: inline-block;
    max-width: 100%;
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .fc-project-plan-page #fc-fence-list .fc-project-plan-section-head__overall .fc-overall {
        font-size: 11px;
    }
}

/* Allow sticky children — default .fencing-section uses overflow:hidden which clips position:sticky */
.fc-project-plan-page #project-plans-section.fencing-section {
    overflow: visible;
}

.fc-project-plan-page #update_cart-section.fencing-section {
    overflow: visible;
}

.fc-project-plan-page #update_cart-list .fc-card.fc-table-items,
.fc-project-plan-page #update_cart-list .fc-table-rounded-border {
    overflow: visible;
}

/* Item list & cart — sticky table header on scroll (project-plan) */
.fc-project-plan-page #update_cart-list .table-cart thead.table-dark th {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 7;
    background-color: #212529;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}

/*
 * Project plans section toolbar — full width inside bordered card (offsets parent .p-3),
 * consistent padding; sticky shell wraps inner Bootstrap row (p2.js).
 */
.fc-project-plan-page #fc-fence-list .border.p-3 > .fc-project-plan-section-sticky-sentinel {
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    width: auto;
    max-width: none;
    pointer-events: none;
    box-sizing: border-box;
}

/* Project plans — sticky section toolbar (SECTION label / Overall / Edit) while scrolling each diagram block */
.fc-project-plan-page #fc-fence-list .border.p-3 > .fc-project-plan-section-head {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    padding-top: 10px;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    background-color: var(--fc-white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    transition:
        padding-top 0.2s ease,
        padding-bottom 0.2s ease,
        box-shadow 0.2s ease;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head > .row {
    min-width: 0;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-label {
    line-height: 1.2;
    color: #000;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-label__word {
    color: #000;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-label__num {
    color: #c41e3a;
    font-weight: 700;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-style {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    max-width: min(240px, 42vw);
}

.fc-project-plan-page #project-plans-section .fc-card,
.fc-project-plan-page #fc-fence-list .fc-project-plan-section,
.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head,
.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head > .row,
.fc-project-plan-page #fc-fence-list .fc-project-plan-section-actions,
.fc-project-plan-page #fc-fence-list .fc-project-plan-section-actions .dropdown {
    overflow: visible;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-actions .dropdown-menu {
    min-width: 11rem;
    font-size: 13px;
    z-index: 1060;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-actions .dropdown-menu.show {
    display: block;
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-actions .dropdown-item {
    text-transform: none;
    font-weight: 600;
}

.fc-project-plan-section.fc-project-plan-capturing .fc-project-plan-section-actions {
    display: none !important;
}

/* Project plan PNG/PDF — expand section for html2canvas (sticky head + h-scroll clip otherwise) */
.fc-project-plan-section.fc-project-plan-capturing {
    overflow: visible !important;
    background: #fff;
    box-sizing: border-box;
}

.fc-project-plan-section.fc-project-plan-capturing .fc-project-plan-section-head {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}

.fc-project-plan-section.fc-project-plan-capturing .plan-item,
.fc-project-plan-section.fc-project-plan-capturing .fc-project-plan-hscroll {
    overflow: visible !important;
}

.fc-project-plan-section.fc-project-plan-capturing .fc-result,
.fc-project-plan-section.fc-project-plan-capturing .dl-row,
.fc-project-plan-section.fc-project-plan-capturing .fencing-panel-container {
    max-width: none !important;
}

.fc-project-plan-section.fc-project-plan-capturing .fc-project-plan-skeleton {
    display: none !important;
}

/* Project plan PDF — item cart list capture (last A4 page) */
.fc-project-plan-cart-capturing {
    overflow: visible !important;
    background: #fff;
    box-sizing: border-box;
}

.fc-project-plan-cart-capturing .fc-cart-toolbar,
.fc-project-plan-cart-capturing .js-fc-cart-toolbar,
.fc-project-plan-cart-capturing .fc-view-total-cost-bar {
    display: none !important;
}

.fc-project-plan-cart-capturing .fc-table-rounded-border,
.fc-project-plan-cart-capturing table,
.fc-project-plan-cart-capturing table tr,
.fc-project-plan-cart-capturing table th,
.fc-project-plan-cart-capturing table td {
    border: 0 !important;
}

.fc-project-plan-cart-capturing .table-cart thead.table-dark th {
    background: #fff !important;
    color: #212529 !important;
}

.fc-project-plan-cart-capturing tr {
    background-color: #fff !important;
}

@media (max-width: 575.98px) {
    .fc-project-plan-page #fc-fence-list .fc-project-plan-section-style {
        font-size: 10px;
        margin-top: 4px;
        max-width: 36vw;
    }
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head.fc-project-plan-section-head--stuck {
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.08),
        0 6px 14px rgba(0, 0, 0, 0.07);
}

.fc-project-plan-page #fc-fence-list .fc-project-plan-section-head.fc-project-plan-section-head--dropdown-open {
    z-index: 1065;
}

@media (max-width: 575.98px) {
    .fc-project-plan-page #fc-fence-list .border.p-3 > .fc-project-plan-section-head {
        padding-bottom: 0.65rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
        margin-bottom: 0.875rem;
    }

    .fc-project-plan-page #fc-fence-list .fc-project-plan-section-head.fc-project-plan-section-head--stuck {
        padding-top: 0.65rem;
        padding-bottom: 0.75rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}

/*
#fc-fence-list .fencing-panel-items {
    pointer-events: none;
}*/
.fc-div-c-p {
    position: absolute;
    left: -7px;
    top: -9px;
    content: "";
    display: inline-block;
    width: 0;
    height: 16px;
    border-left: 3px solid;
}

.fc-div-c-p:nth-child(2) {
    left: auto;
    right: -7px;
}

.fc-start-c-p {
    left: -13px;
    position: absolute;
    top: 10px;
}

.fc-end-c-p {
    right: -13px;
    position: absolute;
    top: 10px;
}

/* Hide offcut tiles in the diagram when user chooses Off (DOM kept for cart). */
.fencing-container.fc-offcut-display-off .fencing-offcut {
    display: none !important;
}

.fencing-offcut {
    min-width: 60px;
    display: flex;
    justify-content: center;
}

.offcut-body {
    padding: 0 5px;
    background: var(--fc-lavender-blush);
    height: 135px;
    border: 1px solid var(--fc-brand-primary);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.offcut-body>div {
    padding: 3px 2px;
    color: var(--fc-brand-primary);
    border: 1px solid;
    background: var(--fc-pippin);
    border-radius: 5px;
    font-size: 10px;
    line-height: 12px;
    min-width: 60px;
    background: var(--fc-white);
}
.gate-offcut .offcut-body>div {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
    border-color: var(--fc-princeton-orange);
}

.infill-hidden-panels .offcut-body>div {
    min-width: 80px;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 14px;
}

.fencing-panel-gate {
    max-width: 95px;
    margin: 0 3px;
}

[data-group="a"] .fencing-panel-gate {
    margin: 0;
}


.fencing-panel-gate .fencing-panel-item-size {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
    border: 1px solid var(--fc-princeton-orange);
}

.fencing-panel-gate .double-gate {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 1;
    border-right: 1px solid var(--fc-white);
}

.fc-gate-spacing {
    position: absolute;
    top: -22px;
    font-size: 12px;
    color: var(--fc-black);
}

.fc-gate-left-spacing {
    left: 0;
}

.fc-gate-right-spacing {
    right: 0;
}


.near-gate .fs-clamp {
    visibility: hidden;
}
/*.near-gate span:not(.fs-clamp) {
    bottom: 20px !important;
}
*/
/*.short-panel-item {
    min-width: 60px;
}
*/
/* Project Plan */
.fc-card-header {
    background: var(--fc-cultured);
    padding: 10px 15px;
    border: 1px solid var(--fc-gainsboro);
    border-bottom: 0;
    font-size: 16px;
    font-weight: 400;
}

.fc-card-body {
    padding: 10px 15px;
    border: 1px solid var(--fc-gainsboro);
}

.fc-card-body .fc-p-1 {
    padding: 32px 24px !important;
}

.fc-bg-dark {
    background: var(--fc-dark-charcoal);
    color: var(--fc-white);
    border-radius: 10px 10px 0 0;
    border-color: var(--fc-dark-charcoal);
}

.fc-border {
    border-radius: 10px;
}

.fc-border-top {
    border-radius: 10px 10px 0 0;
}

.fc-border-bottom {
    border-radius: 0 0 10px 10px;
}

.fc-p-0 {
    padding: 0;
}

.fc-border-0 {
    border: 0;
}

.w-100 {
    width: 100%;
}

/* Page Loader */
.fc-loader-overlay {
    background: var(--fc-a-black-98);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

.fc-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.fc-loader-gif {
    background: url(../img/loaders/1.gif) no-repeat center;
    width: 80px;
    height: 80px;
    background-size: 100%;
}

.fc-loader-panel--download-plans {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    max-width: 24rem;
    padding: 0 1.5rem;
}

.fc-loader-overlay--download-plans .fc-loader-panel--default {
    display: none;
}

.fc-loader-overlay--download-plans .fc-loader-panel--download-plans {
    display: flex;
}

.fc-loader-download-message {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Project plan page — skeleton while diagram panels load */
.fc-project-plan-page .fc-project-plan-skeleton {
    padding: 12px 8px 16px;
    min-height: 132px;
    box-sizing: border-box;
}

.fc-project-plan-page .fc-project-plan-skeleton__run {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 72px;
    padding: 0 4px;
}

.fc-project-plan-page .fc-project-plan-skeleton__post {
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 56px;
    border-radius: 2px;
    background: var(--fc-wild-sand);
    position: relative;
    overflow: hidden;
}

.fc-project-plan-page .fc-project-plan-skeleton__post::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    will-change: transform;
}

.fc-project-plan-page .fc-project-plan-skeleton__panel {
    flex: 1;
    min-width: 24px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fc-project-plan-page .fc-project-plan-skeleton__panel-fill {
    height: 52px;
    border-radius: 4px;
    background: var(--fc-wild-sand);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fc-alto-4);
}

.fc-project-plan-page .fc-project-plan-skeleton__panel-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    animation-delay: 0.12s;
    will-change: transform;
}

.fc-project-plan-page .fc-project-plan-skeleton__meta {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.fc-project-plan-page .fc-project-plan-skeleton__line {
    display: block;
    height: 10px;
    width: 55%;
    max-width: 280px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--fc-alabaster) 0%,
        #e2e2e2 50%,
        var(--fc-alabaster) 100%
    );
    background-size: 200% 100%;
    animation: fc-fencing-skeleton-shimmer 1.05s ease-in-out infinite;
}

.fc-project-plan-page .fc-project-plan-skeleton__line--narrow {
    width: 38%;
    max-width: 180px;
    animation-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .fc-project-plan-page .fc-project-plan-skeleton__post::after,
    .fc-project-plan-page .fc-project-plan-skeleton__panel-fill::after {
        animation: none;
    }

    .fc-project-plan-page .fc-project-plan-skeleton__line {
        animation: none;
    }
}

/* Planner Step 3 — skeleton while fence diagram loads */
.fc-planner-page .fencing-display-result.fc-planner-step3-result--loading .fc-project-plan-hscroll {
    visibility: hidden;
    pointer-events: none;
}

.fc-planner-page .fc-planner-step3-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 8px 16px;
    min-height: 200px;
    box-sizing: border-box;
    background: var(--fc-white);
}

.fc-planner-page .fc-planner-step3-skeleton.fc-d-none {
    display: none !important;
}

.fc-planner-page .fc-planner-step3-skeleton__run {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 72px;
    padding: 0 4px;
}

.fc-planner-page .fc-planner-step3-skeleton__post {
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 56px;
    border-radius: 2px;
    background: var(--fc-wild-sand);
    position: relative;
    overflow: hidden;
}

.fc-planner-page .fc-planner-step3-skeleton__post::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    will-change: transform;
}

.fc-planner-page .fc-planner-step3-skeleton__panel {
    flex: 1;
    min-width: 24px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fc-planner-page .fc-planner-step3-skeleton__panel-fill {
    height: 52px;
    border-radius: 4px;
    background: var(--fc-wild-sand);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fc-alto-4);
}

.fc-planner-page .fc-planner-step3-skeleton__panel-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    animation-delay: 0.12s;
    will-change: transform;
}

.fc-planner-page .fc-planner-step3-skeleton__meta {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.fc-planner-page .fc-planner-step3-skeleton__line {
    display: block;
    height: 10px;
    width: 55%;
    max-width: 280px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--fc-alabaster) 0%,
        #e2e2e2 50%,
        var(--fc-alabaster) 100%
    );
    background-size: 200% 100%;
    animation: fc-fencing-skeleton-shimmer 1.05s ease-in-out infinite;
}

.fc-planner-page .fc-planner-step3-skeleton__line--narrow {
    width: 38%;
    max-width: 180px;
    animation-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .fc-planner-page .fc-planner-step3-skeleton__post::after,
    .fc-planner-page .fc-planner-step3-skeleton__panel-fill::after {
        animation: none;
    }

    .fc-planner-page .fc-planner-step3-skeleton__line {
        animation: none;
    }
}

.fc-loader ul li {
    font-family: "League Gothic", sans-serif !important;
    list-style: none;
    color: var(--fc-mine-shaft);
    letter-spacing: 2px;
    font-size: 2em;
    text-transform: uppercase;
}

.fc-text-success {
    color: var(--fc-princeton-orange) !important;
}

.fc-loader ul li.fc-text-success:nth-of-type(2) {
    color: var(--fc-gorse) !important;
}

.fc-loader ul li.fc-text-success:nth-of-type(3) {
    color: var(--fc-vivid-tangerine) !important;
}

.fc-loader ul li.fc-text-success:nth-of-type(4) {
    color: var(--fc-malibu) !important;
}

/* Table */
.fc-table {
    border-collapse: collapse;
    width: 100%;
}

.fc-table th {
    padding: 10px 10px;
    text-align: left;
    font-size: 14px;
}

/* Project details customer table: label column (not single-cell rows e.g. notes) */
.fc-table.fc-table-customer tbody tr td:first-child:not(:last-child) {
    width: 100px;
    max-width: 100px;
    box-sizing: border-box;
    vertical-align: top;
    font-weight: 600;
}

.fc-table-striped tr:nth-child(even) {
    background-color: var(--fc-gallery);
}

thead.fc-border th:first-child {
    border-top-left-radius: 10px;
}

thead.fc-border th:last-child {
    border-top-right-radius: 10px;
}

.fc-table-bordered td,
.fc-table-bordered th {
    border: 1px solid var(--fc-gainsboro);
    padding: 10px 15px;
}

.fc-table-rounded-border {
    border: 1px solid var(--fc-gainsboro);
}

.fc-table-rounded-border th {
    height: 40px;
}

.fc-table-rounded-border table {
    margin: 0;
}

.fc-table-rounded-border table td {
    border: 1px solid var(--fc-gainsboro);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fc-table-rounded-border table td {
        padding: 10px;
    }
}

.fc-rounded-top-none {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.fc-table-rounded-border tr:first-child th,
.fc-table-rounded-border tr:first-child td {
    border-top: 0;
}

.fc-table-rounded-border th:first-child,
.fc-table-rounded-border td:first-child {
    border-left: 0;
    border-right: 0;
}

.fc-table-rounded-border th:last-child,
.fc-table-rounded-border td:last-child {
    border-right: 0;
}

.fc-table-rounded-border tr:last-child td {
    border-bottom: 0;
}

.fc-table-rounded-border td:last-child {
    border-left: 0;
}

.fc-table-rounded-border td:last-child {
    border-right: 0;
}

.table-striped>tbody>tr>* {
    border: 0;
}
.table-cart .fencing-qty-btn {
    height: 30px;
}
.table-cart .fencing-mb-input {
    max-width: 130px;
}

/* Forms fields */
.fc-table-items .fc-form-control {
    display: none;
    width: 100%;
    max-width: 100px;
    text-align: right;
    font-size: 16px;
    border-radius: 0;
}

@media (max-width: 992px) {
    .fc-table-items .fc-form-control {
        width: 80px;
        font-size: 14px;
    }
}

.fc-items-action a {
    font-size: 14px;
    color: var(--fc-black);
    border: 1px solid;
    border-radius: 8px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.fc-items-action a:hover {
    background: var(--fc-black);
    color: var(--fc-white);
}

/* tabs */
.fc-tabs {
    border-bottom: 2px solid var(--fc-gainsboro);
    display: inline-block;
}

.fc-tabs a {
    text-decoration: none;
    color: var(--fc-bright-gray);;
    display: inline-block;
    padding: 5px 15px;
    font-weight: 600;
    position: relative;
}

.fc-tabs .fc-active {
    color: var(--fc-black);
}

.fc-tabs .fc-active:after {
    content: "";
    display: inline-block;
    border-bottom: 2px solid var(--fc-black);
    width: 100%;
    position: absolute;
    bottom: -2px;
    left: 0;
}

/* Product list & cart */
.fc-editing-icon {
    background: var(--fc-fruit-salad);
    color: var(--fc-white);
    position: absolute;
    top: -15px;
    right: 10px;
    font-size: 16px;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    line-height: 30px !important;
    text-align: center;
}

/* Shared press feedback for buttons and button-like controls */
.fc-pressable,
.btn:not(.btn-close):not(:disabled):not(.disabled),
.btn-fc:not(.disabled):not([disabled]),
.fencing-qty-btn:not(.disabled),
.fencing-qty-plus:not(.disabled),
.fencing-qty-minus:not(.disabled),
.fc-move-post:not(.disabled),
.fc-zoom-reset:not(:disabled):not(.disabled),
.btn-fc-calculate:not(:disabled):not(.disabled),
.fc-planner-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *),
.fc-project-plan-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *),
.fencing-modal button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *),
.fc-planner-page a.btn:not(.disabled),
.fc-project-plan-page a.btn:not(.disabled),
.fencing-modal a.btn:not(.disabled) {
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.fc-pressable:not(:disabled):not(.disabled):active,
.fc-pressable.is-pressed:not(:disabled):not(.disabled),
.btn:not(.btn-close):not(:disabled):not(.disabled):active,
.btn:not(.btn-close):not(:disabled):not(.disabled).is-pressed,
.btn-fc:not(.disabled):not([disabled]):active,
.btn-fc:not(.disabled):not([disabled]).is-pressed,
.fencing-qty-btn:not(.disabled):active,
.fencing-qty-btn:not(.disabled).is-pressed,
.fencing-qty-plus:not(.disabled):active,
.fencing-qty-plus:not(.disabled).is-pressed,
.fencing-qty-minus:not(.disabled):active,
.fencing-qty-minus:not(.disabled).is-pressed,
.fc-move-post:not(.disabled):active,
.fc-move-post:not(.disabled).is-pressed,
.fc-zoom-reset:not(:disabled):not(.disabled):active,
.fc-zoom-reset:not(:disabled):not(.disabled).is-pressed,
.btn-fc-calculate:not(:disabled):not(.disabled):active,
.btn-fc-calculate:not(:disabled):not(.disabled).is-pressed,
.fc-planner-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *):active,
.fc-planner-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *).is-pressed,
.fc-project-plan-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *):active,
.fc-project-plan-page button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *).is-pressed,
.fencing-modal button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *):active,
.fencing-modal button:not(:disabled):not(.disabled):not(.btn-close):not(.slick-prev):not(.slick-next):not(.fencing-styles-arrow):not(.slick-dots *).is-pressed,
.fc-planner-page a.btn:not(.disabled):active,
.fc-planner-page a.btn:not(.disabled).is-pressed,
.fc-project-plan-page a.btn:not(.disabled):active,
.fc-project-plan-page a.btn:not(.disabled).is-pressed,
.fencing-modal a.btn:not(.disabled):active,
.fencing-modal a.btn:not(.disabled).is-pressed {
    transform: scale(0.96);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.14);
    filter: brightness(0.96);
}

.fc-move-post {
    border: 2px solid var(--fc-gray);
    cursor: pointer;
    border-radius: 5px;
}

.fc-move-post:hover {
    border: 2px solid var(--fc-princeton-orange);
}

.fc-move-post:not(.disabled):active,
.fc-move-post.is-pressed:not(.disabled) {
    border-color: var(--fc-princeton-orange);
    background-color: rgba(237, 119, 57, 0.1);
}

[type=text_option] .fc-select {
    text-align: left;
    padding-left: 40px;
}

[type=text_option] .fc-select:after {
    left: 10px;
}

/* Controls */
.fc-control-move .fc-move-post p i {
    font-size: 30px;
}
@media (max-width: 767px) {
    .fc-control-move .fc-move-post p i {
        font-size: 20px;
    }
}


.fc-control-move .fc-move-post p {
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.fc-move-post[data-move=delete] p span {
    color: var(--fc-brand-primary);
}

.fencing-btn-modal {
    cursor: pointer;
}

/* Modal classes */
.fc-selection-details {
    margin: 0 5px 25px;
}

.fc-selection-details label {
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

/* Progress tabs */
.fc-progress-tabs {
    display: flex;
    width: 150px;
    margin-right: 10px;
}

.fc-progress-tabs>div:after {
    content: "";
    background: var(--fc-princeton-orange);
    width: 0;
    display: block;
    height: 100%;
    transition: all 2s ease;
    opacity: 0;
}

.fc-progress-tabs>div.pt-complete:after {
    width: 100%;
    opacity: 1;
}

.fc-progress-value {
    background: var(--fc-platinum);
    border-radius: 4px;
    height: 12px;
    width: 100%;
    display: inline-block;
    margin: 0 2px;
    overflow: hidden;
}

.fc-progress-container {
    font-family: "Inter", sans-serif;
    display: flex;
    align-items: center;
    font-size: 14px;
}

@media (max-width: 767px) {
    .fc-progress-container {
        justify-content: center;
        margin-bottom: 20px;
        float: none !important;
    }
}

.fc-progress-container span {
    width: 25px;
    text-align: right;
}

.fc-form-plan-action {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

@media (max-width: 767px) {
    .fc-form-plan-action {
        display: flex;
        flex-direction: column-reverse;
    }
}

.fc-form-plan-action button {
    width: 100%;
    margin: 0;
    letter-spacing: 1px;
    height: 52px;
}

.fc-form-plan-action button:not(.fc-btn-next) {
    margin-left: 16px;
}

@media (max-width: 767px) {
    .fc-form-plan-action button:not(.fc-btn-next) {
        margin-top: 16px;
        margin-left: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 992px) {
    .fc-form-plan-action button:last-child {
        margin-bottom: 0;
    }
}

#place_order-section .form-tab-4 .fc-form-plan-action button:not(.fc-btn-next) {
    margin-left: 0;
}

@media (max-width: 768px) {
    #place_order-section #submit-modal.fencing-modal--v2 .fencing-modal-content {
        padding-bottom: 56px;
    }
}

.fc-form-plan h2 {
    font-weight: 400;
    font-size: 40px;
}

@media (max-width: 992px) {
    .fc-form-plan h2 {
        font-size: 26px;
        text-align: center;
    }
}

.fc-form-plan.form-tab-4 h2 {
    margin-bottom: 10px !important;
}

.fc-form-plan .fc-form-label {
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
}

.fc-hide {
    display: none;
}

@media only screen and (max-width: 1200px) {

    /* Panel Items */
    /* (removed empty ruleset to satisfy linter) */

    .fencing-panel-item {
        width: 100%;
    }
}

@media only screen and (max-width: 992px) {
    .fc-col-half {
        width: 100%;
    }

    .fc-project-plan .fc-header-tab a {
        font-size: 20px;
    }

    .fc-project-plan .fencing-section {
        margin-bottom: 20px;
    }


}

@media only screen and (max-width: 768px) {
    .fc-show-md {
        display: block;
    }

    .fencing-tab-name {
        font-size: 15px;
    }

    .ftm-measurement,
    .fencing-tab-add {
        font-size: 12px;
    }

    .w-100-sm {
        width: -webkit-fill-available;
    }

    .fc-project-plan .fc-header-tab a {
        font-size: 18px;
        padding: 10px;
    }

    .fc-project-plan .btn-fc i {
        width: 14px;
        height: 14px;
    }

    .fc-project-plan .btn-fc {
        font-size: 12px;
        text-align: center;
        margin: 0;
    }

    .btn-fc-calculate {
        font-size: 12px;
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 600px) {
    .fc-col-sm-6 {
        width: 50%;
    }

    .btn-fc {
        padding: 10px;
    }

    .fc-show-sm {
        display: block;
    }

    .fc-project-plan .fc-card-header,
    .fc-project-plan table,
    .fc-project-plan p,
    #fc-fence-list {
        font-size: 14px;
    }
}

.fc-p-0 [class*=fc-col-] {
    padding: 0;
}

.fc-row-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fc-row-flex-fg-s {
    grid-gap: 5px;
}

.fc-row-f-s-b {
    justify-content: space-between;
}

.fc-row {
    display: inline-block;
    width: 100%;
}

[class*=fc-col-] {
    float: left;
    padding: 10px;
}

.fc-col-4 {
    width: calc(33.33% - 20px);
}

.fc-col-3 {
    width: calc(25% - 20px);
}

.fc-col-6 {
    width: 50%;
}

.fc-col-half {
    width: calc(50% - 20px);
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fc-lg-col-full {
        width: 100%;
    }
}

.w-100 {
    width: 100%;
}

.fc-text-center {
    text-align: center;
}

.fc-row-flex {
    display: flex;
    align-items: center;
}

.fc-col-flex {
    width: 100%;
}

.fc-text-right {
    text-align: right;
}

.fc-text-center {
    text-align: center;
}

.fc-text-uppercase {
    text-transform: uppercase;
}

.fc-text-gray {
    color: var(--fc-granite-gray);
}

.fc-text-red,
.fc-text-brand-primary {
    color: var(--fc-brand-primary);
}

.fc-text-success {
    color: var(--fc-fruit-salad);
}

.fc-float-r {
    float: right;
}

.fc-flex-end {
    display: flex;
    justify-content: flex-end;
}

.fc-p-1 {
    padding: 10px !important;
}

.fc-p-2 {
    padding: 20px !important;
}

.fc-p-3 {
    padding: 30px !important;
}

.fc-p-4 {
    padding: 40px !important;
}

.fc-p-5 {
    padding: 50px !important;
}

.fc-pl-0 {
    padding-left: 0 !important;
}

.fc-pb-0 {
    padding-bottom: 0 !important;
}

.fc-px-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.fc-px-2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.fc-px-3 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.fc-px-4 {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.fc-px-5 {
    padding-left: 50px !important;
    padding-right: 50px !important;
}

.fc-mb-0 {
    margin-bottom: 0 !important;
}

.fc-mb-1 {
    margin-bottom: 10px !important;
}

.fc-mb-2 {
    margin-bottom: 20px !important;
}

.fc-mb-3 {
    margin-bottom: 30px !important;
}

.fc-mb-4 {
    margin-bottom: 40px !important;
}

.fc-mb-5 {
    margin-bottom: 50px !important;
}

.fc-my-1 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.fc-my-2 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.fc-my-3 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.fc-my-4 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.fc-my-5 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.fc-mr-1 {
    margin-right: 10px !important;
}

.fc-mr-2 {
    margin-right: 20px !important;
}

.fc-mr-3 {
    margin-right: 30px !important;
}

.fc-mr-4 {
    margin-right: 40px !important;
}

.fc-mr-5 {
    margin-right: 50px !important;
}

.fc-ml-1 {
    margin-left: 10px !important;
}

.fc-ml-2 {
    margin-left: 20px !important;
}

.fc-ml-3 {
    margin-left: 30px !important;
}

.fc-ml-4 {
    margin-left: 40px !important;
}

.fc-ml-5 {
    margin-left: 50px !important;
}

.fc-w-b {
    font-weight: 400;
}

.fc-w-700 {
    font-weight: 700;
}

.fc-text-danger {
    color: var(--fc-brand-primary);
}

.fc-d-none {
    display: none;
}
.d-hidden {
    height: 0;
    position: absolute;
    visibility: hidden;
}

/** Font Sizes **/
/** Borders **/
.br-tl-0 {
    border-top-left-radius: 0 !important;
}

@media (max-width: 992px) {
    .br-tr-md-0 {
        border-top-right-radius: 0 !important;
    }
}

/** Tables **/
.valign-top {
    vertical-align: top;
}

.fencing-container {
    max-width: 1200px;
    margin: 0 auto;
    color: var(--fc-black);
}

.fencing-container__header .fc-col-half {
    width: 50%;
    padding: 0;
}

@media (max-width: 992px) {
    .fencing-container__header .fc-col-half:first-child {
        margin-bottom: 28px;
        width: 100%;
        float: none;
    }
}

@media (max-width: 992px) {
    .fencing-container__header .fc-col-half:last-child {
        display: none;
    }
}

.fencing-container a {
    text-decoration: none;
}

.fencing-container h4 {
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    .fencing-container h4 {
        margin-bottom: 0;
    }
}

.fc-form-group {
    display: inline-block;
    width: 100%;
}

.fc-label-badge {
    color: var(--fc-bright-gray);;
    background: var(--fc-bright-gray);
    border-radius: 24px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

.fc-label-group .form-control {
    padding: 15px 15px 10px !important;
    font-size: 14px;
}

.fc-label-group .fc-form-label {
    top: -11px;
    padding: 0 5px;
    background: var(--fc-white);
    display: inline-block !important;
    margin-left: 10px;
    position: absolute;
    z-index: 1;
}

.fc-form-control:focus-visible {
    outline: none;
}

.fc-rounded {
    border-radius: 8px;
}

.fc-input-msg {
    margin: 5px 0;
    background: var(--fc-bootstrap-danger);
    color: var(--fc-white);
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 12px;
    position: absolute;
    bottom: -30px;
    display: none;
    z-index: 1;
}

.fc-input-msg.fcim-show {
    display: block;
}

.fc-input-msg:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: var(--fc-alizarin) transparent;
    border-width: 0 7px 7px;
    top: -7px;
    right: 50%;
    margin-left: -20px;
}

@media (max-width: 992px) {
    .fc-tab-control .btn-fc {
        height: 52px;
    }
}

.fc-tab-control .fc-section-step {
    display: flex;
}

.fc-tab-control .fc-section-step .btn-fc {
    margin-right: 16px;
    text-align: center;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .fc-tab-control .fc-section-step .btn-fc {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .fc-tab-control .fc-section-step .btn-fc {
        margin-bottom: 16px;
    }
}

.fc-tab-control .fc-section-step .btn-fc:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .fc-tab-control .fc-section-step .btn-fc:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 992px) {

    .fc-tab-control .fc-section-step .btn-fc-orange,
    .fc-tab-control .fc-section-step .btn-delete-fence,
    .fc-tab-control .fc-section-step .fencing-tab-add {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (min-width: 768px) and (max-width: 860px) {

    .fc-tab-control .fc-section-step .btn-fc-orange,
    .fc-tab-control .fc-section-step .btn-delete-fence,
    .fc-tab-control .fc-section-step .fencing-tab-add {
        font-size: 11px !important;
    }
}

@media (max-width: 767px) {

    .fc-tab-control .fc-section-step .btn-fc-orange,
    .fc-tab-control .fc-section-step .btn-delete-fence,
    .fc-tab-control .fc-section-step .fencing-tab-add {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    .fc-tab-control .fc-section-step {
        display: block;
        height: auto;
    }
}

.fc-input-container {
    position: relative;
}

.btn:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}

.disabled *, .disabled {
    cursor: not-allowed;
    pointer-events: none !important; 
    color: var(--fc-gainsboro);
}

.fc-zoom-reset:disabled,
.fc-zoom-reset.disabled {
    background-color: var(--fc-silver-chalice) !important;
    border-color: var(--fc-silver-chalice) !important;
    color: var(--fc-cultured) !important;
    opacity: 1;
}

.fc-zoom-fence[data-zoom="out"]:disabled,
.fc-zoom-fence[data-zoom="out"].disabled {
    background-color: var(--fc-silver-chalice) !important;
    border-color: var(--fc-silver-chalice) !important;
    color: var(--fc-cultured) !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.fc-form-plan .fc-col-half {
    width: calc(50% - 0px);
}

.fencing-modal--v2 .fencing-modal-content {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fencing-modal-content {
        padding: 16px;
        border-radius: 16px;
    }
}

@media (max-width: 600px) {
    .fencing-modal--v2 .fencing-modal-content {
        height: 100%;
    }
}

.fencing-modal--v2 .fencing-form-group:last-child {
    margin-bottom: 0;
}

.fencing-modal--v2 .fencing-modal-title {
    padding: 0;
}

.fencing-modal--v2 .fencing-modal-title__marker {
    color: var(--fc-brand-primary);
}

.fencing-modal--v2 .fencing-modal-area {
    margin-bottom: 10px;
    border-radius: 16px;
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fencing-modal-area {
        margin-bottom: 19px;
        padding: 17px 24px 24px;
    }
}

@media (max-width: 768px) {
    .fencing-modal--v2 .fencing-modal-area {
        padding: 15px 0 24px;
    }
}

.fencing-modal--v2 .fencing-modal-area:last-child {
    margin-bottom: 0;
}

.fencing-modal--v2 .fencing-modal-area--panel-options .fencing-modal-notes:not(.fc-alert-gray) {
    background-color: var(--fc-white);
    padding: 0;
}

.fencing-modal--v2 .fencing-modal-area--gate {
    border: 0;
    padding: 0;
}

.fencing-modal--v2 .fencing-modal-area--gate .fc-col-flex {
    margin-right: 15px;
}

.fencing-modal--v2 .fencing-modal-area--gate .fc-col-flex:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .fencing-modal--v2 .fencing-modal-area--gate .fc-col-flex {
        margin-right: 10px;
    }
}


.fencing-modal--v2 .fencing-modal-area--gate .fc-move-post {
    border-width: 1px;
    height: inherit;
    box-sizing: border-box;
    padding: 10px 0px 7px;
}
.fencing-modal--v2 .fencing-modal-area--gate .fc-move-post span {
    margin-bottom: 5px;
    display: block;
}
@media (max-width: 440px) {
    .fencing-modal--v2 .fencing-modal-area--gate .fc-move-post {
        padding: 10px 5px 5px;
    }
}

.fencing-modal--v2 .fencing-modal-area--gate .fc-move-post p {
    position: relative;
    font-weight: 500;
}

@media (max-width: 440px) {
    .fencing-modal--v2 .fencing-modal-area--gate .fc-move-post p {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fencing-modal-area[data-field=image_option] {
        padding-bottom: 10px;
    }
}

.fencing-modal--v2 .has-multiple-areas .fencing-modal-area {
    padding: 15px 24px 24px;
    border: 1px solid var(--fc-princeton-orange);
}

@media (max-width: 768px) {
    .fencing-modal--v2 .has-multiple-areas .fencing-modal-area {
        padding: 15px 16px 24px;
    }
}

.fencing-modal--v2 .fencing-modal-head {
    position: relative;
    z-index: 3;
}

.fencing-modal--v2 .fencing-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--fc-bright-gray);
    margin-bottom: 10px;
    position: relative;
}

.fencing-modal--v2 .fencing-modal-body {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fencing-modal-body {
        max-height: 100%;
    }
}

@media (max-width: 600px) {
    .fencing-modal--v2 .fencing-modal-body {
        height: 100%;
        max-height: 96%;
    }
}

@media (max-width: 768px) {
    .fencing-modal--v2 .fencing-modal-body {
        padding-right: 0px;
        padding-bottom: 0px;
    }
}

/**
 * Download Your Project Plans modal — sticky header/footer, scrollable body only.
 */
.fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-content.fencing-modal--scroll-layout {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 920px);
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
}

.fencing-modal--download-plans .fencing-modal-head--sticky {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 1rem 3.25rem 0.85rem 1.5rem;
    border-bottom: 1px solid var(--fc-gainsboro);
    background: var(--fc-white);
    position: relative;
    z-index: 4;
}

.fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-body.fencing-modal-body--scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.75rem 1.5rem !important;
    max-height: none !important;
    height: auto !important;
}

.fencing-modal--download-plans .fencing-modal-footer--sticky {
    flex: 0 0 auto;
    padding: 0.65rem 1.5rem 0.85rem;
    border-top: 1px solid var(--fc-gainsboro);
    background: var(--fc-cultured);
}

.fencing-modal--download-plans .fencing-modal-footer-note {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.fencing-modal--download-plans .fencing-modal-footer--with-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fencing-modal--download-plans .fc-download-footer-actions {
    width: 100%;
}

.fencing-modal--download-plans .fc-form-plan-action--modal-footer {
    margin-bottom: 0;
}

.fencing-modal--download-plans .fencing-modal-footer--with-actions .fencing-modal-footer-note {
    margin-top: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--fc-a-black-6);
}

.fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-head--sticky .fencing-modal-close {
    top: 50%;
    margin-top: -23px;
    right: 12px;
}

@media (max-width: 992px) {
    .fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-content.fencing-modal--scroll-layout {
        max-height: min(94vh, 840px);
    }

    .fencing-modal--download-plans .fencing-modal-head--sticky {
        padding-right: 3rem;
        padding-left: 1rem;
    }
}

@media (max-width: 600px) {
    .fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-content.fencing-modal--scroll-layout {
        max-height: 100%;
        height: 100%;
        border-radius: 16px;
    }

    .fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-body.fencing-modal-body--scroll {
        padding: 1rem !important;
    }

    .fencing-modal--download-plans.fencing-modal--v2 .fencing-modal-head--sticky .fencing-modal-close {
        right: 8px;
    }
}

.fencing-modal--v2 .body-title:empty {
    display: none;
}

/**
 * Project-plan submit modal (view-2): close top-right on content, scrollable body, sticky footer; Update in footer.
 */
#submit-modal.fencing-modal--project-plans.fencing-modal--v2 .fencing-modal-content.fencing-modal--scroll-layout.fencing-modal-content--project-plans {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 95vh;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
}

#submit-modal.fencing-modal--project-plans .fencing-modal-close--project-plans {
    margin-top: 0;
    z-index: 8;
}

#submit-modal.fencing-modal--project-plans.fencing-modal--v2 .fencing-modal-body.fencing-modal-body--project-plans {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.75rem 1.5rem !important;
    max-height: none !important;
    height: auto !important;
}

#submit-modal.fencing-modal--project-plans .fencing-modal-footer--project-plans {
    flex: 0 0 auto;
    padding: 0.85rem 1.5rem 1rem;
    border-top: 1px solid var(--fc-gainsboro);
    background: var(--fc-cultured);
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--project-plans.fencing-modal--v2 .fencing-modal-content.fencing-modal--scroll-layout.fencing-modal-content--project-plans {
        max-height: 100%;
        height: 100%;
        border-radius: 16px;
    }

    #submit-modal.fencing-modal--project-plans.fencing-modal--v2 .fencing-modal-body.fencing-modal-body--project-plans {
        padding: 1rem !important;
    }
}

.fencing-modal--v2 .fc-select {
    border-width: 2px;
    border-radius: 8px;
    transition: border 0.2s ease;
    overflow: hidden;
}

.fencing-modal--v2 .fc-select[data-key=post_options] {
    padding: 8px;
    background-color: var(--fc-alabaster);
}

.fencing-modal--v2 .fc-select[data-key=post_options] img {
    border-radius: 8px;
}

.fencing-modal--v2 .fc-select:after {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    top: 14px;
    right: 16px;
}
.fc-select-2 {    
    padding-left: 42px!important;
}

.fc-select-2:after {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    top: calc(50% - 12px);
    left: 8px;
}

.fencing-modal--v2 [name=panel_option] .fc-select:after {
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    left: 8px;
}

@media (max-width: 992px) {

    .fencing-modal--v2 [type=range_option],
    .fencing-modal--v2 [type=image_option],
    .fencing-modal--v2 .fencing-modal-area--step-up [type=text_option],
    .fencing-modal--v2 .fc-modal-options--cols-4 {
        display: flex;
        flex-wrap: wrap;
    }
}

.fencing-modal--v2 [type=range_option] [class*=fc-col],
.fencing-modal--v2 [type=image_option] [class*=fc-col] {
    width: 172px;
    margin-right: 3.5971223022%;
}

.fencing-modal--v2 [type=range_option] [class*=fc-col]:last-child,
.fencing-modal--v2 [type=image_option] [class*=fc-col]:last-child {
    margin-right: 0;
}

@media (max-width: 992px) {

    .fencing-modal--v2 [type=range_option] [class*=fc-col]:nth-child(2n),
    .fencing-modal--v2 [type=image_option] [class*=fc-col]:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 992px) {

    .fencing-modal--v2 [type=range_option] [class*=fc-col],
    .fencing-modal--v2 [type=image_option] [class*=fc-col] {
        width: 46%;
        margin-bottom: 14px;
    }
}

@media (max-width: 768px) {

    .fencing-modal--v2 [type=range_option] [class*=fc-col],
    .fencing-modal--v2 [type=image_option] [class*=fc-col] {
        width: 48%;
    }
}

.fencing-modal--v2 [type=range_option] .fc-select:has(+ p:not(:empty)),
.fencing-modal--v2 [type=image_option] .fc-select:has(+ p:not(:empty)) {
    margin-bottom: 10px;
}

.fencing-modal--v2 [type=range_option] .fc-select:not(:has(+ p:not(:empty))),
.fencing-modal--v2 [type=image_option] .fc-select:not(:has(+ p:not(:empty))) {
    margin-bottom: 0;
}

.fencing-modal--v2 .fencing-modal-area:has(.fencing-modal-notes:empty) .fencing-modal-body.mb-4,
.fencing-modal--v2 .fencing-modal-area:has(.fencing-modal-notes:empty) .fencing-modal-body.mb-3 {
    margin-bottom: 0 !important;
}

.fencing-modal--v2 [type=range_option] [class*="col-"] > p,
.fencing-modal--v2 [type=image_option] [class*="col-"] > p:first-of-type {
    margin-top: 0;
    margin-bottom: 0;
}

.fencing-modal--v2 [type=image_option] [class*="col-"] > p:empty {
    display: none;
}

.fencing-modal--v2 [type=range_option] .fc-select {
    padding: 0;
}

.fencing-modal--v2 [type=range_option] .fc-select:after {
    top: 8px;
    right: 12px;
}

.fencing-modal--v2 [type=range_option] .fc-alert-gray p {
    font-size: 14px;
    line-height: 20px;
}

.fencing-modal--v2 [type=range_option] .fc-selection-details label {
    margin-bottom: 8px;
}

/* Modal card grid — 4 columns on desktop when option count is 4 or 8 */
@media (min-width: 992px) {
    .fencing-modal--v2 .fc-modal-options--cols-4 > [class*="col-"] > p {
        font-size: 12px;
        line-height: 1.35;
    }

    .fencing-modal--v2 .fc-modal-options--cols-4[type="range_option"] .fc-select img,
    .fencing-modal--v2 .fc-modal-options--cols-4[type="image_option"] .fc-select img {
        width: 100%;
        height: auto;
    }
}

.fencing-modal--v2 .fencing-modal-notes {
    padding: 0;
}

.fencing-modal--v2 .fencing-modal-notes:not(:empty) {
    margin-top: 4px;
}

.fencing-modal--v2 .fencing-modal-notes p {
    font-size: 14px;
    line-height: 20px;
    color: var(--fc-granite-gray);
}

/* Modal field notes — Spigot Options, Step-Up panels, etc. */
.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note {
    background-color: var(--fc-cultured);
    border: 1px solid var(--fc-gainsboro);
    border-left: 4px solid var(--fc-princeton-orange);
    border-radius: 8px;
    padding: 16px 18px;
    box-sizing: border-box;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc-black);
    margin-bottom: 10px;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note > label i {
    color: var(--fc-princeton-orange);
    font-size: 16px;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note .fc-modal-note-body,
.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note > p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fc-granite-gray);
    margin-bottom: 0;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note ul {
    margin: 0;
    padding-left: 1.25rem;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note li {
    margin-bottom: 8px;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note li:last-child {
    margin-bottom: 0;
}

.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note li b,
.fencing-modal--v2 .fencing-modal-notes .fc-alert-gray.field-note li strong {
    color: var(--fc-black);
    font-weight: 600;
}

.fencing-modal--v2 .fencing-modal-notes .note-img img {
    border-color: var(--fc-gainsboro) !important;
}

.fencing-modal--v2 .fc-row-container {
    margin: 0;
}

.fencing-modal--v2 .fc-selection-details {
    margin: 0 0 24px;
}

.fencing-modal--v2 .fc-selection-details:last-child {
    margin-bottom: 0;
}

.fencing-modal--v2 .fc-selection-details.field-note {
    margin-top: 24px;
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fc-selection-details.field-note {
        margin-top: 10px;
    }
}

.fencing-modal--v2 .fc-selection-details .fc-icon {
    width: 16px;
    display: inline-block;
    vertical-align: middle;
}

.fencing-modal--v2 .fc-dropdown_option {
    width: 100%;
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fc-dropdown_option {
        max-width: 100%;
    }
}

.fencing-modal--v2 .fc-dropdown_option select {
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--fc-gainsboro);
    height: 59px;
}


.fencing-modal--v2 [type=text_option] .fc-select {
    height: 55px;
    border-radius: 8px;
    border-width: 2px;
    padding: 8px;
    box-sizing: border-box;
    padding-left: 40px !important;
    display: flex;
    align-items: center;
}

.fencing-modal--v2 [type=text_option] .fc-col-4 {
    width: 50%;
    max-width: 272px;
    margin-bottom: 8px;
    margin-right: 16px;
}

@media (max-width: 992px) {
    .fencing-modal--v2 [type=text_option] .fc-col-4 {
        width: calc(50% - 8px);
    }
}

@media (max-width: 768px) {
    .fencing-modal--v2 [type=text_option] .fc-col-4 {
        width: 100%;
    }
}

.fencing-modal--v2 [type=text_option] .fc-col-4:nth-child(2n) {
    margin-right: 0;
}

.fencing-modal--v2 [type=text_option] p strong {
    display: block;
}

/* Add Step-Up Panel — match Edit Left Side spacing; keep auto-height cards */
.fencing-modal--v2 .fencing-modal-area--step-up [type=text_option] .fc-select {
    height: auto;
    min-height: 55px;
    overflow: visible;
    width: 100%;
    padding: 10px 12px 10px 42px !important;
}

.fencing-modal--v2 .fencing-modal-area--step-up [type=text_option] .fc-select:after {
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    right: auto;
}

.fencing-modal--v2 .fencing-modal-area--step-up [type=text_option] .fc-select p {
    margin: 0;
    width: 100%;
    line-height: 1.35;
    font-size: 14px;
    white-space: normal;
}

.fencing-modal--v2 .fencing-modal-area--step-up .fencing-modal-notes {
    padding-top: 0;
}

.fencing-modal--v2 .fencing-modal-area--step-up .fencing-modal-notes .field-note {
    margin-top: 0;
}


.fencing-modal--v2 .fencing-modal-close {
    top: 12px;
    right: 12px;
    background-color: var(--fc-princeton-orange);
    border-color: var(--fc-princeton-orange);
    box-shadow: 0 2px 10px var(--fc-a-orange-22);
}

@media (max-width: 992px) {
    .fencing-modal--v2 .fencing-modal-close {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2 .fencing-modal-content {
        padding-top: 36px;
    }
}

@media (max-width: 768px) {
    #submit-modal.fencing-modal--v2 .fencing-modal-body {
        position: static;
    }
}

#submit-modal.fencing-modal--v2 .fc-col-half {
    padding-left: 0;
    padding-right: 0;
}

#submit-modal.fencing-modal--v2 .fc-col-half:first-child {
    margin-right: 16px;
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-col-half:first-child {
        margin-right: 0;
    }
}

#submit-modal.fencing-modal--v2 .fc-form-plan .fc-col-half {
    width: calc(50% - 8px);
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-form-plan .fc-col-half {
        width: 100%;
    }
}

#submit-modal.fencing-modal--v2 .fc-form-check label {
    margin-left: 3px;
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-form-plan-action {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    #submit-modal.fencing-modal--v2 .fc-form-plan-action button {
        margin-left: 0;
    }
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-form-plan-action .fc-btn-next {
        margin-bottom: 0;
    }
}

#submit-modal.fencing-modal--v2 .fc-color-options {
    padding: 0;
    margin-bottom: 20px;
    display: block;
}

@media (min-width: 540px) {
    #submit-modal.fencing-modal--v2 .fc-color-options {
        display: flex;
    }
}

#submit-modal.fencing-modal--v2 .fc-color-options p strong {
    font-size: 16px;
}

@media (max-width: 768px) {
    #submit-modal.fencing-modal--v2 .fc-color-options p strong,
    .fc-color-options p strong {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-color-options .fc-col {
        width: 26.6111111111%;
        margin-right: 2.2222222222%;
    }
}

#submit-modal.fencing-modal--v2 .fc-color-options .fc-select {
    height: 65px;
}

@media (min-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-color-options .fc-select {
        height: 81px;
    }
}

#submit-modal.fencing-modal--v2 .fc-color-options .fc-select:after {
    width: 20px;
    height: 20px;
    top: 18px;
}

@media (min-width: 600px) and (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-color-options .fc-select:after {
        top: 14px;
    }
}

#submit-modal.fencing-modal--v2 .form-tab-4 .fc-col-3 {
    padding: 0;
    margin-right: 2.6315789474%;
    margin-bottom: 2.6315789474%;
    width: 22.8947368421%;
}

@media (max-width: 767px) {
    #submit-modal.fencing-modal--v2 .form-tab-4 .fc-col-3 {
        width: 48.4%;
    }
}

@media (max-width: 767px) {
    #submit-modal.fencing-modal--v2 .form-tab-4 .fc-col-3:nth-of-type(2n) {
        margin-right: 0 !important;
    }
}

#submit-modal.fencing-modal--v2 .form-tab-4 .fc-col-3:nth-of-type(4n) {
    margin-right: 0;
}

@media (max-width: 767px) {
    #submit-modal.fencing-modal--v2 .form-tab-4 .fc-col-3:nth-of-type(4n) {
        margin-right: 3.1578947368%;
    }
}

#submit-modal.fencing-modal--v2 .fencing-modal-md {
    max-width: 840px;
}

/**
 * Project-plan submit modal — Colour options Slick (2 mobile / 4 tablet+; fc-color-options-slick.js)
 */
#submit-modal.fencing-modal--project-plans .fc-form-field.fc-color-options.js-fc-color-options-slick {
    display: block !important;
}

/**
 * Submit modal — Colour options strip skeleton (2 mobile / 4 tablet+, matches modal Slick).
 */
#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-pending:not(.fc-color-options-slick-ready) .fc-modal-color-options-skeleton {
    display: block;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-ready .fc-modal-color-options-skeleton {
    display: none !important;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0 -6px;
    width: calc(100% + 12px);
    max-width: calc(100% + 12px);
    box-sizing: border-box;
    padding: 14px 2px 16px;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__cell {
    box-sizing: border-box;
    padding: 10px 6px;
    flex: 0 0 50%;
    max-width: 50%;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__tile {
    min-height: 118px;
    border-radius: 10px;
    border: 2px solid var(--fc-alto-4);
    background: var(--fc-white-smoke);
    padding: 12px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__divider {
    display: block;
    width: 100%;
    height: 0;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--fc-alto-4);
    flex-shrink: 0;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line {
    display: block;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #d5d5d5;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row1 {
    width: 78%;
    height: 10px;
    margin-bottom: 0;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row1::after {
    animation-delay: 0.05s;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row2 {
    width: 62%;
    height: 11px;
    margin-bottom: 6px;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row2::after {
    animation-delay: 0.22s;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row3 {
    width: 44%;
    height: 9px;
    margin-bottom: 0;
}

#submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line--row3::after {
    animation-delay: 0.38s;
}

@media (max-width: 767.98px) {
    #submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 3) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__cell {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* Modal Slick shows 4 across from tablet up — match skeleton tiles */
    #submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__track .fc-color-options-skeleton__cell:nth-child(n + 5) {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line::after {
        animation: none !important;
        opacity: 0;
    }

    #submit-modal.fencing-modal--project-plans .fc-modal-color-options-skeleton .fc-color-options-skeleton__line {
        background: var(--fc-alabaster);
    }
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-pending:not(.fc-color-options-slick-ready) {
    position: relative;
    min-height: 0;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-pending:not(.fc-color-options-slick-ready) .js-fc-color-options-slick {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-ready .js-fc-color-options-slick.slick-initialized {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease-out;
}

/* Modal Colour Options Slick — equal-height tiles per visible row */
#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-track {
    margin-left: 0 !important;
    display: flex !important;
    align-items: stretch;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-slide {
    display: flex;
    height: auto;
    align-items: stretch;
    text-align: left;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick.slick-initialized .slick-slide > div {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .fc-color-options__slide {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}

/* Override fixed #submit-modal… .fc-select heights so cards stretch to row max */
#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .fc-color-options__slide .fc-select.fc-select-color {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    box-sizing: border-box;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .fc-color-options__slide .fc-select.fc-select-color p {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .fc-color-options__slide .fc-select.fc-select-color::after {
    top: 50%;
    transform: translateY(-50%);
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#submit-modal.fencing-modal--project-plans .fc-form-plan:has(.fc-color-options-slick-area),
#submit-modal.fencing-modal--project-plans .fencing-modal-body--project-plans:has(.fc-color-options-slick-area) {
    overflow-x: visible;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area {
    position: relative;
    z-index: 2;
    overflow: visible;
    margin-bottom: 8px;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick.slick-slider {
    position: relative;
    padding-bottom: 40px;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow {
    position: absolute;
    top: 42%;
    z-index: 20;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow:focus-visible {
    outline: 2px solid var(--fc-princeton-orange);
    outline-offset: 2px;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow__inner {
    position: absolute;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1.05rem;
    line-height: 1;
    color: #2d2d2d;
    transition: color 0.2s ease, transform 0.2s ease;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow:hover {
    background: var(--fc-white);
    box-shadow:
        0 2px 6px rgba(246, 121, 37, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1.04);
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow:hover .fencing-styles-arrow__icon {
    color: var(--fc-princeton-orange);
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow.slick-disabled {
    opacity: 0.28;
    pointer-events: none;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow.slick-disabled .fencing-styles-arrow__icon {
    color: #9a9a9a;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-single-page .js-fc-color-options-slick.slick-slider,
#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick.slick-slider:has(.slick-dots li:only-child) {
    padding-bottom: 0;
}

#submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-single-page .slick-dots,
#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots:has(li:only-child) {
    display: none !important;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 120px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li {
    position: relative;
    display: inline-flex;
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li button {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    opacity: 0.45;
    color: var(--fc-black);
}

#submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--fc-princeton-orange);
}

@media (max-width: 991.98px) {
    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick.slick-slider {
        padding-bottom: 40px;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area.fc-color-options-slick-single-page .js-fc-color-options-slick.slick-slider,
    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick.slick-slider:has(.slick-dots li:only-child) {
        padding-bottom: 26px;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow {
        width: 42px;
        height: 42px;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .fencing-styles-arrow__icon {
        font-size: 0.95rem;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .slick-prev.fencing-styles-arrow {
        left: -12px;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .slick-next.fencing-styles-arrow {
        right: -12px;
    }

    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots {
        max-width: calc(100% - 96px);
        gap: 12px;
        bottom: 6px;
    }

    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li button {
        width: 20px;
        height: 20px;
    }

    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li button:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    #submit-modal.fencing-modal--project-plans .js-fc-color-options-slick .slick-dots li.slick-active button:before {
        opacity: 1;
        color: var(--fc-princeton-orange);
    }
}

@media (max-width: 575.98px) {
    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area {
        padding-left: 44px;
        padding-right: 44px;
        box-sizing: border-box;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .slick-prev.fencing-styles-arrow {
        left: 0;
    }

    #submit-modal.fencing-modal--project-plans .fc-color-options-slick-area .slick-next.fencing-styles-arrow {
        right: 0;
    }
}

/**
 * Project-plan submit modal — larger Update button.
 */
.fc-project-plan-page #submit-modal.fencing-modal--project-plans .project-details--update.btn.btn-lg {
    font-size: 1.1875rem !important;
    line-height: 1.35 !important;
    padding: 1rem 1.75rem !important;
    min-height: 3.35rem;
}

#submit-modal.fencing-modal--v2 .fc-form-plan h2 {
    font-size: 28px;
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-form-plan h2 {
        text-align: left;
    }
}

#submit-modal.fencing-modal--v2 .fc-form-check.fc-mb-3 {
    margin-bottom: 5px !important;
}

#submit-modal.fencing-modal--v2 .fc-form-check-img p {
    font-size: 14px;
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2 .fc-form-check-img p {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2 .fc-form-check-img .fc-form-check {
        display: block;
        height: 100px;
        position: relative;
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2 .fc-form-check-img .fc-rounded {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

#submit-modal.fencing-modal--v2 .fc-form-check-img .fc-empty-img {
    font-weight: 700;
    overflow: hidden;
    position: relative;
}

#submit-modal.fencing-modal--v2 .fc-form-check-img .fc-empty-img:before {
    content: "";
    width: 2px;
    height: 150%;
    background-color: var(--fc-dark-gray);
    position: absolute;
    transform: rotate(45deg);
}

#submit-modal.fencing-modal--v2 .fc-form-check-img .fc-empty-img:after {
    content: "";
    width: 2px;
    height: 150%;
    background-color: var(--fc-dark-gray);
    position: absolute;
    transform: rotate(-45deg);
}

#submit-modal.fencing-modal--v2 .fc-form-check-img .fc-empty-img span {
    background-color: var(--fc-cultured);
    padding: 2px;
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2 .fc-form-check-img .fc-empty-img {
        height: 100%;
    }
}

@media (max-width: 992px) {
    #submit-modal.fencing-modal--v2 .fc-modal-frame {
        padding-bottom: 30px;
    }
}

@media (max-width: 600px) {
    #submit-modal.fencing-modal--v2.fencing-modal--project-plans .fc-modal-frame {
        height: auto;
        padding-bottom: 30px;
        box-sizing: border-box;
    }
}

/* Buttons */
.btn-fc {
    display: inline-block;
    font-family: "Inter", sans-serif;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .btn-fc {
        width: 100%;
        margin-bottom: 16px;
        margin-right: 0;
    }

    .btn-fc:last-child {
        margin-bottom: 0;
    }
}

.btn-fc--large-text {
    font-size: 18px !important;
    line-height: 20px !important;
}

@media (min-width: 1024px) {
    .btn-fc:hover {
        background: var(--fc-emperor);
        cursor: pointer;
        color: var(--fc-white);
    }
}

.btn-fc-default {
    background: var(--fc-dark-charcoal);
    color: var(--fc-white);
    border: 0;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 30px;
}

@media (min-width: 1024px) {
    .btn-fc-default:hover {
        background: var(--fc-black);
        color: var(--fc-white);
    }
}

.btn-fc-black {
    background: var(--fc-night);
    color: var(--fc-white);
    border: 0;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 30px;
}

@media (min-width: 1024px) {
    .btn-fc-black:hover {
        background: var(--fc-black);
        color: var(--fc-white);
    }
}

.btn-fc-outline-default {
    border: 1px solid var(--fc-dark-charcoal);
    color: var(--fc-dark-charcoal);
    border-radius: 8px;
    font-size: 14px;
    padding: 15px 20px;
    background: transparent;
}

@media (min-width: 768px) {
    .btn-fc-outline-default:hover {
        background-color: var(--fc-dark-charcoal);
        color: var(--fc-white);
    }
}

.btn-fc-outline-default--dark-gray {
    border-color: var(--fc-dark-gray);
    color: var(--fc-dark-gray);
}

@media (min-width: 1024px) {
    .btn-fc-outline-default--dark-gray:hover {
        background-color: var(--fc-dark-gray);
        color: var(--fc-white);
    }
}

.btn-fc-outline-light {
    border: 1px solid var(--fc-gainsboro);
    color: var(--fc-bright-gray);;
    border-radius: 8px;
    font-size: 14px;
    padding: 10px 20px;
    background: transparent;
}

@media (min-width: 1024px) {
    .btn-fc-outline-light:hover {
        color: var(--fc-white);
    }
}

.btn-fc-danger {
    border: 1px solid var(--fc-spanish-gray);
    color: var(--fc-white);
    border-radius: 10px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 20px;
    background: var(--fc-cinnabar);
}

@media (min-width: 1024px) {
    .btn-fc-danger:hover {
        background: var(--fc-dark-red);
    }
}

.btn-orange {
    background: var(--fc-princeton-orange) !important;
    color: var(--fc-white) !important;
}

.btn-orange:hover {
    background: var(--fc-pumpkin) !important;
}

.btn-orange-outline {
    background: transparent !important;
    color: var(--fc-princeton-orange) !important;
    border: 2px solid var(--fc-princeton-orange) !important;
}

.btn-orange-outline:hover:not(:disabled):not(.disabled) {
    background: var(--fc-princeton-orange) !important;
    color: var(--fc-white) !important;
    border-color: var(--fc-princeton-orange) !important;
}

.btn-orange-outline:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--fc-a-orange-35);
}

.btn-green {
    background: var(--fc-green) !important;
    border-bottom: 4px solid var(--fc-forest-green) !important;
    color: var(--fc-white) !important;
}

.btn-green:hover {
    background: var(--fc-salem) !important;
}

.btn-fc-blue {
    background: var(--fc-allports) !important;
    border-bottom: 4px solid var(--fc-deep-blue) !important;
    color: var(--fc-white) !important;
}

.btn-fc-blue:hover {
    background: var(--fc-deep-blue) !important;
    color: var(--fc-white) !important;
}

.btn-fc-orange {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
    border: 0;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 30px;
}

@media (max-width: 480px) {
    .btn-fc-calculate, .custom-gate .fc-input-container button  {
        width: 100%;
    }
}

.btn-fc-sm {
    font-size: 12px;
    padding: 8px 12px;
}

.btn-fc-outline-danger {
    color: var(--fc-brand-primary);
    border: 1px solid var(--fc-brand-primary);
    border-radius: 8px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    padding: 5px 10px;
}

@media (min-width: 1024px) {
    .btn-fc-outline-danger:hover {
        background: var(--fc-brand-primary);
        color: var(--fc-white);
    }
}

.fc-btn-active {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
}

.fc-btn-md {
    padding: 12px 30px;
}

.fc-btn-disabled {
    background: var(--fc-alto-4);
}

@media (min-width: 1024px) {
    .fc-btn-disabled:hover {
        cursor: not-allowed;
    }
}
.fencing-qty-btn {
    height: 50px;
    display: flex;
    align-items: center;    
    background: var(--fc-wild-sand-2);
}

.fencing-qty-btn:hover {
    cursor: pointer;
    background: var(--fc-gainsboro);
}

.fencing-qty-plus {
    right: 5px;
    border-radius: 0 9px 9px 0;
    border-left: 1px solid var(--fc-dark-gray);
}

.fencing-qty-minus {
    bottom: 12px;
    border-radius: 9px 0 0 9px;
    border-right: 1px solid var(--fc-dark-gray);
}


@media (max-width: 992px) {
    .btn-delete-fence {
        padding: 12px 16px;
    }
}

@media (max-width: 992px) {
    .fc-tab-control .btn {
        width: 100%;
    }
}

/* Planner tab 2 (step 4 bottom): UPDATE | Update Project Plan | Back — Plan fills space, Back stays right */
.fc-planner-page .fc-tab-control .fc-step4-calculate-bottom.fc-section-step {
    display: block;
}

.fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .fc-step4-bottom-btns {
    width: 100%;
}

/* Tablet only: side buttons natural width; middle Create/Update fills flex column */
@media (min-width: 576px) and (max-width: 991.98px) {
    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .btn:not(.fc-btn-create-plan) {
        width: auto !important;
    }

    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .fc-btn-create-plan {
        width: 100% !important;
    }

    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .flex-grow-1 .btn {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .fc-step4-bottom-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .fc-step4-bottom-btns > div {
        width: 100%;
        margin-left: 0 !important;
        align-self: stretch !important;
    }

    .fc-planner-page .fc-tab-control .fc-step4-calculate-bottom .fc-step4-bottom-btns .btn {
        width: 100% !important;
    }
}

/* TABS */
.fencing-tabs {
    height: inherit;
    width: 100%;
    position: relative;
}

@media (max-width: 992px) {
    .fencing-tabs {
        width: 100%;
    }
}

.fencing-tabs-container {
    width: 100%;
    display: inline-block;
    height: 65px;
    margin-top: 40px;
}

@media (max-width: 992px) {
    .fencing-tabs-container--project-plan {
        height: 41px;
    }

    .fencing-tabs-container {
        height: 55px;
    }
}

.fc-project-plan-page .fencing-tabs-container--project-plan .fencing-tab-name {
    text-transform: uppercase;
}

.fencing-tabs-area {
    display: inline-block;
    height: inherit;
    background-color: var(--fc-bright-gray);
    border-radius: 16px 16px 0 0;
}

@media (max-width: 992px) {
    .fencing-tabs-area {
        background-color: transparent;
        width: 100%;
    }
}

.fencing-tabs-container.enable-scroll .fencing-tab-container {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    border-top-right-radius: 0;
}

@media (max-width: 768px) {
    .fencing-tabs-container.enable-scroll .fencing-tab-container {
        width: 70%;
    }
}

@media (max-width: 992px) {
    .fencing-tabs-container.enable-scroll .fencing-tab-container {
        width: 100%;
    }
}

.fencing-tabs-container.enable-scroll .fencing-tabs-area {
    width: 100%;
}

/**
 * Planner (/fc/planner): section tabs row uses a flex layout. The scrollable tab strip must
 * share the row with "+ Add Section"; width:100% rules elsewhere would consume the full row
 * and push or misplace the add control — flex:1 + min-width:0 keeps Add Section on the right.
 */
.fc-planner-page .fencing-tabs-area {
    display: block;
    width: 100%;
}

.fc-planner-page .fencing-tabs.fc-row-flex {
    align-items: stretch;
}

.fc-planner-page .fencing-tabs-container .fencing-tab-container {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
}

.fc-planner-page .fencing-tabs-container .fencing-tab-add {
    flex-shrink: 0;
    align-self: stretch;
    height: auto;
    min-height: 100%;
}

.fc-planner-page .fencing-tabs-container {
    height: auto;
}

.fencing-tab-container {
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--fc-bright-gray);
    border-bottom: 0;
    border-left: 0;
    box-sizing: border-box;
    border-right: 0;
}

@media (max-width: 768px) {
    .fencing-tab-container {
        width: 100%;
    }
}

.fencing-tab-container-area {
    height: 100%;
    cursor: grab;
}

.w-side-section .fc-section-details {
    width: 100%;
}

.fc-sticky {
    top: 0;
    margin-top: 0;
    position: fixed;
    z-index: 10;
}

.fc-sticky .fencing-tabs {
    overflow: auto;
    max-height: 100vh;
}

.fencing-tab {
    border: 1px solid var(--fc-white);
    border-bottom: 0 !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    border-radius: 0;
    border-right: 1px solid var(--fc-bright-gray);
}

@media (max-width: 992px) {
    .fencing-tab {
        padding-left: 10px;
        padding-right: 10px;
        min-width: 6rem !important;
    }
}


.fencing-tab:first-child {
    border-top-left-radius: 16px;
    border-left: 1px solid var(--fc-bright-gray);
}

@media (min-width: 768px) {
    .fencing-tab:not(.fencing-tab-selected):hover {
        background: var(--fc-princeton-orange);
        color: var(--fc-white);
        border-color: var(--fc-princeton-orange);
    }
}

.fencing-tab-container {
    height: inherit;
}

.fencing-tab-name {
    color: var(--fc-dark-medium-gray);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    position: relative;
    top: 1px;
    padding: 8px 10px;
}

@media (max-width: 992px) {
    .fencing-tab-name {
        width: 100%;
        font-size: 20px;
        line-height: 1.2;
        top: 0;
    }
}

/**
 * Planner (/fc/planner): section tabs — "SECTION N", then fence style, then overall length.
 */
.fc-planner-page .fencing-tab-name .ftm-fence-style {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2px;
    color: var(--fc-dark-medium-gray);
    white-space: normal;
}

.fc-planner-page .fencing-tab-name .ftm-fence-style[hidden] {
    display: none !important;
}

.fc-planner-page .fencing-tab-name .ftm-measurement {
    white-space: normal;
}

.fc-planner-page .fc-section-tab-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
    vertical-align: middle;
    line-height: 1;
}

.fc-planner-page .fc-section-tab-status[data-bs-toggle='tooltip'] {
    cursor: help;
}

.fc-planner-page .fc-section-tab-status__icon {
    font-size: 0.85em;
    line-height: 1;
}

.fc-planner-page .fc-section-tab-status--complete .fc-section-tab-status__icon {
    color: var(--fc-green, #04a725);
}

.fc-planner-page .fc-section-tab-status--incomplete .fc-section-tab-status__icon {
    color: var(--fc-gray-chateau, #999);
}

.fc-planner-page .fc-section-tab-status--error .fc-section-tab-status__icon {
    color: var(--fc-claret, #b5003d);
}

.fc-planner-page .fencing-tab-container-area.fc-row-flex {
    align-items: stretch;
}

.fc-planner-page .fencing-tab {
    align-items: stretch;
}

@media (min-width: 769px) {
    .fc-planner-page .fencing-tab-container-area .fencing-tab {
        flex: 0 0 auto;
        min-width: 115px;
    }

    .fc-planner-page .fencing-tab-container-area .fencing-tab-name {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .fc-planner-page .fencing-tab-container-area .fencing-tab-name {
        white-space: nowrap;
    }
}

.fencing-tab.fencing-tab-selected {
    background: var(--fc-white);
    border-color: var(--fc-princeton-orange) !important;
    border-bottom: 0 !important;
    border-right-color: var(--fc-white);
}

.fencing-tab.fencing-tab-selected .fencing-tab-number,
.fencing-tab.fencing-tab-selected .fencing-tab-name {
    color: var(--fc-black);
}

@media (min-width: 768px) {
    .fencing-tab:not(.fencing-tab-selected):hover * {
        color: var(--fc-gray) !important;
    }
}

.fencing-tab-desc {
    font-size: 12px;
}

.fencing-tab-add {
    color: var(--fc-dark-charcoal);
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    background: var(--fc-bright-gray);
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
    border-radius: 0 16px 0 0;
    height: 100%;
    line-height: 1;
}

@media (max-width: 992px) {
    .fencing-tab-add {
        width: 80px;
        padding: 17px 8px;
        min-width: 10px;
        font-size: 30px;
    }
}

@media (max-width: 992px) {
    .fencing-tab-add span {
        display: none;
    }
}

.fencing-tab-add.btn-fc {
    background-color: var(--fc-white);
}

@media (min-width: 992px) {
    .fencing-tab-add:hover {
        background: var(--fc-jaffa);
        color: var(--fc-white);
        border-color: var(--fc-jaffa);
    }
}

.grabbing {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grabbing !important;
}

.grabbing .fencing-btn-modal {
    cursor: grabbing;
}

/* width */
.fencing-tabs-container.enable-scroll .fencing-tab-container::-webkit-scrollbar,
.fencing-display-result:not(:has(.fc-project-plan-hscroll))::-webkit-scrollbar {
    width: 10px;
    height: 5px;
}

/* Track */
.fencing-tabs-container.enable-scroll .fencing-tab-container::-webkit-scrollbar-track,
.fencing-display-result:not(:has(.fc-project-plan-hscroll))::-webkit-scrollbar-track {
    background: var(--fc-concrete);
}

/* Handle */
.fencing-tabs-container.enable-scroll .fencing-tab-container::-webkit-scrollbar-thumb,
.fencing-display-result:not(:has(.fc-project-plan-hscroll))::-webkit-scrollbar-thumb {
    background: var(--fc-dark-charcoal);
}

/* Handle on hover */
@media (min-width: 1024px) {

    .fencing-tabs-container.enable-scroll .fencing-tab-container::-webkit-scrollbar-thumb:hover,
    .fencing-display-result:not(:has(.fc-project-plan-hscroll))::-webkit-scrollbar-thumb:hover {
        background: var(--fc-emperor-555);
    }
}

.fc-section-details .fencing-display-result.grabbing .fencing-panel-container {
    position: relative;
}

.fc-section-details .fencing-display-result.grabbing .fencing-panel-container:before {
    content: "";
    background: var(--fc-a-orange-3);
    position: absolute;
    top: -22px;
    height: 224px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}

/* STYLES */
/* Glass / calc errors (e.g. no panel solutions) — below preview, not inside scroll strip */
.fencing-panel-solution-msg:empty {
    display: none;
}

.fencing-display-result {
    display: flex; 
    align-items: center;
    justify-content: center;
    /*min-height: 250px;*/
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    /* Below .sticky-roll / .fc-sticky floating headers so tabs stay clickable */
    z-index: 1;
    background: var(--fc-white);
}

/*
 * Planner Step 3: same horizontal scroll strip as project plan (.fc-project-plan-hscroll).
 * Outer .fencing-display-result is not the scroll container; the inner hscroll is.
 */
.fc-planner-page .fencing-section__cmp.fencing-display-result {
    display: block;
    overflow: visible;
    cursor: default;
}

/* Planner Step 3: divider between zoom header and fence diagram (matches bottom action bar). */
.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-section__cmp.fencing-display-result {
    border-top: 2px solid var(--fc-bright-gray);
    margin-top: 0.75rem;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px 25px 10px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fc-planner-page .js-fc-form-step[data-section="3"] .fencing-section__cmp.fencing-display-result {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.fc-planner-page .fencing-display-result .fc-project-plan-hscroll {
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    cursor: grab;
}

@supports not (overflow: clip) {
    .fc-planner-page .fencing-display-result .fc-project-plan-hscroll {
        overflow-y: hidden;
    }
}

.fc-planner-page .fencing-display-result .fc-project-plan-hscroll .fc-result {
    width: max-content;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* Non-slat Step 3: do not inherit slat hscroll min-height when switching section tabs */
.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll:not(.fc-slat-scale) {
    min-height: 0;
}

/*
 * Planner Step 3: reserve room for spacing/center labels under panels (not a fixed 240px strip +
 * extra .fc-result padding). Works with and without the horizontal scrollbar on .fc-project-plan-hscroll.
 */
.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items:not(.fc-slat-scale) {
    height: auto;
    min-height: 0;
    align-items: stretch;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items:not(.fc-slat-scale) .fencing-panel-container {
    padding-bottom: var(--fc-planner-step3-diagram-pad-bottom, 40px);
    box-sizing: border-box;
}

/* Slat / Slat Infill Step 3: same shell as tubular styles — auto height + container pad-bottom */
.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items.fc-slat-scale {
    height: auto;
    min-height: 0;
    align-items: stretch;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: visible;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items.fc-slat-scale.fc-slat-align-top {
    align-items: flex-start;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items.fc-slat-scale .fencing-panel-container[data-type="slat"],
.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-display-result .fc-project-plan-hscroll .fencing-panel-items.fc-slat-scale .fencing-panel-container[data-type="slat_fence_infill"] {
    padding-bottom: var(--fc-planner-step3-diagram-pad-bottom, 40px);
    box-sizing: border-box;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fc-overall {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 0.75rem;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-panel-controls:not(:empty) {
    margin-bottom: 0.75rem;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-section__bottom.fc-step3-bottom {
    padding-top: 1.25rem !important;
}

.fc-planner-page .js-fc-form-step[data-section="3"] .fencing-panel-solution-msg:not(:empty) {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* Planner Step 3: clearance only inside hscroll (not on outer strip) — raked peaks ~41px above */
.fc-planner-page .fencing-display-result:has(.fencing-raked-panel),
.fc-planner-page .fencing-display-result.fc-slat-scale:has(.fencing-raked-panel) {
    padding-top: 0;
}

.fc-planner-page .fencing-display-result .fc-project-plan-hscroll:has(.fencing-raked-panel) .fc-result {
    padding-top: 40px;
}

.fc-planner-page .fencing-panel-items:has(.fencing-raked-panel) {
    align-items: flex-end;
    overflow: visible;
}

.fc-planner-page .fencing-display-result .fc-project-plan-hscroll .fencing-panel-container {
    width: max-content;
    max-width: none;
    padding-top: 18px;
}

/*
 * Planner Step 3 (not Slat Infill): align fence runs from the left so the leading end post
 * stays in the scroll container; wide OAL runs are scrolled from the left edge.
 */
.fc-planner-page .fencing-display-result .fc-project-plan-hscroll .fencing-panel-container:not([data-type="slat_fence_infill"]) {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
}

.fc-planner-page .fencing-display-result .fc-project-plan-hscroll .fencing-panel-container:not([data-type="slat_fence_infill"]) > .fencing-panel-spacing-number:first-of-type,
.fc-planner-page .fencing-display-result .fc-project-plan-hscroll .fencing-panel-container:not([data-type="slat_fence_infill"]) .panel-post.post-left {
    flex-shrink: 0;
}

.fc-planner-page .fc-project-plan-hscroll.grabbing .fencing-panel-container {
    position: relative;
}

.fc-planner-page .fc-project-plan-hscroll.grabbing .fencing-panel-container:before {
    content: "";
    background: var(--fc-a-orange-3);
    position: absolute;
    top: -22px;
    height: 224px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}

/* Step-up (raked) panels: `.raked-panel-container` uses `top: -41px` to align with flat
   panels — default `overflow-y: hidden` here and `overflow: hidden` on `.fencing-section`
   clip the angled top. Allow vertical paint-through and reserve top space so the peak
   clears the zoom row (Flat Top / Barr / other panel-group `b` styles). */
.fencing-section:has(.fencing-raked-panel) {
    overflow: visible;
}

.fencing-display-result:has(.fencing-raked-panel) {
    overflow-y: visible;
    padding-top: 52px;
    box-sizing: border-box;
}

/* Slat Fence: allow vertical room for taller posts (incl. bury allowance) */
.fencing-display-result.fc-slat-scale {
    overflow-y: hidden;
}

/* Planner Step 3: hscroll min-height reserves space; outer strip must not clip post tops */
.fc-planner-page .fencing-display-result.fc-slat-scale {
    overflow-y: visible;
}

/* Slat + step-up raked: `.fc-slat-scale` rule above must not re-clamp vertical overflow */
.fencing-display-result.fc-slat-scale:has(.fencing-raked-panel) {
    overflow-y: visible;
    padding-top: 52px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fencing-display-result {
        margin-top: 0;
    }
}

.fc-content-tab-title {
    background: var(--fc-princeton-orange);
    color: var(--fc-white);
    padding: 10px 15px;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    border-top-right-radius: 16px;
}

@media (max-width: 992px) {
    .fc-content-tab-title {
        display: block;
        padding: 9px 20px;
        box-sizing: border-box;
    }
}

.fc-tab-title {
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .fc-tab-title {
        display: block;
        font-size: 14px;
        line-height: 20px;
    }
}

.fc-tab-subtitle {
    font-weight: 400;
}

@media (max-width: 992px) {
    .fc-tab-subtitle {
        display: block;
        font-size: 14px;
        line-height: 20px;
    }
}

.fencing-raked-panel {
    height: 159px !important;
    border-top: 0 !important;
}

.raked-panel-container {
    position: relative;
    top: -41px;
}

/* Left panel - A */
.fencing-left-panel-a {
    -webkit-clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    border-left: 3px solid var(--fc-alto);
}
.fencing-left-panel-a:hover {
    border-left: 3px solid var(--fc-princeton-orange) !important;
}

.fencing-left-panel-o-a {
    -webkit-clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    background: var(--fc-gray-nurse);
    padding-top: 2px;
}

@media (min-width: 1024px) {
    .fencing-left-panel-o-a:hover {
        background: var(--fc-princeton-orange);
    }
}

/* Right panel - A */
.fencing-right-panel-a {
    -webkit-clip-path: polygon(37% 25%, 70% 0, 100% 0, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 25%);
    clip-path: polygon(37% 25%, 70% 0, 100% 0, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 25%);
    border-right: 3px solid var(--fc-alto);

}
.fencing-right-panel-a:hover {
    border-right: 3px solid var(--fc-princeton-orange) !important;
}

.fencing-right-panel-o-a {
    -webkit-clip-path: polygon(37% 25%, 70% 0, 100% 0, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 25%);
    clip-path: polygon(37% 25%, 70% 0, 100% 0, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 25%);
    background: var(--fc-gray-nurse);
    padding-top: 2px;
}

@media (min-width: 1024px) {
    .fencing-right-panel-o-a:hover {
        background: var(--fc-princeton-orange);
    }
}

/* Left panel - B */
.fencing-left-panel-b {
    -webkit-clip-path: polygon(37% 0, 68% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 47%, 0 0);
    clip-path: polygon(38% 0, 69% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 47%, 0 0);
}

.fencing-left-panel-o-b {
    -webkit-clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    clip-path: polygon(37% 0, 70% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    padding-top: 2px;
    background: var(--fc-black);
}


@media (min-width: 1024px) {

    #fc-planning-form .fencing-left-panel-o-b:hover,
    #fc-planning-form .fencing-right-panel-o-b:hover {
        background: var(--fc-princeton-orange);
    }
}

/* Right panel - B */
.fencing-right-panel-b {
    -webkit-clip-path: polygon(37% 0, 68% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    clip-path: polygon(37% 0, 68% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
}

.fencing-right-panel-o-b {
    -webkit-clip-path: polygon(36.5% 0, 69% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    clip-path: polygon(36.5% 0, 69% 25%, 100% 25%, 100% 100%, 68% 100%, 32% 100%, 0 100%, 0% 43%, 0 0);
    padding-top: 2px;
    background: var(--fc-black);

    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.fencing-right-panel-o-b .fencing-panel-item-size {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.downloading-pdf .fencing-left-panel-o-b,
.downloading-pdf .fencing-right-panel-o-b {
    background: transparent;
}

.downloading-pdf .fencing-left-panel-o-b .fencing-panel-item {
    background: url(../img/webp/raked-top-left.webp) !important;
    background-size: contain !important;
    background-position: top;
    background-repeat: no-repeat !important;
}

.downloading-pdf .fencing-right-panel-o-b .fencing-panel-item {
    background: url(../img/webp/raked-top-right.webp) !important;
    background-size: contain !important;
    background-position: top;
    background-repeat: no-repeat !important;
}

.downloading-pdf .dl-page-separator {
    border: 1px solid var(--fc-white);
    height: 99px;
}

.dl-row {
    min-height: 230px;
    border: 1px solid var(--fc-white);
}


.raked-panel-post {
    margin-top: -50px !important;
}

.raked-panel {
    display: flex;
}

[data-group="b"] .panel-no-post {
    border: 2px dashed var(--fc-red) !important;
    background: var(--fc-white) !important;
    min-width: 0 !important;
}


[data-group="b"] .fencing-panel-spacing-number.no-post,
[data-group="a"] .fencing-panel-spacing-number.PTP90 {
    color: var(--fc-red);
    font-weight: 400;
}

/* Display Result */
.fencing-calculating {
    display: none;
    text-align: center;
    position: absolute;
    background: var(--fc-a-black-82);
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.fc-calculating-loader {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--fc-white);
}

/* Max Panel */
.fencing-max-panel {
    text-align: center;
}

/* Panel Controls */
.fencing-panel-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.fc-planner-summary-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    .fc-planner-summary-btn {
        margin-left: 0 !important;
        width: 100%;
    }
}

#fc-planner-summary-modal .fc-planner-summary-modal__content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}

#fc-planner-summary-modal .fc-planner-summary-modal__header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--fc-platinum, #eaeaea);
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}

#fc-planner-summary-modal .fc-planner-summary-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--fc-shark, #292929);
}

#fc-planner-summary-modal .fc-planner-summary-modal__subtitle {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--fc-dove-gray, #646464);
}

#fc-planner-summary-modal .fc-planner-summary-modal__body {
    padding: 1rem 1.25rem 1.25rem;
    background: #f4f6f8;
}

#fc-planner-summary-modal .fc-planner-summary-overview {
    margin-bottom: 1rem;
}

#fc-planner-summary-modal .fc-planner-summary-modal__dialog {
    max-width: 720px;
}

#fc-planner-summary-modal .fc-planner-summary-overview__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

#fc-planner-summary-modal .fc-planner-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

#fc-planner-summary-modal .fc-planner-summary-stat:first-child {
    flex: 0 0 auto;
    min-width: 6.5rem;
}

#fc-planner-summary-modal .fc-planner-summary-stat--quote {
    flex: 1 1 12rem;
}

#fc-planner-summary-modal .fc-planner-summary-stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-dove-gray, #646464);
}

#fc-planner-summary-modal .fc-planner-summary-stat__value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fc-shark, #292929);
}

#fc-planner-summary-modal .fc-planner-summary-stat__quote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

#fc-planner-summary-modal .fc-planner-summary-sections {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

#fc-planner-summary-modal .fc-planner-summary-dl {
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    margin: 0;
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows dt,
#fc-planner-summary-modal .fc-planner-summary-dl--rows dd {
    margin: 0;
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows dt {
    padding: 0.65rem 0.85rem 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fc-dove-gray, #646464);
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows dd {
    padding: 0 0.85rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--fc-cod-gray, #1e1e1e);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows dd:last-child {
    border-bottom: 0;
    padding-bottom: 0.75rem;
}

#fc-planner-summary-modal .fc-planner-summary-dl--rows dt.fc-planner-summary-row--spaced-top {
    padding-top: 0.85rem;
}

#fc-planner-summary-modal .fc-planner-summary-dl dt {
    font-weight: 600;
    color: var(--fc-shark, #1a1a1a);
    margin: 0;
}

#fc-planner-summary-modal .fc-planner-summary-dl dd {
    margin: 0;
    color: var(--fc-cod-gray, #333);
}

#fc-planner-summary-modal .fc-planner-summary-quote-id__value {
    min-width: 0;
    word-break: break-word;
}

#fc-planner-summary-modal .fc-planner-summary-quote-copy-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(246, 121, 37, 0.35);
    border-radius: 999px;
    background: rgba(246, 121, 37, 0.08);
    color: var(--fc-princeton-orange, #f67925);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-quote-copy-link i,
#fc-planner-summary-modal .fc-planner-summary-section__copy i {
    flex: 0 0 auto;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
    line-height: 1;
}

#fc-planner-summary-modal .fc-planner-summary-quote-copy-link:hover {
    background: rgba(246, 121, 37, 0.14);
    border-color: rgba(246, 121, 37, 0.55);
}

#fc-planner-summary-modal .fc-planner-summary-dl dt.fc-planner-summary-row--spaced-top,
#fc-planner-summary-modal .fc-planner-summary-dl dd.fc-planner-summary-row--spaced-top {
    padding-top: 0.65rem;
}

#fc-planner-summary-modal .fc-planner-summary-multiline {
    line-height: 1.5;
}

#fc-planner-summary-modal .fc-planner-summary-gate-only {
    font-weight: 700;
}

#fc-planner-summary-modal .fc-planner-summary-no-post {
    color: #b02a37;
    font-weight: 600;
}

#fc-planner-summary-modal .fc-planner-summary-section {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section--open {
    border-color: rgba(246, 121, 37, 0.35);
    box-shadow: 0 8px 20px rgba(246, 121, 37, 0.08);
    background: #fff4ed;
}

#fc-planner-summary-modal .fc-planner-summary-section--open.fc-planner-summary-section--incomplete {
    border-color: rgba(153, 153, 153, 0.35);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    background: #f0f0f0;
}

#fc-planner-summary-modal .fc-planner-summary-section__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: background-color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section__toggle:hover {
    background-color: #fff8f4;
}

#fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__toggle {
    background-color: transparent;
}

#fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__toggle:hover {
    background-color: rgba(246, 121, 37, 0.06);
}

#fc-planner-summary-modal .fc-planner-summary-section--open.fc-planner-summary-section--incomplete .fc-planner-summary-section__toggle {
    background-color: transparent;
}

#fc-planner-summary-modal .fc-planner-summary-section--open.fc-planner-summary-section--incomplete .fc-planner-summary-section__toggle:hover {
    background-color: rgba(153, 153, 153, 0.08);
}

#fc-planner-summary-modal .fc-planner-summary-section__toggle:active,
#fc-planner-summary-modal .fc-planner-summary-section__toggle.is-pressed {
    transform: none;
    box-shadow: none;
    filter: none;
}

#fc-planner-summary-modal .fc-planner-summary-section__toggle:focus-visible {
    outline: 2px solid var(--fc-princeton-orange, #f07622);
    outline-offset: -2px;
}

#fc-planner-summary-modal .fc-planner-summary-section__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

#fc-planner-summary-modal .fc-planner-summary-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(246, 121, 37, 0.12);
    color: var(--fc-princeton-orange, #f67925);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fc-shark, #292929);
    transition: color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section__chevron {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--fc-princeton-orange, #f67925);
    transition: transform 0.28s ease, color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__chevron {
    transform: rotate(180deg);
}

#fc-planner-summary-modal .fc-planner-summary-section--incomplete .fc-planner-summary-section__badge,
#fc-planner-summary-modal .fc-planner-summary-section--incomplete .fc-planner-summary-section__name,
#fc-planner-summary-modal .fc-planner-summary-section--incomplete .fc-planner-summary-section__chevron {
    color: var(--fc-gray-chateau, #999);
}

#fc-planner-summary-modal .fc-planner-summary-section--incomplete .fc-planner-summary-section__badge {
    background: rgba(153, 153, 153, 0.14);
}

#fc-planner-summary-modal .fc-planner-summary-section__body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.32s ease;
    border-top: 1px solid transparent;
}

#fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__body {
    grid-template-rows: 1fr;
    border-top-color: rgba(15, 23, 42, 0.06);
}

#fc-planner-summary-modal .fc-planner-summary-section__body-inner {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #fafbfc;
}

#fc-planner-summary-modal .fc-planner-summary-section__copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    background: #fff;
    color: var(--fc-shark, #292929);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section__copy:hover {
    background: #fff;
    border-color: rgba(246, 121, 37, 0.35);
    color: var(--fc-princeton-orange, #f67925);
}

#fc-planner-summary-modal .fc-planner-summary-section__body-inner:hover .fc-planner-summary-section__copy,
#fc-planner-summary-modal .fc-planner-summary-section__copy:focus-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#fc-planner-summary-modal .fc-planner-summary-section__body-inner > .fc-planner-summary-dl {
    padding-top: 0.5rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.24s ease, transform 0.32s ease;
}

#fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__body-inner > .fc-planner-summary-dl {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.06s;
}

@media (prefers-reduced-motion: reduce) {
    #fc-planner-summary-modal .fc-planner-summary-section__body,
    #fc-planner-summary-modal .fc-planner-summary-section__body-inner > .fc-planner-summary-dl,
    #fc-planner-summary-modal .fc-planner-summary-section__chevron,
    #fc-planner-summary-modal .fc-planner-summary-section__title {
        transition: none;
    }

    #fc-planner-summary-modal .fc-planner-summary-section__body {
        grid-template-rows: 0fr;
    }

    #fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__body {
        grid-template-rows: 1fr;
    }

    #fc-planner-summary-modal .fc-planner-summary-section--open .fc-planner-summary-section__body-inner > .fc-planner-summary-dl {
        opacity: 1;
        transform: none;
    }

    #fc-planner-summary-modal .fc-planner-summary-section:not(.fc-planner-summary-section--open) .fc-planner-summary-section__body-inner > .fc-planner-summary-dl {
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    #fc-planner-summary-modal .fc-planner-summary-modal__header,
    #fc-planner-summary-modal .fc-planner-summary-modal__body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #fc-planner-summary-modal .fc-planner-summary-overview__grid {
        flex-direction: column;
    }

    #fc-planner-summary-modal .fc-planner-summary-stat--quote {
        flex: 1 1 auto;
    }

    #fc-planner-summary-modal .fc-planner-summary-stat__quote-row {
        flex-direction: column;
        align-items: flex-start;
    }

    #fc-planner-summary-modal .fc-planner-summary-dl {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    #fc-planner-summary-modal .fc-planner-summary-dl dt {
        margin-top: 0.35rem;
    }

    #fc-planner-summary-modal .fc-planner-summary-section__body-inner > .fc-planner-summary-dl {
        padding-right: 0.85rem;
    }

    #fc-planner-summary-modal .fc-planner-summary-section__copy {
        position: static;
        display: inline-flex;
        margin: 0.5rem 0.85rem 0 auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 992px) {
    .fencing-panel-controls {
        margin-bottom: 16px;
    }
}

.fencing-panel-controls .btn-fc {
    margin: 0 10px 0 0;
    font-weight: 500;
    /** @TODO revisit, see if buttons can be scrollable to remove !important **/
}

.fencing-panel-controls .btn-fc.fc-mb-1 {
    margin-bottom: 0 !important;
}

@media (max-width: 992px) {
    .fencing-panel-controls .btn-fc.fc-mb-1 {
        margin-bottom: 16px !important;
    }

    .fencing-panel-controls .btn-fc.fc-mb-1:last-child {
        margin-bottom: 0 !important;
    }
}

.fencing-panel-controls .btn-fc.fc-btn-active {
    color: var(--fc-white);
    border-color: var(--fc-princeton-orange);
}

.fencing-panel-controls .btn-fc.fc-btn-active span {
    color: var(--fc-white);
}

/* Step 3: Gate ONLY — panel/post controls disabled; gate + left/right side stay clickable */
.fencing-panel-controls .fencing-btn-modal:disabled,
.fencing-panel-controls .fencing-btn-modal.fc-panel-control--gate-only-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    user-select: none;
    color: var(--fc-gray-chateau) !important;
    border-color: var(--fc-gray-nurse) !important;
    background-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: none;
    filter: grayscale(0.35);
}

.fencing-panel-controls .fencing-btn-modal:disabled span,
.fencing-panel-controls .fencing-btn-modal.fc-panel-control--gate-only-disabled span {
    color: var(--fc-gray-chateau) !important;
}

@media (min-width: 1024px) {
    .fencing-panel-controls .fencing-btn-modal:disabled:hover,
    .fencing-panel-controls .fencing-btn-modal.fc-panel-control--gate-only-disabled:hover {
        border-color: var(--fc-gray-nurse) !important;
        background-color: rgba(255, 255, 255, 0.65) !important;
        color: var(--fc-gray-chateau) !important;
    }

    .fencing-panel-controls .fencing-btn-modal:disabled:hover span,
    .fencing-panel-controls .fencing-btn-modal.fc-panel-control--gate-only-disabled:hover span {
        color: var(--fc-gray-chateau) !important;
    }
}

@media (min-width: 1024px) {
    .fencing-panel-controls .btn-fc:hover {
        border-color: var(--fc-princeton-orange);
        background-color: var(--fc-princeton-orange);
        color: var(--fc-white);
    }

    .fencing-panel-controls .btn-fc:hover span {
        color: inherit;
    }
}

@media (max-width: 992px) {
    .fencing-panel-controls .btn-fc {
        display: inline-block;
        width: auto;
        margin-right: 12px;
        padding: 12px 24px;
    }
}

@media (max-width: 768px) {
    .fencing-panel-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .fencing-panel-controls .btn-fc {
        width: calc(50% - 6px);
        margin-right: 0;
    }

    .fencing-panel-controls .btn-fc.fc-mb-1 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 600px) {
    .fencing-panel-controls .btn-fc {
        padding: 12px 8px;
    }
}

@media (max-width: 340px) {
    .fencing-panel-controls .btn-fc {
        padding: 12px 3px;
    }
}

.fencing-panel-controls .btn-fc span {
    color: var(--fc-princeton-orange);
}

.fencing-panel-controls #btn-left_side:before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url(../img/webp/btn-arrow.webp) no-repeat center;
    width: 20px;
    height: 12px;
    background-size: 100% auto;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

@media (min-width: 1024px) {

    .fencing-panel-controls #btn-left_side.fc-btn-active:before,
    .fencing-panel-controls #btn-left_side:hover:before {
        background-image: url(../img/webp/btn-arrow-white.webp);
    }
}

.fencing-panel-controls #btn-right_side:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background: url(../img/webp/btn-arrow.webp) no-repeat center;
    width: 20px;
    height: 12px;
    background-size: 100% auto;
    margin-left: 8px;
    transform: rotate(180deg);
    position: relative;
    top: -1px;
}

@media (min-width: 1024px) {

    .fencing-panel-controls #btn-right_side.fc-btn-active:after,
    .fencing-panel-controls #btn-right_side:hover:after {
        background-image: url(../img/webp/btn-arrow-white.webp);
    }
}

.fencing-panel-controls div {
    display: none;
}

.fencing-section {
    padding: 20px;
    border-radius: 7px;
    margin-bottom: 16px;
    position: relative;
}

@media (max-width: 992px) {
    .fencing-section {
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.fencing-section--no-padding {
    padding: 0;
}

@media (max-width: 992px) {
    .fencing-section--no-padding {
        padding: 0;
    }
}

.fencing-section__top {
    padding: 20px;
}

@media (max-width: 992px) {
    .fencing-section__top {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.fencing-section__bottom {
    border-top: 2px solid var(--fc-bright-gray);
    padding: 20px;
}

@media (max-width: 768px) {
    .fencing-section__bottom .btn {
        font-size: 13px;
    }
}

.fencing-section h4 {
    margin-bottom: 0;
}

.fencing-section__cmp {
    position: relative;
}

.fencing-section__cmp:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.fencing-section__step-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .fencing-section__step-label {
        margin-bottom: 16px;
    }
}

.fencing-section--no-radius-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.fencing-section.fencing-styles {
    margin-top: 24px;
}


@media (max-width: 992px) {
    .fencing-section--step3 {
        margin-bottom: 0;
    }
}

@media (max-width: 992px) {
    .fencing-section--step2 h4.fencing-content-title {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 992px) {
    .fencing-section--step3 h4.fencing-content-title {
        margin-bottom: 10px !important;
    }
}


.fencing-section .fencing-tab-add {
    border-radius: 8px;
}

@media (max-width: 992px) {
    .fencing-section .btn-delete-fence {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .fc-project-plan .fencing-section {
        padding: 16px;
    }
}


.fencing-section__controls a {
    display: flex;
    font-size: 12px;
}

.fc-zoom-progress {
    background-color: var(--fc-bright-gray);
    width: 74px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fencing-styles {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .fencing-styles {
        display: inline-block;
    }
}

.fc-planner-page .fencing-styles__area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

/* Step 1 — skeleton (shown until Slick init); 2 cards mobile / 4 tablet / 6 desktop */
@keyframes fc-fencing-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Sweep across the main fence image placeholder (stronger than grey-on-grey shimmer) */
@keyframes fc-fencing-skeleton-img-sweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

.fc-planner-page .fencing-styles__area .fc-fencing-styles-skeleton {
    display: none;
}

.fc-planner-page .fencing-styles__area.fencing-styles-slick-pending:not(.fencing-styles-slick-ready) .fc-fencing-styles-skeleton {
    display: block;
}

.fc-planner-page .fencing-styles__area.fencing-styles-slick-ready .fc-fencing-styles-skeleton {
    display: none !important;
}

.fc-fencing-styles-skeleton__track {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
    width: calc(100% + 12px);
    box-sizing: border-box;
}

.fc-fencing-styles-skeleton__card {
    box-sizing: border-box;
    padding: 0 6px 12px;
    flex: 0 0 50%;
    max-width: 50%;
}

.fc-fencing-styles-skeleton__card > div {
    background: var(--fc-white);
    position: relative;
}

/* Skeleton card count: 2 mobile / 4 tablet / 6 desktop (matches Slick slidesToShow) */
@media (max-width: 767.98px) {
    .fc-planner-page .fc-fencing-styles-skeleton__track .fc-fencing-styles-skeleton__card:nth-child(n + 3) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .fc-fencing-styles-skeleton__card {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .fc-planner-page .fc-fencing-styles-skeleton__track .fc-fencing-styles-skeleton__card:nth-child(n + 5) {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .fc-fencing-styles-skeleton__card {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }
}

/* Mirror .fencing-style-img + img: border, padding, fluid height from width (like width:100% images) */
.fc-fencing-styles-skeleton__img-shell {
    border: 2px solid var(--fc-alto-4);
    border-radius: 8px 8px 0 0;
    padding: 10px;
    box-sizing: border-box;
}

.fc-fencing-styles-skeleton__img-ph {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: var(--fc-wild-sand);
}

.fc-fencing-styles-skeleton__img-ph::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fc-fencing-skeleton-img-sweep 1.35s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .fc-fencing-styles-skeleton__img-ph::after {
        animation: none;
    }
}

/* Mirror .fencing-style-title: border, padding, ~two-line title height */
.fc-fencing-styles-skeleton__title-shell {
    text-align: center;
    font-size: 15px;
    line-height: 1.35;
    border: 2px solid var(--fc-wild-sand);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    background: var(--fc-alabaster);
    box-sizing: border-box;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-fencing-styles-skeleton__title-ph {
    display: block;
    width: 72%;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--fc-alabaster) 0%,
        #e2e2e2 50%,
        var(--fc-alabaster) 100%
    );
    background-size: 200% 100%;
    animation: fc-fencing-skeleton-shimmer 1.05s ease-in-out infinite;
    animation-delay: 0.08s;
}

@media (max-width: 768px) {
    .fc-fencing-styles-skeleton__title-shell {
        font-size: 14px;
    }
}

/* Step 1 carousel: hide until Slick init — collapse out of flow so raw floats don’t leave a tall white gap */
.fc-planner-page .fencing-styles__area.fencing-styles-slick-pending:not(.fencing-styles-slick-ready),
.fc-planner-page .fencing-styles.fencing-styles-slick-pending:not(.fencing-styles-slick-ready) {
    position: relative;
    min-height: 0;
}

.fc-planner-page .fencing-styles__area.fencing-styles-slick-pending:not(.fencing-styles-slick-ready) .js-fencing-styles-slick,
.fc-planner-page .fencing-styles.fencing-styles-slick-pending:not(.fencing-styles-slick-ready) .js-fencing-styles-slick {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fc-planner-page .fencing-styles__area.fencing-styles-slick-ready .js-fencing-styles-slick.slick-initialized,
.fc-planner-page .fencing-styles.fencing-styles-slick-ready .js-fencing-styles-slick.slick-initialized {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease-out;
}

.fc-planner-page .js-fencing-styles-slick.slick-initialized {
    width: 100%;
    max-width: 100%;
}

.fc-planner-page .js-fencing-styles-slick .slick-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 14px;
}

/* Load Quote modal — inline error with icon */
#load-quote .fc-load-quote-error {
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(181, 0, 61, 0.18);
    background: linear-gradient(135deg, #fff8f8 0%, #fef2f4 100%);
    box-shadow: 0 2px 10px rgba(181, 0, 61, 0.08);
    overflow: hidden;
}

#load-quote .fc-load-quote-error__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

#load-quote .fc-load-quote-error__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(181, 0, 61, 0.1);
    color: var(--fc-claret, #b5003d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

#load-quote .fc-load-quote-error__text {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--fc-shark, #292929);
    padding-top: 0.25rem;
}
#load-quote [name="qid"] {
    font-weight: 700;
    font-family: 'League Gothic';
    font-size: 3em !important;
    letter-spacing: 3px;
}

/* Mobile-only Load Quote button (below slick dots; desktop uses carousel tile) */

.fc-planner-page .fc-load-quote-mobile-only {
    display: none !important;
}


@media (max-width: 991.98px) {
    .fc-planner-page .fencing-styles__area.fencing-styles-slick-pending:not(.fencing-styles-slick-ready) .fc-load-quote-mobile-only {
        display: none !important;
    }

    .fc-planner-page .fc-load-quote-mobile-only {
        display: block !important;
        margin-top: 14px;
        padding-bottom: 2px;
    }

    .fc-planner-page .fencing-styles-load-quote-mobile .fencing-styles-load-quote-btn {
        width: 100%;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;
        font-size: 0.8125rem;
        letter-spacing: 0.03em;
        box-sizing: border-box;
    }
}

/* Fallback grid before / without Slick (2 / 4 / 6 per fencing-styles-slick.js) */
.fc-planner-page .js-fencing-styles-slick:not(.slick-initialized) .fencing-styles-slide {
    float: left;
    width: 50%;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .fc-planner-page .js-fencing-styles-slick:not(.slick-initialized) .fencing-styles-slide {
        width: 25%;
    }
}
@media (min-width: 992px) {
    .fc-planner-page .js-fencing-styles-slick:not(.slick-initialized) .fencing-styles-slide {
        width: calc(100% / 6);
    }
}

.load-quote,
.fencing-style-item {
    cursor: pointer;
    float: left;
    background: var(--fc-white);
    position: relative;
    transition: all 0.2s ease;
}

/* Slick layout — column grid classes removed from markup */
.fc-planner-page .js-fencing-styles-slick .fencing-styles-slide {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
}



.load-quote .fencing-style-img {
    position: relative;
    opacity: 1 !important;
    border: 2px solid var(--fc-dove-gray) !important;
}

.load-quote .lq-icon {
    font-size: 1.5em;
    margin-bottom: 10px;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), color 0.3s ease;
}

@media (min-width: 992px) {
    .fc-planner-page .load-quote .lq-icon {
        font-size: 2.35em;
    }
}

.load-quote .fencing-style-title {
    border: 2px solid var(--fc-dove-gray) !important;
    border-top: 0 !important;
}

.lq-mid-desc {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    line-height: 20px;
}

.load-quote:hover .fencing-style-title,
.load-quote:hover .fencing-style-img {
    border-color: var(--fc-princeton-orange) !important;
}

.load-quote .fencing-style-title,
.fencing-style-item .fencing-style-title {
    text-align: center;
    font-size: 15px;
    border: 2px solid var(--fc-wild-sand);
    border-top: 0;
    background: var(--fc-alabaster);
    font-weight: 400;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

@media (max-width: 768px) {
    .load-quote .fencing-style-title,
    .fencing-style-item .fencing-style-title {
        font-size: 14px;
    }
}

.load-quote .fencing-style-item img,
.fencing-style-item .fencing-style-item img {
    width: 100%;
    margin-bottom: 10px;
}

.load-quote .fencing-style-img,
.fencing-style-item .fencing-style-img {
    opacity: 0.5;
    overflow: hidden;
    transition: opacity 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    border: 2px solid var(--fc-alto-4);
    border-radius: 8px 8px 0 0;
    padding: 10px;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable {
    cursor: not-allowed;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable .fencing-style-img {
    position: relative;
    opacity: 1;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable .fencing-style-img img {
    filter: grayscale(1);
    opacity: 0.45;
}

.fc-planner-page .fencing-style-unavailable {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable .fencing-style-title {
    color: #94a3b8;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable:hover > div,
.fc-planner-page .fencing-style-item.fencing-style-item--unavailable:hover .fencing-style-img,
.fc-planner-page .fencing-style-item.fencing-style-item--unavailable:hover .fencing-style-img img,
.fc-planner-page .fencing-style-item.fencing-style-item--unavailable:hover .fencing-style-title {
    transform: none;
    box-shadow: none;
    border-color: var(--fc-alto-4);
    opacity: inherit;
}

.fc-planner-page .fencing-style-item.fencing-style-item--unavailable.fsi-selected .fencing-style-img,
.fc-planner-page .fencing-style-item.fencing-style-item--unavailable.fsi-selected .fencing-style-title {
    border-color: var(--fc-alto-4);
}

.fencing-style-img img {
    width: 100%;
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fencing-style-item .fencing-style-btn {
    background: var(--fc-bootstrap-danger);
    width: 27px;
    height: 27px;
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--fc-white);
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    border: 0;
    border-bottom: 3px solid var(--fc-bright-maroon) !important;
    z-index: 3;
    transform: none;
}

.fencing-style-item .fencing-style-btn:hover {
    background: var(--fc-shiraz);
}

.fencing-style-item.fsi-selected .fencing-style-btn {
    display: block;
}

.fencing-style-item.fsi-selected .fencing-style-img {
    border-color: var(--fc-princeton-orange);
    opacity: 1;
}

.fencing-style-item .fc-fence-reset-all {
    display: none !important;
}

.fencing-style-item.fsi-selected .fc-fence-reset-all {
    display: block !important;
}

.fencing-style-item.fsi-selected .fencing-style-title {
    color: var(--fc-white);
    background: var(--fc-princeton-orange);
    font-weight: 400;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    border-color: var(--fc-princeton-orange);
}

/* Step 1 — modern fence style card hover */
.fc-planner-page .fencing-style-item > div,
.fc-planner-page .load-quote > div {
    position: relative;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.35s ease;
}

.fc-planner-page .fencing-style-item .fencing-style-btn {
    transition: background-color 0.2s ease;
}

.fc-planner-page .fencing-style-item:hover .fencing-style-btn {
    transform: none;
}

.fc-planner-page .fencing-style-item:not(.fsi-selected):hover > div {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px var(--fc-a-orange-22), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.fc-planner-page .fencing-style-item:not(.fsi-selected):hover .fencing-style-img {
    opacity: 1;
    border-color: var(--fc-princeton-orange);
}

.fc-planner-page .fencing-style-item:not(.fsi-selected):hover .fencing-style-img img {
    transform: scale(1.06);
}

.fc-planner-page .fencing-style-item:not(.fsi-selected):hover .fencing-style-title {
    border-color: var(--fc-princeton-orange);
    background: var(--fc-white);
    color: var(--fc-princeton-orange);
}

.fc-planner-page .fencing-style-item.fsi-selected:hover > div {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--fc-a-orange-35), 0 4px 14px rgba(0, 0, 0, 0.1);
}

.fc-planner-page .fencing-style-item.fsi-selected:hover .fencing-style-img img {
    transform: scale(1.03);
}

.fc-planner-page .load-quote:hover > div {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px var(--fc-a-orange-22), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.fc-planner-page .load-quote:hover .lq-icon {
    transform: scale(1.08);
    color: var(--fc-princeton-orange);
}

@media (prefers-reduced-motion: reduce) {
    .fc-planner-page .fencing-style-item > div,
    .fc-planner-page .load-quote > div,
    .fc-planner-page .fencing-style-item .fencing-style-img,
    .fc-planner-page .fencing-style-item .fencing-style-img img,
    .fc-planner-page .fencing-style-item .fencing-style-title,
    .fc-planner-page .load-quote .lq-icon {
        transition: none !important;
    }

    .fc-planner-page .fencing-style-item:hover > div,
    .fc-planner-page .load-quote:hover > div,
    .fc-planner-page .fencing-style-item:hover .fencing-style-img img {
        transform: none !important;
    }
}

/* Step 1 — Slick carousel (2 / 4 / 6 per viewport; see fencing-styles-slick.js) */
.fc-planner-page .js-fencing-styles-slick.slick-initialized .slick-slide > div {
    height: 100%;
}

/* Floating prev/next — Font Awesome chevrons (custom arrows in fencing-styles-slick.js) */
.fc-planner-page .js-fencing-styles-slick.slick-slider {
    position: relative;
    padding-bottom: 58px;
}

.fc-planner-page .js-fencing-styles-slick .slick-prev:before,
.fc-planner-page .js-fencing-styles-slick .slick-next:before {
    display: none !important;
    content: none !important;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow {
    position: absolute;
    top: 42%;
    z-index: 4;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow:focus-visible {
    outline: 2px solid var(--fc-princeton-orange);
    outline-offset: 2px;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow__icon {
    font-size: 1.05rem;
    color: #2d2d2d;
    transition: color 0.2s ease, transform 0.2s ease;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow:hover {
    background: var(--fc-white);
    box-shadow:
        0 2px 6px rgba(246, 121, 37, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1.04);
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow:hover .fencing-styles-arrow__icon {
    color: var(--fc-princeton-orange);
}

.fc-planner-page .js-fencing-styles-slick .slick-prev.fencing-styles-arrow {
    left: 6px;
}

.fc-planner-page .js-fencing-styles-slick .slick-next.fencing-styles-arrow {
    right: 6px;
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow.slick-disabled {
    opacity: 0.28;
    pointer-events: none;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow.slick-disabled .fencing-styles-arrow__icon {
    color: #9a9a9a;
}

/* Hide pager when only one page (0–1 dot); tighten bottom padding without dot row */
.fc-planner-page .fencing-styles__area.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
.fc-planner-page .fencing-styles.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
.fc-planner-page .js-fencing-styles-slick.slick-slider:has(.slick-dots li:only-child) {
    padding-bottom: 0;
}

.fc-planner-page .fencing-styles__area.fencing-styles-slick-single-page .slick-dots,
.fc-planner-page .fencing-styles.fencing-styles-slick-single-page .slick-dots,
.fc-planner-page .js-fencing-styles-slick .slick-dots:has(li:only-child) {
    display: none !important;
}

/* Bullets — centered below slides */
.fc-planner-page .js-fencing-styles-slick .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 120px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.fc-planner-page .js-fencing-styles-slick .slick-dots li {
    position: relative;
    display: inline-flex;
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
}

.fc-planner-page .js-fencing-styles-slick .slick-dots li button {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.fc-planner-page .js-fencing-styles-slick .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    opacity: 0.45;
    color: var(--fc-black);
}

.fc-planner-page .js-fencing-styles-slick .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--fc-princeton-orange);
}

@media (max-width: 767.98px) {

    /* Planner Slick: arrows only on mobile — no bullet pager */
    .fc-planner-page .js-fencing-styles-slick .slick-dots,
    .fc-planner-page .js-fc-color-options-slick .slick-dots {
        display: none !important;
    }

    .fc-planner-page .js-fencing-styles-slick.slick-slider,
    .fc-planner-page .js-fc-color-options-slick.slick-slider {
        padding-bottom: 26px;
    }

    .fc-planner-page .fencing-styles__area.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
    .fc-planner-page .fencing-styles.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
    .fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-single-page .js-fc-color-options-slick.slick-slider {
        padding-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .fc-planner-page .js-fencing-styles-slick.slick-slider {
        padding-bottom: 54px;
    }

    .fc-planner-page .fencing-styles__area.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
    .fc-planner-page .fencing-styles.fencing-styles-slick-single-page .js-fencing-styles-slick.slick-slider,
    .fc-planner-page .js-fencing-styles-slick.slick-slider:has(.slick-dots li:only-child) {
        padding-bottom: 26px;
    }
}

@media (max-width: 991.98px) {
        width: 42px;
        height: 42px;
    }

    .fc-planner-page .js-fencing-styles-slick .fencing-styles-arrow__icon {
        font-size: 0.95rem;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-prev.fencing-styles-arrow {
        left: 2px;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-next.fencing-styles-arrow {
        right: 2px;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-dots {
        max-width: calc(100% - 96px);
        gap: 12px;
        bottom: 6px;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-dots li button {
        width: 20px;
        height: 20px;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-dots li button:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    .fc-planner-page .js-fencing-styles-slick .slick-dots li.slick-active button:before {
        opacity: 1;
        color: var(--fc-princeton-orange);
    }
}

/* Step 4 — Colour options Slick (2 / 4 / 6; fc-color-options-slick.js) — mirrors fencing-styles carousel chrome */
.fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-pending:not(.fc-color-options-slick-ready) {
    position: relative;
    min-height: 0;
}

.fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-pending:not(.fc-color-options-slick-ready) .js-fc-color-options-slick {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-ready .js-fc-color-options-slick.slick-initialized {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease-out;
}

.fc-planner-page .js-fc-color-options-slick.slick-initialized .slick-slide > div {
    height: 100%;
}

/* Left-align the row: Slick otherwise sets margin on .slick-track so a short last row is centered */
.fc-planner-page .js-fc-color-options-slick .slick-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.fc-planner-page .js-fc-color-options-slick .slick-track {
    margin-left: 0 !important;
}

.fc-planner-page .js-fc-color-options-slick .slick-slide {
    text-align: left;
}

.fc-planner-page .js-fc-color-options-slick .fc-color-options__slide {
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}

.fc-planner-page .fc-step-4 .fc-card:has(.fc-color-options-slick-area),
.fc-planner-page .fc-step-4 .fc-card .fc-card-body:has(.fc-color-options-slick-area) {
    overflow: visible;
}

/* Default .fencing-section uses overflow:hidden — clips arrows placed outside the colour card */
.fc-planner-page .fc-step-4 .fencing-section,
.fc-planner-page .fc-step-4 .fencing-section__top {
    overflow: visible;
}

.fc-planner-page .fc-planner-color-options-wrap {
    position: relative;
    z-index: 3;
}

.fc-planner-page .fc-color-options-slick-area {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.fc-planner-page .js-fc-color-options-slick.slick-slider {
    position: relative;
    padding-bottom: 40px;
}


/* Arrows appended to .fc-color-options-slick-area (outside the slide strip / card padding) */
.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow {
    position: absolute;
    z-index: 20;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow:focus-visible {
    outline: 2px solid var(--fc-princeton-orange);
    outline-offset: 2px;
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow__inner {
    position: absolute;
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1.05rem;
    line-height: 1;
    color: #2d2d2d;
    transition: color 0.2s ease, transform 0.2s ease;
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow:hover {
    background: var(--fc-white);
    box-shadow:
        0 2px 6px rgba(246, 121, 37, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1.04);
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow:hover .fencing-styles-arrow__icon {
    color: var(--fc-princeton-orange);
}


.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow.slick-disabled {
    opacity: 0.28;
    pointer-events: none;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow.slick-disabled .fencing-styles-arrow__icon {
    color: #9a9a9a;
}

.fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-single-page .js-fc-color-options-slick.slick-slider,
.fc-planner-page .js-fc-color-options-slick.slick-slider:has(.slick-dots li:only-child) {
    padding-bottom: 0;
}

.fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-single-page .slick-dots,
.fc-planner-page .js-fc-color-options-slick .slick-dots:has(li:only-child) {
    display: none !important;
}

.fc-planner-page .js-fc-color-options-slick .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 120px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.fc-planner-page .js-fc-color-options-slick .slick-dots li {
    position: relative;
    display: inline-flex;
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
}

.fc-planner-page .js-fc-color-options-slick .slick-dots li button {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.fc-planner-page .js-fc-color-options-slick .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    opacity: 0.45;
    color: var(--fc-black);
}

.fc-planner-page .js-fc-color-options-slick .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--fc-princeton-orange);
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .fc-planner-page .js-fc-color-options-slick.slick-slider {
        padding-bottom: 40px;
    }

    .fc-planner-page .fc-color-options-slick-area.fc-color-options-slick-single-page .js-fc-color-options-slick.slick-slider,
    .fc-planner-page .js-fc-color-options-slick.slick-slider:has(.slick-dots li:only-child) {
        padding-bottom: 26px;
    }
}

@media (max-width: 991.98px) {

    .fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow {
        width: 42px;
        height: 42px;
    }

    .fc-planner-page .fc-color-options-slick-area .fencing-styles-arrow__icon {
        font-size: 0.95rem;
    }

    .fc-planner-page .fc-color-options-slick-area .slick-prev.fencing-styles-arrow {
        left: -44px;
    }

    .fc-planner-page .fc-color-options-slick-area .slick-next.fencing-styles-arrow {
        right: -44px;
    }

    .fc-planner-page .js-fc-color-options-slick .slick-dots {
        max-width: calc(100% - 96px);
        gap: 12px;
        bottom: 6px;
    }

    .fc-planner-page .js-fc-color-options-slick .slick-dots li button {
        width: 20px;
        height: 20px;
    }

    .fc-planner-page .js-fc-color-options-slick .slick-dots li button:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    .fc-planner-page .js-fc-color-options-slick .slick-dots li.slick-active button:before {
        opacity: 1;
        color: var(--fc-princeton-orange);
    }
}

/* Narrow screens: keep arrows in side gutters so they stay visible (no negative offset past viewport) */
@media (max-width: 575.98px) {
    .fc-planner-page .fc-color-options-slick-area {
        padding-left: 44px;
        padding-right: 44px;
        box-sizing: border-box;
    }

    .fc-planner-page .fc-color-options-slick-area .slick-prev.fencing-styles-arrow {
        left: 0;
    }

    .fc-planner-page .fc-color-options-slick-area .slick-next.fencing-styles-arrow {
        right: 0;
    }
}

.fencing-measurement .fc-step-2-alert.fc-alert-gray {
    max-width: 431px;
    padding: 16px;
}

@media (max-width: 992px) {
    .fencing-measurement .fc-step-2-alert.fc-alert-gray {
        margin-top: 24px;
        max-width: 100%;
    }
}

/* Measurement */
.fencing-measurement-box {
    display: flex;
    position: relative;
}
.fc-step2-height-slot .fencing-measurement-box .fencing-mb-input,
.fc-gate-modal-gate-only-height-row .fencing-measurement-box .fencing-mb-input {
    margin-right: 0 !important;
}

@media (max-width: 480px) {
    .fencing-measurement-box {
        display: block;
    }
}

.fencing-measurement-box .btn-fc {
    margin-top: 0;
}

@media (max-width: 480px) {
    .fencing-measurement-box .btn-fc {
        margin-top: 8px;
    }
}

.fencing-measurement .fc-col-half {
    padding: 0;
}

@media (max-width: 992px) {
    .fencing-measurement .fc-col-half {
        float: none;
        width: 100%;
    }
}

.fencing-measurement .fc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 992px) {
    .fencing-measurement .fc-row {
        display: block;
    }
}

.fencing-mb-input {
    border: 1px solid var(--fc-dark-gray);
    display: grid;
    border-radius: 8px;
    align-items: center;
    position: relative;
    margin-right: 15px;
    width: 100%;
}


@media (max-width: 480px) {
    .fencing-mb-input {
        width: 100%;
        margin-bottom: 15px;
    }
}

.fencing-mb-input input {
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    border: 0;
    outline: none;
    color: var(--fc-black);
}

@media (max-width: 992px) {
    .fencing-mb-input input {
        max-width: 100%;
    }
}

.fencing-mb-input span {
    color: var(--fc-granite-gray);
    font-weight: 400;
    font-size: 16px;
}

@media (max-width: 992px) {
    .ftm-measurement {
        line-height: 1;
    }
}

/* Project details */
.fc-project-plan-page .fc-project-details-edit-hint {
    color: var(--fc-princeton-orange);
}

.fc-project-plan-page .fc-edit-zone:has(.project-details--editable) .fc-project-details-edit-hint {
    display: block !important;
}

.fc-project-details .fc-form-group {
    display: none;
}

.fc-project-details .fc-col-half {
    padding: 0;
    width: calc(50% - 12px);
}

@media (max-width: 992px) {
    .fc-project-details .fc-col-half {
        width: 100%;
    }
}

.fc-project-details .fc-row-container {
    margin: 0;
    justify-content: space-between;
}

.fc-project-details .fencing-section__cmp {
    overflow: hidden;
}

.fc-project-details td:first-child {
    color: var(--fc-granite-gray);
}

.fc-project-plan-page .fc-project-details .fc-project-details-value-list {
    margin: 0;
    padding-left: 1.25rem;
}

.fc-project-plan-page .fc-project-details .fc-project-details-value-list li {
    margin-bottom: 0.2rem;
}

.fc-project-plan-page .fc-project-details .fc-project-details-value-list li:last-child {
    margin-bottom: 0;
}

.fc-project-details .fc-table--colour strong {
    font-weight: 600;
    color: inherit;
}

.fc-project-details .fc-table--colour .fc-colour-item {
    box-sizing: border-box;
}


.ally {
    background-image: url(../img/webp/ally-thin.webp?v=1);
    background-repeat: repeat;
    background-color: initial;
    border-color: var(--fc-black);
    background-size: 9px;
    background-color: var(--fc-white);
}

/* Slat Fence: Ally border color */
.fencing-panel-container[data-type="slat"] .ally,
.fencing-panel-container[data-type="slat_fence_infill"] .ally {
    border-color: var(--fc-seashell);
}

/* Slat Fence: render Ally texture horizontally (slat-style) */
.fencing-panel-container[data-type="slat"],
.fencing-panel-container[data-type="slat_fence_infill"] {
    --fc-slat-gap-px: 1px;
    --fc-slat-size-px: 7px;
    --fc-slat-post-bury-px: 0px;
}

.fencing-panel-container[data-type="slat"] .ally,
.fencing-panel-container[data-type="slat"] .offcut-body,
.fencing-panel-container[data-type="slat_fence_infill"] .ally,
.fencing-panel-container[data-type="slat_fence_infill"] .offcut-body {
    background-image: repeating-linear-gradient(
        to bottom,
        var(--fc-white) 0,
        var(--fc-white) var(--fc-slat-gap-px, 1px),
        var(--fc-nickel) var(--fc-slat-gap-px, 1px),
        var(--fc-nickel) calc(var(--fc-slat-gap-px, 1px) + var(--fc-slat-size-px, 7px))
    ) !important;
    background-repeat: repeat !important;
    background-size: auto !important;
}

/* Slat Fence: scale post height from Max Fence Height (mm) */
.fencing-panel-container[data-type="slat"] .panel-post[data-cart-key="panel_post"],
.fencing-panel-container[data-type="slat"] .panel-post[data-cart-key="raked_post"],
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post[data-cart-key="panel_post"],
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post[data-cart-key="raked_post"] {
    background: var(--fc-nickel) !important;
    background-image: none !important;
    min-height: var(--fc-slat-post-height-px, 125px) !important;
    height: var(--fc-slat-post-height-px, 125px);
    margin-bottom: 30px;
    flex-shrink: 0;
}

/* Slat Fence: Wall Fix / 135deg posts are shorter (no bury) and bottom-aligned */
.fencing-panel-container[data-type="slat"] .panel-post.opt-3,
.fencing-panel-container[data-type="slat"] .panel-post.opt-3-1,
.fencing-panel-container[data-type="slat"] .panel-post.opt-5,
.fencing-panel-container[data-type="slat"] .panel-post.opt-5-1,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post.opt-3,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post.opt-3-1,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post.opt-5,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post.opt-5-1 {
    min-height: var(--fc-slat-post-above-px, 125px) !important;
    height: var(--fc-slat-post-above-px, 125px);
}

/* Slat + Slat Infill: suppress ally cap pseudos; side rails live on .fencing-panel-item */
.fencing-panel-container[data-type="slat"] .ally:before,
.fencing-panel-container[data-type="slat"] .ally:after,
.fencing-panel-container[data-type="slat"] .offcut-body:before,
.fencing-panel-container[data-type="slat"] .offcut-body:after,
.fencing-panel-container[data-type="slat_fence_infill"] .ally:before,
.fencing-panel-container[data-type="slat_fence_infill"] .ally:after,
.fencing-panel-container[data-type="slat_fence_infill"] .offcut-body:before,
.fencing-panel-container[data-type="slat_fence_infill"] .offcut-body:after {
    content: none !important;
    display: none !important;
}

/* Slat + Slat Infill: vertical side rails on panel items (planner + project plan) */
.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-item:not(.fencing-panel-gate):before,
.fencing-panel-container[data-type="slat"] .fencing-panel-item:not(.fencing-panel-gate):before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: #b6b6b6;
    border: 1px solid #555555;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}

.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-item:not(.fencing-panel-gate):after,
.fencing-panel-container[data-type="slat"] .fencing-panel-item:not(.fencing-panel-gate):after {
    content: "" !important;
    display: block !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: #b6b6b6;
    border: 1px solid #555555;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}

.fencing-panel-item:not(.fencing-panel-gate) {
    margin-left: -1px;
    margin-right: -1px;
}

.offcut-body {
    background-image: url(../img/webp/ally-thin.webp);
    background-repeat: repeat;
    background-color: initial;
    background-size: 9px;
    background-color: var(--fc-lavender-blush);
}

.custom-height .ally,
.custom-height .offcut-body {
    background-image: url(../img/webp/ally-thick.webp);
    background-size: 10px;
}

.custom-height .ally:before,
.custom-height .offcut-body:before {
    content: "";
    background-image: url(../img/webp/ally-thick.webp?v=1);
    background-repeat: repeat;
    background-size: 10px;
    background-color: var(--fc-white);
    position: absolute;
    top: -6px;
    width: 100%;
    height: 4px;
}

.custom-height .ally:after,
.custom-height .offcut-body:after {
    content: "";
    background-image: url(../img/webp/ally-thick.webp?v=1);
    background-repeat: repeat;
    background-size: 10px;
    background-color: var(--fc-white);
    position: absolute;
    bottom: -6px;
    width: 100%;
    height: 4px;
}

.offcut-a .offcut-body {
    background: var(--fc-pattens-blue);
}

.custom-height .fencing-panel-item:not(.fencing-panel-gate) {
    margin-left: -4px;
    margin-right: -4px;
}


[data-group="b"] .panel-post {
    background: var(--fc-charcoal-37);
    background: linear-gradient(90deg, var(--fc-charcoal-37) 0%, var(--fc-boulder-78) 48%, var(--fc-black) 100%);
    min-width: 8px;
    margin-top: -7px;
    margin-bottom: 30px;
    border-radius: 2px;
    border: 1px solid;
    position: relative;
    z-index: 1;

}

/* Slat Fence: slightly reduce post lift */
.fencing-panel-container[data-type="slat"] .panel-post,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post {
    margin-top: 0;
}

/*
 * Slat container uses flex-start for gate/panel vertical alignment; stretch the spacing
 * column so the post width label (50) sits at the foot of the post like Barr / Flat Top.
 */
.fencing-panel-container[data-type="slat"] .fencing-panel-spacing-number.fpsn-b,
.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-spacing-number.fpsn-b {
    align-self: stretch;
}

.fencing-panel-container[data-type="slat"] .fencing-panel-spacing-number.fpsn-b > span:first-child,
.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-spacing-number.fpsn-b > span:first-child {
    bottom: 0;
}

/* Slat Fence Infill: render posts like a brick wall */
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post {
    min-width: 20px;
    border-radius: 0;
    border-color: var(--fc-brown-rust);
    background: var(--fc-antique-brass) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--fc-a-white-14);
    overflow: hidden;
}

/* Fence config `hide_post_value`: suppress post width on spacing + Centers (Slat Infill). */
.fencing-panel-container.fc-hide-post-value .fencing-panel-spacing-number > span:first-child,
.fc-project-plan .fencing-panel-container.fc-hide-post-value .fencing-panel-spacing-number > span:first-child {
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
    display: inline-block;
    width: 0;
}

.fencing-panel-container.fc-hide-post-value .fc-first-c-p .fc-start-c-p:empty,
.fc-project-plan .fencing-panel-container.fc-hide-post-value .fc-first-c-p .fc-start-c-p:empty {
    display: none;
}

.fencing-panel-container[data-type="slat_fence_infill"] .panel-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, var(--fc-a-white-12), var(--fc-a-black-8)),
        repeating-linear-gradient(to bottom,
            transparent 0,
            transparent 13px,
            var(--fc-a-linen-75) 13px,
            var(--fc-a-linen-75) 15px
        ),
        linear-gradient(to right,
            var(--fc-a-linen-65) 0,
            var(--fc-a-linen-65) 2px,
            transparent 2px,
            transparent 20px
        ),
        linear-gradient(to right,
            transparent 0,
            transparent 10px,
            var(--fc-a-linen-65) 10px,
            var(--fc-a-linen-65) 12px,
            transparent 12px,
            transparent 20px
        );
    background-size:
        auto,
        auto,
        20px 30px,
        20px 30px;
    background-position:
        0 0,
        0 0,
        0 0,
        0 15px;
    pointer-events: none;
}

/*
 * Slat Infill — project plan: the “Centers” line sits on each panel at width:100%, but tubular
 * layout inserts spacing + .panel-post between panels, so the border-top looked broken. Bridge
 * each segment into the gap (not on .last-item — avoids bleeding past the run into offcut/raked).
 */
.fc-project-plan .fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-item:not(.fencing-panel-gate):not(.last-item) .fc-center-point.fc-first-c-p {
    width: calc(100% + var(--fc-slat-infill-centers-bridge, 36px));
    left: 0;
    z-index: 2;
    pointer-events: none;
}



[data-group="b"] .panel-post:not(.panel-no-post).opt-2,
[data-group="b"] .panel-post:not(.panel-no-post).opt-2-1 {
    min-height: 155px;
}

/* Slat Fence: Core Drilled posts should display like Cement In posts */
.fencing-panel-container[data-type="slat"] .panel-post:not(.panel-no-post).opt-4,
.fencing-panel-container[data-type="slat"] .panel-post:not(.panel-no-post).opt-4-1,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4-1 {
    min-height: 155px;
}

[data-group="b"] .panel-post.opt-1,
[data-group="b"] .panel-post.opt-1-1 {
    min-height: 140px;
}

[data-group="b"].custom-height .panel-post {
    min-height: 125px !important;
}


@media (min-width: 1024px) {
    [data-group="b"] .panel-post:hover {
        border: 1px solid var(--fc-princeton-orange);
    }
}


[data-group="b"] .panel-post:not(.panel-no-post).opt-1:after,
[data-group="b"] .panel-post:not(.panel-no-post).opt-1-1:after {
    content: "";
    display: inline-block;
    width: 25px;
    border-bottom: 3px solid;
    position: absolute;
    bottom: -2px;
    left: -9px;
}

[data-group="b"] .panel-post:not(.panel-no-post).opt-2:after,
[data-group="b"] .panel-post:not(.panel-no-post).opt-2-1:after {
    content: "";
    display: inline-block;
    width: 25px;
    border-bottom: 3px solid var(--fc-light-gray);
    position: absolute;
    bottom: 30px;
    left: -9px;
}

[data-type="slat"] .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat"] .panel-post:not(.panel-no-post).opt-4-1:after,
[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4-1:after {
    content: "";
    display: inline-block;
    width: 25px;
    border-bottom: 3px solid var(--fc-light-gray);
    position: absolute;
    bottom: 30px;
    left: -9px;
}

[data-group="b"] .panel-post:not(.panel-no-post).opt-2,
[data-group="b"] .panel-post:not(.panel-no-post).opt-2-1 {
    margin-bottom: 0;
}


.fencing-panel-container[data-type="slat"] .panel-post:not(.panel-no-post).opt-4-1,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4,
.fencing-panel-container[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4-1 {
    margin-bottom: 0;
}

.fencing-panel-spacing-number.opt-2 span,
.fencing-panel-spacing-number.opt-2-1 span {
    bottom: -20px;
}

.fencing-panel-container[data-type="slat"] .fencing-panel-spacing-number.opt-4 span,
.fencing-panel-container[data-type="slat"] .fencing-panel-spacing-number.opt-4-1 span,
.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-spacing-number.opt-4 span,
.fencing-panel-container[data-type="slat_fence_infill"] .fencing-panel-spacing-number.opt-4-1 span {
    bottom: -20px;
}

[data-group="a"] .fencing-panel-spacing-number span {
    bottom: 0;
}

[data-group="b"] .panel-post:not(.panel-no-post).opt-2:after,
[data-group="b"] .panel-post:not(.panel-no-post).opt-2-1:after {
    bottom: 14px;
}

[data-type="slat"] .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat"] .panel-post:not(.panel-no-post).opt-4-1:after,
[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat_fence_infill"] .panel-post:not(.panel-no-post).opt-4-1:after {
    bottom: 14px;
}

[data-group="b"].custom-height .panel-post:not(.panel-no-post).opt-2:after,
[data-group="b"].custom-height .panel-post:not(.panel-no-post).opt-2-1:after {
    bottom: 10px;
}

[data-type="slat"].custom-height .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat"].custom-height .panel-post:not(.panel-no-post).opt-4-1:after,
[data-type="slat_fence_infill"].custom-height .panel-post:not(.panel-no-post).opt-4:after,
[data-type="slat_fence_infill"].custom-height .panel-post:not(.panel-no-post).opt-4-1:after {
    bottom: 10px;
}

.fencing-panel-spacing-number.panel-opt-2 .fs-clamp {
    background: var(--fc-gray-nurse);
    height: 12px;
    width: -webkit-fill-available;
    top: 5px;
    border-radius: 4px;
    border: 2px solid var(--fc-silver-chalice);
    box-shadow: inset 1px 2px 5px 0px var(--fc-white);
    position: absolute;
    z-index: 1;
    margin-left: -9px;
    margin-right: -9px;
}

.fencing-panel-container {
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .fencing-panel-item:hover {
        border: 2px solid var(--fc-princeton-orange);
        background-color: var(--fc-lavender-blush);
    }
}

#place_order-section .fencing-panel-item:hover {
    border-color: var(--fc-alto);
}

.fencing-panel-spacing-number {
    position: relative;
    width: 10px;
}

[data-group="a"] .fencing-panel-spacing-number {
    min-height: 165px;
}

.fencing-panel-container[data-type="glass_pool"] .panel-post.fc-glass-gate-dup-post {
    display: none;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 0;
}


.fencing-panel-spacing-number.fpsn-b {
    width: auto;
}

.fencing-panel-spacing-number span {
    position: absolute;
    bottom: 0;
    font-size: 12px;
    border: 2px solid transparent;
}

.fc-empty-spacing {
    background: none;
    border: 0 !important;
    min-width: 5px;
}
.fc-empty-spacing:after {
    border: 0 !important;
}

.fpsn-b {
    max-width: 0;
}

.fpsn-b:last-child span {
    left: -20px;
}

.fpsn-b span {
    left: -5px;
}

.no-post span {
    left: -11px;
}

.raked-panel .fpsn-b span {
    left: -4px;
}

.raked-panel .no-post span {
    left: -12px;
}

.fencing-panel-item-size {
    font-size: 11px;
    margin: 15px 5px;
    height: fit-content;
    background: var(--fc-white);
    padding: 5px 4px;
    color: var(--fc-black);
    text-align: -webkit-center;
    border: 1px solid var(--fc-spanish-gray);
    border-radius: 5px;
    line-height: 14px;
    z-index: 2;
}

[data-type="slat"] .fencing-panel-item,
[data-type="slat_fence_infill"] .fencing-panel-item {
    position: relative;
    overflow: visible;
}

[data-type="slat"] .fencing-panel-item > .fc-slat-gap-label,
[data-type="slat_fence_infill"] .fencing-panel-item > .fc-slat-gap-label {
    position: absolute;
    left: 50%;
    bottom: -44px;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 12px;
    color: var(--fc-shark);
    font-weight: 600;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    width: 100%;
}

#place_order-section .fencing-panel-item-size {
    font-size: 10px;
    line-height: 13px;
}

[data-group="a"] .panel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    height: 120px;
}

.panel-item .fencing-btn-modal {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fencing-panel-rail {
    height: 9px;
    top: -10px;
    background-image: url(../img/webp/hand-rail-round.webp);
    background-size: 100% 6px;
    position: absolute;
    width: 100%;
    cursor: pointer;
    z-index: 1;
}

@media (min-width: 1024px) {
    .fencing-panel-rail:hover {
        border: 2px solid var(--fc-princeton-orange);
    }
}

/* Spigot */
.fencing-panel-spigots {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.fencing-panel-spigots.panel-post {
    background: none;
    border: 0;
}
.fencing-panel-spigots.panel-post:after {
    border: 0 !important;
}

.raked-panel .fencing-panel-spigots  {
    bottom: -19px;
}
.fencing-panel-spigot:first-child {
    left: 7px;
    position: absolute;
    bottom: -23px;
}
.fencing-panel-spigot:last-child {
    right: 7px;
    position: absolute;
    bottom: -23px;    
}

[data-group="a"] .raked-panel .fencing-panel-spigot:first-child,
[data-group="a"] .raked-panel .fencing-panel-spigot:last-child {
    bottom: -17px;   
}

.opt-1 .fencing-panel-spigot,
.opt-1-1 .fencing-panel-spigot {
    background-image: url(../img/webp/bolt-down-w.png);
    height: 40px;
    width: 35px;
}
.opt-2 .fencing-panel-spigot,
.opt-2-1 .fencing-panel-spigot {
    background-image: url(../img/webp/core-drill-w.png);
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
}

.fc-empty-spacing {
    min-width: 5px;
    min-height: 155px;
}

.fencing-panel-spigot {
    background-size: contain;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    cursor: pointer;
    border: 2px solid transparent;
}

@media (min-width: 1024px) {
    .fencing-panel-spigot:hover {
        border: 2px solid var(--fc-princeton-orange);
    }
}

/* Spinfix */
.fencing-panel-pinfixes {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    bottom: 6px;
}

.fencing-panel-pinfix {
    background-image: url(../img/webp/pinfix.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 15px;
    width: 6px;
    cursor: pointer;
    border: 2px solid transparent;
}

.fc-cart-items .fc-row-container--cart-stock {
    margin: 0;
    justify-content: space-between;
}

.fc-cart-items .fc-row-container--cart-stock>.fc-col-half {
    padding: 24px;
    width: calc(50% - 12px);
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 992px) {
    .fc-cart-items .fc-row-container--cart-stock>.fc-col-half {
        width: 100%;
        margin-bottom: 20px;
        padding: 16px;
    }
}

.fc-cart-items .fencing-section__step-label {
    margin-bottom: 21px;
}

@media (max-width: 992px) {
    .fc-cart-items .fencing-section__step-label {
        margin-bottom: 16px;
    }
}

.fc-cart-items p {
    color: var(--fc-dark-gray);
    font-size: 12px;
    text-transform: uppercase;
    line-height: 20px;
}

.fc-cart-items p strong {
    font-weight: 500;
    color: var(--fc-black);
    text-transform: initial;
    font-size: 14px;
}

.fc-stock-status {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins", sans-serif !important;
}

.fc-stock-status--inline {
    padding: 5px 8px;
    background-color: var(--fc-chinese-white);
    border-radius: 8px;
    display: inline-flex;
    color: var(--fc-texas-green);
    font-size: 18px;
}



.fc-cart-items-btns {
    display: flex;
}

@media (max-width: 480px) {
    .fc-cart-items-btns {
        display: block;
    }
}

.fc-cart-items-btns .btn-fc {
    height: 54px;
    margin-right: 8px;
    width: 100%;
    margin-bottom: 0 !important;
}

@media (max-width: 992px) {
    .fc-cart-items-btns .btn-fc {
        margin-bottom: 15px !important;
    }
}

.fc-cart-items-btns .btn-fc:last-child {
    margin-right: 0;
}

@media (max-width: 992px) {
    .fc-cart-items-btns .btn-fc:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1024px) {
    .fc-cart-items-btns .btn-fc.fc-btn-md {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.fc-cart-items-btns .btn-fc--live-support {
    color: var(--fc-white);
}

.fc-cart-items-btns .btn-fc-outline-light {
    border-color: var(--fc-dark-charcoal);
    color: var(--fc-dark-charcoal);
}

@media (min-width: 1024px) {
    .fc-cart-items-btns .btn-fc-outline-light:hover {
        background-color: var(--fc-dark-charcoal);
        color: var(--fc-white);
    }
}

.fc-cart-stock-area p {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 25px;
    color: var(--fc-granite-gray);
    text-transform: initial;
}

.fc-cart-stock-area p span:not(.fc-stock-status) {
    background-color: var(--fc-bright-gray);
    border-radius: 8px;
    display: inline-block;
    padding: 4px 8px;
    color: var(--fc-black);
}



.fc-cart-stock-area .fc-alert-gray {
    margin-bottom: 25px;
}

@media (max-width: 992px) {
    .fc-cart-stock-area .fc-alert-gray {
        margin-bottom: 16px;
    }
}

.fc-cart-countdown {
    padding: 8px 16px;
    background-color: var(--fc-fair-pink);
    border-radius: 8px;
}

.fc-cart-countdown p {
    font-size: 32px;
    line-height: 38px;
    color: var(--fc-princeton-orange);
    font-weight: 700;
    text-transform: initial;
}

.fc-cart-countdown p strong {
    font-size: 14px;
    line-height: 25px;
    color: var(--fc-princeton-orange);
}

@media (max-width: 992px) {
    .fc-cart-countdown {
        margin-bottom: 16px;
    }

    .fc-cart-countdown p {
        font-size: 24px;
    }
}

@media (max-width: 992px) {
    .fc-table-items td:nth-child(2) {
        width: 30%;
    }
}

@media (max-width: 992px) {
    .fc-table-items td:nth-child(3) {
        width: 30%;
    }
}

.fc-step-2-alert {
    float: right;
}

@media (max-width: 992px) {
    .fc-step-2-alert {
        margin-top: 40px;
    }
}

.fc-step-2-alert.fc-alert-gray {
    padding: 20px;
}

.fc-step-2-alert .fc-icon {
    position: relative;
    top: 1px;
}

.fc-step-2-alert h3 {
    font-size: 20px;
    font-weight: 500;
}

@media (max-width: 992px) {
    .fc-step-2-alert h3 {
        font-size: 16px;
        font-family: "Poppins", sans-serif !important;
    }
}

.fc-step-2-alert p {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

@media (max-width: 992px) {
    .fc-step-2-alert p {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .fc-step-2-alert.fc-step-2-alert {
        float: none;
    }
}

.alert-gray {
    background: var(--fc-cultured) !important;
}

.fc-alert-gray h4 {
    font-weight: 500;
}

.fc-alert-gray--large-h4 h4 {
    font-size: 18px;
}

.fc-alert-gray p {
    font-size: 16px;
    line-height: 22px;
    color: var(--fc-granite-gray);
}
@media (max-width: 768px) {
    .fencing-container p {
        font-size: 13px;
    }
}


.fc-alert-gray--low-stock {
    background-color: var(--fc-remy);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .fc-alert-gray--low-stock {
        margin-top: 0;
    }
}

.fc-alert-gray--low-stock h3 {
    color: var(--fc-brand-primary);
    font-weight: 700;
}

.fc-alert-gray--low-stock i {
    margin-right: 4px;
}

.fc-alert-gray--low-stock p {
    color: var(--fc-brand-primary);
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .fc-scrollable {
        overflow: hidden;
        overflow-x: auto;
    }
}

@media (max-width: 992px) {
    .fc-scrollable-area {
        white-space: nowrap;
        overflow: hidden;
        display: inline-flex;
    }
}

.fc-color-options {
    padding: 10px 15px;
    box-sizing: border-box;
}

.fc-color-options .fc-col-3 {
    width: 23.6111111111%;
    margin-right: 2.2222222222%;
}

@media (max-width: 800px) {
    .fc-color-options .fc-col-3 {
        width: 31.25%;
        margin-right: 2.5%;
    }
}

@media (max-width: 600px) {
    .fc-color-options .fc-col-3 {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
}

.fc-color-options .fc-col-3:last-child {
    margin-right: 0;
}

@media (max-width: 992px) {
    .fc-color-options .fc-col-3:last-child {
        margin-bottom: 0;
    }
}

.fc-color-options .fc-select {
    padding-left: 16px;
}

.fc-color-options .fc-select,
.fc-color-options .fc-select-2 {
    border-width: 2px;
}

.fencing-modal .fc-color-options {
    padding: 32px 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.fencing-modal .fc-color-options .fc-col-3 {
    width: 31.3%;
    margin-right: 0;
    box-sizing: border-box;
    padding: 0;
    margin-right: 2%;
}

@media (max-width: 600px) {
    .fencing-modal .fc-color-options .fc-col-3 {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
        float: none;
    }
}

@media (max-width: 992px) {
    .fencing-modal .fc-color-options .fc-col-3:last-child {
        margin-bottom: 0;
    }
}

.fencing-modal .fc-color-options .fc-select {
    padding-left: 36px;
}

.fc-select-2,
.fc-select {
    border: 1px solid var(--fc-gray);
    cursor: pointer;
    position: relative;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.fc-select::after,
.fc-select-2::after {
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 1px solid var(--fc-gray);
    border-radius: 100%;
    position: absolute;
    top: 8px;
    right: 10px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .fc-select:hover {
        border-color: var(--fc-princeton-orange);
    }
}

.fc-select.fc-selected,
.fc-select-2.fc-selected {
    border-color: var(--fc-princeton-orange);
}

.fc-select.fc-selected:after,
.fc-select-2.fc-selected:after {
    border-color: var(--fc-princeton-orange);
    background: var(--fc-princeton-orange);
    box-shadow: inset 0 0 0 3px var(--fc-white);
}

/* Step 2 Gate ONLY row: default border (selected stays orange via .fc-selected rules above). */
.fencing-section--step2 .fc-step2-gate-only .fc-select-2:not(.fc-selected) {
    border-color: var(--fc-dark-gray);
}

.fencing-section--step2 .fc-step2-gate-only .fc-select-2:not(.fc-selected)::after {
    border-color: var(--fc-dark-gray);
}

/*
.fc-select img {
    width: 100%;
}
*/

.fc-step-4 .fc-select:after {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: auto;
}

.fc-step-4 .fc-select {
    height: 81px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .fc-step-4 .fc-select {
        height: auto;
    }
}

.btn-copy-link {
    cursor: copy;
}

.quote-id-card {
    border: 2px solid var(--fc-black);
    border-radius: 7px;
    text-align: center;
    width: 160px;
    max-width: 100%;
}

.qic-row {
    display: flex;
    flex-direction: column;
}

.qic-head {
    background: var(--fc-black);
    color: var(--fc-white);
    font-size: 14px;
    padding: 3px;
}

.qic-body {
    font-size: 1.5em;
    font-weight: bold;
    padding: 4px 6px;
}

.quote-id-card .fc-copy-quote-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--fc-black);
    background: var(--fc-wild-sand);
    color: var(--fc-black);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 0 0 5px 5px;
}

.quote-id-card .fc-copy-quote-link i {
    font-size: 0.85em;
    line-height: 1;
}

.quote-id-card .fc-copy-quote-link:hover {
    background: var(--fc-gallery);
}

@media (max-width: 767.98px) {
    .fc-project-plan-page .fencing-container__header .col-sm-auto.col-auto {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .fc-project-plan-page .fencing-container__header .quote-id-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .fc-project-plan-page .fencing-container__header .quote-id-card.float-end {
        float: none !important;
    }

    .fc-project-plan-page .fencing-container__header .qic-head {
        font-size: 13px;
        padding: 5px 8px;
    }

    .fc-project-plan-page .fencing-container__header .qic-row {
        flex-direction: row;
        align-items: stretch;
    }

    .fc-project-plan-page .fencing-container__header .qic-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        font-size: 1.15rem;
    }

    .fc-project-plan-page .fencing-container__header .qic-body > div {
        font-size: inherit;
        line-height: 1.2;
        word-break: break-all;
    }

    .fc-project-plan-page .fencing-container__header .quote-id-card .fc-copy-quote-link {
        width: auto;
        flex: 0 0 auto;
        max-width: 46%;
        border-top: 0;
        border-left: 1px solid var(--fc-black);
        border-radius: 0 0 5px 0;
        padding: 10px 12px;
        font-size: 11px;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .fc-project-plan-page #project-plans-section .quote-id-card {
        max-width: 100%;
    }

    .fc-project-plan-page #project-plans-section .quote-id-card div {
        font-size: 16px;
    }
}

.fc-form-field p {
    font-size: 14px;
}

@media (max-width: 992px) {
    .fc-other-products .fc-col-3 {
        width: calc(33.3% - 20px);
    }
}

@media (max-width: 768px) {
    .fc-other-products .fc-col-3 {
        width: calc(50% - 20px);
    }
}

.project-details-controls:not(.fc-d-none) {
    overflow: hidden;
}

@media (max-width: 480px) {
    .project-details-controls:not(.fc-d-none) {
        display: block;
    }
}

.project-details-controls:not(.fc-d-none) .btn-fc {
    margin-left: 16px;
}

@media (max-width: 992px) {
    .project-details-controls:not(.fc-d-none) .btn-fc {
        margin: 0 20px 0 0;
    }
}

@media (max-width: 480px) {
    .project-details-controls:not(.fc-d-none) .btn-fc {
        margin-right: 0;
        margin-bottom: 16px;
    }
}

.project-details-controls:not(.fc-d-none) .btn-fc:last-child {
    margin-right: 0;
    margin-bottom: 0;
}

/* Project plan / checkout — notes area edit bar: Cancel (left), Save + Reset (right) */
.project-details-controls--edit-bar:not(.fc-d-none) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
}

.project-details-controls--edit-bar:not(.fc-d-none) .project-details-controls__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

@media (max-width: 480px) {
    .project-details-controls--edit-bar:not(.fc-d-none) .project-details-controls__right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

.btn.btn-secondary {
    border-bottom: 2px solid var(--fc-cod-gray);
}

.downloading-pdf button,
.downloading-pdf a,
.downloading-pdf .fc-cart-countdown,
.downloading-pdf .fc-text-success,
.downloading-pdf .fc-stock-status:before,
.downloading-pdf .fc-icon,
.print-label {
    display: none;
}

.downloading-pdf .step-label {
    display: block;
    font-family: sans-serif;
    font-size: 25px;
    font-weight: bold;
    width: 100%;
}

.downloading-pdf .fc-table-rounded-border table td {
    padding: 4px 15px;
}

.downloading-pdf {
    padding: 0 !important;
    border: 0 !important;
}

.downloading-pdf .quote-id-card {
    border: 0 !important;
}

.downloading-pdf .qic-head {
    color: var(--fc-black);
    background: var(--fc-white);
}

.downloading-pdf .fc-bg-dark {
    background: var(--fc-white);
    color: var(--fc-dark-charcoal);
}

.downloading-pdf .fc-table-rounded-border,
.downloading-pdf table,
.downloading-pdf table tr,
.downloading-pdf table th,
.downloading-pdf table td {
    border: 0 !important;
}

.downloading-pdf .fc-step-2-alert.fc-alert-gray {
    padding: 0;
    background-color: var(--fc-white) !important;
}

.downloading-pdf .fc-cart-stock-area span {
    background-color: var(--fc-white) !important;
}

.downloading-pdf tr {
    background-color: var(--fc-white) !important;
}

@media print {
    #fc-follow {
        break-after: page;
    }
}

.sticky-roll {
    top: 0;
    position: fixed;
    z-index: 2;
}

.fencing-tabs {
    justify-content: space-between;
    background: var(--fc-white);
}

.sticky-roll .fencing-tabs {
    border-bottom: 1px solid var(--fc-princeton-orange);
}

/* Flatten top corners when section tabs stick to the viewport */
.sticky-roll.fencing-tabs-area {
    border-radius: 0;
}

.sticky-roll .fencing-tab-container {
    border-radius: 0;
}

.sticky-roll .fencing-tab:first-child {
    border-top-left-radius: 0;
}

.sticky-roll .fencing-tab-add {
    border-radius: 0;
}

/**
 * Planner: compact section tabs while sticky
 * e.g. "S1 Barr" / "5,000 mm"
 */
.fc-planner-page .sticky-roll .fencing-tabs {
    min-height: 0;
}

.fc-planner-page .sticky-roll .fencing-tab-name {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

.fc-planner-page .sticky-roll .ftm-title {
    display: none;
}

.fc-planner-page .sticky-roll .fencing-tab-number::before {
    content: 'S';
    font-weight: 700;
}

.fc-planner-page .sticky-roll .fencing-tab-number {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.fc-planner-page .sticky-roll .ftm-fence-style {
    display: inline;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0;
    margin-left: 0.35em;
    color: inherit;
    white-space: nowrap;
}

.fc-planner-page .sticky-roll .ftm-fence-style[hidden] {
    display: none !important;
}

.fc-planner-page .sticky-roll .ftm-measurement {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
}

.fc-planner-page .sticky-roll .fc-section-tab-status {
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fc-planner-page .sticky-roll .fc-section-tab-status__icon {
    font-size: 0.75rem;
}

.fc-planner-page .sticky-roll .fencing-tab-add {
    padding: 8px 12px;
    font-size: 12px;
}

.fc-planner-page .sticky-roll .fencing-tab-add span {
    display: none;
}

.fc-planner-page .sticky-roll .fencing-tab-add .me-1 {
    margin-right: 0 !important;
}

@media (min-width: 769px) {
    .fc-planner-page .sticky-roll .fencing-tab-container-area .fencing-tab {
        min-width: 0;
    }
}

.sw {
    z-index: 2;    
}

.no-post-swivel-bracket .sw {
    position: absolute;
    bottom: 10px !important;
    background: var(--fc-white);
    border: 1px solid var(--fc-alto-3);
    height: 15px;
    width: 20px;
    text-align: center;
    line-height: 10px;
    font-size: 10px;
    z-index: 2;
}

.cg-top { 
    top: -25px;
    background: var(--fc-white);
    position: relative !important;
    border: 1px solid var(--fc-alto-2) !important;
    padding: 0px 3px;
}

.no-post-swivel-bracket .sw-top {
    top: -5px;
}

.no-post-swivel-bracket .sw-bot {
    bottom: 40px !important;
}

.raked-panel .no-post-swivel-bracket .sw-top {
    top: -50px;
}

.product-image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    padding-top: 20px !important;
    width:100px;
}

.fc-cart-product-image-cell {
    width: 100px;
    min-width: 100px;
    vertical-align: middle;
}

img.fc-cart-product-thumb,
.product-image .fc-cart-product-thumb {
    display: block;
    width: 100px;
    height: 100px;
    max-width: 100px;
    object-fit: contain;
    object-position: top center;
}

.fc-cart-gallery-trigger {
    cursor: pointer;
}

.fc-cart-item--optional-pending {
    background-color: rgba(233, 233, 233, 0.35);
}

.fc-cart-item--optional-pending td {
    color: var(--fc-dark-medium-gray, #a9a9a9);
}

.fc-cart-optional-actions .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
}

body.fc-cart-image-modal-open {
    overflow: hidden;
}

.fc-cart-image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fc-cart-image-modal.is-open {
    display: flex;
}

.fc-cart-image-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--fc-a-black-78);
    cursor: pointer;
}

.fc-cart-image-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    width: 100%;
}

.fc-cart-image-modal__body {
    flex: 1;
    min-width: 0;
    min-height: min(72vh, 800px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fc-cart-image-modal__img {
    max-width: 100%;
    max-height: min(78vh, 820px);
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 4px;
    box-shadow: 0 8px 32px var(--fc-a-black-45);
}

.fc-cart-image-modal__caption {
    margin-top: 0.75rem;
    color: var(--fc-gallery);
    font-size: 0.95rem;
    line-height: 1.35;
    max-width: 100%;
}

.fc-cart-image-modal__counter {
    position: absolute;
    bottom: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--fc-a-white-85);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.fc-cart-image-modal__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: var(--fc-a-white-12);
    color: var(--fc-white);
    font-size: 1.125rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.fc-cart-image-modal__close:hover {
    background: var(--fc-a-white-22);
}

.fc-cart-image-modal__nav {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: var(--fc-a-white-12);
    color: var(--fc-white);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.fc-cart-image-modal__nav:hover {
    background: var(--fc-a-white-22);
}

@media (max-width: 576px) {
    .fc-cart-image-modal__nav {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        z-index: 2;
        width: 2.15rem;
        height: 2.15rem;
        font-size: 0.85rem;
    }

    .fc-cart-image-modal__prev {
        left: 0.25rem;
    }

    .fc-cart-image-modal__next {
        right: 0.25rem;
    }
}

.dl-row {
    margin-top: 20px;
    padding: 0 10px;
}


@media (max-width: 992px) {
    .fencing-modal-notes .note-img {
        text-align: -webkit-center;
    }

    .fencing-modal-notes img {
        max-width: 120px;
    }
}


::-ms-clear {
    display: none;
}

.form-control-clear {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    background: var(--fc-white);
    color: var(--fc-brand-primary);
}

.fc-label-group .form-control-clear,
.form-group .form-control-clear {
    right: 10px;
    top: calc(50% - 8px);
}

.fc-form-group .form-control-clear {
    right: 7px;
    top: calc(50% - 7px);
}

.fencing-mb-input .form-control-clear {
    right: 17%;
    top: calc(50% - 7px);
}

.form-control:focus {
    box-shadow: unset !important;
}

.is-demo {
    position: fixed;
    bottom: 10px;
    z-index: 10;
    left: 10px;
    font-size: 10px !important;
}

.or-divider {
    margin: 20px 0;
    text-align: center;
}
.or-divider strong {
    background: var(--fc-white);
    width: 60px;
    display: inline-block;
}
.or-divider div {
    border-bottom: 1px solid var(--fc-silver);
    margin-top: -12px;
}

@media (max-width: 600px) {
    .toast-container, .toast-container .toast {
        width: 100% !important;
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.fc-planner-page .fc-label-group .form-control.input-mobile,
.fc-project-plan-page .form-control.input-mobile {
    padding-left: 45px !important;
}

.au-flag-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/australian-flag.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(100% - 38px);
    left: 7px;
}
.your-project-details .au-flag-icon {
    top: 1px;
}