/* ── Boosla identity applied on top of the Softec template ──────────────────
   Softec drives almost all of its colour through CSS custom properties, so
   remapping those (rather than touching the 17k-line style.css) reskins every
   "tp-btn-blue", accent span, and themed background in one place. */
:root {
    --tp-ff-body: 'IBM Plex Sans Arabic', sans-serif;
    --tp-ff-heading: 'IBM Plex Sans Arabic', sans-serif;
    --tp-ff-mont: 'IBM Plex Sans Arabic', sans-serif;
    --tp-ff-urban: 'IBM Plex Sans Arabic', sans-serif;
    --tp-ff-dm: 'IBM Plex Sans Arabic', sans-serif;

    --tp-common-blue: #1d54f8;   /* brand blue (logo), replaces Softec's indigo accent */
    --tp-common-blue-2: #051634; /* brand navy (logo), replaces Softec's dark blue */
    --tp-common-blue-3: #1640c4;
    --tp-common-blue-4: #051634;
    --tp-heading-primary: #051634;
    --tp-theme-1: #1d54f8;
    --tp-text-body: #4b5675;
}

body, .tp-btn-blue-sm, .tp-btn-blue-lg { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Softec also hardcodes its indigo (#5B6CFF / #600EE4 / #807DFB / #625FFB /
   #5138EE) on a handful of selectors instead of reading its variables.
   These are the ones the Boosla pages use, repointed at the brand blue. */
.tp-btn-blue-sm, .tp-btn-blue-lg { background: #1d54f8; }
.tp-btn-border { border-color: #1d54f8; }
.tp-service-sm-item:hover .tp-service-sm-icon svg { color: #1d54f8; }
.tp-footer__social-3 a:hover,
.footer-widget-3 .tp-footer__input button { background-color: #1d54f8; }
.tp-footer__input-inner .tp-footer__social-3 a:hover i { color: #1d54f8; }
.postbox__comment-input .inputText:focus,
.postbox__comment-input .textareaText:focus { box-shadow: 0px 1px 2px 1px rgba(32, 33, 36, 0.06), inset 0 0 0 2px #1d54f8; }
.tp-blog-category span { border-color: rgba(29, 84, 248, .1); }
.tp-hero-3-border-wrap .redius-shape-3 { background-color: #1d54f8; }
.tp-sales-feature ul li.purple-2::after { background: linear-gradient(90.27deg, #1d54f8 2.18%, rgba(29, 84, 248, 0) 99.77%); }

/* The btn components read var(--tp-common-blue) for their own dark chrome;
   the black/white "alt" variants below still hardcode #000/#fff in style.css,
   so only the plain (non-alt) buttons pick up the new teal automatically. */

/* ── Boosla product-screenshot frame (real app screenshots, not template art) ── */
.boosla-shot {
    display: block;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 40px 90px -30px rgba(5, 22, 52, .35);
    border: 1px solid rgba(5, 22, 52, .08);
}

/* ── Value cards replacing Softec's testimonial-author blocks (no fabricated
       customer identities — see home.blade.php for the reasoning) ── */
.boosla-value-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(29, 84, 248, .12);
    color: #1d54f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Pricing (redesigned section, per the approved brief) ───────────────── */
.boosla-pricing { padding: 90px 0 60px; }
.boosla-pricing__toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #eef2f7;
    border-radius: 999px;
    padding: .3rem;
    margin: 0 auto 3.75rem;
}
.boosla-pricing__toggle button {
    border: 0;
    background: transparent;
    padding: .55rem 1.4rem;
    border-radius: 999px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 800;
    font-size: .92rem;
    color: #5f6368;
    cursor: pointer;
    transition: all .2s ease;
}
.boosla-pricing__toggle button.is-active { background: #051634; color: #fff; }
.boosla-pricing__toggle .boosla-save-tag {
    font-size: .68rem;
    font-weight: 800;
    background: #e4f9ee;
    color: #0f7a45;
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-inline-start: .35rem;
}

.boosla-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; align-items: stretch; }
.boosla-plan {
    background: #fff;
    border: 1.5px solid #ebecf0;
    border-radius: 22px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.boosla-plan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(5, 22, 52, .25); }
.boosla-plan--popular { border-color: #1d54f8; box-shadow: 0 30px 70px -30px rgba(29, 84, 248, .35); }
.boosla-plan__tag {
    position: absolute;
    top: -.9rem;
    right: 2rem;
    background: #1d54f8;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    padding: .35rem .9rem;
    border-radius: 999px;
}
.boosla-plan h3 { font-size: 1.25rem; font-weight: 900; color: #051634; margin: 0 0 .5rem; }
.boosla-plan__desc { font-size: .85rem; color: #8894b3; margin: 0 0 1.5rem; min-height: 2.6em; }
.boosla-plan__price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .35rem; }
.boosla-plan__price strong { font-size: 2.6rem; font-weight: 900; color: #051634; line-height: 1; }
.boosla-plan__price span { font-size: .9rem; color: #8894b3; font-weight: 700; }
.boosla-plan__yearly-note { font-size: .78rem; color: #0f7a45; font-weight: 700; margin: 0 0 1.75rem; min-height: 1.2em; }
.boosla-plan__list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .85rem; flex: 1; }
.boosla-plan__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: #384263; font-weight: 600; }
.boosla-plan__list li i { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-top: .1rem; display: grid; place-items: center; border-radius: 50%; background: #e4f9ee; color: #0f7a45; font-size: .65rem; }
.boosla-plan__cta {
    display: block;
    text-align: center;
    padding: .9rem 1rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: .95rem;
    transition: all .2s ease;
    text-decoration: none;
}
.boosla-plan__cta--primary { background: #1d54f8; color: #fff; }
.boosla-plan__cta--primary:hover { background: #1640c4; color: #fff; }
.boosla-plan__cta--outline { background: #fff; color: #051634; border: 1.5px solid #dfe6f1; }
.boosla-plan__cta--outline:hover { border-color: #1d54f8; color: #1d54f8; }
.boosla-pricing__compare { text-align: center; margin-top: 2.5rem; }
.boosla-pricing__compare a { font-weight: 800; color: #1d54f8; }

@media (max-width: 991px) {
    .boosla-plans { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* ── Newsletter slot replaced with an honest "contact us" action (no
       subscribe endpoint exists in the app) ── */
.boosla-footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #1d54f8;
    color: #fff;
    padding: .8rem 1.4rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: .9rem;
}
.boosla-footer-contact-btn:hover { background: #1640c4; color: #fff; }

/* ── Arabic typography fixes ──────────────────────────────────────────────
   Softec's accent words (the <span> inside big headings) hardcode an italic
   Latin serif ("DM Serif Display") directly on the selector, not through a
   CSS variable — italic + a Latin-only serif breaks Arabic letter joining
   and reads as a garbled, disconnected mark. Same accent treatment is used
   on hero/section/price headings, so it needs fixing everywhere it appears,
   not just the homepage hero. Colour becomes the accent instead of a type
   swap, which is the RTL-safe equivalent of the same design intent. */
.tp-hero-title-3 span,
.tp-section-title-3 span,
.price-banner-title span,
.about-banner-title span,
.about-img-title span {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-style: normal;
    font-weight: 900;
    color: var(--tp-common-blue);
}

/* Tight negative letter-spacing and sub-1 line-height are tuned for Latin
   display type; on Arabic they crowd/clip ascenders and descenders and can
   make two-line headings look broken. Loosen both, site-wide. */
.tp-hero-title-3,
.tp-section-title-3,
.tp-section-title-4,
.tp-section-title-5,
.price-banner-title,
.about-banner-title,
.about-img-title,
.contact-inner-title-sm,
.sv-details-text-title,
.sv-details-title {
    letter-spacing: 0;
    line-height: 1.35;
}
/* Hero size lives in boosla-responsive.css (--bz-fs-hero): a fixed px
   value here used to override the template's mobile size on phones. */
.tp-hero-title-3.pb-5 { padding-bottom: 1rem !important; }
.tp-hero-title-3 i i.child-1 { margin-bottom: .1em; }

/* ── Hero: balance width/spacing instead of letting the heading and lead
       paragraph stretch full-bleed ── */
.tp-hero-title-box { max-width: 50rem; margin-inline: auto; }
.tp-hero-title-box p { max-width: 40rem; margin-inline: auto; margin-top: .5rem; }
.tp-hero-3-wrapper { margin-top: 2.5rem; }

/* ── Inner page hero (breadcrumb) ────────────────────────────────────────── */
.boosla-inner-hero { padding-top: 150px; padding-bottom: 90px; }
.boosla-inner-hero__crumb { color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 700; margin-bottom: 1rem; }
.boosla-inner-hero__crumb a { color: #fff; }
.boosla-inner-hero__crumb a:hover { color: var(--tp-common-blue); }
.boosla-inner-hero__crumb i { margin-inline: .4rem; font-size: .7rem; }
.boosla-inner-hero__title { margin-bottom: .75rem; }
.boosla-inner-hero__subtitle { color: rgba(255,255,255,.85); font-size: 1rem; margin: 0; }

/* ── Premium pricing card polish ─────────────────────────────────────────── */
.boosla-plan__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: rgba(29, 84, 248, .1);
    color: #1d54f8;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.boosla-plan--popular .boosla-plan__icon { background: #1d54f8; color: #fff; }
.boosla-plan--popular { transform: scale(1.03); }
.boosla-plan--popular:hover { transform: scale(1.03) translateY(-6px); }
.boosla-plan__price strong { font-size: 3rem; }
.boosla-plan__list li i { background: rgba(29, 84, 248, .12); color: #1d54f8; }

/* ── FAQ accordion (reused across pricing/resources pages) ──────────────── */
.boosla-faq { max-width: 46rem; margin-inline: auto; }

/* ── Floating labels: the template floats a label whenever its field is
       :valid — which an empty *optional* field always is, so "company" and
       "phone" looked filled in while empty. With placeholder=" " on the
       fields, an empty unfocused field keeps its label resting inside. ── */
.postbox__comment-input input:not(:focus):placeholder-shown ~ .floating-label {
    top: 50%;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    padding: 0;
}
.postbox__comment-input textarea:not(:focus):placeholder-shown ~ .floating-label-2 {
    top: 20px;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    padding: 0;
}

/* ── Contact form fields (Softec's own postbox__comment-input pattern) ──── */
.boosla-contact-form .postbox__comment-input,
.boosla-contact-form .postbox__select { margin-bottom: 1.4rem; }
.boosla-contact-form select { width: 100%; }
.boosla-contact-form .submit-btn { border: 0; cursor: pointer; }
.boosla-contact-form__notice {
    border-radius: 10px;
    padding: .85rem 1rem;
    font-weight: 800;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}
.boosla-contact-form__notice--ok { background: #e4f9ee; color: #0f7a45; border: 1px solid #bdeecf; }
.boosla-contact-form__notice--error { background: #fdeaea; color: #c0392b; border: 1px solid #f5c2c2; }

/* ── Prose (legal documents) ─────────────────────────────────────────────── */
.boosla-prose { max-width: 48rem; margin-inline: auto; line-height: 1.9; color: var(--tp-common-black); }
.boosla-prose h2 { font-size: 1.4rem; margin: 2.25rem 0 .75rem; }
.boosla-prose h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.boosla-prose ul { list-style: disc; padding-inline-start: 1.5rem; }
.boosla-prose ol { list-style: decimal; padding-inline-start: 1.5rem; }
.boosla-prose a { color: var(--tp-common-blue); }

/* ── Reusable inner-page CTA block (features/about/solutions closers) ──── */
.boosla-cta-block { border-radius: 28px; padding: 4.5rem 2rem; }
@media (max-width: 767px) { .boosla-cta-block { padding: 3rem 1.25rem; border-radius: 20px; } }

/* ── Alternating content sections (solutions/about split layout), reusing
       Softec's own tp-card/tp-sales section rhythm rather than a new pattern ── */
.boosla-split { padding: 5.5rem 0; }
.boosla-split--soft { background: #f7f9fb; }
.boosla-split__icon {
    width: 3.5rem; height: 3.5rem; border-radius: 14px;
    background: rgba(29,84,248,.1); color: var(--tp-common-blue);
    display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 1.5rem;
}
.boosla-split__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .85rem; }
.boosla-split__list li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; color: #384263; }
.boosla-split__list li i { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: .15rem; display: grid; place-items: center; border-radius: 50%; background: #e4f9ee; color: #0f7a45; font-size: .65rem; }
.boosla-split__art {
    aspect-ratio: 4/3; border-radius: 24px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(29,84,248,.12), rgba(5,22,52,.08));
}
.boosla-split__art i { font-size: 4rem; color: var(--tp-common-blue); opacity: .55; }

/* ── Value/team-less "about" cards ───────────────────────────────────────── */
.boosla-value-card { background: #fff; border: 1px solid #ebecf0; border-radius: 18px; padding: 2rem 1.5rem; text-align: center; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.boosla-value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(5,22,52,.25); }
.boosla-value-card i { font-size: 1.8rem; color: var(--tp-common-blue); margin-bottom: 1rem; display: block; }
.boosla-value-card h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: .5rem; }
.boosla-value-card p { font-size: .88rem; color: #5f6368; margin: 0; }

/* ── Contact info cards ──────────────────────────────────────────────────── */
.boosla-contact-card { background: #fff; border: 1px solid #ebecf0; border-radius: 16px; padding: 1.75rem; display: flex; align-items: flex-start; gap: 1rem; height: 100%; }
.boosla-contact-card i { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 12px; background: rgba(29,84,248,.1); color: var(--tp-common-blue); display: grid; place-items: center; font-size: 1.2rem; }
.boosla-contact-card h4 { font-size: .95rem; font-weight: 900; margin: 0 0 .3rem; }
.boosla-contact-card p, .boosla-contact-card a { font-size: .88rem; color: #5f6368; margin: 0; }

/* ── Resource tabs (illustrative filter, no JS needed to look intentional) ── */
.boosla-tabs { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 3rem; }
.boosla-tabs span { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid #ebecf0; font-size: .85rem; font-weight: 800; color: #5f6368; background: #fff; }
.boosla-tabs span.is-active { background: var(--tp-common-blue); border-color: var(--tp-common-blue); color: #fff; }

/* ── Inner-page header: the nav is styled with a fixed dark-text color
       (Softec's own .header-bottom__main-menu-3 rule), which only reads
       correctly on a light background. Home keeps the transparent header
       floating over its light hero, but every inner page's hero is the
       dark breadcrumb band — so give those headers a solid light backing
       instead of leaving them transparent over dark text-on-dark. ── */
.boosla-header--solid {
    background: #fff;
    box-shadow: 0 6px 24px rgba(5, 22, 52, .08);
}

/* ── Boosla logo (official PNGs, transparent bg): the horizontal lockup in
       the header and footer, the stacked lockup in the mobile menu. ── */
.boosla-logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
}
.boosla-logo-chip__img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.boosla-logo-chip--header { height: 72px; }
.boosla-logo-chip--header .boosla-logo-chip__img { height: 52px; }
.boosla-logo-chip--offcanvas { height: 112px; }
.boosla-logo-chip--offcanvas .boosla-logo-chip__img { height: 100px; }
.boosla-logo-chip--footer { height: 64px; }
.boosla-logo-chip--footer .boosla-logo-chip__img { height: 50px; }
@media (max-width: 575px) {
    .boosla-logo-chip--header { height: 60px; }
    .boosla-logo-chip--header .boosla-logo-chip__img { height: 40px; }
}

/* ── Pricing: trial line, savings note, feature comparison ──────────────── */
.boosla-pricing__trial { text-align: center; font-weight: 800; color: #0f7a45; margin: 0 0 1.5rem; font-size: .95rem; }
.boosla-pricing__trial i { margin-inline-end: .4rem; }
.boosla-plan__currency { font-size: 1rem !important; color: #051634 !important; font-weight: 800 !important; }
.boosla-plan__yearly-note { min-height: 2.4em; line-height: 1.5; }
.boosla-compare { margin-top: 4rem; }
.boosla-compare__title { text-align: center; font-size: 1.5rem; font-weight: 900; color: #051634; margin: 0 0 1.5rem; }
.boosla-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid #ebecf0; border-radius: 18px; background: #fff; }
.boosla-compare__scroll:focus-visible { outline: 2px solid #1d54f8; outline-offset: 2px; }
.boosla-compare__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; }
.boosla-compare__table th, .boosla-compare__table td { padding: .85rem 1rem; border-bottom: 1px solid #f0f2f6; text-align: center; color: #384263; }
.boosla-compare__table tbody tr:last-child th, .boosla-compare__table tbody tr:last-child td { border-bottom: 0; }
.boosla-compare__table thead th { font-weight: 900; color: #051634; font-size: 1rem; background: #f7f9fc; }
.boosla-compare__table thead th small { display: block; font-size: .7rem; font-weight: 800; color: #1d54f8; }
.boosla-compare__table tbody th { text-align: start; font-weight: 700; color: #051634; }
.boosla-compare__table .is-popular { background: rgba(29, 84, 248, .05); }
.boosla-compare__yes { color: #1d54f8; }
.boosla-compare__no { color: #b6bdcc; }
@media (max-width: 575px) {
    .boosla-compare__table th, .boosla-compare__table td { padding: .7rem .6rem; font-size: .82rem; }
}