/* Flat Responsive Toggle Button - front-end styles */
/* Button aims to match flat.markdesign.tech outlined buttons (clean black border, no blue accent) */

.frtb-wrap{
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 0 14px 0;
  font-family: inherit;
}

.frtb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background: #ffffff;
  color: #111111;

  border: 1px solid #111111;
  border-radius: 6px;

  padding: 12px 18px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  font-family: inherit;

  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.frtb-btn:hover{ background: #f7f7f7; }
.frtb-btn:active{ transform: translateY(1px); }
.frtb-btn:focus,
.frtb-btn:focus-visible{
  outline: none;
  box-shadow: none;
}

/* left/right alignment */
.frtb-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.frtb-right{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon: consistent size + baseline */
.frtb-ic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #111111;
  flex: 0 0 18px;
}
.frtb-ic-svg{
  width: 18px;
  height: 18px;
  display: block;
}

.frtb-label{
  font-weight: 500;
  white-space: nowrap;
}

.frtb-chevron{
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #111111;
  transition: transform .18s ease;
}

.frtb-wrap[data-open="1"] .frtb-chevron{ transform: rotate(180deg); }

/* Panel spans full width of container (NOT the button) */
.frtb-panel{
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  border: 1px solid var(--frtb-panel-border);
  background: var(--frtb-panel-bg);
  border-radius: 8px;
  overflow: hidden;
}

.frtb-panel-inner{
  padding: 16px 18px;
  font-family: inherit;
}

/* Make typical content inside look clean */
.frtb-panel-inner p:last-child{ margin-bottom: 0; }

/* Optional list wrapper */
.frtb-list{ display:block; }

/* Responsive: keep button full-width for small screens */
@media (max-width: 480px){
  .frtb-btn{ width: 100%; }
  .frtb-panel-inner{ padding: 14px 14px; }
}