/**
 * Accounto Pro Portal - Master Stylesheet
 * Version: 4.0.0
 * Pure Scoped & Zero Conflict Design System
 */

:root {
  --acc-bg: #f8f9fc;
  --acc-ink: #14171f;
  --acc-muted: #6f7582;
  --acc-line: rgba(20, 23, 31, 0.08);
  --acc-coral: #ff5c7a;
  --acc-coral-dark: #e84b68;
  --acc-emerald: #10b981;
  --acc-blue: #2563eb;
  --acc-purple: #7c3aed;
  --acc-card-bg: rgba(255, 255, 255, 0.88);
  --acc-card-border: rgba(255, 255, 255, 0.95);
  --acc-shadow: 0 16px 40px rgba(17, 19, 24, 0.05), inset 0 1px 0 #ffffff;
  --acc-radius-lg: 24px;
  --acc-radius-md: 16px;
  --acc-radius-sm: 12px;
}

/* ==========================================================================
   Base Isolation & Complete Override of Theme Sidebars
   ========================================================================== */
body.accounto-portal-active {
  background: var(--acc-bg) !important;
  font-family: Vazirmatn, Tahoma, -apple-system, sans-serif !important;
  direction: rtl !important;
  color: var(--acc-ink) !important;
}

/* Eliminate theme page headers, breadcrumbs, and "حساب کاربری من" title */
body.accounto-portal-active .entry-title,
body.accounto-portal-active .page-title,
body.accounto-portal-active .entry-header,
body.accounto-portal-active header.entry-header,
body.accounto-portal-active .site-main > header,
body.accounto-portal-active .woocommerce-products-header,
body.accounto-portal-active .woocommerce-page-header,
body.accounto-portal-active .woocommerce-breadcrumb,
body.accounto-portal-active .breadcrumb,
body.accounto-portal-active nav.woocommerce-breadcrumb,
body.accounto-portal-active .page-header,
body.accounto-portal-active .elementor-page-title,
body.accounto-portal-active .woocommerce > h1:first-child,
body.accounto-portal-active .woocommerce-MyAccount-content > h1:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eliminate legacy WooCommerce greeting text & greeting paragraphs */
body.accounto-portal-active .woocommerce-MyAccount-content > p:not(.woocommerce-form-row):not(.accounto-form-group p),
body.accounto-portal-active .accounto-portal-main > p:not(.woocommerce-form-row):not(.accounto-form-group p),
body.accounto-portal-active .accounto-dashboard-canvas > p,
body.accounto-portal-active p:empty {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eliminate theme top spacing so portal connects directly with header */
body.accounto-portal-active #main,
body.accounto-portal-active #content,
body.accounto-portal-active #primary,
body.accounto-portal-active .site-content,
body.accounto-portal-active .entry-content,
body.accounto-portal-active .site-main,
body.accounto-portal-active article.page,
body.accounto-portal-active article.post,
body.accounto-portal-active .content-area {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Neutralize any legacy sidebar WooCommerce navigation that a theme tries to render */
body.accounto-portal-active .woocommerce-MyAccount-navigation:not(.accounto-bento-nav) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.accounto-portal-active .woocommerce-MyAccount-content {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The Master Portal Root Container */
.accounto-portal-root {
  display: block !important;
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 10px auto 60px !important;
  font-family: inherit !important;
  direction: rtl !important;
  color: var(--acc-ink) !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.accounto-portal-root * {
  box-sizing: border-box !important;
}

/* ==========================================================================
   Master Bento Navigation (Model 2 Pro - Apple Tactile Tiles)
   ========================================================================== */
.accounto-bento-nav {
  width: 100% !important;
  margin-bottom: 20px !important;
  clear: both !important;
}

.accounto-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.accounto-bento-col {
  position: relative !important;
  width: 100% !important;
}

/* Bento Tile Card */
.accounto-bento-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 84px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  color: var(--acc-ink) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

a.accounto-bento-tile:hover,
.accounto-bento-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(17, 19, 24, 0.08), inset 0 1px 0 #ffffff !important;
  border-color: rgba(255, 92, 122, 0.28) !important;
}

/* Active Tile Base State */
.accounto-bento-tile.is-active {
  transform: translateY(-2px) !important;
}

/* Top Row of Tile: Icon & Badges */
.accounto-tile-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

.accounto-tile-icon {
  font-size: 19px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)) !important;
}

.accounto-icon-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* Active Pulse Dot */
.accounto-pulse-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: var(--acc-coral) !important;
  box-shadow: 0 0 10px var(--acc-coral) !important;
}

/* Micro Telemetry Badges */
.accounto-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2.5px 8px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.accounto-badge.is-emerald {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.accounto-badge.is-blue {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

.accounto-badge.is-purple {
  background: #faf5ff !important;
  color: #7c3aed !important;
  border: 1px solid #e9d5ff !important;
}

/* Instant Logout Pill */
.accounto-logout-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #e11d48 !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  padding: 4px 11px !important;
  min-height: 26px !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.accounto-logout-badge svg {
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.accounto-logout-badge:hover {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fda4af !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.16) !important;
}

.accounto-logout-badge:hover svg {
  transform: translateX(-2px) !important;
}

/* Bottom Row of Tile: Title & Subtitle */
.accounto-tile-bottom,
.accounto-tile-bottom-link {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: right !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
}

.accounto-tile-bottom-link {
  cursor: pointer !important;
}

.accounto-tile-bottom-link:hover .accounto-tile-title {
  color: var(--acc-coral) !important;
}

.accounto-tile-sub {
  font-size: 10.5px !important;
  color: #888e9b !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.accounto-tile-title {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #14171f !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.accounto-alert {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 20px !important;
  margin-bottom: 20px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-card-border) !important;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.04) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.accounto-alert.is-success {
  border-right: 4px solid var(--acc-emerald) !important;
  color: #065f46 !important;
  background: #f0fdf4 !important;
}

.accounto-alert.is-error {
  border-right: 4px solid #ef4444 !important;
  color: #991b1b !important;
  background: #fef2f2 !important;
}

/* ==========================================================================
   Attention Notice Card (Order Attention Banner)
   ========================================================================== */
.accounto-attention-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 18px 24px !important;
  margin-bottom: 24px !important;
  border-radius: var(--acc-radius-md, 20px) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 248, 0.95)) !important;
  border: 1.5px solid rgba(255, 92, 122, 0.24) !important;
  box-shadow: 0 10px 28px rgba(255, 92, 122, 0.07), 0 2px 8px rgba(17, 19, 24, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative !important;
  clear: both !important;
}

.accounto-attention-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  text-align: right !important;
}

.accounto-attention-tag {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  background: rgba(255, 92, 122, 0.1) !important;
  color: var(--acc-coral, #ff5c7a) !important;
  border: 1px solid rgba(255, 92, 122, 0.22) !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.accounto-attention-tag::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--acc-coral, #ff5c7a) !important;
  box-shadow: 0 0 8px var(--acc-coral, #ff5c7a) !important;
}

.accounto-attention-info h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: var(--acc-ink, #14171f) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.accounto-attention-info p {
  margin: 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

.accounto-btn-attention {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--acc-coral, #ff5c7a), var(--acc-coral-dark, #e11d48)) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(255, 92, 122, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.accounto-btn-attention:hover {
  background: linear-gradient(135deg, var(--acc-coral-dark, #e11d48), #be123c) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 92, 122, 0.42) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */
.accounto-hero-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 24px 28px !important;
  margin-bottom: 22px !important;
  border-radius: var(--acc-radius-lg) !important;
  border: 1px solid var(--acc-card-border) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 92, 122, 0.12), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  background: rgba(255, 92, 122, 0.08) !important;
  color: var(--acc-coral) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  margin-bottom: 8px !important;
}

.accounto-eyebrow-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--acc-coral) !important;
}

.accounto-hero-copy h1 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.accounto-hero-copy p {
  font-size: 13px !important;
  color: var(--acc-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 680px !important;
}

.accounto-btn-coral {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 22px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: linear-gradient(135deg, var(--acc-coral), var(--acc-coral-dark)) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(255, 92, 122, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.accounto-btn-coral:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(255, 92, 122, 0.38) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Dashboard Grid (Services + Recent Orders)
   ========================================================================== */
.accounto-dashboard-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 20px !important;
  align-items: start !important;
}

.accounto-panel {
  background: var(--acc-card-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--acc-card-border) !important;
  border-radius: var(--acc-radius-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--acc-line) !important;
}

.accounto-panel-head h2 {
  font-size: 16px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 0 !important;
}

.accounto-panel-sub {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--acc-muted) !important;
  margin-top: 2px !important;
}

.accounto-link-more {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--acc-coral) !important;
  text-decoration: none !important;
  transition: transform 0.18s ease !important;
}

.accounto-link-more:hover {
  transform: translateX(-3px) !important;
}

/* ==========================================================================
   Accounto Services System & Balanced Bento Cards (List & Detail View)
   ========================================================================== */

/* Badge Pill */
.accounto-page-badge {
  display: inline-block !important;
  margin-bottom: 6px !important;
  color: var(--acc-coral) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

/* 4-Stat Header Tiles (Bento Style) */
.acs-stats,
.acs-stats--lite {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

.acs-stat-tile,
.acs-stats > div {
  padding: 16px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 252, 0.85)) !important;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.035), inset 0 1px 0 #ffffff !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.acs-stat-tile:hover,
.acs-stats > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(17, 19, 24, 0.055), inset 0 1px 0 #ffffff !important;
}

.acs-stat-tile small,
.acs-stats small {
  display: block !important;
  color: var(--acc-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.acs-stat-tile strong,
.acs-stats strong {
  display: block !important;
  margin-top: 6px !important;
  color: var(--acc-ink) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

/* Services Grid & Card */
.accounto-service-grid,
.acs-service-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.accounto-service-grid.is-compact,
.acs-service-grid.is-compact {
  grid-template-columns: 1fr !important;
}

.accounto-service-card,
.acs-service-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3) 35%, transparent 60%), linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 252, 0.8)) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  padding: 20px !important;
  box-shadow: 0 12px 36px rgba(17, 19, 24, 0.04), inset 0 1px 0 #ffffff !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  overflow: hidden !important;
}

.accounto-service-card:hover,
.acs-service-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(17, 19, 24, 0.07), inset 0 1px 0 #ffffff !important;
  border-color: rgba(255, 92, 122, 0.25) !important;
}

/* Card Top: Visual, Title, Status */
.accounto-svc-top,
.acs-service-card__top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.accounto-svc-visual,
.acs-service-card__visual {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #ffffff, #fff3f6) !important;
  border: 1px solid rgba(20, 23, 31, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 6px 16px rgba(17, 19, 24, 0.04) !important;
}

.accounto-svc-visual a,
.acs-service-card__visual a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.accounto-svc-visual a:hover,
.acs-service-card__visual a:hover {
  transform: scale(1.06) !important;
}

.accounto-svc-visual img,
.acs-service-card__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.accounto-svc-visual span,
.acs-service-card__visual span {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--acc-coral) !important;
}

.accounto-svc-header-info,
.acs-service-card__title {
  flex: 1 !important;
  min-width: 0 !important;
}

.accounto-svc-order-tag,
.acs-service-card__title small {
  display: block !important;
  font-size: 11px !important;
  color: var(--acc-muted) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.accounto-svc-title,
.acs-service-card__title h3,
.acs-service-card__title h2 {
  font-size: 16px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 3px 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.accounto-svc-title a,
.acs-service-card__title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.accounto-svc-title a:hover,
.acs-service-card__title a:hover {
  color: var(--acc-coral) !important;
}

.accounto-ext-icon {
  opacity: 0.55 !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.accounto-svc-title a:hover .accounto-ext-icon {
  opacity: 1 !important;
  transform: translateX(-2px) translateY(-1px) !important;
}

/* Status Badges */
.accounto-status-badge,
.acs-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
}

.accounto-status-badge i,
.acs-status i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

.accounto-status-badge.is-active,
.accounto-status-badge.is-success,
.acs-status.is-success {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}

.accounto-status-badge.is-processing,
.accounto-status-badge.is-progress,
.acs-status.is-progress {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #2563eb !important;
}

.accounto-status-badge.is-on-hold,
.accounto-status-badge.is-warn,
.accounto-status-badge.is-warning,
.acs-status.is-warn {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #d97706 !important;
}

.accounto-status-badge.is-failed,
.accounto-status-badge.is-danger,
.acs-status.is-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
}

.accounto-status-badge.is-muted,
.acs-status.is-muted {
  background: #f1f3f7 !important;
  color: #64748b !important;
}

/* 2x2 Meta Grid */
.accounto-svc-meta,
.acs-service-card__meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
  width: 100% !important;
}

.accounto-svc-meta-item,
.acs-service-card__meta > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  background: rgba(246, 247, 250, 0.85) !important;
  border: 1px solid rgba(20, 23, 31, 0.04) !important;
  overflow: hidden !important;
}

.accounto-svc-meta-item small,
.acs-service-card__meta small {
  font-size: 10px !important;
  color: var(--acc-muted) !important;
  font-weight: 700 !important;
}

.accounto-svc-meta-item b,
.acs-service-card__meta b {
  font-size: 12px !important;
  color: #334155 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Lifecycle Progress Bar */
.acs-life {
  margin-top: 13px !important;
  padding: 11px 13px !important;
  border-radius: 15px !important;
  background: rgba(255, 245, 247, 0.75) !important;
  border: 1px solid rgba(255, 92, 122, 0.12) !important;
}

.acs-life > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.acs-life span {
  color: #8a6f76 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.acs-life strong {
  color: #6a3f49 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.acs-life > i {
  display: block !important;
  height: 6px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(232, 75, 104, 0.12) !important;
}

.acs-life > i > b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ff8ea3, #ff5c7a) !important;
  transition: width 0.4s ease !important;
}

.acs-service-card__note {
  margin: 12px 0 0 !important;
  color: #777d87 !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

/* Foot & Actions */
.acs-service-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(20, 23, 31, 0.06) !important;
}

.acs-btn-full {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

.acs-card-subactions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.accounto-btn-svc-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 35px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.accounto-btn-svc-spec {
  background: #ffffff !important;
  border: 1.5px solid rgba(255, 92, 122, 0.28) !important;
  color: var(--acc-coral) !important;
}

.accounto-btn-svc-spec:hover {
  background: var(--acc-coral) !important;
  color: #ffffff !important;
  border-color: var(--acc-coral) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(255, 92, 122, 0.25) !important;
}

.accounto-btn-svc-invoice {
  background: #f1f3f7 !important;
  border: 1.5px solid transparent !important;
  color: #475569 !important;
}

.accounto-btn-svc-invoice:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.accounto-btn-svc-tg {
  background: rgba(34, 158, 217, 0.08) !important;
  border: 1.5px solid rgba(34, 158, 217, 0.18) !important;
  color: #0284c7 !important;
}

.accounto-btn-svc-tg:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.25) !important;
}

/* ==========================================================================
   Service Detail Management Center (Image 1 Bento Style)
   ========================================================================== */
.acs-detail {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Back bar */
.acs-back {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 2px !important;
}

.acs-back a {
  color: var(--acc-muted) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  transition: color 0.18s ease !important;
}

.acs-back a:hover {
  color: var(--acc-coral) !important;
}

.acs-code-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(20, 23, 31, 0.08) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--acc-ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.acs-code-copy span {
  color: var(--acc-coral) !important;
}

.acs-code-copy:hover {
  border-color: rgba(255, 92, 122, 0.3) !important;
  box-shadow: 0 4px 14px rgba(255, 92, 122, 0.15) !important;
}

/* Hero Section */
.acs-detail-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 12% 0, rgba(255, 92, 122, 0.08), transparent 35%), linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 253, 0.85)) !important;
  box-shadow: 0 14px 40px rgba(17, 19, 24, 0.04), inset 0 1px 0 #ffffff !important;
}

.acs-detail-hero small {
  display: block !important;
  color: var(--acc-coral) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

.acs-detail-hero h1 {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.acs-detail-hero p {
  color: var(--acc-muted) !important;
  font-size: 13px !important;
  margin: 4px 0 0 !important;
  line-height: 1.8 !important;
}

.acs-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.acs-icon-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(20, 23, 31, 0.08) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--acc-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.acs-icon-button:hover {
  border-color: rgba(255, 92, 122, 0.3) !important;
  color: var(--acc-coral) !important;
}

/* Sticky Section Nav */
.acs-section-nav {
  position: sticky !important;
  top: 10px !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  background: rgba(250, 250, 253, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.035) !important;
}

.acs-section-nav a {
  padding: 8px 16px !important;
  border-radius: 11px !important;
  color: var(--acc-muted) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: all 0.18s ease !important;
}

.acs-section-nav a:hover,
.acs-section-nav a.is-active {
  background: #ffffff !important;
  color: var(--acc-coral) !important;
  box-shadow: 0 4px 12px rgba(17, 19, 24, 0.05) !important;
}

/* Detail 2-Column Grid */
.acs-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 290px !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

.acs-detail-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.acs-detail-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: sticky !important;
  top: 70px !important;
}

/* Panels */
.acs-panel {
  padding: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 36px rgba(17, 19, 24, 0.035), inset 0 1px 0 #ffffff !important;
  scroll-margin-top: 80px !important;
}

.acs-panel__head--split {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.acs-panel__head h2 {
  font-size: 20px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 3px 0 0 !important;
}

.acs-panel__head p {
  font-size: 12.5px !important;
  color: var(--acc-muted) !important;
  margin: 4px 0 0 !important;
  line-height: 1.7 !important;
}

/* Vault Head & Card */
.acs-vault {
  background: radial-gradient(circle at 100% 0, rgba(255, 92, 122, 0.06), transparent 35%), linear-gradient(180deg, #ffffff, #fffbfc) !important;
  border-color: rgba(255, 92, 122, 0.14) !important;
}

.acs-vault-head {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, #fff5f7) !important;
  border: 1px solid rgba(255, 92, 122, 0.14) !important;
}

.acs-vault-head__main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.acs-vault-head__icon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 92, 122, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px rgba(255, 92, 122, 0.12), inset 0 1px 0 #ffffff !important;
}

.acs-vault-head__icon img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

.acs-vault-head__copy span {
  display: block !important;
  color: var(--acc-coral) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}

.acs-vault-head__copy h2 {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  margin: 2px 0 0 !important;
}

.acs-vault-head__copy p {
  font-size: 12px !important;
  color: var(--acc-muted) !important;
  margin: 3px 0 0 !important;
}

.acs-vault-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 14px 2px 0 !important;
  padding: 0 2px 8px !important;
  border-bottom: 1px solid rgba(20, 23, 31, 0.06) !important;
}

.acs-vault-toolbar strong {
  font-size: 12.5px !important;
  color: #334155 !important;
}

.acs-vault-toolbar span {
  font-size: 11px !important;
  color: var(--acc-muted) !important;
}

/* Vault Grid & Secret Fields */
.acs-vault-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.acs-secret-field {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20, 23, 31, 0.06) !important;
  transition: all 0.2s ease !important;
}

.acs-secret-field.is-primary {
  background: linear-gradient(145deg, #ffffff, #fff9fa) !important;
  border-color: rgba(255, 92, 122, 0.16) !important;
  box-shadow: 0 6px 18px rgba(255, 92, 122, 0.04) !important;
}

.acs-secret-field > small {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  color: var(--acc-muted) !important;
}

.acs-secret-value {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(246, 247, 250, 0.95) !important;
  border: 1px solid rgba(20, 23, 31, 0.05) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

.acs-secret-value code {
  display: block !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--acc-ink) !important;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
  white-space: normal !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  line-height: 1.5 !important;
  min-width: 0 !important;
}

.acs-secret-value > span {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.acs-secret-value button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(20, 23, 31, 0.08) !important;
  background: #ffffff !important;
  color: var(--acc-ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.acs-secret-value button:hover {
  background: var(--acc-coral) !important;
  color: #ffffff !important;
  border-color: var(--acc-coral) !important;
}

.acs-secret-value button[data-acs-reveal] {
  background: #fff2f5 !important;
  color: var(--acc-coral) !important;
  border-color: rgba(255, 92, 122, 0.18) !important;
}

.acs-delivery-note {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 15px !important;
  background: rgba(246, 247, 250, 0.85) !important;
  border: 1px solid rgba(20, 23, 31, 0.04) !important;
}

.acs-delivery-note small {
  font-size: 10.5px !important;
  color: var(--acc-muted) !important;
  font-weight: 700 !important;
}

.acs-delivery-note p {
  margin: 5px 0 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  line-height: 1.8 !important;
}

/* Vault Confirm Box */
.acs-vault-confirm {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding: 15px 18px !important;
  border: 1.5px dashed rgba(255, 92, 122, 0.3) !important;
  border-radius: 16px !important;
  background: rgba(255, 245, 247, 0.6) !important;
}

.acs-vault-confirm strong {
  display: block !important;
  font-size: 13px !important;
  color: var(--acc-ink) !important;
}

.acs-vault-confirm span {
  display: block !important;
  margin-top: 2px !important;
  font-size: 11.5px !important;
  color: var(--acc-muted) !important;
  line-height: 1.6 !important;
}

.acs-confirm-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Status Panel & Info Grid */
.acs-info-grid,
.acs-info-grid--lite {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.acs-info-grid > div {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(246, 247, 250, 0.85) !important;
  border: 1px solid rgba(20, 23, 31, 0.04) !important;
}

.acs-info-grid small {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--acc-muted) !important;
  font-weight: 700 !important;
}

.acs-info-grid strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  color: var(--acc-ink) !important;
  font-weight: 800 !important;
}

.acs-life--detail {
  margin-top: 16px !important;
}

/* Sidebar Order & Security Panels */
.acs-order-panel small {
  display: block !important;
  color: var(--acc-coral) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.acs-order-panel strong {
  display: block !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  margin: 3px 0 !important;
}

.acs-order-panel > span {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--acc-muted) !important;
  margin-bottom: 12px !important;
}

.acs-order-mini {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.acs-order-mini > span {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(246, 247, 250, 0.9) !important;
  border: 1px solid rgba(20, 23, 31, 0.04) !important;
}

.acs-order-mini small {
  display: block !important;
  font-size: 10px !important;
  color: var(--acc-muted) !important;
}

.acs-order-mini b {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: var(--acc-ink) !important;
  font-weight: 800 !important;
}

.acs-link {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--acc-coral) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: transform 0.18s ease !important;
}

.acs-link:hover {
  transform: translateX(-3px) !important;
}

.acs-security-panel small {
  display: block !important;
  color: var(--acc-coral) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.acs-security-panel strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 3px 0 10px !important;
}

.acs-security-panel ul {
  margin: 0 !important;
  padding-right: 18px !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  line-height: 1.9 !important;
}

.acs-inline-notice {
  margin-top: 12px !important;
  padding: 11px 14px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.acs-inline-notice.is-success {
  background: #f1fbf6 !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.2) !important;
}

/* Print Styles */
@media print {
  .accounto-bento-grid,
  .site-header,
  .site-footer,
  .acs-section-nav,
  .acs-back,
  .acs-hero-actions,
  .acs-detail-side,
  .acs-vault-confirm form,
  .acs-secret-value button {
    display: none !important;
  }

  .acs-detail-grid {
    display: block !important;
  }

  .acs-panel,
  .acs-detail-hero {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }
}

/* Responsive Breakpoints */
@media (max-width: 980px) {
  .acs-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .acs-detail-side {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .accounto-service-grid,
  .acs-service-grid {
    grid-template-columns: 1fr !important;
  }

  .acs-stats,
  .acs-stats--lite {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .acs-detail-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px !important;
  }

  .acs-hero-actions {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
  }

  .acs-vault-grid {
    grid-template-columns: 1fr !important;
  }

  .acs-vault-confirm {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .acs-confirm-btn {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .accounto-svc-meta,
  .acs-service-card__meta,
  .acs-info-grid {
    grid-template-columns: 1fr !important;
  }

  .acs-stats,
  .acs-stats--lite {
    gap: 8px !important;
  }

  .acs-stat-tile,
  .acs-stats > div {
    padding: 12px !important;
  }

  .acs-stat-tile strong,
  .acs-stats strong {
    font-size: 20px !important;
  }

  .acs-secret-value {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .acs-secret-value code {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    overflow: hidden !important;
  }

  .acs-secret-value > span {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .acs-secret-value button {
    flex: 1 !important;
    min-height: 38px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   Mini Orders List on Dashboard
   ========================================================================== */
.accounto-mini-order-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.accounto-mini-order-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.18s ease !important;
}

.accounto-mini-order-row:hover {
  transform: translateX(-2px) !important;
  border-color: rgba(255, 92, 122, 0.3) !important;
  box-shadow: 0 4px 14px rgba(17, 19, 24, 0.04) !important;
}

.accounto-mini-order-meta strong {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

.accounto-mini-order-meta small {
  font-size: 10.5px !important;
  color: var(--acc-muted) !important;
}

.accounto-mini-order-total {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
}

/* ==========================================================================
   Orders Table Page
   ========================================================================== */
.accounto-subpage {
  background: var(--acc-card-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--acc-card-border) !important;
  border-radius: var(--acc-radius-lg) !important;
  padding: 24px 28px !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-subpage-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--acc-line) !important;
}

.accounto-subpage-head h1 {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  margin: 0 !important;
}

.accounto-subpage-head p {
  font-size: 12px !important;
  color: var(--acc-muted) !important;
  margin: 2px 0 0 !important;
}

.accounto-orders-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  border: none !important;
  margin-bottom: 20px !important;
}

.accounto-orders-table th {
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--acc-muted) !important;
  text-align: right !important;
  border: none !important;
  background: transparent !important;
}

.accounto-orders-table td {
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--acc-line) !important;
  border-bottom: 1px solid var(--acc-line) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.accounto-orders-table tr td:first-child {
  border-right: 1px solid var(--acc-line) !important;
  border-top-right-radius: var(--acc-radius-sm) !important;
  border-bottom-right-radius: var(--acc-radius-sm) !important;
}

.accounto-orders-table tr td:last-child {
  border-left: 1px solid var(--acc-line) !important;
  border-top-left-radius: var(--acc-radius-sm) !important;
  border-bottom-left-radius: var(--acc-radius-sm) !important;
}

.accounto-btn-order-action {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: #f1f3f7 !important;
  color: var(--acc-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.accounto-btn-order-action:hover {
  background: var(--acc-coral) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Support & Tickets
   ========================================================================== */
.accounto-support-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

.accounto-ticket-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.accounto-ticket-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.18s ease !important;
}

.accounto-ticket-card:hover {
  border-color: var(--acc-coral) !important;
  transform: translateX(-2px) !important;
}

.accounto-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.accounto-form-group label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--acc-ink) !important;
}

.accounto-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: var(--acc-radius-sm) !important;
  border: 1px solid #dcdfe6 !important;
  background: #ffffff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--acc-ink) !important;
  outline: none !important;
  transition: border-color 0.18s ease !important;
}

.accounto-input:focus {
  border-color: var(--acc-coral) !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.12) !important;
}

textarea.accounto-input {
  height: auto !important;
  padding: 10px 14px !important;
}

/* Chat thread */
.accounto-chat-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 18px 0 24px !important;
}

.accounto-chat-bubble {
  padding: 16px 18px !important;
  border-radius: var(--acc-radius-md) !important;
  max-width: 85% !important;
}

.accounto-chat-bubble.is-customer {
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  align-self: flex-start !important;
}

.accounto-chat-bubble.is-support {
  background: #fdf2f4 !important;
  border: 1px solid rgba(255, 92, 122, 0.2) !important;
  align-self: flex-end !important;
}

.accounto-chat-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  margin-bottom: 6px !important;
  color: var(--acc-muted) !important;
}

/* ==========================================================================
   Security Panel
   ========================================================================== */
.accounto-security-card {
  margin-top: 24px !important;
  padding: 24px 28px !important;
  border-radius: var(--acc-radius-lg) !important;
  background: var(--acc-card-bg) !important;
  border: 1px solid var(--acc-card-border) !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-security-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 20px !important;
}

.accounto-sec-tile {
  padding: 12px 14px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
}

.accounto-sec-tile small {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--acc-muted) !important;
}

.accounto-sec-tile strong {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

.accounto-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 20px !important;
  border-radius: var(--acc-radius-sm) !important;
  background: #1e212b !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.accounto-btn-danger:hover {
  background: #dc2626 !important;
}

/* ==========================================================================
   Auth Pages (Modern Accounto Auth: Google, Telegram, OTP & Email)
   ========================================================================== */
.accounto-portal-page-auth-wrap {
  width: 100% !important;
  margin: 0 auto !important;
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accounto-portal-page-card {
  box-shadow: 0 24px 64px -12px rgba(17, 19, 24, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
  border-radius: 32px !important;
  padding: 32px 28px !important;
  background: #ffffff !important;
}

/* Empty States */
.accounto-empty-card {
  text-align: center !important;
  padding: 40px 20px !important;
}

.accounto-empty-icon {
  font-size: 38px !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.accounto-empty-mini {
  text-align: center !important;
  padding: 24px !important;
  font-size: 12.5px !important;
  color: var(--acc-muted) !important;
}

/* Toast */
.accounto-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(50px) !important;
  background: #11131c !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.accounto-toast.is-active {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Mobile Responsive Rules (< 820px) - Ultra-Tactile Mobile App Experience
   ========================================================================== */
@media (max-width: 820px) {
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  .accounto-portal-root {
    width: calc(100% - 20px) !important;
    margin: 8px auto 40px !important;
  }

  /* 1. Touch-First Bento Grid (2 Columns + Full-Width Bottom Bar) */
  .accounto-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .accounto-bento-tile {
    min-height: 80px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  .accounto-bento-tile:active,
  .accounto-btn-coral:active,
  .accounto-btn-telegram:active,
  .accounto-btn-copy:active,
  .accounto-btn-order-action:active,
  .accounto-logout-badge:active {
    transform: scale(0.97) !important;
  }

  .accounto-tile-icon {
    font-size: 18px !important;
  }

  .accounto-tile-title {
    font-size: 12.5px !important;
    font-weight: 850 !important;
  }

  .accounto-tile-sub {
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .accounto-badge {
    font-size: 9.5px !important;
    padding: 2.5px 7px !important;
    font-weight: 800 !important;
  }

  /* Tile 5 (Settings + Logout) spans both columns at bottom */
  .is-settings-col {
    grid-column: span 2 !important;
  }

  .is-settings-col .accounto-bento-tile {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    padding: 12px 16px !important;
  }

  .is-settings-col .accounto-tile-top {
    width: auto !important;
    margin-bottom: 0 !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .is-settings-col .accounto-tile-bottom,
  .is-settings-col .accounto-tile-bottom-link {
    order: 1 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .is-settings-col .accounto-logout-badge {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    border-radius: 99px !important;
  }

  /* 2. Hero Banner on Mobile */
  .accounto-hero-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    border-radius: 20px !important;
  }

  .accounto-hero-copy h1 {
    font-size: 19px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .accounto-hero-copy p {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .accounto-hero-actions {
    width: 100% !important;
    margin-top: 14px !important;
  }

  .accounto-hero-actions .accounto-btn-coral {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 13.5px !important;
  }

  /* Attention Notice Box on Mobile */
  .accounto-attention-box {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 18px !important;
    margin-bottom: 18px !important;
    gap: 14px !important;
    border-radius: 18px !important;
  }

  .accounto-btn-attention {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* 3. Dashboard Grid on Mobile */
  .accounto-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .accounto-panel {
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  /* 4. Credentials Vault on Mobile */
  .accounto-vault {
    padding: 14px 14px !important;
    margin: 12px 0 !important;
  }

  .accounto-vault-row {
    padding: 8px 10px !important;
  }

  .accounto-vault-detail {
    max-width: calc(100% - 80px) !important;
  }

  .accounto-vault-value {
    font-size: 11.5px !important;
    word-break: break-all !important;
  }

  .accounto-btn-copy,
  .accounto-btn-mask-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .accounto-svc-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .accounto-svc-actions a {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 12.5px !important;
  }

  /* 5. Subpage Headers */
  .accounto-subpage {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .accounto-subpage-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .accounto-subpage-head .accounto-btn-coral,
  .accounto-subpage-head .accounto-btn-telegram {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* 6. Form Inputs iOS Auto-Zoom Prevention */
  input.accounto-input,
  select.accounto-input,
  textarea.accounto-input,
  .woocommerce-EditAccountForm input.input-text {
    font-size: 16px !important;
    min-height: 46px !important;
  }

  .accounto-support-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 7. Auth Page on Mobile */
  .accounto-portal-page-auth-wrap {
    width: 100% !important;
    padding: 10px !important;
    margin: 20px auto 40px !important;
  }
}

/* ==========================================================================
   Table-to-Cards Transformation (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .accounto-orders-table thead {
    display: none !important;
  }

  .accounto-orders-table,
  .accounto-orders-table tbody,
  .accounto-orders-table tr,
  .accounto-orders-table td {
    display: block !important;
    width: 100% !important;
  }

  .accounto-orders-table tr {
    margin-bottom: 12px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(17, 19, 24, 0.03) !important;
  }

  .accounto-orders-table tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .accounto-orders-table tr td:not(:last-child) {
    border-bottom: 1px dashed rgba(20, 23, 31, 0.08) !important;
  }

  .accounto-orders-table tr td:before {
    content: attr(data-label) !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: var(--acc-muted) !important;
    flex-shrink: 0 !important;
  }

  .accounto-btn-order-action {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin-top: 4px !important;
  }
}

/* ==========================================================================
   Account Settings (تنظیمات و امنیت حساب کاربری) - Apple Bento Design
   ========================================================================== */

/* Active Pulse Dot Animation */
.accounto-pulse-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: var(--acc-coral) !important;
  box-shadow: 0 0 10px var(--acc-coral) !important;
  animation: accountoDotPulse 1.8s infinite ease-in-out !important;
}

@keyframes accountoDotPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 92, 122, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(255, 92, 122, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 92, 122, 0); }
}

.accounto-tile-sub.is-active-sub {
  color: var(--acc-coral) !important;
  font-weight: 750 !important;
}

/* Settings Wrap */
.accounto-portal-settings-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}

/* Settings Header Banner */
.accounto-settings-header-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 22px 28px !important;
  border-radius: var(--acc-radius-lg) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 250, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--acc-shadow) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.accounto-header-text {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.accounto-header-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: #fff1f2 !important;
  border: 1px solid #ffe4e6 !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

/* Dedicated Prominent Logout Button */
.accounto-btn-logout-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #e11d48 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.08) !important;
}

.accounto-btn-logout-danger:hover {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.28) !important;
}

/* Profile Summary Card */
.accounto-profile-summary-card {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 24px !important;
  border-radius: var(--acc-radius-lg) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-card-border) !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-avatar-disc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff5c7a 0%, #e84b68 100%) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 20px rgba(255, 92, 122, 0.32) !important;
}

.accounto-profile-info-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.accounto-profile-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.accounto-profile-display-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--acc-ink) !important;
}

.accounto-profile-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  font-size: 12px !important;
  color: var(--acc-muted) !important;
}

.accounto-profile-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Settings Form Card */
.accounto-form-card {
  padding: 32px 30px !important;
  border-radius: var(--acc-radius-lg) !important;
  background: #ffffff !important;
  border: 1px solid var(--acc-card-border) !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-form-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.accounto-form-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--acc-ink) !important;
  margin: 0 !important;
}

.accounto-form-section-desc {
  font-size: 12px !important;
  color: var(--acc-muted) !important;
  margin: -6px 0 4px !important;
}

.accounto-form-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .accounto-form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

.accounto-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.accounto-form-group label {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #334155 !important;
}

.accounto-req {
  color: #e11d48 !important;
  font-weight: 800 !important;
}

.accounto-form-hint {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin: 2px 0 0 !important;
}

/* Modern Rounded Input */
.accounto-form-input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.accounto-form-input:focus {
  border-color: var(--acc-coral) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(255, 92, 122, 0.16) !important;
}

/* Password Wrap & Eye Toggle */
.accounto-password-input-wrap {
  position: relative !important;
  width: 100% !important;
}

.accounto-password-input-wrap .accounto-form-input {
  padding-left: 44px !important;
}

.accounto-password-toggle {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  opacity: 0.65 !important;
  transition: opacity 0.15s ease !important;
}

.accounto-password-toggle:hover {
  opacity: 1 !important;
}

/* Divider */
.accounto-form-divider {
  width: 100% !important;
  height: 1px !important;
  border-top: 1px dashed #e2e8f0 !important;
  margin: 12px 0 !important;
}

/* Save Button */
.accounto-form-actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.accounto-btn-save-settings {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 12px 32px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff5c7a 0%, #e84b68 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 8px 24px rgba(255, 92, 122, 0.35) !important;
}

.accounto-btn-save-settings:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255, 92, 122, 0.48) !important;
  background: linear-gradient(135deg, #ff4769 0%, #d83a57 100%) !important;
}

.accounto-btn-save-settings:active {
  transform: scale(0.97) !important;
}

/* Clean and Normalize any Raw Third-Party Plugin Injections in Edit Account */
.accounto-extra-plugins-fields {
  margin-top: 16px !important;
}

.accounto-extra-plugins-fields fieldset {
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin-top: 16px !important;
  background: #f8fafc !important;
}

.accounto-extra-plugins-fields legend {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #334155 !important;
  padding: 0 10px !important;
}

.accounto-extra-plugins-fields input[type="text"] {
  min-height: 42px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13px !important;
}

/* ==========================================================================
   Accounto Pro Portal - Modern View Order (Bento Receipt)
   ========================================================================== */
.accounto-view-order-subpage {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.accounto-vo-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--acc-line) !important;
}

.accounto-vo-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--acc-muted) !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
  transition: color 0.18s ease !important;
}

.accounto-vo-back-btn:hover {
  color: var(--acc-coral) !important;
}

.accounto-vo-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.accounto-vo-tile {
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
}

.accounto-vo-tile-label {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: var(--acc-muted) !important;
}

.accounto-vo-tile-val {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
}

.accounto-vo-tile-val.is-price {
  color: var(--acc-coral) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.accounto-vo-tile-val.is-delivery {
  color: #10b981 !important;
  font-size: 12px !important;
}

.accounto-vo-card {
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  border-radius: 20px !important;
  padding: 22px !important;
  box-shadow: var(--acc-shadow) !important;
}

.accounto-vo-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--acc-line) !important;
  margin-bottom: 14px !important;
}

.accounto-vo-card-head h2 {
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 0 !important;
}

.accounto-vo-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.accounto-vo-items-list {
  display: flex !important;
  flex-direction: column !important;
}

.accounto-vo-item {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.accounto-vo-item:last-child {
  border-bottom: none !important;
}

.accounto-vo-item-img {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.accounto-vo-item-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.accounto-vo-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--acc-coral) !important;
  background: #fff5f7 !important;
}

.accounto-vo-qty {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--acc-coral) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
}

.accounto-vo-item-details strong {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin-bottom: 4px !important;
}

.accounto-vo-item-meta {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.accounto-vo-item-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 10.5px !important;
  color: #475569 !important;
}

.accounto-vo-item-meta em {
  font-style: normal !important;
  color: #94a3b8 !important;
}

.accounto-vo-item-price {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  white-space: nowrap !important;
}

.accounto-vo-totals {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px dashed #cbd5e1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.accounto-vo-totals-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12.5px !important;
  color: var(--acc-muted) !important;
}

.accounto-vo-totals-row strong {
  color: var(--acc-ink) !important;
  font-size: 13px !important;
}

.accounto-vo-totals-row.is-saving strong {
  color: var(--acc-coral) !important;
}

.accounto-vo-totals-row.is-total {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--acc-ink) !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.accounto-vo-totals-row.is-total strong {
  color: var(--acc-coral) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.accounto-vo-details-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.accounto-vo-info-box {
  background: #ffffff !important;
  border: 1px solid var(--acc-line) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
}

.accounto-vo-info-box.is-highlight {
  border-color: rgba(255, 92, 122, 0.25) !important;
  background: #fff8fa !important;
}

.accounto-vo-info-box h3 {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: var(--acc-ink) !important;
  margin: 0 0 12px !important;
}

.accounto-vo-info-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.accounto-vo-info-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
}

.accounto-vo-info-list li span {
  color: var(--acc-muted) !important;
}

.accounto-vo-info-list li strong {
  color: var(--acc-ink) !important;
  font-weight: 750 !important;
}

.accounto-vo-code-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 10px 0 8px !important;
}

.accounto-vo-code-badge code {
  flex: 1 !important;
  background: #ffffff !important;
  border: 1.5px dashed var(--acc-coral) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--acc-coral) !important;
  text-align: center !important;
  letter-spacing: 1px !important;
}

.accounto-btn-copy {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: var(--acc-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.accounto-btn-copy:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.accounto-btn-telegram-soft {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  background: rgba(36, 161, 222, 0.08) !important;
  border: 1px solid rgba(36, 161, 222, 0.25) !important;
  color: #24a1de !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin-top: 10px !important;
  transition: all 0.18s ease !important;
}

.accounto-btn-telegram-soft:hover {
  background: #24a1de !important;
  color: #ffffff !important;
}

.accounto-vo-bottom-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.accounto-btn-subpage-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: var(--acc-ink) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.accounto-btn-subpage-back:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

@media (max-width: 768px) {
  .accounto-vo-tiles-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .accounto-vo-details-grid {
    grid-template-columns: 1fr !important;
  }

  .accounto-vo-bottom-actions {
    flex-direction: column !important;
  }

  .accounto-vo-bottom-actions a {
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   Accounto Pro Portal 4.3.0 - Model 5: Core Brand Harmony Styling
   Honoring the primary brand color: Coral Pink (#FF5C7A / #FF385C)
========================================================================== */

/* 1. Master 5 Bento Navigation Tiles */
.accounto-bento-grid {
  gap: 12px !important;
}

/* Tile 1: Dashboard (Soft Sky Cyan) */
.accounto-bento-col:nth-child(1) .accounto-bento-tile {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  color: #0369A1 !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.accounto-bento-col:nth-child(1) .accounto-bento-tile:not(.is-active) .accounto-tile-title {
  color: #0369A1 !important;
  font-weight: 850 !important;
}
.accounto-bento-col:nth-child(1) .accounto-bento-tile:not(.is-active) .accounto-tile-sub {
  color: #0284C7 !important;
  font-weight: 700 !important;
}
.accounto-bento-col:nth-child(1) .accounto-bento-tile:hover {
  border-color: #38BDF8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.14) !important;
}
/* Active Tile 1: پر رنگ و باطراوت فیروزه‌ای / آبی آسمانی */
.accounto-bento-col:nth-child(1) .accounto-bento-tile.is-active {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border: 1.5px solid #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.38) !important;
}

/* Tile 2: My Services (Coral Brand Signature) */
.accounto-bento-col:nth-child(2) .accounto-bento-tile {
  background: #FFF1F3 !important;
  border: 1.5px solid #FECDD3 !important;
  color: #E11D48 !important;
  box-shadow: 0 4px 16px rgba(255, 92, 122, 0.08) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.accounto-bento-col:nth-child(2) .accounto-bento-tile:not(.is-active) .accounto-tile-title {
  color: #E11D48 !important;
  font-weight: 850 !important;
}
.accounto-bento-col:nth-child(2) .accounto-bento-tile:not(.is-active) .accounto-tile-sub {
  color: #FF5C7A !important;
  font-weight: 700 !important;
}
.accounto-bento-col:nth-child(2) .accounto-bento-tile:hover {
  border-color: #FF5C7A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 92, 122, 0.16) !important;
}
/* Active Tile 2: پر رنگ و درخشان صورتی مرجانی */
.accounto-bento-col:nth-child(2) .accounto-bento-tile.is-active,
.accounto-bento-tile.is-active {
  background: linear-gradient(135deg, #FF5C7A 0%, #FF385C 100%) !important;
  border: 1.5px solid #FF5C7A !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(255, 92, 122, 0.38) !important;
}

/* Tile 3: Orders (Soft Amber) */
.accounto-bento-col:nth-child(3) .accounto-bento-tile {
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.06) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.accounto-bento-col:nth-child(3) .accounto-bento-tile:not(.is-active) .accounto-tile-title {
  color: #B45309 !important;
  font-weight: 850 !important;
}
.accounto-bento-col:nth-child(3) .accounto-bento-tile:not(.is-active) .accounto-tile-sub {
  color: #D97706 !important;
  font-weight: 700 !important;
}
.accounto-bento-col:nth-child(3) .accounto-bento-tile:hover {
  border-color: #F59E0B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.14) !important;
}
/* Active Tile 3: پر رنگ و گرم کهربایی و طلایی */
.accounto-bento-col:nth-child(3) .accounto-bento-tile.is-active {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border: 1.5px solid #F59E0B !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.38) !important;
}

/* Tile 4: Support (Soft Emerald Mint) */
.accounto-bento-col:nth-child(4) .accounto-bento-tile {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.06) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.accounto-bento-col:nth-child(4) .accounto-bento-tile:not(.is-active) .accounto-tile-title {
  color: #047857 !important;
  font-weight: 850 !important;
}
.accounto-bento-col:nth-child(4) .accounto-bento-tile:not(.is-active) .accounto-tile-sub {
  color: #059669 !important;
  font-weight: 700 !important;
}
.accounto-bento-col:nth-child(4) .accounto-bento-tile:hover {
  border-color: #10B981 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.14) !important;
}
/* Active Tile 4: پر رنگ و باطراوت زمردی و سبز نعنایی */
.accounto-bento-col:nth-child(4) .accounto-bento-tile.is-active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border: 1.5px solid #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.38) !important;
}

/* Tile 5: Settings / Logout (Soft Pearl Slate) */
.accounto-bento-col:nth-child(5) .accounto-bento-tile,
.is-settings-col .accounto-bento-tile {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: 0 4px 16px rgba(51, 65, 85, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.accounto-bento-col:nth-child(5) .accounto-bento-tile:not(.is-active) .accounto-tile-title,
.is-settings-col .accounto-bento-tile:not(.is-active) .accounto-tile-title {
  color: #334155 !important;
  font-weight: 850 !important;
}
.accounto-bento-col:nth-child(5) .accounto-bento-tile:not(.is-active) .accounto-tile-sub,
.is-settings-col .accounto-bento-tile:not(.is-active) .accounto-tile-sub {
  color: #64748B !important;
  font-weight: 700 !important;
}
.accounto-bento-col:nth-child(5) .accounto-bento-tile:hover,
.is-settings-col .accounto-bento-tile:hover {
  border-color: #CBD5E1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(51, 65, 85, 0.12) !important;
}
/* Active Tile 5: پر رنگ و باوقار زغالی تیره و تیتانیومی */
.accounto-bento-col:nth-child(5) .accounto-bento-tile.is-active,
.is-settings-col .accounto-bento-tile.is-active {
  background: linear-gradient(135deg, #334155 0%, #1E293B 100%) !important;
  border: 1.5px solid #334155 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(51, 65, 85, 0.38) !important;
}

/* ==========================================================================
   Universal High-Contrast Typography & Glow for ALL Active ("پر رنگ") Tiles
   (تضمین خوانایی ۱۰۰٪ سفید متون روی پس‌زمینه‌های اشباع و پر رنگ)
   ========================================================================== */
.accounto-bento-tile.is-active,
.accounto-bento-col .accounto-bento-tile.is-active,
.accounto-bento-col:nth-child(1) .accounto-bento-tile.is-active,
.accounto-bento-col:nth-child(2) .accounto-bento-tile.is-active,
.accounto-bento-col:nth-child(3) .accounto-bento-tile.is-active,
.accounto-bento-col:nth-child(4) .accounto-bento-tile.is-active,
.accounto-bento-col:nth-child(5) .accounto-bento-tile.is-active,
.is-settings-col .accounto-bento-tile.is-active {
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
}

.accounto-bento-tile.is-active:hover,
.accounto-bento-col .accounto-bento-tile.is-active:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.04) !important;
}

/* عناوین کاشی‌های فعال: سفید شفاف، پررنگ با سایه متن */
.accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col:nth-child(1) .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col:nth-child(2) .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col:nth-child(3) .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col:nth-child(4) .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-col:nth-child(5) .accounto-bento-tile.is-active .accounto-tile-title,
.is-settings-col .accounto-bento-tile.is-active .accounto-tile-title,
.accounto-bento-tile.is-active strong,
.accounto-bento-col .accounto-bento-tile.is-active strong {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* زیرعنوان کاشی‌های فعال: سفید شفاف و کاملاً خوانا */
.accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col:nth-child(1) .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col:nth-child(2) .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col:nth-child(3) .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col:nth-child(4) .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-col:nth-child(5) .accounto-bento-tile.is-active .accounto-tile-sub,
.is-settings-col .accounto-bento-tile.is-active .accounto-tile-sub,
.accounto-bento-tile.is-active span.accounto-tile-sub,
.accounto-bento-col .accounto-bento-tile.is-active span.accounto-tile-sub {
  color: #FFFFFF !important;
  opacity: 0.98 !important;
  font-weight: 750 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.accounto-bento-tile.is-active .accounto-pulse-dot {
  background: #FFFFFF !important;
  box-shadow: 0 0 12px #FFFFFF !important;
}

.accounto-bento-tile.is-active .accounto-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.accounto-bento-tile.is-active .accounto-icon-link {
  color: #FFFFFF !important;
}

.accounto-bento-tile.is-active .accounto-logout-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  text-shadow: none !important;
}

.accounto-bento-tile.is-active .accounto-logout-badge span,
.accounto-bento-tile.is-active .accounto-logout-badge svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* 2. Service Details & Hero High-Contrast Styling (Model 5 Brand Harmony) */
.acs-back {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.acs-back a {
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}
.acs-back a:hover {
  color: #FF5C7A !important;
  transform: translateX(2px) !important;
}
.acs-code-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 99px !important;
  padding: 6px 14px !important;
  color: #0F172A !important;
  font-family: inherit !important;
  font-weight: 850 !important;
  font-size: 11.5px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.acs-code-copy:hover {
  border-color: #FF5C7A !important;
  box-shadow: 0 4px 14px rgba(255, 92, 122, 0.15) !important;
}
.acs-code-copy span {
  color: #FF5C7A !important;
  font-weight: 850 !important;
  margin-right: 4px !important;
}

/* Hero Container */
.acs-detail-hero {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: linear-gradient(135deg, #0F172A 0%, #1E1B2E 100%) !important;
  border: 1.5px solid rgba(255, 92, 122, 0.35) !important;
  border-radius: 22px !important;
  padding: 24px 28px !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18) !important;
}
.acs-detail-hero::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(255, 92, 122, 0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}

/* 1. Small badge 'مرکز مدیریت سرویس' */
.acs-detail-hero small {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 92, 122, 0.24) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 92, 122, 0.5) !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.01em !important;
}

/* 2. Hero Heading h1 */
.acs-detail-hero h1,
.acs-detail-hero h2 {
  color: #FFFFFF !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Hero Paragraph p */
.acs-detail-hero p {
  color: #E2E8F0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  margin: 4px 0 0 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Hero Actions & Status Badges - High Neon Contrast */
.acs-detail-hero .acs-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 2 !important;
}

.acs-detail-hero .acs-status,
.acs-detail-hero .accounto-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 850 !important;
  font-size: 12px !important;
  padding: 7px 15px !important;
  border-radius: 99px !important;
  min-height: 34px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Delivered / Active (تحویل‌شده / فعال) */
.acs-detail-hero .acs-status.is-success,
.acs-detail-hero .acs-status.is-active,
.acs-detail-hero .acs-status.is-delivered,
.acs-detail-hero .accounto-status-badge.is-success,
.acs-detail-hero .accounto-status-badge.is-active,
.acs-detail-hero .accounto-status-badge.is-delivered {
  background: rgba(16, 185, 129, 0.28) !important;
  color: #6EE7B7 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25) !important;
}
.acs-detail-hero .acs-status.is-success i,
.acs-detail-hero .accounto-status-badge.is-success i {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #6EE7B7 !important;
  box-shadow: 0 0 8px #6EE7B7 !important;
}

/* Processing / Progress (در حال آماده‌سازی) */
.acs-detail-hero .acs-status.is-progress,
.acs-detail-hero .acs-status.is-processing,
.acs-detail-hero .accounto-status-badge.is-progress,
.acs-detail-hero .accounto-status-badge.is-processing {
  background: rgba(56, 189, 248, 0.25) !important;
  color: #7DD3FC !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2) !important;
}
.acs-detail-hero .acs-status.is-progress i,
.acs-detail-hero .accounto-status-badge.is-progress i {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #7DD3FC !important;
  box-shadow: 0 0 8px #7DD3FC !important;
}

/* Warning / Review (در انتظار بررسی / معلق) */
.acs-detail-hero .acs-status.is-warn,
.acs-detail-hero .acs-status.is-warning,
.acs-detail-hero .acs-status.is-on-hold,
.acs-detail-hero .acs-status.is-review,
.acs-detail-hero .accounto-status-badge.is-warn,
.acs-detail-hero .accounto-status-badge.is-warning,
.acs-detail-hero .accounto-status-badge.is-on-hold,
.acs-detail-hero .accounto-status-badge.is-review {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #FDE047 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2) !important;
}
.acs-detail-hero .acs-status.is-warn i,
.acs-detail-hero .accounto-status-badge.is-warn i {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #FDE047 !important;
  box-shadow: 0 0 8px #FDE047 !important;
}

/* Danger / Expired (منقضی / مسدود) */
.acs-detail-hero .acs-status.is-danger,
.acs-detail-hero .acs-status.is-expired,
.acs-detail-hero .accounto-status-badge.is-danger,
.acs-detail-hero .accounto-status-badge.is-expired {
  background: rgba(244, 63, 94, 0.25) !important;
  color: #FDA4AF !important;
  border: 1.5px solid rgba(244, 63, 94, 0.6) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.2) !important;
}

/* Print Button inside Hero */
.acs-detail-hero .acs-icon-button {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  font-weight: 850 !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.acs-detail-hero .acs-icon-button:hover {
  background: #F8FAFC !important;
  color: #FF5C7A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}
.acs-detail-hero .acs-icon-button svg {
  stroke: #0F172A !important;
}

/* Navigation Tabs below Hero */
.acs-section-nav {
  position: sticky !important;
  top: 10px !important;
  z-index: 9 !important;
  display: flex !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 8px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  overflow: auto !important;
}
.acs-section-nav a {
  flex: 0 0 auto !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  color: #475569 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}
.acs-section-nav a:hover,
.acs-section-nav a.is-active,
.acs-section-nav a[aria-current="page"] {
  background: #FFFFFF !important;
  color: #FF5C7A !important;
  box-shadow: 0 4px 12px rgba(255, 92, 122, 0.12) !important;
}

/* Vault Card */
.acs-vault {
  background: #FFFFFF !important;
  border: 2px solid #FF5C7A !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 32px rgba(255, 92, 122, 0.08) !important;
  padding: 20px !important;
}
.acs-vault-head {
  background: linear-gradient(135deg, #FFF1F3 0%, #FFFFFF 100%) !important;
  border: 1px solid rgba(255, 92, 122, 0.2) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
.acs-vault-head__icon {
  background: linear-gradient(135deg, #FF5C7A, #FF385C) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(255, 92, 122, 0.35) !important;
}
.acs-vault-head__copy span {
  color: #E11D48 !important;
  font-weight: 800 !important;
}
.acs-vault .acs-vault-head h2 {
  color: #0F172A !important;
  font-weight: 900 !important;
}
.acs-vault .acs-vault-head p {
  color: #64748B !important;
}

/* Secret Credential Fields in Vault */
.acs-secret-field.is-primary {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: all 0.2s ease !important;
}
.acs-secret-field.is-primary:hover {
  border-color: #FF5C7A !important;
  box-shadow: 0 4px 16px rgba(255, 92, 122, 0.08) !important;
}
.acs-secret-field.is-primary > small {
  color: #64748B !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
.acs-secret-field.is-primary .acs-secret-value code {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  font-family: 'Consolas', monospace, Vazirmatn !important;
}
.acs-secret-field.is-primary .acs-secret-value button[data-acs-reveal] {
  background: #FFF1F3 !important;
  border: 1px solid rgba(255, 92, 122, 0.3) !important;
  color: #FF5C7A !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}
.acs-secret-field.is-primary .acs-secret-value button[data-acs-reveal]:hover {
  background: #FFE4E8 !important;
  border-color: #FF5C7A !important;
}
.acs-secret-field.is-primary .acs-secret-value button[data-acs-copy] {
  background: linear-gradient(135deg, #FF5C7A, #FF385C) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(255, 92, 122, 0.3) !important;
}

/* Status & Life */
.acs-status-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}
.acs-life > i > b {
  background: linear-gradient(90deg, #FF5C7A, #0EA5E9) !important;
}