/* =========== © 2025 Centroarts.com - https://deepbot.cloud =========== */

html .modal-overlay {
	--fmono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--f: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
	--fs: 16px;
	--fs-btn: 16px;
	--lh: 1.75;
	--fw: 400;

	--h-btn-sm: 40px;
	--h-btn-md: 48px;
	--h-btn-lg: 56px;
	--h-btn-xl: 72px;

	--h-p: 85;
	--h-y: 59;
	--h-t: 0;

  --c-text: var(--h-t), 0%, 5%;
	--c-primary: var(--h-p), 83%, 60%;
	--c-primary2: var(--h-p), 75%, 47%;

  --cb-primary: hsl(var(--h-p), 83%, 60%);
	--cb-primary-h: hsl(var(--h-p), 83%, 72%);
	--cb-primary-a: hsl(var(--h-p), 83%, 56%);
	--cb-primary-t: hsl(var(--h-t), 0%, 0%);

	--cb-invert: hsl(var(--h-t), 0%, 5%);
	--cb-invert-h: hsl(var(--h-t), 0%, 8%);
	--cb-invert-a: hsl(var(--h-t), 0%, 3%);
	--cb-invert-t: hsl(var(--h-t), 0%, 96%);

	--cb-tonal: hsla(var(--h-t), 0%, 5%, 0.04);
	--cb-tonal-h: hsla(var(--h-t), 0%, 5%, 0.05);
	--cb-tonal-t: hsl(var(--h-t), 0%, 5%);
  
  --modal-overlay: hsla(0, 0%, 0%, 0.6);
  --modal-bg: 0, 0%, 96%;
  --modal-headbg: hsl(0, 0%, 100%);
  --modal-p: 24px;
  --fs-discout: 13px;
  --fs-price: 80px;
  --fs-priceinf: 20px;
  --fs-checkbox: 13px;
  --check-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6398 8.22999C16.2198 7.87999 15.5898 7.92999 15.2298 8.35999L11.6298 12.68C11.2798 13.1 11.0898 13.33 10.9298 13.47C10.7598 13.34 10.5498 13.13 10.1598 12.75L8.70982 11.3C8.31982 10.91 7.68982 10.91 7.29982 11.3C6.90982 11.69 6.90982 12.32 7.29982 12.71L8.74982 14.16C8.74982 14.16 8.77982 14.19 8.78982 14.2C9.11982 14.53 9.42982 14.84 9.71982 15.06C10.0498 15.31 10.4798 15.54 11.0298 15.52C11.5798 15.5 11.9898 15.22 12.2898 14.95C12.5598 14.7 12.8498 14.36 13.1398 14.01C13.1498 14 13.1598 13.98 13.1798 13.97L16.7798 9.64999C17.1298 9.22999 17.0798 8.59999 16.6498 8.23999L16.6398 8.22999Z'/%3E%3C/svg%3E");
}

html.dark .modal-overlay {
  color-scheme: dark;

  --c-text: var(--h-t), 0%, 96%;
	--c-primary: var(--h-p), 83%, 60%;
	--c-primary2: var(--h-p), 83%, 60%;

  --cb-invert: hsl(var(--h-t), 0%, 96%);
	--cb-invert-h: hsl(var(--h-t), 0%, 100%);
	--cb-invert-a: hsl(var(--h-t), 0%, 94%);
	--cb-invert-t: hsl(var(--h-t), 0%, 0%);

	--cb-tonal: hsla(var(--h-t), 0%, 96%, 0.12);
	--cb-tonal-h: hsla(var(--h-t), 0%, 96%, 0.2);
	--cb-tonal-t: hsl(var(--h-t), 0%, 96%);

  --modal-bg: 0, 0%, 8%;
  --modal-headbg: inherit;
}

.modal-overlay .btn {
	--h-btn: var(--h-btn-md);
	--h-lh: 24px;

	height: var(--h-btn); line-height: var(--h-lh); font-size: var(--fs-btn);
	border-radius: calc(var(--h-btn) / 2); position: relative; z-index: 1;
	padding: calc((var(--h-btn) - var(--h-lh))/2);
	white-space: nowrap; text-align: center; border: 0 none; font-weight: 500;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; outline: none; text-decoration: none !important;
	background: none; color: inherit; user-select: none;
}
.modal-overlay .btn::after {
	content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
	transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.modal-overlay .btn:hover:after { transform: scale(1.01); }
.modal-overlay .btn:active:after { transform: scale(0.99); }

.modal-overlay .btn-primary { color: var(--cb-primary-t); }
.modal-overlay .btn-primary::after { background-color: var(--cb-primary); }
.modal-overlay .btn-primary:hover:after { background-color: var(--cb-primary-h); }
.modal-overlay .btn-primary:active:after { background-color: var(--cb-primary-a); }

.modal-overlay .btn-sm { --h-btn: var(--h-btn-sm); font-size: 15px; }
.modal-overlay .btn-md { --h-btn: var(--h-btn-md); }
.modal-overlay .btn-lg { --h-btn: var(--h-btn-lg); }
.modal-overlay .btn-xl { --h-btn: var(--h-btn-xl); }

.modal-overlay {
  position: fixed; z-index: 111; inset: 0; display: none; opacity: 0; background: hsl(var(--modal-bg));
  visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.modal {
  position: relative; pointer-events: all;
  width: 100%; max-width: var(--modal-width);
  color: hsl(var(--c-text));
}

@media (min-width: 768px) {
  html .modal-overlay {
    --modal-overlay-p: 32px;
    --modal-r: 24px;
    --modal-width: 640px;
    --modal-p: 32px;
    --fs-title: 18px;
    --fs-price: 100px;
    --fs-priceinf: 28px;
  }
  .modal-overlay { background-color: var(--modal-overlay); }
  .modal { background: hsl(var(--modal-bg)); border-radius: var(--modal-r); }
  .modal-inner {
    display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 100%; pointer-events: none;
    padding: var(--modal-overlay-p);
  }
  .modal::after {
    pointer-events: none; content: ""; position: absolute; z-index: 1;
    inset: 0; border-radius: inherit; border: 1px solid; opacity: 0.07;
  }
}

.modal-overlay .close-btn {
  position: absolute; z-index: 2; top: 0; right: 0; padding: 20px; width: 64px; height: 64px;
  display: flex; justify-content: center; align-items: center; color: inherit !important;
  background: none; border: none; outline: none; cursor: pointer;
}
.modal-overlay .close-btn .ic { opacity: .5; transition: opacity .2s ease; }
.modal-overlay .close-btn:hover .ic { opacity: .8; }

.modal-open .modal-overlay { display: block; opacity: 1; visibility: visible; }
.modal-open { overflow: hidden; }

.modal-overlay .dialog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 32px; }
.modal-overlay .dialog-title { font-size: var(--fs-title); line-height: 1.5; }
.modal-overlay .discount-label {
  font-size: var(--fs-discout); height: 26px; padding: 4px 8px; white-space: nowrap;
  line-height: 18px; border-radius: 13px; background-color: hsl(var(--c-primary)); color: hsl(var(--c-text));
}
html.dark .discount-label { background-color: hsla(var(--c-primary),0.1); color: hsl(var(--c-primary)); }
.modal-overlay .dialog-summ { display: flex; align-items: center; }
.modal-overlay .dialog-price {
  display: flex; align-items: center; font-size: var(--fs-price); font-weight: 500; line-height: .88;
}
.modal-overlay .dialog-summ-cont { margin-left: 32px; font-size: var(--fs-priceinf); line-height: 1.5em; }
.modal-overlay .dialog-oldprice, .dialog-profit { display: block; }
.modal-overlay .dialog-profit { margin-top: 4px; }

.modal-overlay .dialog-oldprice { text-decoration: line-through; opacity: .5; }

.modal-overlay .dialog-features, .dialog-summ { margin-top: 24px; }
.modal-overlay .dialog-features { display: none; }

@media (min-height: 640px) {
  .modal-overlay .dialog-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .modal-overlay .dialog-feature .ic { color: hsl(var(--c-primary2)); width: 32px; height: 32px; margin-bottom: 12px; }
}
@media (max-width: 575px) {
	.modal-overlay .dialog-features {
    gap: 8px;
    padding-left: var(--modal-p); padding-right: var(--modal-p);
    margin-left: calc(var(--modal-p)/-1); margin-right: calc(var(--modal-p)/-1);
    overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
	.modal-overlay .dialog-features::-webkit-scrollbar { display: none; }
  .modal-overlay .dialog-feature { min-width: 180px; padding: 20px; line-height: 1.5; background-color: hsl(var(--c-text),0.04); border-radius: 6px; }
  html.dark .modal-overlay .dialog-feature { background-color: hsl(var(--c-text),0.1); }
}

.modal-overlay .dialog-group {
  position: relative; z-index: 1; padding: var(--modal-p);
}

html.dark .modal-overlay  .dialog-group::after {
	content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  aspect-ratio: 1/1; border-radius: 50%; pointer-events: none;
}
html.dark .modal-overlay  .dialog-group::after { width: 1000px; transform: translate(-60%, -50%); background-image: radial-gradient(closest-side, hsla(var(--c-primary), 0.15) 0%, hsla(var(--c-primary), 0) 100%); }

.modal-overlay .dialog-buttons { display: block; padding: 20px; }

@media (max-width: 767px) {
  .modal-overlay .modal { padding-bottom: 120px; }
  html.dark .modal-overlay .dialog-group::after { top: auto; bottom: 0; }
  html.dark .modal-overlay .dialog-group::after { width: 768px; transform: translate(-60%, 0%); }
  .modal-overlay .dialog-buttons {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: block; padding-bottom: 12px;
    background-image: linear-gradient(180deg, hsla(var(--modal-bg), 0) 0px, hsl(var(--modal-bg)) 100%); text-align: center;
  }
  .modal-overlay .dialog-buttons .btn { width: 100%; --h-btn: var(--h-btn-lg); }
  .modal-overlay .dialog-info-b, .modal-overlay .dialog-info-a { font-size: 14px; line-height: 20px; margin-top: 12px; }
}
@media (min-width: 768px) {
  .modal-overlay .dialog-group { background-color: var(--modal-headbg); overflow: hidden; border-top-left-radius: inherit; border-top-right-radius: inherit; }
  .modal-overlay .dialog-buttons { padding: var(--modal-p); display: flex; align-items: center; gap: 32px; }
  .modal-overlay .dialog-buttons .btn { font-size: 18px; }
}
.modal-overlay .dialog-info-b { opacity: .7; display: none; }
.modal-overlay .dialog-info-a { opacity: .5; }
.modal-overlay .dialog-buttons.active .dialog-info-b { display: block; }
.modal-overlay .dialog-buttons.active .dialog-info-a { display: none; }
.modal-overlay .dialog-buttons.active .btn:not(:hover)::after {
  animation: blinking 1.5s linear infinite;
  will-change: box-shadow;
}
@keyframes blinking {
	0% { box-shadow: 0 0 0 0 hsl(var(--c-primary),0); }
	50% { box-shadow: 0 0 0 4px hsla(var(--c-primary),.5); }
  100% { box-shadow: 0 0 0 8px hsl(var(--c-primary),0); }
}

.modal-overlay .modal > .dialog-checks { padding: var(--modal-p); padding-top: 0; }
.modal-overlay .dialog-group .dialog-checks { margin-top: var(--modal-p); }

.modal-overlay .dialog-check-item { position: relative; font-size: var(--fs-checkbox); }
.modal-overlay .dialog-check-item + .dialog-check-item { margin-top: 16px; }
.modal-overlay .dialog-check-item > input { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.modal-overlay .dialog-check-cont { display: flex; line-height: 20px; }
.modal-overlay .dialog-check-text { display: block; opacity: .7; transition: opacity .2s ease; }
.modal-overlay .dialog-check-icon {
  display: block; position: relative; z-index: 1; margin-right: 16px; min-width: 20px; width: 20px; height: 20px; cursor: pointer;
}
.modal-overlay .dialog-check-icon::before, .modal-overlay .dialog-check-icon::after { content: ""; position: absolute; }
.modal-overlay .dialog-check-icon::before {
  box-shadow: inset 0 0 0 1px hsl(var(--c-text),0.5); inset: -4px;
  border-radius: 8px; transition: box-shadow .2s ease;
}
.modal-overlay .dialog-check-icon::after {
  inset: -2px; opacity: 0; transition: opacity .2s ease;
  mask-image: var(--check-ic); -webkit-mask-image: var(--check-ic);
	mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  background-color: hsl(var(--c-primary2));
}
.modal-overlay .dialog-check-item > input:checked ~ .dialog-check-cont .dialog-check-icon::before { box-shadow: inset 0 0 0 2px hsl(var(--c-primary2)), 0 0 0 2px hsla(var(--c-primary2),.2); }
.modal-overlay .dialog-check-item > input:checked ~ .dialog-check-cont .dialog-check-icon::after { opacity: 1; }
.modal-overlay .dialog-check-item > input:checked ~ .dialog-check-cont .dialog-check-text { opacity: .9; }

.modal-overlay .dialog-check-item > input:not(:checked) ~ .dialog-check-cont .dialog-check-icon::before { animation: checks 1.5s linear infinite; will-change: box-shadow; }

@keyframes checks {
	0% { box-shadow: inset 0 0 0 1px hsl(var(--c-text),0.5); }
	50% { box-shadow: inset 0 0 0 2px hsl(var(--c-primary2)), 0 0 0 3px hsla(var(--c-primary2),.2); }
  100% { box-shadow: inset 0 0 0 1px hsl(var(--c-text),0.5); }
}

.modal-overlay .dialog-buttons .btn { font-weight: bold; }

.modal-overlay .dialog-buttons:not(.active) .btn { color: hsl(var(--c-text),0.3) !important; }
.modal-overlay .dialog-buttons:not(.active) .btn::after {
  background-color: hsl(var(--c-text),0.1) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}