/* Metropolis font (gebruikt als body tekst */
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}


/* 
body {
    background-image: linear-gradient(to bottom, #5E2311, #5E4627);
} */



.tm-page-container {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 600px, #0000ff 100%);
background: -webkit-linear-gradient(top, #ffffff 600px, #0000ff 100%);
background: linear-gradient(to bottom, #ffffff 600px, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
}

/* .tm-page-container .tm-page,
.tm-page .uk-section-default {
 background-image: linear-gradient(to bottom, #5E2311, #5E4627);
} */

/*popup menu formatting*/
.uk-navbar-nav > li > a {
	border: 2px solid; 
    /* -webkit-border-radius: 15px; */
    /* -moz-border-radius: 15px;  */
    /* border-radius: 15px;  */
	border-width: 1px;
    border-color: #BB8B4D;
    padding: 0.5em;
    font: normal normal normal 16px/19px Metropolis;
    font-size: 14px;
	font-weight: 400;
    opacity: 1;
    letter-spacing: 0.8px;
    color: white;
	background: transparent;
	transition-duration: 0.4s;
	line-height: 20px;
    text-decoration: none; 
	text-align:center;
}

/*pop up menu*/
.uk-offcanvas-bar{
	background: #fff;
}



/*main/sub menu items formatting*/
.uk-offcanvas-bar .uk-nav-default li > a,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub > li > a {
  color: #262626;
  font-weight: 400 !important;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-color: #262626;
  padding: 0.5em;
  font: bold 16px Metropolis;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  text-transform: none;
}
/*drop down menu (onder account)*/
.uk-nav-secondary{
	font-size: 14px;
	font-weight: 600 !important;
}


/* Gedeelde stijlen voor actieve menu-items */
.uk-nav-default > li.uk-active > a,
.uk-nav-default .uk-nav-sub li.uk-active > a {
    font-weight: 500 !important;
    /* color: #5E2311 !important; */
	color: #BB8B4D !important;
	
}

/* Gedeelde stijlen voor hover-effecten */
.uk-nav-default > li:hover > a,
.uk-nav-default .uk-nav-sub li:hover > a {
    /* color: #5E2311 !important; */
	color: #BB8B4D !important;
	font-weight: 500 !important;
}

/* Specifieke hover-stijl voor submenu-items */
.uk-nav-default .uk-nav-sub li:hover > a {
    font-weight: 500 !important;
}


/*minder padding*/
.uk-section-large {
        padding-top:50px;
        padding-bottom: 10px;
    }


*+.uk-grid-margin,.uk-grid+.uk-grid,.uk-grid>.uk-grid-margin{
	/*padding: 0px;*/
    margin-top: 5px;
}


/*padding tussen de verschillende secties op de pagina's*/
.uk-section {
    padding-top: 10px;
    padding-bottom: 30px;
}

/*Styling Contact form*/
/*Labels*/
.uk-form-label {
	text-transform: none;
	font-weight: 300 !important;
	font-family: Metropolis;
}

/*Title*/
.uk-card-title {
	text-transform : none;
}

/*Checkbox 'Stuur mij een kopie...*/
.form-check-input[type=checkbox]:checked, .form-check-input[type=checkbox]:indeterminate, .form-check-input[type=radio]:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
    background-color: #BB8B4D !important;;
}

.form-check-input[type=checkbox], .form-check-input[type=radio], .uk-checkbox, .uk-radio {
     background-color: #BB8B4D !important;;
}
/*kader rond 'Bericht' text area*/
.uk-textarea{
	border: 1px solid;
} 

/*Styling 'Bedankt voor je bericht...*/
.uk-alert-success{
	color: #BB8B4D;
	border-color:#BB8B4D;
}

/*Pijlen naast image sliders*/
.uk-slidenav{
	background-color : #BB8B4D;
	border-radius: 7px;
}

/*Bolletjes onder image slider*/
.uk-dotnav>.uk-active>* {
    background-color: #BB8B4D;
}

/*(pop-up) contactformulier*/
.uk-modal-title {
    font-size: 25px;
    line-height: 1.3;
    font-family: Alice;
    font-weight: 100;
    text-transform: none;
    letter-spacing: .75px;
    font-style: normal
}

@media (max-width: 768px) { /* Aanpassing voor mobiele apparaten */
    .uk-modal-title {
    font-size: 20px !important; 
    }
}


/*Notification after sent message popup*/
.uk-notification {
    /* position: fixed; */
   /*  top: 15px;
    left: 15px;
    z-index: 1040;
    box-sizing: border-box;
    width: 420px; */
	background: #BB8B4D;
}
.uk-notification-message {
    position: relative;
    padding: 30px;
	background: #BB8B4D;
    color: #FFFFFF !important; 
    font-size: 16px; 
    line-height: 1.5;
    cursor: pointer; 
}

/*remove space above logo*/
.tm-header, .tm-header-mobile {
    position: relative;
    margin-top: -6px;
}
/*reduce whitespace for collectie grid - desktop*/
@media (min-width: 1200px) {
    .uk-margin-xlarge {
        /*margin-bottom:140px*/
		margin-bottom:-10px
    }

    *+.uk-margin-xlarge {
        /* margin-top: 140px!important; */
		margin-top: -10px!important;
    }

    .uk-margin-xlarge-top {
        /* margin-top: 140px!important */
		margin-top: 140px!important
    }

    .uk-margin-xlarge-bottom {
        /* margin-bottom: 140px!important */
		margin-bottom: 140px!important
    }

    .uk-margin-xlarge-left {
        /*margin-left: 140px!important*/
		margin-left: 140px!important
    }

    .uk-margin-xlarge-right {
        /*margin-right: 140px!important*/
		margin-right: 140px!important
    }
}

/*reduce whitespace for collectie grid - mobile*/
*+.uk-margin-xlarge {
    /*margin-top: 70px!important */
	margin-top: -10px!important
}
.uk-margin-xlarge {
    /*margin-bottom: 70px*/
	margin-bottom: -10px
}

/*Formatting button, needed for contact form*/
.btn,.uk-button {
    font-family: 'Metropolis';
    font-weight: 300;
}


/*Formatting title, needed fort contact form*/
.uk-modal-title {
    font-size: 25px;
    line-height: 1.3;
    font-family: Metropolis;
    font-weight: 300;
    text-transform: none;
    letter-spacing: .75px;
    font-style: normal;
}


/*Tekst voor o.m. productprijs op homepage*/
.uk-text-primary {
    color: #BB8B4D !important
}
/*Links van o.m. productnamen*/
.uk-link,a {
    color: #BB8B4D;
	/* color: #262626; */
    text-decoration: none;
    cursor: pointer
}
/*Menu*/
.uk-subnav>*>:first-child {
    display: flex;
    align-items: center;
    column-gap: .25em;
    color: #9c9c9c;
    transition: .1s ease-in-out;
    transition-property: color,background-color,border-color,box-shadow,opacity,filter;
    font-size: 16px;
    font-family: Metropolis;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: normal;
    font-style: normal;
}



/*Hover secondary button*/
.uk-button-secondary:hover {
    background-color: #fff;
    color: #bb8b4d;
	border-color: #bb8b4d;
}

/*Kleur voor hr (divider)*/
hr {
    border-top-color: #5e2311;
}
/*header line met fade in */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*Animated header line*/

.header-line {
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.3;
  color: #262626;
}

.header-highlight {
  font-family: 'Metropolis-Regular', sans-serif;
  font-size: 92px;
  font-weight: normal;
  color: #262626;
  animation: fadeSlideIn 2s ease-out;
  display: inline-block;
  vertical-align: middle;
}

/* Nieuw: subtekst met lijn die van links naar rechts groeit */
.header-subtext {
  position: relative;
  font-size: 18px;
  margin-left: 12px;
  padding-top: 6px;
  color: #262626;
  opacity: 0;
  animation: textFadeIn 2s ease-out forwards;
  animation-delay: 0.5s;
}

/* De animatielijn boven de tekst */
.header-subtext::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background-color: #262626;
  width: 0;
  animation: lineGrow 2s ease-out forwards;
}

/* Tekst fade-in */
@keyframes textFadeIn {
  to {
    opacity: 1;
  }
}

/* Lijn groeit van links naar rechts */
@keyframes lineGrow {
  to {
    width: 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-highlight {
    font-size: 64px;
  }
}

@media (max-width: 480px) {
  .header-highlight {
    font-size: 48px;
  }
}



/*shop product card css*/
/*BAUST PRODUCT CARD*/
/* ===== Fade-in Animation voor Producten ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.center-product-center .item-column .product-container {
    opacity: 0;
    animation: fadeInUp 1.2s ease forwards;
}

/* Cascade vertragingen per product */
.center-product-center .item-column:nth-child(1) .product-container { animation-delay: 0s !important; }
.center-product-center .item-column:nth-child(2) .product-container { animation-delay: 0.2s !important; }
.center-product-center .item-column:nth-child(3) .product-container { animation-delay: 0.4s !important; }
.center-product-center .item-column:nth-child(4) .product-container { animation-delay: 0.6s !important; }
.center-product-center .item-column:nth-child(5) .product-container { animation-delay: 0.8s !important; }
.center-product-center .item-column:nth-child(6) .product-container { animation-delay: 1s !important; }
.center-product-center .item-column:nth-child(7) .product-container { animation-delay: 1.2s !important; }
.center-product-center .item-column:nth-child(8) .product-container { animation-delay: 1.4s !important; }
.center-product-center .item-column:nth-child(9) .product-container { animation-delay: 1.6s !important; }
.center-product-center .item-column:nth-child(10) .product-container { animation-delay: 1.8s !important; }

/* ===== Winkelkarretje verwijderen ===== */
.addtocart-button span[uk-icon],
.uk-button-primary span[uk-icon] {
    display: none !important;
}

/* ===== Bestellen knop styling ===== */
.uk-button-primary,
.addtocart-button {
    background-color: #bb8b4d;
    color: #fff;
    border: 1px solid #bb8b4d; /* vaste border, alleen kleur verandert bij hover */
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-radius: 15px;
    padding: 0 15px;
    line-height: 35px;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    background-origin: border-box;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ===== Bestellen knop hover styling ===== */
.uk-button-primary:hover,
.addtocart-button:hover {
    background-color: #fff;
    color: #bb8b4d;
    border-color: #bb8b4d; /* alleen border-kleur verandert, geen breedte verschil */
    transform: none !important;
}

/* ===== Prijs styling ===== */
.PricesalesPrice {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #bb8b4d !important;
}

/* ===== Verstop de Quantity Input en de +/- Icons ===== */
/* .quantity-input,
.quantity-minus,
.quantity-plus {
    display: none !important;
} */
/* ===== Verstop Bijwerken knop ===== */
/* #refreshbutton_0 {
  display: none !important;
}
#refreshbutton_1 {
  display: none !important;
}
#refreshbutton_2 {
  display: none !important;
} */

/*Tax AMount verbergen*/
.uk-panel.uk-text-meta.uk-margin.uk-margin-remove-top {
  display: none;
}

/*breadcrumb verbergen in shop*/
.uk-breadcrumb.uk-margin-remove-bottom.uk-flex-center {
  display: none;
}

/*SKU verbergen*/
.uk-panel.uk-text-meta.uk-margin-small {
  display: none;
}

/*dubbele shipment info verbergen*/
.vmshipment_description {
  display: none;
}


/* ===== Verberg de "Artikelgegevens" link en info icon ===== */
a[href*="detail"].uk-button-default {
    display: none !important;
}

/*shipto en comment button op checkout pagina*/
#shiptobutton,
#commentbutton {
  background-color: #BB8B4D;
  color: #fff;
  border-radius: 15px;
  padding: 6px 14px;
  font-family: 'Metropolis', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  border: none;
  text-align: center;
  display: inline-block;
  transition: background-color 0.3s ease;
}

#shiptobutton:hover,
#commentbutton:hover {
  background-color: #a8773e;
  color: #fff;
}



/* ===== Algemene knop basis styling (backup) ===== */
.uk-button,
.uk-button-default,
.uk-button-secondary,
.btn,
.btn-dark,
.btn-secondary {
    margin: 0;
    overflow: visible;
    font: inherit;
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 35px;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    /* border: none; */
    border-radius: 15px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    background-origin: border-box;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}


/*user login form*/

/* ===== Fade-in bij laden ===== */
@keyframes fadeInSlow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Algemene form layout ===== */
.com-users-login__form {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    max-width: 400px;
    margin: 50px auto; /* gecentreerd + ruimte boven */
    box-sizing: border-box;
    animation: fadeInSlow 1s ease forwards; /* fade-in effect */
}

/* ===== Inputvelden ===== */
.com-users-login__input input[type="text"],
.com-users-login__input input[type="password"],
.form-control {
    width: 100%;
    padding: 0 15px; /* alleen links-rechts */
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 15px;
    box-sizing: border-box;
    line-height: 35px; /* zoals je knoppen */
    height: 35px; /* forceren zodat tekst netjes gecentreerd staat */
    transition: border-color 0.3s ease-in-out;
}

.com-users-login__input input[type="text"]:focus,
.com-users-login__input input[type="password"]:focus,
.form-control:focus {
    border-color: #bb8b4d;
    outline: none;
}

/* ===== Labels ===== */
.com-users-login__input label {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    color: #5e2311; /* donkerbruin zoals je site */
}

/* ===== Checkbox "Onthoud mij" ===== */
.com-users-login__remember .form-check-label {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin-left: 5px;
    color: #5e2311;
}

.form-check-input {
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 18px;
    height: 18px;
}

/* ===== Inloggen knop ===== */
.com-users-login__submit .btn-primary {
    background-color: #bb8b4d;
    color: #fff;
    border: 1px solid #bb8b4d;
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-radius: 15px;
    padding: 0 15px; /* enkel links/rechts padding */
    line-height: 35px;
    height: 35px;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    display: inline-block;
    vertical-align: middle;
}

.com-users-login__submit .btn-primary:hover {
    background-color: #fff;
    color: #bb8b4d;
    border-color: #bb8b4d;
}

/* ===== Links onderaan: wachtwoord vergeten, gebruikersnaam vergeten ===== */
.com-users-login__options {
    margin-top: 20px;
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
}

.com-users-login__options a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #5e2311;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}

.com-users-login__options a:hover {
    color: #bb8b4d;
}

/* ===== Verwijder ongewenste Bootstrap rommel ===== */
.form-horizontal .control-group,
.control-group {
    margin-bottom: 20px;
}

.control-label {
    margin-bottom: 5px;
    display: block;
}

.controls {
    margin-bottom: 10px;
}

.input-password-toggle {
    background: none;
    border: none;
    padding: 0 8px;
    color: #bb8b4d;
    cursor: pointer;
}

.input-password-toggle:hover {
    color: #5e2311;
}

.password-group .input-group {
    display: flex;
    align-items: center;
}

/*user registration form*/
/* ===== Fade-in bij laden ===== */
@keyframes fadeInSlow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Algemene formulier container styling ===== */
.vm-login-form,
#adminForm {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 100%;
    margin: 30px auto;
    box-sizing: border-box;
    animation: fadeInSlow 1s ease forwards;
}

/* ===== Algemene inputvelden styling ===== */
.vm-login-form input[type="text"],
.vm-login-form input[type="password"],
#adminForm input[type="text"],
#adminForm input[type="password"],
#adminForm input[type="email"],
#adminForm input[type="tel"],
#adminForm select,
.uk-input,
.uk-select {
    width: 100%;
    padding: 0 15px;
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 35px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

.vm-login-form input[type="text"]:focus,
.vm-login-form input[type="password"]:focus,
#adminForm input[type="text"]:focus,
#adminForm input[type="password"]:focus,
#adminForm input[type="email"]:focus,
#adminForm input[type="tel"]:focus,
#adminForm select:focus,
.uk-input:focus,
.uk-select:focus {
    border-color: #bb8b4d;
    outline: none;
}

/* ===== Labels styling ===== */
.vm-login-form label,
#adminForm label,
.uk-form-label {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    color: #5e2311;
}

/* ===== Knoppen styling (Inloggen, Registreren, Annuleren) ===== */
.vm-login-form button,
#adminForm .uk-button-primary,
#adminForm .uk-button-default {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-radius: 15px;
    padding: 0 15px;
    line-height: 35px;
    height: 35px;
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    box-sizing: border-box;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ===== Primaire knoppen (actie) ===== */
.vm-login-form button,
#adminForm .uk-button-primary {
    background-color: #bb8b4d;
    color: #fff;
    border: 1px solid #bb8b4d;
}

.vm-login-form button:hover,
#adminForm .uk-button-primary:hover {
    background-color: #fff;
    color: #bb8b4d;
    border-color: #bb8b4d;
}

/* ===== Secundaire knoppen (Annuleren) ===== */
#adminForm .uk-button-default {
    background-color: #fff;
    color: #5e2311;
    border: 1px solid #ccc;
}

#adminForm .uk-button-default:hover {
    background-color: #f8f8f8;
    color: #5e2311;
    border-color: #bb8b4d;
}

/* ===== Checkbox styling ("Onthoud mij") ===== */
.vm-login-form input[type="checkbox"],
#adminForm input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 5px;
}

/* ===== Links onder formulieren ("Wachtwoord vergeten") ===== */
.user-actions li a {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-decoration: none;
    color: #5e2311;
    transition: color 0.3s;
}

.user-actions li a:hover {
    color: #bb8b4d;
}

/* ===== Kopteksten (H2, H3) styling ===== */
.vm-login-form h2,
.vm-login-form h3,
#adminForm h2,
#adminForm h3,
.uk-h2,
.uk-h3 {
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    color: #5e2311;
}

/* ===== Structuur van login eerste rij ===== */
.first-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.first-row .uk-width-2-5@l,
.first-row .uk-width-1-5@l,
.first-row .uk-width-1-1@s {
    box-sizing: border-box;
}

/* ===== Button bar center alignen ===== */
.buttonBar-right {
    margin-top: 20px;
    text-align: center;
}

/* ===== Verberg onnodige clear divs ===== */
.clear {
    display: none;
}

/* ===== Responsieve aanpassingen voor mobiel (max 768px) ===== */
@media (max-width: 768px) {

    /* Forms smaller en minder padding */
    .vm-login-form,
    #adminForm {
        padding: 20px;
        margin: 20px auto;
    }

    /* Inputvelden en selecties full-width */
    .vm-login-form input[type="text"],
    .vm-login-form input[type="password"],
    #adminForm input[type="text"],
    #adminForm input[type="password"],
    #adminForm input[type="email"],
    #adminForm input[type="tel"],
    #adminForm select,
    .uk-input,
    .uk-select {
        width: 100%;
    }

    /* Knoppen full-width */
    .vm-login-form button,
    #adminForm .uk-button-primary,
    #adminForm .uk-button-default {
        width: 100%;
        margin-bottom: 10px;
    }

    /* User actions netjes onder elkaar */
    .user-actions li {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .buttonBar-right {
        text-align: center;
    }

    /* Eerste rij login onder elkaar stapelen */
    .first-row {
        flex-direction: column;
        gap: 10px;
    }

    /* Checkbox "Onthoud mij" centreren */
    .remember-me {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }
}
/*styling van Submit button (-> Account->Mijn bestellingen*/
input.button[type="submit"] {
  background-color: #bb8b4d; /* Baust karameltint */
  color: #ffffff;
  border: 1px solid #bb8b4d;
  font-family: 'Metropolis', sans-serif;
  font-weight: 300;
  font-size: 16px;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  border-radius: 15px;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Hover effect */
input.button[type="submit"]:hover {
  background-color: #ffffff;
  color: #bb8b4d;
  border-color: #bb8b4d;
}


/*verticale separator tussen menu items*/
.uk-subnav > li {
  position: relative;
  padding: 0 15px; /* ruimte links en rechts rond elk item */
}

.uk-subnav > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px; /* hoogte van de streep */
  border-right: 1px solid #bb8b4d; /* kleur van de separator */
}

/* Verberg Klantnummer en Klantengroep velden in account gegevens*/
.uk-width-1-1 > .uk-margin-small:first-child,
.uk-width-1-1 > .uk-margin-small:nth-child(2) {
  display: none !important;
}
/*Afmelden button Accountgegevens*/
input.uk-button.uk-button-default[type="submit"][value="Afmelden"] {
  background-color: #bb8b4d; /* Baust karamelbrons */
  color: #ffffff;
  border: 1px solid #bb8b4d;
  font-family: 'Metropolis', sans-serif;
  font-weight: 300;
  font-size: 16px;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  border-radius: 15px;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Hover effect */
input.uk-button.uk-button-default[type="submit"][value="Afmelden"]:hover {
  background-color: #ffffff;
  color: #bb8b4d;
  border-color: #bb8b4d;
}