/* ==========================================================================
   Host4India Client Area & Auth Styles (Lagom Theme)
   ========================================================================== */

/* Hide HostBill's legacy header/menu bars across client area pages */
#headpart,
#mainmenu-container,
#submenu {
    display: none !important;
}

/* ==========================================================================
   1. Client Area Main Layout
   ========================================================================== */

body.h4i-ca #wrapper {
    padding-top: 40px;
}

body.h4i-ca #wrapper > .container {
    max-width: 1440px !important;
    width: auto !important;
    padding: 0 24px !important;
    box-sizing: border-box;
}

.h4i-ca-layout {
    display: grid;
    grid-template-columns: minmax(280px, 25%) 1fr;
    gap: 32px;
    align-items: start;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

.h4i-ca-side {
    min-width: 280px;
}

.h4i-ca-main {
    min-width: 0;
}

/* Hide HostBill's redundant left navigation within account subpages */
.h4i-ca-main .box-feature-small {
    display: none !important;
}

.h4i-ca-main .flex-container > .span10 {
    width: auto !important;
    float: none !important;
}

/* ==========================================================================
   2. Sidebar Cards
   ========================================================================== */

.h4i-side-card {
    background: #ffffff;
    border: 1px solid #EFF2FA;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16, 42, 100, 0.06);
    margin-bottom: 16px;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.h4i-side-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 28px;
    font-size: 20px;
    font-weight: 600;
    color: #0B1524;
    border-bottom: 1px solid #EFF2FA;
    background: #ffffff;
}

.h4i-side-head > i {
    color: #0D1450;
    font-size: 20px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.h4i-side-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #0B1524;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.h4i-side-toggle i {
    transition: transform 0.2s ease;
}

.is-collapsed .h4i-side-body {
    display: none;
}

.is-collapsed .h4i-side-toggle i {
    transform: rotate(180deg);
}

.h4i-side-body {
    padding: 22px 28px;
}

.h4i-side-body.h4i-side-links {
    padding: 0;
}

.h4i-side-info {
    font-size: 16px;
    line-height: 1.9;
    color: #3a4252;
    margin-bottom: 16px;
}

.h4i-side-link {
    display: block;
    padding: 18px 28px;
    font-size: 17px;
    color: #0B1524;
    border-bottom: 1px solid #EFF2FA;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

.h4i-side-link i {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    color: #0D1450;
    font-size: 15px;
}

.h4i-side-link:last-child {
    border-bottom: none;
}

.h4i-side-link:hover,
.h4i-side-link.active {
    color: #0D1450 !important;
    background: #F2F6FF;
    font-weight: 600;
}

.h4i-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background: #0D1450;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
    gap: 8px;
}

.h4i-btn-primary:hover {
    background: #0560d6;
}

/* ==========================================================================
   3. Login & Authentication Page
   ========================================================================== */

.h4i-auth {
    padding: 80px 16px;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

.h4i-auth-card {
    max-width: 810px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #E4E8F1;
    border-radius: 8px;
    padding: 56px 46px 0;
    box-shadow: 0 4px 16px rgba(16, 42, 100, 0.04);
    box-sizing: border-box;
}

.h4i-auth-card h1 {
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    color: #0B1524;
    margin: 0 0 8px;
    line-height: 1.2;
}

.h4i-auth-sub {
    text-align: center;
    font-size: 18px;
    color: #4b5563;
    margin: 0 0 36px;
}

.h4i-auth-card .h4i-form-group {
    margin-bottom: 24px;
}

.h4i-auth-card label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #0B1524;
    margin-bottom: 8px;
}

.h4i-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.h4i-label-row label {
    margin-bottom: 0;
}

.h4i-forgot-link {
    font-size: 15px;
    color: #0D1450;
    font-weight: 500;
    text-decoration: none;
}

.h4i-forgot-link:hover {
    text-decoration: underline;
}

.h4i-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.h4i-input-wrap input {
    height: 76px;
    width: 100%;
    padding: 0 20px 0 66px;
    border: 1px solid #DCE1EA;
    border-radius: 6px;
    font-size: 20px;
    color: #0B1524;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
    font-family: inherit;
}

.h4i-input-wrap input:focus {
    border-color: #0D1450;
    box-shadow: 0 0 0 3px rgba(13, 20, 80, 0.15);
}

.h4i-input-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
}

.h4i-toggle-pwd {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h4i-toggle-pwd:hover {
    color: #0B1524;
}

.h4i-captcha-box {
    margin-top: 12px;
}

.h4i-captcha-group input {
    padding-left: 20px;
    height: 56px;
    font-size: 18px;
}

.h4i-btn-submit {
    height: 70px;
    width: 100%;
    background: #0D1450;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    box-shadow: 0 8px 18px rgba(13, 20, 80, 0.25);
    margin: 24px 0 46px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-family: inherit;
}

.h4i-btn-submit:hover {
    background: #1d4ed8;
}

.h4i-btn-submit:active {
    transform: translateY(1px);
}

.h4i-auth-foot {
    border-top: 1px solid #E4E8F1;
    margin: 0 -46px;
    padding: 34px 20px;
    text-align: center;
    font-size: 17px;
    color: #6B7488;
}

.h4i-auth-foot a {
    color: #0D1450;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.h4i-auth-foot a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   4. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 991.98px) {
    .h4i-ca-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .h4i-ca-side {
        min-width: 0;
        width: 100%;
    }

    body.h4i-ca #wrapper > .container {
        padding: 0 16px !important;
    }
}

@media (max-width: 575.98px) {
    .h4i-auth {
        padding: 40px 12px;
    }

    .h4i-auth-card {
        padding: 32px 20px 0;
    }

    .h4i-auth-card h1 {
        font-size: 26px;
    }

    .h4i-auth-sub {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .h4i-auth-card label {
        font-size: 16px;
    }

    .h4i-input-wrap input {
        height: 56px;
        font-size: 16px;
        padding-left: 54px;
    }

    .h4i-input-icon {
        left: 18px;
        font-size: 17px;
    }

    .h4i-toggle-pwd {
        right: 14px;
        font-size: 17px;
    }

    .h4i-btn-submit {
        height: 56px;
        font-size: 17px;
        margin: 20px 0 32px;
    }

    .h4i-auth-foot {
        margin: 0 -20px;
        padding: 24px 16px;
        font-size: 15px;
    }
}

/* ===== PHASE B – DASHBOARD ===== */

.h4i-dash {
    --h4i-primary: #0D1450;
    --h4i-primary-soft: rgba(13, 20, 80, 0.08);
    --h4i-danger: #FF0003;
    --h4i-danger-soft: rgba(255, 0, 3, 0.07);
    --h4i-success: #16a34a;
    --h4i-text: #0B1524;
    --h4i-muted: #6B7488;
    --h4i-line: #EFF2FA;
    --h4i-radius: 14px;
    --h4i-shadow: 0 4px 16px rgba(16, 42, 100, 0.06);
    --h4i-shadow-hi: 0 10px 28px rgba(16, 42, 100, 0.11);
    --h4i-pad: 26px;
    font-family: var(--font-primary, "Plus Jakarta Sans", "Inter", sans-serif);
    color: var(--h4i-text);
}

/* Head & Search */
.h4i-dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.h4i-dash-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--h4i-text);
}

.h4i-dash-search .input-append {
    display: inline-flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--h4i-line);
    box-shadow: 0 2px 8px rgba(16, 42, 100, 0.04);
    position: relative;
}

.h4i-dash-search input#search_name {
    border: none;
    background: transparent;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--h4i-text);
    box-shadow: none;
    outline: none;
    border-radius: 10px 0 0 10px;
    width: 195px;
    height: auto;
    margin: 0;
}

.h4i-dash-search .btn {
    border: none;
    background: transparent;
    color: var(--h4i-text);
    box-shadow: none;
    text-shadow: none;
    padding: 8px 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 0;
}

.h4i-dash-search .btn.dropdown-toggle {
    border-left: 1px solid var(--h4i-line);
    color: var(--h4i-muted);
}

.h4i-dash-search .btn-primary {
    background: #0B1030;
    background-image: none;
    color: #ffffff;
    border-radius: 0 10px 10px 0;
}

.h4i-dash-search .btn-primary:hover {
    background: #0b4fd6;
}

.h4i-dash-search .dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--h4i-line);
    box-shadow: var(--h4i-shadow);
    padding: 6px 0;
    margin-top: 4px;
}

.h4i-dash-search .dropdown-menu > li > a {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--h4i-text);
}

.h4i-dash-search .dropdown-menu > li > a:hover {
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
}

/* Stat Tiles */
.h4i-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.h4i-dash .h4i-tile {
    position: relative;
    display: block;
    height: 100%;
    background: #ffffff;
    border: 0;
    border-radius: var(--h4i-radius);
    box-shadow: var(--h4i-shadow);
    padding: 26px var(--h4i-pad) 24px;
    text-decoration: none !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    box-sizing: border-box;
}

.h4i-dash .h4i-tile:hover {
    box-shadow: var(--h4i-shadow-hi);
    transform: translateY(-2px);
    text-decoration: none !important;
}

.h4i-dash .h4i-tile__icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
    font-size: 15px;
}

.h4i-dash .h4i-tile__stat {
    font-size: 52px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--h4i-primary);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.h4i-dash .h4i-tile__label {
    font-size: 18px;
    font-weight: 500;
    color: var(--h4i-text);
}

.h4i-dash .h4i-tile--alert .h4i-tile__stat {
    color: var(--h4i-danger);
}

.h4i-dash .h4i-tile--alert .h4i-tile__icon {
    background: var(--h4i-danger-soft);
    color: var(--h4i-danger);
}

/* Panels */
.h4i-panel {
    background: #ffffff;
    border-radius: var(--h4i-radius);
    box-shadow: var(--h4i-shadow);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--h4i-line);
}

.h4i-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--h4i-line);
    background: #ffffff;
}

.h4i-panel__head h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--h4i-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.h4i-panel__head h3 i {
    color: var(--h4i-primary);
}

.h4i-panel__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h4i-panel__body {
    padding: 8px 24px 16px;
}

/* List Rows & Badges */
.h4i-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--h4i-line);
    gap: 12px;
}

.h4i-list__row:last-child {
    border-bottom: none;
}

.h4i-list__name {
    font-size: 16px;
    font-weight: 500;
    color: var(--h4i-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.h4i-list__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h4i-badge {
    display: inline-block;
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.h4i-badge--danger {
    background: var(--h4i-danger-soft);
    color: var(--h4i-danger);
}

/* Buttons */
.h4i-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    text-shadow: none !important;
    background-image: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.h4i-btn--primary {
    background: #0B1030;
    color: #ffffff !important;
}

.h4i-btn--primary:hover {
    background: #0b4fd6;
    color: #ffffff !important;
}

.h4i-btn--success {
    background: var(--h4i-success);
    color: #ffffff !important;
}

.h4i-btn--success:hover {
    background: #15803d;
    color: #ffffff !important;
}

.h4i-btn--ghost {
    background: #ffffff;
    border-color: var(--h4i-line);
    color: var(--h4i-text) !important;
}

.h4i-btn--ghost:hover {
    background: #f8fafc;
    color: var(--h4i-text) !important;
}

.h4i-btn--sm {
    padding: 5px 12px;
    font-size: 13px;
}

/* Tables */
.h4i-table-wrap {
    overflow-x: auto;
}

.h4i-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.h4i-table th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--h4i-muted);
    font-weight: 600;
    padding: 12px 8px;
    border-bottom: 1px solid var(--h4i-line);
    text-align: left;
}

.h4i-table td {
    font-size: 15px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--h4i-line);
    vertical-align: middle;
    color: var(--h4i-text);
}

.h4i-table tbody tr:last-child td {
    border-bottom: none;
}

.h4i-link {
    color: var(--h4i-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.h4i-link:hover {
    text-decoration: underline !important;
}

.h4i-amount-due {
    color: var(--h4i-danger);
    font-weight: 700;
    margin-left: 8px;
}

.h4i-credit {
    color: #16a34a;
    padding-top: 12px;
    font-size: 14px;
}

/* Status Pills */
.h4i-status {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
    line-height: 1.4;
    text-transform: capitalize;
}

.h4i-status--open {
    background: #e8f5ee;
    color: #16a34a;
}

.h4i-status--answered {
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
}

.h4i-status--closed {
    background: #f1f2f5;
    color: #6B7488;
}

.h4i-status--client-reply,
.h4i-status--customer-reply {
    background: #fff4e5;
    color: #d97706;
}

.h4i-empty {
    color: var(--h4i-muted);
    padding: 16px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 991px) {
    .h4i-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .h4i-dash .h4i-tile__stat {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .h4i-dash-head {
        flex-direction: column;
        align-items: stretch;
    }

    .h4i-dash-title {
        font-size: 22px;
    }

    .h4i-tiles {
        grid-template-columns: 1fr;
    }

    .h4i-panel__head {
        flex-direction: column;
        align-items: stretch;
    }

    .h4i-panel__actions,
    .h4i-panel__head form {
        width: 100%;
        display: flex;
    }

    .h4i-panel__head .h4i-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== PHASE B - MOBILE FIX ===== */
.h4i-ca-main, .h4i-ca-side { min-width: 0; }
.h4i-dash-head > * { min-width: 0; max-width: 100%; }
@media (max-width: 991px) {
  .h4i-ca-layout { display: flex !important; flex-direction: column; gap: 20px; }
  .h4i-ca-main { order: 1; width: 100%; }
  .h4i-ca-side { order: 2; width: 100%; }
}
@media (max-width: 575px) {
  .h4i-dash-search, .h4i-dash-search form, .h4i-dash-search .input-append { width: 100%; box-sizing: border-box; }
  .h4i-dash-search input#search_name { flex: 1 1 auto; width: auto; min-width: 0; }
  .h4i-dash-search .btn.dropdown-toggle { white-space: nowrap; }
}

/* ===== PHASE C – SERVICES ===== */

.h4i-ca-main {
    --h4i-primary: #0D1450;
    --h4i-primary-soft: rgba(13, 20, 80, 0.08);
    --h4i-danger: #FF0003;
    --h4i-danger-soft: rgba(255, 0, 3, 0.07);
    --h4i-success: #16a34a;
    --h4i-text: #0B1524;
    --h4i-muted: #6B7488;
    --h4i-line: #EFF2FA;
    --h4i-radius: 14px;
    --h4i-shadow: 0 4px 16px rgba(16, 42, 100, 0.06);
    --h4i-shadow-hi: 0 10px 28px rgba(16, 42, 100, 0.11);
    --h4i-grad: linear-gradient(180deg, #0D1450 0%, #0B1030 100%);
}

/* Services List */
.h4i-svc-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--h4i-text);
}

.h4i-svc-table th a {
    color: var(--h4i-muted);
    text-decoration: none !important;
}

.h4i-svc-table th a:hover {
    color: var(--h4i-primary);
}

.h4i-svc-domain {
    display: block;
    font-size: 13px;
    color: var(--h4i-muted) !important;
    text-decoration: none !important;
    margin-top: 2px;
}

.h4i-svc .h4i-table-wrap {
    overflow: visible;
}

.h4i-svc-table .btn-group {
    position: relative;
    display: inline-block;
}

.h4i-svc-table .dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--h4i-line);
    box-shadow: var(--h4i-shadow);
    padding: 6px 0;
}

.h4i-svc-table .dropdown-menu > li > a {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--h4i-text);
}

.h4i-svc-table .dropdown-menu > li > a:hover {
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
}

.h4i-svc-foot {
    width: 100%;
    margin-top: 8px;
}

#pageswitch .btn {
    background: #ffffff;
    border: 1px solid var(--h4i-line);
    border-radius: 6px;
    background-image: none !important;
    text-shadow: none !important;
    color: var(--h4i-text);
}

#pageswitch .btn.active {
    background: #0B1030;
    color: #ffffff;
}

.h4i-svc-empty .h4i-btn {
    margin-top: 12px;
}

/* Status pills */
.h4i-status--active {
    background: #e8f5ee;
    color: #16a34a;
}

.h4i-status--pending {
    background: #fff4e5;
    color: #d97706;
}

.h4i-status--suspended {
    background: #fdecec;
    color: #dc2626;
}

.h4i-status--cancelled,
.h4i-status--terminated {
    background: #f1f2f5;
    color: #6B7488;
}

.h4i-status--fraud {
    background: #fdecec;
    color: #dc2626;
}

.h4i-btn--danger {
    background: #dc2626;
    color: #ffffff !important;
}

.h4i-btn--danger:hover {
    background: #b91c1c;
    color: #ffffff !important;
}

/* Service Details (.h4i-pd) */
.h4i-pd .brcrm {
    margin-bottom: 16px;
}

.h4i-pd .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.h4i-pd .breadcrumb a {
    color: var(--h4i-primary);
    text-decoration: none;
}

.h4i-pd .breadcrumb .active {
    color: var(--h4i-muted);
}

.h4i-pd__top {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: var(--h4i-shadow);
    padding: 24px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}

.h4i-pd__hero {
    background: var(--h4i-grad);
    border-radius: 14px;
    padding: 26px 20px 56px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.h4i-pd__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 12px;
}

.h4i-pd__hero h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    line-height: 1.25;
}

.h4i-pd__hero h4 {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.h4i-pd__domain {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    word-break: break-all;
}

.h4i-pd__status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.h4i-pd__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.h4i-pd__actions .h4i-btn {
    width: 100%;
}

/* Meta grid */
.h4i-pd__metacol .serviceinfo {
    padding: 0;
}

.h4i-pd__metacol .serviceinfo .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 0;
}

.h4i-pd__metacol .serviceinfo .row::before,
.h4i-pd__metacol .serviceinfo .row::after {
    display: none !important;
    content: none !important;
}

.h4i-pd__metacol .serviceinfo .row > div {
    width: auto;
    float: none;
    margin: 0;
}

.h4i-pd__metacol .serviceinfo .row > .span8:first-child {
    display: none;
}

.h4i-pd__metacol .serviceinfo h3 {
    font-size: 13px;
    font-weight: 400;
    color: var(--h4i-muted);
    margin: 0 0 2px;
    line-height: 1.3;
}

.h4i-pd__metacol .serviceinfo h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--h4i-text);
    margin: 0;
    word-break: break-word;
}

.h4i-pd__metacol .serviceinfo .label {
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    text-shadow: none;
    line-height: 1.4;
    display: inline-block;
}

/* Main content tables */
.h4i-pd__main table.table {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--h4i-shadow);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: 24px;
}

.h4i-pd__main table.table td,
.h4i-pd__main table.table th {
    padding: 14px 18px;
    border-top: 1px solid var(--h4i-line);
    background: #fff !important;
    font-size: 15px;
}

.h4i-pd__main table.table tr:first-child td,
.h4i-pd__main table.table tr:first-child th {
    border-top: 0;
}

.h4i-pd__main table.table th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--h4i-muted);
    font-weight: 600;
}

.h4i-pd__main .p19 {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--h4i-shadow);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.h4i-pd__main .p19 table.table {
    box-shadow: none;
    margin-bottom: 0;
}

/* Tabs */
.h4i-pd .nav-tabs {
    border-bottom: 1px solid var(--h4i-line);
    margin-bottom: 16px;
}

.h4i-pd .nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--h4i-muted);
    font-weight: 600;
    padding: 12px 18px;
    margin-bottom: -1px;
    background: transparent;
}

.h4i-pd .nav-tabs > li > a:hover {
    color: var(--h4i-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.h4i-pd .nav-tabs > .active > a,
.h4i-pd .nav-tabs > .active > a:hover,
.h4i-pd .nav-tabs > .active > a:focus {
    border: 0;
    border-bottom: 2px solid var(--h4i-primary);
    color: var(--h4i-primary);
    background: transparent;
}

/* Sidebar additions */
.h4i-side-count {
    margin-left: auto;
    background: var(--h4i-primary-soft);
    color: var(--h4i-primary);
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}

.h4i-svc-menu .leftmenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.h4i-svc-menu .leftmenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    font-size: 17px;
    color: #0B1524;
    border-bottom: 1px solid #EFF2FA;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

.h4i-svc-menu .leftmenu li:last-child a {
    border-bottom: none;
}

.h4i-svc-menu .leftmenu li a:hover,
.h4i-svc-menu .leftmenu li.current a {
    color: #0D1450 !important;
    background: #F2F6FF;
    font-weight: 600;
}

.h4i-svc-menu .leftmenu li.last a {
    color: #dc2626 !important;
}

.h4i-svc-menu .leftmenu span {
    background: none !important;
    padding-left: 0 !important;
}

.h4i-svc-menu .leftmenu img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 991px) {
    .h4i-pd__top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .h4i-pd__metacol .serviceinfo .row {
        grid-template-columns: 1fr;
    }
    .h4i-svc .h4i-table-wrap {
        overflow-x: auto;
    }
    .h4i-pd__main {
        overflow-x: auto;
    }
}



/* Phase C fix: let the Manage dropdown show outside the services panel */
.h4i-svc .h4i-panel { overflow: visible; }

/* ===== PHASE C - MODULE SERVICE LIST (div.cloud > table.tonapp) ===== */
.h4i-ca-main .cloud { background:#fff; border:0 !important; border-radius:14px; box-shadow:var(--h4i-shadow); padding:8px 24px 16px; overflow:visible; margin-bottom:24px; }
.h4i-ca-main table.tonapp, .h4i-ca-main table.data-table, .h4i-ca-main table.checker { width:100%; border-collapse:collapse; border:0 !important; background:transparent !important; }
.h4i-ca-main table.tonapp thead th, .h4i-ca-main table.data-table thead th { background:transparent !important; background-image:none !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; color:var(--h4i-muted) !important; font-size:13px; font-weight:600; padding:12px 8px; text-align:left; text-shadow:none !important; }
.h4i-ca-main table.tonapp tbody td, .h4i-ca-main table.data-table tbody td, .h4i-ca-main table.checker tbody td { background:#fff !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; padding:14px 8px; font-size:15px; color:var(--h4i-text); vertical-align:middle; }
.h4i-ca-main table.tonapp tbody tr:last-child td, .h4i-ca-main table.data-table tbody tr:last-child td, .h4i-ca-main table.checker tbody tr:last-child td { border-bottom:0 !important; }
.h4i-ca-main table.tonapp tbody tr:hover td, .h4i-ca-main table.data-table tbody tr:hover td, .h4i-ca-main table.checker tbody tr:hover td { background:#f8faff !important; }
.h4i-ca-main table.tonapp td strong { color:var(--h4i-primary); font-weight:600; }
.h4i-ca-main table.tonapp td small { font-size:13px; color:var(--h4i-muted); }
.h4i-ca-main table.tonapp .fs11 { display:block; font-size:12px; color:var(--h4i-muted); }
.h4i-ca-main table.tonapp a.iphone_switch, .h4i-ca-main table.vm-details-table a.iphone_switch { display:inline-block; width:auto !important; height:auto !important; background:#f1f2f5 !important; background-image:none !important; color:#6B7488 !important; border:0 !important; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; text-indent:0 !important; line-height:1.4; text-transform:capitalize; box-shadow:none !important; text-decoration:none !important; cursor:default; }
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-pending, .h4i-ca-main table.vm-details-table a.iphone_switch.vm-status-pending { background:#fff4e5 !important; color:#d97706 !important; }
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-running,
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-active,
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-online, .h4i-ca-main table.vm-details-table a.iphone_switch.iphone_switch_on { background:#e8f5ee !important; color:#16a34a !important; }
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-stopped,
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-suspended,
.h4i-ca-main table.tonapp a.iphone_switch.vm-status-offline, .h4i-ca-main table.vm-details-table a.iphone_switch.iphone_switch_off { background:#fdecec !important; color:#dc2626 !important; }
@media (max-width:767px) { .h4i-ca-main table.tonapp { min-width:640px; } .h4i-ca-main .cloud { overflow-x:auto; } }
/* ===== PHASE C - MODULE DETAILS PAGE (cloudstack type) ===== */
/* list fixes */
.h4i-ca-main table.tonapp thead, .h4i-ca-main table.tonapp thead tr, .h4i-ca-main table.data-table thead, .h4i-ca-main table.data-table thead tr { background:transparent !important; background-image:none !important; }
.h4i-ca-main table.tonapp thead th, .h4i-ca-main table.data-table thead th { white-space:nowrap; }
.h4i-ca-main table.tonapp td:last-child { white-space:nowrap; }
/* hero banner */
.h4i-ca-main .cloud-top { background:var(--h4i-grad) !important; border:0 !important; border-radius:12px; padding:22px 24px 0; margin:16px 0 20px; position:relative; height:auto !important; min-height:0 !important; }
.h4i-ca-main .cloud-header { float:none !important; background:none !important; padding:0 !important; }
.h4i-ca-main .cloud-header h1.os-logo { float:none !important; background:none !important; padding:0 !important; margin:0 !important; color:#fff !important; font-size:24px; font-weight:700; line-height:1.3; text-shadow:none !important; display:flex; align-items:center; gap:12px; }
.h4i-ca-main .cloud-header h1.os-logo::before { content:"\f0c2"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:18px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; }
/* tabs */
.h4i-ca-main .cloud-nav { float:none !important; position:static !important; background:none !important; border:0 !important; margin:18px 0 0 !important; padding:0 !important; height:auto !important; }
.h4i-ca-main .cloud-nav ul.level-1 { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; height:auto !important; }
.h4i-ca-main .cloud-nav ul.level-1 li { float:none !important; margin:0 !important; background:none !important; border:0 !important; height:auto !important; }
.h4i-ca-main .cloud-nav ul.level-1 li a { display:block; padding:10px 20px !important; color:rgba(255,255,255,.88) !important; font-size:14px; font-weight:600; border:0 !important; border-radius:10px 10px 0 0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; text-shadow:none !important; text-decoration:none !important; }
.h4i-ca-main .cloud-nav ul.level-1 li a:hover { background:rgba(255,255,255,.14) !important; color:#fff !important; }
.h4i-ca-main .cloud-nav ul.level-1 li.current-menu-item a { background:#fff !important; color:var(--h4i-primary) !important; }
.h4i-ca-main .cloud-nav ul.level-1 li a span { background:none !important; padding:0 !important; }

/* tab dropdown (Network menu) */
.h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu { background:#fff !important; border:1px solid var(--h4i-line) !important; border-radius:12px !important; padding:6px !important; min-width:210px; box-shadow:var(--h4i-shadow) !important; margin-top:0 !important; }
.h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu li { float:none !important; display:block !important; margin:0 !important; height:auto !important; }
.h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu li a { display:block !important; padding:9px 14px !important; border-radius:8px !important; color:var(--h4i-text) !important; background:transparent !important; font-size:14px; font-weight:500; white-space:nowrap; text-align:left; }
.h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu li a:hover, .h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu li a:focus { background:var(--h4i-primary-soft) !important; color:var(--h4i-primary) !important; }
.h4i-ca-main .cloud-nav ul.level-1 .dropdown-menu li a:empty { display:none !important; }
/* content */
.h4i-ca-main #content-cloud { background:none !important; border:0 !important; padding:0 !important; }
.h4i-ca-main #content-cloud .header-bar { background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; padding:0 0 8px !important; margin:0 !important; height:auto !important; }
.h4i-ca-main #content-cloud .header-bar h3 { background:none !important; padding:0 !important; margin:0 !important; color:var(--h4i-text) !important; font-size:20px; font-weight:600; text-shadow:none !important; line-height:1.3; }
.h4i-ca-main #content-cloud .content-bar { background:none !important; border:0 !important; padding:0 !important; }
.h4i-ca-main #content-cloud h3.summarize { background:none !important; padding:0 !important; margin:8px 0 6px !important; border:0 !important; color:var(--h4i-muted) !important; font-size:13px; font-weight:600; font-style:normal; text-transform:uppercase; letter-spacing:.04em; }
.h4i-ca-main table.cloud-billing { border:0 !important; border-collapse:collapse; background:transparent !important; margin-bottom:8px; }
.h4i-ca-main table.cloud-billing td { background:#fff !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; padding:14px 12px !important; font-size:15px; font-weight:600; color:var(--h4i-text); vertical-align:top; }
.h4i-ca-main table.cloud-billing tr:last-child td { border-bottom:0 !important; }
.h4i-ca-main table.cloud-billing td.title { text-align:left !important; color:var(--h4i-muted) !important; font-weight:400; }
.h4i-ca-main table.cloud-billing td.title b { font-weight:500; }
.h4i-ca-main table.cloud-billing .fs11 { font-size:13px; font-weight:400; color:var(--h4i-muted); }
.h4i-ca-main table.cloud-billing .text-small { font-size:13px; font-weight:400; color:var(--h4i-muted); margin-top:4px; }
.h4i-ca-main table.cloud-billing .text-small a { color:var(--h4i-primary) !important; font-weight:600; }
.h4i-ca-main .cloud .label { display:inline-block; background:var(--h4i-primary-soft) !important; color:var(--h4i-primary) !important; border:0 !important; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; text-shadow:none !important; line-height:1.4; }
.h4i-ca-main .cloud .label strong { font-weight:600; }
.h4i-ca-main .cloud .label.label-Pending { background:#fff4e5 !important; color:#d97706 !important; }
.h4i-ca-main .cloud .label.label-Active { background:#e8f5ee !important; color:#16a34a !important; }
.h4i-ca-main .cloud .label.label-Suspended, .h4i-ca-main .cloud .label.label-Fraud { background:#fdecec !important; color:#dc2626 !important; }
.h4i-ca-main .cloud .label.label-Cancelled, .h4i-ca-main .cloud .label.label-Terminated { background:#f1f2f5 !important; color:#6B7488 !important; }
.h4i-ca-main .cloud .mseparator { display:none; }

/* action buttons (#vm-menu) - works for any button the module adds */
.h4i-ca-main #vm-menu { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; list-style:none; margin:0; padding:0; }
.h4i-ca-main #vm-menu > li { float:none !important; margin:0 !important; }
.h4i-ca-main #vm-menu > li > a { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:76px !important; height:62px !important; padding:6px 4px !important; background:#fff !important; border:1px solid var(--h4i-line) !important; border-radius:10px !important; box-shadow:none !important; color:var(--h4i-text) !important; text-decoration:none !important; text-align:center; transition:all .15s; }
.h4i-ca-main #vm-menu > li > a:hover { border-color:var(--h4i-primary) !important; background:var(--h4i-primary-soft) !important; color:var(--h4i-primary) !important; transform:translateY(-1px); }
.h4i-ca-main #vm-menu .vpsdo-icon { width:auto !important; height:auto !important; margin:0 !important; background:none !important; }
.h4i-ca-main #vm-menu .vpsdo-icon img, .h4i-ca-main #vm-menu > li > a > img { display:none !important; }
.h4i-ca-main #vm-menu .vpsdo-icon::before { content:"\f013"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:17px; color:var(--h4i-primary); line-height:1; display:block; }
.h4i-ca-main #vm-menu .vpsdo-decr { font-size:12px !important; font-weight:500; line-height:1.2; color:inherit; }
.h4i-ca-main #vm-menu .src-24_terminal::before { content:"\f120"; }
.h4i-ca-main #vm-menu .src-24_arrow-circle::before { content:"\f2f1"; }
.h4i-ca-main #vm-menu .src-24_equalizer::before { content:"\f062"; }
.h4i-ca-main #vm-menu .src-24_blueprint::before { content:"\f0ad"; }
.h4i-ca-main #vm-menu .src-24_camera::before { content:"\f030"; }
.h4i-ca-main #vm-menu .src-disc::before { content:"\f51f"; }
.h4i-ca-main #vm-menu .src-24_cross::before { content:"\f00d"; color:#dc2626; }
/* server details table */
.h4i-ca-main table.vm-details { width:100%; border:0 !important; background:transparent !important; margin-top:8px; }
.h4i-ca-main table.vm-details-table { width:100%; border:0 !important; border-collapse:collapse; background:transparent !important; }
.h4i-ca-main table.vm-details-table td { background:#fff !important; background-image:none !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; padding:14px 10px !important; font-size:15px; line-height:1.4; color:var(--h4i-text); vertical-align:middle; }
.h4i-ca-main table.vm-details-table tr:last-child td { border-bottom:0 !important; }
.h4i-ca-main table.vm-details-table td.vm-details-label { width:42%; font-weight:600; color:var(--h4i-muted) !important; }
.h4i-ca-main table.vm-details-table td.vm-details-value { font-weight:500; word-break:break-word; }
.h4i-ca-main table.vm-details-table a { color:var(--h4i-primary); font-weight:600; text-decoration:none; }
.h4i-ca-main table.vm-details-table a:hover { text-decoration:underline; }
.h4i-ca-main table.vm-details-table .btn, .h4i-ca-main table.vm-details-table input[type=button], .h4i-ca-main table.vm-details-table input[type=submit] { display:inline-block; background:var(--h4i-primary) !important; background-image:none !important; color:#fff !important; border:0 !important; border-radius:6px !important; padding:4px 12px !important; font-size:12px !important; font-weight:600; line-height:1.5 !important; height:auto !important; min-height:0 !important; text-shadow:none !important; box-shadow:none !important; cursor:pointer; }
.h4i-ca-main table.vm-details-table .btn:hover, .h4i-ca-main table.vm-details-table input[type=button]:hover { background:#0560d6 !important; text-decoration:none; }
/* ON/OFF status pill (colours come from the iphone_switch rules above) */
.h4i-ca-main a.iphone_switch::before, .h4i-ca-main a.iphone_switch::after { display:none !important; content:none !important; }
.h4i-ca-main table.vm-details-table a.iphone_switch { margin:0 8px 0 0 !important; padding:3px 12px !important; font-size:12px !important; font-weight:700 !important; text-transform:uppercase; text-shadow:none !important; overflow:visible !important; cursor:pointer; vertical-align:middle; }

/* shared module components - buttons, fields, notices, popups (all module pages) */
.h4i-ca-main #content-cloud .btn, .h4i-ca-main #content-cloud input[type=submit], .h4i-ca-main #content-cloud input[type=button], .h4i-ca-main .orderbox .btn, .h4i-ca-main .orderbox input[type=submit] { display:inline-block; background:var(--h4i-primary) !important; background-image:none !important; color:#fff !important; border:1px solid var(--h4i-primary) !important; border-radius:8px !important; padding:6px 14px !important; font-size:13px !important; font-weight:600; line-height:1.5 !important; height:auto !important; text-shadow:none !important; box-shadow:none !important; cursor:pointer; text-decoration:none !important; }
.h4i-ca-main #content-cloud .btn:hover, .h4i-ca-main #content-cloud input[type=submit]:hover, .h4i-ca-main #content-cloud input[type=button]:hover, .h4i-ca-main .orderbox .btn:hover, .h4i-ca-main .orderbox input[type=submit]:hover { background:#0560d6 !important; border-color:#0560d6 !important; color:#fff !important; text-decoration:none !important; }
.h4i-ca-main #content-cloud .btn.btn-default, .h4i-ca-main #content-cloud .btn.btn-flat-default, .h4i-ca-main #content-cloud input[type=submit].gray, .h4i-ca-main #content-cloud input[type=button].gray { background:#fff !important; color:var(--h4i-text) !important; border:1px solid #d9dfec !important; }
.h4i-ca-main #content-cloud .btn.btn-default:hover, .h4i-ca-main #content-cloud .btn.btn-flat-default:hover, .h4i-ca-main #content-cloud input[type=submit].gray:hover, .h4i-ca-main #content-cloud input[type=button].gray:hover { background:var(--h4i-primary-soft) !important; color:var(--h4i-primary) !important; border-color:var(--h4i-primary) !important; }
.h4i-ca-main #content-cloud .btn.btn-danger, .h4i-ca-main #content-cloud .btn.btn-warning { background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; }
.h4i-ca-main #content-cloud .btn.btn-mini, .h4i-ca-main #content-cloud .btn.btn-xs, .h4i-ca-main #content-cloud .btn.btn-small { padding:3px 10px !important; font-size:12px !important; border-radius:6px !important; }
.h4i-ca-main #content-cloud .form-control, .h4i-ca-main #content-cloud input[type=text], .h4i-ca-main #content-cloud input[type=password], .h4i-ca-main #content-cloud input[type=number], .h4i-ca-main #content-cloud input[type=email], .h4i-ca-main #content-cloud select, .h4i-ca-main #content-cloud textarea { height:auto; padding:7px 10px; border:1px solid #d9dfec; border-radius:8px; background:#fff; color:var(--h4i-text); font-size:14px; box-shadow:none; }
.h4i-ca-main #content-cloud .form-control:focus, .h4i-ca-main #content-cloud input[type=text]:focus, .h4i-ca-main #content-cloud input[type=password]:focus, .h4i-ca-main #content-cloud input[type=number]:focus, .h4i-ca-main #content-cloud input[type=email]:focus, .h4i-ca-main #content-cloud select:focus, .h4i-ca-main #content-cloud textarea:focus { border-color:var(--h4i-primary); box-shadow:0 0 0 3px var(--h4i-primary-soft); outline:0; }
.h4i-ca-main #content-cloud .notice { background:var(--h4i-primary-soft); border:1px solid rgba(13, 20, 80,.2); border-radius:10px; padding:12px 16px; color:var(--h4i-text); }
.modal { border:0; border-radius:14px; box-shadow:0 20px 50px rgba(16,42,100,.18); }
.modal .modal-header { padding:16px 20px; border-bottom:1px solid var(--h4i-line); }
.modal .modal-header h3 { font-size:18px; font-weight:600; color:var(--h4i-text); }
.modal .modal-body { padding:20px; }
.modal .modal-footer { background:#fff; border-top:1px solid var(--h4i-line); border-radius:0 0 14px 14px; padding:14px 20px; }

/* page switch (Snapshots / Disks) */
.h4i-ca-main #content-cloud ul.sub-ul { float:right; display:inline-flex; gap:2px; height:auto; padding:3px; margin:0 0 0 12px; list-style:none; background:var(--h4i-primary-soft); border-radius:10px; box-shadow:none; }
.h4i-ca-main #content-cloud ul.sub-ul li { display:block; }
.h4i-ca-main #content-cloud ul.sub-ul li a { float:none; display:block; padding:5px 14px; font-size:13px; font-weight:600; line-height:1.4; color:var(--h4i-muted) !important; border-radius:8px; text-decoration:none; text-shadow:none; }
.h4i-ca-main #content-cloud ul.sub-ul li a span { background:none; padding:0; }
.h4i-ca-main #content-cloud ul.sub-ul li a:hover { color:var(--h4i-primary) !important; }
.h4i-ca-main #content-cloud ul.sub-ul li a.active { background:#fff; color:var(--h4i-primary) !important; box-shadow:0 1px 3px rgba(16,42,100,.12); }
/* dropdown menus inside module pages (Manage etc.) */
.h4i-ca-main #content-cloud .dropdown-menu { border:1px solid var(--h4i-line); border-radius:10px; padding:5px; min-width:180px; box-shadow:var(--h4i-shadow); }
.h4i-ca-main #content-cloud .dropdown-menu > li > a { padding:8px 12px; border-radius:8px; color:var(--h4i-text); font-size:13px; font-weight:500; background:transparent; }
.h4i-ca-main #content-cloud .dropdown-menu > li > a:hover, .h4i-ca-main #content-cloud .dropdown-menu > li > a:focus { background:var(--h4i-primary-soft) !important; background-image:none !important; color:var(--h4i-primary) !important; }

/* small icon links (all module pages) */
.h4i-ca-main #content-cloud a.small_control { display:flex; align-items:center; gap:7px; width:max-content; padding:3px 0 !important; background:none !important; background-image:none !important; color:var(--h4i-primary) !important; font-size:13px; font-weight:600; line-height:1.4; text-decoration:none !important; }
.h4i-ca-main #content-cloud a.small_control:hover { text-decoration:underline !important; }
.h4i-ca-main #content-cloud a.small_control::before { font-family:"Font Awesome 6 Free"; font-weight:900; font-size:13px; width:16px; text-align:center; line-height:1; }
.h4i-ca-main #content-cloud a.small_delete { color:#dc2626 !important; }
.h4i-ca-main #content-cloud a.small_delete::before { content:"\f2ed"; }
.h4i-ca-main #content-cloud a.small_pencil::before { content:"\f303"; }
.h4i-ca-main #content-cloud a.small_save::before { content:"\f0c7"; }
.h4i-ca-main #content-cloud a.small_up::before { content:"\f062"; }
.h4i-ca-main #content-cloud a.small_down::before { content:"\f063"; }
.h4i-ca-main #content-cloud a.small_backup::before { content:"\f187"; }
.h4i-ca-main #content-cloud a.small_backup_schedule::before { content:"\f073"; }
.h4i-ca-main #content-cloud a.small_backup_restore::before { content:"\f0a0"; }
.h4i-ca-main #content-cloud a.small_backup_convert::before { content:"\f24d"; }
.h4i-ca-main #content-cloud a.key-solid::before { content:"\f084"; }

/* ===== PHASE C - UPGRADE / ORDER PAGES (orderpages/order_upgrade.tpl) ===== */
.h4i-ca-main .wbox { background:#fff; border:1px solid var(--h4i-line); border-radius:16px; box-shadow:var(--h4i-shadow); margin:0 0 18px; overflow:hidden; }
.h4i-ca-main .wbox_header { background:none !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; padding:18px 22px !important; color:var(--h4i-text); font-size:18px; font-weight:700; text-shadow:none !important; box-shadow:none !important; }
.h4i-ca-main .wbox_content { padding:8px 22px 18px; background:transparent !important; border:0 !important; }
.h4i-ca-main table.checker th { background:transparent !important; background-image:none !important; border:0 !important; border-bottom:1px solid var(--h4i-line) !important; color:var(--h4i-muted) !important; font-size:13px; font-weight:600; padding:12px 8px; text-align:left; text-shadow:none !important; }
.h4i-ca-main table.checker td { color:var(--h4i-text); font-size:14px; padding:12px 8px; }
.h4i-ca-main table.checker td[align=right] { text-align:right; color:var(--h4i-muted); }
.h4i-ca-main table.checker strong { font-weight:600; }
.h4i-ca-main .orderbox { background:#fff; border:1px solid var(--h4i-line); border-radius:16px; padding:6px; margin:0 0 18px; box-shadow:none; }
.h4i-ca-main .orderboxpadding { padding:14px; text-align:center; border:0 !important; background:none !important; box-shadow:none !important; }
.h4i-ca-main .orderbox a.btn:not(.btn-primary) { background:#fff !important; color:var(--h4i-primary) !important; border:1px solid var(--h4i-primary) !important; }
.h4i-ca-main .cart_total { font-size:28px; font-weight:700; color:var(--h4i-primary); line-height:1.2; }
.h4i-ca-main #content-cloud .addon-bar { background:#fff !important; background-image:none !important; border:1px solid var(--h4i-line) !important; border-radius:12px; padding:20px 16px; box-shadow:none !important; }
.h4i-ca-main #content-cloud .slider, .h4i-ca-main .ui-slider { background:linear-gradient(#dfe6f5,#dfe6f5) no-repeat center / 100% 6px !important; height:34px; border-radius:6px; border:0 !important; }
.h4i-ca-main #content-cloud .slider a, .h4i-ca-main .ui-slider .ui-slider-handle { background:var(--h4i-primary) !important; background-image:none !important; width:20px; height:20px; border-radius:50%; top:7px; margin-left:-10px; box-shadow:0 2px 6px rgba(13, 20, 80,.35); border:0 !important; outline:0; }
.h4i-ca-main #content-cloud .slider a:hover, .h4i-ca-main .ui-slider .ui-slider-handle:hover { background:#0560d6 !important; }
@media (max-width:767px) {
  .h4i-ca-main .cloud-top { padding:18px 16px 0; }
  .h4i-ca-main .cloud-header h1.os-logo { font-size:20px; }
  .h4i-ca-main table.cloud-billing td { display:block; width:auto !important; border-bottom:0 !important; padding:4px 0 !important; }
  .h4i-ca-main table.cloud-billing td.title { padding-top:12px !important; }
}
/* ===== PHASE C - MOBILE FIXES 2 ===== */
.h4i-ca-main table.cloud-billing td { height:auto !important; line-height:1.4 !important; }
.h4i-ca-main table.cloud-billing td.title { white-space:normal; }
.h4i-list__actions .h4i-btn { white-space:nowrap; }
@media (max-width:575px) {
  .h4i-list__row { flex-wrap:wrap; }
  .h4i-list__actions { width:100%; }
  .h4i-list__actions .h4i-btn { flex:1; justify-content:center; }
}
/* ===== PHASE C - MOBILE FIXES 3 ===== */
.h4i-btn { white-space:nowrap; }
.h4i-table td { white-space:nowrap; }
@media (max-width:575px) {
  .h4i-panel__actions { flex-wrap:wrap; }
  .h4i-panel__actions .h4i-btn { flex:1; }
  .h4i-table-wrap { overflow-x:auto; }
}
/* ===== PHASE D - BILLING ===== */
.h4i-inv-bar {
  background: #fff;
  border-radius: var(--h4i-radius);
  box-shadow: var(--h4i-shadow);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.h4i-inv-balance {
  font-size: 16px;
  color: var(--h4i-text);
}
.h4i-inv-balance b {
  font-size: 20px;
  font-weight: 700;
  color: var(--h4i-text);
}
.h4i-inv-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.h4i-inv-actions form {
  margin: 0;
}
.h4i-inv-actions > div {
  margin: 0 !important;
  float: none !important;
}
.h4i-inv-table td:first-child input[type=checkbox] {
  margin: 0;
}
.h4i-inv-pages {
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 0 !important;
}
.h4i-inv-pages .pagelabel {
  float: none !important;
  color: var(--h4i-muted);
  font-size: 14px;
}

/* Extra status pills */
.h4i-status--paid {
  background: #e8f5ee;
  color: #16a34a;
}
.h4i-status--unpaid,
.h4i-status--receiptunpaid,
.h4i-status--chargeback {
  background: #fdecec;
  color: #dc2626;
}
.h4i-status--refunded,
.h4i-status--cancelled {
  background: #f1f2f5;
  color: #6B7488;
}
.h4i-status--collections {
  background: #fff4e5;
  color: #d97706;
}

/* Add Funds styling */
.h4i-af-desc {
  color: var(--h4i-muted);
  margin: -8px 0 20px;
  font-size: 15px;
}
.h4i-af-body {
  padding: 24px !important;
}
.h4i-field {
  margin-bottom: 18px;
  max-width: 420px;
}
.h4i-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--h4i-text);
  margin-bottom: 6px;
}
.h4i-input {
  display: block;
  width: 100% !important;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #dfe5f1;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  color: var(--h4i-text);
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
}
.h4i-input:focus {
  border-color: #0B1030;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(13, 20, 80, .12);
}
.h4i-af-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--h4i-line);
  padding-top: 18px;
  margin-top: 6px;
}
.h4i-af-limits {
  color: var(--h4i-muted);
  font-size: 14px;
}
.h4i-af-limits strong {
  color: var(--h4i-text);
}
.h4i-af-sub {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--h4i-text);
}

@media (max-width: 575px) {
  .h4i-inv-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .h4i-inv-actions .h4i-btn {
    flex: 1;
  }
  .h4i-af-foot .h4i-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== PHASE D - POLISH ===== */
.h4i-inv-table th a { color:var(--h4i-muted) !important; text-decoration:none !important; }
.h4i-inv-table th a:hover { color:var(--h4i-primary) !important; }
.h4i-ca-main .row:has(.h4i-af) { margin:0 !important; display:block !important; }
.h4i-ca-main .bordered-section:has(.h4i-af) { border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; width:auto !important; float:none !important; }

/* ===== PHASE E - SUPPORT TICKETS ===== */
.h4i-af .h4i-svc-title,
.h4i-tk .h4i-svc-title {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.h4i-tk-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.h4i-tk-titlerow .h4i-svc-title {
  margin: 0;
}

.h4i-tk-muted {
  color: var(--h4i-muted);
  font-size: 15px;
  margin: 0 0 16px;
}

.h4i-tk-search form {
  display: flex;
  gap: 8px;
  margin: 0;
}
.h4i-tk-search .h4i-input {
  width: 240px !important;
  height: 40px;
}

.h4i-tk-intro {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--h4i-shadow);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.h4i-tk-intro span {
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.h4i-tk-intro i {
  color: #0B1030;
}

.h4i-tk-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.h4i-tk-stats h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.h4i-tk-stats span {
  color: var(--h4i-muted);
  font-size: 14px;
}

.h4i-badge--grey {
  background: #f1f2f5;
  color: #6B7488;
}

.h4i-tk-table th a {
  color: var(--h4i-muted) !important;
  text-decoration: none !important;
}
.h4i-tk-date {
  white-space: nowrap;
  color: var(--h4i-muted);
}

.h4i-tk .h4i-field {
  max-width: none;
}
.h4i-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.h4i-textarea {
  height: auto !important;
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

.h4i-tk-form {
  padding: 0;
}
.h4i-tk-form .h4i-panel__body {
  padding: 24px;
}

/* Upload box */
.h4i-upload #dropzonecontainer {
  border: 2px dashed #c9d6ee;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f8faff;
}
#dropzone h2 {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--h4i-muted);
}
.h4i-upload .fileupload-buttonbar > div {
  float: none !important;
  width: auto !important;
}
.h4i-upload .fs11 {
  color: var(--h4i-muted);
  font-size: 12px;
  margin-top: 6px;
}
.h4i-upload .fileinput-button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #dfe5f1 !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  color: var(--h4i-text) !important;
  padding: 6px 12px !important;
}
.h4i-upload table.table {
  margin: 8px 0 0;
  background: transparent;
}

#submitbutton {
  background: #0B1030 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
}
#submitbutton:hover {
  background: #0b4fd6 !important;
}
#submitbutton.disabled,
#submitbutton[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Created box */
.h4i-tk-created__body {
  text-align: center;
  padding: 36px 24px !important;
}
.h4i-tk-created__icon {
  font-size: 44px;
  color: #16a34a;
  margin-bottom: 10px;
}
.h4i-tk-btnrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* View head */
.h4i-tk-head {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--h4i-shadow);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.h4i-tk-back {
  color: #0B1030;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.h4i-tk-num {
  color: var(--h4i-muted);
  font-size: 14px;
  margin-top: 10px;
}
.h4i-tk-subject {
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 10px;
  color: var(--h4i-text);
  white-space: pre-line;
}
.h4i-tk-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--h4i-muted);
  font-size: 14px;
}
.h4i-tk-meta i {
  color: #0B1030;
  margin-right: 4px;
}
.h4i-tk-head__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 280px;
  text-align: right;
}
.h4i-tk-head__actions form {
  margin: 0;
}
.h4i-tk-head__actions p {
  margin: 0;
  font-size: 13px;
}

/* Reply */
.h4i-tk-reply {
  margin-bottom: 24px;
}
.h4i-tk-h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.h4i-tk-h3 i {
  color: #0B1030;
}
.h4i-tk-check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--h4i-muted);
  margin: 10px 0 14px;
}
.h4i-tk-replyfoot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.h4i-tk-replyfoot .h4i-upload {
  flex: 1;
  min-width: 240px;
}

/* Thread */
.h4i-tk-thread .com-con {
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: none !important;
}
.h4i-msg {
  background: #fff !important;
  border: 0 !important;
  border-left: 4px solid #cfd8ea !important;
  border-radius: 14px;
  box-shadow: var(--h4i-shadow);
  padding: 18px 20px !important;
  margin: 0 0 16px !important;
}
.h4i-msg--staff {
  background: #f2f6ff !important;
  border-left-color: #0B1030 !important;
}
.h4i-msg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.h4i-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef2f9;
  color: #6B7488;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.h4i-msg--staff .h4i-msg-avatar {
  background: #0B1030;
  color: #fff;
}
.h4i-msg-who {
  flex: 1;
  min-width: 160px;
}
.h4i-msg-who small {
  display: block;
  color: var(--h4i-muted);
  font-size: 13px;
}
.h4i-staff-tag {
  display: inline-block;
  background: #0B1030;
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.h4i-msg-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.h4i-msg-tools .right {
  float: none !important;
}
.h4i-msg-body {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--h4i-text);
  word-break: break-word;
}
.h4i-msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.h4i-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f5f7fb;
  border: 1px solid #e6ebf5;
  color: var(--h4i-text) !important;
  font-size: 13px;
  text-decoration: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .h4i-tk-head__actions {
    align-items: stretch;
    max-width: none;
    width: 100%;
    text-align: left;
  }
  .h4i-tk-head__actions .h4i-btn {
    width: 100%;
    justify-content: center;
  }
  .h4i-field-row {
    grid-template-columns: 1fr;
  }
  .h4i-tk-search,
  .h4i-tk-search form {
    width: 100%;
  }
  .h4i-tk-search .h4i-input {
    width: auto !important;
    flex: 1;
  }
  .h4i-tk-replyfoot #submitbutton {
    width: 100%;
  }
}
/* Phase E fix: subject wraps naturally */
.h4i-tk-subject { white-space:normal !important; }

/* ===== PHASE F1 - ACCOUNT PAGES ===== */
/* remove HostBill's old account wrapper (same as Add Funds) */
.h4i-ca-main .row:has(.h4i-acc) { margin:0 !important; display:block !important; }
.h4i-ca-main .bordered-section:has(.h4i-acc), .h4i-ca-main [class*="span"]:has(> .h4i-acc) { border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; width:auto !important; float:none !important; }
.h4i-acc .h4i-svc-title { margin-left:0 !important; padding-left:0 !important; }
.h4i-acc-card .h4i-panel__body, .h4i-acc-priv .h4i-panel__body { padding:24px !important; }
.h4i-acc-card, .h4i-acc-priv { margin-bottom:20px; }
/* form controls inside account pages (covers editfields.tpl / ajax.signup.tpl / privileges.tpl) */
.h4i-acc input[type=text], .h4i-acc input[type=email], .h4i-acc input[type=password], .h4i-acc input[type=tel],
.h4i-acc input[type=number], .h4i-acc select, .h4i-acc textarea {
  display:block; width:100% !important; max-width:100%; height:44px; padding:8px 12px !important; border:1px solid #dfe5f1 !important;
  border-radius:8px !important; background:#fff !important; font-size:15px; color:var(--h4i-text); box-shadow:none !important;
  box-sizing:border-box; margin:0 !important; }
.h4i-acc textarea { height:auto; min-height:110px; }
.h4i-acc input:focus, .h4i-acc select:focus, .h4i-acc textarea:focus { border-color:#0B1030 !important; outline:0; box-shadow:0 0 0 3px rgba(13, 20, 80,.12) !important; }
.h4i-acc input[type=checkbox], .h4i-acc input[type=radio] { display:inline-block; width:auto !important; height:auto; margin:0 6px 0 0 !important; }
/* editfields.tpl table -> clean label/value rows */
.h4i-acc table.table { width:100%; border-collapse:collapse; background:transparent !important; margin:0; border:0 !important; }
.h4i-acc table.table td, .h4i-acc table.table th { background:#fff !important; border:0 !important; border-top:1px solid var(--h4i-line) !important; padding:12px 8px !important; vertical-align:middle; }
.h4i-acc table.table tr:first-child td { border-top:0 !important; }
.h4i-acc-card table.table td:first-child { width:220px; text-align:left !important; color:var(--h4i-muted); font-weight:500; font-size:14px; }
/* chosen.js country dropdown */
.h4i-acc .chzn-container { width:100% !important; max-width:100%; }
.h4i-acc .chzn-container-single .chzn-single { height:44px; line-height:42px; border:1px solid #dfe5f1; border-radius:8px; background:#fff; background-image:none; box-shadow:none; padding-left:12px; }
.h4i-acc .chzn-container-single .chzn-single div { top:8px; }
/* HostBill submit areas */
.h4i-acc .form-actions, .h4i-acc-actions { background:none !important; border:0 !important; border-top:1px solid var(--h4i-line) !important; padding:18px 0 0 !important; margin:16px 0 0 !important; text-align:left !important; }
.h4i-acc .form-actions center { text-align:left; }
.h4i-acc .form-actions input[type=submit], .h4i-acc .form-actions .btn {
  background:#0B1030 !important; background-image:none !important; color:#fff !important; border:0 !important; border-radius:8px !important;
  padding:10px 22px !important; font-size:15px !important; font-weight:600 !important; text-shadow:none !important; box-shadow:none !important; height:auto !important; }
.h4i-acc .form-actions input[type=submit]:hover { background:#0b4fd6 !important; }
/* tabs */
.h4i-tabs { display:flex; gap:4px; border-bottom:1px solid var(--h4i-line); margin:0 0 16px; }
.h4i-tab { padding:10px 16px; color:var(--h4i-muted); font-weight:600; font-size:15px; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none !important; }
.h4i-tab:hover { color:var(--h4i-text); }
.h4i-tab.active { color:#0B1030; border-bottom-color:#0B1030; }
/* contacts table + billing */
.h4i-acc-table th a { color:var(--h4i-muted) !important; text-decoration:none !important; }
.h4i-acc-table .btn-group { position:relative; display:inline-block; }
.h4i-acc-contacts .h4i-panel { overflow:visible; }
.h4i-acc-contacts .h4i-table-wrap { overflow:visible; }
.h4i-acc-billing { margin-top:20px; }
.h4i-acc-billing .h4i-input, .h4i-acc-billing select { max-width:420px; }
.h4i-del { background:none !important; color:#dc2626 !important; padding:0 !important; text-indent:0 !important; font-weight:600; text-decoration:none !important; }
.h4i-status--closed { background:#f1f2f5; color:#6B7488; }
/* security / ip */
.h4i-acc-ip__you { color:var(--h4i-muted); font-size:14px; } .h4i-acc-ip__you i { color:#0B1030; margin-right:4px; }
.h4i-acc-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; align-items:start; }
.h4i-acc-note { background:#f8faff; border:1px solid #e6ebf5; border-radius:12px; padding:16px 18px; font-size:13px; color:var(--h4i-muted); line-height:1.6; }
.h4i-acc-note b { color:var(--h4i-text); } .h4i-acc-note__list { list-style:none; padding:0; margin:4px 0 10px; }
/* privileges */
.h4i-acc-priv { margin-top:20px; } .h4i-acc-priv table td, .h4i-acc-priv table th { padding:8px !important; }
/* mobile */
@media (max-width:767px) {
  .h4i-acc-card table.table td { display:block; width:auto !important; border-top:0 !important; padding:6px 0 !important; }
  .h4i-acc-card table.table td:first-child { padding-top:14px !important; }
  .h4i-acc-grid { grid-template-columns:1fr; }
  .h4i-acc-contacts .h4i-table-wrap { overflow-x:auto; }
  .h4i-acc .form-actions input[type=submit], .h4i-acc-actions .h4i-btn { width:100%; }
}
/* ===== PHASE F2a ACCOUNT PAGES 2 ===== */
.h4i-ca-main .h4i-acc-mail__body{font-size:14px;line-height:1.7;color:#333;overflow-x:auto;word-break:break-word}
.h4i-ca-main .h4i-acc-mail__body img{max-width:100%!important;height:auto!important}
.h4i-ca-main .h4i-acc-mail__body table{max-width:100%!important}
.h4i-ca-main .h4i-acc-mail__link{color:var(--h4i-primary);font-weight:600;text-decoration:none}
.h4i-ca-main .h4i-acc-mail__link:hover{text-decoration:underline}
.h4i-ca-main .h4i-acc .h4i-tk-titlerow + .h4i-tk-muted{margin:-6px 0 14px}
.h4i-ca-main .h4i-acc-empty{text-align:center;color:var(--h4i-muted,#6b7280);padding:36px 20px!important;font-size:15px}
.h4i-ca-main .h4i-acc-empty i{display:block;font-size:32px;margin-bottom:10px;opacity:.5}
.h4i-ca-main .h4i-acc-empty h3{font-size:15px;font-weight:500;margin:0}
.h4i-ca-main .h4i-acc-settings .control-group{margin-bottom:16px}
.h4i-ca-main .h4i-acc-settings .control-label{font-weight:600;color:#1f2937}
.h4i-ca-main .h4i-acc-settings input[type=checkbox]{margin-right:6px}
.h4i-ca-main .h4i-acc-table{table-layout:fixed}
.h4i-ca-main .h4i-acc-table td{word-break:break-word}
.bordered-section:has(.h4i-acc){border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
/* ===== PHASE F2b ===== */
.h4i-ca-main .h4i-table th a,.h4i-ca-main .h4i-table th a.sortorder{color:var(--h4i-muted,#6b7280)!important;text-decoration:none!important}
.h4i-ca-main .h4i-table th a:hover{color:var(--h4i-primary)!important}
.h4i-ca-main .h4i-status--fail,.h4i-ca-main .h4i-status--failed,.h4i-ca-main .h4i-status--failure{background:#fdecec!important;color:#d92d20!important}
.h4i-ca-main .h4i-msg--staff strong,.h4i-ca-main .aticket strong,.h4i-ca-main .aticket .byline,.h4i-ca-main .h4i-msg--staff .red{color:var(--h4i-primary)!important}
.h4i-ca-main .h4i-acc-dl{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.h4i-ca-main .h4i-acc-dl p{flex:1 1 100%;margin:0}
.h4i-ca-main .h4i-acc-cancel__for{margin:0 0 18px;font-size:15px}
.h4i-ca-main .h4i-acc-cancel__for a{color:var(--h4i-primary);font-weight:600}
.h4i-ca-main .h4i-acc-radio{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:400;cursor:pointer}
.h4i-ca-main .h4i-acc-radio input{margin:0}
.h4i-ca-main .h4i-acc-cancel textarea.h4i-input{width:100%;min-height:120px;margin-top:6px}
.h4i-ca-main .h4i-acc-warn{background:#fff8e6;border:1px solid #f5d38a;color:#8a5a00;border-radius:10px;padding:12px 14px;margin:0 0 16px}
.h4i-ca-main .h4i-acc-cancel .h4i-af-foot{gap:10px;flex-wrap:wrap}
.h4i-ca-main .h4i-sup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.h4i-ca-main .h4i-sup-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.h4i-ca-main .h4i-sup-head h3{flex:1;margin:0;font-size:18px;font-weight:600}
.h4i-ca-main .h4i-sup-ico{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#eaf2ff;color:var(--h4i-primary);font-size:18px}
.h4i-ca-main .h4i-sup-list{list-style:none;margin:0;padding:0}
.h4i-ca-main .h4i-sup-list li{padding:10px 0;border-top:1px solid var(--h4i-line,#eef0f4);display:flex;gap:10px;align-items:center}
.h4i-ca-main .h4i-sup-list li:first-child{border-top:0}
.h4i-ca-main .h4i-sup-list a{color:#1f2937;text-decoration:none}
.h4i-ca-main .h4i-sup-list a:hover{color:var(--h4i-primary)}
@media (max-width:767px){.h4i-ca-main .h4i-sup-grid{grid-template-columns:1fr}}
.bordered-section:has(.h4i-acc){border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
/* ===== F2b fix - wrap long text in overview table ===== */
.h4i-ca-main .h4i-acc-table th,.h4i-ca-main .h4i-acc-table td{white-space:normal!important;word-break:break-word}
.h4i-ca-main .h4i-table-wrap:has(.h4i-acc-table){overflow-x:visible}

/* cloud service header and tab row */
.h4i-ca-main .cloud-top{padding:28px 26px !important}
.h4i-ca-main .cloud-nav{margin:26px 0 0 !important}
.h4i-ca-main .cloud-nav ul.level-1{align-items:center !important}
.h4i-ca-main .cloud-nav ul.level-1 li{display:flex !important;align-items:center !important;background:transparent !important;padding:0 !important;border-radius:0 !important}
.h4i-ca-main .cloud-nav ul.level-1 li > a{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:40px !important;padding:0 20px !important;border-radius:999px !important;line-height:1 !important}
.h4i-ca-main .cloud-nav ul.level-1 li.current-menu-item > a{background:#fff !important;color:#0D1450 !important}

/* client area: centre label inside every button */
.h4i-ca-main .btn,
.h4i-ca-main button.btn,
.h4i-ca-main .h4i-btn,
.h4i-ca-main .h4i-btn--primary,
.h4i-ca-main .h4i-btn--ghost,
.h4i-ca-main .h4i-btn--success{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}

/* login / signup card: narrower and less oversized */
.h4i-auth{padding:56px 16px !important}
.h4i-auth-card{max-width:440px !important;padding:36px 32px 24px !important;margin:0 auto !important}
.h4i-auth-card h1,.h4i-auth-card h2{font-size:30px !important;line-height:1.2 !important}
.h4i-auth-card input[type=text],
.h4i-auth-card input[type=email],
.h4i-auth-card input[type=password]{height:50px !important;font-size:15px !important;padding:0 44px 0 46px !important}
.h4i-auth-card .h4i-btn-submit{height:50px !important;min-height:0 !important;font-size:16px !important;margin:20px 0 24px !important}

/* signup / bordered form pages: match the client area */
.bordered-section.article{background:#fff !important;border:1px solid #EFF2FA !important;border-radius:14px !important;box-shadow:0 4px 16px rgba(16,42,100,.06) !important;padding:28px 28px 24px !important;margin:28px 0 !important}
.bordered-section.article h2{font-family:'Sora',system-ui,sans-serif !important;color:#0D1450 !important;font-size:26px !important;border:0 !important;padding:0 0 18px !important;margin:0 0 20px !important;border-bottom:1px solid #EFF2FA !important}
.bordered-section label{font-weight:600 !important;color:#0B1524 !important;font-size:14px !important;margin-bottom:6px !important;display:block !important}
.bordered-section input[type=text],
.bordered-section input[type=email],
.bordered-section input[type=password],
.bordered-section input[type=tel],
.bordered-section select,
.bordered-section textarea{height:46px !important;width:100% !important;box-sizing:border-box !important;border:1px solid #DEE0E3 !important;border-radius:10px !important;padding:0 14px !important;font-size:15px !important;background:#fff !important}
.bordered-section textarea{height:auto !important;padding:12px 14px !important}
.bordered-section input[type=submit].btn,
.bordered-section .btn-info{background:#0D1450 !important;border-color:#0D1450 !important;color:#fff !important;height:48px !important;border-radius:10px !important;padding:0 26px !important;font-size:16px !important}

/* chosen dropdowns (country etc.) */
.bordered-section .chzn-container,
.bordered-section .chzn-container-single{width:100% !important}
.bordered-section .chzn-container-single .chzn-single{height:46px !important;line-height:44px !important;border:1px solid #DEE0E3 !important;border-radius:10px !important;background:#fff !important;box-shadow:none !important;padding:0 14px !important;font-size:15px !important;color:#0B1524 !important}
.bordered-section .chzn-container-single .chzn-single div{top:0 !important;height:46px !important;display:flex !important;align-items:center !important}
.bordered-section .chzn-container-single .chzn-single span{margin-right:28px !important}
.bordered-section .chzn-drop{border:1px solid #DEE0E3 !important;border-radius:10px !important;box-shadow:0 10px 28px rgba(16,42,100,.11) !important}
.bordered-section .chzn-search input{height:38px !important;border-radius:8px !important;border:1px solid #DEE0E3 !important;padding:0 10px !important}
.bordered-section .chzn-results .highlighted{background:#0D1450 !important;color:#fff !important}

/* wbox pages (forgot password etc.): match the new theme */
.wbox{background:#fff !important;border:1px solid #EFF2FA !important;border-radius:14px !important;box-shadow:0 4px 16px rgba(16,42,100,.06) !important;max-width:460px !important;margin:48px auto !important}
div:has(> .wbox)::before,
div:has(> .wbox)::after{display:none !important;content:none !important}
.wbox_header{background:#fff !important;border:0 !important;border-bottom:1px solid #EFF2FA !important;border-radius:14px 14px 0 0 !important;padding:20px 24px !important;font-family:'Sora',system-ui,sans-serif !important;color:#0D1450 !important;font-size:19px !important;font-weight:700 !important}
.wbox_content{background:#fff !important;border:0 !important;box-shadow:none !important;padding:22px 24px 24px !important;border-radius:0 0 14px 14px !important}
.wbox .alert-info{background:#F4F7FF !important;border:1px solid #E2E9FB !important;color:#344054 !important;border-radius:10px !important;padding:14px 16px !important;font-size:14px !important}
.wbox input.styled,.wbox input[type=text],.wbox input[type=email]{height:46px !important;width:100% !important;box-sizing:border-box !important;border:1px solid #DEE0E3 !important;border-radius:10px !important;padding:0 14px !important;font-size:15px !important}
.wbox input[type=submit].btn,.wbox .btn-info{background:#0D1450 !important;border-color:#0D1450 !important;color:#fff !important;height:48px !important;border-radius:10px !important;padding:0 22px !important;font-size:15px !important;box-shadow:none !important}
.wbox a.btn.btn-mini{background:#fff !important;border:1px solid #DEE0E3 !important;color:#0D1450 !important;border-radius:10px !important;height:40px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 16px !important;box-shadow:none !important}

/* login / signup card on phones */
@media (max-width:600px){
  .h4i-auth-card{max-width:none !important;padding:28px 20px 20px !important;margin:24px auto !important}
  .h4i-label-row{flex-wrap:wrap !important;gap:2px 14px !important}
  .h4i-label-row .h4i-forgot-link{font-size:13px !important;margin-left:auto !important}
  .h4i-auth-card form .h4i-form-group{margin-bottom:16px !important}
  .h4i-auth-card form input[type="hidden"]{display:none !important}
  .h4i-auth-card .h4i-btn-submit{margin-top:4px !important}
  .wa-float{padding:8px 12px !important;font-size:13px !important}
}

/* signup + password reminder on phones */
@media (max-width:600px){
  /* signup: HostBill lays this out as a two-column table */
  #signup .bordered-section,#signup .p19,#signup form{width:auto !important;max-width:100% !important}
  #signup table,#signup tbody,#signup tr,#signup td{display:block !important;width:100% !important;max-width:100% !important}
  #signup td{padding-left:0 !important;padding-right:0 !important}
  #signup input[type="text"],#signup input[type="email"],#signup input[type="password"],#signup select,
  #signup .chzn-container{width:100% !important;max-width:100% !important;box-sizing:border-box !important}

  /* password reminder: container is hard-coded to 480px */
  #loginbox_container{width:auto !important;max-width:100% !important;margin:0 !important}
  .wbox{width:auto !important;max-width:100% !important;margin:24px 12px !important;box-sizing:border-box !important}
  .wbox_header,.wbox_content,.wbox .alert{width:auto !important;max-width:100% !important;box-sizing:border-box !important}
  .wbox table,.wbox tbody,.wbox tr,.wbox td{display:block !important;width:100% !important}
  .wbox input[type="text"],.wbox input[type="email"],.wbox input.styled{width:100% !important;box-sizing:border-box !important}
  .wbox .btn{white-space:normal !important;float:none !important;display:inline-block !important}
  .wbox .clear{width:auto !important}
}

/* signup: recover the width lost to nested padding on phones */
@media (max-width:600px){
  #signup .bordered-section{padding:20px 14px 18px !important;margin:16px 0 !important}
  #signup .p19{padding:0 !important}
  #signup form{margin-left:0 !important;margin-right:0 !important}
}

/* signup: only the OUTER table makes the two columns; the inner one holds
   each label+field pair and must stay a real table or rows overlap */
@media (max-width:600px){
  #signup table.newchecker{display:table !important;width:100% !important;table-layout:fixed !important}
  #signup table.newchecker > tbody{display:table-row-group !important}
  #signup table.newchecker > tbody > tr{display:table-row !important}
  #signup table.newchecker > tbody > tr > td{display:table-cell !important;width:auto !important}
}

/* password reminder: line the alert, field and button up on one edge */
@media (max-width:600px){
  .wbox .alert{margin-left:0 !important;margin-right:0 !important}
  .wbox td{padding-left:0 !important;padding-right:0 !important}
  .wbox .right{float:none !important;width:100% !important;text-align:center !important}
  .wbox .right .btn,.wbox .right button,.wbox .right input[type="submit"]{
    display:block !important;width:100% !important;text-align:center !important;box-sizing:border-box !important}
}

/* the back-link in the wbox header is also .right - keep it its own size */
@media (max-width:600px){
  .wbox .wbox_header a.btn{width:auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
}

/* no WhatsApp float once signed in - tickets and the dashboard are right there */
body:has(.h4i-ca-main) .wa-float{display:none !important}

/* HostBill bootstrap buttons -> site theme */
.btn-primary, .btn-success, .btn-info,
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus{
  background:#0D1450 !important;
  background-image:none !important;
  border-color:#0D1450 !important;
  color:#fff !important;
  border-radius:10px !important;
  text-shadow:none !important;
  font-weight:600;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover{background:#1A2370 !important;border-color:#1A2370 !important}
.btn-danger, .btn-danger:hover{background-image:none !important;border-radius:10px !important;text-shadow:none !important}

/* SSH key: make the inline "Log In" read as a link */
.ssh-key-control label a{
  color:#0D1450;
  font-weight:700;
  text-decoration:underline !important;
  text-underline-offset:2px;
}
.ssh-key-control label a:hover{color:#FF9933}

/* coupon error shown inside the cart summary */
.h4i-inline-alert{margin:0 0 12px !important;padding:10px 12px !important;font-size:13px;line-height:1.4;border-radius:8px}

/* "Enter new key" should read as a field label like the others */
.ssh-key-new{font-weight:500 !important;color:#17191c !important;margin-bottom:8px !important}

/* keep the dismiss x inside the inline alert box */
.h4i-inline-alert{position:relative;padding:10px 32px 10px 12px !important}
.h4i-inline-alert .close{position:absolute !important;top:7px !important;right:10px !important;float:none !important;line-height:1;opacity:.5}
.h4i-inline-alert .close:hover{opacity:.9}

/* cart summary: not the centred wbox card */
#floater .wbox{margin:0 !important;max-width:none !important}

/* widget forms (Blackwall etc.): Bootstrap markup, our theme */
body.h4i-ca .panel{background:#fff;border:1px solid #EFF2FA;border-radius:14px;box-shadow:0 4px 16px rgba(16,42,100,.06);overflow:hidden;margin:0 0 18px}
body.h4i-ca .panel-heading{background:#fff;border-bottom:1px solid #EFF2FA;padding:16px 20px}
body.h4i-ca .panel-title{font-family:'Sora',system-ui,sans-serif;color:#0D1450;font-size:16px;font-weight:700;margin:0}
body.h4i-ca .panel-body{padding:20px}
body.h4i-ca .form-group{margin:0 0 18px}
body.h4i-ca .form-group > label{display:block;font-size:14px;font-weight:500;color:#17191c;margin:0 0 8px}
body.h4i-ca .form-control{height:46px;width:100%;max-width:420px;box-sizing:border-box;border:1px solid #DEE0E3;border-radius:10px;padding:0 14px;font-size:15px;color:#0B1524;background:#fff;box-shadow:none}
body.h4i-ca .form-control:focus{border-color:#0D1450;outline:none;box-shadow:0 0 0 3px rgba(13,20,80,.08)}
body.h4i-ca textarea.form-control{height:auto;padding:12px 14px;line-height:1.5}
body.h4i-ca .form-group small.text-muted{display:block;font-size:13px;color:#4b4f58;margin-top:6px}
body.h4i-ca .checkbox{margin:0 0 18px}
body.h4i-ca .checkbox label{display:inline-flex;align-items:center;font-size:14px;color:#17191c}
body.h4i-ca input[type=checkbox]{width:16px;height:16px;accent-color:#0D1450;margin:0 8px 0 0}

/* client-area alerts + checkbox */
body.h4i-ca .alert{border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.45;border:1px solid transparent}
body.h4i-ca .alert-info{background:#F4F7FF;border-color:#E2E9FB;color:#344054}
body.h4i-ca .alert-success{background:#F1F9F4;border-color:#D7EFDD;color:#235C36}
body.h4i-ca .alert-error,body.h4i-ca .alert-danger{background:#FDF3F3;border-color:#F6DADA;color:#8C2F2F}
body.h4i-ca .alert .fa{margin-right:8px;opacity:.75}

body.h4i-ca input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid #DEE0E3;border-radius:5px;background:#fff;margin:0 8px 0 0;cursor:pointer;position:relative;flex:0 0 auto;vertical-align:middle}
body.h4i-ca input[type=checkbox]:hover{border-color:#0D1450}
body.h4i-ca input[type=checkbox]:checked{background:#0D1450;border-color:#0D1450}
body.h4i-ca input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
body.h4i-ca input[type=checkbox]:focus-visible{outline:2px solid rgba(13,20,80,.3);outline-offset:2px}