/* =========================================================
   HUBDEXPAY POLISH PACK – put this at the very end
   ========================================================= */

/* Brand helpers */
:root{
  --hx-grad: linear-gradient(135deg, var(--e-global-color-secondary) 0%, var(--e-global-color-accent) 100%);
  --hx-shadow-sm: 0 6px 16px rgba(0,0,0,.08);
  --hx-shadow-lg: 0 16px 40px rgba(0,0,0,.12);
}

/* 1) Global links — underline reveal */
a:not(.btn):not(.button_text):not(.dropdown-item):not(.submit){
  position: relative; transition: color .2s ease;
}
a:not(.btn):not(.button_text):not(.dropdown-item):not(.submit)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--e-global-color-accent); transition: width .25s ease;
}
a:not(.btn):not(.button_text):not(.dropdown-item):not(.submit):hover::after{ width:100%; }

/* 2) Unified buttons (primary actions everywhere) */
.button_text,
.need-section .service1 .btn,
.message-section .message_content .submit,
.blog-section .blog-box .button,
.coming-soon .content .button,
.testimonial-section .content .button-text,
.navbar-nav .nav-item .signup{
  border: none;
  background: var(--hx-grad);
  box-shadow: var(--hx-shadow-sm);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.button_text:hover,
.need-section .service1 .btn:hover,
.message-section .message_content .submit:hover,
.blog-section .blog-box .button:hover,
.coming-soon .content .button:hover,
.testimonial-section .content .button-text:hover,
.navbar-nav .nav-item .signup:hover{
  filter: brightness(1.02);
  box-shadow: var(--hx-shadow-lg);
  transform: translateY(-2px);
}

/* 3) Inputs & textareas — crisp focus ring */
.message-section .message_content input,
.message-section .message_content textarea,
.login-form .login-card .input-field,
.sign-up-form .login-card .select-option{
  transition: border-color .15s ease, box-shadow .15s ease;
}
.message-section .message_content input:focus,
.message-section .message_content textarea:focus,
.login-form .login-card .input-field:focus,
.sign-up-form .login-card .select-option:focus{
  border-color: var(--e-global-color-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-global-color-accent) 20%, transparent);
  outline: none;
}

/* Placeholder color a bit softer */
.form_style::placeholder,
.message-section .message_content input::placeholder,
.message-section .message_content textarea::placeholder{
  color: #b9b9b9;
}

/* 4) Card hover – consistent lift */
.service-section .services-data .service-box,
.plan .pricing,
.member-section .team-box,
.blog-section .blog-box{
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
.service-section .services-data .service-box:hover,
.plan .pricing:hover,
.member-section .team-box:hover,
.blog-section .blog-box:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--hx-shadow-lg);
}

/* 5) Navbar – cleaner contrast on hover/active */
.navbar-nav .nav-item a:hover,
.navbar-nav .active > a{
  color: var(--e-global-color-accent) !important;
}

/* 6) Sub-banner crumb chip */
.sub-banner .box{
  border: 1px solid #eef1f4;
  box-shadow: var(--hx-shadow-sm);
}

/* 7) Map card – subtle effect only on hover */
.message-section .map iframe{
  transition: filter .25s ease, box-shadow .25s ease;
  filter: grayscale(0);
}
.message-section .map iframe:hover{
  box-shadow: var(--hx-shadow-lg);
  filter: grayscale(18%);
}

/* 8) Tiny utility badges (optional) */
.badge-pill{
  display:inline-block; padding:.35rem .75rem; border-radius:999px;
  background: var(--hx-grad); color:#fff; font:600 12px/1 'Jost',sans-serif;
}

/* 9) Minimal spinner you can drop anywhere
   <div class="hx-spinner"></div>  */
.hx-spinner{
  width:42px; height:42px; border-radius:50%;
  border:3px solid transparent; border-top-color: var(--e-global-color-secondary);
  border-right-color: var(--e-global-color-accent);
  animation: hx-spin .8s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
@keyframes hx-spin{ to{ transform: rotate(360deg); }}

/* 10) Smooth image lift on icon blocks */
.what-we-do .img img,
.need-section .img img,
.manage-section .manage-content .icon img,
.benefit-section .benefit-content .icon img{
  transition: transform .2s ease;
}
.what-we-do .img:hover img,
.need-section .img:hover img,
.manage-section .manage-content .icon:hover img,
.benefit-section .benefit-content .icon:hover img{
  transform: translateY(-6px);
}