/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* =====================================================
   FIX: .srf-whmcs a { color } overrides Bootstrap
   button text colors on <a> elements.
   Global a { color:#0098ef } and .srf-whmcs a have
   higher specificity than .btn-* classes alone.
   ===================================================== */

/* --- Buttons with white text --- */
.srf-whmcs a.btn-success,
.srf-whmcs a.btn-success:hover,
.srf-whmcs a.btn-success:focus,
.srf-whmcs a.btn-success:active,
.srf-whmcs a.btn-danger,
.srf-whmcs a.btn-danger:hover,
.srf-whmcs a.btn-danger:focus,
.srf-whmcs a.btn-danger:active,
.srf-whmcs a.btn-warning,
.srf-whmcs a.btn-warning:hover,
.srf-whmcs a.btn-warning:focus,
.srf-whmcs a.btn-warning:active,
.srf-whmcs a.btn-info,
.srf-whmcs a.btn-info:hover,
.srf-whmcs a.btn-info:focus,
.srf-whmcs a.btn-info:active,
.srf-whmcs a.btn-primary,
.srf-whmcs a.btn-primary:hover,
.srf-whmcs a.btn-primary:focus,
.srf-whmcs a.btn-primary:active,
a.btn-success,
a.btn-success:hover,
a.btn-success:focus,
a.btn-danger,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-warning,
a.btn-warning:hover,
a.btn-warning:focus,
a.btn-info,
a.btn-info:hover,
a.btn-info:focus,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
    color: #fff;
}

/* --- Default/light button text stays dark --- */
.srf-whmcs a.btn-default,
.srf-whmcs a.btn-default:hover,
.srf-whmcs a.btn-default:focus,
.srf-whmcs a.btn-light,
.srf-whmcs a.btn-light:hover,
.srf-whmcs a.btn-light:focus,
a.btn-default,
a.btn-default:hover,
a.btn-default:focus,
a.btn-light,
a.btn-light:hover,
a.btn-light:focus {
    color: #333;
}

/* --- Generic .btn anchor reset: don't inherit link color --- */
.srf-whmcs a.btn,
a.btn {
    text-decoration: none;
}

/* =====================================================
   FIX: button:hover, .button:hover { color: #a0abbc }
   grays out button text on hover
   ===================================================== */
button.btn:hover,
.srf-whmcs button.btn:hover,
button.btn-primary:hover,
button.btn-success:hover,
button.btn-danger:hover,
button.btn-warning:hover,
button.btn-info:hover {
    color: #fff;
}

button.btn-default:hover,
button.btn-light:hover {
    color: #333;
}

/* =====================================================
   FIX: .close button inherits link blue color
   ===================================================== */
.srf-whmcs .close,
.srf-whmcs .close:hover,
.srf-whmcs .close:focus,
.srf-whmcs button.close {
    color: #000;
    opacity: 0.4;
}

.srf-whmcs .close:hover {
    opacity: 0.7;
}

/* =====================================================
   FIX: Alert links need proper contrast
   ===================================================== */
.srf-whmcs .alert a {
    text-decoration: underline;
    font-weight: 600;
}

.srf-whmcs .alert-success a {
    color: #3c763d;
}

.srf-whmcs .alert-danger a {
    color: #a94442;
}

.srf-whmcs .alert-warning a {
    color: #8a6d3b;
}

.srf-whmcs .alert-info a {
    color: #31708f;
}

/* =====================================================
   FIX: Panel heading links should not be blue
   ===================================================== */
.srf-whmcs .panel-default>.panel-heading a {
    color: inherit;
}

.srf-whmcs .panel-primary>.panel-heading a {
    color: #fff;
}

/* =====================================================
   FIX: Table action button links
   ===================================================== */
.srf-whmcs table a.btn,
.srf-whmcs table a.btn:hover {
    text-decoration: none;
}

.srf-whmcs table a.btn-sm {
    color: #fff;
}

.srf-whmcs table a.btn-default,
.srf-whmcs table a.btn-default:hover {
    color: #333;
}

/* =====================================================
   FIX: Breadcrumb active item contrast
   ===================================================== */
.srf-whmcs .breadcrumb>.active {
    color: #777;
}

/* =====================================================
   FIX: Dropdown menu links in WHMCS area
   ===================================================== */
.srf-whmcs .dropdown-menu>li>a {
    color: #333;
}

.srf-whmcs .dropdown-menu>li>a:hover,
.srf-whmcs .dropdown-menu>li>a:focus {
    color: #262626;
    background-color: #f5f5f5;
}

/* =====================================================
   FIX: Pagination links inherit blue instead of themed
   ===================================================== */
.srf-whmcs .pagination>li>a {
    color: #0098ef;
}

.srf-whmcs .pagination>.active>a,
.srf-whmcs .pagination>.active>a:hover,
.srf-whmcs .pagination>.active>a:focus {
    color: #fff;
}

.srf-whmcs .pagination>.disabled>a {
    color: #777;
}

/* =====================================================
   FIX: Modal button and footer links
   ===================================================== */
.srf-whmcs .modal-footer a.btn {
    text-decoration: none;
}

.srf-whmcs .modal-footer a.btn-primary,
.srf-whmcs .modal-footer a.btn-success,
.srf-whmcs .modal-footer a.btn-danger,
.srf-whmcs .modal-footer a.btn-info,
.srf-whmcs .modal-footer a.btn-warning {
    color: #fff;
}

/* =====================================================
   FIX: Sidebar list-group items
   ===================================================== */
.srf-whmcs .panel-sidebar .list-group-item {
    color: #555;
}

.srf-whmcs .panel-sidebar .list-group-item:hover {
    color: #333;
}

/* =====================================================
   FIX: WHMCS order form btn text (legacy_modern etc.)
   ===================================================== */
#order-modern a.btn-success,
#order-modern a.btn-success:hover,
#order-modern a.btn-primary,
#order-modern a.btn-primary:hover {
    color: #fff;
}

/* =====================================================
   FIX: input-group-btn links
   ===================================================== */
.srf-whmcs .input-group-btn a.btn,
.srf-whmcs .input-group-btn a.btn:hover {
    color: #fff;
}

.srf-whmcs .input-group-btn a.btn-default,
.srf-whmcs .input-group-btn a.btn-default:hover {
    color: #333;
}

/* =====================================================
   FIX: Tab nav links shouldn't all be theme blue
   ===================================================== */
.srf-whmcs .nav-tabs>li>a {
    color: #555;
}

.srf-whmcs .nav-tabs>li>a:hover {
    color: #333;
}

.srf-whmcs .nav-tabs>li.active>a,
.srf-whmcs .nav-tabs>li.active>a:hover,
.srf-whmcs .nav-tabs>li.active>a:focus {
    color: #333;
}

/* =====================================================
   FIX: Disabled button states
   ===================================================== */
.srf-whmcs a.btn.disabled,
.srf-whmcs a.btn[disabled],
a.btn.disabled,
a.btn[disabled] {
    color: #a0abbc !important;
    pointer-events: none;
}

/* =====================================================
   Clouding Theme — Custom Design Tokens
   Matches cloudhost_preview.html exactly
   ===================================================== */

/* --- Pricing Boxes --- */
.pricing-box {
    background: var(--pricing-bg);
    border: var(--pricing-border);
    border-radius: var(--pricing-border-radius);
    padding: var(--pricing-padding);
    box-shadow: var(--pricing-shadow);
    transition: var(--transition-base);
    text-align: center;
}

.pricing-box:hover {
    box-shadow: var(--pricing-hover-shadow);
    transform: var(--pricing-hover-transform);
}

.pricing-box.featured {
    background: var(--brand-primary);
    color: #fff;
    transform: scale(1.05);
}

.pricing-title {
    font-size: var(--pricing-title-font-size);
    font-weight: var(--pricing-title-font-weight);
    margin-bottom: 20px;
}

.pricing-price {
    font-size: var(--pricing-price-font-size);
    font-weight: var(--pricing-price-font-weight);
    margin-bottom: 10px;
}

.pricing-price span {
    font-size: 14px;
    opacity: 0.8;
}

.pricing-features {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: left;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-body);
}

.featured .pricing-features li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pricing-features li i {
    color: var(--brand-success);
    margin-right: 10px;
}

/* --- Hero Section --- */
.ch-hero {
    padding: 80px 0;
    background: var(--surface-page);
    text-align: center;
}

.ch-hero h1 {
    font-size: var(--font-size-display);
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 20px;
}

.ch-hero p {
    font-size: var(--font-size-xl);
    color: var(--text-body);
    max-width: 600px;
    margin: 0 auto 40px;
}

/* --- Hide redundant original homepage hero blocks --- */
#home-banner {
    display: none !important;
}

.home-shortcuts {
    display: none !important;
}

/* ======= GoDaddy-Style Client Area Buttons & Top Menu ======= */
.ca-btn-clientarea { transition: all 0.2s ease; border-radius: 4px !important; color: #222 !important; font-weight: 700; background: #ffcc00 !important; padding: 10px 18px !important; font-size: 13px; text-transform: uppercase; border: none !important; box-shadow: none !important; letter-spacing: 0.5px; }
.ca-btn-clientarea:hover { background: #f3b900 !important; color: #000 !important; text-decoration: none !important; }
.ca-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-accent, #0098ef); color: #fff !important; font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: var(--radius-base, 4px); border: none; transition: all 0.2s ease; cursor: pointer; }
.ca-btn-primary:hover { background: #0088d6; color: #fff !important; text-decoration: none; box-shadow: 0 4px 8px rgba(0,152,239,0.25); }
.ca-btn-primary i { color: #fff !important; }
.ca-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 50px; border: 1px solid var(--border-default, #e6e9ee); background: var(--surface-card, #fff); color: var(--gray-600, #4a5669); text-decoration: none; transition: all 0.15s; }
.ca-btn-outline:hover { background: var(--gray-25, #fafbfc); border-color: var(--gray-300, #c5cdd8); text-decoration: none; }

.ca-topmenu { background: var(--surface-card, #fff); border-bottom: 1px solid var(--border-default, #e6e9ee); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.ca-topmenu .container { display: flex; align-items: center; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ca-topmenu .container::-webkit-scrollbar { display: none; }
.ca-topmenu-item { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--gray-500, #6b7b93); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.ca-topmenu-item:hover, .ca-topmenu-item:focus { color: var(--brand-accent, #0098ef); text-decoration: none; }
.ca-topmenu-item.active { color: var(--brand-accent, #0098ef); border-bottom-color: var(--brand-accent, #0098ef); }
.ca-topmenu-item i { font-size: 16px; width: 18px; text-align: center; }
.ca-topmenu-badge { background: var(--brand-danger, #d9534f); color: #fff !important; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; line-height: 1.5; }

/* Force white text on active sidebar items */
.panel-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active:hover,
.panel-sidebar .list-group-item.active:focus {
    color: #ffffff !important;
}
.panel-sidebar .list-group-item.active i {
    color: #ffffff !important;
}

/* Ensure contrast for active list items in sidebars */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus,
.list-group-item.active {
    color: #ffffff !important;
}
a.list-group-item.active i,
.list-group-item.active i {
    color: #ffffff !important;
}

/* Force white text on all active sidebar/list-group elements globally */
.srf-whmcs .panel-sidebar .list-group-item.active,
.srf-whmcs .panel-sidebar .list-group .list-group-item.active,
.srf-whmcs .sidebar .list-group-item.active,
.srf-whmcs .sidebar-secondary .list-group-item.active,
.panel-sidebar .list-group-item.active,
.panel-default .list-group-item.active,
.panel-sidebar .list-group-item.active:hover,
.panel-sidebar .list-group-item.active:focus {
    color: #ffffff !important;
}

.srf-whmcs .panel-sidebar .list-group-item.active i,
.srf-whmcs .panel-sidebar .list-group .list-group-item.active i,
.srf-whmcs .sidebar .list-group-item.active i,
.srf-whmcs .sidebar-secondary .list-group-item.active i,
.panel-sidebar .list-group-item.active i,
.panel-default .list-group-item.active i {
    color: #ffffff !important;
}