@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap');

:root{
  --km-dark:#3f455f;
  --km-main:#4b526f;
  --km-soft:#949bb7;
  --km-bg1:#d8dceb;
  --km-bg2:#c7ccdf;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

body{
  padding:32px 20px 60px;

  font-family:'Jura',sans-serif;
  color:var(--km-dark);

  background:
    linear-gradient(
      rgba(62,65,71,.47),
      rgba(62,65,71,.47)
    ),
    url("https://api.krakkemat.be/media/algemeen/krakkemat-achtergrond.jpg")
    center center / cover fixed no-repeat;

  background-color:#3e4147;
}



/* ==================================================
PAGINA
================================================== */

.km-shop-page{
  width:100%;
  max-width:1000px;
  margin:0 auto;
}


/* ==================================================
HEADER
================================================== */

.km-shop-header{
  position:relative;
  margin-bottom:28px;
  padding:28px 28px 30px;
  text-align:center;

  border:1px solid rgba(75,82,111,.10);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.55),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      rgba(216,220,235,.78),
      rgba(199,204,223,.72)
    );

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 10px 24px rgba(63,69,95,.08);
}

.km-shop-back{
  position:absolute;
  top:22px;
  left:22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:0 18px;

  border:1px solid rgba(75,82,111,.16);
  border-radius:999px;

  font-size:14px;
  font-weight:700;

  color:var(--km-main);
  text-decoration:none;

  background:rgba(255,255,255,.30);

  transition:
    background .15s ease,
    transform .15s ease;
}

.km-shop-back:hover{
  background:rgba(255,255,255,.48);
  transform:translateY(-1px);
}

.km-shop-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  text-decoration:none;
}

.km-shop-logo{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  opacity:.94;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.km-shop-brand:hover .km-shop-logo{
  transform:translateY(-1px);
  opacity:1;
}

.km-shop-header h1{
  margin:0;

  font-size:34px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.05em;

  color:var(--km-dark);
}

.km-shop-header p{
  margin:10px 0 0;

  font-size:14px;
  line-height:1.5;
  font-weight:500;

  color:var(--km-main);
}

.km-shop-divider{
  width:130px;
  height:1px;

  margin:20px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(75,82,111,.30),
      transparent
    );
}


/* ==================================================
PANELEN
================================================== */

.km-shop-existing,
.km-generator-form,
.km-preview-section{
  margin-bottom:26px;
  padding:24px;

  border:1px solid rgba(75,82,111,.11);
  border-radius:18px;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255,255,255,.46),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(216,220,235,.84),
      rgba(199,204,223,.72)
    );

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 8px 20px rgba(63,69,95,.07);
}


/* ==================================================
BESTAANDE ARTIKELEN
================================================== */

.km-shop-existing h2{
  margin:0;
  text-align:center;

  font-size:21px;
  font-weight:700;

  color:var(--km-dark);
}

.km-shop-existing > p{
  margin:7px 0 18px;

  text-align:center;

  font-size:13px;
  line-height:1.5;
  font-weight:500;

  color:var(--km-main);
}

.km-shop-existing-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.km-shop-existing-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:12px 14px;

  border:1px solid rgba(75,82,111,.14);
  border-radius:14px;

  font-family:'Jura',sans-serif;

  color:var(--km-dark);
  background:rgba(255,255,255,.30);

  cursor:pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

.km-shop-existing-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.48);
}

.km-shop-existing-title{
  font-weight:700;
  text-align:left;
}

.km-shop-existing-price{
  font-weight:700;
  white-space:nowrap;
}

.km-shop-existing-empty{
  grid-column:1 / -1;

  padding:14px;

  text-align:center;
  font-size:14px;
  color:var(--km-main);
}


/* ==================================================
FORMULIER
================================================== */

.km-generator-form label{
  display:block;

  margin-bottom:24px;

  font-size:14px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.04em;

  color:var(--km-dark);
}

.km-generator-form input[type="text"],
.km-generator-form input[type="url"],
.km-generator-form textarea{
  width:100%;

  margin-top:8px;
  padding:13px 14px;

  border:1px solid rgba(75,82,111,.18);
  border-radius:14px;

  outline:none;

  font-family:'Jura',sans-serif;
  font-size:15px;
  font-weight:500;

  color:var(--km-dark);
  background:rgba(255,255,255,.38);

  box-shadow:
    inset 0 1px 2px rgba(63,69,95,.05);
}

.km-generator-form input:focus,
.km-generator-form textarea:focus{
  border-color:rgba(75,82,111,.32);

  box-shadow:
    0 0 0 2px rgba(75,82,111,.08);
}

.km-generator-form textarea{
  min-height:140px;
  resize:vertical;
}

.km-generator-form input::placeholder,
.km-generator-form textarea::placeholder{
  color:rgba(63,69,95,.48);
}


/* ==================================================
PRIJS
================================================== */

.km-price-input-wrap{
  position:relative;
  margin-top:8px;
}

.km-price-input-wrap input{
  margin-top:0 !important;
  padding-left:48px !important;
}

.km-price-euro{
  position:absolute;
  left:18px;
  top:50%;

  transform:translateY(-50%);

  z-index:2;

  font-size:18px;
  font-weight:700;

  color:var(--km-main);

  pointer-events:none;
}


/* ==================================================
AFBEELDING
================================================== */

.km-shop-image-field{
  margin-bottom:24px;
}

.km-shop-image-field > label{
  margin-bottom:8px;
}

.km-shop-file-row{
  padding:12px;

  border:1px solid rgba(75,82,111,.18);
  border-radius:14px;

  background:rgba(255,255,255,.38);
}

.km-shop-file-row input[type="file"]{
  display:block;
  width:100%;

  margin:0;

  font-family:'Jura',sans-serif;
  font-size:14px;
  font-weight:500;

  color:var(--km-main);
}

.km-shop-file-row input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:9px 14px;

  border:1px solid rgba(75,82,111,.18);
  border-radius:10px;

  font-family:'Jura',sans-serif;
  font-weight:700;

  color:var(--km-main);
  background:var(--km-bg1);

  cursor:pointer;
}

.km-shop-file-row input[type="file"]::file-selector-button:hover{
  background:#e3e6f0;
}

.km-field-note{
  display:block;

  margin-top:8px;

  font-size:12px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:0;

  color:var(--km-main);
}


/* ==================================================
HUIDIGE AFBEELDING
================================================== */

.km-shop-current-image{
  margin-top:16px;
  padding:16px;

  border:1px solid rgba(75,82,111,.12);
  border-radius:14px;

  background:rgba(255,255,255,.28);
}

.km-shop-current-image-label{
  margin-bottom:10px;

  font-size:13px;
  font-weight:700;

  color:var(--km-dark);
}

.km-shop-current-image-box{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:150px;
  padding:12px;

  border-radius:12px;

  background:rgba(216,220,235,.45);
}

.km-shop-current-image-box img{
  display:block;

  max-width:100%;
  max-height:180px;

  object-fit:contain;
}

.km-shop-current-image-note{
  margin:10px 0 0;

  font-size:12px;
  line-height:1.5;
  font-weight:500;

  color:var(--km-main);
}


/* ==================================================
KOOPKNOPTEKST
================================================== */

.km-button-setting{
  text-align:center;
}

.km-button-switch-row{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:18px;

  margin-top:14px;
}

.km-switch-label{
  min-width:82px;

  font-size:15px;
  font-weight:600;

  color:var(--km-soft);

  transition:color .18s ease;
}

.km-switch-label:first-child{
  text-align:right;
}

.km-switch-label:last-child{
  text-align:left;
}

.km-switch-label.active{
  color:var(--km-dark);
  font-weight:700;
}

.km-button-switch{
  position:relative;

  width:72px;
  height:36px;

  padding:0;

  border:1px solid rgba(75,82,111,.18);
  border-radius:999px;

  background:var(--km-bg1);

  cursor:pointer;

  box-shadow:
    inset 0 2px 5px rgba(63,69,95,.10);
}

.km-button-switch-knob{
  position:absolute;

  width:28px;
  height:28px;

  left:3px;
  top:3px;

  border-radius:50%;

  background:var(--km-main);

  box-shadow:
    0 2px 5px rgba(63,69,95,.22);

  transition:transform .22s ease;
}

.km-button-switch.is-betalen .km-button-switch-knob{
  transform:translateX(36px);
}


/* ==================================================
ACTIES
================================================== */

.km-form-action-divider{
  height:1px;

  margin:26px 0 24px;

  background:rgba(75,82,111,.16);
}

.km-shop-form-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.km-generator-button{
  min-height:44px;
  padding:0 22px;

  border:1px solid rgba(75,82,111,.18);
  border-radius:14px;

  font-family:'Jura',sans-serif;
  font-size:14px;
  font-weight:700;

  color:var(--km-bg1);
  background:var(--km-main);

  cursor:pointer;

  transition:
    transform .18s ease,
    filter .18s ease;
}

.km-generator-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.km-generator-button:disabled{
  cursor:wait;
  opacity:.65;
  transform:none;
}

.km-reset-button{
  color:var(--km-dark);
  background:var(--km-bg1);
}

.km-shop-delete-row{
  display:flex;
  justify-content:center;

  margin-top:14px;
}

.km-delete-button{
  color:#7b3440;
  background:var(--km-bg1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
}


.km-delete-button:hover{
  background:rgba(255,255,255,.48);
}


/* ==================================================
MELDING
================================================== */

.km-copy-notice{
  display:none;

  margin-top:20px;
  padding:14px 18px;

  border-radius:14px;

  text-align:center;

  font-size:14px;
  line-height:1.5;
  font-weight:700;

  color:var(--km-bg1);
  background:var(--km-main);
}

.km-copy-notice.show{
  display:block;
}


/* ==================================================
PREVIEW
================================================== */

.km-preview-title{
  margin:0 0 18px;

  text-align:center;

  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;

  color:var(--km-dark);
}

.km-shop-preview{
  display:grid;
  grid-template-columns:minmax(280px,390px);
  justify-content:center;

  min-height:180px;
}

.km-shop-card{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;

  min-height:520px;
  padding:26px 24px 24px;

  border:1px solid rgba(75,82,111,.14);
  border-radius:16px;

  text-align:center;

  background:rgba(255,255,255,.34);
}

.km-shop-title{
  margin:0 0 20px;

  font-size:30px;
  line-height:1.1;
  font-weight:700;

  color:var(--km-dark);
}

.km-shop-image{
  width:100%;
  height:210px;

  overflow:hidden;

  border:1px solid rgba(75,82,111,.12);
  border-radius:14px;

  background:rgba(216,220,235,.45);
}

.km-shop-image img{
  display:block;

  width:100%;
  height:100%;

  padding:16px;

  object-fit:contain;
}

.km-shop-price{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:150px;
  min-height:50px;

  margin:-24px auto 22px;
  padding:0 22px;

  border-radius:999px;

  font-size:25px;
  font-weight:800;

  color:var(--km-bg1);
  background:var(--km-main);
}

.km-shop-text{
  max-width:280px;

  margin:0 auto 26px;

  font-size:17px;
  line-height:1.55;
  font-weight:500;

  color:var(--km-main);
}

.km-shop-actions{
  width:100%;
  margin-top:auto;
}

.km-shop-button{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:58px;

  border-radius:999px;

  text-decoration:none;

  font-size:21px;
  font-weight:700;

  color:var(--km-bg1);
  background:var(--km-main);
}

.km-shop-button::before{
  content:"🛒";

  margin-right:12px;

  font-size:24px;
  line-height:1;
}


/* ==================================================
FOOTER
================================================== */

.km-shop-footer{
  display:flex;
  justify-content:center;

  margin-top:30px;
}

.km-shop-footer a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:0 18px;

  border:1px solid rgba(75,82,111,.14);
  border-radius:999px;

  font-size:13px;
  font-weight:700;

  color:var(--km-main);
  text-decoration:none;

  background:rgba(216,220,235,.72);
}


/* ==================================================
MOBIEL
================================================== */

@media screen and (max-width:720px){

 body{
    padding:14px 10px 36px;
    background-attachment:scroll;
  }

  .km-shop-header{
    padding:74px 18px 26px;
  }

  .km-shop-back{
    top:18px;
    left:18px;
  }

  .km-shop-logo{
    width:64px;
    height:64px;
  }

  .km-shop-header h1{
    font-size:30px;
  }

  .km-shop-existing,
  .km-generator-form,
  .km-preview-section{
    padding:18px 16px;
  }

  .km-shop-existing-list{
    grid-template-columns:1fr;
  }

  .km-shop-form-actions{
    flex-direction:column;
  }

  .km-generator-button{
    width:100%;
  }

  .km-shop-preview{
    grid-template-columns:1fr;
  }

}