/*!
 * DST CUSTOM CLAUDE 2026-10-22 - ECT's account / contact pop-up on every page (shared by every store). Loaded by
 * inc/stylesheets.asp. The pop-up is ECT's "soft form" (#softopaquediv, displaysoftlogin() in vsadmin/inc/incfunctions.asp):
 * Login, New Account / Remember Me?, Ask a Question, Email a Friend, Contact Us. Styles only - every rule starts with
 * #softopaquediv, so nothing outside the pop-up changes. Moved here from css/dstcheckout.css.
 */
/* ECT's "soft form" (#softopaquediv, incfunctions.asp) as a Bootstrap modal: dark backdrop, white rounded dialog, a real x,
   labels above 38px boxes, the main button green and full width, the others quiet. ECT shows / hides its parts inline. */
#softopaquediv { background-color: rgba(0,0,0,.5) !important; }
#softopaquediv .ectsoftwrapper { position: relative; width: auto !important; max-width: 440px; margin: 10vh auto 24px !important; padding: 20px 24px 24px !important;
	background: #fff; border: 0; border-radius: .5rem !important; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2) !important; font-family: inherit !important; text-align: left; }
#softopaquediv div.scclose { position: absolute; top: 14px; right: 14px; float: none !important; width: 32px; height: 32px; padding: 0 !important; border-radius: .375rem; z-index: 1;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%23495057' stroke-width='1.6' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3e%3c/svg%3e") no-repeat center / 16px 16px !important; }
#softopaquediv div.scclose::after { content: none !important; }
#softopaquediv div.scclose:hover { background-color: #f1f3f5 !important; }
#softopaquediv div.softformheader { margin: 0 0 16px !important; padding: 0 40px 12px 0 !important; border-bottom: 1px solid #dee2e6 !important;
	text-align: left !important; font-size: 1.25rem !important; font-weight: 600; line-height: 1.3; color: #212529; }
#softopaquediv div.softformheader:empty { display: none; }
/* Ask a Question / Contact Us intro text */
#softopaquediv div.contactblurb { margin: 0 0 14px !important; padding: 0 !important; text-align: left !important; font-size: .95rem !important; line-height: 1.45 !important; color: #6c757d !important; }
#softopaquediv div.contactblurb:empty { display: none; }
#softopaquediv div.ectsf2col { display: block; margin: 0 0 12px !important; }
#softopaquediv div.ectsf2col > div { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
#softopaquediv div.ectsf2col > div:first-child { padding: 0 0 3px !important; font-size: .85rem; font-weight: 600; color: #495057; }
#softopaquediv div.ectsf2col .ectlabel { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
#softopaquediv div.redstar::before { color: #dc3545; margin-right: 2px; }
#softopaquediv div.ectsoftwrapper input[type=text], #softopaquediv div.ectsoftwrapper input[type=email], #softopaquediv div.ectsoftwrapper input[type=password],
#softopaquediv div.ectsoftwrapper select, #softopaquediv div.ectsoftwrapper textarea {
	display: block; width: 100% !important; max-width: none !important; height: 38px !important; margin: 0 !important; padding: 6px 10px !important;
	font-size: 1rem !important; line-height: 1.5; color: #212529; border: 1px solid #ced4da !important; border-radius: .375rem !important;
	background-color: #fff !important; background-image: none !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
#softopaquediv div.ectsoftwrapper textarea { height: auto !important; min-height: 100px; resize: vertical; }
#softopaquediv div.ectsoftwrapper input:focus, #softopaquediv div.ectsoftwrapper select:focus, #softopaquediv div.ectsoftwrapper textarea:focus {
	border-color: #80bdff !important; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important; }
#softopaquediv div.ectsoftwrapper input:disabled { background-color: #e9ecef !important; color: #495057; }
#softopaquediv div.ectsoftwrapper .ectwarning { border-color: #dc3545 !important; }
/* checkbox rows: box left of its label */
#softopaquediv div.ectsf2col:has(> .softformjright) { display: flex; align-items: flex-start; gap: 8px; }
#softopaquediv div.ectsf2col:has(> .softformjright) > div:first-child { padding: 2px 0 0 !important; }
#softopaquediv div.ectsf2col:has(> .softformjright) > div:last-child { font-size: .9rem; font-weight: 400; color: #495057; }
#softopaquediv div.ectsoftwrapper input.ectcheckbox { display: inline-block; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; accent-color: #28a745; cursor: pointer;
	-webkit-appearance: checkbox !important; appearance: auto !important; background: none !important; border: 0 !important; }
#softopaquediv div.ectsoftwrapper input.ectcheckbox::before, #softopaquediv div.ectsoftwrapper input.ectcheckbox::after { content: none !important; display: none !important; }
#softopaquediv .cartacclogineverdivulge:not(:empty) { margin-top: 4px; font-size: .8rem; color: #6c757d; }
/* buttons: the first one is the main action (Create Account / Submit / Send) - green, full width; the rest quiet, side by side */
#softopaquediv div.softformsend { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0 !important; text-align: center; }
#softopaquediv div.softformsend .ectbutton { flex: 1 1 auto; width: auto !important; margin: 0 !important; padding: 9px 14px !important; font-size: .9rem !important; line-height: 1.2 !important;
	text-transform: none !important; border-radius: .375rem !important; box-shadow: none !important; background: #fff !important; color: #343a40 !important; border: 1px solid #ced4da !important; }
#softopaquediv div.softformsend .ectbutton:first-child { flex: 1 1 100%; padding: 12px 16px !important; font-size: 1rem !important; font-weight: 600;
	background: #28a745 !important; color: #fff !important; border-color: #28a745 !important; }
#softopaquediv div.softformsend .ectbutton:hover { filter: brightness(.96); }
#softopaquediv div.ectsfsuccess { margin: 24px 0 !important; padding: 12px 16px; border-radius: .375rem; background: #f1f9f3; color: #1e7e34; border: 1px solid #c3e6cb; text-align: center; }
#softopaquediv div.ectsfsuccess:empty { display: none; }
@media (max-width: 767.98px) {
	#softopaquediv .ectsoftwrapper { margin: 16px !important; padding: 16px !important; }
}
/* very narrow phones (320-379px): a little more room, and ECT's fixed 304px reCAPTCHA (Ask a Question) scaled to fit */
@media (max-width: 379.98px) {
	#softopaquediv .ectsoftwrapper { margin: 10px !important; padding: 14px !important; }
	#softopaquediv #contactcaptcha > div { transform: scale(.86); transform-origin: 0 0; margin-bottom: -11px; }
}

/* the pop-up's own loading image (while a form sends): the same green ring as the checkout covers */
#softopaquediv img.ectpreloader { box-sizing: border-box !important; width: 44px !important; height: 44px !important; padding: 22px !important; max-width: none !important;
	border: 4px solid rgba(40,167,69,.2) !important; border-top-color: #28a745 !important; border-radius: 50% !important; background: none !important;
	animation: dstsfspin .75s linear infinite; }
@keyframes dstsfspin { to { transform: rotate(360deg); } }