/* CPS Social Share - Frontend */
.cps-ss-wrap{margin:32px 0;}
.cps-ss-align-left{text-align:left;}
.cps-ss-align-center{text-align:center;}
.cps-ss-align-right{text-align:right;}

.cps-ss-trigger-btn{
  appearance:none;
  border:var(--cps-ss-trigger-bw,1px) solid var(--cps-ss-trigger-bc,#e7e7f0);
  background:var(--cps-ss-trigger-bg,#fff);
  color:var(--cps-ss-trigger-text,#3a2ca0);
  padding:var(--cps-ss-trigger-py,12px) var(--cps-ss-trigger-px,16px);
  border-radius:var(--cps-ss-trigger-radius,12px);
  font-size:var(--cps-ss-trigger-fs,16px);
  font-weight:var(--cps-ss-trigger-fw,700);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cps-ss-trigger-btn:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);}
.cps-ss-trigger-btn:active{transform:scale(.99);}
.cps-ss-trigger-btn:focus{outline:2px solid rgba(58,44,160,.25); outline-offset:3px;}

.cps-ss-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:999999;
  align-items:center;
  justify-content:center;
  padding:var(--cps-ss-overlay-padding,24px);
  box-sizing:border-box;
}
.cps-ss-modal.is-open{display:flex;}
.cps-ss-overlay{
  position:absolute;
  inset:0;
  background:var(--cps-ss-overlay-bg,#2b2b2b);
  opacity:var(--cps-ss-overlay-opacity,.35);
}
.cps-ss-plate{
  position:relative;
  width:var(--cps-ss-plate-w,92%);
  max-width:var(--cps-ss-plate-maxw,1120px);
  background:var(--cps-ss-plate-bg,#f7f5fa);
  border:var(--cps-ss-plate-border-w,0px) solid var(--cps-ss-plate-border-c,#e7e7f0);
  border-radius:var(--cps-ss-plate-radius,18px);
  padding:var(--cps-ss-plate-pad,44px);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  box-sizing:border-box;
  z-index:1;
  min-height:520px;
  display:flex;
  flex-direction:column;
}
.cps-ss-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  font-size:34px;
  line-height:44px;
  cursor:pointer;
  color:rgba(92,92,120,.7);
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.cps-ss-close:hover{background:rgba(255,255,255,.6); color:rgba(58,44,160,.85);}
.cps-ss-decor{
  position:absolute;
  height:auto;
  max-width:50%;
  pointer-events:none;
  user-select:none;
}
.cps-ss-title{
  margin:86px 0 var(--cps-ss-title-icon-gap,0px);
  padding:0 12px;
  text-align:var(--cps-ss-title-align,center);
  color:var(--cps-ss-title-color,#3a2ca0);
  font-size:var(--cps-ss-title-size,44px);
  font-weight:var(--cps-ss-title-weight,800);
  letter-spacing:-.01em;
  font-family:var(--cps-ss-title-font,inherit);
}
@media (max-width:782px){
  .cps-ss-plate{min-height:auto; padding:28px;}
  .cps-ss-title{margin-top:56px; font-size:clamp(24px,6vw,34px);}
}

.cps-ss-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--cps-ss-icon-gap,22px);
}
.cps-ss-icons--top{margin-top:22px; margin-bottom:auto;}
.cps-ss-icons--center{margin-top:auto; margin-bottom:auto;}
.cps-ss-icons--bottom{margin-top:auto; margin-bottom:44px;}

.cps-ss-icon{
  width:var(--cps-ss-icon-circle,92px);
  height:var(--cps-ss-icon-circle,92px);
  border-radius:var(--cps-ss-icon-radius,999px);
  background:var(--cps-ss-icon-bg,#fff);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--cps-ss-icon-color,#7d79d8);
  text-decoration:none;
  transition:transform .08s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.cps-ss-icon:hover{background:var(--cps-ss-icon-bg-hover,#f0eeff); transform:translateY(-1px);}
.cps-ss-icon:active{transform:translateY(0);}
.cps-ss-icon svg{
  width:var(--cps-ss-icon-size,26px);
  height:var(--cps-ss-icon-size,26px);
  display:block;
}
.cps-ss-icon img{
  width:var(--cps-ss-icon-size,26px);
  height:var(--cps-ss-icon-size,26px);
  object-fit:contain;
  display:block;
}

.cps-ss-copy{
  margin-top:auto;
  padding-top:22px;
}
.cps-ss-copy-label{
  color:var(--cps-ss-copy-label-color,#3a2ca0);
  font-size:var(--cps-ss-copy-label-size,14px);
  font-weight:var(--cps-ss-copy-label-weight,700);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.cps-ss-copy-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--cps-ss-copy-bg,#fff);
  border:var(--cps-ss-copy-border-w,1px) solid var(--cps-ss-copy-border-c,#e7e7f0);
  border-radius:var(--cps-ss-copy-radius,12px);
  padding:var(--cps-ss-copy-pad-y,18px) var(--cps-ss-copy-pad-x,22px);
}
.cps-ss-copy-input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  outline:none;
  color:var(--cps-ss-url-color,#4b4b63);
  font-size:var(--cps-ss-url-size,20px);
}
.cps-ss-copy-btn{
  border:none;
  background:transparent;
  padding:8px;
  border-radius:12px;
  cursor:pointer;
  color:var(--cps-ss-copy-icon-color,#3a2ca0);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}
.cps-ss-copy-btn:hover{background:rgba(240,238,255,.9);}
.cps-ss-copy-btn svg{
  width:var(--cps-ss-copy-icon-size,22px);
  height:var(--cps-ss-copy-icon-size,22px);
  display:block;
}
.cps-ss-copy-btn img{
  width:var(--cps-ss-copy-icon-size,22px);
  height:var(--cps-ss-copy-icon-size,22px);
  object-fit:contain;
  display:block;
}

.cps-ss-toast{
  margin-top:12px;
  font-size:14px;
  color:rgba(75,75,99,.9);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.cps-ss-toast.is-show{
  opacity:1;
  transform:translateY(0);
}