/* ============================================================
   BOTVIET CONNECTION PLATFORM CARDS R44
   Scope: ONLY the 4 platform cards on /app/connections.
   Keeps R42 hero/sync board and R43 layout fix untouched.
   ============================================================ */

.connections-r42 .r42-platform-grid{
  gap:18px!important;
  align-items:stretch!important;
}

.connections-r42 .r42-platform-grid>.r44-platform-card{
  position:relative!important;
  min-height:305px!important;
  height:100%!important;
  padding:26px 24px 22px!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(49,141,246,.72)!important;
  background:
    radial-gradient(circle at 90% 12%,rgba(50,103,222,.17),transparent 32%),
    radial-gradient(circle at 15% 100%,rgba(0,147,255,.075),transparent 32%),
    linear-gradient(155deg,rgba(8,38,82,.985),rgba(5,25,60,.99))!important;
  box-shadow:
    inset 0 0 0 1px rgba(100,190,255,.035),
    inset 0 0 38px rgba(28,111,222,.045),
    0 16px 42px rgba(0,0,0,.22),
    0 0 16px rgba(22,115,255,.08)!important;
  transform:none!important;
  animation:none!important;
  transition:
    transform .30s cubic-bezier(.2,.8,.2,1),
    border-color .30s ease,
    box-shadow .30s ease!important;
}

.connections-r42 .r42-platform-grid>.r44-platform-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(115deg,transparent 0 34%,rgba(91,202,255,.055) 45%,transparent 56%);
  transform:translateX(-120%);
  animation:r44CardLight 8.4s ease-in-out infinite;
}

.connections-r42 .r42-platform-grid>.r44-platform-card:hover{
  transform:translateY(-5px) perspective(800px) rotateX(1.1deg)!important;
  border-color:#37a9ff!important;
  box-shadow:
    inset 0 0 0 1px rgba(107,217,255,.055),
    0 22px 46px rgba(0,0,0,.28),
    0 0 26px rgba(25,132,255,.20)!important;
}

.connections-r42 .r44-card-energy i{
  position:absolute;
  z-index:1;
  width:4px;height:4px;
  border-radius:50%;
  background:#62ecff;
  box-shadow:0 0 7px #52dfff,0 0 18px #3482ff;
  opacity:.55;
  animation:r44Spark 3.2s ease-in-out infinite;
}
.connections-r42 .r44-card-energy i:nth-child(1){left:18px;top:18px}
.connections-r42 .r44-card-energy i:nth-child(2){right:42px;top:31px;animation-delay:.9s}
.connections-r42 .r44-card-energy i:nth-child(3){right:22px;bottom:66px;animation-delay:1.7s}

.connections-r42 .r44-platform-head{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}

.connections-r42 .r44-platform-icon{
  width:82px!important;
  height:82px!important;
  display:grid!important;
  place-items:center!important;
  filter:drop-shadow(0 12px 17px rgba(0,0,0,.30))!important;
  animation:r44IconFloat 5.2s ease-in-out infinite!important;
}

.connections-r42 .r44-platform-icon .connection-platform-icon{
  width:82px!important;
  height:82px!important;
  border-radius:21px!important;
  border:1px solid rgba(124,214,255,.42)!important;
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.07),
    0 0 25px rgba(35,137,255,.28)!important;
}

.connections-r42 .r44-platform-icon .connection-platform-icon svg{
  width:52px!important;
  height:52px!important;
}

.connections-r42 .r44-status-pill{
  margin-top:9px!important;
  min-height:34px!important;
  padding:7px 13px!important;
  gap:8px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  border:1px solid rgba(117,177,242,.12)!important;
  background:rgba(83,112,157,.15)!important;
  backdrop-filter:blur(9px)!important;
}

.connections-r42 .r44-status-pill i{
  width:9px!important;height:9px!important;
}

.connections-r42 .r44-platform-card.is-connected .r44-status-pill{
  color:#53f1bf!important;
  background:rgba(0,153,117,.16)!important;
  border-color:rgba(30,222,170,.14)!important;
  box-shadow:0 0 18px rgba(8,189,143,.10)!important;
}

.connections-r42 .r44-platform-copy{
  position:relative;
  z-index:4;
  min-width:0;
  padding-top:18px;
}

.connections-r42 .r44-platform-copy h3{
  margin:0 0 11px!important;
  color:#fff!important;
  font-size:27px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
  text-shadow:0 5px 18px rgba(0,0,0,.20)!important;
}

.connections-r42 .r44-platform-copy p{
  margin:0!important;
  min-height:60px!important;
  max-width:92%!important;
  color:#b8c9e2!important;
  font-size:15px!important;
  line-height:1.52!important;
  font-weight:500!important;
}

.connections-r42 .r44-platform-copy .r42-account-live{
  margin-top:7px!important;
  color:#58e7cd!important;
  font-size:10px!important;
}

.connections-r42 .r42-platform-watermark{
  right:-28px!important;
  bottom:60px!important;
  width:145px!important;
  height:145px!important;
  opacity:.085!important;
  transform:rotate(-9deg)!important;
}

.connections-r42 .r42-platform-watermark .connection-platform-icon{
  width:145px!important;height:145px!important;
}
.connections-r42 .r42-platform-watermark .connection-platform-icon svg{
  width:122px!important;height:122px!important;
}

/* Equal two-button row across all four cards */
.connections-r42 .r44-card-actions{
  position:absolute;
  z-index:5;
  left:20px;
  right:20px;
  bottom:19px;
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(118px,.82fr);
  gap:10px;
  align-items:stretch;
}

.connections-r42 .r44-card-actions .r42-platform-cta,
.connections-r42 .r44-card-actions .r44-disconnect-cta{
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:52px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border-radius:14px!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

.connections-r42 .r44-card-actions .r44-primary-cta{
  color:#fff!important;
  border:1px solid #35bfff!important;
  background:
    linear-gradient(100deg,#137bff 0%,#228dff 47%,#476eff 100%)!important;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.10),
    0 0 18px rgba(30,138,255,.30),
    0 10px 20px rgba(0,65,170,.18)!important;
}

.connections-r42 .r44-platform-card.is-connected .r44-primary-cta{
  color:#42d7ff!important;
  border-color:#168dff!important;
  background:
    linear-gradient(100deg,rgba(6,48,105,.98),rgba(7,38,86,.98))!important;
  box-shadow:
    inset 0 0 15px rgba(50,145,255,.055),
    0 0 16px rgba(22,123,255,.12)!important;
}

.connections-r42 .r44-card-actions .r44-disconnect-cta{
  color:#b8d0ee!important;
  border:1px solid rgba(61,139,232,.58)!important;
  background:
    linear-gradient(145deg,rgba(8,42,91,.98),rgba(7,28,66,.98))!important;
  box-shadow:inset 0 0 14px rgba(54,139,255,.04)!important;
}

.connections-r42 .r44-card-actions .r44-disconnect-cta:not(.is-disabled):hover{
  color:#fff!important;
  border-color:#ff6884!important;
  background:linear-gradient(145deg,rgba(104,27,52,.82),rgba(53,21,48,.96))!important;
  box-shadow:0 0 18px rgba(255,66,102,.14)!important;
}

.connections-r42 .r44-card-actions .r44-disconnect-cta.is-disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  filter:saturate(.55)!important;
}

.connections-r42 .r44-card-actions .r42-platform-cta:hover:not(:disabled),
.connections-r42 .r44-card-actions .r44-disconnect-cta:hover:not(:disabled){
  transform:translateY(-2px)!important;
  filter:brightness(1.08)!important;
}

.connections-r42 .r44-unlink-icon{
  font-size:19px;
  color:#78b8ff;
  line-height:1;
}

/* Provider-specific premium glow */
.connections-r42 .r44-platform-card.r42-facebook .r44-platform-icon{
  filter:drop-shadow(0 0 15px rgba(42,126,255,.35))!important;
}
.connections-r42 .r44-platform-card.r42-tiktok .r44-platform-icon,
.connections-r42 .r44-platform-card.r42-tiktok_shop .r44-platform-icon{
  filter:drop-shadow(0 0 15px rgba(31,215,242,.18)) drop-shadow(0 0 12px rgba(255,46,114,.10))!important;
}
.connections-r42 .r44-platform-card.r42-shopee .r44-platform-icon{
  filter:drop-shadow(0 0 16px rgba(255,95,50,.28))!important;
}

/* R43 prevents provider card classes from inheriting orbit offsets. Keep it explicit here too. */
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-facebook,
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-tiktok,
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-tiktok_shop,
.connections-r42 .r42-platform-grid>.r44-platform-card.r42-shopee{
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
}

@keyframes r44CardLight{
  0%,30%{transform:translateX(-130%)}
  63%,100%{transform:translateX(420%)}
}
@keyframes r44Spark{
  0%,100%{opacity:.2;transform:scale(.7)}
  50%{opacity:.9;transform:scale(1.35)}
}
@keyframes r44IconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(prefers-reduced-motion:reduce){
  .connections-r42 .r44-platform-card::after,
  .connections-r42 .r44-card-energy i,
  .connections-r42 .r44-platform-icon{
    animation:none!important;
  }
}

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

@media(max-width:640px){
  .connections-r42 .r42-platform-grid>.r44-platform-card{
    min-height:300px!important;
    padding:22px 18px!important;
  }

  .connections-r42 .r44-platform-icon{
    width:68px!important;height:68px!important;
  }
  .connections-r42 .r44-platform-icon .connection-platform-icon{
    width:68px!important;height:68px!important;border-radius:18px!important;
  }
  .connections-r42 .r44-platform-icon .connection-platform-icon svg{
    width:43px!important;height:43px!important;
  }

  .connections-r42 .r44-platform-copy h3{font-size:23px!important}
  .connections-r42 .r44-platform-copy p{font-size:13px!important;min-height:54px!important}

  .connections-r42 .r44-card-actions{
    left:16px;right:16px;bottom:16px;
    grid-template-columns:1.2fr .8fr;
    gap:8px;
  }
  .connections-r42 .r44-card-actions .r42-platform-cta,
  .connections-r42 .r44-card-actions .r44-disconnect-cta{
    height:48px!important;
    font-size:11px!important;
    padding:0 8px!important;
  }
}