:root {
  --psd-ink: #071c31;
  --psd-navy: #0b3154;
  --psd-blue: #123f66;
  --psd-teal: #082a4f;
  --psd-paper: #f5f7f8;
  --psd-soft: #e8eef1;
  --psd-line: #cfdbe2;
  --psd-muted: #617181;
}

html,
body,
#page {
  background: #eef2f4 !important;
  color: var(--psd-ink) !important;
  font-family: Nunito, Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}

#preloader {
  background: var(--psd-ink) !important;
}

#header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--psd-line) !important;
  box-shadow: 0 8px 24px rgba(7, 28, 49, 0.12) !important;
}

#logo {
  background-position: left center !important;
  background-size: contain !important;
}

#logo img,
#welcomeLogo,
#quoteLogo img {
  max-width: 100% !important;
  object-fit: contain !important;
}

body.supplier-branded-designer #logo img {
  max-height: 78px !important;
}

.mainNav li a {
  background: transparent !important;
  color: var(--psd-ink) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.mainNav li a:hover {
  background: var(--psd-soft) !important;
  color: var(--psd-ink) !important;
}

.mainNav li a.current {
  background: var(--psd-navy) !important;
  color: #ffffff !important;
}

.mainNav a.disAble,
.mainNav a[disabled] {
  opacity: 0.38 !important;
}

nav#visualoptions {
  background: #ffffff !important;
  border-left: 1px solid var(--psd-line) !important;
}

#visualoptions li {
  border-left: 1px solid var(--psd-line) !important;
}

#visualoptions .operateButtons {
  background: #ffffff !important;
  color: var(--psd-ink) !important;
}

#visualoptions .operateButtons::before {
  display: none !important;
}

#visualoptions .operateButtons:hover {
  background: #edf4f5 !important;
  color: var(--psd-ink) !important;
}

#visualoptions .material-symbols-outlined,
#visualoptions .operateButtons p {
  color: var(--psd-ink) !important;
  letter-spacing: 0 !important;
}

#summaryStatus {
  background: var(--psd-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(7, 28, 49, 0.18) !important;
}

#summaryStatus .hidePhone {
  color: #c8d6df !important;
}

#summaryStatus .summaryType {
  color: #ffffff !important;
  font-weight: 900 !important;
}

#fulldoordisplay {
  filter: drop-shadow(0 22px 20px rgba(7, 28, 49, 0.20)) !important;
}

a.NextBtn,
a.PrevBtn,
#orderNow {
  border-radius: 8px !important;
  border: 1px solid var(--psd-line) !important;
  box-shadow: 0 10px 22px rgba(7, 28, 49, 0.12) !important;
  letter-spacing: 0 !important;
}

a.PrevBtn {
  background: #ffffff !important;
  color: var(--psd-ink) !important;
}

a.NextBtn,
#orderNow {
  background: var(--psd-navy) !important;
  border-color: var(--psd-navy) !important;
  color: #ffffff !important;
}

a.NextBtn:hover,
a.PrevBtn:hover,
#orderNow:hover {
  background: var(--psd-navy) !important;
  border-color: var(--psd-navy) !important;
  color: #ffffff !important;
}

a.NextBtn p,
a.PrevBtn p,
#orderNow p {
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#footer {
  background: #f6f8f9 !important;
  border-top: 1px solid var(--psd-line) !important;
  box-shadow: 0 -10px 28px rgba(7, 28, 49, 0.14) !important;
}

#mobileStatus {
  background: var(--psd-navy) !important;
  color: #ffffff !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#closefooter {
  background: #e7edf1 !important;
  border: 1px solid var(--psd-line) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--psd-ink) !important;
}

.owl-item {
  background: transparent !important;
  border-radius: 8px !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

.owl-item:hover {
  background: rgba(7, 28, 49, 0.07) !important;
}

.owl-item.active {
  background: var(--psd-teal) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
}

.box .label,
.doorlink .label,
.glasslink .box .label,
.sideglasslink .box .label,
.frameStylelink .box .label {
  background: var(--psd-ink) !important;
  color: #ffffff !important;
  border-radius: 6px 6px 0 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

#footer .owl-item.active .box .label,
#footer .owl-item.active .doorlink .label {
  background: #ffffff !important;
  color: var(--psd-ink) !important;
}

a .box .sublabel,
a.colourlink .box .sublabel {
  background: #536575 !important;
  color: #ffffff !important;
  border-radius: 0 0 6px 6px !important;
  font-weight: 800 !important;
}

.colourlink .box,
.framecolourlink .box,
.glasslink .box,
.sideglasslink .box,
.frameStylelink .box,
.doorlink {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.colourlink .box,
.framecolourlink .box {
  box-shadow: 0 7px 16px rgba(7, 28, 49, 0.12) !important;
}

.colourlink .box img,
.framecolourlink .box img {
  display: block !important;
  border: 0 !important;
  object-fit: cover !important;
}

.handlethumb .box {
  background: #f6f8fa !important;
}

.handlethumb .box img {
  width: 80px !important;
  height: 128px !important;
  top: 31px !important;
  left: 0 !important;
  right: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.handlethumb .box .label {
  min-height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
}

.nav-btn {
  background: #ffffff !important;
  border: 1px solid var(--psd-line) !important;
  border-radius: 8px !important;
  color: var(--psd-ink) !important;
  box-shadow: 0 8px 18px rgba(7, 28, 49, 0.12) !important;
}

#footerControls .button-cover,
.button-cover {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--psd-line) !important;
  border-radius: 8px !important;
}

.infoButt {
  background: #ffffff !important;
  border: 1px solid var(--psd-line) !important;
  border-radius: 8px !important;
  color: var(--psd-ink) !important;
}

#colourbothsides,
#framecolourbothsides,
#ralform,
#hingesideOptions,
#finishType,
#cassetteType {
  color: var(--psd-ink) !important;
}

.toggleButton .knobs::before {
  background: #ff4d47 !important;
  box-shadow: 0 6px 14px rgba(255, 77, 71, 0.30) !important;
}

#formscreen {
  background: #f6f8f9 !important;
}

#forminputs {
  background: #ffffff !important;
  border: 1px solid var(--psd-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 56px rgba(7, 28, 49, 0.18) !important;
}

.form-group input,
.form-group textarea,
.input__field {
  background: #f2f5f7 !important;
  color: var(--psd-ink) !important;
  border-radius: 7px 7px 0 0 !important;
}

.editButton,
.submitButton,
.genericBttn,
.Button,
.MainButton {
  background: var(--psd-navy) !important;
  border: 1px solid var(--psd-navy) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(8, 42, 79, 0.24) !important;
}

#slideFooterUp {
  background: var(--psd-navy) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Pro Secure dark-blue theme: remove remaining ODL teal/green accents. */
#mobileStatus,
.MainButton,
.Button,
.editButton,
.genericBttn,
#slideFooterUp,
.mainNav li a.current,
.owl-item.active,
#summaryStatus,
#footer .owl-item.active,
#footer .owl-item:hover,
#glassoptions ul.colourlist li.current,
#orientation ul li:hover,
#orientation ul li.current,
#sglassoptions ul.colourlist li.current,
#fullsidelightOptions a.current,
#patternedglassOveride a.current,
#glazedsidelightWidths a.current,
#glazedSidelights a.current,
.quoteSelectBtn.current,
.urbanlink.current,
.hingeOption.current,
.openOption.current,
.finishOption.current,
.cassetteOption.current,
#closefooter.close:hover {
  background: var(--psd-navy) !important;
  background-color: var(--psd-navy) !important;
  border-color: var(--psd-navy) !important;
}

.owl-item.active {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.46) !important;
}

p.greenTxt,
.greenTxt {
  color: var(--psd-navy) !important;
}

@media (max-width: 760px) {
  .mainNav li a {
    font-size: 11px !important;
  }

  #summaryStatus {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}