/* Sofa Mobile Navbar Contact - frontend */
:root{
  --sofa-mnc-toolbar-height: 56px;
}

.sofa-mnc-dropdown{
  position: fixed;
  left: 10px;
  width: calc(100vw - 20px);
  bottom: calc(var(--sofa-mnc-toolbar-height) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 360; /* Woodmart toolbar is ~350 */
  pointer-events: none;
}

.sofa-mnc-dropdown .sofa-mnc-panel{
  background: var(--wd-main-bgcolor, #fff);
  border: 1px solid var(--wd-form-brd-color, rgba(0,0,0,0.12));
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.sofa-mnc-dropdown.is-open{
  pointer-events: auto;
}

.sofa-mnc-dropdown.is-open .sofa-mnc-panel{
  opacity: 1;
  transform: translateY(0);
}

.sofa-mnc-list{
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

/* Column layouts (configured from plugin settings). */
.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-list{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-list{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* For multi-column layouts, switch to a compact vertical item style. */
.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-link,
.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-link{
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 10px 8px;
}

.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-icon,
.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex: 0 0 34px;
}

.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-icon img,
.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-icon img,
.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-icon svg,
.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-icon svg{
  width: 18px;
  height: 18px;
}

.sofa-mnc-dropdown.sofa-mnc-cols-2 .sofa-mnc-text,
.sofa-mnc-dropdown.sofa-mnc-cols-3 .sofa-mnc-text{
  font-size: 12px;
}

/* Upward arrow indicator above the toolbar button (positioned via JS). */
.sofa-mnc-open-arrow{
  position: fixed;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  z-index: 361;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

body.sofa-mnc-open .sofa-mnc-open-arrow{
  opacity: 1;
}

.sofa-mnc-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  outline: none;
}

.sofa-mnc-link:hover,
.sofa-mnc-link:focus{
  background: var(--wd-bordered-bg, rgba(0,0,0,0.04));
}

.sofa-mnc-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: var(--wd-bordered-bg, rgba(0,0,0,0.04));
  flex: 0 0 26px;
}

.sofa-mnc-icon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.sofa-mnc-icon svg{
  width: 18px;
  height: 18px;
}

.sofa-mnc-icon i{
  font-size: 18px;
  line-height: 1;
}

.sofa-mnc-text{
  font-size: 13px;
  line-height: 1.2;
}


/* Color controls (set via plugin settings). */
.sofa-mnc-toolbar-item .wd-toolbar-icon{
  color: var(--sofa-mnc-icon-color, currentColor);
}

.sofa-mnc-toolbar-item .wd-toolbar-icon svg{
  width: 18px;
  height: 18px;
}

.sofa-mnc-toolbar-item .wd-toolbar-icon i{
  font-size: 18px;
  line-height: 1;
}

.sofa-mnc-toolbar-item .wd-toolbar-label{
  color: var(--sofa-mnc-text-color, inherit);
}

.sofa-mnc-icon{
  color: var(--sofa-mnc-icon-color, currentColor);
}

.sofa-mnc-text{
  color: var(--sofa-mnc-text-color, inherit);
}

/* Small screens */
@media (max-width: 420px){
  .sofa-mnc-dropdown{
    left: 8px;
    width: calc(100vw - 16px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sofa-mnc-dropdown .sofa-mnc-panel{
    transition: none;
  }
}