/* ENG CSS */
.legacy-product-tabs {
    font-family: "Poppins", Sans-serif;
    color: #000;
}

.legacy-product-tabs .tabs{
    display: flex;
    gap: 20px;
}

.legacy-product-tabs .tab{
    background-color: #e1d9c3;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    flex: 1;
}
.legacy-product-tabs .tab img{
    max-width: 200px;
    margin-top: -50px;
}

.legacy-product-tabs .tab svg{
    margin-top: -20px;
    width: 10px;
    height: 10px;
    line-height: 0;
}
.legacy-product-tabs .tab span{
    font-weight: bold;
    color: #004540;
}
.tab.active {
    background-color: #004540;
    color: #fff;
}
.tab.active svg path{
    fill: #fff;
}
.legacy-product-tabs .tab.active span{
    color: #fff;
}

.legacy-product-tabs .tab-content{
    display: none;
    padding: 40px;
}

.legacy-product-tabs .content-wrapper{
    display: flex;
    justify-content: space-between;
}
.legacy-product-tabs .content-wrapper .image-block,
.legacy-product-tabs .content-wrapper .content-block{
    flex: 1;
}
.legacy-product-tabs .content-wrapper .image-block{
    display: flex;
    align-items: center;
    justify-content: end;
}

.legacy-product-tabs .content-wrapper .image-block img{
    max-width: 60%;
}
.legacy-product-tabs .content-wrapper .content-block h3{
    color: #004540;
}

.legacy-product-tabs li,
.legacy-product-tabs p{
    font-size: 0.85rem;
    opacity: 0.8;
}
.legacy-product-tabs table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-family: "Poppins", Sans-serif;
  border: none;
}

.legacy-product-tabs thead {
  background-color: #f4f6f8;
  color: #333;
}
.legacy-product-tabs table td, .legacy-product-tabs table th{
    border: none;
}
.legacy-product-tabs th, .legacy-product-tabs td {
  padding: 16px 20px;
  text-align: left;
  font-size: 0.85rem;
}

.legacy-product-tabs th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e0e0e0;
}

.legacy-product-tabs tbody tr {
  transition: background-color 0.3s ease;
}

.legacy-product-tabs tbody tr:hover {
  background-color: #f9fbfc;
}

.legacy-product-tabs tbody td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .legacy-product-tabs table, .legacy-product-tabs thead, .legacy-product-tabs tbody, .legacy-product-tabs th, .legacy-product-tabs td, .legacy-product-tabs tr {
    display: block;
  }
	
	.legacy-product-tabs .tabs{
		flex-direction: column;
		gap: 40px;
	}

  .legacy-product-tabs thead {
    display: none;
  }

  .legacy-product-tabs tr {
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
  }

  .legacy-product-tabs td {
    position: relative;
    padding-left: 50%;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .legacy-product-tabs td::before {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    text-transform: uppercase;
    content: attr(data-label);
    color: #555;
    font-size: 12px;
  }
	.legacy-product-tabs .content-wrapper{
		flex-direction: column;
	}
}


.legacy-contact label{
    color: #fff;
    font-weight: 400!important;
    font-size: 14px!important;
}

.legacy-contact input,
.legacy-contact select,
.legacy-contact textarea{
    background-color: #fbf4e0;
    border-radius: 4px;
    border: 1px solid #e1d9c4;
    font-family: "Poppins", Sans-serif;
}

.legacy-contact input[type="submit"]:hover,
.legacy-contact input[type="submit"]{
    background-color: #f0d26f;
    color: #004540;
    border: 1px solid #004540;
    font-weight: 600;
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: hsl(175.65deg 100% 13.53%);
}

.legacy-product-tabs tbody tr{
    color: #fff;
    background-color: #035650;
}
.legacy-product-tabs tbody tr:hover {
    background-color: #035650;
}

.order-btn{
    display: block;
    width: fit-content;
    background-color: #f0d26f;
    color: #004540;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 20px;
    margin-top: 20px;
}
.order-btn:hover{
    background-color: #d8bc62;
    color: #004540;
}

.legacy-checkboxes .ginput_container{
    margin-top: 20px!important;
}
.legacy-default-checkboxes .gfield_radio,
.legacy-default-checkboxes .gfield_checkbox,
.legacy-checkboxes .gfield_radio{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.legacy-checkboxes input{
    display: none!important;
}
.legacy-checkboxes label{
    background-color: #e1d9c4;
    padding: 20px;
    border-radius: 8px;
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    position: relative;
}

.legacy-checkboxes .gchoice {
    position: relative;
}


.legacy-checkboxes .gchoice .gform-field-label::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 20px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* Inner circle for checked state using box-shadow (trick) */
.legacy-checkboxes input[type="radio"]:checked + label::after {
  background-color: #4caf50;
  box-shadow: inset 0 0 0 4px #fff;
  border-color: #4caf50;
}
.legacy-checkboxes  #label_2_13_0::before,
.legacy-checkboxes  #label_2_13_1::before,
.legacy-checkboxes  #label_2_13_2::before,
.legacy-checkboxes  #label_2_13_3::before{
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -40px;
}
.legacy-checkboxes  #label_2_13_0::before{
    background-image: url(https://legacypackaging.eng.co.za/wp-content/uploads/2025/06/Potatoes-Bag-1.png);
}

.legacy-checkboxes  #label_2_13_1::before{
    background-image: url(https://legacypackaging.eng.co.za/wp-content/uploads/2025/06/Charcoal-Bag.png);
}

.legacy-checkboxes  #label_2_13_2::before{
    background-image: url(https://legacypackaging.eng.co.za/wp-content/uploads/2025/06/Sugar-Bag-2.png);
}

.legacy-checkboxes  #label_2_13_3::before{
    background-image: url(https://legacypackaging.eng.co.za/wp-content/uploads/2025/06/flour-bags-1.png);
}


.legacy-checkboxes input:checked + .gform-field-label{
    background-color: #035650;
    color: #fff;
}



.legacy-default-checkboxes input{
    display: none!important;
}

.legacy-default-checkboxes label{
    border: 1px solid #e1d9c4;
    padding: 20px;
    border-radius: 8px;
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    position: relative;
}

.legacy-default-checkboxes input:checked + .gform-field-label{
    border-color: #035650;
    color: #004540;
}

.gform_wrapper.gravity-theme .gfield-choice-input+label{
    max-width: 100%!important;
}





.order-form input,
.order-form select,
.order-form textarea{
    background-color: #e1d9c4;
    border-radius: 4px;
    border: 1px solid #bfb7a1;
    font-family: "Poppins", Sans-serif;
}

.order-form input[type="submit"]:hover,
.order-form input[type="submit"]{
    background-color: #f0d26f;
    color: #004540;
    border: 1px solid #004540;
    font-weight: 600;
}