*{
margin: 0;
padding: 0;
border: 0;
flex-wrap: wrap;
text-decoration: none; 
}

@font-face { 
	font-family: 'Avenir'; 
	src: url("../fonts/avenir-regular.woff2") format('woff2');
	font-weight: 400; 
	font-style: normal;
	font-stretch: normal;
	font-display: swap;
}

@font-face { 
	font-family: 'Avenir'; 
	src: url("../fonts/avenir-italic.woff2") format('woff2');
	font-weight: 400; 
	font-style: italic;
	font-stretch: normal;
	font-display: swap;
}

@font-face { 
	font-family: 'Avenir'; 
	src: url("../fonts/avenir-demi.woff2") format('woff2');
	font-weight: 500; 
	font-style: normal;
	font-stretch: normal;
	font-display: swap;
}

@font-face { 
	font-family: 'Avenir'; 
	src: url("../fonts/avenir-bold.woff2") format('woff2');
	font-weight: 700; 
	font-style: normal;
	font-stretch: normal;
	font-display: swap;
}

@font-face { 
	font-family: 'Avenir'; 
	src: url("../fonts/avenir-bolditalic.woff2") format('woff2');
	font-weight: 700; 
	font-style: italic;
	font-stretch: normal;
	font-display: swap;
}

*, 
*:after, 
*::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

:root {
	--fc-color-dark: #000000;
	--fc-color-silver: #F8F8F8;
	--fc-color-dimgray: #DEDEDE;
	--fc-color-gray: #9A9A9A;
	--fc-color-green: #22574d;
	--fc-color-red: #F25A39;
	--fc-color-orange: #FBB03C;
}


/*
---------------
	DEFAULT
---------------
*/
body.page-id-123 #content { padding: 0 !important; }
.fc-anim { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.fc-button { height: 46px; padding: 0 20px; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 20px !important; background: var(--fc-color-primary); display: flex; align-items: center; border-radius: 23px; cursor: pointer; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.fc-button.fc-button-empty { color: var(--fc-color-dark) !important; background: transparent; border: 2px solid var(--fc-color-dimgray); }
.fc-button.fc-button-empty:hover { border-color: var(--fc-color-dark); }

.fc-button.fc-button-green { color: #ffffff !important; background: var(--fc-color-green); }
.fc-button.fc-button-green:hover { background: var(--fc-color-dark); }

.fc-button.fc-button-primary { color: #ffffff !important; background: var(--fc-color-primary); }
.fc-button.fc-button-primary:hover { background: var(--fc-color-dark); }


/*
------------
	MAIN
------------
*/
#fc-main { min-height: 100vh; font-family: 'Avenir', sans-serif; font-size: 18px; font-weight: 400; line-height: 30px; display: flex; }

#fc-main select { width: 100%; height: 46px; padding-left: 10px; background: #ffffff; border: 1px solid var(--fc-color-dimgray); border-radius: 5px; }

/* Instruction */
#fc-main #fc-instruction { padding: 10px; font-size: 16px !important; font-weight: 500; line-height: 25px !important; background: color-mix(in srgb, var(--fc-color-orange) 5%, white 95%); border: 1px solid var(--fc-color-orange); border-radius: 10px; }

/* Total */
#fc-main #fence-total { width: 100%; height: 70px; left: 0; bottom: 0; border-top: 1px solid var(--fc-color-dimgray); display: flex; position: fixed; }
#fc-main #fence-total .fence-total-left { width: 360px; }
#fc-main #fence-total .fence-total-right { width: calc(100% - 360px); padding: 0 30px; background: #ffffff; display: flex; align-items: center; }
#fc-main #fence-total .fence-total-right span { margin: 0 4px; }
#fc-main #fence-total .fence-total-right #fc-add-to-cart { margin-right: 20px; }


/* 
---------------
	SIDEBAR
---------------
*/
#fc-sidebar { width: 360px; padding: 30px; background: var(--fc-color-silver); border-right: 1px solid var(--fc-color-dimgray); }
#fc-sidebar label { width: 100%; font-size: 15px; font-weight: 700; display: block; }
#fc-sidebar .fc-widget { margin-bottom: 30px; }

#fc-sidebar .fc-main-logo { margin-bottom: 30px; }
#fc-sidebar .fc-main-logo img { width: auto; max-width: 100%; height: auto; max-height: 50px; display: block; }

/* fence-type-selector */
#fc-sidebar .fence-type-selector-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#fc-sidebar .fence-type-selector-wrap button { height: 95px; margin-bottom: 30px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: auto 62px; border: 2px dashed var(--fc-color-dimgray); border-radius: 5px; position: relative; cursor: pointer; }
#fc-sidebar .fence-type-selector-wrap button:hover { border-color: var(--fc-color-primary); }
#fc-sidebar .fence-type-selector-wrap button.fence-element { background-image: url(../images/fc-icon-fance.svg); }
#fc-sidebar .fence-type-selector-wrap button.loophole { background-image: url(../images/fc-icon-loophole.svg); }
#fc-sidebar .fence-type-selector-wrap button.double-gate { background-image: url(../images/fc-icon-double-gate.svg); }
#fc-sidebar .fence-type-selector-wrap button.rolling-gate { background-image: url(../images/fc-icon-rolling-gate.svg); }

#fc-sidebar .fence-type-selector-wrap button span { width: 100%; left: 0; top: calc(100% + 10px); font-size: 14px; font-weight: 700; line-height: 14px !important; position: absolute; }


/*
---------------
	CONTENT
---------------
*/
#fc-content { width: calc(100% - 360px); padding-bottom: 70px; background: #ffffff; }
#fc-content h1 { margin-bottom: 30px !important; font-size: clamp(1rem, 4vw, 2rem) !important; font-weight: 700 !important; }
#fc-content h3 { margin-bottom: 20px !important; font-size: clamp(1rem, 3vw, 2rem) !important; font-weight: 700 !important; }

#fc-content .fence-canvas { padding: 50px 30px; background: #ffffff; }
#fc-content .fence-canvas-wrap { overflow-x: auto; white-space: nowrap; }

#fc-content .fence-summary { padding: 30px; border-top: 1px solid var(--fc-color-dimgray); }
#fc-content .fence-summary #fence-section-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
#fc-content .fence-summary #fence-section-list .section-item { padding: 20px 70px 20px 20px; font-size: 16px !important; line-height: 25px !important; background: var(--fc-color-silver); border: 1px solid var(--fc-color-dimgray); outline: 2px solid transparent; outline-offset: 2px; position: relative; border-radius: 10px; }
#fc-content .fence-summary #fence-section-list .section-item.active { outline-color: var(--fc-color-primary); }
#fc-content .fence-summary #fence-section-list .section-item .count { width: 30px; height: 30px; right: 20px; top: 20px; font-size: 14px; line-height: normal; background: var(--fc-color-dimgray); display: flex; justify-content: center; align-items: center; position: absolute; border-radius: 50%; }
#fc-content .fence-summary #fence-section-list .section-item.active .count { background: var(--fc-color-primary); }

#fc-content .fence-summary #fence-section-list button { height: 30px; margin-top: 10px; padding: 0 15px; font-size: 14px !important; font-weight: 700; color: #ffffff; line-height: normal !important; background: var(--fc-color-green); display: inline-flex; align-items: center; border-radius: 15px; cursor: pointer; }
#fc-content .fence-summary #fence-section-list .edit-section:hover { background: var(--fc-color-dark); }
#fc-content .fence-summary #fence-section-list .delete-section { background: var(--fc-color-red); }
#fc-content .fence-summary #fence-section-list .delete-section:hover { background: var(--fc-color-dark); }

#fence-visual-area { width: fit-content; min-height: 200px; display: flex; flex-wrap: nowrap; }


/*
-------------------
	SECTION BOX
-------------------
*/
.section-box { height: 200px !important; background-repeat: no-repeat; background-position: top right; background-size: auto 100%; display: flex; justify-content: space-between; position: relative; overflow: hidden; }
.section-box::before { width: 40px; height: 40px; left: 20px; top: 20px; font-size: 14px; font-weight: 700; color: #000000 !important; background: rgba(255 255 255 / 70%); display: flex; justify-content: center; align-items: center; position: absolute; border-radius: 50%; content: attr(data-count); opacity: 0; }
.section-box.active::before { opacity: 100%; }

.section-box.keriteselem { width: 300px !important; padding: 0 40px 56px 7px; background-image: url(../images/fg-img-part-1.svg); }
.section-box.kiskapu { width: 174px !important; padding: 0 42px 0 7px; background-image: url(../images/fg-img-part-2.svg); }
.section-box.ketszarnyu-kapu { width: 400px !important; padding: 0 42px 0 7px; background-image: url(../images/fg-img-part-3.svg); }
.section-box.gurulo-kapu { width: 400px !important; padding: 0 42px 10px 7px; background-image: url(../images/fg-img-part-4.svg); }

.section-box .slat { width: 22px !important; height: 100% !important; margin-bottom: 100px; background-repeat: repeat; background-position: center; background-size: cover; border-radius: 11px 11px 0 0; }

.add-button {
    padding: 8px 12px;
    font-size: 16px;
}


/*
-------------
	MODAL
-------------
*/
.fence-modal { inset: 0; background: rgba(0 0 0 / 50%); position: fixed; z-index: 9999; }
.fence-modal .fence-modal-content { max-width: 480px; margin: 100px auto; background: #ffffff; border-radius: 5px; }
.fence-modal .fence-modal-content h3 { margin-bottom: 20px !important; font-size: 22px !important; font-weight: 700 !important; color: var(--fc-color-dark) !important; }
.fence-modal .fence-modal-content .fence-modal-content-wrap { padding: 30px; display: flex; justify-content: space-between; }
.fence-modal .fence-modal-content .fence-modal-content-wrap > div { width: calc(50% - 10px); }

.fence-modal .fence-modal-content .fence-modal-content-wrap label { width: 100%; font-size: 15px; font-weight: 700; display: block; }
.fence-modal .fence-modal-content .fence-modal-content-wrap input[type="number"] { width: 100%; height: 46px; padding-left: 10px; background: #ffffff; border: 1px solid var(--fc-color-dimgray); outline: 2px solid transparent; outline-offset: 2px; border-radius: 5px; }
.fence-modal .fence-modal-content .fence-modal-content-wrap input[type="number"]:focus { outline-color: var(--fc-color-primary); }

.fence-modal .fence-modal-actions { padding: 20px 30px; background: var(--fc-color-silver); border-top: 1px solid var(--fc-color-dimgray); display: flex; }
.fence-modal .fence-modal-actions button { margin-right: 10px; }