/*
 * Countertrade Premium Action System
 * A consistent, institutional CTA language for every public page.
 */

:where(a,button).ct-premium-button{
  --ct-button-height:58px;
  --ct-button-icon:42px;
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  min-height:var(--ct-button-height)!important;
  padding:7px 7px 7px 24px!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  color:#fff!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  text-align:left!important;
  text-decoration:none!important;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:translate3d(0,0,0);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,background .28s ease,filter .28s ease!important;
}

:where(a,button).ct-premium-button::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-55%;
  bottom:-55%;
  left:-32%;
  width:28%;
  transform:translateX(-180%) rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  opacity:.72;
  pointer-events:none;
  transition:transform .72s cubic-bezier(.2,.75,.2,1);
}

:where(a,button).ct-premium-button:hover::before,
:where(a,button).ct-premium-button:focus-visible::before{
  transform:translateX(610%) rotate(16deg);
}

.ct-premium-button .ct-btn-label{
  position:relative;
  z-index:2;
  display:block;
  min-width:0;
}

.ct-premium-button .ct-btn-icon{
  position:relative;
  z-index:2;
  flex:0 0 var(--ct-button-icon);
  width:var(--ct-button-icon);
  height:var(--ct-button-icon);
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s ease,border-color .28s ease;
}

:where(a,button).ct-premium-primary{
  color:#fff!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,255,255,.28),transparent 35%),
    linear-gradient(118deg,#13bfe4 0%,#247ed8 51%,#6657dc 100%)!important;
  border-color:rgba(164,228,255,.34)!important;
  box-shadow:
    0 18px 42px rgba(18,105,199,.30),
    0 5px 14px rgba(0,8,30,.20),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,24,70,.22)!important;
}

.ct-premium-primary .ct-btn-icon{
  color:#fff;
  background:rgba(3,22,61,.23);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

:where(a,button).ct-premium-primary:hover,
:where(a,button).ct-premium-primary:focus-visible{
  transform:translateY(-3px)!important;
  filter:saturate(1.08) brightness(1.04);
  border-color:rgba(195,239,255,.52)!important;
  box-shadow:
    0 25px 56px rgba(23,117,214,.38),
    0 8px 20px rgba(0,8,30,.24),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,24,70,.22)!important;
}

.ct-premium-primary:hover .ct-btn-icon,
.ct-premium-primary:focus-visible .ct-btn-icon{
  transform:translateX(2px);
  background:rgba(3,22,61,.33);
  border-color:rgba(255,255,255,.34);
}

:where(a,button).ct-premium-secondary{
  color:#eef8ff!important;
  background:linear-gradient(180deg,rgba(13,43,76,.78),rgba(6,27,51,.88))!important;
  border-color:rgba(151,204,237,.24)!important;
  box-shadow:
    0 14px 34px rgba(0,8,26,.22),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.16)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.ct-premium-secondary .ct-btn-icon{
  color:#9be9fb;
  background:rgba(94,201,237,.08);
  border:1px solid rgba(146,218,244,.17);
}

:where(a,button).ct-premium-secondary:hover,
:where(a,button).ct-premium-secondary:focus-visible{
  transform:translateY(-3px)!important;
  color:#fff!important;
  background:linear-gradient(180deg,rgba(17,55,94,.92),rgba(8,34,63,.96))!important;
  border-color:rgba(114,218,245,.43)!important;
  box-shadow:
    0 22px 48px rgba(0,8,26,.30),
    0 0 0 1px rgba(64,196,234,.07),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.ct-premium-secondary:hover .ct-btn-icon,
.ct-premium-secondary:focus-visible .ct-btn-icon{
  transform:translateX(2px);
  color:#fff;
  background:rgba(70,198,235,.14);
  border-color:rgba(143,225,249,.29);
}

:where(a,button).ct-premium-light{
  color:#08213a!important;
  background:linear-gradient(180deg,#fff,#edf5fb)!important;
  border-color:rgba(255,255,255,.80)!important;
  box-shadow:
    0 18px 42px rgba(0,9,25,.20),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(22,75,112,.08)!important;
}

.ct-premium-light .ct-btn-icon{
  color:#fff;
  background:linear-gradient(135deg,#18bce1,#326fdb 58%,#6759db);
  border:1px solid rgba(26,108,190,.18);
  box-shadow:0 8px 18px rgba(25,111,199,.20);
}

:where(a,button).ct-premium-light:hover,
:where(a,button).ct-premium-light:focus-visible{
  transform:translateY(-3px)!important;
  color:#061a2f!important;
  background:#fff!important;
  box-shadow:
    0 25px 55px rgba(0,9,25,.26),
    inset 0 1px 0 #fff!important;
}

:where(a,button).ct-premium-button:active{
  transform:translateY(0) scale(.985)!important;
  transition-duration:.09s!important;
}

:where(a,button).ct-premium-button:focus-visible{
  outline:none!important;
  box-shadow:
    0 0 0 3px rgba(5,20,38,.92),
    0 0 0 6px rgba(90,217,245,.58),
    0 20px 48px rgba(19,111,205,.31)!important;
}

/* Header actions are quieter and more compact than conversion CTAs. */
.nav-actions .ct-premium-button,
.ctu-actions .ct-premium-button,
.rwu-nav-actions .ct-premium-button,
.wwc-nav-actions .ct-premium-button,
.site-header .ct-premium-button,
.ctu-header .ct-premium-button{
  --ct-button-height:48px;
  --ct-button-icon:34px;
  padding:6px 6px 6px 17px!important;
  gap:12px!important;
  border-radius:13px!important;
  font-size:10px!important;
  letter-spacing:.055em!important;
  box-shadow:
    0 12px 30px rgba(18,105,199,.24),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
}

.nav-actions .ct-premium-button .ct-btn-icon,
.ctu-actions .ct-premium-button .ct-btn-icon,
.site-header .ct-premium-button .ct-btn-icon,
.ctu-header .ct-premium-button .ct-btn-icon{
  border-radius:9px;
  font-size:14px;
}

/* The principal homepage actions receive a little more presence. */
.hero-actions .ct-premium-button{
  --ct-button-height:60px;
  --ct-button-icon:44px;
  min-width:224px;
  padding-left:25px!important;
  border-radius:17px!important;
  font-size:12px!important;
}

/* Compact actions used inside cards and forms. */
.plan-card .ct-premium-button,
.tier-card .ct-premium-button,
.source-button.ct-premium-button,
.card .ct-premium-button,
.contact-card .ct-premium-button{
  --ct-button-height:52px;
  --ct-button-icon:36px;
  padding:6px 6px 6px 18px!important;
  gap:12px!important;
  border-radius:14px!important;
  font-size:10.5px!important;
}

/* Secondary buttons on light sections must retain institutional contrast. */
.section-light .ct-premium-secondary,
.light-section .ct-premium-secondary,
.wwc-main .ct-premium-secondary,
body.light .ct-premium-secondary{
  color:#0a2844!important;
  background:linear-gradient(180deg,#fff,#eef4f8)!important;
  border-color:rgba(20,74,112,.18)!important;
  box-shadow:
    0 13px 32px rgba(19,55,84,.10),
    inset 0 1px 0 #fff!important;
}

.section-light .ct-premium-secondary .ct-btn-icon,
.light-section .ct-premium-secondary .ct-btn-icon,
.wwc-main .ct-premium-secondary .ct-btn-icon{
  color:#0b79aa;
  background:rgba(24,152,199,.08);
  border-color:rgba(24,133,180,.14);
}

.section-light .ct-premium-secondary:hover,
.light-section .ct-premium-secondary:hover,
.wwc-main .ct-premium-secondary:hover{
  color:#071f38!important;
  background:#fff!important;
  border-color:rgba(20,141,188,.34)!important;
  box-shadow:0 20px 44px rgba(19,55,84,.15)!important;
}

/* Full-width CTAs retain their block behavior. */
.ct-premium-button[style*="width:100%"],
.ctu-footer-action .ct-premium-button,
.footer-action .ct-premium-button{
  width:100%;
}

@media(max-width:720px){
  :where(a,button).ct-premium-button{
    --ct-button-height:56px;
    --ct-button-icon:40px;
    width:100%;
    max-width:100%;
    padding:7px 7px 7px 19px!important;
    font-size:11px!important;
    white-space:normal;
  }
  .hero-actions .ct-premium-button{min-width:0;width:100%}
  .nav-actions .ct-premium-button,
  .ctu-actions .ct-premium-button,
  .site-header .ct-premium-button,
  .ctu-header .ct-premium-button{width:auto;white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  :where(a,button).ct-premium-button,
  :where(a,button).ct-premium-button::before,
  .ct-premium-button .ct-btn-icon{transition:none!important}
  :where(a,button).ct-premium-button:hover{transform:none!important}
}

/* Legal-document utility actions remain compact enough for the document bar. */
.header-actions .ct-premium-button{
  --ct-button-height:42px;
  --ct-button-icon:30px;
  padding:5px 5px 5px 13px!important;
  gap:10px!important;
  border-radius:11px!important;
  font-size:9px!important;
  letter-spacing:.045em!important;
  box-shadow:0 9px 22px rgba(0,8,26,.18),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.header-actions .ct-premium-button .ct-btn-icon{border-radius:8px;font-size:12px}