/* D&R Design Visualizer - matches the site design system.
   Full bleed WITHOUT 100vw and WITHOUT any overflow clip on an ancestor:
   100vw counts the scrollbar and overflows ~15px, and a clip on .entry-content
   cuts every full-bleed section back to the content column. */

.dnr-viz-rip{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto;height:52px;background-repeat:no-repeat;background-size:100% 100%;background-position:center bottom;position:relative;z-index:2;margin-bottom:-1px}
.dnr-viz{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto;padding:58px 24px 64px;box-sizing:border-box}
.dnr-viz-navy{background:#0B1466;color:#fff}
.dnr-viz-white{background:#F9F7FF;color:#111}
.dnr-viz-in{max-width:1350px;margin:0 auto}

/* The hidden attribute must beat every class rule below. .dnr-viz-step is display:flex
   and .dnr-viz-thumb is display:block, and both outrank the browser's [hidden] rule -
   which made step 4 show on a first visit and rendered the empty preview img. */
.dnr-viz [hidden],.dnr-viz-rip[hidden]{display:none !important}

/* The theme colors labels and legends. Say it explicitly or the drop zone text
   renders dark navy on the navy band and all but disappears. */
.dnr-viz-navy,.dnr-viz-navy label,.dnr-viz-navy .dnr-viz-drop-txt,.dnr-viz-navy .dnr-viz-hint,.dnr-viz-navy .dnr-viz-opt{color:#fff}
.dnr-viz-white,.dnr-viz-white label,.dnr-viz-white .dnr-viz-drop-txt,.dnr-viz-white .dnr-viz-hint,.dnr-viz-white .dnr-viz-opt{color:#111}

.dnr-viz .dnr-viz-h{font-family:Oswald,"Oswald",sans-serif;font-size:50px;font-weight:700;line-height:1.1;text-align:center;margin:0 0 14px;text-transform:none}
.dnr-viz-navy .dnr-viz-h{color:#fff}
.dnr-viz-white .dnr-viz-h{color:#0B1466}
.dnr-viz .dnr-viz-sub{font-size:18px;line-height:1.55;text-align:center;max-width:760px;margin:0 auto 38px;opacity:.9}

.dnr-viz-form{max-width:900px;margin:0 auto}
.dnr-viz-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.dnr-viz-step{display:flex;gap:16px;align-items:flex-start;margin:0;padding:22px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.dnr-viz-white .dnr-viz-step{background:#fff;border-color:#e3e0ee}
.dnr-viz-num{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#E2B943;color:#0B1466;font-family:Oswald,sans-serif;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dnr-viz-body{flex:1 1 auto;min-width:0}
.dnr-viz .dnr-viz-body h3{font-family:Oswald,sans-serif;font-size:22px;font-weight:600;margin:4px 0 6px;line-height:1.2}
.dnr-viz-navy .dnr-viz-body h3{color:#fff}
.dnr-viz-white .dnr-viz-body h3{color:#0B1466}
.dnr-viz-opt{font-size:13px;font-weight:400;opacity:.65;font-family:inherit;text-transform:lowercase}
.dnr-viz-hint{font-size:14.5px;line-height:1.5;margin:0 0 14px;opacity:.78}

/* the photo drop zone */
.dnr-viz-drop{display:flex;align-items:center;justify-content:center;min-height:152px;border:2px dashed rgba(255,255,255,.4);border-radius:8px;cursor:pointer;text-align:center;padding:14px;transition:border-color .15s,background .15s;position:relative;overflow:hidden}
.dnr-viz-white .dnr-viz-drop{border-color:#b9b4cf;background:#fbfaff}
.dnr-viz-drop:hover,.dnr-viz-drop.is-over{border-color:#E2B943;background:rgba(226,185,67,.1)}
.dnr-viz-drop.has-img{border-style:solid;border-color:#47A2F5;min-height:0;padding:0}
.dnr-viz-drop.is-busy{border-color:#47A2F5;background:rgba(71,162,245,.16)}
.dnr-viz-drop.is-busy .dnr-viz-drop-txt::after{content:" - preparing..."}
.dnr-viz-drop-txt{font-size:15px;font-weight:600;opacity:.85}
.dnr-viz-drop.has-img .dnr-viz-drop-txt{display:none}
.dnr-viz-thumb{display:block;width:100%;max-height:260px;object-fit:cover}

/* products */
.dnr-viz-prods{display:grid;gap:10px;margin-bottom:12px}
.dnr-viz-prod{display:grid;grid-template-columns:104px 1fr 34px;gap:10px;align-items:center;grid-template-areas:"pic txt kill"}
.dnr-viz-prod .dnr-viz-drop{grid-area:pic}
.dnr-viz-prod input[type=text]{grid-area:txt}
.dnr-viz-prod .dnr-viz-kill{grid-area:kill}
.dnr-viz-prod .dnr-viz-drop{min-height:84px;height:84px}
.dnr-viz-prod .dnr-viz-drop.has-img{height:84px}
.dnr-viz-prod .dnr-viz-thumb{height:84px;max-height:84px}
.dnr-viz-prod .dnr-viz-drop-txt{font-size:12.5px;line-height:1.25;font-weight:600;padding:0 4px}
.dnr-viz-prod input[type=text]{width:100%}
.dnr-viz-kill{width:34px;height:34px;border:0;border-radius:6px;background:rgba(255,255,255,.14);color:inherit;font-size:19px;line-height:1;cursor:pointer}
.dnr-viz-white .dnr-viz-kill{background:#eee9f5}
.dnr-viz-kill:hover{background:#c0392b;color:#fff}

.dnr-viz input[type=text],.dnr-viz input[type=email],.dnr-viz input[type=tel],.dnr-viz textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;border-radius:6px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.96);color:#111;font-size:15px;font-family:inherit}
.dnr-viz-white input[type=text],.dnr-viz-white input[type=email],.dnr-viz-white input[type=tel],.dnr-viz-white textarea{border-color:#c9c4db;background:#fff}
.dnr-viz input:focus,.dnr-viz textarea:focus{outline:3px solid rgba(226,185,67,.55);outline-offset:1px;border-color:#E2B943}
.dnr-viz input.is-bad,.dnr-viz textarea.is-bad{border-color:#e74c3c;outline-color:rgba(231,76,60,.4)}
.dnr-viz textarea{resize:vertical;min-height:62px}
.dnr-viz-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.dnr-viz-add{background:transparent;border:1.5px solid #E2B943;color:#E2B943;font-family:Oswald,sans-serif;font-size:14.5px;font-weight:600;padding:9px 16px;border-radius:6px;cursor:pointer;letter-spacing:.3px}
.dnr-viz-add:hover{background:#E2B943;color:#0B1466}
.dnr-viz-add[disabled]{opacity:.4;cursor:not-allowed}
.dnr-viz-add[disabled]:hover{background:transparent;color:#E2B943}

.dnr-viz-go{display:block;width:100%;max-width:420px;margin:26px auto 12px;background:#E2B943;color:#0B1466;border:0;border-radius:7px;font-family:Oswald,sans-serif;font-size:21px;font-weight:700;letter-spacing:.5px;padding:17px 24px;cursor:pointer;text-transform:uppercase}
.dnr-viz-go:hover{background:#efc856}
.dnr-viz-go[disabled]{opacity:.5;cursor:not-allowed}
.dnr-viz-fine{font-size:12.5px;text-align:center;opacity:.65;max-width:620px;margin:0 auto;line-height:1.5}
.dnr-viz-err{max-width:620px;margin:16px auto 0;padding:12px 15px;border-radius:6px;background:#c0392b;color:#fff;font-size:15px;line-height:1.45;text-align:center}

/* working */
.dnr-viz-working{text-align:center;padding:44px 20px}
.dnr-viz-spin{width:54px;height:54px;margin:0 auto 20px;border:5px solid rgba(255,255,255,.22);border-top-color:#E2B943;border-radius:50%;animation:dnrvizspin 1s linear infinite}
.dnr-viz-white .dnr-viz-spin{border-color:#ddd8ea;border-top-color:#E2B943}
@keyframes dnrvizspin{to{transform:rotate(360deg)}}
.dnr-viz-working p{font-size:17px;margin:0;opacity:.9}

/* result */
.dnr-viz-result{max-width:1100px;margin:0 auto}
.dnr-viz .dnr-viz-result h3{font-family:Oswald,sans-serif;font-size:32px;font-weight:700;text-align:center;margin:0 0 24px}
.dnr-viz-ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dnr-viz-ba figure{margin:0}
.dnr-viz-ba img{width:100%;height:auto;display:block;border-radius:8px;border:3px solid rgba(255,255,255,.3)}
.dnr-viz-white .dnr-viz-ba img{border-color:#ddd8ea}
.dnr-viz-ba figcaption{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;text-align:center;padding-top:9px;letter-spacing:.4px;text-transform:uppercase;opacity:.85}
.dnr-viz-after-cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
.dnr-viz-btn{display:inline-block;background:#E2B943;color:#0B1466;font-family:Oswald,sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;padding:15px 30px;border-radius:7px;text-decoration:none;text-transform:uppercase}
.dnr-viz-btn:hover{background:#efc856;color:#0B1466;text-decoration:none}
.dnr-viz-again{background:transparent;border:1.5px solid currentColor;color:inherit;font-family:Oswald,sans-serif;font-size:15px;font-weight:600;padding:14px 22px;border-radius:7px;cursor:pointer}
.dnr-viz-again:hover{background:rgba(255,255,255,.14)}

@media (max-width:860px){
  .dnr-viz{padding:42px 18px 48px}
  .dnr-viz .dnr-viz-h{font-size:33px}
  .dnr-viz .dnr-viz-sub{font-size:16px;margin-bottom:28px}
  .dnr-viz-rip{height:30px}
  .dnr-viz-step{padding:17px;gap:12px}
  .dnr-viz-num{flex-basis:31px;width:31px;height:31px;font-size:17px}
  .dnr-viz-two{grid-template-columns:1fr}
  .dnr-viz-ba{grid-template-columns:1fr}
  .dnr-viz-prod{grid-template-columns:86px 1fr 32px;grid-template-areas:"pic . kill" "txt txt txt";row-gap:8px}
  .dnr-viz textarea{min-height:92px}
  .dnr-viz-prod .dnr-viz-drop,.dnr-viz-prod .dnr-viz-drop.has-img,.dnr-viz-prod .dnr-viz-thumb{height:68px;max-height:68px;min-height:68px}
  .dnr-viz-go{font-size:18px;padding:15px 20px}
}