/* ==========================================================================
   OmniHost WHMCS Skin  —  matches www.omnihost.co.id landing
   Loaded LAST in cubehostv2/includes/head.tpl so it overrides
   bootstrap 4.5 / six parent / cubehostv2 CSS. Pure appearance layer:
   no markup/functional changes, fully revertible.
   ========================================================================== */

:root {
  --oh-green-700: #15803d;
  --oh-green-600: #16a34a;
  --oh-green-500: #22c55e;
  --oh-mint:      #10b981;
  --oh-mint-400:  #34d399;
  --oh-brand: linear-gradient(135deg, #16a34a, #10b981, #34d399);
  --oh-ink:   #0f172a;
  --oh-slate: #334155;
  --oh-muted: #64748b;
  --oh-line:  #e6ebf1;
  --oh-soft:  #f1f7f3;
  --oh-r:     16px;
  --oh-r-sm:  12px;
  --oh-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --oh-shadow: 0 14px 34px -14px rgba(16,163,74,.22), 0 4px 14px rgba(15,23,42,.06);
}

/* -------- override cubehostv2/theme brand VARIABLES -> OmniHost green --------
   The theme drives its bespoke components (.cubehostv2-btn, links, headings,
   accents) from these custom properties, so remapping them recolors the whole
   theme at once. Loaded after the theme so these win by source order.          */
:root {
  --color-primary: #16a34a;
  --color-primary-rgb: 22, 163, 74;
  --color-secondary: #15803d;
  --color-secondary-rgb: 21, 128, 61;
  --color-heading: #0f172a;
  --color-body: #334155;
  --color-success: #10b981;
  --color-info: #0ea5e9;
}

/* force the landing font on form controls & bespoke buttons */
button, input, optgroup, select, textarea, .cubehostv2-btn, .form-input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* theme bespoke components (login / register / homepage) */
.cubehostv2-btn { background: var(--oh-brand) !important; color: #fff !important; }
.cubehostv2-btn:hover, .cubehostv2-btn:focus { color: #fff !important; }
.btn-primary-two { background: var(--oh-brand) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; }
.form-input, .form-input.form-control { border: 1px solid var(--oh-line) !important; border-radius: var(--oh-r-sm) !important; color: var(--oh-ink) !important; }
.form-input:focus { border-color: var(--oh-green-500) !important; box-shadow: 0 0 0 4px rgba(34,197,94,.15) !important; }
.acnchor { color: var(--oh-green-700) !important; }
.acnchor:hover { color: var(--oh-green-600) !important; }
.login-page, .process { background: transparent; }


/* ------------------------------ base ------------------------------ */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: var(--oh-slate);
  background: #f6faf7;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--oh-ink); font-weight: 800; letter-spacing: -.01em;
}
a { color: var(--oh-green-700); }
a:hover, a:focus { color: var(--oh-green-600); }
.text-primary { color: var(--oh-green-600) !important; }
.bg-primary { background: var(--oh-brand) !important; }
hr { border-color: var(--oh-line); }
::selection { background: rgba(34,197,94,.22); }
.text-success, .text-green { color: var(--oh-green-600) !important; }

/* ------------------------------ buttons ------------------------------ */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: .01em; transition: .18s ease; }
.btn-lg { padding: .8rem 1.7rem; }
.btn-primary, .btn-info {
  background: var(--oh-brand) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(16,163,74,.5);
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus {
  transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(16,163,74,.6); color: #fff !important;
}
.btn-success { background: var(--oh-green-600) !important; border: 0 !important; color: #fff !important; }
.btn-success:hover { background: var(--oh-green-700) !important; }
.btn-default, .btn-secondary, .btn-light {
  background: #fff !important; border: 1px solid var(--oh-line) !important; color: var(--oh-ink) !important; box-shadow: var(--oh-shadow-sm);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  border-color: var(--oh-green-500) !important; color: var(--oh-green-700) !important; transform: translateY(-1px);
}
.btn-outline-primary { color: var(--oh-green-700) !important; border-color: var(--oh-green-500) !important; background: #fff !important; }
.btn-outline-primary:hover { background: var(--oh-green-600) !important; color: #fff !important; }
.btn-order, .order-button, .btn-checkout { background: var(--oh-brand) !important; border: 0 !important; color: #fff !important; }

/* ------------------------------ header / navbar ------------------------------ */
.navbar { font-family: 'Plus Jakarta Sans', sans-serif; }
#header, header#header { background: #fff !important; }
#header .navbar, .navbar-inverse, .navbar-default, header .navbar {
  background: #fff !important; border: 0 !important; box-shadow: var(--oh-shadow-sm);
}
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
#header .navbar a, .primary-nav a { color: var(--oh-slate) !important; font-weight: 600; }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
#header .navbar a:hover, .primary-nav a:hover { color: var(--oh-green-700) !important; }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a { background: var(--oh-soft) !important; color: var(--oh-green-700) !important; }
.navbar-brand { color: var(--oh-ink) !important; font-weight: 800; }
.account-menu, .top-list { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ------------------------------ cards / panels ------------------------------ */
.card, .panel {
  border: 1px solid var(--oh-line) !important; border-radius: var(--oh-r) !important;
  box-shadow: var(--oh-shadow-sm); background: #fff;
}
.card-header, .panel-heading {
  background: #fff !important; border-bottom: 1px solid var(--oh-line) !important;
  font-weight: 700; color: var(--oh-ink); border-radius: var(--oh-r) var(--oh-r) 0 0 !important;
}
.panel-title, .card-title { font-weight: 700; color: var(--oh-ink); }
.panel-primary > .panel-heading, .card-primary > .card-header {
  background: var(--oh-brand) !important; color: #fff !important; border: 0 !important;
}
.panel-body, .card-body { color: var(--oh-slate); }
.clientarea-home-panels .panel, .home-panels .panel, .card { transition: transform .2s ease, box-shadow .2s ease; }
.clientarea-home-panels .panel:hover, .home-panels .panel:hover, .home-panels .card:hover {
  transform: translateY(-3px); box-shadow: var(--oh-shadow);
}

/* ------------------------------ tables ------------------------------ */
.table { background: #fff; }
.table thead th, .table > thead > tr > th {
  background: var(--oh-soft); color: var(--oh-slate); border-bottom: 1px solid var(--oh-line) !important;
  font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em;
}
.table td, .table > tbody > tr > td { border-color: var(--oh-line) !important; vertical-align: middle; }
.table-hover tbody tr:hover, .table-hover > tbody > tr:hover { background: var(--oh-soft); }

/* ------------------------------ forms ------------------------------ */
.form-control, .form-select, select.form-control, textarea.form-control {
  border: 1px solid var(--oh-line); border-radius: var(--oh-r-sm); padding: .62rem .9rem; color: var(--oh-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--oh-green-500); box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
label, .control-label { color: var(--oh-slate); font-weight: 600; }
.input-group-text { background: var(--oh-soft); border-color: var(--oh-line); }

/* ------------------------------ sidebar / list-group ------------------------------ */
.list-group-item { border-color: var(--oh-line); }
.list-group-item.active, .list-group-item.panel-active, .sidebar .active > a {
  background: var(--oh-green-600) !important; border-color: var(--oh-green-600) !important; color: #fff !important;
}
.list-group-item.active:hover { background: var(--oh-green-700) !important; }
.sidebar .list-group-item:hover, .panel-sidebar .list-group-item:hover { color: var(--oh-green-700); }

/* ------------------------------ alerts / badges / labels ------------------------------ */
.alert { border-radius: var(--oh-r-sm); border-width: 1px; }
.alert-info { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }
.alert-success { background: #f0fdf4; border-color: #dcfce7; color: #166534; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.badge, .label { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }
.badge-primary, .label-primary { background: var(--oh-green-600) !important; }
.badge-success, .label-success, .status-active, .label-active { background: var(--oh-mint) !important; color: #fff !important; }
.badge-info, .label-info { background: var(--oh-mint-400) !important; color: #06301f !important; }

/* ------------------------------ breadcrumb / pagination / tabs / progress ------------------------------ */
.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb > .active, .breadcrumb-item.active { color: var(--oh-green-700); }
.page-link { color: var(--oh-green-700); }
.pagination > .active > a, .pagination > .active > span, .page-item.active .page-link {
  background: var(--oh-green-600); border-color: var(--oh-green-600); color: #fff;
}
.nav-tabs .nav-link.active, .nav-tabs > li.active > a { color: var(--oh-green-700); border-bottom-color: var(--oh-green-600); font-weight: 700; }
.nav-pills .nav-link.active, .nav-pills > li.active > a { background: var(--oh-green-600) !important; }
.progress { border-radius: 999px; background: var(--oh-soft); }
.progress-bar { background: var(--oh-brand); }

/* ------------------------------ order form / cart ------------------------------ */
.order-summary, .summary-container, .cart-summary, #order-summary {
  border: 1px solid var(--oh-line) !important; border-radius: var(--oh-r) !important; box-shadow: var(--oh-shadow-sm);
}
.product, .product-box, .pricing-box, .package {
  border-radius: var(--oh-r) !important; border: 1px solid var(--oh-line) !important;
}
.product.selected, .package.selected, .pricing-box.featured { border-color: var(--oh-green-500) !important; box-shadow: var(--oh-shadow); }
.price, .amount, .product .price { color: var(--oh-green-700) !important; }

/* ------------------------------ misc ------------------------------ */
.jumbotron, .well { background: var(--oh-soft); border-radius: var(--oh-r); border: 1px solid var(--oh-line); }
.dropdown-menu { border: 1px solid var(--oh-line); border-radius: var(--oh-r-sm); box-shadow: var(--oh-shadow); }
.dropdown-item.active, .dropdown-item:active { background: var(--oh-green-600); }
.modal-content { border: 0; border-radius: var(--oh-r); box-shadow: var(--oh-shadow); }

/* ------------------------------ footer (match landing dark-green) ------------------------------ */
#footer, .footer, footer.footer, .footer-bottom {
  background: #071b12 !important; color: #b8c9c0 !important; border-top: 0 !important;
}
#footer a, .footer a, .footer-bottom a { color: #a6bdb2 !important; }
#footer a:hover, .footer a:hover { color: var(--oh-mint-400) !important; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, .footer h5 { color: #fff !important; }

/* ------------------------------ floating whatsapp ------------------------------ */
.oh-wa-float {
  position: fixed; left: 20px; bottom: 20px; height: 52px; display: inline-flex; align-items: center; gap: 9px;
  padding: 0 18px 0 14px; border-radius: 999px; background: #22c35e; color: #fff !important; font-weight: 700;
  font-size: 15px; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(34,195,94,.6); z-index: 1050; transition: .2s;
}
.oh-wa-float:hover { transform: translateY(-2px); color: #fff !important; box-shadow: 0 20px 40px -12px rgba(34,195,94,.7); }
.oh-wa-float i, .oh-wa-float svg { font-size: 22px; width: 22px; height: 22px; }
@media (max-width: 520px) { .oh-wa-float span { display: none; } .oh-wa-float { padding: 0; width: 52px; justify-content: center; } }