/*
==========================================
PRO ADMIN UI KIT - COMPONENT LIBRARY
==========================================

Comprehensive UI component library for BuyUSAFirst Pro Admin theme.
Works with both .pro-admin and .pro-merchant themes.

FILE ORGANIZATION:
1. CSS Variables (this section)
2. Core Components (cards, buttons, forms, tables, etc.)
3. Layout Components (sidebar, dropdowns, modals)
4. Advanced Components (multiselect, inline editing)
5. UI Kit Demo Specific (at end of file)

NAMING CONVENTION:
- Prefix: .pa- (Pro Admin)
- BEM-like structure: .pa-component__element--modifier
- State classes: .active, .selected, .is-editing

KEY IDs FOR JAVASCRIPT:
- #mainLayout - Main layout container
- #topHeader - Full-width top header
- #sidebarToggle - Hamburger menu button
- #sidebar - Left navigation sidebar
- #mainContent - Right content area
- #userMenu - User dropdown menu
- #globalSearchBtn - Global search button
- #notificationsBtn - Notifications button

BROWSER SUPPORT:
- Modern browsers (Chrome, Firefox, Safari, Edge)
- CSS Grid and Flexbox required
- CSS Custom Properties (variables) required

MAINTENANCE NOTES:
- All inline styles have been extracted to this file for caching
- Grouped by component type for easy navigation
- Comprehensive comments for each section
- Modify CSS here, NOT in HTML inline styles

==========================================
*/

/* ====================================
   CSS VARIABLES
   Shared across .pro-admin and .pro-merchant themes
   ==================================== */

.pro-admin,
.pro-merchant {
  /* Brand Colors */
  --pa-primary: var(--primary-blue, #0075B2);
  --pa-primary-dark: var(--primary-blue-dark, #005A8B);
  --pa-danger: var(--primary-red, #E21F26);
  --pa-success: #2ECC71;
  --pa-warning: #F1C40F;

  /* Layout Colors */
  --pa-bg: var(--bg-color, #EEF2F6);
  --pa-card: var(--card-bg, #FFFFFF);
  --pa-border: var(--border-color, #DCE1E7);

  /* Text Colors */
  --pa-text: var(--text-main, #3F4B59);
  --pa-muted: var(--text-muted, #8B94A3);

  /* Sidebar Dimensions */
  --pa-sidebar-width: 250px;
  --pa-sidebar-collapsed-width: 70px;

  color: var(--pa-text);
}

.pro-admin .pa-card,
.pro-merchant .pa-card {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pro-admin .pa-card-header,
.pro-merchant .pa-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pa-border);
  font-weight: 600;
}

.pro-admin .pa-card-body,
.pro-merchant .pa-card-body {
  padding: 1rem;
}

.pro-admin .pa-btn,
.pro-merchant .pa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #F3F4F6;
  color: var(--pa-text);
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.pro-admin .pa-btn:hover,
.pro-merchant .pa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.pro-admin .pa-btn:focus-visible,
.pro-merchant .pa-btn:focus-visible {
  outline: 2px solid rgba(0, 117, 178, 0.35);
  outline-offset: 2px;
}

.pro-admin .pa-btn-primary,
.pro-merchant .pa-btn-primary {
  background: var(--pa-primary);
  color: #FFFFFF;
}

.pro-admin .pa-btn-secondary,
.pro-merchant .pa-btn-secondary {
  background: #FFFFFF;
  border-color: var(--pa-border);
  color: var(--pa-text);
}

.pro-admin .pa-btn-outline,
.pro-merchant .pa-btn-outline {
  background: transparent;
  border-color: var(--pa-primary);
  color: var(--pa-primary);
}

.pro-admin .pa-btn-danger,
.pro-merchant .pa-btn-danger {
  background: var(--pa-danger);
  color: #FFFFFF;
}

.pro-admin .pa-btn-sm,
.pro-merchant .pa-btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.pro-admin .pa-btn-lg,
.pro-merchant .pa-btn-lg {
  padding: 0.6rem 1.3rem;
  font-size: 0.95rem;
}

.pro-admin .pa-form-grid,
.pro-merchant .pa-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.pro-admin .pa-field,
.pro-merchant .pa-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pro-admin .pa-label,
.pro-merchant .pa-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pa-muted);
}

.pro-admin .pa-input,
.pro-admin .pa-select,
.pro-admin .pa-textarea,
.pro-merchant .pa-input,
.pro-merchant .pa-select,
.pro-merchant .pa-textarea {
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: var(--pa-text);
  background: #FFFFFF;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.pro-admin .pa-input:focus,
.pro-admin .pa-select:focus,
.pro-admin .pa-textarea:focus,
.pro-merchant .pa-input:focus,
.pro-merchant .pa-select:focus,
.pro-merchant .pa-textarea:focus {
  outline: none;
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 3px rgba(0, 117, 178, 0.12);
}

.pro-admin .pa-helper,
.pro-merchant .pa-helper {
  font-size: 0.75rem;
  color: var(--pa-muted);
}

.pro-admin .pa-error,
.pro-merchant .pa-error {
  font-size: 0.75rem;
  color: var(--pa-danger);
}

.pro-admin .pa-table,
.pro-merchant .pa-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
}

.pro-admin .pa-table th,
.pro-admin .pa-table td,
.pro-merchant .pa-table th,
.pro-merchant .pa-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--pa-border);
  font-size: 0.8rem;
}

.pro-admin .pa-table th,
.pro-merchant .pa-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--pa-muted);
  background: #F7F8FA;
}

.pro-admin .pa-table tr:last-child td,
.pro-merchant .pa-table tr:last-child td {
  border-bottom: none;
}

.pro-admin .pa-alert,
.pro-merchant .pa-alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.8rem;
}

.pro-admin .pa-alert-info,
.pro-merchant .pa-alert-info {
  background: rgba(0, 117, 178, 0.12);
  border-color: rgba(0, 117, 178, 0.3);
  color: var(--pa-primary);
}

.pro-admin .pa-alert-success,
.pro-merchant .pa-alert-success {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.3);
  color: #1E8C4A;
}

.pro-admin .pa-alert-warning,
.pro-merchant .pa-alert-warning {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.35);
  color: #8A6D00;
}

.pro-admin .pa-alert-danger,
.pro-merchant .pa-alert-danger {
  background: rgba(226, 31, 38, 0.12);
  border-color: rgba(226, 31, 38, 0.3);
  color: #9B0F14;
}

.pro-admin .pa-badge,
.pro-merchant .pa-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #E7EBF0;
  color: var(--pa-muted);
}

.pro-admin .pa-badge-success,
.pro-merchant .pa-badge-success {
  background: rgba(46, 204, 113, 0.2);
  color: #1E8C4A;
}

.pro-admin .pa-badge-warning,
.pro-merchant .pa-badge-warning {
  background: rgba(241, 196, 15, 0.25);
  color: #8A6D00;
}

.pro-admin .pa-badge-danger,
.pro-merchant .pa-badge-danger {
  background: rgba(226, 31, 38, 0.2);
  color: #9B0F14;
}

/* Badge in menu items */
.pro-admin .pa-menu-item .pa-badge,
.pro-merchant .pa-menu-item .pa-badge {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
}

/* Collapsed state: show badge as dot indicator */
html.sidebar-collapsed .pro-admin .pa-menu-item .pa-badge,
html.sidebar-collapsed .pro-merchant .pa-menu-item .pa-badge {
  width: 6px;
  height: 6px;
  min-width: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--pa-danger);
  right: 8px;
  top: 8px;
  transform: none;
  font-size: 0;
  overflow: hidden;
}

/* Badge hover behavior removed - badges remain as dots when collapsed */

.pro-admin .pa-menu,
.pro-merchant .pa-menu {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;  /* Ultra-tight spacing */
}

.pro-admin .pa-menu-item,
.pro-merchant .pa-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;  /* More compact vertical padding */
  border-radius: 4px;
  color: var(--pa-muted);
  text-decoration: none;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
  position: relative;
  min-height: 30px;  /* More compact height */
  line-height: 1.1;  /* Even tighter line height */
}

.pro-admin .pa-menu-item i,
.pro-merchant .pa-menu-item i {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.pro-admin .pa-menu-item:hover,
.pro-merchant .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-text);
}

/* Active: subtle background only; icon and text stay primary so the icon stays clear */
.pro-admin .pa-menu-item.active,
.pro-merchant .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
  font-weight: 600;
}

.pro-admin .pa-menu-item.active i,
.pro-merchant .pa-menu-item.active i {
  color: var(--pa-primary);
}

/* Keep focus outline consistent (avoid global yellow); icon stays visible */
.pro-admin .pa-menu-item:focus-visible,
.pro-merchant .pa-menu-item:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: 2px;
}

.pro-admin .pa-tabs,
.pro-merchant .pa-tabs {
  display: inline-flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-tab,
.pro-merchant .pa-tab {
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pa-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.pro-admin .pa-tab.active,
.pro-merchant .pa-tab.active {
  color: var(--pa-primary);
  border-color: var(--pa-primary);
}

.pro-admin .pa-modal-overlay,
.pro-merchant .pa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
  will-change: opacity;
}

.pro-admin .pa-modal,
.pro-merchant .pa-modal {
  background: var(--pa-card);
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pro-admin .pa-modal-header,
.pro-merchant .pa-modal-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--pa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-admin .pa-modal-title,
.pro-merchant .pa-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--pa-text);
}

.pro-admin .pa-modal-close,
.pro-merchant .pa-modal-close {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pa-muted);
  transition: all 150ms ease-in-out;
}

.pro-admin .pa-modal-close:hover,
.pro-merchant .pa-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--pa-text);
}

.pro-admin .pa-modal-body,
.pro-merchant .pa-modal-body {
  padding: 1.2rem;
  overflow-y: auto;
  flex: 1;
}

.pro-admin .pa-modal-footer,
.pro-merchant .pa-modal-footer {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--pa-border);
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  background: #F7F8FA;
}

.pro-admin .pa-tooltip-wrapper,
.pro-merchant .pa-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.pro-admin .pa-tooltip,
.pro-merchant .pa-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--pa-text);
  color: #FFFFFF;
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
  z-index: 100;
}

.pro-admin .pa-tooltip::after,
.pro-merchant .pa-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--pa-text);
}

.pro-admin .pa-tooltip-wrapper:hover .pa-tooltip,
.pro-merchant .pa-tooltip-wrapper:hover .pa-tooltip {
  opacity: 1;
}

.pro-admin .pa-tooltip-right,
.pro-merchant .pa-tooltip-right {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
}

.pro-admin .pa-tooltip-right::after,
.pro-merchant .pa-tooltip-right::after {
  top: 50%;
  left: 0;
  transform: translateX(-8px) translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--pa-text);
}

.pro-admin .pa-empty-state,
.pro-merchant .pa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--pa-muted);
}

.pro-admin .pa-empty-icon,
.pro-merchant .pa-empty-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #F7F8FA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 2.25rem;
  color: var(--pa-border);
}

.pro-admin .pa-empty-title,
.pro-merchant .pa-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pa-text);
  margin: 0 0 0.65rem 0;
}

.pro-admin .pa-empty-description,
.pro-merchant .pa-empty-description {
  font-size: 0.85rem;
  color: var(--pa-muted);
  margin: 0 0 1.25rem 0;
  max-width: 380px;
}

.pro-admin .pa-empty-actions,
.pro-merchant .pa-empty-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.pro-admin .pa-layout,
.pro-merchant .pa-layout {
  display: flex;
  min-height: 100vh;
  background: var(--pa-bg);
}

.pro-admin .pa-sidebar,
.pro-merchant .pa-sidebar {
  width: var(--pa-sidebar-width);
  background: var(--pa-card);
  border-right: 1px solid var(--pa-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;  /* Prevent scrollbars on sidebar itself */
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  z-index: 1000;
}

.pro-admin .pa-sidebar-header,
.pro-merchant .pa-sidebar-header {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--pa-border);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pa-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: visible;  /* Allow logo to be visible */
  position: relative;  /* For absolute positioning of pin button */
}

/* Sidebar pin button */
.pro-admin .pa-sidebar-pin,
.pro-merchant .pa-sidebar-pin {
  position: absolute;
  top: 0.7rem;
  left: 1.5rem;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0, 117, 178, 0.35);
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  z-index: 3;
}

.pro-admin .pa-sidebar-pin i,
.pro-merchant .pa-sidebar-pin i {
  font-size: 0.55rem;
  line-height: 1;
}

.pro-admin .pa-sidebar-pin:hover,
.pro-merchant .pa-sidebar-pin:hover {
  background: rgba(0, 117, 178, 0.14);
  border-color: rgba(0, 117, 178, 0.5);
  transform: translateX(-50%) scale(1.05);
}

.pro-admin .pa-sidebar-pin.is-unpinned i,
.pro-merchant .pa-sidebar-pin.is-unpinned i {
  transform: rotate(45deg);
}

.pro-admin .pa-sidebar-header i,
.pro-merchant .pa-sidebar-header i {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.pro-admin .pa-sidebar-header img,
.pro-merchant .pa-sidebar-header img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.pro-admin .pa-sidebar-nav,
.pro-merchant .pa-sidebar-nav {
  flex: 1;
  padding: 0.75rem;
  overflow-y: auto;  /* Allow scrolling of menu items only */
  overflow-x: hidden;  /* Prevent horizontal scrollbars from text-indent */
}

.pro-admin .pa-sidebar-footer,
.pro-merchant .pa-sidebar-footer {
  padding: 0;
  border-top: 1px solid var(--pa-border);
  font-size: 0.75rem;
  color: var(--pa-muted);
}

/* ====================================
   DARK MENU VARIANT
   ==================================== */
.pro-admin .pa-sidebar.dark-menu,
.pro-merchant .pa-sidebar.dark-menu {
  background: #1a2634;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.pro-admin .pa-sidebar.dark-menu .pa-sidebar-header,
.pro-merchant .pa-sidebar.dark-menu .pa-sidebar-header {
  background: #111a24;
  color: #ecf0f1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pro-admin .pa-sidebar.dark-menu .pa-menu-item,
.pro-merchant .pa-sidebar.dark-menu .pa-menu-item {
  color: #bdc3c7;
}

.pro-admin .pa-sidebar.dark-menu .pa-menu-item:hover,
.pro-merchant .pa-sidebar.dark-menu .pa-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ecf0f1;
}

.pro-admin .pa-sidebar.dark-menu .pa-menu-item.active,
.pro-merchant .pa-sidebar.dark-menu .pa-menu-item.active {
  background: rgba(0, 129, 198, 0.2);
  color: #ffffff;
  border-left: 3px solid var(--pa-primary);
}

.pro-admin .pa-sidebar.dark-menu .pa-sidebar-footer,
.pro-merchant .pa-sidebar.dark-menu .pa-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #95a5a6;
}

/* ====================================
   LIGHT MENU VARIANT (Default)
   ==================================== */
.pro-admin .pa-sidebar.light-menu,
.pro-merchant .pa-sidebar.light-menu {
  background: var(--pa-card);
  border-right: 1px solid var(--pa-border);
}

.pro-admin .pa-sidebar.light-menu .pa-sidebar-header,
.pro-merchant .pa-sidebar.light-menu .pa-sidebar-header {
  background: var(--pa-card);
  color: var(--pa-primary);
  border-bottom: 1px solid var(--pa-border);
}

.pro-merchant .pa-sidebar-header,
.pro-merchant .pa-sidebar.light-menu .pa-sidebar-header {
  border-bottom: none;
}

.pro-admin .pa-sidebar.light-menu .pa-menu-item,
.pro-merchant .pa-sidebar.light-menu .pa-menu-item {
  color: var(--pa-muted);
}

.pro-admin .pa-sidebar.light-menu .pa-menu-item:hover,
.pro-merchant .pa-sidebar.light-menu .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-text);
}

.pro-admin .pa-sidebar.light-menu .pa-menu-item.active,
.pro-merchant .pa-sidebar.light-menu .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
  font-weight: 600;
}

.pro-admin .pa-sidebar.light-menu .pa-menu-item.active i,
.pro-merchant .pa-sidebar.light-menu .pa-menu-item.active i {
  color: var(--pa-primary);
}

.pro-admin .pa-sidebar.light-menu .pa-sidebar-footer,
.pro-merchant .pa-sidebar.light-menu .pa-sidebar-footer {
  border-top: 1px solid var(--pa-border);
  color: var(--pa-muted);
}

.pro-admin .pa-main,
.pro-merchant .pa-main {
  flex: 1;
  overflow-x: hidden;
  margin-left: var(--pa-sidebar-width);
  transition: margin-left 300ms ease;
  width: 100%;
}

/* Adjust main content when sidebar is collapsed */
html.sidebar-collapsed .pro-admin .pa-main,
html.sidebar-collapsed .pro-merchant .pa-main {
  margin-left: var(--pa-sidebar-collapsed-width);
}

.pro-admin .pa-dropdown,
.pro-merchant .pa-dropdown {
  position: relative;
  display: inline-block;
}

.pro-admin .pa-dropdown-toggle,
.pro-merchant .pa-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  font-size: 0.85rem;
}

.pro-admin .pa-dropdown-toggle:hover,
.pro-merchant .pa-dropdown-toggle:hover {
  border-color: var(--pa-primary);
}

.pro-admin .pa-dropdown-menu,
.pro-merchant .pa-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  z-index: 100;
  display: none;
  max-height: 300px;
  overflow-y: auto;
}

.pro-admin .pa-dropdown.active .pa-dropdown-menu,
.pro-merchant .pa-dropdown.active .pa-dropdown-menu {
  display: block;
}

.pro-admin .pa-dropdown-search,
.pro-merchant .pa-dropdown-search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-dropdown-search input,
.pro-merchant .pa-dropdown-search input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  font-size: 0.8rem;
}

.pro-admin .pa-dropdown-item,
.pro-merchant .pa-dropdown-item {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 150ms ease-in-out;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pro-admin .pa-dropdown-item:hover,
.pro-merchant .pa-dropdown-item:hover {
  background: rgba(0, 117, 178, 0.08);
}

.pro-admin .pa-dropdown-item.selected,
.pro-merchant .pa-dropdown-item.selected {
  background: rgba(0, 117, 178, 0.12);
  color: var(--pa-primary);
  font-weight: 600;
}

.pro-admin .pa-dropdown-divider,
.pro-merchant .pa-dropdown-divider {
  height: 1px;
  background: var(--pa-border);
  margin: 0.25rem 0;
}

.pro-admin .pa-table-wrapper,
.pro-merchant .pa-table-wrapper {
  overflow-x: auto;
}

.pro-admin .pa-table-controls,
.pro-merchant .pa-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pa-border);
  gap: 1rem;
  flex-wrap: wrap;
}

.pro-admin .pa-table-search,
.pro-merchant .pa-table-search {
  flex: 1;
  min-width: 200px;
  max-width: 350px;
  position: relative;
}

.pro-admin .pa-table-search input,
.pro-merchant .pa-table-search input {
  width: 100%;
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  font-size: 0.8rem;
}

.pro-admin .pa-table-search i,
.pro-merchant .pa-table-search i {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pa-muted);
  font-size: 0.75rem;
}

.pro-admin .pa-table-actions,
.pro-merchant .pa-table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pro-admin .pa-table th,
.pro-merchant .pa-table th {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.pro-admin .pa-table th.sortable:hover,
.pro-merchant .pa-table th.sortable:hover {
  background: #ECEEF1;
}

.pro-admin .pa-table th .sort-icon,
.pro-merchant .pa-table th .sort-icon {
  margin-left: 0.4rem;
  font-size: 0.65rem;
  color: var(--pa-muted);
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.pro-admin .pa-table th:hover .sort-icon,
.pro-merchant .pa-table th:hover .sort-icon {
  opacity: 1;
}

.pro-admin .pa-table th.sorted .sort-icon,
.pro-merchant .pa-table th.sorted .sort-icon {
  opacity: 1;
  color: var(--pa-primary);
}

.pro-admin .pa-table-checkbox,
.pro-merchant .pa-table-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.pro-admin .pa-table tr.selected,
.pro-merchant .pa-table tr.selected {
  background: rgba(0, 117, 178, 0.06);
}

.pro-admin .pa-table-pagination,
.pro-merchant .pa-table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--pa-border);
  font-size: 0.8rem;
}

.pro-admin .pa-pagination-info,
.pro-merchant .pa-pagination-info {
  color: var(--pa-muted);
}

.pro-admin .pa-pagination-controls,
.pro-merchant .pa-pagination-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.pro-admin .pa-pagination-btn,
.pro-merchant .pa-pagination-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--pa-border);
  background: var(--pa-card);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 150ms ease-in-out;
}

.pro-admin .pa-pagination-btn:hover:not(:disabled),
.pro-merchant .pa-pagination-btn:hover:not(:disabled) {
  border-color: var(--pa-primary);
  color: var(--pa-primary);
}

.pro-admin .pa-pagination-btn:disabled,
.pro-merchant .pa-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pro-admin .pa-pagination-btn.active,
.pro-merchant .pa-pagination-btn.active {
  background: var(--pa-primary);
  color: #FFFFFF;
  border-color: var(--pa-primary);
}

.pro-admin .pa-multiselect,
.pro-merchant .pa-multiselect {
  position: relative;
  min-width: 250px;
}

.pro-admin .pa-multiselect-display,
.pro-merchant .pa-multiselect-display {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  background: var(--pa-card);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 36px;
}

.pro-admin .pa-multiselect-tag,
.pro-merchant .pa-multiselect-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: rgba(0, 117, 178, 0.12);
  color: var(--pa-primary);
  border-radius: 3px;
  font-size: 0.75rem;
}

.pro-admin .pa-multiselect-tag-remove,
.pro-merchant .pa-multiselect-tag-remove {
  cursor: pointer;
  opacity: 0.7;
}

.pro-admin .pa-multiselect-tag-remove:hover,
.pro-merchant .pa-multiselect-tag-remove:hover {
  opacity: 1;
}

/* ====================================
   SIDEBAR COLLAPSE/EXPAND FUNCTIONALITY
   ==================================== */

/* Collapsed sidebar state */
html.sidebar-collapsed .pro-admin .pa-sidebar,
html.sidebar-collapsed .pro-merchant .pa-sidebar {
  width: var(--pa-sidebar-collapsed-width);
}

/* Add more spacing between menu items when collapsed */
html.sidebar-collapsed .pro-admin .pa-menu,
html.sidebar-collapsed .pro-merchant .pa-menu {
  gap: 0.25rem;
}

/* Add transitions to text elements */
.pro-admin .pa-sidebar-header > *:not(i),
.pro-merchant .pa-sidebar-header > *:not(i),
.pro-admin .pa-sidebar-footer,
.pro-merchant .pa-sidebar-footer,
.pro-admin .pa-menu-item > *:not(i),
.pro-merchant .pa-menu-item > *:not(i) {
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* Hide text and non-essential elements when collapsed */
html.sidebar-collapsed .pro-admin .pa-sidebar-header > *:not(i):not(img):not(.pa-sidebar-pin),
html.sidebar-collapsed .pro-merchant .pa-sidebar-header > *:not(i):not(img):not(.pa-sidebar-pin) {
  opacity: 0;
  visibility: hidden;
}

/* Keep footer visible but hide text elements */
html.sidebar-collapsed .pro-admin .pa-sidebar-footer,
html.sidebar-collapsed .pro-merchant .pa-sidebar-footer {
  opacity: 1;
  visibility: visible;
}

/* Hide text elements within footer when collapsed */
html.sidebar-collapsed .sidebar-user-toggle .user-info,
html.sidebar-collapsed .sidebar-user-toggle .fa-chevron-up,
html.sidebar-collapsed .sidebar-theme-toggle span {
  display: none;
}

/* Hide text nodes in header when collapsed */
html.sidebar-collapsed .pro-admin .pa-sidebar-header,
html.sidebar-collapsed .pro-merchant .pa-sidebar-header {
  font-size: 0;
}

html.sidebar-collapsed .pro-admin .pa-sidebar-title,
html.sidebar-collapsed .pro-merchant .pa-sidebar-title {
  font-size: 0;
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

html.sidebar-collapsed .pro-admin .pa-sidebar:hover .pa-sidebar-title,
html.sidebar-collapsed .pro-merchant .pa-sidebar:hover .pa-sidebar-title {
  font-size: 1.1rem;
  opacity: 1;
  visibility: visible;
  width: auto;
  transition-delay: 400ms;
}

/* Keep logo visible with normal size */
html.sidebar-collapsed .pro-admin .pa-sidebar-header img,
html.sidebar-collapsed .pro-merchant .pa-sidebar-header img {
  font-size: initial;
  opacity: 1;
  visibility: visible;
}

/* Collapsed: minimal padding so icons sit close to the border */
html.sidebar-collapsed .pro-admin .pa-sidebar-nav,
html.sidebar-collapsed .pro-merchant .pa-sidebar-nav {
  padding-left: 0.25rem;
  padding-right: 0;
}

/* Center icons when collapsed and hide text */
html.sidebar-collapsed .pro-admin .pa-menu-item,
html.sidebar-collapsed .pro-merchant .pa-menu-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.25rem 0 !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: 32px !important;
  white-space: nowrap;
  overflow: visible;
  gap: 0 !important;
  font-size: 0 !important;
  text-indent: 0;
  color: transparent !important;
  width: 100%;
  position: relative;
  background: transparent;
  margin: 0 !important;
}

html.sidebar-collapsed .pro-admin .pa-menu-item i,
html.sidebar-collapsed .pro-merchant .pa-menu-item i {
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0;
  float: none;
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem !important;
  color: var(--pa-muted) !important;
  line-height: 1;
  border-radius: 6px;
  transition: all 200ms ease;
  flex-shrink: 0;
}

html.sidebar-collapsed .pro-admin .pa-menu-item:hover i,
html.sidebar-collapsed .pro-merchant .pa-menu-item:hover i {
  color: var(--pa-primary) !important;
  background: rgba(0, 117, 178, 0.1);
  transform: scale(1.05);
}

/* Collapsed active: colored icon only, no background or border */
html.sidebar-collapsed .pro-admin .pa-menu-item.active i,
html.sidebar-collapsed .pro-merchant .pa-menu-item.active i {
  color: var(--pa-primary) !important;
  background: transparent;
}

/* Blue accent bar on left for active items */
html.sidebar-collapsed .pro-admin .pa-menu-item::before,
html.sidebar-collapsed .pro-merchant .pa-menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--pa-primary);
  border-radius: 0 2px 2px 0;
  transition: height 200ms ease;
}

html.sidebar-collapsed .pro-admin .pa-menu-item.active::before,
html.sidebar-collapsed .pro-merchant .pa-menu-item.active::before {
  height: 0;
}

/* Logo/header - center it */
html.sidebar-collapsed .pro-admin .pa-sidebar-header,
html.sidebar-collapsed .pro-merchant .pa-sidebar-header {
  justify-content: center;
  padding: 1.2rem 0;  /* Remove horizontal padding to center perfectly */
}

html.sidebar-collapsed .pro-admin .pa-sidebar-header img,
html.sidebar-collapsed .pro-merchant .pa-sidebar-header img,
html.sidebar-collapsed .pro-admin .pa-sidebar-header i,
html.sidebar-collapsed .pro-merchant .pa-sidebar-header i {
  margin: 0;
  flex-shrink: 0;
}

/* Tooltip for collapsed sidebar - DISABLED */
/* Tooltips removed - no hover behavior */

/* Support for html tag class during initial load (FOUC prevention) */
html.sidebar-collapsed body .pro-admin .pa-sidebar,
html.sidebar-collapsed body .pro-merchant .pa-sidebar {
  width: var(--pa-sidebar-collapsed-width);
}

/* Hover-to-expand when collapsed */
html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded {
  width: var(--pa-sidebar-width);
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-sidebar-header,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-sidebar-header {
  font-size: 1.1rem;
  justify-content: flex-start;
  padding: 1.2rem 1rem;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-sidebar-header > *:not(i):not(img):not(.pa-sidebar-pin),
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-sidebar-header > *:not(i):not(img):not(.pa-sidebar-pin) {
  opacity: 1;
  visibility: visible;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-sidebar-nav,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-sidebar-nav {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-section-title,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-section-title {
  display: block !important;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item {
  justify-content: flex-start !important;
  padding: 0.35rem 0.6rem !important;
  min-height: auto !important;
  max-height: none !important;
  font-size: 0.7rem !important;
  color: var(--pa-muted) !important;
  gap: 0.35rem !important;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item i,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item i {
  width: 16px;
  height: 16px;
  font-size: 0.7rem !important;
  background: transparent !important;
  color: inherit !important;
  margin-right: 0.35rem !important;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item::before,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item::before {
  display: none;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item:hover,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08) !important;
  color: var(--pa-text) !important;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item.active,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.08) !important;
  color: var(--pa-primary) !important;
  font-weight: 600;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.temp-expanded .pa-menu-item.active i,
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item.active i {
  color: var(--pa-primary) !important;
}

/* ====================================
   HOVER-TO-EXPAND (DISABLED)
   ==================================== */

/* Hover-to-expand behavior has been removed - sidebar only toggles via hamburger click */

/* ====================================
   COLLAPSED SIDEBAR - MENU TOOLTIPS
   Show tooltip on hover when sidebar is collapsed
   JavaScript solution - see script below
   ==================================== */

/* Tooltip element styling (created by JavaScript) */
.pa-sidebar-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #0075B2 0%, #005A8B 100%);
  color: #ffffff;
  padding: 16px 28px;
  border-radius: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) scale(0.95);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99999;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 117, 178, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icon inside tooltip */
.pa-sidebar-tooltip i {
  font-size: 22px;
  opacity: 0.9;
}

/* Tooltip visible state - slide in + fade + scale up */
.pa-sidebar-tooltip.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Tooltip hover state - scale up even more for emphasis */
.pa-sidebar-tooltip.visible:hover {
  transform: translateX(0) scale(1.05);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.15),
    0 12px 24px rgba(0, 117, 178, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* Tooltip arrow pointing to menu item */
.pa-sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right-color: #0075B2;
  filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
}

/* Subtle shine effect on hover */
.pa-sidebar-tooltip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
}

/* ====================================
   DARK MENU - COLLAPSED STATE
   ==================================== */

html.sidebar-collapsed .pro-admin .pa-sidebar.dark-menu .pa-menu-item i,
html.sidebar-collapsed .pro-merchant .pa-sidebar.dark-menu .pa-menu-item i {
  color: #bdc3c7;
}

html.sidebar-collapsed .pro-admin .pa-sidebar.dark-menu .pa-menu-item:hover i,
html.sidebar-collapsed .pro-merchant .pa-sidebar.dark-menu .pa-menu-item:hover i,
html.sidebar-collapsed .pro-admin .pa-sidebar.dark-menu .pa-menu-item.active i,
html.sidebar-collapsed .pro-merchant .pa-sidebar.dark-menu .pa-menu-item.active i {
  color: white;
}

/* ====================================
   LYK-STYLE LEFT MENU (BUYUSAFIRST COLORS)
   Merchant dashboard only
   ==================================== */

.pro-merchant .pa-sidebar {
  background: #fafafa;
}

.pro-merchant .pa-sidebar-nav {
  padding: 0.75rem 0 !important;
  overflow: visible;
}

.pro-merchant .pa-menu {
  gap: 0.15rem !important;
}

.pro-merchant .pa-menu-item {
  padding: 0.625rem 1.25rem !important;
  margin: 0 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  color: #495057 !important;
  transition: background 200ms ease, color 200ms ease;
}

.pro-merchant .pa-menu-item i {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  margin-right: 0.75rem !important;
  font-size: 1rem !important;
  color: var(--pa-primary-dark) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pro-merchant .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08) !important;
  color: var(--pa-primary) !important;
}

.pro-merchant .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.12) !important;
  color: var(--pa-primary) !important;
  font-weight: 600 !important;
}

.pro-merchant .pa-menu-item.active i {
  color: var(--pa-primary) !important;
}

.pro-merchant .pa-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pa-primary);
  border-radius: 0 3px 3px 0;
}

/* Collapsed (icon-only) state */
html.sidebar-collapsed .pro-merchant .pa-menu-section-title {
  display: none !important;
}

html.sidebar-collapsed .pro-merchant .pa-sidebar-nav {
  padding: 0.75rem 0.25rem !important;
}

html.sidebar-collapsed .pro-merchant .pa-menu-item {
  justify-content: center !important;
  padding: 0.625rem 0.5rem !important;
  margin: 0 0.5rem !important;
  font-size: 0 !important;
  color: transparent !important;
}

html.sidebar-collapsed .pro-merchant .pa-menu-item i {
  margin-right: 0 !important;
  font-size: 1.25rem !important;
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  color: var(--pa-primary-dark) !important;
  background: transparent !important;
}

html.sidebar-collapsed .pro-merchant .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.15) !important;
}

html.sidebar-collapsed .pro-merchant .pa-menu-item.active::before {
  border-radius: 3px;
}

/* Hover-expanded state (temp-expanded) */
html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item {
  justify-content: flex-start !important;
  padding: 0.625rem 1.25rem !important;
  margin: 0 0.625rem !important;
  font-size: 0.875rem !important;
  color: #495057 !important;
}

html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item i {
  margin-right: 0.75rem !important;
  font-size: 1rem !important;
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  color: var(--pa-primary-dark) !important;
}

html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08) !important;
  color: var(--pa-primary) !important;
}

html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.12) !important;
  color: var(--pa-primary) !important;
}

html.sidebar-collapsed .pro-merchant .pa-sidebar.temp-expanded .pa-menu-item.active i {
  color: var(--pa-primary) !important;
}

/* ====================================
   PIN BUTTON (REMOVED)
   ==================================== */

/* Pin button functionality has been removed - sidebar only toggles via hamburger */

/* Sidebar title */
.pro-admin .pa-sidebar-title,
.pro-merchant .pa-sidebar-title {
  flex: 1;
}

/* ====================================
   UI KIT DEMO SPECIFIC STYLES
   Added for ui-kit.html demonstration page
   These styles handle the top header layout,
   demo content presentation, and all UI kit components
   ==================================== */

/* ====================================
   TOP HEADER (Full-width header above sidebar)
   ==================================== */

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--pa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-logo {
  height: 40px;
  width: auto;
}

.header-brand {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pa-primary);
}

.user-type {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--pa-muted);
  margin-left: 0.35rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-icon-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--pa-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 200ms ease;
}

.header-icon-btn:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--pa-danger);
  border-radius: 50%;
}

/* ====================================
   USER MENU (In sidebar footer)
   ==================================== */

.sidebar-user-menu {
  position: relative;
  border-top: 1px solid var(--pa-border);
}

.sidebar-user-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 200ms ease;
  color: var(--pa-text);
  font-family: inherit;
}

.sidebar-user-toggle:hover {
  background: rgba(0, 117, 178, 0.08);
}

.user-avatar-small {
  width: 36px;
  height: 36px;
  background: var(--pa-primary);
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.7rem;
  color: var(--pa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-toggle i.fa-chevron-up {
  font-size: 0.75rem;
  color: var(--pa-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.sidebar-user-menu.active .sidebar-user-toggle i.fa-chevron-up {
  transform: rotate(180deg);
}

.sidebar-user-dropdown {
  display: none;
  background: var(--pa-card);
  border-top: 1px solid var(--pa-border);
  padding: 0.5rem 0;
}

.sidebar-user-menu.active .sidebar-user-dropdown {
  display: block;
}

.sidebar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--pa-text);
  text-decoration: none;
  transition: background 150ms ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}

.sidebar-user-dropdown-item:hover {
  background: rgba(0, 117, 178, 0.08);
}

.sidebar-user-dropdown-item i {
  width: 16px;
  color: var(--pa-muted);
  flex-shrink: 0;
}

.sidebar-user-dropdown-item span {
  flex: 1;
}

.sidebar-user-dropdown-divider {
  height: 1px;
  background: var(--pa-border);
  margin: 0.5rem 0;
}

/* Collapsed sidebar - hide user info text */
html.sidebar-collapsed .user-info,
html.sidebar-collapsed .sidebar-user-toggle i.fa-chevron-up {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

html.sidebar-collapsed .sidebar-user-toggle {
  justify-content: center;
  padding: 0.75rem 0;
}

html.sidebar-collapsed .user-avatar-small {
  margin: 0;
}

/* Collapsed sidebar - dropdown appears to the right */
html.sidebar-collapsed .sidebar-user-dropdown {
  position: absolute;
  bottom: 100%;
  left: 100%;
  margin-left: 0.5rem;
  margin-bottom: 0;
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1001;
}

html.sidebar-collapsed .sidebar-user-dropdown::before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 1rem;
  border: 8px solid transparent;
  border-right-color: var(--pa-border);
}

/* Dark menu support */
.pro-admin .pa-sidebar.dark-menu .sidebar-user-toggle,
.pro-merchant .pa-sidebar.dark-menu .sidebar-user-toggle {
  color: #ecf0f1;
}

.pro-admin .pa-sidebar.dark-menu .sidebar-user-dropdown,
.pro-merchant .pa-sidebar.dark-menu .sidebar-user-dropdown {
  background: #1a2634;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.pro-admin .pa-sidebar.dark-menu .sidebar-user-dropdown-item,
.pro-merchant .pa-sidebar.dark-menu .sidebar-user-dropdown-item {
  color: #bdc3c7;
}

.pro-admin .pa-sidebar.dark-menu .sidebar-user-dropdown-item:hover,
.pro-merchant .pa-sidebar.dark-menu .sidebar-user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ecf0f1;
}

/* ====================================
   LAYOUT ADJUSTMENTS (For top header + sidebar layout)
   ==================================== */

/* Adjust layout for fixed header */
.pa-layout {
  padding-top: 64px;
}

.pa-sidebar {
  top: 64px;
  height: calc(100vh - 64px);
}

/* Toggle Menu Button in Top Header */
.toggle-menu {
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--pa-text);
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 200ms ease;
  margin-right: 0.5rem;
}

.toggle-menu:hover {
  background: rgba(0, 117, 178, 0.1);
  color: var(--pa-primary);
}

/* When sidebar is pinned, dim and disable the toggle button */
html.sidebar-pinned .toggle-menu {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

html.sidebar-pinned .toggle-menu:hover {
  background: none;
  color: var(--pa-text);
}

/* ====================================
   DEMO CONTENT CONTAINER
   ==================================== */

.demo-content {
  padding: 1.5rem;
  max-width: none !important;
  width: 100%;
  margin-top: 0;
}

.pa-main {
  max-width: none !important;
}

.pa-layout {
  max-width: none !important;
  width: 100%;
}

body, html {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
}

body.pro-admin {
  display: flex;
  flex-direction: column;
}

.page-header {
  width: 100%;
}

/* ====================================
   DEMO SECTIONS & STYLING
   ==================================== */

.demo-section {
  margin-bottom: 3rem;
  scroll-margin-top: 80px; /* Account for fixed header when using anchor links */
}

.demo-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pa-text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--pa-primary);
}

.demo-note {
  font-size: 0.9rem;
  color: var(--pa-muted);
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 117, 178, 0.05);
  border-left: 3px solid var(--pa-primary);
  border-radius: 4px;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ====================================
   BREADCRUMBS
   ==================================== */

.pa-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.pa-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pa-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.pa-breadcrumb-item:hover {
  color: var(--pa-primary);
}

.pa-breadcrumb-item.active {
  color: var(--pa-text);
  font-weight: 600;
}

.pa-breadcrumb-separator {
  color: var(--pa-muted);
  font-size: 0.75rem;
}


/* ====================================
   STAT CARDS (Dashboard metrics display)
   ==================================== */

.pa-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pa-stat-card {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  padding: 1.25rem;
  transition: box-shadow 200ms ease;
}

.pa-stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pa-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.pa-stat-label {
  font-size: 0.8rem;
  color: var(--pa-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pa-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.pa-stat-icon.primary {
  background: rgba(0, 117, 178, 0.1);
  color: var(--pa-primary);
}

.pa-stat-icon.success {
  background: rgba(46, 204, 113, 0.1);
  color: var(--pa-success);
}

.pa-stat-icon.warning {
  background: rgba(241, 196, 15, 0.1);
  color: var(--pa-warning);
}

.pa-stat-icon.danger {
  background: rgba(226, 31, 38, 0.1);
  color: var(--pa-danger);
}

.pa-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pa-text);
  margin-bottom: 0.25rem;
}

.pa-stat-change {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pa-stat-change.positive {
  color: var(--pa-success);
}

.pa-stat-change.negative {
  color: var(--pa-danger);
}

/* ====================================
   SEARCH BAR (Global and inline search)
   ==================================== */

.pa-search-bar {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.pa-search-bar input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  background: var(--pa-card);
  color: var(--pa-text);
  font-size: 0.9rem;
  transition: all 200ms ease;
}

.pa-search-bar input:focus {
  outline: none;
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 3px rgba(0, 117, 178, 0.1);
}

.pa-search-bar .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pa-muted);
  pointer-events: none;
}

.pa-search-bar .clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--pa-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: none;
}

.pa-search-bar.has-value .clear-btn {
  display: block;
}

/* ====================================
   PROGRESS BARS (Visual progress indicators)
   ==================================== */

.pa-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.pa-progress-bar {
  height: 100%;
  background: var(--pa-primary);
  transition: width 300ms ease;
}

.pa-progress-bar.success {
  background: var(--pa-success);
}

.pa-progress-bar.warning {
  background: var(--pa-warning);
}

.pa-progress-bar.danger {
  background: var(--pa-danger);
}

/* ====================================
   LOADING STATES (Spinners and skeleton screens)
   ==================================== */

.pa-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 117, 178, 0.2);
  border-top-color: var(--pa-primary);
  border-radius: 50%;
  animation: pa-spin 0.8s linear infinite;
}

.pa-loading.lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

@keyframes pa-spin {
  to { transform: rotate(360deg); }
}

.pa-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: pa-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes pa-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ====================================
   TOGGLE SWITCHES (iOS-style toggles)
   ==================================== */

.pa-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.pa-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pa-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 300ms;
  border-radius: 24px;
}

.pa-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 300ms;
  border-radius: 50%;
}

.pa-toggle input:checked + .pa-toggle-slider {
  background-color: var(--pa-primary);
}

.pa-toggle input:checked + .pa-toggle-slider:before {
  transform: translateX(20px);
}

.pa-toggle input:disabled + .pa-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ====================================
   FILTER COMPONENTS (Advanced filtering UI)
   ==================================== */

.pa-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pa-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(0, 117, 178, 0.1);
  color: var(--pa-primary);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.pa-filter-chip-remove {
  border: none;
  background: none;
  color: var(--pa-primary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.pa-filter-chip-remove:hover {
  color: var(--pa-danger);
}

.pa-filter-panel {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  padding: 1.25rem;
}

.pa-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pa-border);
}

.pa-filter-panel-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--pa-text);
}

.pa-filter-section {
  margin-bottom: 1.25rem;
}

.pa-filter-section:last-child {
  margin-bottom: 0;
}

.pa-filter-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pa-muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.pa-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.pa-filter-checkbox input {
  cursor: pointer;
}

.pa-filter-checkbox label {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--pa-text);
}

.pa-filter-checkbox .count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--pa-muted);
}

.pa-filter-date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pa-filter-date-range .pa-input {
  min-width: 0;
  max-width: 100%;
}

.pa-filter-number-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.pa-filter-number-range .pa-input {
  min-width: 0;
  max-width: 100%;
}

.pa-filter-number-range .separator {
  color: var(--pa-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}


/* ====================================
   TIMELINE (Activity feed / event timeline)
   ==================================== */

.pa-timeline {
  position: relative;
  padding-left: 2rem;
}

.pa-timeline:before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pa-border);
}

.pa-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.pa-timeline-item:last-child {
  padding-bottom: 0;
}

.pa-timeline-dot {
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pa-card);
  border: 2px solid var(--pa-primary);
}

.pa-timeline-dot.success {
  border-color: var(--pa-success);
}

.pa-timeline-dot.warning {
  border-color: var(--pa-warning);
}

.pa-timeline-dot.danger {
  border-color: var(--pa-danger);
}

.pa-timeline-content {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  padding: 1rem;
}

.pa-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.5rem;
}

.pa-timeline-title {
  font-weight: 600;
  color: var(--pa-text);
}

.pa-timeline-time {
  font-size: 0.75rem;
  color: var(--pa-muted);
}

.pa-timeline-body {
  font-size: 0.85rem;
  color: var(--pa-muted);
  line-height: 1.5;
}

/* ====================================
   ACCORDION (Expandable/collapsible sections)
   ==================================== */

.pa-accordion-item {
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.pa-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--pa-card);
  cursor: pointer;
  transition: background 150ms ease;
  font-weight: 600;
  color: var(--pa-text);
}

.pa-accordion-header:hover {
  background: rgba(0, 117, 178, 0.05);
}

.pa-accordion-icon {
  transition: transform 200ms ease;
}

.pa-accordion-item.active .pa-accordion-icon {
  transform: rotate(180deg);
}

.pa-accordion-body {
  display: none;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--pa-border);
  background: var(--pa-card);
}

.pa-accordion-item.active .pa-accordion-body {
  display: block;
}

/* ====================================
   AVATAR GROUPS (Team member displays)
   ==================================== */

.pa-avatar-group {
  display: flex;
  align-items: center;
}

.pa-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pa-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  border: 2px solid var(--pa-card);
  margin-left: -8px;
}

.pa-avatar:first-child {
  margin-left: 0;
}

.pa-avatar.sm {
  width: 24px;
  height: 24px;
  font-size: 0.65rem;
}

.pa-avatar.lg {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.pa-avatar-more {
  background: rgba(0, 0, 0, 0.1);
  color: var(--pa-text);
}

/* ====================================
   LIST GROUP (Structured item lists)
   ==================================== */

.pa-list-group {
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  overflow: hidden;
}

.pa-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--pa-card);
  border-bottom: 1px solid var(--pa-border);
  transition: background 150ms ease;
  cursor: pointer;
}

.pa-list-item:last-child {
  border-bottom: none;
}

.pa-list-item:hover {
  background: rgba(0, 117, 178, 0.05);
}

.pa-list-item.active {
  background: rgba(0, 117, 178, 0.1);
  border-left: 3px solid var(--pa-primary);
}

/* ====================================
   SPLIT BUTTON (Primary action + dropdown)
   ==================================== */

.pa-split-btn {
  display: inline-flex;
  position: relative;
}

.pa-split-btn .pa-btn {
  border-radius: 0;
}

.pa-split-btn .pa-btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pa-split-btn .pa-btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ====================================
   PAGE TITLE BAR (Content area header with actions)
   ==================================== */

/* Top Header Layout Override for UI Kit demo */
.top-header {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pa-border);
  z-index: 100;
  flex-shrink: 0;
}

.pa-layout {
  flex-direction: column !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pa-layout-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.pa-sidebar {
  position: static !important;
  height: 100% !important;
  flex-shrink: 0;
  overflow-y: auto;
}

.pa-main {
  margin-left: 0 !important;
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

html.sidebar-collapsed .pa-main {
  margin-left: 0 !important;
}

html.sidebar-collapsed .pa-sidebar {
  width: var(--pa-sidebar-collapsed-width) !important;
}

.page-title-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pa-border);
  gap: 1rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pa-text);
  margin: 0;
}

.page-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.page-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pa-border);
  background: var(--pa-card);
  color: var(--pa-text);
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
}

.page-action-btn:hover {
  background: rgba(0, 117, 178, 0.08);
  border-color: var(--pa-primary);
  color: var(--pa-primary);
}

.page-action-btn i {
  font-size: 0.9rem;
}

.page-action-btn.primary {
  background: var(--pa-primary);
  color: white;
  border-color: var(--pa-primary);
}

.page-action-btn.primary:hover {
  background: #005a8a;
  border-color: #005a8a;
}

.page-action-btn.danger {
  color: var(--pa-danger);
  border-color: var(--pa-danger);
}

.page-action-btn.danger:hover {
  background: rgba(226, 31, 38, 0.1);
  border-color: var(--pa-danger);
  color: var(--pa-danger);
}

/* Page Action Dropdown */
.page-action-dropdown {
  position: relative;
}

.page-action-dropdown.active .page-action-dropdown-menu {
  display: block;
}

.page-action-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  display: none;
  z-index: 150;
  padding: 0.25rem 0;
}

.page-action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--pa-text);
  text-decoration: none;
  transition: background 150ms ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.85rem;
}

.page-action-dropdown-item:hover {
  background: rgba(0, 117, 178, 0.08);
}

.page-action-dropdown-item i {
  width: 16px;
  color: var(--pa-muted);
  font-size: 0.9rem;
}

.page-action-dropdown-item.danger {
  color: var(--pa-danger);
}

.page-action-dropdown-item.danger:hover {
  background: rgba(226, 31, 38, 0.1);
}

.page-action-dropdown-item.danger i {
  color: var(--pa-danger);
}

@media (max-width: 768px) {
  .page-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .page-action-btn {
    flex: 0 1 auto;
  }
}

/* ====================================
   ALTERNATIVE PAGE ACTION PATTERNS
   ==================================== */

/* Pattern 1: Icon-Only Compact */
.page-actions-compact {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.page-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
  border-radius: 4px;
  color: var(--pa-muted);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
}

.page-action-icon:hover {
  background: var(--pa-bg);
  color: var(--pa-text);
  border-color: var(--pa-primary);
}

.page-action-icon.primary {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: #FFFFFF;
}

.page-action-icon.primary:hover {
  background: #005a8f;
  border-color: #005a8f;
}

.action-divider {
  width: 1px;
  height: 24px;
  background: var(--pa-border);
  margin: 0 0.25rem;
}

/* Pattern 2: Primary + Secondary Split */
.page-actions-split {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-action-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
  border-radius: 4px;
  color: var(--pa-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.page-action-btn-large:hover {
  background: var(--pa-bg);
  border-color: var(--pa-primary);
}

.page-action-btn-large.primary {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: #FFFFFF;
}

.page-action-btn-large.primary:hover {
  background: #005a8f;
  border-color: #005a8f;
}

.page-action-btn-large.secondary {
  background: #FFFFFF;
  border-color: var(--pa-border);
  color: var(--pa-text);
}

.page-action-btn-large.secondary:hover {
  background: var(--pa-bg);
}

.page-action-btn-large i {
  font-size: 0.875rem;
}

/* Pattern 3: Segmented Control */
.btn-group-segmented {
  display: inline-flex;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  overflow: hidden;
}

.btn-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-right: 1px solid var(--pa-border);
  background: #FFFFFF;
  color: var(--pa-muted);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
}

.btn-segment:last-child {
  border-right: none;
}

.btn-segment:hover {
  background: var(--pa-bg);
  color: var(--pa-text);
}

.btn-segment.active {
  background: var(--pa-primary);
  color: #FFFFFF;
}

/* Pattern 5: Split Button */
.split-button-group {
  display: inline-flex;
  position: relative;
}

.split-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
  border-radius: 4px 0 0 4px;
  color: var(--pa-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.split-btn-main.primary {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: #FFFFFF;
}

.split-btn-main:hover {
  background: #005a8f;
  border-color: #005a8f;
}

.split-btn-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  border: 1px solid var(--pa-border);
  border-left: none;
  background: #FFFFFF;
  border-radius: 0 4px 4px 0;
  color: var(--pa-text);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.75rem;
}

.split-btn-trigger.primary {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: #FFFFFF;
}

.split-btn-trigger:hover {
  background: #005a8f;
  border-color: #005a8f;
}

.split-btn-dropdown {
  position: relative;
}

/* ====================================
   OVERFLOW MENU VARIATIONS
   Different styles for the "More Actions" button
   ==================================== */

/* Variation 1 & 2: Icon Only (Vertical or Horizontal Dots) */
.overflow-icon-only {
  min-width: auto;
  padding: 0.5rem 0.75rem;
}

/* Variation 3: Icon Only with Dropdown Indicator */
.overflow-icon-chevron {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.chevron-indicator {
  font-size: 0.625rem;
  margin-left: 0.125rem;
  opacity: 0.7;
}

/* Variation 4: Icon with Text */
.overflow-icon-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Variation 5: Icon + Text + Dropdown Indicator */
.overflow-full {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Variation 6: Text Only */
.overflow-text-only {
  padding: 0.5rem 1rem;
}

/* Variation 7: Text Only with Dropdown Indicator */
.overflow-text-chevron {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Variation 10: Circular Icon Button */
.overflow-circular {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
  border-radius: 50%;
  color: var(--pa-muted);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
}

.overflow-circular:hover {
  background: var(--pa-bg);
  color: var(--pa-text);
  border-color: var(--pa-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover states for all overflow buttons */
.overflow-icon-only:hover,
.overflow-icon-chevron:hover,
.overflow-icon-text:hover,
.overflow-full:hover,
.overflow-text-only:hover,
.overflow-text-chevron:hover {
  background: var(--pa-bg);
  border-color: var(--pa-primary);
}

/* ====================================
   TABLE ENHANCEMENTS
   ==================================== */

.pa-table th,
.pa-table td {
  font-variant-numeric: tabular-nums;
}

.align-left {
  text-align: left !important;
}

.align-center {
  text-align: center !important;
}

.align-right {
  text-align: right !important;
}

/* ====================================
   INLINE EDITING (Table row editing)
   ==================================== */

.pa-inline-input {
  display: none;
  width: 100%;
  font-size: 0.8rem;
}

.pa-inline-display {
  display: inline-block;
}

tr.is-editing .pa-inline-display {
  display: none;
}

tr.is-editing .pa-inline-input {
  display: block;
}

.pa-inline-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pa-inline-cancel {
  display: none;
}

tr.is-editing .pa-inline-cancel {
  display: inline-flex;
}

/* ====================================
   CHECKLIST (Task/feature checklists)
   ==================================== */

.pa-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ====================================
   THEME TOGGLE (Sidebar theme switcher)
   ==================================== */

.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--pa-border);
  color: var(--pa-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 200ms ease;
}

.sidebar-theme-toggle:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
}

/* ====================================
   COLLAPSED SIDEBAR - FOOTER STYLING
   User menu and theme toggle for icon-only mode
   ==================================== */

/* Center user avatar when collapsed */
html.sidebar-collapsed .sidebar-user-toggle {
  justify-content: center;
  padding: 0.5rem 0;
}

html.sidebar-collapsed .user-avatar-small {
  margin: 0;
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 200ms ease;
}

/* Center theme toggle icon when collapsed */
html.sidebar-collapsed .sidebar-theme-toggle {
  justify-content: center;
  padding: 0.5rem 0;
}

html.sidebar-collapsed .sidebar-theme-toggle i {
  margin: 0;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 200ms ease;
}

/* Add visual feedback for collapsed footer buttons */
html.sidebar-collapsed .sidebar-user-toggle:hover,
html.sidebar-collapsed .sidebar-theme-toggle:hover {
  background: transparent;
}

html.sidebar-collapsed .user-avatar-small:hover {
  background: rgba(0, 117, 178, 0.1);
  transform: scale(1.08);
}

html.sidebar-collapsed .sidebar-theme-toggle:hover i {
  color: var(--pa-primary) !important;
  background: rgba(0, 117, 178, 0.1);
  transform: scale(1.08);
}

/* Hide dropdown when collapsed */
html.sidebar-collapsed .sidebar-user-dropdown {
  display: none !important;
}

/* ====================================
   ADDRESS FORM LAYOUTS
   ==================================== */

/* Address form grid container */
.address-form-grid {
  display: grid;
  gap: 1rem;
}

/* Full-width address rows (name, address lines, country) */
.address-row-full {
  grid-column: 1 / -1;
}

/* City, State, ZIP row - single line on full screens */
.address-row-city-state-zip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  grid-column: 1 / -1;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .address-row-city-state-zip {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   FORM LAYOUT PATTERNS
   ==================================== */

/* Centered form container (max 700px) */
.form-container-centered {
  max-width: 700px;
  margin: 0 auto;
}

/* Two-column form layout */
.form-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .form-two-column {
    grid-template-columns: 1fr;
  }
}

/* Form with sidebar layout */
.form-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .form-sidebar-layout {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   PERFORMANCE & MOBILE OPTIMIZATIONS
   ==================================== */

/* Focus styles for accessibility (keyboard navigation) */
.pro-admin .pa-btn:focus-visible,
.pro-merchant .pa-btn:focus-visible,
.pro-admin .pa-input:focus-visible,
.pro-merchant .pa-input:focus-visible,
.pro-admin .pa-select:focus-visible,
.pro-merchant .pa-select:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
.pro-admin .pa-btn:focus:not(:focus-visible),
.pro-merchant .pa-btn:focus:not(:focus-visible),
.pro-admin .pa-input:focus:not(:focus-visible),
.pro-merchant .pa-input:focus:not(:focus-visible) {
  outline: none;
}

/* Table responsive wrapper */
.pro-admin .pa-table-wrapper,
.pro-merchant .pa-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablet and mobile improvements */
@media (max-width: 1024px) {
  /* Better spacing on tablets */
  .demo-content {
    padding: 1.25rem;
  }

  /* Ensure cards stack nicely */
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile and small tablet specific */
@media (max-width: 768px) {
  /* Ensure tables don't break layout */
  .pro-admin .pa-table,
  .pro-merchant .pa-table {
    min-width: 600px;
  }

  /* Increase font sizes for better readability */
  .pro-admin .pa-badge,
  .pro-merchant .pa-badge {
    font-size: 0.8125rem; /* 13px minimum */
  }

  .pro-admin .pa-helper,
  .pro-merchant .pa-helper,
  .pro-admin .pa-error,
  .pro-merchant .pa-error {
    font-size: 0.8125rem; /* 13px minimum */
  }

  .pro-admin .pa-table td,
  .pro-merchant .pa-table td {
    font-size: 0.9375rem; /* 15px on mobile */
  }

  /* Improve form spacing on mobile */
  .pro-admin .pa-form-grid,
  .pro-merchant .pa-form-grid {
    gap: 1.25rem;
  }

  /* Hide user type badge in header on mobile */
  .header-brand .user-type {
    display: none;
  }

  /* Larger touch target for user menu on mobile */
  .sidebar-user-toggle {
    min-height: 52px;
  }
}

/* Large tablets in landscape */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Optimal sidebar width for tablets */
  .pro-admin,
  .pro-merchant {
    --pa-sidebar-width: 220px;
  }

  /* Two-column grids on tablets */
  .demo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Touch-friendly targets for touch devices */
@media (pointer: coarse) {
  /* Minimum 44x44px touch targets */
  .pro-admin .pa-btn-sm,
  .pro-merchant .pa-btn-sm {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
  }

  .pro-admin .pa-pagination-btn,
  .pro-merchant .pa-pagination-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }

  .pro-admin .pa-modal-close,
  .pro-merchant .pa-modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .pro-admin .pa-dropdown-toggle,
  .pro-merchant .pa-dropdown-toggle {
    min-height: 44px;
  }

  .pro-admin .pa-menu-item,
  .pro-merchant .pa-menu-item {
    min-height: 44px;
  }

  /* Larger tap targets for interactive elements */
  .pro-admin .pa-tab,
  .pro-merchant .pa-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ====================================
   PRICING COMPONENTS
   Display product prices, subscriptions, and pricing tables
   ==================================== */

/* Price display component */
.pro-admin .pa-price,
.pro-merchant .pa-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pro-admin .pa-price__current,
.pro-merchant .pa-price__current {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pa-text);
  line-height: 1;
}

.pro-admin .pa-price__original,
.pro-merchant .pa-price__original {
  font-size: 1.25rem;
  color: var(--pa-muted);
  text-decoration: line-through;
  font-weight: 400;
}

.pro-admin .pa-price__discount,
.pro-merchant .pa-price__discount {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--pa-success);
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pro-admin .pa-price__period,
.pro-merchant .pa-price__period {
  font-size: 1rem;
  color: var(--pa-muted);
  font-weight: 400;
}

.pro-admin .pa-price__tax-note,
.pro-merchant .pa-price__tax-note {
  font-size: 0.85rem;
  color: var(--pa-muted);
}

.pro-admin .pa-price__billed,
.pro-merchant .pa-price__billed {
  font-size: 0.85rem;
  color: var(--pa-muted);
  font-style: italic;
}

/* Price size variants */
.pro-admin .pa-price--large .pa-price__current,
.pro-merchant .pa-price--large .pa-price__current {
  font-size: 3rem;
}

.pro-admin .pa-price--small .pa-price__current,
.pro-merchant .pa-price--small .pa-price__current {
  font-size: 1.25rem;
}

/* Pricing Table */
.pro-admin .pa-pricing-table,
.pro-merchant .pa-pricing-table {
  margin: 2rem 0;
}

.pro-admin .pa-pricing-table__plans,
.pro-merchant .pa-pricing-table__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* Pricing Card */
.pro-admin .pa-pricing-card,
.pro-merchant .pa-pricing-card {
  background: var(--pa-card);
  border: 2px solid var(--pa-border);
  border-radius: 8px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: all 200ms ease;
  position: relative;
}

.pro-admin .pa-pricing-card:hover,
.pro-merchant .pa-pricing-card:hover {
  border-color: var(--pa-primary);
  box-shadow: 0 8px 24px rgba(0, 117, 178, 0.12);
  transform: translateY(-4px);
}

.pro-admin .pa-pricing-card--featured,
.pro-merchant .pa-pricing-card--featured {
  border-color: var(--pa-primary);
  border-width: 3px;
  box-shadow: 0 8px 24px rgba(0, 117, 178, 0.15);
}

.pro-admin .pa-pricing-card--disabled,
.pro-merchant .pa-pricing-card--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.pro-admin .pa-pricing-card__header,
.pro-merchant .pa-pricing-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.pro-admin .pa-pricing-card__name,
.pro-merchant .pa-pricing-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pa-text);
}

.pro-admin .pa-pricing-card__badge,
.pro-merchant .pa-pricing-card__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--pa-primary);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pro-admin .pa-pricing-card__price,
.pro-merchant .pa-pricing-card__price {
  margin-bottom: 1rem;
}

.pro-admin .pa-pricing-card__currency,
.pro-merchant .pa-pricing-card__currency {
  font-size: 2rem;
  font-weight: 700;
  vertical-align: top;
}

.pro-admin .pa-pricing-card__amount,
.pro-merchant .pa-pricing-card__amount {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.pro-admin .pa-pricing-card__period,
.pro-merchant .pa-pricing-card__period {
  font-size: 1rem;
  color: var(--pa-muted);
}

.pro-admin .pa-pricing-card__description,
.pro-merchant .pa-pricing-card__description {
  color: var(--pa-muted);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.pro-admin .pa-pricing-card__features,
.pro-merchant .pa-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  flex: 1;
}

.pro-admin .pa-pricing-card__feature,
.pro-merchant .pa-pricing-card__feature {
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-pricing-card__feature:last-child,
.pro-merchant .pa-pricing-card__feature:last-child {
  border-bottom: none;
}

.pro-admin .pa-pricing-card__feature--included i,
.pro-merchant .pa-pricing-card__feature--included i {
  color: var(--pa-success);
}

.pro-admin .pa-pricing-card__feature--excluded,
.pro-merchant .pa-pricing-card__feature--excluded {
  color: var(--pa-muted);
}

.pro-admin .pa-pricing-card__feature--excluded i,
.pro-merchant .pa-pricing-card__feature--excluded i {
  color: var(--pa-danger);
}

.pro-admin .pa-pricing-card__action,
.pro-merchant .pa-pricing-card__action {
  margin-top: auto;
}

/* ====================================
   PAYMENT COMPONENTS
   Payment methods, card forms, billing address
   ==================================== */

/* Payment Method Selector */
.pro-admin .pa-payment-methods,
.pro-merchant .pa-payment-methods {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.pro-admin .pa-payment-method,
.pro-merchant .pa-payment-method {
  position: relative;
  display: block;
  cursor: pointer;
}

.pro-admin .pa-payment-method__input,
.pro-merchant .pa-payment-method__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pro-admin .pa-payment-method__content,
.pro-merchant .pa-payment-method__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--pa-card);
  border: 2px solid var(--pa-border);
  border-radius: 8px;
  transition: all 200ms ease;
}

.pro-admin .pa-payment-method:hover .pa-payment-method__content,
.pro-merchant .pa-payment-method:hover .pa-payment-method__content {
  border-color: var(--pa-primary);
  box-shadow: 0 4px 12px rgba(0, 117, 178, 0.1);
}

.pro-admin .pa-payment-method--selected .pa-payment-method__content,
.pro-merchant .pa-payment-method--selected .pa-payment-method__content {
  border-color: var(--pa-primary);
  background: rgba(0, 117, 178, 0.03);
}

.pro-admin .pa-payment-method--disabled,
.pro-merchant .pa-payment-method--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pro-admin .pa-payment-method__icon,
.pro-merchant .pa-payment-method__icon {
  font-size: 1.5rem;
  color: var(--pa-primary);
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.pro-admin .pa-payment-method__label,
.pro-merchant .pa-payment-method__label {
  flex: 1;
  font-weight: 600;
  font-size: 1rem;
}

.pro-admin .pa-payment-method__brands,
.pro-merchant .pa-payment-method__brands {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pro-admin .pa-payment-method__brand,
.pro-merchant .pa-payment-method__brand {
  height: 24px;
  width: auto;
}

.pro-admin .pa-payment-method__check,
.pro-merchant .pa-payment-method__check {
  font-size: 1.25rem;
  color: var(--pa-primary);
  opacity: 0;
  transition: opacity 200ms ease;
}

.pro-admin .pa-payment-method--selected .pa-payment-method__check,
.pro-merchant .pa-payment-method--selected .pa-payment-method__check {
  opacity: 1;
}

/* Credit Card Form */
.pro-admin .pa-card-form,
.pro-merchant .pa-card-form {
  margin: 1.5rem 0;
}

.pro-admin .pa-card-form__preview,
.pro-merchant .pa-card-form__preview {
  margin-bottom: 1.5rem;
}

.pro-admin .pa-card-form__fields,
.pro-merchant .pa-card-form__fields {
  display: grid;
  gap: 1rem;
}

.pro-admin .pa-card-form__row,
.pro-merchant .pa-card-form__row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

/* Credit Card Preview */
.pro-admin .pa-credit-card-preview,
.pro-merchant .pa-credit-card-preview {
  background: linear-gradient(135deg, var(--pa-primary) 0%, var(--pa-primary-dark) 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.pro-admin .pa-credit-card-preview::before,
.pro-merchant .pa-credit-card-preview::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pro-admin .pa-credit-card-preview__brand,
.pro-merchant .pa-credit-card-preview__brand {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.pro-admin .pa-credit-card-preview__brand img,
.pro-merchant .pa-credit-card-preview__brand img {
  height: 100%;
  width: auto;
}

.pro-admin .pa-credit-card-preview__number,
.pro-merchant .pa-credit-card-preview__number {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  font-weight: 500;
  margin: 1rem 0;
  position: relative;
  z-index: 1;
}

.pro-admin .pa-credit-card-preview__details,
.pro-merchant .pa-credit-card-preview__details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.pro-admin .pa-credit-card-preview__name,
.pro-merchant .pa-credit-card-preview__name {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.pro-admin .pa-credit-card-preview__expiry,
.pro-merchant .pa-credit-card-preview__expiry {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Input with icon */
.pro-admin .pa-input-icon,
.pro-merchant .pa-input-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.pro-admin .pa-input-icon__icon,
.pro-merchant .pa-input-icon__icon {
  position: absolute;
  right: 1rem;
  color: var(--pa-muted);
  pointer-events: none;
}

.pro-admin .pa-input-icon--right .pa-input,
.pro-merchant .pa-input-icon--right .pa-input {
  padding-right: 3rem;
}

/* Tooltip trigger button */
.pro-admin .pa-tooltip-trigger,
.pro-merchant .pa-tooltip-trigger {
  border: none;
  background: none;
  color: var(--pa-primary);
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 0.85rem;
  transition: color 150ms ease;
}

.pro-admin .pa-tooltip-trigger:hover,
.pro-merchant .pa-tooltip-trigger:hover {
  color: var(--pa-primary-dark);
}

/* Address Form */
.pro-admin .pa-address-form,
.pro-merchant .pa-address-form {
  display: grid;
  gap: 1rem;
}

.pro-admin .pa-address-form__row,
.pro-merchant .pa-address-form__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.pro-admin .pa-form-label__optional,
.pro-merchant .pa-form-label__optional {
  color: var(--pa-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .pro-admin .pa-address-form__row,
  .pro-merchant .pa-address-form__row {
    grid-template-columns: 1fr;
  }

  .pro-admin .pa-card-form__row,
  .pro-merchant .pa-card-form__row {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   ORDER SUMMARY COMPONENTS
   Cart summaries, line items, totals
   ==================================== */

/* Order Summary Card */
.pro-admin .pa-order-summary,
.pro-merchant .pa-order-summary {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 8px;
  overflow: hidden;
}

.pro-admin .pa-order-summary__header,
.pro-merchant .pa-order-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-order-summary__title,
.pro-merchant .pa-order-summary__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.pro-admin .pa-order-summary__edit,
.pro-merchant .pa-order-summary__edit {
  color: var(--pa-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 150ms ease;
}

.pro-admin .pa-order-summary__edit:hover,
.pro-merchant .pa-order-summary__edit:hover {
  color: var(--pa-primary-dark);
}

.pro-admin .pa-order-summary__items,
.pro-merchant .pa-order-summary__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pro-admin .pa-order-item,
.pro-merchant .pa-order-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-order-item:last-child,
.pro-merchant .pa-order-item:last-child {
  border-bottom: none;
}

.pro-admin .pa-order-item__image,
.pro-merchant .pa-order-item__image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--pa-bg);
  flex-shrink: 0;
}

.pro-admin .pa-order-item__details,
.pro-merchant .pa-order-item__details {
  flex: 1;
  min-width: 0;
}

.pro-admin .pa-order-item__name,
.pro-merchant .pa-order-item__name {
  display: block;
  font-weight: 600;
  color: var(--pa-text);
  margin-bottom: 0.25rem;
}

.pro-admin .pa-order-item__variant,
.pro-merchant .pa-order-item__variant {
  display: block;
  font-size: 0.85rem;
  color: var(--pa-muted);
  margin-bottom: 0.25rem;
}

.pro-admin .pa-order-item__qty,
.pro-merchant .pa-order-item__qty {
  display: block;
  font-size: 0.85rem;
  color: var(--pa-muted);
}

.pro-admin .pa-order-item__price,
.pro-merchant .pa-order-item__price {
  font-weight: 700;
  color: var(--pa-text);
  flex-shrink: 0;
}

.pro-admin .pa-order-summary__totals,
.pro-merchant .pa-order-summary__totals {
  padding: 1.25rem;
  border-top: 2px solid var(--pa-border);
}

.pro-admin .pa-order-summary__line,
.pro-merchant .pa-order-summary__line {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.pro-admin .pa-order-summary__line--discount,
.pro-merchant .pa-order-summary__line--discount {
  color: var(--pa-success);
  font-weight: 600;
}

.pro-admin .pa-order-summary__line--total,
.pro-merchant .pa-order-summary__line--total {
  font-size: 1.25rem;
  font-weight: 700;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 2px solid var(--pa-border);
}

.pro-admin .pa-order-summary__promo,
.pro-merchant .pa-order-summary__promo {
  padding: 1.25rem;
  border-top: 1px solid var(--pa-border);
}

/* Input Group (for promo codes) */
.pro-admin .pa-input-group,
.pro-merchant .pa-input-group {
  display: flex;
  gap: 0.5rem;
}

.pro-admin .pa-input-group .pa-input,
.pro-merchant .pa-input-group .pa-input {
  flex: 1;
}

/* ====================================
   CHECKOUT FLOW COMPONENTS
   Progress steps, trust indicators
   ==================================== */

/* Checkout Steps */
.pro-admin .pa-checkout-steps,
.pro-merchant .pa-checkout-steps {
  margin: 2rem 0;
}

.pro-admin .pa-checkout-steps__list,
.pro-merchant .pa-checkout-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.pro-admin .pa-checkout-steps__list::before,
.pro-merchant .pa-checkout-steps__list::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pa-border);
  z-index: 0;
}

.pro-admin .pa-checkout-step,
.pro-merchant .pa-checkout-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.pro-admin .pa-checkout-step__indicator,
.pro-merchant .pa-checkout-step__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pa-card);
  border: 2px solid var(--pa-border);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pa-muted);
  margin-bottom: 0.5rem;
  transition: all 200ms ease;
}

.pro-admin .pa-checkout-step__label,
.pro-merchant .pa-checkout-step__label {
  display: block;
  font-size: 0.85rem;
  color: var(--pa-muted);
  font-weight: 500;
}

.pro-admin .pa-checkout-step--completed .pa-checkout-step__indicator,
.pro-merchant .pa-checkout-step--completed .pa-checkout-step__indicator {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: white;
}

.pro-admin .pa-checkout-step--completed .pa-checkout-step__label,
.pro-merchant .pa-checkout-step--completed .pa-checkout-step__label {
  color: var(--pa-primary);
}

.pro-admin .pa-checkout-step--current .pa-checkout-step__indicator,
.pro-merchant .pa-checkout-step--current .pa-checkout-step__indicator {
  background: var(--pa-primary);
  border-color: var(--pa-primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(0, 117, 178, 0.2);
}

.pro-admin .pa-checkout-step--current .pa-checkout-step__label,
.pro-merchant .pa-checkout-step--current .pa-checkout-step__label {
  color: var(--pa-text);
  font-weight: 700;
}

@media (max-width: 576px) {
  .pro-admin .pa-checkout-step__label,
  .pro-merchant .pa-checkout-step__label {
    font-size: 0.7rem;
  }
}

/* Trust Badges */
.pro-admin .pa-trust-badges,
.pro-merchant .pa-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem;
  flex-wrap: wrap;
}

.pro-admin .pa-trust-badge,
.pro-merchant .pa-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pa-muted);
  font-size: 0.85rem;
}

.pro-admin .pa-trust-badge i,
.pro-merchant .pa-trust-badge i {
  font-size: 1.25rem;
  color: var(--pa-success);
}

.pro-admin .pa-trust-badge img,
.pro-merchant .pa-trust-badge img {
  height: 32px;
  width: auto;
}

.pro-admin .pa-trust-badges--vertical,
.pro-merchant .pa-trust-badges--vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* ====================================
   CONFIRMATION COMPONENTS
   Success pages, invoices
   ==================================== */

/* Confirmation Page */
.pro-admin .pa-confirmation,
.pro-merchant .pa-confirmation {
  text-align: center;
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
}

.pro-admin .pa-confirmation__icon,
.pro-merchant .pa-confirmation__icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.pro-admin .pa-confirmation__icon--success,
.pro-merchant .pa-confirmation__icon--success {
  color: var(--pa-success);
}

.pro-admin .pa-confirmation__icon--pending,
.pro-merchant .pa-confirmation__icon--pending {
  color: var(--pa-warning);
}

.pro-admin .pa-confirmation__icon--error,
.pro-merchant .pa-confirmation__icon--error {
  color: var(--pa-danger);
}

.pro-admin .pa-confirmation__title,
.pro-merchant .pa-confirmation__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--pa-text);
}

.pro-admin .pa-confirmation__message,
.pro-merchant .pa-confirmation__message {
  font-size: 1.1rem;
  color: var(--pa-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.pro-admin .pa-confirmation__details,
.pro-merchant .pa-confirmation__details {
  background: var(--pa-bg);
  border: 1px solid var(--pa-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.pro-admin .pa-confirmation__detail,
.pro-merchant .pa-confirmation__detail {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-confirmation__detail:last-child,
.pro-merchant .pa-confirmation__detail:last-child {
  border-bottom: none;
}

.pro-admin .pa-confirmation__detail-label,
.pro-merchant .pa-confirmation__detail-label {
  color: var(--pa-muted);
  font-size: 0.9rem;
}

.pro-admin .pa-confirmation__detail-value,
.pro-merchant .pa-confirmation__detail-value {
  font-weight: 600;
  color: var(--pa-text);
}

.pro-admin .pa-confirmation__actions,
.pro-merchant .pa-confirmation__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Invoice */
.pro-admin .pa-invoice,
.pro-merchant .pa-invoice {
  max-width: 800px;
  margin: 2rem auto;
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 8px;
  padding: 3rem;
}

.pro-admin .pa-invoice__header,
.pro-merchant .pa-invoice__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--pa-border);
}

.pro-admin .pa-invoice__brand img,
.pro-merchant .pa-invoice__brand img {
  max-width: 150px;
  height: auto;
}

.pro-admin .pa-invoice__meta,
.pro-merchant .pa-invoice__meta {
  text-align: right;
}

.pro-admin .pa-invoice__title,
.pro-merchant .pa-invoice__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.pro-admin .pa-invoice__info,
.pro-merchant .pa-invoice__info {
  margin: 0;
  font-size: 0.9rem;
}

.pro-admin .pa-invoice__info dt,
.pro-merchant .pa-invoice__info dt {
  display: inline;
  color: var(--pa-muted);
  font-weight: 400;
}

.pro-admin .pa-invoice__info dt::after,
.pro-merchant .pa-invoice__info dt::after {
  content: ': ';
}

.pro-admin .pa-invoice__info dd,
.pro-merchant .pa-invoice__info dd {
  display: inline;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

.pro-admin .pa-invoice__parties,
.pro-merchant .pa-invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.pro-admin .pa-invoice__party h3,
.pro-merchant .pa-invoice__party h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--pa-muted);
  margin: 0 0 0.75rem 0;
  font-weight: 600;
}

.pro-admin .pa-invoice__party address,
.pro-merchant .pa-invoice__party address {
  font-style: normal;
  line-height: 1.6;
  color: var(--pa-text);
}

.pro-admin .pa-invoice__table,
.pro-merchant .pa-invoice__table {
  width: 100%;
  margin-bottom: 2rem;
  border-collapse: collapse;
}

.pro-admin .pa-invoice__table th,
.pro-merchant .pa-invoice__table th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--pa-border);
  font-weight: 600;
  color: var(--pa-text);
  font-size: 0.85rem;
  text-transform: uppercase;
}

.pro-admin .pa-invoice__table td,
.pro-merchant .pa-invoice__table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-invoice__table tbody tr:last-child td,
.pro-merchant .pa-invoice__table tbody tr:last-child td {
  border-bottom: 2px solid var(--pa-border);
}

.pro-admin .pa-invoice__table tfoot td,
.pro-merchant .pa-invoice__table tfoot td {
  font-weight: 600;
  border-bottom: none;
  padding-top: 1rem;
}

.pro-admin .pa-invoice__table th:last-child,
.pro-merchant .pa-invoice__table th:last-child,
.pro-admin .pa-invoice__table td:last-child,
.pro-merchant .pa-invoice__table td:last-child {
  text-align: right;
}

.pro-admin .pa-invoice__total-row td,
.pro-merchant .pa-invoice__total-row td {
  font-size: 1.25rem;
  font-weight: 700;
  padding-top: 1.5rem;
  border-top: 2px solid var(--pa-border);
}

.pro-admin .pa-invoice__footer,
.pro-merchant .pa-invoice__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--pa-border);
}

.pro-admin .pa-invoice__footer h4,
.pro-merchant .pa-invoice__footer h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--pa-muted);
  margin: 0 0 0.75rem 0;
}

.pro-admin .pa-invoice__footer p,
.pro-merchant .pa-invoice__footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pa-text);
  line-height: 1.6;
}

.pro-admin .pa-invoice__actions,
.pro-merchant .pa-invoice__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 768px) {
  .pro-admin .pa-invoice,
  .pro-merchant .pa-invoice {
    padding: 1.5rem;
  }

  .pro-admin .pa-invoice__header,
  .pro-merchant .pa-invoice__header {
    flex-direction: column;
    gap: 1.5rem;
  }

  .pro-admin .pa-invoice__meta,
  .pro-merchant .pa-invoice__meta {
    text-align: left;
  }

  .pro-admin .pa-invoice__parties,
  .pro-merchant .pa-invoice__parties {
    grid-template-columns: 1fr;
  }

  .pro-admin .pa-invoice__footer,
  .pro-merchant .pa-invoice__footer {
    grid-template-columns: 1fr;
  }
}

/* Print styles for invoice */
@media print {
  .pro-admin .pa-invoice__actions,
  .pro-merchant .pa-invoice__actions {
    display: none;
  }
}

/* ====================================
   SUPPLEMENTARY COMPONENTS
   Saved payments, security notices
   ==================================== */

/* Saved Payment Methods */
.pro-admin .pa-saved-payments,
.pro-merchant .pa-saved-payments {
  display: grid;
  gap: 1rem;
}

.pro-admin .pa-saved-payment,
.pro-merchant .pa-saved-payment {
  position: relative;
  display: block;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  text-align: left;
}

.pro-admin .pa-saved-payment__content,
.pro-merchant .pa-saved-payment__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--pa-card);
  border: 2px solid var(--pa-border);
  border-radius: 8px;
  transition: all 200ms ease;
}

.pro-admin .pa-saved-payment:hover .pa-saved-payment__content,
.pro-merchant .pa-saved-payment:hover .pa-saved-payment__content {
  border-color: var(--pa-primary);
  box-shadow: 0 4px 12px rgba(0, 117, 178, 0.1);
}

.pro-admin .pa-saved-payment--selected .pa-saved-payment__content,
.pro-merchant .pa-saved-payment--selected .pa-saved-payment__content {
  border-color: var(--pa-primary);
  background: rgba(0, 117, 178, 0.03);
}

.pro-admin .pa-saved-payment--add,
.pro-merchant .pa-saved-payment--add {
  cursor: pointer;
  color: var(--pa-primary);
  font-weight: 600;
  justify-content: center;
}

.pro-admin .pa-saved-payment--add .pa-saved-payment__content,
.pro-merchant .pa-saved-payment--add .pa-saved-payment__content {
  border-style: dashed;
  justify-content: center;
}

.pro-admin .pa-saved-payment__brand,
.pro-merchant .pa-saved-payment__brand {
  width: 48px;
  flex-shrink: 0;
}

.pro-admin .pa-saved-payment__brand img,
.pro-merchant .pa-saved-payment__brand img {
  width: 100%;
  height: auto;
}

.pro-admin .pa-saved-payment__details,
.pro-merchant .pa-saved-payment__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pro-admin .pa-saved-payment__number,
.pro-merchant .pa-saved-payment__number {
  font-weight: 600;
  color: var(--pa-text);
}

.pro-admin .pa-saved-payment__expiry,
.pro-merchant .pa-saved-payment__expiry {
  font-size: 0.85rem;
  color: var(--pa-muted);
}

.pro-admin .pa-saved-payment__default,
.pro-merchant .pa-saved-payment__default {
  padding: 0.25rem 0.5rem;
  background: var(--pa-primary);
  color: white;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pro-admin .pa-saved-payment__check,
.pro-merchant .pa-saved-payment__check {
  font-size: 1.25rem;
  color: var(--pa-primary);
  opacity: 0;
  transition: opacity 200ms ease;
}

.pro-admin .pa-saved-payment--selected .pa-saved-payment__check,
.pro-merchant .pa-saved-payment--selected .pa-saved-payment__check {
  opacity: 1;
}

/* Security Notice */
.pro-admin .pa-security-notice,
.pro-merchant .pa-security-notice {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(0, 117, 178, 0.05);
  border: 1px solid rgba(0, 117, 178, 0.2);
  border-radius: 8px;
  align-items: flex-start;
}

.pro-admin .pa-security-notice__icon,
.pro-merchant .pa-security-notice__icon {
  font-size: 1.5rem;
  color: var(--pa-primary);
  flex-shrink: 0;
}

.pro-admin .pa-security-notice__content,
.pro-merchant .pa-security-notice__content {
  flex: 1;
}

.pro-admin .pa-security-notice__content strong,
.pro-merchant .pa-security-notice__content strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--pa-text);
}

.pro-admin .pa-security-notice__content p,
.pro-merchant .pa-security-notice__content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pa-muted);
  line-height: 1.5;
}

/* ====================================
   END OF UI KIT DEMO STYLES
   ==================================== */