/* =========================================================
   HOSTVISION CORE DESIGN SYSTEM
   hostvision-core.css
   FINAL CLEAN VERSION
========================================================= */


/* =========================================================
   ROOT TOKENS
========================================================= */

:root{

    /* BRAND */

    --hv-primary:#5a26c9;
    --hv-primary-light:#7c4dff;
    --hv-primary-dark:#45209d;

    --hv-secondary:#fa4a2d;

    /* STATUS */

    --hv-success:#22c55e;
    --hv-danger:#ef4444;
    --hv-warning:#f59e0b;
    --hv-info:#0ea5e9;

    /* SURFACES */

    --hv-bg:#f5f7fb;
    --hv-card:#ffffff;

    /* TEXT */

    --hv-text:#0f172a;
    --hv-text-soft:#64748b;
    --hv-text-muted:#94a3b8;

    /* BORDER */

    --hv-border:rgba(15,23,42,.06);

    /* SHADOWS */

    --hv-shadow-sm:
    0 6px 18px rgba(15,23,42,.04);

    --hv-shadow-md:
    0 10px 35px rgba(15,23,42,.05);

    --hv-shadow-lg:
    0 18px 50px rgba(15,23,42,.10);

    /* RADII */

    --hv-radius-sm:14px;
    --hv-radius-md:20px;
    --hv-radius-lg:30px;

    /* TRANSITIONS */

    --hv-transition:.22s ease;

}


/* =========================================================
   RESET
========================================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;

}


/* =========================================================
   BODY
========================================================= */

body{

    background:var(--hv-bg);

    color:var(--hv-text);

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3,h4,h5,h6{

    color:var(--hv-text);

    font-weight:800;

    letter-spacing:-.5px;

}

p{

    color:var(--hv-text-soft);

    line-height:1.7;

}

small{

    color:var(--hv-text-muted);

}


/* =========================================================
   LINKS
========================================================= */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--hv-transition);

}

a:hover{

    text-decoration:none;

}


/* =========================================================
   BUTTON SYSTEM
========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:46px;

    padding:0 22px!important;

    border:none!important;

    border-radius:var(--hv-radius-sm)!important;

    font-size:14px!important;

    font-weight:600!important;

    transition:var(--hv-transition);

    box-shadow:none!important;

}

.btn:hover{

    transform:translateY(-2px);

}


/* PRIMARY */

.btn-primary{

    background:var(--hv-primary)!important;

    color:#fff!important;

}

.btn-primary:hover{

    background:var(--hv-primary-light)!important;

}


/* SECONDARY */

.btn-secondary,
.btn-default{

    background:#eef2ff!important;

    color:var(--hv-primary)!important;

}


/* SUCCESS */

.btn-success{

    background:var(--hv-success)!important;

    color:#fff!important;

}


/* DANGER */

.btn-danger{

    background:var(--hv-danger)!important;

    color:#fff!important;

}


/* WARNING */

.btn-warning{

    background:var(--hv-warning)!important;

    color:#fff!important;

}


/* LARGE */

.btn-lg{

    min-height:54px;

    padding:0 28px!important;

}


/* =========================================================
   FORM SYSTEM
========================================================= */

label{

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    color:#475569;

}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{

    width:100%;

    min-height:52px;

    padding:14px 18px!important;

    border:none!important;

    border-radius:16px!important;

    background:#fff!important;

    box-shadow:
    inset 0 0 0 1px rgba(15,23,42,.06);

    color:var(--hv-text)!important;

    font-size:14px!important;

    transition:var(--hv-transition);

}


/* TEXTAREA */

textarea{

    min-height:140px;

    resize:vertical;

}


/* PLACEHOLDER */

.form-control::placeholder,
textarea::placeholder{

    color:var(--hv-text-muted)!important;

}


/* FOCUS */

.form-control:focus,
input:focus,
textarea:focus,
select:focus{

    background:#fff!important;

    box-shadow:
    inset 0 0 0 2px rgba(90,38,201,.16),
    0 0 0 4px rgba(90,38,201,.06)!important;

    color:var(--hv-text)!important;

}


/* DISABLED */

.form-control[disabled],
input[disabled],
textarea[disabled],
select[disabled]{

    background:#f1f5f9!important;

    color:#64748b!important;

}


/* CHECKBOX */

input[type="checkbox"]{

    accent-color:var(--hv-primary);

}


/* =========================================================
   CARD SYSTEM
========================================================= */

.hv-card,
.panel,
.modal-content,
.order-summary,
.domain-renewal{

    background:
    rgba(255,255,255,.78);

    border:none!important;

    border-radius:var(--hv-radius-lg)!important;

    box-shadow:var(--hv-shadow-md);

}


/* =========================================================
   TABLE SYSTEM
========================================================= */

.table-container,
.table-responsive{

    overflow:hidden;

    border-radius:var(--hv-radius-lg);

    background:
    rgba(255,255,255,.72);

    border:1px solid var(--hv-border);

}

table{

    width:100%;

    border-collapse:collapse;

}

table thead{

    background:#f8fafc;

}

table thead th{

    padding:18px 22px!important;

    border:none!important;

    font-size:13px!important;

    font-weight:700!important;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#64748b!important;

}

table tbody td{

    padding:20px 22px!important;

    border-top:1px solid rgba(15,23,42,.05)!important;

    vertical-align:middle!important;

    color:var(--hv-text)!important;

}

table tbody tr{

    transition:var(--hv-transition);

}

table tbody tr:hover{

    background:
    rgba(90,38,201,.03);

}


/* =========================================================
   ALERT SYSTEM
========================================================= */

.alert{

    border:none!important;

    border-radius:22px!important;

    padding:20px 24px!important;

    margin-bottom:24px!important;

    box-shadow:none!important;

}


/* SUCCESS */

.alert-success{

    background:
    rgba(34,197,94,.10)!important;

    color:#166534!important;

}


/* INFO */

.alert-info{

    background:
    rgba(90,38,201,.08)!important;

    color:#4c1d95!important;

}


/* WARNING */

.alert-warning{

    background:
    rgba(245,158,11,.10)!important;

    color:#92400e!important;

}


/* DANGER */

.alert-danger{

    background:
    rgba(239,68,68,.10)!important;

    color:#991b1b!important;

}


/* =========================================================
   BADGE SYSTEM
========================================================= */

.label,
.badge,
.status,
.hv-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:30px;

    padding:0 14px;

    border:none!important;

    border-radius:999px;

    font-size:12px!important;

    font-weight:700!important;

}


/* SUCCESS */

.label-success,
.status-active,
.hv-badge.success{

    background:
    rgba(34,197,94,.14)!important;

    color:var(--hv-success)!important;

}


/* WARNING */

.label-warning,
.hv-badge.warning{

    background:
    rgba(245,158,11,.14)!important;

    color:var(--hv-warning)!important;

}


/* DANGER */

.label-danger,
.hv-badge.danger{

    background:
    rgba(239,68,68,.14)!important;

    color:var(--hv-danger)!important;

}


/* INFO */

.label-info{

    background:
    rgba(14,165,233,.12)!important;

    color:var(--hv-info)!important;

}


/* =========================================================
   DROPDOWNS
========================================================= */

.dropdown-menu{

    border:none!important;

    border-radius:22px!important;

    overflow:hidden;

    box-shadow:var(--hv-shadow-lg)!important;

    padding:10px!important;

}

.dropdown-item{

    border-radius:14px;

    padding:12px 14px;

    transition:var(--hv-transition);

}

.dropdown-item:hover{

    background:#f8fafc;

}


/* =========================================================
   MODALS
========================================================= */

.modal-header,
.modal-footer{

    border:none!important;

}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{

    gap:10px;

}

.pagination > li > a,
.pagination > li > span{

    display:flex!important;

    align-items:center;

    justify-content:center;

    min-width:42px;

    height:42px;

    border:none!important;

    border-radius:14px!important;

    background:
    rgba(255,255,255,.82)!important;

    color:var(--hv-text)!important;

}

.pagination > .active > a{

    background:var(--hv-primary)!important;

    color:#fff!important;

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:
    rgba(90,38,201,.22);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:
    rgba(90,38,201,.38);

}


/* =========================================================
   SELECTION
========================================================= */

::selection{

    background:
    rgba(90,38,201,.18);

    color:#0f172a;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none!important;

}


/* =========================================================
   UTILITIES
========================================================= */

.hv-shadow{

    box-shadow:var(--hv-shadow-md);

}

.hv-radius{

    border-radius:var(--hv-radius-lg);

}

.hv-bg-card{

    background:var(--hv-card);

}

.hv-text-soft{

    color:var(--hv-text-soft);

}

.hv-text-muted{

    color:var(--hv-text-muted);

}

.hv-flex{

    display:flex;

}

.hv-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hv-hidden{

    display:none!important;

}


/* =========================================================
   GLOBAL MOTION
========================================================= */

*{

    transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;

}