.vc_custom_1596367982759 { background-color: #ffed00 !important; }
.uc-calculator-anchor { display: block; position: relative; top: -150px; height: 0; visibility: hidden; }

.uc-calculator {
  --uc-yellow: #ffed00;
  --uc-ink: #202020;
  display: block;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 0;
  scroll-margin-top: 150px;
  background: var(--uc-yellow);
  color: var(--uc-ink);
  font-family: Kanit, Arial, sans-serif;
}
.uc-calculator *, .uc-calculator *::before, .uc-calculator *::after { box-sizing: border-box; }
.uc-calculator-header { margin: 0 auto 34px; text-align: center; }
.uc-calculator-eyebrow { display: block; margin-bottom: 14px; color: var(--uc-ink); font-size: 12px; font-weight: 500; letter-spacing: 2px; line-height: 1.4; text-transform: uppercase; }
.uc-calculator .uc-calculator-header h2 { margin: 0; color: var(--uc-ink); font-family: Kanit, Arial, sans-serif; font-size: clamp(27px, 3vw, 36px); font-weight: 500; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.uc-calculator-header p { max-width: 650px; margin: 17px auto 0; color: #333; font-size: 16px; font-weight: 400; line-height: 1.6; }
.uc-calculator-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); overflow: hidden; border: 1px solid var(--uc-ink); border-radius: 20px; }
.uc-calculator-fields { display: grid; gap: 26px; min-width: 0; padding: clamp(26px, 3vw, 40px); }
.uc-calculator-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.uc-calculator-field legend, .uc-calculator-legend { display: flex; align-items: center; gap: 11px; width: 100%; margin: 0 0 12px; padding: 0; border: 0 !important; box-shadow: none; color: var(--uc-ink); font-size: 14px; font-weight: 600; letter-spacing: .7px; line-height: 1.4; text-transform: uppercase; }
.uc-calculator-field legend > span, .uc-calculator-legend > span { color: #827a2b; font-size: 12px; font-weight: 600; }
.uc-calculator-options { display: grid; gap: 9px; }
.uc-calculator-options-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-calculator-options-print { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uc-calculator-option { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; }
.uc-calculator-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uc-calculator-option-content { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 54px; height: 100%; padding: 11px 14px; border: 1px solid var(--uc-ink); border-radius: 999px; background: transparent; color: var(--uc-ink); font-family: Kanit, Arial, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 1.4px; line-height: 1.35; text-align: center; text-transform: uppercase; transition: background-color .15s ease, color .15s ease; }
.uc-calculator-option:hover .uc-calculator-option-content { background: rgba(0,0,0,.08); }
.uc-calculator-option input:checked + .uc-calculator-option-content { background: var(--uc-ink); color: #fff; }
.uc-calculator-option input:focus-visible + .uc-calculator-option-content { outline: 3px solid #3468d5; outline-offset: 3px; }
.uc-calculator-swatch { flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #777; border-radius: 50%; }
.uc-calculator-swatch-white { background: #fff; }
.uc-calculator-swatch-color { background: conic-gradient(#f46d84 0 30%, #75aacc 30% 66%, #f4d74d 66%); }
.uc-calculator-stepper { display: flex; align-items: center; width: 160px; height: 52px; overflow: hidden; border: 1px solid var(--uc-ink); border-radius: 999px; }
.uc-calculator-stepper button { flex: 0 0 47px; width: 47px; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--uc-ink); font-family: Kanit, Arial, sans-serif; font-size: 24px; line-height: 1; cursor: pointer; }
.uc-calculator-stepper button:hover { background: rgba(0,0,0,.12); }
.uc-calculator-stepper button:focus-visible, .uc-calculator-stepper input:focus-visible { outline: 2px solid #3468d5; outline-offset: -3px; }
.uc-calculator-stepper input { width: 64px; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--uc-ink); font-family: Kanit, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.uc-calculator-stepper input::-webkit-inner-spin-button, .uc-calculator-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.uc-calculator-summary { display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 34px); border-left: 1px solid var(--uc-ink); }
.uc-calculator .uc-calculator-summary h3 { margin: 0 0 24px; color: var(--uc-ink); font-family: Kanit, Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 1px; line-height: 1.4; text-transform: uppercase; }
.uc-calculator-result { display: grid; }
.uc-calculator-result > div:not(.uc-calculator-main-price) { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border: 0; color: var(--uc-ink); font-size: 17px; line-height: 1.45; }
.uc-calculator-result > div strong { white-space: nowrap; font-weight: 600; }
.uc-calculator-main-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; }
.uc-calculator-main-price strong { color: var(--uc-ink); font-size: 20px; font-weight: 600 !important; letter-spacing: 0; line-height: 1.45; }
.uc-calculator-main-price span { color: var(--uc-ink); font-size: 17px; line-height: 1.45; }
.uc-calculator .uc-calculator-contact { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: auto; padding: 12px 18px; border: 1px solid var(--uc-ink); border-radius: 999px; background: transparent; color: var(--uc-ink) !important; font-family: Kanit, Arial, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 2px; line-height: 1.35; text-align: center; text-decoration: none !important; text-transform: uppercase; transition: background-color .15s ease, color .15s ease; }
.uc-calculator .uc-calculator-contact:hover, .uc-calculator .uc-calculator-contact:focus-visible { background: var(--uc-ink); color: #fff !important; }
.uc-calculator-contact span { font-size: 16px; letter-spacing: 0; }
.uc-calculator-note { max-width: 1000px; margin: 24px auto 0; color: var(--uc-ink); font-size: 16px; line-height: 1.65; text-align: center; }
.uc-calculator-note strong { display: block; margin-top: 7px; font-size: 17px; font-weight: 600; }
@media (max-width: 800px) { .uc-calculator-body { grid-template-columns: 1fr; } .uc-calculator-summary { border-left: 0; border-top: 1px solid var(--uc-ink); } .uc-calculator .uc-calculator-contact { margin-top: 25px; } }
@media (max-width: 560px) { .uc-calculator { padding: 30px 16px; } .uc-calculator-header { margin-bottom: 26px; } .uc-calculator-header p { font-size: 14px; } .uc-calculator-body { border-radius: 16px; } .uc-calculator-fields { gap: 25px; padding: 24px; } .uc-calculator-options-print { grid-template-columns: 1fr; } .uc-calculator-options-print .uc-calculator-option-content { min-height: 47px; } .uc-calculator-option-content { padding: 10px 8px; font-size: 12px; letter-spacing: .8px; } .uc-calculator-result > div:not(.uc-calculator-main-price), .uc-calculator-main-price span { font-size: 16px; } .uc-calculator-main-price strong { font-size: 18px; } .uc-calculator-note { font-size: 14px; } .uc-calculator-note strong { font-size: 15px; } }
