/**
 * Fulfillant shop brand skin — aligned with fulfillant.com (Astra / WP export).
 * Scope: shop module only (linked from application/shop/view templates).
 * Do not link from admin module.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --brand-primary: #f18200;
  --brand-primary-hover: #ff9c27;
  --brand-primary-dark: #d97200;
  --brand-text: #000000;
  --brand-text-muted: #5b5b5b;
  --brand-bg: #f7f7f7;
  --brand-surface: #ffffff;
  --brand-border: #e5e5e5;
  --brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;
  --brand-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --brand-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
  --brand-shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
  --brand-shadow-focus: 0 0 0 2px rgba(241, 130, 0, 0.15);
}

/* --- Typography (Inter body / Space Grotesk headings) --- */
body,
button,
input,
select,
textarea,
.btn,
.table,
.Hui-aside,
.navbar,
.dropDown-menu {
  font-family: var(--brand-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--brand-text);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.brandC,
.welcome-content h2,
.page-container > .oneSec > h2,
.shop .menu_dropdown dt {
  font-family: var(--brand-font-heading) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Surfaces: radius + card shadow --- */
.btn,
.btn-primary,
.btn-primary-outline,
.btn-default,
.btn-success,
.btn-danger,
.btn-warning,
.pagination a,
.pagination span,
.badge {
  border-radius: var(--brand-radius-sm) !important;
}

.input-text,
.textarea,
.select,
.select-box .select {
  border-radius: var(--brand-radius-sm) !important;
  box-shadow: var(--brand-shadow-sm) !important;
  border-color: var(--brand-border) !important;
}

.panel,
.Huialert,
.Huialert-info,
.table-bordered,
.listTable.table-bordered,
.page-container .oneSec,
.page-container .balanceHistory,
.shop .dropDown-menu,
.shop .dropDown-menu.menu,
.radius.shadow,
.shadow.radius,
.brandC.shadow {
  border-radius: var(--brand-radius-lg) !important;
  box-shadow: var(--brand-shadow-md) !important;
  border-color: var(--brand-border) !important;
  overflow: hidden;
}

.shop .table-bordered,
.table-bordered {
  background-color: var(--brand-surface) !important;
}

.shop .Huialert-info {
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
}

.shop .Hui-aside .menu_dropdown dd li a {
  border-radius: var(--brand-radius-sm);
}

.shop .Hui-tabNav .acrossTab li {
  border-radius: var(--brand-radius-sm) var(--brand-radius-sm) 0 0 !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: var(--brand-shadow-sm) !important;
}

.btn-primary:active {
  box-shadow: none !important;
}

#shopLogin .logodiv {
  border-radius: var(--brand-radius-lg) !important;
  box-shadow: var(--brand-shadow-lg) !important;
}

#shopLogin input,
#shopLogin button,
#shopLogin .register-tis {
  border-radius: var(--brand-radius-sm) !important;
}

#shopLogin input {
  box-shadow: var(--brand-shadow-sm) !important;
}

#shopLogin button {
  box-shadow: var(--brand-shadow-md) !important;
  font-family: var(--brand-font-body) !important;
  font-weight: 600 !important;
}

.shop .show_iframe iframe {
  background-color: var(--brand-bg);
}

.shop .Hui-article-box,
.shop .Hui-article {
  background-color: var(--brand-bg) !important;
}

/* --- Primary actions --- */
.btn-primary,
.btn-primary-outline:hover,
.btn-primary-outline.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #fff !important;
}

.btn-primary-outline {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background-color: transparent !important;
}

.btn-primary-outline:hover,
.btn-primary-outline:focus {
  color: #fff !important;
}

a {
  color: var(--brand-primary);
}

a:hover,
a:focus {
  color: var(--brand-primary-hover);
}

/* --- Top bar & shell --- */
.shop .navbar,
.shop .navbar.navbar-fixed-top,
.navbar-wrapper .navbar.navbar-fixed-top {
  background-color: var(--brand-primary) !important;
  border-bottom-color: var(--brand-primary-dark) !important;
}

.shop .navbar-nav > ul > li > a,
.shop .navbar-nav > ul > li > a:hover,
.shop .navbar-nav > ul > li > a:focus,
.shop #Hui-userbar,
.shop #Hui-userbar > ul > li,
.shop #Hui-userbar > ul > li > a {
  color: #fff !important;
}

.shop #mobilemenu {
  background: var(--brand-primary) !important;
}

.shop #mobilemenu > ul > li > a {
  color: #fff !important;
}

/* --- Sidebar --- */
.shop .Hui-aside .menu_dropdown dt:hover,
.shop .Hui-aside .menu_dropdown dd li a:hover,
.shop .Hui-aside .menu_dropdown dd li.current a,
.shop .Hui-aside .menu_dropdown dd li.current a:hover {
  color: var(--brand-primary) !important;
  background-color: rgba(241, 130, 0, 0.08) !important;
}

.shop .Hui-aside .menu_dropdown dt .Hui-iconfont {
  color: var(--brand-primary);
}

/* --- Tab nav --- */
.shop .Hui-tabNav .acrossTab li.active,
.shop .Hui-tabNav .acrossTab li.active:hover {
  color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
}

.shop .Hui-tabNav .acrossTab li:hover {
  color: var(--brand-primary-hover) !important;
}

/* --- Tables & lists --- */
.shop .table thead th,
.table thead th {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
  border-bottom-color: var(--brand-border) !important;
}

.shop .table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > td {
  background-color: rgba(241, 130, 0, 0.06) !important;
}

.shop .table tbody tr.active > td,
.shop .table tbody tr.active > th {
  background-color: rgba(241, 130, 0, 0.12) !important;
}

.shop .listTable.table-bordered {
  border-color: var(--brand-border) !important;
}

/* --- Pagination --- */
.shop .pagination .active a,
.shop .pagination .active span,
.pagination .active a,
.pagination .active span {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.shop .pagination a:hover,
.pagination a:hover {
  color: var(--brand-primary) !important;
}

/* --- Forms --- */
.shop .input-text:focus,
.shop .textarea:focus,
.shop .select:focus,
.input-text:focus,
.textarea:focus,
.select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: var(--brand-shadow-focus) !important;
}

/* --- Badges (keep danger red, tint info links) --- */
.shop .badge-primary,
.badge-primary {
  background-color: var(--brand-primary) !important;
}

/* --- Login / register --- */
#shopLogin .logodiv {
  background: var(--brand-primary) !important;
}

#shopLogin button,
#shopLogin .register-tis {
  background: var(--brand-primary-hover) !important;
  color: #fff !important;
}

#shopLogin a {
  color: var(--brand-primary-hover) !important;
}

#shopLogin a:hover {
  color: var(--brand-primary) !important;
}

/* --- Welcome & dashboard cards --- */
#shop-welcome .welcome-content h2,
#shop-welcome .welcome-content h2 span {
  color: var(--brand-primary) !important;
}

#shop-welcome .welcome-content h2 span {
  color: var(--brand-primary-hover) !important;
}

/* --- Domain stats pages (inline --primary fallback) --- */
:root {
  --primary: var(--brand-primary);
}

/* --- Order list status accents (brand-tinted, keep distinguishable) --- */
.shop .divstatus {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.shop .combined-orders {
  border-left-color: var(--brand-primary-hover) !important;
}

/* --- Footer --- */
.shop footer,
.shop footer .footer a {
  color: var(--brand-text-muted) !important;
}

.shop footer .footer a:hover {
  color: var(--brand-primary) !important;
}

/* --- Layer / dropdown menus in header --- */
.shop .dropDown-menu {
  border-top: 2px solid var(--brand-primary) !important;
}

.shop .dropDown-menu li a:hover {
  color: var(--brand-primary) !important;
  background-color: rgba(241, 130, 0, 0.08) !important;
}