/* ================================================================
   Cloudvina.net — Public Frontend Styles
   ui/theme/frontend/css/style.css
   ================================================================ */

/* ---- Reset / base -------------------------------------------- */
:root {
    --cv-blue:     #003e99;
    --cv-blue-mid: #0062cc;
    --cv-blue-lt:  #1a8fe3;
    --cv-gold:     #f0a500;
    --cv-dark:     #1e2838;
    --cv-text:     #334155;
    --cv-muted:    #64748b;
    --cv-border:   #e2e8f0;
    --cv-radius:   10px;
    --cv-shadow:   0 4px 18px rgba(0,0,0,.10);
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--cv-text);
    background: #f8faff;
}

a { color: var(--cv-blue-mid); }
a:hover { color: var(--cv-blue); }

/* ---- Navbar --------------------------------------------------- */
.fe-navbar {
    background: #fff;
    border-bottom: 1px solid var(--cv-border);
    box-shadow: 0 2px 8px rgba(0,62,153,.07);
}

.fe-navbar .navbar-brand {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--cv-blue);
}

.fe-navbar .nav-link {
    font-weight: 500;
    color: var(--cv-text) !important;
    padding: .45rem .85rem;
    border-radius: 6px;
    transition: background .2s, color .2s;
}

.fe-navbar .nav-link:hover,
.fe-navbar .nav-link.active {
    background: #f0f5ff;
    color: var(--cv-blue) !important;
}

/* ---- Plan cards (products_grid) ------------------------------ */
.fe-plan-card {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    background: #fff;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

.fe-plan-card:hover {
    box-shadow: var(--cv-shadow);
    transform: translateY(-3px);
}

.fe-plan-card--popular {
    border: 2px solid var(--cv-gold);
}

.fe-plan-badge {
    position: absolute;
    top: 14px;
    right: -26px;
    background: var(--cv-gold);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 36px;
    transform: rotate(45deg);
    letter-spacing: .05em;
}

.fe-plan-type-label {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: #eff6ff;
    color: var(--cv-blue-mid);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: .5rem;
}

.fe-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cv-dark);
}

.fe-plan-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--cv-blue);
    line-height: 1;
}

.fe-plan-price .currency {
    font-size: 1rem;
    vertical-align: super;
    margin-right: 2px;
}

.fe-plan-price .period {
    font-size: .8rem;
    font-weight: 500;
    color: var(--cv-muted);
}

.fe-plan-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fe-plan-specs li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--cv-text);
    padding: .22rem 0;
    border-bottom: 1px dashed var(--cv-border);
}

.fe-plan-specs li:last-child { border-bottom: none; }

.fe-plan-specs .spec-icon {
    width: 18px;
    color: var(--cv-blue-mid);
    flex-shrink: 0;
    text-align: center;
}

.fe-plan-btn {
    display: block;
    width: 100%;
    padding: .55rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .92rem;
    text-align: center;
    border: none;
    transition: filter .2s;
}

.fe-plan-btn--primary {
    background: var(--cv-blue-mid);
    color: #fff;
}

.fe-plan-btn--popular {
    background: var(--cv-gold);
    color: #000;
}

.fe-plan-btn:hover { filter: brightness(1.08); color: inherit; }

/* ---- Bestsellers strip ---------------------------------------- */
.fe-best-card {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    background: #fff;
    transition: box-shadow .2s;
}

.fe-best-card:hover { box-shadow: var(--cv-shadow); }

.fe-best-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #eff6ff;
    color: var(--cv-blue-mid);
    flex-shrink: 0;
}

/* ---- Features sections --------------------------------------- */
.fe-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--cv-blue) 0%, var(--cv-blue-lt) 100%);
    color: #fff;
    margin-bottom: .85rem;
}

/* ---- World map section --------------------------------------- */
.fe-world-map-wrap {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.fe-world-map-wrap img,
.fe-world-map-wrap svg {
    width: 100%;
    height: auto;
    opacity: .25;
    filter: invert(1) sepia(1) saturate(3) hue-rotate(190deg);
}

.fe-location-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

/* ---- TLD pricing strip --------------------------------------- */
#tld_scroll::-webkit-scrollbar { display: none; }

.fe-tld-item {
    transition: border-color .15s, box-shadow .15s;
}

.fe-tld-item:hover {
    border-color: var(--cv-blue-mid) !important;
    box-shadow: 0 2px 8px rgba(0,98,204,.15);
}

/* ---- Flash sale countdown ------------------------------------ */
#flash_countdown span,
#cd_dd, #cd_hh, #cd_mm, #cd_ss {
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: center;
}

/* ---- Domain search results ----------------------------------- */
#results_list .card-body { padding: .75rem 1.25rem; }

/* ---- FAQ accordion ------------------------------------------- */
.accordion-button:not(.collapsed) { color: var(--cv-blue); }

/* ---- Footer -------------------------------------------------- */
.fe-footer {
    background: var(--cv-dark);
    color: #cbd5e1;
}

.fe-footer h6 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    margin-bottom: .85rem;
}

.fe-footer a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s;
    font-size: .88rem;
}

.fe-footer a:hover { color: #fff; }

.fe-footer .fe-footer-brand {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}

.fe-footer-copy {
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .8rem;
    color: #64748b;
}

/* ---- Responsive tweaks --------------------------------------- */
@media (max-width: 767px) {
    .fe-plan-price { font-size: 1.5rem; }
    .fe-plan-card { margin-bottom: 1rem; }
}