/* Chrome, Safari, Edge, and Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.ek-ci-form {
	box-sizing: border-box;
	font-family: 'Noto Sans Hebrew';
    position: relative;
	min-height: 100vh;
	padding: 80px 20px 45px 20px;
	text-align: center;
	color: #0D2F62;
}

.ek-ci-form ::-webkit-input-placeholder {
       color: #0D2F62;
	   font-weight:600;
}

.ek-ci-form :-moz-placeholder { /* Firefox 18- */
     color: #0D2F62;
	   font-weight:600;
}

.ek-ci-form ::-moz-placeholder {  /* Firefox 19+ */
     color: #0D2F62;
	   font-weight:600;
}

.ek-ci-form :-ms-input-placeholder {  
    color: #0D2F62;
	   font-weight:600;
}


.ek-ci-form strong {
	display: block;
}

.ek-ci-form a {
	text-decoration: underline;
}
.ek-ci-form a:hover {
	text-decoration: none;
}

.ek-ci-form button {
	font-family: 'Noto Sans Hebrew';
	cursor: pointer;
}

.ek-ci-form input {
	font-family: 'Noto Sans Hebrew';
	color: #0D2F62;
}

.step-title {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    text-align: center;
	margin: 0 0 35px;
	font-size: 30px;
	font-weight: bold;
}

.ek-ci-progress {
	display: flex;
	justify-content: center;
	margin-bottom: 98px;
	font-size: 14px;
	color: #aeb6c0;
	padding-left: 10px;
}

.ek-ci-progress-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	filter:grayscale(100%);
	opacity: 0.5;
	color: #0b3268;
}

.ek-ci-progress-item:before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	border-radius: 50%;
	background: #c91f3a;
	border: 10px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	

}

.ek-ci-progress-item.active,
.ek-ci-progress-item.done  {	
	font-weight: 700;
	filter:grayscale(0%);
	opacity: 1;
}

.ek-ci-progress-item.active:before {
	
	
}

.ek-ci-progress-item.done:before {
	background: #c91f3a;
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	color: #FFF;
	font-size: 12;
	width: 34px;
	height: 34px;
	line-height: 26px;
	text-align: center;
	border: #FFF 5px solid;
}


.ek-ci-progress-item span {
	position:  relative;
	display: flex;
	align-items: center;
}

.ek-ci-progress-item span:after {
	content: "";
	display: inline-block;
	width: 30px;
	border-top:#0D2F62 1px solid;
	margin: 0 10px;
}

.ek-ci-progress-item:last-child span:after {
	display: none;
}
.ek-ci-step {
	display: none;
}

.ek-ci-step.active {
	display: block;
}

.ek-ci-box {
    position: relative;
	width: 900px;
    max-width: 90%;
	margin: 0 auto 35px;
	background: #fff;
	border-radius: 8px;
	padding: 70px 40px 40px 40px;
	box-shadow: 0px 3px 20px #272C3E29;
}

.step-icon {
    position: absolute;
    top: -68px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.step-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    background: url('../img/top_circle.png') top center no-repeat;
    border-radius: 100%;
   
   

}

.ek-ci-choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
}

.ek-ci-choice-figure {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 190px;
	max-width: 35%;
	z-index: 5;
	pointer-events: none;
	transform: translateX(-50%) scaleX(1);
	transition: transform 300ms ease;
}

/* Default state points at value="1" (right-hand box, checked by default -
   מקיף+חובה and צד ג'+חובה swapped positions per client request). When the
   left-hand box (value="3") is selected instead, mirror the figure so she
   visually points at whichever card is actually checked. */
.ek-ci-choice-grid:has(input[value="3"]:checked) .ek-ci-choice-figure {
	transform: translateX(-50%) scaleX(-1);
}

#step-2 .ek-ci-checkbox {
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-top: 32px;
}

#step-2 input[type="checkbox"] {
    display: inline-block;
	margin-left: 5px;
    width: 19px;
    height: 19px;
    vertical-align:middle;
}

#step-2 .ek-ci-checkbox a {
    text-decoration: underline;
}

#step-2 .ek-ci-checkbox a:hover {
    text-decoration: none;
}

#step-2 .ek-ci-grid-2 label {
	position: relative;
}

#step-2 .ek-ci-grid-2 label span {
	display: inline-block;
	position: absolute;
	top:-8px;
	right: 20px;
	background: #FFF;
	z-index: 10;
	padding: 0 7px;
	font-size: 16px;

}
#step-2 .ek-ci-box {
	background: #FFF url('../img/step2.png') 100px bottom no-repeat;
}

.ek-ci-choice {
    position: relative;
	cursor: pointer;
}

.ek-ci-choice input{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    opacity: 0;

}

.ek-ci-choice input {
	
}

.ek-ci-choice span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 230px;
	border: 2px solid #cbd6e3;
	border-radius: 8px;
}

.ek-ci-choice.selected span {
	border-color: #31bd2e;
	box-shadow: 0 0 0 1px #31bd2e;
}

.ek-ci-choice img {
	max-width: 230px;
	margin-bottom: 25px;
}

.ek-ci-choice text {
	font-size: 22px;
	color: #c91f3a;
    font-weight: 800;
}

.ek-ci-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ek-ci-form label {
	position: relative;
	text-align: right;
	font-weight: 700;
}

.ek-ci-form input[type="text"],
.ek-ci-form input[type="email"],
.ek-ci-form input[type="tel"],
.ek-ci-form input[type="date"],
.ek-ci-form input[type="number"],
.ek-ci-form select {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

.ek-ci-form input.error,
.ek-ci-form select.error {
	border-color: #c91f3a;
}

.ek-ci-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 25px;
}

.ek-ci-checkbox input {
	width: 18px;
	height: 18px;
}

.ek-ci-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin: 25px 0;
}

.ek-ci-buttons label {
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}

.ek-ci-buttons input {
	display: none;
}

.ek-ci-buttons span {
	display: block;
	border: 1px solid #0b3268;
	border-radius: 6px;
	padding: 16px 25px;
	background: #fff;
	font-size: 16px;
	font-weight: bold;
}

.ek-ci-buttons .selected span {
	border-color: #31bd2e;
	box-shadow: 0 0 0 2px #31bd2e;
}

.ek-ci-with-side {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 35px;
	text-align: right;
}

.ek-ci-side-tabs button {
	font-family: 'Noto Sans Hebrew';
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0px 80px 80px 0px;
	padding: 14px 20px;
	margin-bottom: 10px;
	background: #d5e0ee;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.ek-ci-side-tabs button.active {
	background: #c91f3a;
}

.ek-ci-side-tabs button.completed {
	background: #c91f3a;
}


.ek-ci-side-tabs button i {
	margin-left: 7px;
}

.ek-ci-inner-step {
	display: none;
}

.ek-ci-inner-step.active {
	display: block;
}

.ek-ci-question {
	border-top: 1px solid #dfe6ef;
	padding-top: 20px;
	margin-top: 20px;
	text-align: center;
}


.ek-ci-next,
.ek-ci-submit {
	box-sizing: border-box;
	position: relative;
	font-family: 'Noto Sans Hebrew';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 289px;
	max-width: 100%;
	height: 55px;
	text-align: center;
	border: 0;
	border-radius: 80px;
	background: #3CB833;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	font-weight: 700;
	padding: 0px 30px 4px;
	cursor: pointer;
	transition: all 300ms ease;
}

.ek-ci-next i {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	border: none;
	box-shadow: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border:#FFF 1px solid;
	border-radius: 100%;

}

.ek-ci-next.disabled {
	opacity: 0.5;
	cursor: none;
}

.ek-ci-back {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	width: 289px;
	max-width: 100%;
	height: 55px;
	border-radius: 80px;
	background: #ccc;
	font-size: 28px;
	line-height: 1;
	color: #0b3268;
	font-weight: 700;
	padding: 0px 30px 4px;
	cursor: pointer;
    font-family: 'Noto Sans Hebrew';
	transition: all 300ms ease;
}


.ek-ci-back i {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	border: none;
	box-shadow: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border:#0b3268 1px solid;
	border-radius: 100%;
}

.ek-ci-buttons button:hover {
	transform: scale(0.9);
}

.disclamer {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	font-size: 14px;
	text-align: center;
}



.ek-ci-red {
	color: #c91f3a;
	font-weight: 800;
}

.ek-ci-message {
	min-height: 24px;
	font-weight: 700;
	color: #c91f3a;
}



.ek-ci-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.ek-ci-modal .ek-ci-box {
	padding-top: 40px;
}

.ek-ci-modal.active {
	display: block;
}

.ek-ci-modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: rgba(13, 47, 98, 0.65)
}

.ek-ci-modal__content {
    position: relative;
    z-index: 900;
    width: 980px;
    max-width: 90%;
    max-height: 90vh;
    overflow:inherit;
    margin: 10vh auto;
	text-align: start;

}

.ek-ci-modal__close {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 0;
    background: none;
    font-size: 28px;
    cursor: pointer;
}

.ek-ci-modal-title {
	font-size: 28px;
	font-weight: bold;
	color: #BC2035;
	margin-bottom: 30px;

}

.modal-row {
	position: relative;
	display: flex;
	padding: 30px 0;
	border-top: #C7CDD6 1px solid;
}

.modal-row:after {
	content: "";
	position:absolute;
	bottom:-20px;
	left:0;
	width: 25%;
	height: 40px;
	z-index: 10;
	background: #FFF;

}

.mod-row-img {
	width: 25%;
	padding-left: 20px;
}

.mr-info {
	width: 75%;
	padding-left: 25%;
}

.mr-title {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;

}

.mr-text {
	font-size: 16px;
	line-height: 1.3;
}

.modal-ci-popup-img {
	position:absolute;
	left: -130px;
	bottom: 0;
	z-index: 100;
	}

#ek-ins-options-link button {
	display: inline-block;
	background: none;
	border: none;
	box-shadow: none;
	font-size: 18px;
	text-decoration: underline;
	cursor: pointer;
	color: #0D2F62;

}

#ek-ins-options-link button:hover {
	text-decoration: none;
}

#ek-ins-options-link button i {
	font-size: 20px;
	margin-left: 7px;
}

.step-info {
	position: relative;
	display: inline-block;
	margin: 50px auto 0 auto;
	background: #E6ECF6;
	border-radius: 80px;
	margin-right: 30px;
}

.step-info .bell {
	position: absolute;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	right: -28px;
	top:-10px;
	background: #E6ECF6;
	border-radius: 80px;
}

.step-info .txt {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 35px;
	text-align: center;
}

#step-3 .step-info {
	width: 278px;
	max-width: 90%;

}

#step-3 .ek-ci-box {
    background: #FFF url('../img/step2.png') 190px bottom no-repeat;
}

.ek-ci-date-wrap {
	width: 40%;
	margin:0 auto;
}

.ek-ci-date-wrap label {
	position: relative;
	display: block;
	width: 100%;
	font-size: 15px;
	font-weight: normal;
}

.ek-ci-date {
	color: #0D2F62;
	padding-left: 42px; /* leave room for the calendar icon on the left */
}

/* Wraps just the input + icon, so the icon centers on the input itself
   regardless of whatever else (e.g. a floating label span) shares the
   outer <label> with it. */
.ek-ci-date-field {
	position: relative;
	display: block;
	width: 100%;
}

.ek-ci-date-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	color: #0b3268;
	cursor: pointer;
}

.ek-ci-date-icon:hover {
	color: #3CB833;
}

/* Building/mortgage insurance form (and reusable by other new forms):
   a ₪-prefixed number field, same overlay-icon pattern as the date field. */
.ek-ci-currency-field {
	position: relative;
	display: block;
	width: 100%;
}

.ek-ci-currency-field .currency-sign {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	line-height: 1;
	color: #0b3268;
	pointer-events: none;
}

.ek-ci-currency-field input {
	padding-left: 34px;
}

.flex-ci-box {
	display: flex;
}

.flex-ci-box  .step-body {
	width: calc(100% - 210px);
	padding-right: 30px;
	border-right:1px solid #d7e0ea;
}

#step-4 .flex-ci-box  .step-body {
	padding:0 14%;
}

.flex-ci-box aside {
	font-family: 'Noto Sans Hebrew';
	width: 210px;
	background: url('../img/step5.png') right bottom no-repeat;

}

#step-4 .flex-ci-box aside {
	background: none;
}

.small-btns button {
	font-size: 16px;
	font-weight: 600;
	background: #0D2F62;
	color: #FFF;
	border-radius: 80px;
	border: #0D2F62 1px solid;
	padding: 11px 30px;
	transition: all 300ms ease;
	cursor: pointer;
}

.small-btns #ek-skip-car-lookup {
	background: #FFF;
	color:#0D2F62 ;
}

.small-btns button:hover {
	transform: scale(0.9);
}

.ek-ci-toptext {
	text-align: center;
	margin-bottom: 30px;
}

.s4-topititle {
	font-weight: bold;
	margin-bottom: 10px;
}

.s4-toptxt {
	font-size: 13px;
	line-height: 1.3;
}

#step-4 .step-info .txt {
	font-size: 12px;
	padding: 10px 20px;

}

.success {
	color: #31bd2e;
}

#ek-ci-young-driver-block {
	margin-top: 30px;
}

.ek-ci-debug-quotes {
	margin-top: 30px;
	border: 2px dashed #c91f3a;
	border-radius: 6px;
	padding: 12px;
	text-align: left;
	direction: ltr;
}

.ek-ci-debug-quotes summary {
	cursor: pointer;
	font-weight: 700;
	color: #c91f3a;
}

.ek-ci-debug-quotes pre {
	max-height: 400px;
	overflow: auto;
	font-size: 12px;
	background: #f7f7f7;
	padding: 10px;
	border-radius: 4px;
}

/* Override the theme's generic .error (red block, white bold text) with the
   same plain colored-text treatment .success gets, just in red. */
#ek-ci-car-result .error {
	background: none;
	color: #c91f3a;
	font-weight: normal;
	text-align: center;
	font-size: 16px;
}

#ek-ci-car-number {
	text-align: center;
	font-weight:  bold;
}

#step-4 .ek-ci-box {	
    background: #FFF url('../img/step4.png') 15px bottom no-repeat;
}
.ek-ci-loader-box {
    position: relative;
    z-index: 900;
    width: 580px;
    max-width: 70%;
    max-height: 90vh;
    overflow: auto;
    margin: 10vh auto;
    padding: 50px;
    background: #fff;
    direction: rtl;
	border-radius: 10px;
}

.ek-ci-loader-box h2 {
	font-size: 28px;
	font-weight: bold;
	color: #BC2035;
}

.ek-ci-loader-box p {
	font-weight: 500;
	margin-bottom: 0;
}

#step-5  {
	text-align: start;

}

#step-5 .questions {
	border-top: #272C3E29 1px solid;
}
.car-info {
	text-align: start;
	margin-bottom: 30px;
}

.car-info strong {
	display: block;
	margin-bottom: 20px;
}

.car-info .car-details li {
	font-size: 14px;
	margin-bottom: 15px;
}

.car-info .car-details li label {
	display: inline-block;
	width: 80px;
	font-weight:  normal;
}

.ek-car-notices li {
	position: relative;
	margin-bottom: 10px;
	font-size: 14px;
	text-align: start;
	font-size: 14px;
	cursor: pointer;
}

.ek-car-notices li i.fa-check {
	font-size: 20px;
	color: #3CB833;
	margin-left: 7px;
}
ek-car-notices li i.fa-circle-info {
	margin-right: 10px;
	font-size: 20px;
}


.ek-car-notices li i.fa-circle-info:hover {
	color: #BC2035;

}

.ek-car-notices li .inner,
.ek-ci-question .inner {
	position: relative;
	display: inline-block;
}

.ek-car-notices li .tooltip,
.ek-ci-question .tooltip{
	position:absolute;
    right:calc(100% + 18px);   /* left of icon in RTL */
    top:50%;
    transform:translateY(-50%) translateX(10px);

    width:220px;
    padding:22px;

    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    transition:.25s;

    z-index:100;
}

.tooltip:after{
    content:'';
    position:absolute;
    top:50%;
    right:-8px;
    transform:translateY(-50%);

    border-width:8px 0 8px 8px;
    border-style:solid;
    border-color:transparent transparent transparent #fff;
}


.ek-car-notices li.hover .tooltip,
.ek-ci-question.hover .tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
}

.ek-ci-question.hover i {
	color: #BC2035;
}

.step-section {
	padding: 30px 0;
	border-top: #272C3E29 1px solid;
}

#step-5 .ek-ci-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: none;
	font-size: 14px;
	margin-top: 0;
}

#step-5 .ek-ci-question i {
	font-size: 20px;
	margin-right: 7px;
}

#step-5 .ek-ci-question .inner {
	position: relative;
	display: inline-block;
	text-align: right;
	line-height: 1.3;
}

.ek-ci-buttons.capsul {
	display: flex;
	justify-content: space-between;
	gap: 0;
	border:#0D2F62 1px solid;
	border-radius: 80px;
	margin: 0;
	width: 117px;
	height: 39px;
	
}

.ek-ci-buttons.capsul label {
	width: 50%;
	border-radius: 80px;
	border: none;
	position: relative;
	display: inline-block;
	min-width: 30px;
	
}

.ek-ci-buttons.capsul span {
	position: absolute;
	top:0;
	right: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 67px;
	height: 37px;
	padding: 0;
	text-align: center;
	font-size: 15px;
	border-radius: 80px;
	border: none !important;
}

.ek-ci-buttons.capsul .selected span {
	background: #3CB833;
	color: #FFF;
	z-index: 20;

}

.ek-ci-buttons.capsul label:last-child span {
	right: auto;
	left: 0;
}



#step-6 {
	text-align: right;
}

#step-6 .step-info {
	position: relative;
	right: 30px;
	margin: 30px 0 50px 0;
}


.ek-ci-buttons.ek-ci-grid-3  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.ek-ci-buttons.ek-ci-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ek-ci-buttons.ek-ci-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.subform label span {
	display: inline-block;
	position: absolute;
	top:-8px;
	right: 20px;
	background: #FFF;
	z-index: 10;
	padding: 0 7px;
	font-size: 16px;

}

#step-6 .subform {
	margin-top: 15px;
}

#step-7,
#step-7 .ek-ci-form  {
	text-align: right;
}

.s-body-title {
	font-weight: bold;
	margin-bottom: 25px;
}

#step-7 .step-section {
	font-size: 16px;
}

.step-section .fa-circle-info {
	margin-right: 10px;
	font-size: 20px;
}

.ek-ci-buttons.step-7-btns {
	gap:20;
	justify-content: start;
}

.ek-ci-buttons.step-7-btns span {
    display: block;
    border: 1px solid #0b3268;
    border-radius: 80px;
    padding: 10px 35px;
    background: #fff;
    font-size: 16px;
    font-weight: bold;
}

.ek-ci-buttons.step-7-btns .selected span {
	background:#3CB833;
	border: #3CB833 1px solid;
	color: #FFF;

}
#step-7 .ek-ci-question {
	text-align: right !important;
	border: none;
	margin-top: 0;
	padding-top: 0;
}

#step-7 li.ek-ci-question {
	margin-bottom: 10px;
}

#step-7 .step-info {
	position: relative;
	right: 30px;
}

.ek-ci-top {
	margin-bottom: 20px;
	margin-top: 10px;
	text-align: right;
}

.step-notice {
	margin:20px 0;

}

.step-notice span {
	display: inline-block;
	background: #f5dde1;
	font-size: 12px;
	padding: 10px 25px;
	border-radius: 80px;
	line-height: 1;
}

#step-8 .ek-ci-notice {
	margin:20px 0;
	text-align: center;

}

#step-8 .ek-ci-notice span {
	display: inline-block;
	font-size: 18px;
	padding: 10px 25px;
	font-weight: bold;
	border-radius: 80px;
	line-height: 1;
	background:rgba(60, 184, 51, 0.26);
	border-radius: 80px;

}

#ek-ci-step8-summary {
	margin-bottom: 20px;
	text-align: center;
	font-size: 15px;
}

#step-8 .ek-ci-dates {
	text-align: center;
	margin-bottom: 50px;
	font-size: 15px;
	font-weight: bold;
}


#ek-ci-quotes-loading-modal {
	text-align: center;
}

#ek-ci-quotes-loading-modal .ek-ci-loader-box {

}

.ek-ci-quote-card {
	display: none;	
	align-items: center;
	justify-content: space-between;
	margin:0 auto 20px auto;
	padding:60px 90px 60px 170px;
	background: #FFF url(../img/step8.png) bottom left no-repeat;
	box-shadow: 0px 3px 20px #272C3E29;
	border-radius: 6px;
	width: 1008px;
	max-width: 95%;
}

#ek-ci-quotes-wrap .ek-ci-quote-card:first-child {
	display: flex;

}

/* Required vehicle protection - shown below the visible (first) card only */
.ek-ci-quote-protection {
	display: none;
	margin: 30px auto 20px auto;
	width: 1008px;
	max-width: 95%;
}

#ek-ci-quotes-wrap .ek-ci-quote-card:first-child + .ek-ci-quote-protection {
	display: block;
}

.ek-ci-price {
	font-size: 34px;
	color: #0b3268;
}

.ek-ci-buy-quote {
	display: flex;
	align-items: center;
	justify-content: center;
position: relative;
width: 209px;
height: 55px;
padding: 10px 10px 14px;
background: #3CB833;
border-radius: 80px;
text-align: center;
font-size: 28px;
line-height: 1;
font-weight: 700;
color: #FFF;
border:none;
cursor: pointer;
}

.ek-ci-buy-quote i {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	border: none;
	box-shadow: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border:#FFF 1px solid;
	border-radius: 100%;
	font-size: 22px;

}

.ek-ci-quote-breakdown {
	position: relative;
}

.ek-ci-quote-breakdown span {
	display: block;
	font-size: 13px;
	line-height: 1.2;
	font-weight: bold;
	padding-left: 40px;
}

.ek-ci-quote-breakdown::after {
	content: "";
	position: absolute;
	left: 0;
	top:0;
	height: 100%;
	border-left: 1px solid #E2E6EE;;

}

.ek-ci-quote-details summary,
.ek-ci-quote-company {
	display: none;
}

.ek-ci-quote-period {
	font-size: 15px;
	font-weight: 600;
	color: #0b3268;
	margin: 0;
}

#ek-ci-teuda {
	

}

#ek-ci-teuda .ek-ci-modal__content {
     width: 687px;
   }

#ek-ci-teuda .ek-ci-box {
	box-sizing: border-box;
	 width: 687px;
	padding: 83px 80px 25px 80px;
	background: #FFF url(../img/teuda.png) 55px 100% no-repeat;

}

#ek-ci-teuda-title {
	font-size: 25px;
	line-height: 1.2;
	color: #0D2F62;
	text-align: center;
}

#ek-ci-teuda-id-number, 
#ek-ci-teuda-issue-date {
	height: 53px;
}

#ek-ci-teuda-id-number {
	margin-bottom: 24px;
}

#ek-ci-teuda label {
	display: block;
	position: relative;
}

#ek-ci-teuda label > span:first-child {
	display: inline-block;
	position: absolute;
	top:-8px;
	right: 20px;
	background: #FFF;
	z-index: 10;
	padding: 0 7px;
}

.teuda-buttons {
	margin-top: 40px;
	text-align: center;
}



#ek-ci-teuda-skip {
	display: inline-block;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
	font-size: 20px;
	font-weight: 500;
	color: #BC2035;
	text-decoration:  underline;

}

#ek-ci-teuda-skip:hover {
	text-decoration: none;
}

#ek-ci-teuda-submit {
	position: relative;
	border: 0;
	border-radius: 35px;
	background: #31bd2e;
	color: #fff;
	font-size: 22px;
	line-height: 22px;
	font-weight: 600;
	padding: 15px 60px;
	cursor: pointer;
    font-family: 'Noto Sans Hebrew';
	transition: all 300ms ease;
	margin-bottom: 20px;
}

#ek-ci-teuda-submit i {
	display: inline-block;
	position: absolute;
	top:10px;
	left: 15px;
	border: none;
	box-shadow: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border:#FFF 1px solid;
	border-radius: 100%;

}

.teuda-buttons  .ek-ci-modal-message {
	text-align: center;
	color: #c91f3a;
	font-size: 16px;
}

#step-9 .step-img {
	text-align: center;

}

#step-9 .ek-ci-box {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.4;
}

#step-9 .final-text h2,
#step-9 .final-text h3 {
	font-size: 20px;
	font-weight:  bold;
	margin-bottom: 10px;
	color: #BC2035;
}

.ek-ci-final-link {
	display: block;
	text-align: center;
}

/* .ek-ci-submit already gets its layout from the shared .ek-ci-next,
   .ek-ci-submit rule - just handle link-specific resets and hover here. */
.ek-ci-final-link a {
	margin: 0 auto;
	color: #fff !important;
	text-decoration: none !important;
}

.ek-ci-final-link a:hover {
	transform: scale(0.9);
}

#ek-ci-teuda .ek-ci-date {
	margin-top: 0;

}

.ek-ci-no-quotes {
	text-align: center;
}

.ek-ci-back-to-step7 {
	font-size: 20px;
	margin: 70px auto 0 auto;
}

/* Heading above the "start date" 3-way choice (מהיום/מתחילת חודש הבא/בחר
   תאריך), used by several of the newer forms (building, building-contents,
   pet, truck). It was previously unstyled, rendering as plain unbolded text
   with no breathing room before the buttons. */
.ek-ci-date-choice-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

/* ==========================================================================
   Building / Mortgage Insurance form - all rules scoped to #ek-gi-building-form
   only, so none of this affects the car insurance form or any other form.
   ========================================================================== */

#ek-gi-building-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-building-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-building-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-building-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-building-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Hidden by default - shown only via JS when "בחר תאריך" is actually
   selected, so it never flashes visible on load. */
#ek-gi-building-form .ek-ci-date-wrap {
	display: none;
	width: 100%;
	margin: 20px 0 0;
}

/* Flex layout doesn't collapse margins like normal block flow does, so the
   shared .ek-ci-buttons top/bottom margins would stack unevenly with the
   label spacing above/below it. Normalize to one consistent gap. */
#ek-gi-building-form .ek-ci-buttons.ek-ci-grid-2,
#ek-gi-building-form #ek-gi-floor-fields {
	margin: 0 0 18px;
}

/* type="number" fields aren't covered by the shared text/email/tel height
   rule, so they'd otherwise render shorter than the buttons next to them. */
#ek-gi-building-form input[type="number"] {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

/* Custom dropdown arrow (FA icon in a rounded box on the left) replacing the
   plain native select arrow, to match the approved design. */
#ek-gi-building-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-building-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-building-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-building-form textarea {
	resize: none;
}

/* Step 5 - annual premium summary */
#ek-gi-building-form .ek-gi-premium-inner {
	text-align: center;
}

#ek-gi-building-form .ek-gi-premium-label {
	font-weight: 700;
	color: #0b3268;
	font-size: 22px;
}

#ek-gi-building-form .ek-gi-premium-amount {
	color: #31bd2e;
	font-weight: 800;
	font-size: 32px;
	margin: 6px 0 14px;
}

#ek-gi-building-form .ek-gi-premium-note {
	margin: 0 0 4px;
	font-size: 16px;
}

#ek-gi-building-form .ek-gi-premium-note:first-of-type {
	color: #31bd2e;
	font-size: 18px;
}

#ek-gi-building-form .ek-gi-premium-note:last-of-type {
	font-size: 18px;
	font-weight: 700;
}

#ek-gi-building-form .ek-gi-upsell-box {
	background: #eaf7e9;
	border-radius: 8px;
	padding: 20px 25px;
	margin-top: 20px;
	text-align: center;
}

#ek-gi-building-form .ek-gi-upsell-box strong {
	display: block;
	margin-bottom: 10px;
	color: #c91f3a;
}

#ek-gi-building-form .ek-gi-upsell-box p {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
}

#ek-gi-building-form .ek-gi-upsell-box #ek-gi-final-submit {
	margin: 0 auto;
}

/* Plain field labels (direct children of the box content, not inside a
   button-choice grid) stacked one per row with spacing between them. */
#ek-gi-building-form .ek-gi-box-content > label {
	display: block;
	margin-bottom: 18px;
}

/* Step 1's personal-details grid specifically becomes a single column
   (scoped to its own section id so the property-type/floor-count 2-column
   grids on other steps are unaffected). */
#bstep-1 .ek-ci-grid-2 {
	display: block;
}

#bstep-1 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-building-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-building-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

@media (max-width: 782px) {
	#ek-gi-building-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Building + Contents Insurance form - all rules scoped to #ek-gi-bc-form
   only, so none of this affects the car insurance form or any other form.
   ========================================================================== */

#ek-gi-bc-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-bc-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-bc-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-bc-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-bc-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ek-gi-bc-form .ek-ci-date-wrap {
	display: none;
	width: 100%;
	margin: 20px 0 0;
}

#ek-gi-bc-form .ek-ci-buttons.ek-ci-grid-2,
#ek-gi-bc-form #ek-gi-bc-floor-fields {
	margin: 0 0 18px;
}

#ek-gi-bc-form input[type="number"] {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

#ek-gi-bc-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-bc-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-bc-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-bc-form textarea {
	resize: none;
}

#ek-gi-bc-form .ek-gi-box-content > label,
#ek-gi-bc-form .ek-gi-box-content #ek-gi-bc-building-fields > label,
#ek-gi-bc-form .ek-gi-box-content #ek-gi-bc-contents-fields > label {
	display: block;
	margin-bottom: 18px;
}

/* Step 2's personal-details grid becomes a single column (scoped to its own
   section id so other steps' 2-column grids are unaffected). */
#bcstep-2 .ek-ci-grid-2 {
	display: block;
}

#bcstep-2 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-bc-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-bc-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

/* Tooltip ("i" info icon) next to the two step-4 currency labels - reuses
   the same visual treatment as .ek-ci-question's tooltip elsewhere, wired to
   its own .hover toggle class since forms.js (which drives that class on the
   car insurance page) isn't loaded here. */
#ek-gi-bc-form .ek-gi-label-with-tooltip {
	position: relative;
	display: inline-block;
}

#ek-gi-bc-form .ek-gi-tooltip-icon {
	margin-right: 6px;
	cursor: pointer;
	color: #0b3268;
}

#ek-gi-bc-form .ek-gi-label-with-tooltip.hover .ek-gi-tooltip-icon {
	color: #BC2035;
}

#ek-gi-bc-form .ek-gi-label-with-tooltip .tooltip {
	position: absolute;
	right: calc(100% + 18px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);

	width: 220px;
	padding: 22px;

	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .15);

	opacity: 0;
	visibility: hidden;
	transition: .25s;

	z-index: 100;
}

#ek-gi-bc-form .ek-gi-label-with-tooltip.hover .tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Step 5 (thank you) - image centered on top, overlapping down into the
   white card below it, per the approved design. */
#ek-gi-bc-form .ek-gi-bc-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-image {
	display: block;
	margin: 0 auto -60px;
	max-width: 260px;
	position: relative;
	z-index: 2;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-box {
	display: block;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 80px 40px 40px;
	text-align: center;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-title {
	color: #0b3268;
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-body {
	font-size: 16px;
	color: #333;
	margin: 0 0 20px;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-box .ek-gi-upsell-box {
	background: #eaf7e9;
	border-radius: 8px;
	padding: 20px 25px;
	margin-top: 20px;
	text-align: center;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-box .ek-gi-upsell-box strong {
	display: block;
	margin-bottom: 10px;
	color: #c91f3a;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-box .ek-gi-upsell-box p {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
}

#ek-gi-bc-form .ek-gi-bc-thankyou-box #ek-gi-bc-final-submit {
	margin: 0 auto;
}

@media (max-width: 782px) {
	#ek-gi-bc-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Business / Office Insurance form - all rules scoped to #ek-gi-biz-form
   only, so none of this affects the car insurance form or any other form.
   ========================================================================== */

#ek-gi-biz-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-biz-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-biz-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-biz-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-biz-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ek-gi-biz-form input[type="number"] {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

#ek-gi-biz-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-biz-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-biz-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-biz-form textarea {
	resize: none;
}

#ek-gi-biz-form .ek-gi-box-content > label {
	display: block;
	margin-bottom: 18px;
}

/* Both steps here are plain stacked-field forms (no button-choice grids),
   scoped to their own section ids just like the other forms' single-column
   overrides. */
#bizstep-1 .ek-ci-grid-2,
#bizstep-2 .ek-ci-grid-2 {
	display: block;
}

#bizstep-1 .ek-ci-grid-2 label,
#bizstep-2 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-biz-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-biz-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

/* Step 3 (thank you) - image centered on top, overlapping down into the
   white card below it, same composition as the building-contents form. */
#ek-gi-biz-form .ek-gi-biz-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-image {
	display: block;
	margin: 0 auto -60px;
	max-width: 260px;
	position: relative;
	z-index: 2;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-box {
	display: block;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 80px 40px 40px;
	text-align: center;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-title {
	color: #0b3268;
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-body {
	font-size: 16px;
	color: #333;
	margin: 0 0 20px;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-box .ek-gi-upsell-box {
	background: #eaf7e9;
	border-radius: 8px;
	padding: 20px 25px;
	margin-top: 20px;
	text-align: center;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-box .ek-gi-upsell-box strong {
	display: block;
	margin-bottom: 10px;
	color: #c91f3a;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-box .ek-gi-upsell-box p {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
}

#ek-gi-biz-form .ek-gi-biz-thankyou-box #ek-gi-biz-final-submit {
	margin: 0 auto;
}

@media (max-width: 782px) {
	#ek-gi-biz-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Pet Insurance form - all rules scoped to #ek-gi-pet-form only, so none of
   this affects the car insurance form or any other form.
   ========================================================================== */

#ek-gi-pet-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-pet-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-pet-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-pet-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-pet-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Hidden by default - shown only via JS when "בחר תאריך" is actually
   selected, so it never flashes visible on load. */
#ek-gi-pet-form .ek-ci-date-wrap {
	display: none;
	width: 100%;
	margin: 20px 0 0;
}

/* Flex layout doesn't collapse margins like normal block flow does, so the
   shared .ek-ci-buttons top/bottom margins would stack unevenly with the
   label spacing above/below them. Normalize to one consistent gap - applies
   to all three 2-button toggle rows on step 2 (pet type/gender/breed). */
#ek-gi-pet-form .ek-ci-buttons.ek-ci-grid-2 {
	margin: 0 0 18px;
}

/* Accessibility: the shared .ek-ci-buttons input { display:none } rule takes
   these radios out of the tab order entirely, so keyboard users skip past
   the choice buttons on step 2 (pet type/gender/breed) and step 3 (start
   date). Replace display:none with a visually-hidden-but-focusable pattern
   here, and add a visible focus ring on the styled span, so Tab reaches
   every button and Space/Enter still toggles it via the native input. */
#ek-gi-pet-form .ek-ci-buttons input {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

#ek-gi-pet-form .ek-ci-buttons input:focus-visible + span {
	outline: 2px solid #0b3268;
	outline-offset: 2px;
}

#ek-gi-pet-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-pet-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-pet-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-pet-form textarea {
	resize: none;
}

#ek-gi-pet-form .ek-gi-box-content > label {
	display: block;
	margin-bottom: 18px;
}

/* Step 1's personal-details grid becomes a single column (scoped to its own
   section id so other steps' 2-column toggle grids are unaffected). */
#petstep-1 .ek-ci-grid-2 {
	display: block;
}

#petstep-1 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-pet-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-pet-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

/* Step 5 (thank you) - image centered on top, overlapping down into the
   white card below it, same composition as the other forms' thank-you page,
   but simpler here: no upsell box, just a single "back to home" button. */
#ek-gi-pet-form .ek-gi-pet-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-pet-form .ek-gi-pet-thankyou-image {
	display: block;
	margin: 0 auto -70px;
	max-width: 220px;
	position: relative;
	z-index: 1;
}

#ek-gi-pet-form .ek-gi-pet-thankyou-box {
	position: relative;
	z-index: 2;
	display: block;
	width: 400px;
	max-width: 90%;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 30px 30px 40px;
	text-align: center;
}

#ek-gi-pet-form .ek-gi-pet-thankyou-title {
	color: #c91f3a;
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-pet-form .ek-gi-pet-thankyou-body {
	font-size: 16px;
	color: #0b3268;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 24px;
}

#ek-gi-pet-form .ek-gi-pet-thankyou-box #ek-gi-pet-final-submit {
	margin: 0 auto;
	font-size: 18px;
	padding: 0 20px 2px 55px;
}

@media (max-width: 782px) {
	#ek-gi-pet-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Professional Liability Insurance form - all rules scoped to
   #ek-gi-pl-form only, so none of this affects the car insurance form or
   any other form.
   ========================================================================== */

#ek-gi-pl-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-pl-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-pl-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-pl-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-pl-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ek-gi-pl-form input[type="number"] {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

#ek-gi-pl-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-pl-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-pl-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-pl-form textarea {
	resize: none;
}

#ek-gi-pl-form .ek-gi-box-content > label {
	display: block;
	margin-bottom: 18px;
}

/* Both steps here are plain stacked-field forms (no button-choice grids),
   scoped to their own section ids just like the business form. */
#plstep-1 .ek-ci-grid-2,
#plstep-2 .ek-ci-grid-2 {
	display: block;
}

#plstep-1 .ek-ci-grid-2 label,
#plstep-2 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-pl-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-pl-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

/* Step 3 (thank you) - narrow white card with the image behind it,
   overlapping down into the card; red bigger title, blue bold body text -
   matches the corrected pet insurance form layout. */
#ek-gi-pl-form .ek-gi-pl-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-pl-form .ek-gi-pl-thankyou-image {
	display: block;
	margin: 0 auto -70px;
	max-width: 220px;
	position: relative;
	z-index: 1;
}

#ek-gi-pl-form .ek-gi-pl-thankyou-box {
	position: relative;
	z-index: 2;
	display: block;
	width: 400px;
	max-width: 90%;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 30px 30px 40px;
	text-align: center;
}

#ek-gi-pl-form .ek-gi-pl-thankyou-title {
	color: #c91f3a;
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-pl-form .ek-gi-pl-thankyou-body {
	font-size: 16px;
	color: #0b3268;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 24px;
}

#ek-gi-pl-form .ek-gi-pl-thankyou-box #ek-gi-pl-final-submit {
	margin: 0 auto;
	font-size: 18px;
	padding: 0 20px 2px 55px;
}

@media (max-width: 782px) {
	#ek-gi-pl-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Truck Insurance form - all rules scoped to #ek-gi-truck-form only, so
   none of this affects the car insurance form or any other form.
   ========================================================================== */

#ek-gi-truck-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 30px;
	text-align: right;
}

#ek-gi-truck-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-truck-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-truck-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-truck-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Step 5 is much longer than the other steps (drivers + claims), so let it
   grow the box normally instead of vertically centering its content like
   the shorter forms do. */
#ek-gi-truck-form .ek-gi-truck-step5-box > *:not(.step-icon) {
	justify-content: flex-start;
}

#ek-gi-truck-form .ek-ci-date-wrap {
	display: none;
	width: 100%;
	margin: 20px 0 0;
}

#ek-gi-truck-form input[type="number"] {
	width: 100%;
	height: 57px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}

#ek-gi-truck-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-truck-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-truck-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

#ek-gi-truck-form textarea {
	resize: none;
}

#ek-gi-truck-form .ek-gi-box-content > label,
#ek-gi-truck-form .ek-gi-box-content > strong {
	display: block;
	margin-bottom: 18px;
}

/* Steps 2 and 4 are plain stacked-field forms (no button-choice grids). */
#truckstep-2 .ek-ci-grid-2,
#truckstep-4 .ek-ci-grid-2 {
	display: block;
}

#truckstep-2 .ek-ci-grid-2 label,
#truckstep-4 .ek-ci-grid-2 label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-truck-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-truck-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

/* Accessibility: the shared .ek-ci-buttons input { display:none } rule takes
   these radios (choice buttons, capsule buttons) out of the tab order
   entirely. Replace display:none with a visually-hidden-but-focusable
   pattern here, and add a visible focus ring, so Tab reaches every option. */
#ek-gi-truck-form .ek-ci-buttons input {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

#ek-gi-truck-form .ek-ci-buttons input:focus-visible + span {
	outline: 2px solid #0b3268;
	outline-offset: 2px;
}

/* Step 5 - driver count / gender toggles reuse the shared 2 and 3-column
   button grids; just normalize their bottom spacing (flex layout doesn't
   collapse margins the way normal block flow does). */
#ek-gi-truck-form .ek-gi-box-content > .ek-ci-buttons.ek-ci-grid-2,
#ek-gi-truck-form .ek-gi-box-content > .ek-ci-buttons.ek-ci-grid-3,
#ek-gi-truck-form .ek-gi-box-content .ek-ci-grid-2:not(.ek-ci-buttons) {
	margin: 0 0 18px;
}

#ek-gi-truck-oldest-driver-block {
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid #dfe6ef;
}

/* Claims questions - no card border (per approved design); instead a plain
   bottom-divider separates each question / "which year" follow-up. The
   shared .ek-ci-question rule adds its own top border + top margin, which
   isn't wanted here, so it's cleared. */
#ek-gi-truck-form .ek-gi-truck-claim-card {
	padding: 16px 0;
	margin: 0;
	border-top: none;
	border-bottom: 1px solid #dfe6ef;
}

#ek-gi-truck-form .ek-gi-truck-claim-card:last-child {
	border-bottom: none;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-question {
	text-align: right;
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-question .inner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-weight: 600;
	font-size: 14px;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-buttons.capsul {
	width: auto;
	height: auto;
	border: none;
	justify-content: flex-start;
	gap: 12px;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-buttons.capsul label {
	width: auto;
	min-width: 80px;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-buttons.capsul span {
	position: static;
	width: auto;
	height: auto;
	padding: 10px 22px;
	border: 1px solid #0b3268 !important;
	border-radius: 80px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: #0b3268;
}

#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-buttons.capsul .selected span {
	background: #3CB833;
	border-color: #3CB833 !important;
	color: #fff;
}

#ek-gi-truck-form .ek-gi-claim-year-label {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 14px;
	color: #0b3268;
}

/* Step 5's own tooltip icon/positioning - the shared .ek-ci-question/.tooltip
   rules already exist and are unscoped, but their hover trigger comes from
   forms.js which isn't loaded here, so a fresh handler drives the same
   .hover class from truck-form.js. */
#ek-gi-truck-form .ek-ci-question .fa-circle-info {
	margin-right: 6px;
	cursor: pointer;
	color: #0b3268;
}

#ek-gi-truck-form .ek-ci-question.hover .fa-circle-info {
	color: #BC2035;
}

#ek-gi-truck-form .step-info {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	background: #E6ECF6;
	border-radius: 80px;
	padding: 10px 20px 10px 10px;
}

#ek-gi-truck-form .step-info .bell {
	position: static;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 80px;
	font-size: 16px;
	color: #0b3268;
}

#ek-gi-truck-form .step-info .bell img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

#ek-gi-truck-form .step-info .txt {
	font-size: 13px;
	font-weight: 500;
	padding: 0;
	text-align: right;
}

/* Step 6 (thank you) - narrow white card with the image behind it,
   overlapping down into the card; red bigger title, blue bold body text,
   plus the green upsell box (same composition as the corrected pet/business
   forms). */
#ek-gi-truck-form .ek-gi-truck-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-truck-form .ek-gi-truck-thankyou-image {
	display: block;
	margin: 0 auto -70px;
	max-width: 340px;
	width: 90%;
	position: relative;
	z-index: 1;
}

#ek-gi-truck-form .ek-gi-truck-thankyou-box {
	position: relative;
	z-index: 2;
	display: block;
	width: 420px;
	max-width: 90%;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 30px 30px 40px;
	text-align: center;
}

#ek-gi-truck-form .ek-gi-truck-thankyou-title {
	color: #c91f3a;
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-truck-form .ek-gi-truck-thankyou-body {
	font-size: 16px;
	color: #0b3268;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 10px;
}

#ek-gi-truck-form .ek-gi-upsell-box {
	background: #eaf7e9;
	border-radius: 8px;
	padding: 20px 25px;
	margin-top: 20px;
	text-align: center;
}

#ek-gi-truck-form .ek-gi-upsell-box strong {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	white-space: nowrap;
	color: #c91f3a;
}

#ek-gi-truck-form .ek-gi-upsell-box p {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
}

#ek-gi-truck-form .ek-gi-upsell-box #ek-gi-truck-final-submit {
	margin: 0 auto;
	font-size: 20px;
}

@media (max-width: 782px) {
	#ek-gi-truck-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}

	#ek-gi-truck-form .ek-gi-truck-claims .ek-ci-buttons.capsul {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Travel Insurance form ("ביטוח נסיעות לחו״ל") - all rules scoped to
   #ek-gi-tr-form, so none of this affects any other form.
   ========================================================================== */

#ek-gi-tr-form .ek-ci-box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 40px;
	padding: 10px 40px 0px;
	text-align: right;
}

#ek-gi-tr-form .step-icon {
	position: static;
	width: auto;
	flex: 0 0 320px;
	display: block;
}

#ek-gi-tr-form .step-icon span {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 0;
	display: block;
}

#ek-gi-tr-form .step-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

#ek-gi-tr-form .ek-ci-box > *:not(.step-icon) {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ek-gi-tr-form .ek-gi-box-title {
	font-size: 20px;
	font-weight: 700;
	color: #0b3268;
	margin-bottom: 20px;
}

#ek-gi-tr-form .ek-gi-box-content > label {
	display: block;
	margin-bottom: 18px;
}

#ek-gi-tr-form .ek-ci-checkbox {
	display: block;
	margin-top: 20px;
}

#ek-gi-tr-form .ek-ci-date-field {
	position: relative;
	display: block;
}

/* Hide the native OS/browser select arrow so only our own chevron icon
   shows (without this, both render - the stray extra arrow the client
   flagged on the traveler gender field). */
#ek-gi-tr-form .ek-ci-select-field {
	position: relative;
	display: block;
	width: 100%;
}

#ek-gi-tr-form .ek-ci-select-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 54px;
	cursor: pointer;
}

#ek-gi-tr-form .ek-ci-select-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0b3268;
	font-size: 16px;
	pointer-events: none;
}

/* Step 4 - align the traveler fields to the top of the box instead of
   vertically centering, so the "+ הוספת נוסע/ת" button sits right below
   them instead of floating with a big empty gap above it. */
#trstep-4 .ek-gi-box-content {
	justify-content: flex-start;
}

/* Step 2 (destination) - card grid, same convention as the other forms'
   image-choice cards. */
/* Step 2 (destination) - clean 4-column grid of country cards only (no
   image cell). The agent illustration is a separate element bleeding out
   from the box's bottom-left corner, per the approved design. */
#ek-gi-tr-form .ek-gi-tr-destinations-box {
	position: relative;
	display: block;
	padding: 40px;
	text-align: center;
	overflow: visible;
}

/* Specificity note: #ek-gi-tr-form .ek-ci-box > *:not(.step-icon) (earlier in
   this file) also matches these two and sets flex/display - these selectors
   need to be at least as specific, and later in the file, to win. */
#ek-gi-tr-form .ek-gi-tr-destinations-box .ek-gi-tr-destinations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

#ek-gi-tr-form .ek-gi-tr-destinations-box .ek-gi-tr-destinations-agent {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 180px;
	pointer-events: none;
}

.ek-gi-tr-destination-card {
	position: relative;
	display: block;
	border: 1px solid #cbd6e3;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	padding: 20px 10px;
}

.ek-gi-tr-destination-card input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ek-gi-tr-destination-card span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ek-gi-tr-destination-card img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.ek-gi-tr-destination-card text {
	font-size: 16px;
	font-weight: 800;
	color: #c91f3a;
}

.ek-gi-tr-destination-card.selected {
	border-color: #31bd2e;
	box-shadow: 0 0 0 2px #31bd2e;
}

.ek-gi-tr-destinations-agent img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 782px) {
	.ek-gi-tr-destinations-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	#ek-gi-tr-form .ek-gi-tr-destinations-box .ek-gi-tr-destinations-agent {
		display: none;
	}
}

/* Step 4 (travelers) - one inline block per traveler (birth-date picker +
   gender select, same field style as every other form), no popup. Each
   block after the first gets its own "הסרה" remove link. */
#ek-gi-tr-travelers-list {
	margin-bottom: 18px;
}

.ek-gi-tr-traveler-block {
	border-bottom: 1px solid #dfe6ef;
	padding-bottom: 18px;
	margin-bottom: 18px;
}

.ek-gi-tr-traveler-block:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 18px;
}

.ek-gi-tr-traveler-block-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.ek-gi-tr-traveler-title {
	font-weight: 700;
	color: #0b3268;
}

.ek-gi-tr-traveler-remove {
	border: 0;
	background: none;
	color: #c91f3a;
	font-weight: 700;
	cursor: pointer;
}

.ek-gi-tr-add-traveler-btn {
	display: block;
	width: 100%;
	max-width: 260px;
	margin: 0 auto 15px;
	border: 1px solid #0b3268;
	border-radius: 80px;
	background: #E6ECF6;
	color: #0b3268;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 20px;
	cursor: pointer;
}

/* Step 5 (covers) - full pill grid shown directly on the step, no popup. */
#trstep-5 .ek-gi-box-content {
	justify-content: flex-start;
}

.ek-gi-tr-covers-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
	margin-bottom: 20px;
}

.ek-gi-tr-cover-pill {
	border: 1px solid #0b3268;
	border-radius: 80px;
	background: #fff;
	color: #0b3268;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 22px;
	cursor: pointer;
}

.ek-gi-tr-cover-pill.selected {
	background: #c91f3a;
	border-color: #c91f3a;
	color: #fff;
}

.ek-gi-tr-cover-pill.locked {
	opacity: 0.85;
	cursor: default;
}

.ek-gi-tr-cover-dates-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	border-top: 1px solid #dfe6ef;
	padding-top: 15px;
	margin-bottom: 15px;
}

.ek-gi-tr-cover-dates-label {
	font-weight: 700;
	color: #0b3268;
	flex: 0 0 100%;
	text-align: center;
}

.ek-gi-tr-cover-dates-row input {
	width: 140px;
	height: 44px;
	border: 1px solid #0b3268;
	border-radius: 4px;
	padding: 0 10px;
	font-size: 14px;
}

/* Step 6 (results) - one card per offer, built by renderResultsCard() in
   travel-form.js from the live Trusty response (list of all offers,
   cheapest first - see buildOfferCardHtml()). No "mark for comparison"
   control since that only makes sense in the designer's original
   side-by-side comparison view, which isn't what's built here. */
#ek-gi-tr-form .ek-gi-tr-results-box {
	display: block;
	padding: 0;
	text-align: right;
	/* Transparent wrapper - only the individual offer cards below have their
	   own white background/shadow/radius, so there's no extra shadow/seam
	   showing through the gaps between stacked cards. */
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.ek-gi-tr-result-card-inner {
	position: relative;
	overflow: visible;
	display: flex;
	align-items: flex-start;
	gap: 30px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 30px 40px 30px 150px;
	margin-bottom: 20px;
}

.ek-gi-tr-result-card-inner:last-child {
	margin-bottom: 0;
}

/* Bleeds out of the card's bottom-left corner, same treatment as the step 2
   destination box's agent illustration - not part of the flex row, so it
   doesn't push the price/covers columns around. */
.ek-gi-tr-result-agent {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 150px;
	pointer-events: none;
}

.ek-gi-tr-result-agent img {
	width: 100%;
	display: block;
}

.ek-gi-tr-result-covers {
	flex: 1;
	min-width: 0;
	border-right: 1px solid #eaeaea;
	padding-right: 20px;
}

.ek-gi-tr-result-covers-title {
	font-weight: 700;
	color: #0b3268;
	font-size: 16px;
	margin-bottom: 10px;
}

/* Overrides the theme's default .entry ul indent margins, scoped to step 6
   only, so the "כיסויים עיקריים" checklist isn't pushed off-center. */
#trstep-6 .entry ul {
	margin-right: 0;
	margin-left: 0;
}

#trstep-6 .ek-ci-next,
#trstep-6 .ek-ci-submit {
	width: 195px;
}

/* Own column at the far right of the card (rightmost = first DOM child in
   this RTL flex row) - the company's logo (files named "{company_id}_company.png",
   copied into the theme), per the approved design's layout. */
.ek-gi-tr-result-company {
	flex: 0 0 110px;
	min-width: 0;
	align-self: center;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ek-gi-tr-result-company img {
	max-width: 100px;
	max-height: 60px;
	width: auto;
	height: auto;
}

.ek-gi-tr-result-covers-list {
	list-style: none;
	margin: 0 0 6px;
	margin-right: 0 !important;
	padding: 0;
	font-size: 14px;
	color: #333;
}

.ek-gi-tr-result-covers-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ek-gi-tr-result-covers-list li i {
	color: #3aa757;
	font-size: 14px;
}

.ek-gi-tr-result-details {
	margin-top: 6px;
}

.ek-gi-tr-result-details summary {
	color: #c91f3a;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.ek-gi-tr-result-details summary::-webkit-details-marker {
	display: none;
}

.ek-gi-tr-result-details .ek-gi-tr-result-details-close {
	display: none;
}

.ek-gi-tr-result-details[open] .ek-gi-tr-result-details-open {
	display: none;
}

.ek-gi-tr-result-details[open] .ek-gi-tr-result-details-close {
	display: inline;
}

.ek-gi-tr-result-details-table {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.ek-gi-tr-result-details-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	font-size: 13px;
}

.ek-gi-tr-result-details-row .label {
	color: #0b3268;
	font-weight: 700;
}

.ek-gi-tr-result-details-row .value {
	color: #333;
}

.ek-gi-tr-result-price-wrap {
	flex: 0 0 160px;
	text-align: center;
	align-self: center;
	border-right: 1px solid #eaeaea;
	padding-right: 20px;
}

.ek-gi-tr-result-price {
	font-size: 32px;
	font-weight: 800;
	color: #0b3268;
	white-space: nowrap;
	direction: ltr;
}

.ek-gi-tr-result-price-note {
	font-size: 13px;
	font-weight: 700;
	color: #0b3268;
	margin: 2px 0 14px;
}

.ek-gi-tr-form .ek-gi-tr-buy-btn {
	margin: 0 auto;
	width: 195px;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Loading popup shown between step 5 and step 6 (see showLoadingVideo() /
   hideLoadingVideo() in travel-form.js) - reuses the car insurance form's
   shared .ek-ci-modal / .ek-ci-loader-box look (see forms/car/car-form.php),
   just with hul-vid.mp4 and travel-specific copy, plus a wider box and
   centered text per the client's reference design. */
.ek-gi-tr-loader-box {
	width: 560px;
	text-align: center;
}

.ek-gi-tr-loader-box video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 20px;
}

.ek-gi-tr-loader-box h2 {
	text-align: center;
}

.ek-gi-tr-loader-box p {
	text-align: center;
}

/* Fallback button under the offer list ("לא מצאתי, חזרו אליי") - same green
   pill as "לרכישה", but wide enough for the text on one line and centered
   below all the cards. #trstep-6 .ek-ci-next (width:195px) is more specific
   than a plain class rule, so this needs the same #trstep-6 prefix to win. */
/* The wrapper is a plain <span> inside .ek-ci-buttons, which normally
   styles a pill-choice span (border/padding/background) - reset that here
   so it doesn't draw its own box around the button. */
#ek-gi-tr-callback-btn-wrap {
	display: contents;
}

#trstep-6 .ek-ci-buttons {
	flex-wrap: nowrap;
}

#trstep-6 .ek-gi-tr-callback-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	max-width: 100%;
	height: 48px;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.ek-gi-tr-result-price-wrap {
		border-right: none;
		padding-right: 0;
		border-top: 1px solid #eaeaea;
		padding-top: 20px;
	}
}

/* Step 7 (thank you) - side-by-side card per the approved design: text
   block on the right, agent illustration on the left bleeding past the
   card's top/bottom edges (no upsell box on this form). */
#ek-gi-tr-form .ek-gi-tr-thankyou {
	text-align: center;
	padding: 0 40px;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-box {
	position: relative;
	overflow: visible;
	display: flex;
	/* The shared #ek-gi-tr-form .ek-ci-box rule sets flex-direction:
	   row-reverse (needed for the icon+content boxes on other steps) -
	   inside this RTL form that flips the row back to LTR order, which is
	   why the content/image ended up swapped. Reset it to row here so the
	   first DOM child (content) renders rightmost, as intended. */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 45px 50px;
	text-align: right;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-content {
	flex: 1;
	min-width: 0;
	text-align: center;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-title {
	color: #c91f3a;
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 14px;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-body {
	font-size: 15px;
	line-height: 1.6;
	color: #333;
	margin: 0 0 22px;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-box #ek-gi-tr-final-submit {
	margin: 0 auto;
	font-size: 22px;
	padding: 0px 30px 0px;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-image-wrap {
	flex: 0 0 380px;
	align-self: flex-end;
	/* Bleeds past the card's top and bottom edges, per the approved design
	   (the image is much larger/taller than the text column here). */
	margin-top: -45px;
	margin-bottom: -45px;
}

#ek-gi-tr-form .ek-gi-tr-thankyou-image {
	display: block;
	width: 100%;
	max-width: 380px;
}

@media (max-width: 782px) {
	#ek-gi-tr-form .ek-gi-tr-thankyou-box {
		flex-direction: column;
		text-align: center;
		padding: 40px 24px 0;
	}

	#ek-gi-tr-form .ek-gi-tr-thankyou-image-wrap {
		flex: 0 0 auto;
		align-self: center;
		margin: -70px 0 0;
		width: 180px;
	}
}

/* Redirect hand-off page (forms/travel/travel-redirect.php) - standalone
   page, not part of the wizard form, so it's not scoped to #ek-gi-tr-form. */
.ek-gi-tr-redirect-wrap {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.ek-gi-tr-redirect-card {
	width: 700px;
	max-width: 100%;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
	padding: 40px;
}

.ek-gi-tr-redirect-title {
	color: #0b3268;
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 10px;
}

.ek-gi-tr-redirect-subtitle {
	color: #888;
	font-size: 14px;
	margin: 0 0 30px;
}

.ek-gi-tr-redirect-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-bottom: 30px;
}

.ek-gi-tr-redirect-logo-col {
	flex: 1;
	max-width: 200px;
}

.ek-gi-tr-redirect-logo-label {
	color: #999;
	font-size: 13px;
	margin-bottom: 12px;
}

.ek-gi-tr-redirect-company-logo {
	max-width: 160px;
	max-height: 70px;
	width: auto;
	height: auto;
}

.ek-gi-tr-redirect-agent-logo {
	max-width: 120px;
	max-height: 60px;
	width: auto;
	height: auto;
}

.ek-gi-tr-redirect-divider {
	width: 1px;
	align-self: stretch;
	background: #e5e5e5;
}

.ek-gi-tr-redirect-btn {
	margin: 0 auto 16px;
	width: 260px;
}

.ek-gi-tr-redirect-back {
	display: block;
	color: #1d6fd6;
	font-size: 14px;
	text-decoration: underline;
	margin-bottom: 30px;
}

.ek-gi-tr-redirect-footnote {
	border-top: 1px solid #eee;
	padding-top: 16px;
	color: #999;
	font-size: 12px;
}

@media (max-width: 600px) {
	.ek-gi-tr-redirect-card {
		padding: 30px 20px;
	}

	.ek-gi-tr-redirect-logos {
		gap: 20px;
	}
}

@media (max-width: 782px) {
	#ek-gi-tr-form .ek-ci-box {
		flex-direction: column;
		text-align: center;
	}

	.ek-gi-tr-result-card-inner {
		flex-direction: column;
		text-align: center;
		padding: 30px 20px;
	}

	/* The absolute bleed-out treatment only works with the roomy desktop
	   padding - on narrow screens the agent goes back to a normal, centered
	   block above the rest of the card. */
	.ek-gi-tr-result-agent {
		position: static;
		width: 120px;
		margin: 0 auto 15px;
	}

	.ek-gi-tr-result-details-table {
		grid-template-columns: repeat(2, 1fr);
	}
}