/* step46 (sandbox): Josh's homepage + profile feedback. Own file, loaded after rdl-refresh.css; every rule is scoped to a step46 class
   (.rdl46-*, .rdl-fs, .rdl-mission, .rdl-ig*, .profile46, .web-flash-msg.t46-*) so nothing else on the site changes. Uses the rdl-refresh.css colors. */

/* ---------- 1. Full service (homepage, top of #products) ---------- */
.rdl-fs { background: #fff; border: 1px solid var(--rdl-line, #D6E9DE); border-radius: var(--rdl-radius, 14px); box-shadow: var(--rdl-shadow, 0 8px 24px rgba(16,48,33,.07));
  padding: 32px 34px; margin: 0 auto 40px; max-width: 1040px; text-align: left; }
.rdl-fs-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rdl-green-dark, #1F6B45);
  background: var(--rdl-tint, #E8F5EE); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
.rdl-fs h2 { font-size: 30px; line-height: 1.2; margin: 0 0 12px; color: var(--rdl-ink, #15261F); font-weight: 700; }
.rdl-fs p { color: var(--rdl-text, #45574F); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.rdl-fs-list { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.rdl-fs-list li { font-size: 14px; font-weight: 600; color: var(--rdl-ink, #15261F); background: var(--rdl-tint-2, #F4FAF6); border: 1px solid var(--rdl-line, #D6E9DE);
  border-radius: 999px; padding: 6px 14px; }
.rdl-fs-list li.rdl-fs-main { background: var(--rdl-green-600, #287A4C); border-color: var(--rdl-green-600, #287A4C); color: #fff; }
.rdl-fs-same { display: flex; gap: 14px; align-items: flex-start; background: var(--rdl-tint, #E8F5EE); border-left: 4px solid var(--rdl-green, #2E8B57);
  border-radius: 10px; padding: 14px 16px; }
.rdl-fs-same svg { flex: 0 0 26px; margin-top: 2px; color: var(--rdl-green-dark, #1F6B45); }
.rdl-fs-same strong { display: block; color: var(--rdl-ink, #15261F); font-size: 16px; margin-bottom: 2px; }
.rdl-fs-same span { color: var(--rdl-text, #45574F); font-size: 15px; line-height: 1.6; }
.rdl-fs-same a { color: var(--rdl-green-dark, #1F6B45); font-weight: 700; white-space: nowrap; }
@media (max-width: 767.98px) { .rdl-fs { padding: 22px 18px; margin-bottom: 28px; } .rdl-fs h2 { font-size: 24px; } .rdl-fs-list li { font-size: 13px; padding: 5px 11px; } }

/* ---------- 3. Mission (#contact) ---------- */
.rdl-mission .rdl-mission-lead { font-size: 18px !important; color: var(--rdl-ink, #15261F) !important; font-weight: 600; }
.rdl-mission .rdl-mission-sign { margin-top: 6px; font-weight: 600; color: var(--rdl-green-dark, #1F6B45) !important; }

/* ---------- 4. Instagram: header icon + clear button ---------- */
.rdl-ig-nav { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--rdl-green-dark, #1F6B45) !important;
  border: 1.5px solid var(--rdl-line, #D6E9DE); background: #fff; transition: background .15s, color .15s; }
.rdl-ig-nav:hover, .rdl-ig-nav:focus-visible { background: var(--rdl-green, #2E8B57); color: #fff !important; border-color: var(--rdl-green, #2E8B57); }
.rdl-ig-nav:focus-visible, .rdl-ig-btn:focus-visible { outline: 3px solid var(--rdl-mint, #8FD6AE); outline-offset: 2px; }
#ftco-navbar .rdl-ig-item { display: flex; align-items: center; padding-left: 8px; }
#ftco-navbar .rdl-ig-mobile { display: none; margin-left: auto; margin-right: 10px; }
@media (max-width: 991.98px) {
  #ftco-navbar .rdl-ig-item { display: none; }               /* phone/tablet: the icon sits next to the Menu button instead, always visible */
  #ftco-navbar .rdl-ig-mobile { display: inline-flex; }
  #ftco-navbar .rdl-ig-mobile + .navbar-toggler { margin-left: 0 !important; }
}
.rdl-ig-btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; text-decoration: none !important; border-radius: 999px; padding: 11px 20px;
  background: var(--rdl-green-600, #287A4C); color: #fff !important; border: 2px solid var(--rdl-green-600, #287A4C); transition: background .15s; }
.rdl-ig-btn:hover { background: var(--rdl-green-dark, #1F6B45); border-color: var(--rdl-green-dark, #1F6B45); }
.rdl-ig-btn small { font-weight: 500; opacity: .9; font-size: 13px; }
.rdl-ig-btn.rdl-ig-on-dark { background: transparent; border-color: var(--rdl-mint, #8FD6AE); color: #fff !important; }
.rdl-ig-btn.rdl-ig-on-dark:hover { background: var(--rdl-green, #2E8B57); border-color: var(--rdl-green, #2E8B57); }
.footer-modern .rdl-ig-footer { margin-top: 16px; }
.rdl-mission .rdl-ig-wrap { margin-top: 18px; }

/* ---------- 6. Top-right notification toasts (web pages) ---------- */
.web-flash-msg.t46 { background: #fff !important; color: var(--rdl-ink, #15261F) !important; border-left: 5px solid var(--rdl-green, #2E8B57) !important;
  padding: 12px 40px 12px 46px !important; font-size: 15px; }
.web-flash-msg.t46::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--rdl-green, #2E8B57)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.web-flash-msg.t46 .flash-close-btn { color: #5b6b63 !important; }
.web-flash-msg.t46-ok { background: var(--rdl-tint, #E8F5EE) !important; border-left-color: var(--rdl-green, #2E8B57) !important; color: #123F2B !important; }
.web-flash-msg.t46-warn { background: #FFF6E5 !important; border-left-color: #D98E04 !important; color: #5C3D00 !important; }
.web-flash-msg.t46-warn::before { background: #D98E04 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.4' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat; }
.web-flash-msg.t46-err { background: #FDECEC !important; border-left-color: #C62828 !important; color: #6B1414 !important; }
.web-flash-msg.t46-err::before { background: #C62828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.4' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat; }

/* ---------- 5. My Profile: no more light-blue header ---------- */
.profile46.profileSection { background: var(--rdl-tint-2, #F4FAF6); }
.profile46 .profileCard { border: 1px solid var(--rdl-line, #D6E9DE); }
.profile46 .profileHeader { background: #fff; color: var(--rdl-ink, #15261F); border-top: 6px solid var(--rdl-green, #2E8B57); border-bottom: 1px solid var(--rdl-line, #D6E9DE); padding: 34px 20px 26px; }
.profile46 .profileTitle { color: var(--rdl-ink, #15261F); }
.profile46 .profileSub { color: var(--rdl-green-dark, #1F6B45); opacity: 1; font-weight: 600; }
.profile46 .userAvatarWrap { border: 3px solid var(--rdl-tint, #E8F5EE); background: var(--rdl-tint, #E8F5EE); position: relative; }
.profile46 .userAvatarWrap .profile46-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; color: var(--rdl-green-dark, #1F6B45); }
.profile46 .userAvatarWrap img { position: relative; z-index: 1; }
.profile46 .infoIcon { background: var(--rdl-tint, #E8F5EE); color: var(--rdl-green-dark, #1F6B45); }
.profile46 .btnOutline { border-color: var(--rdl-green, #2E8B57); color: var(--rdl-green-dark, #1F6B45); }
.profile46 .btnOutline:hover { background: var(--rdl-green-600, #287A4C); border-color: var(--rdl-green-600, #287A4C); color: #fff; }

/* ---------- 2. Product slideshow: the right category tag on every card ----------
   rdl-refresh.css picks the tag with ".rdl-service-grid > col:has(img[alt*=...])", which stops matching once the slideshow moves the cards out of
   the grid, so every slide fell back to "Orthodontic" (dentures, night guards, etc.). index.ejs now writes data-rdl-cat per product. */
#products .home-product-tile .home-product-image-wrap[data-rdl-cat]::after { content: attr(data-rdl-cat) !important; background: #fff !important;
  color: var(--rdl-green-dark, #1F6B45) !important; border: 1px solid var(--rdl-line, #D6E9DE) !important; }
#products .home-product-tile .home-product-image-wrap[data-rdl-cat="Orthodontic"]::after { background: var(--rdl-green-600, #287A4C) !important; color: #fff !important; border-color: transparent !important; }
#products .home-product-tile .home-product-image-wrap[data-rdl-cat=""]::after { display: none !important; }