/* all Input Elements */
.c--error-marker {
  outline : 2px solid var(--c-error);
}
#page.site input:disabled 
{
  appearance       : none;
  background-color : var(--c-border);
}

/* input elements */
#page.site form {
  margin : 0;
}
fieldset {
  margin  : 0;
  padding : 0;
}

/* Text */
#page.site textarea,
#page.site input[type=search],
#page.site input[type=text],
#page.site input[type=password],
#page.site input[type=email],
#page.site input[type=tel],
.login     input[type=tel],
.login     input[type=text],
.login     input[type=password]
{
  margin           : 0;
  height           : 40px;
  width            : 100%;
  padding          : 8px 12px;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
  box-shadow       : none;
  background-color : white;
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  font-family      : var(--c-font-familiy-title);
  color            : var(--c-text-secondary);
  box-shadow       : none;
}
#page.site textarea::placeholder,
#page.site input[type=search]::placeholder,
#page.site input[type=text]::placeholder,
#page.site input[type=password]::placeholder,
#page.site input[type=email]::placeholder, 
#page.site input[type=tel]::placeholder, 
.login     input[type=tel]::placeholder,
.login     input[type=text]::placeholder,
.login     input[type=password]::placeholder
{
  font-size   : 14px;
  line-height : 18px ;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-placeholder);
}
#page.site textarea:focus,
#page.site input[type=search]:focus, 
#page.site input[type=text]:focus, 
#page.site input[type=password]:focus,
#page.site input[type=email]:focus,
#page.site input[type=tel]:focus,s
.login     input[type=tel]:focus,
.login     input[type=text]:focus,
.login     input[type=password]:focus
{
  outline    : 1px solid var(--c-outline);
  border     : 1px solid var(--c-border);
  color      : var(--c-text-secondary);
  box-shadow : none;
}
#page.site textarea {
  height: 80px; 
}

/* Checkbox / Radio */
#page.site input[type=checkbox],
#page.site input[type=radio],
.login     input[type=checkbox],
.login     input[type=radio]
{
  height        : 16px;
  width         : 16px;
  accent-color  : var(--c-button);
  outline-color : var(--c-outline);
  border-radius : var(--c-radius);
}
#page.site input[type=checkbox]:focus,
.login     input[type=checkbox]:focus
{
  outline    : 1px solid var(--c-outline);
  border     : 1px solid var(--c-border);
  color      : var(--c-text-secondary);
  box-shadow : none;
}

/* Select */
#page.site select {
  appearance          : none;
  position            : relative;
  background          : url(/wp-content/plugins/custom/assets/chevron-down-icon.svg);
  background-repeat   : no-repeat;
  background-position : right 12px center;
  background-size     : 16px 16px;
  background-color    : white;
}
#page.site  select,
.login      select
{
  margin           : 0;
  height           : 40px;
  width            : 100%;
  padding          : 9px 12px;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
  box-shadow       : none;
  background-color : white;
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  font-family      : var(--c-font-familiy-title);
  color            : var(--c-text-secondary);
  box-shadow       : none;
}
#page.site select:disabled,
.login     select:disabled
{
  opacity          : 0.7;
  appearance       : none;
  background-color : var(--c-border);
}
#page.site select:focus,
.login     select:focus
{
  outline    : 1px solid var(--c-outline);
  border     : 1px solid var(--c-border);
  color      : var(--c-text-secondary);
  box-shadow : none;
}
#page.site select option,
.login     select:focus 
{
  font-size   : 12px;
  line-height : 18px ;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}

/* Diverses */
#page div.site-content label {
  display : block;
}
.login .wp-hide-pw {
  color: var(--c-text-secondary);
}
.login .wp-hide-pw:focus {
  border     : none;
  box-shadow : none;
}

/* Input with unit */
#page.site div:has(>input):has(>span) {
  display               : grid;
  grid-template-columns : 1fr auto;
  align-items           : center;
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
  background-color      : white;
}
#page.site div:has(>input):has(>span):focus-within {
  outline: 1px solid var(--c-outline);
}
#page.site div:has(>input):has(>span) > input[type=text] {
  border        : none;
  border-radius : var(--c-radius);
  padding-right : 8px;
}
#page.site div:has(>input):has(>span) > input[type=text]:focus {
  outline          : none;
  background-color : white;
  border           : none;
}
#page.site div:has(>input):has(>span) > span {
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  font-family      : var(--c-font-familiy-title);
  color            : var(--c-text-secondary);
  margin-right     : 12px;
}

/* Buttons general */
#page.site        button:focus, 
.c-consent-center button:focus,
.c-cookie-banner  button:focus
{
  outline    : 1px solid var(--c-outline);
  border     : 1px solid var(--c-border);
  color      : white;
  box-shadow : none;
}


/* Button with icon */
#page.site .c-button {
  display               : grid;
  grid-template-columns : auto auto ;
  column-gap            : 8px;
  padding               : 8px 16px;
  justify-items         : left;
  align-items           : center;
  border-radius         : var(--c-radius);
  font-size             : 14px;
  line-height           : 20px;
  font-weight           : 500;
  background-color      : var(--c-button);
  color                 : white;
  text-decoration       : none ;
}
#page.site .c-button::before {
  content             : '';
  display             : block;
  height              : 16px;
  width               : 16px;
  justify-self        : right;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  /* background-image    : url(/wp-content/plugins/custom/assets/plus-icon.svg); */
}
#page.site .c-button:hover {
  background-color : var(--c-button-hover);
}
#page.site .c-button:active {
  background-color : var(--c-button-active);
}

/* Button with icon light*/
#page.site .c-button-light {
  display               : grid;
  grid-template-columns : auto auto ;
  column-gap            : 8px;
  padding               : 8px 16px;
  justify-items         : left;
  align-items           : center;
  border                : 1px solid var(--c-button);
  border-radius         : var(--c-radius);
  font-size             : 14px;
  line-height           : 20px;
  font-weight           : 500;
  background-color      : white;
  color                 : var(--c-button);
  text-decoration       : var(--c-button);
}
#page.site .c-button-light::before {
  content             : '';
  display             : block;
  height              : 16px;
  width               : 16px;
  justify-self        : right;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  /* background-image    : url(/wp-content/plugins/custom/assets/plus-icon.svg); */
}
#page.site .c-button-light:hover {
  background-color : var(--c-background-dark);
}
#page.site .c-button-light:active {
  background-color : var(--c-background-dark);
}
#page.site .c-button-light:focus {
  color : var(--c-button);
}

/* Button simple */
#page.site        #place_order,
#page.site        .wc-forward,
#page.site        .wc-backward,
#page.site        .return-to-shop a,
#page.site        .woocommerce-Button,
#page.site        .woocommerce-button,
#page.site        .c-button-simple,
#page.site        a.wp-2fa-button-primary,
#page.site        button.wp-2fa-button-primary,
.login            input[type="submit"],
.c-cookie-banner  .c-button-simple,
.c-consent-center .c-button-simple
{
  display          : grid;
  align-items      : center;
  padding          : 8px 16px;
  border-radius    : var(--c-radius);
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  background-color : var(--c-button);
  color            : white;
  border           : none;
}
#page.site        #place_order:hover,
#page.site        .wc-forward:hover,
#page.site        .wc-backward:hover,
#page.site        .return-to-shop a:hover,
#page.site        .woocommerce-Button:hover,
#page.site        .woocommerce-button:hover,
#page.site        .c-button-simple:hover,
#page.site        a.wp-2fa-button-primary:hover,
#page.site        button.wp-2fa-button-primary:hover,
.login            input[type="submit"]:hover,
.c-cookie-banner  .c-button-simple:hover,
.c-consent-center .c-button-simple:hover
{
  background-color : var(--c-button-hover);
  color            : white !important;
}
#page.site        #place_order:active,
#page.site        .wc-forward:active,
#page.site        .wc-backward:active,
#page.site        .return-to-shop a:active,
#page.site        .woocommerce-Button:active,
#page.site        .woocommerce-button:active,
#page.site        .c-button-simple:active, 
#page.site        a.wp-2fa-button-primary:active,
#page.site        button.wp-2fa-button-primary:active,
.login            input[type="submit"]:active,
.c-cookie-banner  .c-button-simple:active,
.c-consent-center .c-button-simple:active
{
  background-color : var(--c-button-active);
  color            : white;
}

/* Button simple light */
.page-template-default:has(.woocommerce-order-details)  #page.site .woocommerce-order-details > .order-again a,
.page-template-default #page.site .c-2fa > form > [id='2fa-user-global-configuration'] a,
#page.site        .woocommerce-orders-table__cell-order-actions > a,
#page.site        .wc-forward.checkout,
#page.site        .c-button-simple-light, 
#page.site        a.wp-2fa-button-secondary,
#page.site        button.wp-2fa-button-secondary,
.login            #language-switcher input[type="submit"],
.c-cookie-banner  .c-button-simple-light,
.c-consent-center .c-button-simple-light
{
  display          : grid;
  align-items      : center;
  padding          : 8px 16px 9px 16px;
  border           : 1px solid var(--c-button);
  border-radius    : var(--c-radius);
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  background-color : white;
  color            : var(--c-button);
}
.page-template-default:has(.woocommerce-order-details) #page.site .woocommerce-order-details > .order-again a:hover,
.page-template-default #page.site .c-2fa > form > [id='2fa-user-global-configuration'] a:hover,
#page.site        .woocommerce-orders-table__cell-order-actions > a:hover,
#page.site        .wc-forward.checkout:hover,
#page.site        .c-button-simple-light:hover, 
#page.site        a.wp-2fa-button-secondary:hover,
#page.site        button.wp-2fa-button-secondary:hover,
.login            #language-switcher input[type="submit"]:hover,
.c-cookie-banner  .c-button-simple-light:hover,
.c-consent-center .c-button-simple-light:hover
{
  background-color : var(--c-background-dark);
  color            : var(--c-button) !important;
}
.page-template-default:has(.woocommerce-order-details) #page.site .woocommerce-order-details > .order-again a:active,
.page-template-default #page.site .c-2fa > form > [id='2fa-user-global-configuration'] a:active,
#page.site        .woocommerce-orders-table__cell-order-actions > a:active
#page.site        .wc-forward.checkout:active,
#page.site        .c-button-simple-light:active,
#page.site        a.wp-2fa-button-secondary:active,
#page.site        button.wp-2fa-button-secondary:active,
.login            #language-switcher input[type="submit"]:active,
.c-cookie-banner  .c-button-simple-light:active,
.c-consent-center .c-button-simple-light:active
{
  background-color : var(--c-background-dark);
}
.page-template-default:has(.woocommerce-order-details)  #page.site .woocommerce-order-details > .order-again a:focus,
.page-template-default #page.site .c-2fa > form > [id='2fa-user-global-configuration'] a:focus,
#page.site        .woocommerce-orders-table__cell-order-actions > a:focus,
#page.site        .wc-forward.checkout:focus,
#page.site        .c-button-simple-light:focus, 
#page.site        a.wp-2fa-button-secondary:focus,
#page.site        button.wp-2fa-button-secondary:focus,
.login            #language-switcher input[type="submit"]:focus,
.c-cookie-banner  .c-button-simple-light:focus,
.c-consent-center .c-button-simple-light:focus
{
  color : var(--c-button);
}

/* Button only icon */
#page.site .c-button-icon {
  padding : 0;
  height  : 16px;
  display : grid;
}
#page.site .c-button-icon::before {
  content             : '';
  display             : block;
  height              : 16px;
  width               : 16px;
  place-self          : center center;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  /* background-image    : url(/wp-content/plugins/custom/assets/plus-icon.svg); */
}
#page.site .c-button-icon:hover {
  background-color: var(--c-background-dark);
}
#page.site .c-button-icon:active {
  background-color: var(--c-background-dark);
}