/********** Smart Host — Brand & Template CSS (v2, Hostinger-inspired) **********/
/*
  Palette derived directly from the Smart Host logo:
  Blue   #1B74F9  primary actions, links
  Cyan   #1CC7ED  accent, gradient partner, highlights
  Navy   #011735  ink, dark surfaces (footer, overlays)
  Paper  #F5F8FC  page background
  Fonts: Space Grotesk (display), Inter (body), JetBrains Mono (data/prices)
*/
:root {
    --primary: #1B74F9;
    --primary-hover: #4C90FA;
    --primary-active: #145CC7;
    --primary-shadow: 27, 116, 249;
    --accent: #1CC7ED;
    --accent-shadow: 28, 199, 237;
    --secondary: #1CC7ED;
    --secondary-hover: #4CD3EF;
    --secondary-active: #16A3C4;
    --secondary-shadow: 28, 199, 237;
    --dark: #011735;
    --dark-2: #052247;
    --dark-hover: #0B2E58;
    --light: #F5F8FC;
    --ink-soft: #52607D;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 14px;
}

body {
    font-family: var(--font-body);
    color: var(--dark);
    background: #FFFFFF;
}

a { text-decoration: none; }

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
    background: var(--light) !important;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
#spinner .spinner-border { color: var(--primary) !important; }



/*** Heading & Type ***/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--dark);
    letter-spacing: -.01em;
}
h1, h2, .fw-bold { font-weight: 700 !important; }
h3, h4, .fw-semi-bold { font-weight: 600 !important; }
h5, h6, .fw-medium { font-weight: 500 !important; }
.font-mono { font-family: var(--font-mono); }
.text-ink-soft { color: var(--ink-soft); }

/*** Buttons ***/
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 8px;
    transition: .3s;
}
.btn.btn-primary, .btn.btn-secondary, .btn.btn-gradient { color: #FFFFFF; }

.btn-gradient {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    border: none;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px -8px rgba(27, 116, 249, .55);
}
.btn-gradient:hover {
    filter: brightness(1.07);
    color: #FFFFFF !important;
    box-shadow: 0 12px 28px -6px rgba(27, 116, 249, .65);
    transform: translateY(-1px);
}

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 8px;
}
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/* Bootstrap utility color overrides (compiled hex is baked into bootstrap.min.css) */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.link-primary { color: var(--primary) !important; }

.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
    color: #FFFFFF; background-color: var(--primary); border-color: var(--primary);
}
.btn-primary:hover { color: #FFFFFF; background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #FFFFFF; background-color: var(--primary-hover); border-color: var(--primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--primary-shadow), .5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary,
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #FFFFFF; background-color: var(--primary-active); border-color: var(--primary-active);
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { color: #FFFFFF; background-color: var(--primary); border-color: var(--primary); }
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary,
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
    color: #FFFFFF; background-color: var(--primary); border-color: var(--primary);
}

.bg-secondary { background-color: var(--secondary) !important; }
.text-secondary { color: var(--secondary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.link-secondary { color: var(--secondary) !important; }

.btn-secondary, .btn-secondary:disabled, .btn-secondary.disabled {
    color: #FFFFFF; background-color: var(--secondary); border-color: var(--secondary);
}
.btn-secondary:hover { color: #FFFFFF; background-color: var(--secondary-hover); border-color: var(--secondary-hover); }
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
    color: #FFFFFF; background-color: var(--secondary-hover); border-color: var(--secondary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--secondary-shadow), .5);
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary,
.btn-secondary:active, .btn-secondary.active {
    color: #FFFFFF; background-color: var(--secondary-active); border-color: var(--secondary-active);
}
.btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); }
.btn-outline-secondary:hover { color: #FFFFFF; background-color: var(--secondary); border-color: var(--secondary); }

.form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary) !important; }
.page-link { color: var(--primary) !important; }
.page-item.active .page-link { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.progress-bar { background-color: var(--primary) !important; }
.list-group-item.active { background-color: var(--primary) !important; border-color: var(--primary) !important; }


/*** Language switch ***/
.lang-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 3px;
    margin-left: 20px;
}
.sticky-top.navbar-light .lang-switch { background: #EEF2FA; }
.lang-switch button {
    border: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 5px 12px;
    border-radius: 20px;
    color: rgba(255,255,255,.75);
    transition: .25s;
}
.sticky-top.navbar-light .lang-switch button { color: var(--ink-soft); }
.lang-switch button.active {
    background: #FFFFFF;
    color: var(--dark) !important;
}
@media (max-width: 991.98px) {
    .lang-switch { margin: 12px 0; background: #EEF2FA; }
    .lang-switch button { color: var(--ink-soft); }
}

/*** Navbar ***/
.navbar-brand img.brand-logo { height: 42px; transition: .5s; }
.sticky-top.navbar-light .navbar-brand img.brand-logo { height: 34px; }

.navbar-light .navbar-nav .nav-link {
    position: relative;
    margin-left: 25px;
    padding: 35px 0;
    font-size: 14px;
    font-family: var(--font-body);
    color: #FFFFFF !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .03em;
    outline: none;
    transition: .5s;
}
.sticky-top.navbar-light .navbar-nav .nav-link { padding: 20px 0; color: var(--dark) !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--accent) !important; }
.sticky-top.navbar-light .navbar-nav .nav-link:hover,
.sticky-top.navbar-light .navbar-nav .nav-link.active { color: var(--primary) !important; }

@media (max-width: 991.98px) {
    .sticky-top.navbar-light { position: relative; background: #FFFFFF; }
    .navbar-light .navbar-collapse { margin-top: 15px; border-top: 1px solid #DDDDDD; }
    .navbar-light .navbar-nav .nav-link, .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0; margin-left: 0; color: var(--dark) !important;
    }
    .navbar-brand img.brand-logo { height: 34px; }
}
@media (min-width: 992px) {
    .navbar-light { position: absolute; width: 100%; top: 0; left: 0; z-index: 999; }
    .sticky-top.navbar-light { position: fixed; background: #FFFFFF; box-shadow: 0 6px 24px rgba(1, 23, 53, .08); }
}


/*** Hero (photo background) ***/
.hero-photo {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(1,23,53,.94) 0%, rgba(1,23,53,.88) 35%, rgba(27,116,249,.72) 100%);
}
.hero-photo .container { position: relative; z-index: 2; }

.hero-header {
    background: url(../img/bg-bottom-hero.png) center bottom -1px no-repeat;
    background-size: 100% auto;
}
.hero-header h1.display-4 { font-family: var(--font-display); }
.hero-header h1 span, .price { font-family: var(--font-mono); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }

.badge-pill-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 6px 16px;
    border-radius: 30px;
}
.badge-pill-soft .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(28,199,237,.6);
    animation: status-pulse 2.4s infinite;
}
@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(28,199,237,.55); }
    70% { box-shadow: 0 0 0 6px rgba(28,199,237,0); }
    100% { box-shadow: 0 0 0 0 rgba(28,199,237,0); }
}

/*** Section Title ***/
.section-title::before {
    position: absolute; content: ""; width: 60px; height: 11px; bottom: 0; left: 0;
    border-top: 1px solid #B9C3D6; border-bottom: 1px solid #B9C3D6;
}
.section-title::after {
    position: absolute; content: ""; width: 90px; height: 1px; bottom: 5px; left: 0;
    background: var(--primary);
}
.section-title.text-center::before { left: 50%; margin-left: -30px; }
.section-title.text-center::after { width: 120px; left: 50%; margin-left: -60px; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 600;
}

/*** Cards (generic, hostinger-like soft shadow) ***/
.soft-card {
    background: #FFFFFF;
    border: 1px solid #EAEEF6;
    border-radius: var(--radius);
    box-shadow: 0 14px 34px -18px rgba(1, 23, 53, .18);
    transition: .3s;
}
.soft-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(1, 23, 53, .22); }

/*** Domain Search ***/
.domain-search-box {
    background: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: 0 20px 45px -20px rgba(1, 23, 53, .25);
    padding: 10px;
}
.domain-search-box input.form-control {
    border: none; height: 60px; font-size: 16px; padding-left: 24px;
}
.domain-search-box input.form-control:focus { box-shadow: none; }
.domain-search-box .btn { height: 60px; padding: 0 34px; }
.tld-price a { font-family: var(--font-mono); font-weight: 700; }

/*** Pricing ***/
.price-card { position: relative; overflow: visible; }
.price-card.popular { border: 2px solid var(--primary); transform: scale(1.03); }
.price-card .ribbon {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    letter-spacing: .04em; padding: 6px 18px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 8px 18px -6px rgba(27,116,249,.5);
}
.price-card .price-value { font-family: var(--font-mono); }
.price-card .list-group-item { border-color: #EEF1F8; }
.price-card .list-group-item i { color: var(--accent); }

/*** Comparison ***/
@media (min-width: 992px) {
    .comparison::after {
        position: absolute; content: ""; width: 1px; top: 56px; bottom: 20px; left: 50%; background: #DDDDDD;
    }
}

/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item * { transition: .5s; }
.testimonial-carousel .owl-item.center .testimonial-item {
    background: var(--primary) !important; border-color: var(--accent) !important;
}
.testimonial-carousel .owl-item.center .testimonial-item .position-absolute { background: var(--accent) !important; }
.testimonial-carousel .owl-item.center .testimonial-item * { color: #FFFFFF; }
.testimonial-carousel .owl-item.center .testimonial-item h6 { color: var(--dark) !important; }
.testimonial-carousel .owl-dots { display: flex; align-items: flex-end; justify-content: center; }
.testimonial-carousel .owl-dot {
    position: relative; display: inline-block; margin: 0 5px; width: 15px; height: 15px;
    background: #DDDDDD; border-radius: 15px; transition: .5s;
}
.testimonial-carousel .owl-dot.active { width: 30px; background: var(--primary); }

/*** Footer ***/
.footer { background-color: var(--dark) !important; color: rgba(255, 255, 255, .75); }
.footer p { font-size: 15px; }
.footer .footer-logo { height: 40px; margin-bottom: 16px; }
.footer .btn.btn-social {
    margin-right: 5px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    color: var(--light); border: 1px solid #FFFFFF; border-radius: 35px; transition: .3s;
}
.footer .btn.btn-social:hover { color: var(--accent); border-color: var(--accent); }
.footer .btn.btn-link {
    display: block; margin-bottom: 5px; padding: 0; text-align: left; color: #FFFFFF; font-size: 15px;
    font-weight: normal; transition: .3s;
}
.footer .btn.btn-link::before {
    position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px;
}
.footer .btn.btn-link:hover { letter-spacing: 1px; box-shadow: none; color: var(--accent); }
.footer .copyright {
    padding: 22px 0; font-size: 13.5px; font-family: var(--font-mono);
    border-top: 1px solid rgba(256, 256, 256, .15);
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
}
.footer .copyright a { color: var(--light); }
.footer .copyright a.credit { color: var(--accent); font-weight: 600; }

/* Utility */
.rounded-xl { border-radius: var(--radius) !important; }
.object-cover { object-fit: cover; }