/* 
  DEVELOPER STYLING GUIDELINES & SOPS:
  - Never use inline HTML style attributes (style="..."). All styling must be written in the designated CSS files.
  - Always use custom CSS classes prefixed with the module namespace (e.g., pb-, whmp_pb-) to prevent styling conflicts.
  - Never use native/built-in theme classes directly. Style custom classes exclusively.
  - Primary Color and Secondary Color are configured by the administrator and injected as CSS variables.
  - This stylesheet uses --pb-primary-color and --pb-secondary-color variables. Feel free to define more variables as required.
  - For service actions, use proper Font Awesome icons instead of images, enabling dynamic coloring and sizing via CSS.
*/

.pb-wrapper * {
  box-sizing: border-box;
}

.pb-wrapper {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  margin-top: 20px;
  background-color: var(--pb-bg-color, #ffffff);
  padding: 10px;
  border-radius: var(--pb-radius, 8px);
}

.pb-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pb-primary-color, #1a4d80);
  margin: 0 0 15px 10px;
}

/* Service Actions Panel */
.pb-actions-wrapper {
  margin-bottom: 25px;
}

.pb-actions-boxes {
  display: flex;
  gap: 15px;
  margin-left: 10px;
  flex-wrap: wrap;
}

.pb-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: var(--pb-card-bg, #ffffff);
  border: 1px solid var(--pb-border-color, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  user-select: none;
  box-shadow: var(--pb-shadow, 0 2px 8px rgba(0, 0, 0, 0.05));
}

.pb-action-box:hover {
  transform: translateY(-2px);
  border-color: var(--pb-primary-color, #1a4d80);
}

.pb-action-box.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.pb-action-box img {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  object-fit: contain;
}

.pb-action-box span {
  font-size: 12px;
  font-weight: 600;
  color: var(--pb-text-color, #1a1d23);
}

/* Service Detail Table styling */
.pb-info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--pb-radius, 6px);
  overflow: hidden;
  border: 1px solid var(--pb-border-color, #e5e7eb);
}

.pb-info-table tr:nth-child(odd) td,
.pb-info-table tr:nth-child(odd) th {
  background-color: var(--pb-bg-color, #ffffff);
}

.pb-info-table tr:nth-child(even) td,
.pb-info-table tr:nth-child(even) th {
  background-color: var(--pb-alt-row-bg, #f9fafb);
}

.pb-info-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--pb-primary-color, #1a4d80);
  font-weight: 600;
  font-size: 13px;
  width: 40%;
  border-bottom: 1px solid var(--pb-border-color, #e5e7eb);
}

.pb-info-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  color: var(--pb-text-color, #1a1d23);
  border-bottom: 1px solid var(--pb-border-color, #e5e7eb);
  word-break: break-all;
}

.pb-info-table tr:last-child th,
.pb-info-table tr:last-child td {
  border-bottom: none;
}

/* Badges styling */
.pb-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.pb-badge-active {
  background-color: var(--pb-badge-active-bg, #e8f8ee);
  color: var(--pb-badge-active-text, #1e7e34);
}

.pb-badge-inactive {
  background-color: var(--pb-badge-inactive-bg, #fdf0ef);
  color: var(--pb-badge-inactive-text, #c0392b);
}

/* Interactive Utility Buttons */
.pb-copy-btn {
  background: none;
  border: 1px solid var(--pb-primary-color, #1a4d80);
  border-radius: 4px;
  color: var(--pb-primary-color, #1a4d80);
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 5px;
  transition:
    background 0.2s,
    color 0.2s;
  vertical-align: middle;
}

.pb-copy-btn:hover {
  background: var(--pb-primary-color, #1a4d80);
  color: var(--pb-bg-color, #ffffff);
}

.pb-url-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pb-url-text {
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

/* Float Popup messages styling */
.pb-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  z-index: 99999;
  opacity: 0;
  animation: stSlideInOutRight 3s ease-in-out forwards;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 13px;
}

.pb-popup.error-popup {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

@keyframes stSlideInOutRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* 
==========================================================================
   Responsive Design Breakpoints Guidelines & Overrides:
==========================================================================
   SOP Rule: The client area must be designed and styled to show correctly 
   on all viewport sizes (Mobile, Tablet, Laptop, and Big Desktop). 
   Use the media queries below to adjust widths, grids, layouts, and font 
   properties to ensure seamless responsiveness across devices.
*/

/* 1. Mobile Screens (Smartphones, max-width: 576px) */
@media (max-width: 576px) {
  .pb-wrapper {
    padding: 12px;
  }
  .pb-actions-boxes {
    margin-left: 0;
    gap: 8px;
  }
  .pb-action-box {
    width: calc(50% - 4px);
    height: 90px;
  }
  .pb-action-box i {
    font-size: 24px;
  }
  .pb-info-table th,
  .pb-info-table td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .pb-info-table th {
    padding-bottom: 3px;
  }
  .pb-info-table td {
    padding-top: 3px;
    border-bottom: 1px solid var(--pb-border-color, #e5e7eb);
  }
  .pb-info-table tr:last-child td {
    border-bottom: none;
  }
}

/* 2. Tablet Screens (min-width: 577px) and (max-width: 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .pb-wrapper {
    padding: 16px;
  }
  .pb-actions-boxes {
    gap: 12px;
  }
  .pb-action-box {
    width: 100px;
    height: 100px;
  }
}

/* 3. Laptop/Notebook Screens (min-width: 769px) and (max-width: 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .pb-wrapper {
    max-width: 100%;
  }
  .pb-actions-boxes {
    gap: 16px;
  }
  .pb-action-box {
    width: 105px;
    height: 105px;
  }
}

/* 4. Large Desktop Displays (min-width: 1025px) */
@media (min-width: 1025px) {
  .pb-wrapper {
    max-width: 1200px;
    margin: 20px auto;
  }
  .pb-actions-boxes {
    gap: 20px;
  }
  .pb-action-box {
    width: 110px;
    height: 110px;
  }
}

.pb-alert-danger {
  margin-top: 15px;
}

.pb-pw-toggle-btn {
  margin-left: 4px;
}

/* 
==========================================================================
   White/Dark Mode Toggle Styling Examples
==========================================================================
   If the admin has enabled the toggle feature:
   1. CSS variables (e.g. --pb-bg-color) are overridden dynamically inside 
      hooks.php mapping rules.
   2. Standardized theme state classes (.pb-dark-mode and .pb-light-mode) are
      dynamically applied to the .pb-wrapper container via JS, allowing you
      to write direct static rules for mode-specific styling:
*/

/* Dark Mode Specific Overrides Example */
.pb-wrapper.pb-dark-mode {
  /* Styles that should only apply when the client area is in Dark Mode */
  border-color: var(--pb-border-color, #374151);
}

/* Light Mode Specific Overrides Example */
.pb-wrapper.pb-light-mode {
  /* Styles that should only apply when the client area is in Light Mode */
  border-color: var(--pb-border-color, #e5e7eb);
}

/* ==========================================================================
   Custom Select (Single-Select / cselect) Styling
   ========================================================================== */
.pb-wrapper .pb-cselect {
  position: relative;
  width: 100%;
}

.pb-wrapper select.pb-cselect-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pb-wrapper .pb-cselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--pb-card-bg, #ffffff);
  color: var(--pb-text-color, #1a1d23);
  border: 1px solid var(--pb-border-color, #e5e7eb);
  border-radius: var(--pb-radius, 8px);
  cursor: pointer;
  font-size: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.pb-wrapper .pb-cselect-trigger:hover,
.pb-wrapper .pb-cselect.open .pb-cselect-trigger {
  border-color: var(--pb-primary-color, #1a4d80);
}

.pb-wrapper .pb-cselect.open .pb-cselect-trigger {
  box-shadow: 0 0 0 3px rgba(26, 77, 128, 0.15);
}

.pb-wrapper .pb-cselect-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.pb-wrapper .pb-cselect-caret {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--pb-muted-color, #9ca3af);
  transition: transform 0.2s ease;
}

.pb-wrapper .pb-cselect.open .pb-cselect-caret {
  transform: rotate(180deg);
}

.pb-wrapper .pb-cselect-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--pb-card-bg, #ffffff);
  border: 1px solid var(--pb-border-color, #e5e7eb);
  border-radius: var(--pb-radius, 8px);
  box-shadow: var(--pb-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.pb-wrapper .pb-cselect.open .pb-cselect-list {
  display: block;
}

.pb-wrapper .pb-cselect-option {
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--pb-text-color, #1a1d23);
  cursor: pointer;
  font-size: 14px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.pb-wrapper .pb-cselect-option:hover {
  background: var(--pb-hover-bg, #f3f4f6);
}

.pb-wrapper .pb-cselect-option.selected {
  background: var(--pb-primary-color, #1a4d80);
  color: #ffffff;
}

.pb-wrapper .pb-cselect-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pb-wrapper .pb-cselect-list::-webkit-scrollbar {
  width: 6px;
}

.pb-wrapper .pb-cselect-list::-webkit-scrollbar-thumb {
  background: var(--pb-border-color, #e5e7eb);
  border-radius: 6px;
}

/* ==================================================================
   Prorate Billing — client area components
   Colours come from the CSS variables the module writes out of the
   admin's Client Area Customization settings.
   ================================================================== */

.pb-hidden {
  display: none !important;
}

/* --- Service cards ---------------------------------------------- */
.pb-wrapper .pb-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.pb-wrapper .pb-service-card {
  padding: 18px;
  background: var(--pb-card-bg);
  border: 1px solid var(--pb-border-color);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow);
}

.pb-wrapper .pb-service-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.pb-wrapper .pb-service-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--pb-text-color);
}

.pb-wrapper .pb-service-domain {
  font-size: 13px;
  color: var(--pb-muted-color);
  margin-bottom: 12px;
  word-break: break-all;
}

.pb-wrapper .pb-service-change {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pb-border-color);
}

.pb-wrapper .pb-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text-color);
  margin-bottom: 6px;
}

.pb-wrapper .pb-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--pb-muted-color);
  line-height: 1.55;
}

/* --- Buttons ----------------------------------------------------- */
.pb-wrapper .pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--pb-radius);
  background: var(--pb-hover-bg);
  color: var(--pb-text-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.pb-wrapper .pb-btn:hover {
  background: var(--pb-active-bg);
}

.pb-wrapper .pb-btn-primary {
  background: var(--pb-primary-color);
  border-color: var(--pb-primary-color);
  color: #ffffff;
}

.pb-wrapper .pb-btn-primary:hover {
  background: var(--pb-secondary-color);
  border-color: var(--pb-secondary-color);
  color: #ffffff;
}

.pb-wrapper .pb-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Invoice table ---------------------------------------------- */
.pb-wrapper .pb-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--pb-border-color);
  border-radius: var(--pb-radius);
}

.pb-wrapper .pb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pb-card-bg);
}

.pb-wrapper .pb-table th,
.pb-wrapper .pb-table td {
  padding: 11px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--pb-text-color);
  border-bottom: 1px solid var(--pb-border-color);
  white-space: nowrap;
}

.pb-wrapper .pb-table th {
  background: var(--pb-header-bg);
  font-weight: 600;
  color: var(--pb-muted-color);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.pb-wrapper .pb-table tbody tr:nth-child(even) {
  background: var(--pb-alt-row-bg);
}

.pb-wrapper .pb-table tbody tr:last-child td {
  border-bottom: none;
}

.pb-wrapper .pb-table a {
  color: var(--pb-primary-color);
}

.pb-wrapper .pb-empty-note {
  padding: 18px;
  margin-bottom: 24px;
  background: var(--pb-header-bg);
  border: 1px dashed var(--pb-border-color);
  border-radius: var(--pb-radius);
  color: var(--pb-muted-color);
  font-size: 13px;
  text-align: center;
}

/* ==================================================================
   Order page notice — shown while the client is ordering a prorate
   product, on the cart pages and on the checkout page.
   ================================================================== */

.pb-order-notice-wrap {
  margin: 0 0 18px;
}

.pb-order-notice {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #bee3f8;
  border-left: 4px solid #2b6cb0;
  border-radius: 6px;
  background: #ebf8ff;
  color: #1f3b52;
}

.pb-order-notice-head {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pb-order-notice-head i {
  margin-right: 6px;
}

.pb-order-notice-body {
  font-size: 13px;
  line-height: 1.6;
}

.pb-order-notice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pb-order-notice-meta li {
  display: flex;
  flex-direction: column;
}

.pb-order-notice-meta span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.pb-order-notice-meta strong {
  font-size: 14px;
}

.lagom-dark-mode .pb-order-notice {
  border-color: #2c5282;
  background: rgba(43, 108, 176, 0.14);
  color: #cfe4f5;
}

/* --- Responsive breakpoints ------------------------------------- */
@media (max-width: 576px) {
  .pb-wrapper .pb-service-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pb-wrapper .pb-service-card {
    padding: 14px;
  }

  .pb-wrapper .pb-table th,
  .pb-wrapper .pb-table td {
    padding: 9px 10px;
    font-size: 12px;
  }

  .pb-order-notice-meta {
    gap: 10px;
  }

  .pb-order-notice-meta li {
    flex: 1 1 100%;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .pb-wrapper .pb-service-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .pb-wrapper .pb-service-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (min-width: 1025px) {
  .pb-wrapper .pb-service-grid {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
}

/* ==================================================================
   Product listing badge — shown on the store's product listing pages so
   the client knows the billing unit and rate before ordering.
   ================================================================== */

.pb-listing-badge {
  display: block;
  margin: 10px 0 0;
  padding: 8px 11px;
  border: 1px solid #bee3f8;
  border-left: 3px solid #2b6cb0;
  border-radius: 5px;
  background: #ebf8ff;
  color: #1f3b52;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

.pb-listing-badge i {
  margin-right: 5px;
}

.pb-listing-badge strong {
  font-weight: 600;
}

.pb-listing-badge-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  opacity: 0.8;
}

.lagom-dark-mode .pb-listing-badge {
  border-color: #2c5282;
  background: rgba(43, 108, 176, 0.14);
  color: #cfe4f5;
}

@media (max-width: 576px) {
  .pb-listing-badge {
    font-size: 12px;
    padding: 7px 9px;
  }
}

/* Billing schedule note + accrual figures in the client area */
.pb-wrapper .pb-schedule-note {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--pb-border-color);
  border-left: 3px solid var(--pb-primary-color);
  border-radius: var(--pb-radius);
  background: var(--pb-header-bg);
  color: var(--pb-text-color);
  font-size: 13px;
}

.pb-wrapper .pb-schedule-note i {
  margin-right: 6px;
  color: var(--pb-primary-color);
}

.pb-wrapper .pb-accrued {
  font-weight: 600;
}

.pb-wrapper .pb-accrued-units {
  color: var(--pb-muted-color);
  margin-left: 4px;
}