::placeholder{color: var(--color-placeholder, #000000); opacity: 1; text-transform: uppercase;}
:-ms-input-placeholder {color: var(--color-placeholder, #000000); text-transform: uppercase;}
::-ms-input-placeholder {color: var(--color-placeholder, #000000); text-transform: uppercase;}

section[data-widget="form"]{
    width: 100%;
    max-width: var(--col-12);
    margin-inline: auto;
}

/************************************************************************************************/
/* Form *****************************************************************************************/
/************************************************************************************************/
/*******************************/
/* Form Layout *****************/
/*******************************/
/* Form Fieldset */
form fieldset{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
form fieldset section[data-widget="fields"]{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
form fieldset + fieldset{
    margin-top: var(--gap-900);
}
/* Form Section Header */
form fieldset section[data-widget="section-header"]{
    margin-bottom: var(--gap-500);
}
/* Form Row */
form fieldset .row,
form fieldset .row[data-direction="horizontal"]{
    display: flex;
    column-gap: var(--gutter);
    row-gap: var(--gap);
}
/*
form fieldset .row[data-direction="wrap"]{
    flex-wrap: wrap;
}
form fieldset .row[data-direction="wrap"] .item{
    max-width: calc(50% - var(--gutter));
}*/
form fieldset .row .item.text-center .item__title,
form fieldset .row .item.text-center .item__description{
    text-align: center;
}
form fieldset .row[data-direction="vertical"]{
    flex-direction: column;
}
/* Form Item */
form fieldset .item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media(max-width: 1024px){
    form fieldset .row,
    form fieldset .row[data-direction="horizontal"]{
        flex-direction: column;
    }
}

/*******************************/
/* Form Elements ***************/
/*******************************/
/* Input */
form input,
form textarea{
    width: 100%;
}

form .select-styled,
form input,
form textarea{
    padding: var(--padding-input);
    font-family: var(--ff-text);
    font-size: var(--fs-text);
    color: var(--color-text);
    line-height: var(--lh-text);
    background-color: transparent;
    background-color: var(--color-background);
    border: var(--border);
    border-radius: var(--br-elements, var(--br-global));
    transition: var(--trans);
}
form textarea{
    min-height: 120px;
}

form label{
    display: inline-flex;
    font-family: var(--ff-text);
    font-size: var(--fs-200);
    color: var(--color-text-grey);
    text-transform: none;
    transition: var(--trans);
}
form .select + label,
form textarea + label,
form input[type="text"] + label,
form input[type="password"] + label,
form input[type="email"] + label,
form input[type="tel"] + label,
form input[type="date"] + label{
    margin-inline: var(--gap-500);
    padding-inline: var(--gap);
    text-transform: uppercase;
}

form button{
    position: relative;
	padding: var(--padding-button);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-300);
	font-family: var(--ff-text);
	font-size: var(--fs-btn);
	line-height: var(--lh-btn, var(--lh-100));
	letter-spacing: var(--ls-btn, 0em);
	text-align: center;
	border: 1px solid currentColor;
	border-radius: var(--br-elements);
    background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}
form button:hover,
form button:focus{
    background-color: var(--hover-accent);
	border-color: var(--hover-accent);
	color: var(--color-white);
}
form button:disabled,
form button:disabled:hover,
form button:disabled:focus{
    background-color: var(--init-grey-300);
    border-color: var(--init-grey-300);
    cursor: not-allowed;
}

/************************************************************************************************/
/* Form Items ***********************************************************************************/
/************************************************************************************************/
form .group{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
form .group:has(.item--form-description){
    margin-top: var(--gap-600);
}


form .item.item--form-description,
form .item.item--form-description p{
    color: var(--color-text-grey-500, var(--color-text-grey));
}


/*******************************/
/* Acceptance ******************/
/*******************************/
form .item[data-form-item="acceptance"]{
    --size: 20px;
}
form .item[data-form-item="acceptance"] input[type="checkbox"] + label{
    margin-inline: 0;
    text-transform: none;
    transform: none;
}
form .item[data-form-item="acceptance"] input[type="checkbox"] + label,
form .item[data-form-item="acceptance"] input[type="checkbox"]:focus + label{
    font-size: var(--fs-text);
    color: var(--init-grey-500);
}
form .item[data-form-item="acceptance"] input[type="checkbox"] + label:before{
    border-color: var(--color-text-grey);
    border-radius: var(--br-100);
}

form .item[data-form-item="acceptance"] input[type="checkbox"]:checked + label{
    color: var(--color-text);
}
form .item[data-form-item="acceptance"] input[type="checkbox"]:checked + label:before{
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/*******************************/
/* OTP *************************/
/*******************************/
form .item[data-form-item="OTP"]{
    display: flex;
    flex-direction: row;
    gap: var(--gutter-200);
}
form .item[data-form-item="OTP"] input{
    aspect-ratio: var(--image-aspect-ratio-sq);
    font-family: var(--ff-heading);
    font-size: var(--fs-h2);
    text-align: center;
    background-color: var(--color-white);
    border-color: var(--color-white);
    padding: var(--gap-200);
}
form .item[data-form-item="OTP"] input::-webkit-outer-spin-button,
form .item[data-form-item="OTP"] input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
form .item[data-form-item="OTP"] input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}
@media(min-width: 1025px){
    form .item[data-form-item="OTP"]{
        gap: var(--gutter);
    }
}

/*******************************/
/* Post Code *******************/
/*******************************/
@media(min-width: 1025px){
    form .item[data-form-item="postcode"]{
        max-width: var(--col-2);
    }
}

/*******************************/
/* Card Manufacturer ***********/
/*******************************/
form .item[data-form-item="manufacturer-card"]{
    max-height: 180px;
}
form .item[data-form-item="manufacturer-card"] .item__thumbnail,
form .item[data-form-item="manufacturer-card"] .item__thumbnail picture{
    height: 100%;
}
form .item[data-form-item="manufacturer-card"] .item__thumbnail img{
    max-width: 230px;
    max-height: 80px;
    object-fit: contain;
}

/*******************************/
/* Card Manufacturer Category **/
/*******************************/
form .item.radio-card[data-form-item="category-card"]{
    aspect-ratio: 1 / 1;
}
form .item.radio-card[data-form-item="category-card"] label{
    height: 100%;
}
form .item.radio-card[data-form-item="category-card"] .item__title{
    min-height: 48px;
}
form .item.radio-card[data-form-item="category-card"] .item__thumbnail img{
    max-height: 80px;
    object-fit: contain;
}



/************************************************************************************************/
/* Form Effects *********************************************************************************/
/************************************************************************************************/
/*******************************/
/* Moving Label as Placeholder */
/*******************************/
form .item .select + label,
form .item textarea + label,
form .item input[type="text"] + label,
form .item input[type="password"] + label,
form .item input[type="date"] + label,
form .item input[type="tel"] + label,
form .item input[type="email"] + label{
    position: absolute;
    transform: translateY(-50%);
    background-color: var(--color-background);
}

form .item textarea:placeholder-shown + label,
form .item input:placeholder-shown[type="text"] + label,
form .item input:placeholder-shown[type="password"] + label,
form .item input:placeholder-shown[type="date"] + label,
form .item input:placeholder-shown[type="tel"] + label,
form .item input:placeholder-shown[type="email"] + label{
    top: 50%;
    font-size: var(--fs-400);
}

form .item textarea:placeholder-shown + label{
    top: 32px;
}

form .item textarea:focus + label,
form .item input[type="text"]:focus + label,
form .item input[type="password"]:focus + label,
form .item input[type="date"]:focus + label,
form .item input[type="tel"]:focus + label,
form .item input[type="email"]:focus + label{
    top: 0;
    font-size: var(--fs-200);
}


/*******************************/
/* Item Radio Card *************/
/*******************************/
form .item.radio-card::before{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    top: var(--gap-500);
    right: var(--gap-500);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M16 32.2722C20.2435 32.2722 24.3131 30.5865 27.3137 27.5859C30.3143 24.5853 32 20.5157 32 16.2722C32 12.0288 30.3143 7.95909 27.3137 4.95851C24.3131 1.95793 20.2435 0.272217 16 0.272217C11.7565 0.272217 7.68687 1.95793 4.68629 4.95851C1.68571 7.95909 0 12.0288 0 16.2722C0 20.5157 1.68571 24.5853 4.68629 27.5859C7.68687 30.5865 11.7565 32.2722 16 32.2722ZM23.0625 13.3347L15.0625 21.3347C14.475 21.9222 13.525 21.9222 12.9438 21.3347L8.94375 17.3347C8.35625 16.7472 8.35625 15.7972 8.94375 15.216C9.53125 14.6347 10.4812 14.6285 11.0625 15.216L14 18.1535L20.9375 11.2097C21.525 10.6222 22.475 10.6222 23.0562 11.2097C23.6375 11.7972 23.6437 12.7472 23.0562 13.3285L23.0625 13.3347Z" fill="%234096DA"/></svg>');
    opacity: 0;
    transition: var(--trans);
}
form .item.radio-card:has(input:checked)::before {
    opacity: 1;
}
form .item.radio-card label{
    margin-inline: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--br-elements);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;

    padding-block: var(--gap-600);
    padding-inline: var(--gap-600);
    background-color: var(--color-white);
}
form .item.radio-card label .item__content{
    margin-top: var(--gap-400);
}
form .item.radio-card label .item__title{
    text-transform: none;
}

@media(min-width: 1025px){
    form .item.radio-card label{
        padding-block: var(--gap-700);
        padding-inline: var(--gap-700);
    }
}

/*******************************/
/* Item Upload Card ************/
/*******************************/
form .item.upload-card label{
    padding-block: var(--gap-700);
    padding-inline: var(--gap-700);
    width: 100%;
    border: 1px dashed #C5CFF5;
    border-radius: var(--br-elements);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
}
form .item.upload-card label.highlight{
    border-color: var(--color-accent);
}
form .item.upload-card .item__thumbnail picture{
    width: 78px;
    height: 78px;
    background-color: #D6DAEF;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}
form .item.upload-card .item__thumbnail picture img{
    width: auto;
    height: 30px;
    object-fit: contain;
}
form .item.upload-card .item__content{
    margin-top: var(--gap);
    text-align: center;
}
form .item.upload-card .item__description p{
    font-size: var(--fs-500);
    color: var(--color-accent);
}
form .item.upload-card .item__description small{
    font-size: var(--fs-400);
    color: var(--color-text-grey-500 ,var(--color-text-grey));
}
form .item.upload-card .item__actions{
    margin-top: var(--gap-200);
    justify-content: center;
}
form .item.upload-card .item__actions .btn{
    font-family: var(--ff-text);
    font-size: var(--fs-btn);
    color: var(--color-text-grey);
    text-decoration: underline;
    cursor: pointer;
}
/* Status */
form .item.upload-card label[data-file-status="empty"] .item__actions{
    display: none;
}
form .item.upload-card label[data-file-status="ready"]{
    background-color: #EDEFF7;
    border-color: #EDEFF7;
}
form .item.upload-card label[data-file-status="ready"] .item__description p,
form .item.upload-card label[data-file-status="ready"] .item__description small{
    color: var(--color-text-grey);
}

/*******************************/
/* Item Device *****************/
/*******************************/
form .item[data-form-item="device"][data-tooltip] input{
    padding-right: calc(var(--gap-600) + var(--gap) + var(--gap));
}

form .item[data-form-item="device"] button[role="note"]{
    all: unset;
    content: '';
    position: absolute;
    top: 50%;
    right: var(--gap-600);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;

}

/************************************/
/* [Widget] Order Details ***********/
/************************************/
fieldset[data-widget="order-details"]{
    display: flex;
    flex-direction: column;
    gap: var(--gap-600);
}
fieldset[data-widget="order-details"] legend{
    margin-bottom: var(--gap-600);
}
fieldset[data-widget="order-details"] .table{
    display: flex;
    flex-direction: column;
    gap: var(--gap-500);
}
fieldset[data-widget="order-details"] .table__row{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--gutter);
    row-gap: var(--gap-200);
    align-items: center;
}
fieldset[data-widget="order-details"] .table label,
fieldset[data-widget="order-details"] .table .label{
    font-family: var(--ff-text);
    font-size: var(--fs-text);
    color: var(--color-text-grey-500);
    text-transform: none;
}
fieldset[data-widget="order-details"] .table label:has(+ textarea){
    align-self: flex-start;
}
fieldset[data-widget="order-details"] .table input{
    background-color: var(--init-background-alt);
}
fieldset[data-widget="order-details"] .table input:read-only,
fieldset[data-widget="order-details"] .table textarea:read-only,
fieldset[data-widget="order-details"] .select select:disabled + .select-styled{
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    border-radius: 0;
}
fieldset[data-widget="order-details"] .table textarea:read-only{
    field-sizing: content;
    min-height: auto;
}
fieldset[data-widget="order-actions"]{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
fieldset[data-widget="order-details"] .select:has(select:disabled){
    height: auto;
    cursor: auto;
}
fieldset[data-widget="order-details"] .select select:disabled + .select-styled{
    pointer-events: none;
}
fieldset[data-widget="order-details"] .select select:disabled + .select-styled::after{
    opacity: 0;
}
@media(min-width: 1025px){
    fieldset[data-widget="order-details"] .table__row{
        grid-template-columns: 1fr 2fr;
        gap: var(--gap-global);
    }
}