/* ============================================================
   BOTVIET FACEBOOK FANPAGE SIMPLE R56
   Scope: ONLY Facebook card Fanpage selector on /app/connections.
   Simple native select. No modal, no popover, no backdrop.
   ============================================================ */

/* Kill all legacy custom Fanpage opening UIs. */
.r54-fanpage-backdrop,
.r52-fanpage-menu.r54-fanpage-portal,
.r52-fanpage-menu.r55-fanpage-portal{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Keep all four platform cards stable. */
.connections-r42 .r42-platform-grid{
  align-items:stretch!important;
}
.connections-r42 .r42-platform-grid>.r44-platform-card{
  min-height:365px!important;
  height:365px!important;
  max-height:365px!important;
  overflow:hidden!important;
}
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook{
  display:block!important;
  min-height:365px!important;
  height:365px!important;
  max-height:365px!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}

/* Reserve exactly one compact row for Fanpage Auto. */
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook .r44-platform-copy{
  padding-bottom:94px!important;
}
.connections-r42 .r52-facebook-pages{
  position:absolute!important;
  z-index:18!important;
  left:20px!important;
  right:20px!important;
  top:auto!important;
  bottom:83px!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook .r44-card-actions{
  position:absolute!important;
  z-index:10!important;
  left:20px!important;
  right:20px!important;
  bottom:18px!important;
  width:auto!important;
  margin:0!important;
}

/* Hide R52 custom trigger/menu only; keep their DOM for real data/actions. */
.connections-r42 .r52-facebook-pages>.r52-pages-label,
.connections-r42 .r52-facebook-pages>.r52-fanpage-picker,
.connections-r42 .r52-facebook-pages>.r52-pages-reload{
  display:none!important;
}

/* Simple selector */
.connections-r42 .r56-fanpage-simple{
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  padding:5px 8px!important;
  border-radius:14px!important;
  border:1px solid rgba(48,154,255,.60)!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(38,136,255,.15),transparent 38%),
    linear-gradient(145deg,rgba(8,48,104,.98),rgba(5,30,70,.99))!important;
  box-shadow:
    inset 0 0 16px rgba(68,166,255,.035),
    0 8px 18px rgba(0,0,0,.12)!important;
  box-sizing:border-box!important;
}

.connections-r42 .r56-fanpage-icon{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  color:#fff!important;
  background:linear-gradient(145deg,#248cff,#1462d7)!important;
  box-shadow:0 0 14px rgba(34,123,255,.20)!important;
  font:900 23px/1 Arial,sans-serif!important;
}

.connections-r42 .r56-fanpage-field{
  position:relative!important;
  min-width:0!important;
}

.connections-r42 .r56-fanpage-label{
  display:block!important;
  margin:0 0 2px!important;
  color:#7f9fc4!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

.connections-r42 .r56-fanpage-select{
  appearance:auto!important;
  -webkit-appearance:menulist!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:25px!important;
  padding:0 22px 0 0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  color:#f6fbff!important;
  background:transparent!important;
  font-size:10px!important;
  line-height:25px!important;
  font-weight:850!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

.connections-r42 .r56-fanpage-select option{
  color:#0b2344!important;
  background:#fff!important;
  font-weight:650!important;
}

.connections-r42 .r56-fanpage-select:disabled{
  color:#8aa3c2!important;
  cursor:not-allowed!important;
}

.connections-r42 .r56-fanpage-state{
  min-width:52px!important;
  height:27px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 7px!important;
  border-radius:999px!important;
  color:#4ce5ba!important;
  background:rgba(7,169,125,.16)!important;
  border:1px solid rgba(42,218,169,.10)!important;
  font-size:7px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}

.connections-r42 .r56-fanpage-simple.is-saving .r56-fanpage-state{
  color:#64d7ff!important;
  background:rgba(28,116,207,.17)!important;
}

.connections-r42 .r56-fanpage-simple.is-empty .r56-fanpage-state{
  color:#f0c469!important;
  background:rgba(190,132,29,.13)!important;
}

@media(max-width:640px){
  .connections-r42 .r42-platform-grid>.r44-platform-card,
  .connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook{
    min-height:350px!important;
    height:350px!important;
    max-height:350px!important;
  }

  .connections-r42 .r52-facebook-pages{
    left:16px!important;
    right:16px!important;
    bottom:75px!important;
  }

  .connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook .r44-card-actions{
    left:16px!important;
    right:16px!important;
    bottom:15px!important;
  }

  .connections-r42 .r56-fanpage-simple{
    height:50px!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
  }

  .connections-r42 .r56-fanpage-icon{
    width:34px!important;
    height:34px!important;
    font-size:21px!important;
  }

  .connections-r42 .r56-fanpage-select{
    font-size:10.5px!important;
  }
}