/* =========================================================
   HUBDEXPAY THEME — clean, modern, brand-driven styling
   Paste this as assets/css/custom-style.css (or replace old)
   ========================================================= */

/* Brand tokens */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");

:root{
  --hx-primary: #6c5ce7;      /* HUBDEX purple */
  --hx-primary-600:#5a4fe3;
  --hx-accent:  #20c997;      /* teal accent */
  --hx-text:    #1e2433;      /* main text */
  --hx-muted:   #66718a;      /* secondary text */
  --hx-border:  rgba(16,24,40,.12);
  --hx-bg:      #ffffff;      /* page background */
  --hx-surface: #ffffff;      /* cards */
  --hx-shadow:  0 8px 24px rgba(16,24,40,.08);
  --hx-radius:  14px;
  --hx-grad: linear-gradient(135deg,var(--hx-primary) 0%, var(--hx-accent) 100%);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:0;
  background: var(--hx-bg);
  color: var(--hx-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

/* Links */
a{outline:none; text-decoration:none; color:var(--hx-primary)}
a:hover{color:var(--hx-primary-600)}

/* Utility – soft card */
.hx-card{
  background:var(--hx-surface);
  border:1px solid var(--hx-border);
  border-radius:var(--hx-radius);
  box-shadow:var(--hx-shadow);
}

/* ---------------------------------------------
   Single Post (blog detail) — refreshed look
   --------------------------------------------- */
.single-post01 .post-image img,
.single-post01 .post-navigation,
.single-post01 .comment-list img,
.sidebar .widget,
.sidebar .widget-tweeter small,
.sidebar .widget-twitter small,
#loader-wrapper,
.post-image img,
.single-post01 .post-item-description .post-meta,
.sidebar .form-inline .input-group,
.sidebar .post-thumbnail-entry,
.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed,
#blog .post-item.border > .post-item-wrap > .post-item-description,
#blog img,#blog audio,#blog iframe{
  width:100%;
}

.single-post01 .post-image img{height:auto;border-radius:var(--hx-radius)}
.single-post01 .post-item-description{
  font-size:16px; padding:24px 0; line-height:28px; color:var(--hx-text)
}
.single-post01 .post-item-description h2,
.single-post01 .post-item-description h2>a{
  font-family:Poppins, Inter, sans-serif;
  font-weight:700; font-size:36px; line-height:42px;
  margin:10px 0 12px; color:var(--hx-text)
}
@media (max-width:767px){
  .single-post01 .post-item-description h2,
  .single-post01 .post-item-description h2>a{font-size:26px;line-height:30px}
}

.single-post01 .post-item-description .post-meta{
  display:flex; flex-wrap:wrap; gap:16px;
  padding:12px 0; margin-bottom:26px; color:var(--hx-muted)
}
.single-post01 .post-item-description .post-meta a{color:var(--hx-muted)}
.single-post01 .post-item-description .post-meta i{margin-right:6px;color:var(--hx-primary)}

.single-post01 .blockquote{
  margin:0 0 20px 0; padding:18px 22px; font-style:italic;
  border-left:4px solid var(--hx-primary);
  background:linear-gradient(180deg, rgba(108,92,231,.06), rgba(32,201,151,.04));
  border-radius:10px
}
.single-post01 .post-tags{margin:24px 0 40px}
.single-post01 .post-tags a{
  display:inline-block; font-size:12px; padding:6px 12px; margin:0 8px 8px 0;
  border-radius:999px; background:rgba(108,92,231,.08); color:var(--hx-primary)
}

/* Post navigation */
.single-post01 .post-navigation{min-height:64px; padding:20px 0 0}
.single-post01 .post-navigation .post-next,
.single-post01 .post-navigation .post-prev{
  position:relative; height:44px; max-width:46%;
  font-size:15px; color:var(--hx-text)
}
.post-navigation .post-prev:before,
.post-navigation .post-next:after{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:'FontAwesome'; font-size:14px; opacity:.9; transition:.25s;
}
.post-navigation .post-prev:before{content:"\f053"; left:0; color:var(--hx-primary)}
.post-navigation .post-next:after{content:"\f054"; right:0; color:var(--hx-primary)}
.post-navigation .post-prev-title{padding-left:26px}
.post-navigation .post-next-title{padding-right:26px}
.post-navigation .post-all{top:32px; right:50%; width:12px; opacity:.6; font-size:24px}

/* Sidebar */
.sidebar{font-size:13px}
.sidebar .widget{
  margin-bottom:28px; padding:20px; border:1px solid var(--hx-border);
  border-radius:var(--hx-radius); background:var(--hx-surface); box-shadow:var(--hx-shadow)
}
.sidebar .widget-title{font-size:18px; line-height:24px; margin:2px 0 16px; font-weight:600; color:var(--hx-text)}
.sidebar .post-thumbnail-entry>img{
  height:60px; width:80px; margin-right:14px; border-radius:8px
}
.sidebar .post-thumbnail-entry .post-date,
.sidebar .post-thumbnail-entry .post-category{font-size:11px; color:var(--hx-muted)}
.sidebar .tags a{padding:6px 14px; border-radius:999px; margin:0 6px 8px 0; background:#f3f5f8; color:var(--hx-muted)}
.sidebar .tags a:hover{background:rgba(108,92,231,.12); color:var(--hx-primary)}

/* Buttons (e.g., .load-more a) */
.load-more a,
.btn, .submit{
  display:inline-block; padding:12px 22px; border-radius:999px; border:0;
  background:var(--hx-grad); color:#fff !important; font-weight:600;
  box-shadow:0 6px 18px rgba(108,92,231,.28);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.load-more a:hover,
.btn:hover, .submit:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(108,92,231,.34)}

/* Breadcrumb */
.breadcrumb{font-size:12px; padding:10px 0; background:transparent; color:var(--hx-muted)}
.breadcrumb a{color:var(--hx-muted)}
.breadcrumb li.active, .breadcrumb li:hover{color:var(--hx-text)}
.breadcrumb ol li+li::before, .breadcrumb ul li+li::before{content:"›"; margin:0 6px; color:var(--hx-muted)}

/* Blog list cards */
#blog .post-item.border > .post-item-wrap > .post-item-description{
  padding:24px; line-height:28px; border:1px solid var(--hx-border);
  border-radius:var(--hx-radius); background:var(--hx-surface); box-shadow:var(--hx-shadow)
}
#blog .post-item .post-meta-category,
#blog .post-item .post-meta-comments,
#blog .post-item .post-meta-date{top:-4px; font-size:12px; margin-right:8px; color:var(--hx-muted)}
#blog .post-item .post-item-description>h2,
#blog .post-item .post-item-description>h2>a{
  font-size:30px !important; line-height:36px !important; font-weight:600 !important; color:var(--hx-text)
}
#blog .post-item.border .post-meta-category{
  top:12px; right:12px; z-index:2; font-size:12px; padding:6px 12px;
  border-radius:999px; background:rgba(108,92,231,.12); color:var(--hx-primary)
}

/* Video helpers */
.fluid-width-video-wrapper{position:relative; padding-top:56.3%}
.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed{position:absolute; top:0; left:0; height:100%}

/* ---------------------------------------------
   FORM controls (contact/comment)
   --------------------------------------------- */
.single-post01 .form-control,
.widget-newsletter .form-control{
  border:1px solid var(--hx-border);
  border-radius:12px;
  padding:12px 14px; font-size:14px; line-height:20px;
  transition:border-color .18s ease, box-shadow .18s ease
}
.single-post01 .form-control:focus,
.widget-newsletter .form-control:focus{
  outline:0; border-color:rgba(108,92,231,.55);
  box-shadow:0 0 0 4px rgba(108,92,231,.16)
}
.form-gray-fields .btn{font-size:14px; padding:12px 20px}

/* ---------------------------------------------
   PRELOADER — branded triple-ring spinner
   --------------------------------------------- */
#loader-wrapper{
  position:fixed; inset:0; z-index:999999;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(108,92,231,.18), transparent 60%) ,
              #0b1020;
}
#loader{
  position:absolute; left:50%; top:50%;
  width:150px; height:150px; margin:-75px 0 0 -75px;
  border-radius:50%; border:3px solid transparent;
  border-top-color:var(--hx-primary); border-left-color:var(--hx-primary);
  animation:spin 1.4s linear infinite;
}
#loader:before, #loader:after{position:absolute; content:""; border-radius:50%; border:3px solid transparent}
#loader:before{
  inset:5px; border-top-color:var(--hx-accent); border-right-color:var(--hx-accent);
  animation:spin 2s linear infinite;
}
#loader:after{
  inset:15px; border-bottom-color:#ffffff; border-left-color:#ffffff;
  animation:spin 1s linear infinite reverse;
}
#loader-wrapper .loader-section{position:fixed; top:0; width:51%; height:100%; z-index:1000; transform:translateX(0)}
#loader-wrapper .loader-section.section-left{left:0; background:linear-gradient(90deg, rgba(108,92,231,.25), transparent)}
#loader-wrapper .loader-section.section-right{right:0; background:linear-gradient(270deg, rgba(32,201,151,.25), transparent)}
@keyframes spin{to{transform:rotate(360deg)}}

.loaded #loader-wrapper .loader-section.section-left{transform:translateX(-100%); transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}
.loaded #loader-wrapper .loader-section.section-right{transform:translateX(100%); transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}
.loaded #loader{opacity:0; transition:all .3s ease-out}
.loaded #loader-wrapper{visibility:hidden; transform:translateY(-100%); transition:all .3s 1s ease-out}

/* ---------------------------------------------
   Comments
   --------------------------------------------- */
.single-post01 .comments{padding:40px 0}
.single-post01 .comments .comment{padding:12px 0}
.single-post01 .comments .comment_number{font-size:20px; margin:0 0 30px; font-weight:600}
.single-post01 .comments .comment .image{width:64px; height:64px}
.single-post01 .comment-list img{height:auto; border-radius:50%}
.single-post01 .comments .comment .text{min-height:80px; padding:0 0 0 86px}
.single-post01 .comments .comment .text .name{font-size:22px; font-weight:600}
.single-post01 .comments .comment .comment_date{font-size:13px; color:var(--hx-muted)}
.single-post01 .comments .comment .text .comment-reply-link{font-size:12px; text-transform:uppercase; color:var(--hx-primary)}
.single-post01 .comment .comment{margin-left:90px}

/* ---------------------------------------------
   Responsive tweaks
   --------------------------------------------- */
@media (max-width:1199px){
  .sidebar .widget{margin-bottom:22px; padding-bottom:22px}
  .single-post01 .post-item-description{font-size:15px; line-height:26px}
}
@media (max-width:991px){
  .single-post01 .comments .comment .text{padding:0}
  .single-post01 .comments .comment .image{width:48px; height:48px; margin-right:14px}
  .single-post01 .comment .comment{margin-left:30px}
  .sidebar{margin-top:20px}
}
@media (max-width:767px){
  #blog .post-item.border > .post-item-wrap > .post-item-description{font-size:13px; line-height:22px}
  .single-post01 .blockquote{margin-left:0}
}
@media (max-width:575px){
  .single-post01 .comments .comment .text .name{font-size:18px}
  .single-post01 .post-item-description{font-size:14px; line-height:24px}
}