/* ===============================================================
   XinZuo gravirovani - clean CSS
   Upravy delej hlavne v teto horni sekci.
   ===============================================================*/

:root{
  --fv-panel-width: 690px;
  --fv-field-width: 420px;
  --fv-mobile-field-width: 340px;
  --fv-preview-width: 560px;

  --fv-bg: #fbfaf7;
  --fv-border: #ded8cc;
  --fv-border-soft: #d7d1c6;
  --fv-accent: #b68a47;
  --fv-text: #181818;
  --fv-muted: #665f55;
  --fv-active: #1d1d1d;
  --fv-warning-bg: #fff8ea;
  --fv-warning-text: #5f3b08;
  --fv-danger: #e3342f;
}

/* ===============================================================
   Technicke skryvani a kosik
   ===============================================================*/

.flag-kus,
.flag-sada,
.flag-chef,
.flag-santoku,
.flag-utility,
.flag-bread,
.flag-boning,
.flag-paring,
.flag-chopper,
.flag-steak,
.flag-nakiri,
.flag-carving,
.flag-tao{
  display:none!important;
}

.fvHide{
  display:none!important;
}

.fvEngraved .fvHide[style*="display: block"],
.fvEngraved .fvHide[style*="display:block"]{
  display:block!important;
}

#fvEngravedLogoInput{
  display:none!important;
}

.fvCartPreviewImage{
  height:60px;
  margin-top:5px;
}

.fvCartEtext{
  margin-top:5px;
}

.fvCartEtext span{
  font-weight:700;
}

.fvOrigTr{
  display:none!important;
  opacity:.2;
}

.fvRemoveitem,
.fvPlainRemoveitem{
  opacity:1;
  vertical-align:middle;
  position:relative;
  margin:0;
  padding:10px;
  border:0;
  text-align:right;
  line-height:10px;
  background:none;
  appearance:none;
}

.fvRemoveitem::before,
.fvPlainRemoveitem::before{
  content:"\e912";
  display:inline-block;
  color:#000;
  font-family:shoptet;
  font-size:10px;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  line-height:0;
  text-transform:none;
  text-decoration:none;
}

.fvRemoveitem:hover::before,
.fvPlainRemoveitem:hover::before{
  color:#d63500;
}

.fvEngravedDisabled{
  cursor:not-allowed!important;
}

.fvEngravedDisabled a,
.fvEngravedDisabled button,
.fvEngravedDisabled span,
.fvEngravedDisabled input,
.fvEngravedDisabled .remove-item{
  cursor:not-allowed!important;
  pointer-events:none!important;
}

.fvEngravedDisabled .remove-item{
  opacity:0!important;
}

.fvUploaderLoading{
  position:fixed;
  inset:0;
  z-index:10101010;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.66);
}

.fvUploaderLoading::after{
  content:"";
  display:block;
  width:120px;
  height:120px;
  border:16px solid #f3f3f3;
  border-top-color:#3498db;
  border-radius:50%;
  animation:fvSpin 2s linear infinite;
}

@keyframes fvSpin{
  to{ transform:rotate(360deg); }
}

/* ===============================================================
   Hlavni blok gravirovani
   ===============================================================*/

.fvEngraved{
  max-width:var(--fv-panel-width);
  margin:18px 0 24px;
  padding:17px 18px 18px;
  border:1px solid var(--fv-border);
  border-left:4px solid var(--fv-accent);
  border-radius:8px;
  background:var(--fv-bg);
  color:var(--fv-text);
}

.fvEngraved .form-group{
  text-align:left;
}

.fvEngraved .form-group:not(.fvHide.fvEngravedText):not(.fvHide.fvEngravedLogo){
  margin-bottom:0;
  padding-top:0;
  border-top:0;
}

.fvEngraved > label,
.fvEngraved .form-group > label:first-child{
  display:block;
  width:auto;
  max-width:100%;
  margin:0 0 14px;
  color:var(--fv-text);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0;
}

.fvEngravedGiftTip{
  display:flex;
  align-items:center;
  width:max-content;
  margin:0 0 7px;
  padding:4px 10px;
  border:1px solid #d8c8aa;
  border-radius:999px;
  background:#fff;
  color:#7a5622;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

/* ===============================================================
   Tlacitka vyberu
   ===============================================================*/

.fvEngravedButtons{
  gap:8px;
  margin:0 0 14px;
}

.fvEngravedButtons button{
  min-height:48px!important;
  padding:8px 12px!important;
  border:1px solid #d7d1c6!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#191919!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.2!important;
  cursor:pointer;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.fvEngravedButtons button:not(.active):hover{
  border-color:var(--fv-accent)!important;
  background:#fffdf8!important;
}

.fvEngravedButtons button.active{
  border-color:var(--fv-active)!important;
  background:var(--fv-active)!important;
  color:#fff!important;
  box-shadow:0 0 0 3px rgba(182,138,71,.18)!important;
}

.fvEngravedButtons .price{
  display:block!important;
  margin:4px 0 0!important;
  color:#706a60!important;
  font-size:12px!important;
  font-weight:500!important;
  white-space:nowrap!important;
}

.fvEngravedButtons button.active .price{
  color:#e7d8bd!important;
}

@media(min-width:768px){
  .fvEngravedButtons{
    display:flex;
    flex-wrap:wrap;
    clear:both;
    max-width:100%;
    justify-content:flex-start;
  }

  .fvEngravedButtons button{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }
}

@media(max-width:767.98px){
  .fvEngravedButtons{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:flex-start;
  }

  .fvEngravedButtons button{
    flex:1 1 100%;
    white-space:normal;
  }
}

/* ===============================================================
   Sada - rozsah gravirovani
   ===============================================================*/

.fvEngravedScope{
  width:var(--fv-field-width);
  max-width:100%;
  margin:8px 0 12px;
}

.fvEngravedScopeLabel,
.fvEngravedFontLabel,
.fvEngravedFieldLabel{
  display:block;
  margin:0 0 7px;
  color:var(--fv-text);
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

.fvEngravedFieldHelp,
.fvEngravedScopeHelp,
.fvEngravedScope .fvExtraText{
  display:block;
  width:100%;
  max-width:var(--fv-field-width);
  margin:0 0 8px;
  color:var(--fv-muted);
  font-size:13px;
  line-height:1.4;
}

.fvEngravedScope .fvEngravedButtons{
  width:340px;
  max-width:100%;
}

/* ===============================================================
   Pole, fonty a pocitadlo
   ===============================================================*/

.fvEngravedFontSelect,
#fvEngravedInput,
.fvEngravedTextInputBlock .fvEngravedTextField,
.fvEngraved .fvEngravedTextarea{
  width:100%;
  min-width:0;
  max-width:var(--fv-field-width);
  border-color:var(--fv-border-soft);
  border-radius:8px;
  background:#fff;
  box-shadow:none;
}

.fvEngravedFontSelect{
  min-width:0;
  min-height:42px;
  font-size:18px;
  line-height:1.35;
}


.fvEngraved .fvEngravedFontSelect {
  max-width: 100%;
}


:where(.ums_forms_redesign--off) .fvEngraved .form-group select.fvEngravedFontSelect{
  min-width:0;
}

#fvEngravedInput,
.fvEngravedTextInputBlock .fvEngravedTextField{
  min-height:60px;
  margin-top:8px;
  font-size:16px;
  line-height:1.35;
  max-width: 100%;
}

.fvEngraved .fvEngravedTextarea{
  resize:none;
}

#fvEngravedInput:focus,
.fvEngravedFontSelect:focus{
  border-color:var(--fv-accent);
  outline:0;
  box-shadow:0 0 0 3px rgba(182,138,71,.16);
}

.fvEngravedCharCount{
  margin:7px 0 0;
  color:#706a60;
  font-size:13px;
  font-weight:600;
}

.fvEngravedPltStatus{
  min-height:20px;
  margin-top:6px;
  color:#747b82;
  font-size:13px;
  line-height:1.4;
}

.fvEngravedPltStatus.is-ready{
  color:#239b82;
  font-weight:700;
}

.fvEngravedPltStatus.is-error{
  color:#d00000;
  font-weight:700;
}

/* ===============================================================
   Logo
   ===============================================================*/

.fvEngravedLogoPreview{
  display:block;
  width:100%;
  max-width:150px;
  padding-top:2px;
  padding-bottom:15px;
}

.fvEngravedLogo{
  margin-bottom:19px;
}

.fvEngravedLogoBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  max-width:var(--fv-field-width);
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--fv-border-soft);
  border-radius:8px;
  background:#fff;
  color:var(--fv-text);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  box-shadow:none;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.fvEngravedLogoBtn::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  filter:grayscale(1) brightness(.55);
  background:
    linear-gradient(#239b82,#239b82) 7px 2px/2px 9px no-repeat,
    linear-gradient(135deg,transparent 0 6px,#239b82 6px 8px,transparent 8px) 3px 0/10px 10px no-repeat,
    linear-gradient(#239b82,#239b82) 3px 13px/10px 2px no-repeat,
    linear-gradient(#239b82,#239b82) 2px 10px/2px 5px no-repeat,
    linear-gradient(#239b82,#239b82) 12px 10px/2px 5px no-repeat;
}

.fvEngravedLogoBtn:hover,
.fvEngravedLogoBtn:focus{
  border-color:var(--fv-accent);
  background:#fffdf8;
  color:var(--fv-text);
  outline:0;
  box-shadow:0 0 0 3px rgba(182,138,71,.16);
}

.fvEngravedLogoData-info{
  max-width:var(--fv-field-width);
  margin:8px 0 0;
  color:#706a60;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
}

/* ===============================================================
   Info boxy
   ===============================================================*/

.fvEngravedPaymentInfo,
.fvEngravedSetOneInfo{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:var(--fv-preview-width);
  margin:8px 0 0;
  padding:9px 12px 9px 38px;
  border:1px solid #dcc9a7;
  border-left:4px solid var(--fv-accent);
  border-radius:6px;
  background:var(--fv-warning-bg);
  color:var(--fv-warning-text);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.fvEngravedSetOneInfo.fvScopeInfoHidden{
  display:none!important;
}

.fvEngravedPaymentInfo::before,
.fvEngravedSetOneInfo::before{
  content:"";
  position:absolute;
  left:12px;
  top:10px;
  width:16px;
  height:12px;
  border:2px solid var(--fv-accent);
  border-radius:3px;
  background:
    linear-gradient(var(--fv-accent),var(--fv-accent)) 0 3px/100% 2px no-repeat,
    #fff;
  box-sizing:border-box;
}

.fvEngravedPaymentInfo::after,
.fvEngravedSetOneInfo::after{
  content:"";
  position:absolute;
  left:22px;
  top:19px;
  width:8px;
  height:8px;
  border:2px solid var(--fv-warning-bg);
  border-radius:50%;
  background:var(--fv-active);
  box-shadow:0 0 0 1px var(--fv-active);
  box-sizing:border-box;
}

/* ===============================================================
   Nahledy
   ===============================================================*/

.fvEngravedPreviewButton{
  display:inline-block;
  margin:4px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:#7a5622;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  text-decoration:underline;
  cursor:pointer;
}

.fvEngravedPreviewButton:hover,
.fvEngravedPreviewButton:focus{
  color:var(--fv-active);
  text-decoration:none;
}

.fvEngravedInlinePreview{
  width:100%;
  max-width:var(--fv-preview-width);
  margin:12px 0 4px;
}

.fvEngravedInlinePreview .fvEngravedPreviewNotice{
  border:1px solid #e1e1e1;
  border-bottom:0;
  border-radius:6px 6px 0 0;
}

.fvEngravedInlinePreviewCanvas{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #e1e1e1;
  border-top:0;
  border-radius:0 0 6px 6px;
  background:#f7f7f7;
}

.fvEngravedInlinePreviewDisclaimer{
  margin:5px 0 0;
  color:#747b82;
  font-size:12px;
  line-height:1.35;
}

.fvEngravedPreviewOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.55);
}

.fvEngravedPreviewOverlay.is-active{
  display:flex;
}

.fvEngravedPreviewModal{
  position:relative;
  width:min(920px,100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:18px;
  border-radius:6px;
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}

.fvEngravedPreviewModal h3{
  margin:0 42px 14px 0;
  font-size:20px;
  line-height:1.25;
  font-weight:700;
}

.fvEngravedPreviewClose{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #d8d8d8;
  border-radius:4px;
  background:#fff;
  color:#222;
  font-size:24px;
  line-height:30px;
  cursor:pointer;
}

.fvEngravedPreviewCanvasWrap{
  width:100%;
  overflow:hidden;
  border:1px solid #e1e1e1;
  border-radius:6px;
  background:#f7f7f7;
}

.fvEngravedPreviewNotice{
  margin:0;
  padding:7px 10px;
  border-bottom:1px solid #e1e1e1;
  background:#f1eee8;
  color:#5f594f;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}

.fvEngravedPreviewCanvas{
  display:block;
  width:100%;
  height:auto;
}

.fvEngravedPreviewDisclaimer{
  margin:10px 0 0;
  color:#747b82;
  font-size:13px;
  line-height:1.4;
}

/* ===============================================================
   Mobil
   ===============================================================*/

@media(max-width:767.98px){
  .fvEngraved{
    max-width:100%;
    padding:14px;
  }

  .fvEngravedFontSelect,
  #fvEngravedInput,
  .fvEngravedTextInputBlock .fvEngravedTextField,
  .fvEngraved .fvEngravedTextarea,
  .fvEngravedLogoBtn,
  .fvEngravedLogoData-info{
    min-width:0;
  }

  .fvEngraved .fvEngravedFontSelect {
    width: 100%;
  }

  .fvEngravedInlinePreview,
  .fvEngravedPaymentInfo,
  .fvEngravedSetOneInfo{
    max-width:100%;
  }
}

@media(max-width:479.98px){
  .fvEngravedScope .fvEngravedButtons{
    width:100%;
  }
}