.cartform { display: flex; gap: 0 30px; }
.cartform .col-cart { flex-shrink: 0; width: 280px; position: relative; }
.cartform .col-form { flex-grow: 1; }
.cartform .col-form hr { margin: 20px 0;  border-width: 2px; border-color: var(--blue-lightest); }

/* CF7 Validation */
.wpcf7-form .wpcf7-not-valid-tip { border-radius: 5px; margin-top: 5px; background-color: var(--red); color: var(--white); font-size: 13px; font-size: 15px; padding: 4px 12px; display: block;  } 
.wpcf7-form.invalid .wpcf7-response-output, 
.wpcf7-form.unaccepted .wpcf7-response-output, 
.wpcf7-form.payment-required .wpcf7-response-output { border: none; text-align: center; padding: 8px 15px;  border-radius: 5px; margin-left: 0; margin-right: 0; border-color: var(--red); background-color: var(--red);  color: var(--white); }

.cartbox { 
    border: 2px solid var(--blue-lightest); padding: 20px; border-radius: 6px;  
    position: sticky; top: 25px;
}
.cartbox hr { margin: 20px 0;  border-width: 2px; border-color: var(--blue-lightest); }
.cartbox-total { padding: 15px; border-radius: 6px; background-color: var(--green-light); text-align: center;  }
.cartbox-total em { line-height: 1.25; display: block; font-style: normal; }
.cartbox-total small { display: block;  color: var(--green-regular); }
.cartbox-total-inner { 
    margin: 8px 0;  padding: 10px; border-radius: 6px; 
    background-color: var(--white); 
    box-shadow: rgba(0, 0, 0, 0.07) 1px 2px 2px 0px;
}
.cartbox-total-inner .myprice {
    font-family: "Sofia Sans", sans-serif; font-weight: bold; font-size: 30px; line-height: 1;
    background-color: transparent; text-align: center;
    border: none; outline: none; display: block;  width: 100%; max-width: 100%; 
}

.formbox { margin-bottom: 30px; border: 2px solid var(--blue-lightest); padding: 20px; border-radius: 6px;  }
.formbox-heading { display: flex; gap:0 8px; align-items: center; margin-bottom: 15px;  }
.formbox-heading .symbol { font-size: 28px; }
.formbox-heading .heading { font-size: 22px; flex-grow: 1;  }
.formbox-heading a.link { color: var(--purple); }

.cartform .col-form hr.hr-dbchoice { margin: 30px 0 25px 0; }

.row-dbchoice {}
.row-dbchoice > [class^="col-"] { margin-bottom: 30px; }

/* radio */
.dbchoice { 
    display: block; color: inherit; cursor: pointer; padding: 16px; border-radius: 8px; 
    outline: 3px solid var(--purple-lightest); border: 2px solid var(--blue-light); transition:all 0.35s; 
    position: relative;
}
.dbchoice .radiohead { display: flex; align-items: center; gap: 0 10px; margin-bottom: 8px; }
.dbchoice .radiohead .wpcf7-form-control-wrap { flex-shrink: 0; position: static; }
.dbchoice .radiohead .label { display: block; margin: 0; flex-grow: 1; font-family: "Sofia Sans", sans-serif; font-size: 22px;  }
.dbchoice .radiohead abbr { border-radius: 18px; display: inline-flex; line-height: 1; gap: 0 6px; align-items: center; padding: 6px 8px; background-color: var(--green-light); color: var(--green-dark);  }
.dbchoice .radiohead samp { font-weight: bold;  font-family: "Sofia Sans", sans-serif; font-size: 18px; } 

.dbchoice [type="radio"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } 
.dbchoice .wpcf7-list-item-label { font-size: 0; color: transparent;  }
.dbchoice .wpcf7-list-item-label::before { 
    transform: translateY(2px); content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    border: 3px solid var(--white); outline: 3px solid var(--blue-light);
    transition:all 0.35s;
}
.dbchoice [type="radio"]:checked + .wpcf7-list-item-label::before { outline-color: var(--purple); background-color: var(--purple);  }
.dbchoice .wpcf7-list-item { margin: 0; }

.dbchoice .radiotext { color: var(--blue-subtle); display: flex; align-items: flex-end; gap: 0 10px; }
.dbchoice .radiotext em { flex-grow: 1; }
.dbchoice .radiotext picture { transition:all 0.5s; flex-shrink: 0; display: block; width: 54px; height: 54px; background-size: contain; background-position: center center;  background-repeat: no-repeat;  }
.dbchoice-local .radiotext picture { background-image: url('../images/db-local.svg'); }
.dbchoice-remote .radiotext picture { background-image: url('../images/db-cloud.svg'); }

.dbchoice:hover { outline-width: 4px; border-color: var(--purple); box-shadow: rgba(0, 0, 0, 0.1) 1px 6px 6px 0px; transform: translateY(-2px); }
.dbchoice:hover .radiohead .label { color: var(--purple); text-decoration: underline;  }
.dbchoice:hover .radiotext picture { transform: translateY(-3px) scale(1.05); }

.dbchoice .wpcf7-not-valid-tip { position: absolute; top: -20px; left: 15px; width: auto;}

/* checkbox */
.modchoice { 
    display: block; color: inherit; cursor: pointer; padding: 16px; border-radius: 8px; overflow: hidden;
    outline: 3px solid var(--purple-lightest); border: 2px solid var(--blue-light); transition:all 0.35s; 
}
.modchoice .modhead { display: flex; align-items: center; gap: 0 10px; margin-bottom: 8px; }
.modchoice .modhead .wpcf7-form-control-wrap { flex-shrink: 0; position: static; }
.modchoice .modhead .label { display: block; margin: 0; flex-grow: 1; font-family: "Sofia Sans", sans-serif; font-size: 22px; }
.modchoice .modhead abbr { border-radius: 18px; display: inline-flex; line-height: 1; gap: 0 6px; align-items: center; padding: 6px 8px; background-color: var(--green-light); color: var(--green-dark);  }
.modchoice .modhead samp { font-weight: bold;  font-family: "Sofia Sans", sans-serif; font-size: 18px; }
.modchoice .modtext { color: var(--blue-subtle); display: flex; align-items: flex-end; gap: 0 10px; }
.modchoice .modtext em { flex-grow: 1; }

.modchoice [type="checkbox"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } 
.modchoice .wpcf7-list-item-label { font-size: 0; color: transparent;  }
.modchoice .wpcf7-list-item-label::before { 
    transform: translateY(2px); content: ''; display: inline-block; width: 18px; height: 18px;
    border: 3px solid var(--white); outline: 3px solid var(--blue-light);
    transition:all 0.35s;
}
.modchoice [type="checkbox"]:checked + .wpcf7-list-item-label::before { outline-color: var(--purple); background-color: var(--purple);  }
.modchoice .wpcf7-list-item { margin: 0; }

.modchoice:hover { outline-width: 4px; border-color: var(--purple); box-shadow: rgba(0, 0, 0, 0.1) 1px 6px 6px 0px; transform: translateY(-2px); }
.modchoice:hover .modhead .label { color: var(--purple); text-decoration: underline;  }

.modchoice.is_inactive { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }