/* ============================================================
   SocialBar — Global UI layer  (sb-ui.css)
   Maps the homepage's premium design language onto every legacy
   page (service / buy / account / auth / legal) by restyling the
   shared structures. Loaded after the legacy stylesheets so it
   intentionally overrides them. Uses redesign.css --sb-* tokens
   so light + dark themes both work.
   ============================================================ */

:root {
    --x-display: 'Clash Display', 'Space Grotesk', sans-serif;
    --x-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --x-grad: linear-gradient(100deg, #5127AF 0%, #431F93 42%, #BCED08 100%);
    --x-grad-soft: linear-gradient(135deg, rgba(81,39,175,.16), rgba(188,237,8,.12));
    --x-spring: cubic-bezier(.32,.72,0,1);
    --x-violet: #5127AF;
}

/* ---------- base typography for content pages ---------- */
body:not(.fullpage) {
    font-family: var(--x-body);
    color: var(--sb-ink);
    background: var(--sb-surface-2);
    -webkit-font-smoothing: antialiased;
}
body:not(.fullpage) p,
body:not(.fullpage) span,
body:not(.fullpage) li,
body:not(.fullpage) a,
body:not(.fullpage) label,
body:not(.fullpage) td,
body:not(.fullpage) th,
body:not(.fullpage) div { font-family: var(--x-body); }

/* ---------- neutralise the legacy purple header chrome ---------- */
#header-holder.inner-header,
#header-holder.about-header {
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.bg-custom, .obj-gradiant1, .obj-gradiant2, .bg-animation { display: none !important; }

/* main content wrappers breathe + sit on the page wash */
#ifeatures, #services, #message1, #message2, #page-head {
    background: transparent !important;
    position: relative;
}
#ifeatures { padding: clamp(26px, 4vw, 52px) 0 10px; }

/* ---------- section / page titles ---------- */
.row-title {
    font-family: var(--x-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    color: var(--sb-ink) !important;
    font-size: clamp(26px, 4vw, 44px) !important;
    line-height: 1.05 !important;
    text-align: center;
    margin: 8px 0 30px !important;
    text-transform: none !important;
}
.row-title::after {
    content: "";
    display: block;
    width: 56px; height: 4px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: var(--x-grad);
}

/* ============================================================
   BUY / SERVICE WIDGET
   ============================================================ */
/* premium double-bezel card for every .feature-box */
.feature-box {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--sb-shadow-md) !important;
    padding: 26px !important;
    transition: transform .5s var(--x-spring), box-shadow .5s var(--x-spring), border-color .5s var(--x-spring);
}
.feature-box:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg) !important; border-color: rgba(81,39,175,.35) !important; }

/* the nested .feature-box (select wrapper) should be flat, not a card-in-card */
.feature-box .feature-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 4px !important;
    transform: none !important;
}
.feature-box .feature-box:hover { transform: none; }

/* side benefit cards (leftside/rightside) */
.feature-icon { text-align: center; margin-bottom: 14px; }
.feature-icon img {
    width: 64px; height: 64px; object-fit: contain;
    padding: 14px; border-radius: 18px;
    background: var(--x-grad-soft);
}
.feature-title {
    font-family: var(--x-display) !important;
    font-weight: 600 !important;
    color: var(--sb-ink) !important;
    font-size: 17px !important;
    text-align: center;
    margin-bottom: 6px;
}
.feature-details { color: var(--sb-muted) !important; font-size: 14px; text-align: center; line-height: 1.55; }

/* the URL helper label + input area */
.feature-box .feature-title { text-align: left; margin-top: 10px; }
.feature-box .feature-title span { color: var(--sb-muted) !important; font-family: var(--x-body) !important; font-weight: 500 !important; font-size: 13px; }

/* select (service picker) */
#daysCombo,
select.form-control {
    width: 100%;
    font-family: var(--x-body);
    font-size: 15px;
    color: var(--sb-ink);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    padding: 14px 44px 14px 16px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235127AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    transition: border-color .3s var(--x-spring), box-shadow .3s var(--x-spring);
}
#daysCombo:focus, select.form-control:focus { outline: none; border-color: var(--x-violet); box-shadow: 0 0 0 4px rgba(81,39,175,.15); }

/* text / url / generic inputs */
.feature-box input.form-control,
#url, input.form-control, .form_group .form-control, textarea.form-control {
    width: 100%;
    font-family: var(--x-body);
    font-size: 15px;
    color: var(--sb-ink);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: none;
    transition: border-color .3s var(--x-spring), box-shadow .3s var(--x-spring);
}
input.form-control:focus, #url:focus, textarea.form-control:focus { outline: none; border-color: var(--x-violet); box-shadow: 0 0 0 4px rgba(81,39,175,.15); }
input.form-control::placeholder, textarea::placeholder { color: var(--sb-muted); opacity: .8; }

/* slider container + range input */
.slidecontainer { margin-top: 14px; }
.slidecontainer p { color: var(--sb-muted); font-size: 13px; }
.slidecontainer #minDiv, .slidecontainer #maxDiv { color: var(--sb-ink); font-weight: 700; }
input[type="range"].slider, input.slider#myRange {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px; border-radius: 999px; outline: none; margin: 10px 0;
    background: linear-gradient(90deg, #5127AF, #431F93 50%, #BCED08);
    cursor: pointer;
}
input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 3px solid var(--x-violet);
    box-shadow: 0 6px 16px -4px rgba(81,39,175,.7); cursor: pointer;
    transition: transform .2s var(--x-spring);
}
input[type="range"].slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"].slider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 3px solid var(--x-violet);
    box-shadow: 0 6px 16px -4px rgba(81,39,175,.7); cursor: pointer;
}
/* "I want" number input */
#demo_slider {
    font-family: var(--x-display); font-weight: 600;
    width: 120px; text-align: center;
    color: var(--sb-ink);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: 12px; padding: 8px 10px; margin-left: 8px;
    font-size: 16px;
}
.slidecontainer p.col-sm-12 { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-weight: 600; color: var(--sb-ink); }

/* price readout */
.feature-details p[style], #demo {
    font-family: var(--x-display) !important;
}
.feature-box .feature-details p { color: var(--sb-ink) !important; }
#demo { color: var(--x-violet) !important; font-weight: 700; }

/* ============================================================
   BUTTONS  (.ybtn family + bootstrap social)
   ============================================================ */
.ybtn, a.ybtn, button.ybtn, input.ybtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--x-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 13px 26px !important;
    cursor: pointer;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--sb-ink) !important;
    box-shadow: var(--sb-shadow-md);
    transition: transform .45s var(--x-spring), box-shadow .45s var(--x-spring), filter .3s var(--x-spring);
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.ybtn:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-lg); color: #fff !important; filter: brightness(1.04); }
.ybtn:active { transform: translateY(0) scale(.98); }
.ybtn-purple, .ybtn-pink, .ybtn-accent-color { background-image: var(--x-grad) !important; background-color: transparent !important; color: #fff !important; }
.ybtn-white { background: var(--sb-surface) !important; color: var(--sb-ink) !important; border: 1px solid var(--sb-border) !important; }
.ybtn-shadow { box-shadow: var(--sb-shadow-md); }
.form-button { margin-top: 16px; }

/* calculate button full nice width */
#calcBtn { width: 100%; }

/* bootstrap social login buttons (auth) */
.btn-social {
    border-radius: 14px !important;
    font-family: var(--x-body) !important;
    font-weight: 600 !important;
    padding: 13px 18px !important;
    border: 1px solid var(--sb-border) !important;
    box-shadow: var(--sb-shadow-sm);
    transition: transform .3s var(--x-spring), box-shadow .3s var(--x-spring);
}
.btn-social:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-md); }

/* ============================================================
   PAGE-HEAD (platform info) + MESSAGE bands
   ============================================================ */
/* page-head is seeded-empty on most pages; keep it transparent so an empty
   one is just whitespace, and content (when present) reads cleanly. */
#page-head.inner-page {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: clamp(8px, 2vw, 20px) 0 !important;
    margin: 0;
}
.long-incon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 24px; border-radius: 28px;
    background: #0a0912; box-shadow: var(--sb-shadow-md);
}
.long-incon img { max-width: 120px; width: 100%; height: auto; }
#page-head .text-center { text-align: center; }
.company-info-holder { color: var(--sb-ink); }
.company-info-holder h1, .company-info-holder h2, .company-info-holder h3 { font-family: var(--x-display); letter-spacing: -.02em; color: var(--sb-ink); }
.company-info-holder p, .company-info-holder li { color: var(--sb-muted); line-height: 1.7; }

#message1.message-area, #message2.message-area {
    background: #0a0912 !important;
    border-radius: 28px;
    padding: clamp(34px, 5vw, 60px) !important;
    margin: 30px 0;
    overflow: hidden; position: relative;
}
#message1.message-area::before, #message2.message-area::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 130% at 15% 0%, rgba(81,39,175,.5), transparent 60%), radial-gradient(50% 130% at 100% 100%, rgba(188,237,8,.4), transparent 60%);
    pointer-events: none;
}
#message1 .container, #message2 .container { position: relative; z-index: 1; }
.text-other-color1, .text-purple-light { color: rgba(255,255,255,.7) !important; font-size: 15px; font-weight: 500; }
.text-other-color2, .text-purple-dark { font-family: var(--x-display) !important; color: #fff !important; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.15; margin-top: 6px; }
.buttons-holder { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   FORMS (contact / ticket)
   ============================================================ */
.form_group, .form-group { margin-bottom: 16px; }
.form_group label, .form-group label { color: var(--sb-ink); font-weight: 600; font-size: 14px; margin-bottom: 6px; display: inline-block; }
.container.text-left { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 24px; box-shadow: var(--sb-shadow-md); padding: clamp(24px,4vw,44px) !important; margin-bottom: 30px; }
.container.text-left p, .container.text-left li { color: var(--sb-ink-soft); line-height: 1.75; }
.container.text-left h1, .container.text-left h2, .container.text-left h3, .container.text-left h4 { font-family: var(--x-display); color: var(--sb-ink); letter-spacing: -.01em; }
.page-address { color: var(--sb-muted); }
.page-address a { color: var(--x-violet); }

/* ============================================================
   TABLES (orders / cart / admin)
   ============================================================ */
.table-responsive { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 20px; box-shadow: var(--sb-shadow-md); padding: 8px; overflow-x: auto; }
.table { color: var(--sb-ink); margin: 0; }
.table > thead > tr > th, .table th {
    font-family: var(--x-body); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--sb-muted); border-bottom: 1px solid var(--sb-border) !important; padding: 14px 16px;
}
.table > tbody > tr > td, .table td { border-color: var(--sb-border) !important; padding: 14px 16px; vertical-align: middle; color: var(--sb-ink); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--sb-surface-2) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--sb-border) !important; }

/* alerts */
.alert { border-radius: 14px; border: 1px solid var(--sb-border); font-family: var(--x-body); }
.alert-success { background: rgba(101,214,146,.12); color: #1f8a52; border-color: rgba(101,214,146,.4); }
.alert-danger { background: rgba(255,92,120,.1); color: #c23b53; border-color: rgba(255,92,120,.35); }

/* ============================================================
   AUTH PAGES (.fullpage — signin / signup)
   ============================================================ */
body.fullpage {
    font-family: var(--x-body);
    background: #0a0912 !important;
    min-height: 100vh;
    color: #fff;
}
body.fullpage #form-section {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 30px 18px;
    position: relative; overflow: hidden;
}
body.fullpage #form-section::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(50% 60% at 80% 0%, rgba(81,39,175,.55), transparent 60%), radial-gradient(46% 60% at 5% 100%, rgba(188,237,8,.4), transparent 60%);
    pointer-events: none;
}
body.fullpage .website-logo { position: relative; z-index: 1; margin-bottom: 22px; }
body.fullpage .website-logo .logo {
    background-image: url(images/social-bar-logo.png);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: brightness(0) invert(1);
}
body.fullpage .row { position: relative; z-index: 1; width: 100%; max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; }
body.fullpage .info-slider-holder, body.fullpage .information-slider { display: none; }
body.fullpage .form-holder {
    width: 100%; max-width: 520px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 28px;
    box-shadow: 0 50px 100px -40px rgba(20,10,60,.8);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: clamp(26px, 4vw, 44px);
}
body.fullpage .menu-holder .main-links { list-style: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0; margin: 0 0 14px; }
body.fullpage .menu-holder .normal-link { color: rgba(255,255,255,.6); font-size: 13px; }
body.fullpage .menu-holder .sign-button { color: #fff; font-weight: 700; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 16px; font-size: 13px; text-decoration: none; }
body.fullpage .form-title {
    font-family: var(--x-display); color: #fff; letter-spacing: -.02em;
}
body.fullpage .signin-signup-form > .col .form-title:first-child,
body.fullpage .form-title[style*="center"] { font-size: 26px; }
body.fullpage .form-text input,
body.fullpage input[type="text"], body.fullpage input[type="email"],
body.fullpage input[type="password"], body.fullpage input[type="tel"], body.fullpage select {
    width: 100%;
    font-family: var(--x-body); font-size: 15px;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 14px 16px; margin-bottom: 14px;
}
body.fullpage .form-text input::placeholder { color: rgba(255,255,255,.5); }
body.fullpage .form-text input:focus, body.fullpage input:focus, body.fullpage select:focus { outline: none; border-color: rgba(81,39,175,.8); box-shadow: 0 0 0 4px rgba(81,39,175,.25); }
body.fullpage .ybtn, body.fullpage input.ybtn { width: 100%; background-image: var(--x-grad) !important; }
body.fullpage a { color: #c9bfff; }
body.fullpage .social-login { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
body.fullpage .social-login .btn-social { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; }
body.fullpage .hno-radiobtn, body.fullpage .text-only { color: rgba(255,255,255,.8); }

/* ---------- responsive tweaks for the buy widget ---------- */
@media (max-width: 992px) {
    .feature-box { padding: 20px !important; }
}
@media (max-width: 767px) {
    #page-head.inner-page .row { display: block; }
    .long-incon img { max-width: 160px; }
    .buttons-holder { flex-direction: column; }
    .buttons-holder .ybtn { width: 100%; }
}

/* ============================================================
   FIX-UPS  (benefit side cards, CTA band, auth layout)
   ============================================================ */
/* side benefit cards (inline-svg icon tiles) */
.feature-box.sb-benefit { text-align: center; margin-bottom: 18px; padding: 22px 18px !important; }
.feature-box.sb-benefit:last-child { margin-bottom: 0; }
.sb-benefit .feature-icon { display: flex; justify-content: center; margin-bottom: 12px; }
.sb-benefit .feature-icon svg {
    width: 24px; height: 24px; color: var(--x-violet);
    padding: 13px; box-sizing: content-box;
    background: var(--x-grad-soft); border-radius: 15px;
}
.sb-benefit .feature-title { font-size: 15.5px !important; margin-bottom: 5px; }
.sb-benefit .feature-details { font-size: 13px; }

/* CTA message band: vertically centre the two columns */
#message1 .row, #message2 .row { display: flex; flex-wrap: wrap; align-items: center; }
#message1 .buttons-holder, #message2 .buttons-holder { justify-content: flex-end; }
@media (max-width: 767px) {
    #message1 .buttons-holder, #message2 .buttons-holder { justify-content: flex-start; margin-top: 14px; }
}

/* ---- AUTH pages: stack the legacy 2-column form full width & centre ---- */
body.fullpage #form-section .row { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
body.fullpage .form-holder { margin: 0 auto; float: none; }
body.fullpage .signin-signup-form { display: flex; flex-wrap: wrap; }
body.fullpage .signin-signup-form .col {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    float: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* email/password form first, social second */
body.fullpage .signin-signup-form .col.loginDiv { order: 1; }
body.fullpage .signin-signup-form .col:has(.social-login-div) { order: 2; }
body.fullpage .signin-signup-form .social-login-div { margin-top: 4px; }
body.fullpage .form-text input, body.fullpage .form-items form { width: 100%; }
body.fullpage .social-login .btn-social { width: 100%; white-space: nowrap; text-align: center; }
body.fullpage .social-login-div .form-title { display: none; }
/* hide the empty   spacer .form-title blocks (keep the real page title in col-lg-12) */
body.fullpage .col-lg-6 > .form-title:first-child,
body.fullpage .form-items > .form-title:first-child { display: none; }
body.fullpage .loginDiv > a { display: inline-block; margin-top: 10px; }
/* divider between "Sign In to your account" and the form */
body.fullpage .signin-signup-form > .col:first-child .form-title { margin-bottom: 22px !important; }
/* top "Sign up" pill */
body.fullpage .menu-holder .main-links { justify-content: center; gap: 10px; margin-bottom: 18px; }
body.fullpage .website-logo .logo { margin: 0 auto; }

/* SEO key facts — extractable summary for search + AI crawlers */
.seo-facts {
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid var(--sb-border, rgba(255,255,255,.08));
    background: var(--sb-surface-2, rgba(255,255,255,.03));
}
.seo-facts__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 12px;
    color: var(--sb-text, #e8e6f0);
}
.seo-facts__list {
    margin: 0;
    padding: 0 0 0 18px;
    display: grid;
    gap: 8px;
}
.seo-facts__list li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sb-text-muted, #a8a3b8);
}
.seo-facts__updated {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--sb-text-muted, #8b849c);
}

.seo-prose {
    max-width: 72ch;
    color: var(--sb-text-muted, #a8a3b8);
    line-height: 1.65;
    font-size: 15px;
}
.seo-prose__title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--sb-text, #e8e6f0);
    margin: 0 0 12px;
}
.seo-prose p { margin: 0 0 14px; }
.seo-prose a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 2px; }
.seo-prose a:hover { color: #e9d5ff; }