/* ==========================================================================
   FOREIGN THEME ISOLATION -- EVERY DECLARATION HERE IS !important, ON PURPOSE
   ==========================================================================
   This stylesheet is printed into a page that belongs to someone else: the
   active client area template (Lagom, Twenty-One, Six, Nexus, Nexum, or any
   customised theme). Scoping every selector under our own classes is not
   enough on its own -- a template selector using an ID, like
   `#main-body .panel a:hover`, beats ours on specificity, and a template rule
   that is itself !important beats ours outright. So every declaration in this
   file is !important.

   That does NOT change how this file's own rules interact: among !important
   declarations the browser compares specificity and source order exactly as
   it does among normal ones, so hover, focus, dark mode and the media queries
   all still win where they did before.

   EXCEPTIONS -- never add !important to these:
     * custom properties (--x: ...). The Client Area Styling engine prints the
       admin's colours as --{xx}-* values in a later <style> block, and they
       must win by cascade order. Our !important rules READ them through var(),
       so the admin's customisation still applies.
     * anything inside @keyframes. !important there is invalid, and the
       browser silently DROPS the whole declaration.
     * display and opacity. jQuery's .show()/.hide()/.toggle()/.fadeIn()/
       .fadeOut()/.slideUp()/.slideDown() write them as inline styles, and a
       stylesheet !important beats an inline style -- the element would freeze.
     * position / top / right / bottom / left / width on *-cselect-list.
       evePositionCselectList() writes them inline to open the dropdown where
       it belongs.

   EVERY NEW RULE YOU ADD HERE MUST BE !important TOO. A normal declaration in
   an !important sheet silently loses to its neighbours -- it will look like it
   does nothing. The conformance manifest checks this mechanically, with
   tools/css_isolation_check.php in the common reference folder.
   ========================================================================== */

/* 
  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 `whmp_eve-` (use this single prefix consistently everywhere — do not mix in a shorter `st-` variant) 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 --eve-primary-color and --eve-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.
*/

.whmp_eve-wrapper * {
  box-sizing: border-box !important;
}

.whmp_eve-wrapper {
  font-family: inherit !important;
  margin-top: 20px !important;
  background-color: transparent !important;
  padding: var(--eve-card-padding, 16px) !important;
  border-radius: var(--eve-radius-lg, 10px) !important;
}

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

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

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

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

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

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

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

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

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

/* Tables read the dedicated --eve-table-* variables so an admin can match a
   template whose tables differ from its cards (striped header, tinted rows).
   Each falls back to the matching surface variable, so a theme with nothing
   table-specific to map still looks right. */
.whmp_eve-info-table tr:nth-child(odd) td,
.whmp_eve-info-table tr:nth-child(odd) th {
  background-color: var(--eve-table-row-bg, var(--eve-bg-color, #ffffff)) !important;
}

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

.whmp_eve-info-table th {
  padding: var(--eve-cell-padding, 12px 16px) !important;
  text-align: left !important;
  background-color: var(--eve-table-header-bg, var(--eve-header-bg, #f9fafb)) !important;
  color: var(--eve-table-header-text, var(--eve-primary-color, #1a4d80)) !important;
  font-weight: 600 !important;
  font-size: var(--eve-font-size, 13px) !important;
  width: 40% !important;
  border-bottom: 1px solid var(--eve-table-border, var(--eve-border-color, #e5e7eb)) !important;
}

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

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

/* Badges styling */
.whmp_eve-badge {
  display: inline-block;
  padding: 2px 10px !important;
  border-radius: var(--eve-radius-sm, 10px) !important;
  font-size: var(--eve-font-size-sm, 11px) !important;
  font-weight: 600 !important;
}

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

.whmp_eve-badge-inactive {
  background-color: var(--eve-badge-inactive-bg, #fdf0ef) !important;
  color: var(--eve-badge-inactive-text, #c0392b) !important;
}

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

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

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

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

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

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

@keyframes whmpEveSlideInOutRight {
  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) {
  .whmp_eve-wrapper {
    padding: 12px !important;
  }
  .whmp_eve-actions-boxes {
    margin-left: 0 !important;
    gap: 8px !important;
  }
  .whmp_eve-action-box {
    width: calc(50% - 4px) !important;
    height: 90px !important;
  }
  .whmp_eve-action-box i {
    font-size: 24px !important;
  }
  .whmp_eve-info-table th,
  .whmp_eve-info-table td {
    display: block;
    width: 100% !important;
    border-bottom: none !important;
  }
  .whmp_eve-info-table th {
    padding-bottom: 3px !important;
  }
  .whmp_eve-info-table td {
    padding-top: 3px !important;
    border-bottom: 1px solid var(--eve-border-color, #e5e7eb) !important;
  }
  .whmp_eve-info-table tr:last-child td {
    border-bottom: none !important;
  }
}

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

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

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

/* ==========================================================================
   Alerts
   ==========================================================================
   Self-contained on purpose. This used to be a bare `margin-top` bolted onto
   the active template's own `.alert alert-danger`, i.e. the module's alerts
   inherited a foreign template's classes — which breaks isolation and looks
   wrong the moment a template restyles `.alert`. Every tone now paints its own
   background, ink and border from its own --eve-alert-<tone>-* triplet, mapped
   per template in the Client Area Customization tab. Defaults are the
   Bootstrap 4 palette. See styling.php.

   Markup: `<div class="whmp_eve-alert whmp_eve-alert-danger">`.
   ========================================================================== */
.whmp_eve-alert {
  position: relative !important;
  padding: var(--eve-card-padding, 12px 16px) !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: var(--eve-border-width, 1px) var(--eve-border-style, solid) transparent !important;
  border-radius: var(--eve-radius, 6px) !important;
  font-size: var(--eve-font-size, 13px) !important;
  line-height: 1.5 !important;
}

.whmp_eve-alert-success {
  background-color: var(--eve-alert-success-bg, #d4edda) !important;
  color: var(--eve-alert-success-text, #155724) !important;
  border-color: var(--eve-alert-success-border, #c3e6cb) !important;
}

.whmp_eve-alert-danger {
  margin-top: 15px !important;
  background-color: var(--eve-alert-danger-bg, #f8d7da) !important;
  color: var(--eve-alert-danger-text, #721c24) !important;
  border-color: var(--eve-alert-danger-border, #f5c6cb) !important;
}

.whmp_eve-alert-warning {
  background-color: var(--eve-alert-warning-bg, #fff3cd) !important;
  color: var(--eve-alert-warning-text, #856404) !important;
  border-color: var(--eve-alert-warning-border, #ffeeba) !important;
}

.whmp_eve-alert-info {
  background-color: var(--eve-alert-info-bg, #d1ecf1) !important;
  color: var(--eve-alert-info-text, #0c5460) !important;
  border-color: var(--eve-alert-info-border, #bee5eb) !important;
}

.whmp_eve-alert-primary {
  background-color: var(--eve-alert-primary-bg, #cce5ff) !important;
  color: var(--eve-alert-primary-text, #004085) !important;
  border-color: var(--eve-alert-primary-border, #b8daff) !important;
}

.whmp_eve-alert-secondary {
  background-color: var(--eve-alert-secondary-bg, #e2e3e5) !important;
  color: var(--eve-alert-secondary-text, #383d41) !important;
  border-color: var(--eve-alert-secondary-border, #d6d8db) !important;
}

.whmp_eve-alert a,
.whmp_eve-alert a:link,
.whmp_eve-alert a:visited,
.whmp_eve-alert a:hover,
.whmp_eve-alert a:focus,
.whmp_eve-alert a:active {
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Buttons — one --eve-btn-<tone>-{bg,text,border} triplet per tone.
   Every variant sets background, colour AND border from its own triplet: that
   is what lets the mapping reproduce a template whose secondary button is a
   light plate with dark ink, which is impossible if `color` is hardcoded.
   ========================================================================== */
.whmp_eve-btn {
  padding: var(--eve-btn-padding, 10px 20px) !important;
  border-radius: var(--eve-radius-sm, 5px) !important;
  cursor: pointer !important;
  font-size: var(--eve-font-size, 14px) !important;
  font-weight: 500 !important;
  transition: var(--eve-transition, all 0.3s ease) !important;
}

.whmp_eve-btn-primary {
  background-color: var(--eve-btn-primary-bg, var(--eve-primary-color, #1a4d80)) !important;
  color: var(--eve-btn-primary-text, #fff) !important;
  border: 1px solid var(--eve-btn-primary-border, transparent) !important;
}

.whmp_eve-btn-secondary {
  background-color: var(--eve-btn-secondary-bg, var(--eve-secondary-color, #153d66)) !important;
  color: var(--eve-btn-secondary-text, #fff) !important;
  border: 1px solid var(--eve-btn-secondary-border, transparent) !important;
}

.whmp_eve-btn-success {
  background-color: var(--eve-btn-success-bg, #28a745) !important;
  color: var(--eve-btn-success-text, #fff) !important;
  border: 1px solid var(--eve-btn-success-border, transparent) !important;
}

.whmp_eve-btn-danger {
  background-color: var(--eve-btn-danger-bg, #dc3545) !important;
  color: var(--eve-btn-danger-text, #fff) !important;
  border: 1px solid var(--eve-btn-danger-border, transparent) !important;
}

.whmp_eve-btn-warning {
  background-color: var(--eve-btn-warning-bg, #ffc107) !important;
  color: var(--eve-btn-warning-text, #212529) !important;
  border: 1px solid var(--eve-btn-warning-border, transparent) !important;
}

.whmp_eve-btn-info {
  background-color: var(--eve-btn-info-bg, #17a2b8) !important;
  color: var(--eve-btn-info-text, #fff) !important;
  border: 1px solid var(--eve-btn-info-border, transparent) !important;
}

.whmp_eve-btn-primary:hover,
.whmp_eve-btn-secondary:hover,
.whmp_eve-btn-success:hover,
.whmp_eve-btn-danger:hover,
.whmp_eve-btn-warning:hover,
.whmp_eve-btn-info:hover {
  opacity: 0.9;
}

/* Plain inline Font Awesome glyphs (a label prefix, a table cell hint). */
.whmp_eve-inline-icon {
  color: var(--eve-icon-color, var(--eve-primary-color, #1a4d80)) !important;
}

.whmp_eve-inline-icon-muted {
  color: var(--eve-icon-muted-color, var(--eve-muted-color, #6b7280)) !important;
}

.whmp_eve-pw-toggle-btn {
  margin-left: 4px !important;
}

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

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

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

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

.whmp_eve-wrapper select.whmp_eve-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;
}

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

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

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

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

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

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

.whmp_eve-wrapper .whmp_eve-cselect-list {
  /* position/top/left/width/bottom are set dynamically in JS (see
     evePositionCselectList() in js/scripts.js) using position: fixed,
     computed from the trigger's actual on-screen coordinates. This lets
     the dropdown escape any ancestor with overflow:hidden/auto instead
     of being visually clipped. */
  position: fixed;
  z-index: 100060 !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: var(--eve-card-bg, #ffffff) !important;
  border: 1px solid var(--eve-border-color, #e5e7eb) !important;
  border-radius: var(--eve-radius, 8px) !important;
  box-shadow: var(--eve-shadow, 0 4px 12px rgba(0, 0, 0, 0.08)) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  display: none;
}

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

/* Search box injected only when the select has more than 10 options
   (see CSELECT_SEARCH_THRESHOLD in js/scripts.js) */
.whmp_eve-wrapper .whmp_eve-cselect-search {
  width: 100% !important;
  padding: var(--eve-input-padding, 8px 12px) !important;
  margin-bottom: 6px !important;
  border: 1px solid var(--eve-border-color, #e5e7eb) !important;
  border-radius: var(--eve-radius-sm, 4px) !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-size: var(--eve-font-size, 13px) !important;
  color: var(--eve-text-color, #1a1d23) !important;
  background: var(--eve-card-bg, #ffffff) !important;
}

.whmp_eve-wrapper .whmp_eve-cselect-search:focus {
  border-color: var(--eve-primary-color, #1a4d80) !important;
  box-shadow: 0 0 0 2px rgba(26, 77, 128, 0.15) !important;
}

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

.whmp_eve-wrapper .whmp_eve-cselect-option:hover {
  background: var(--eve-hover-bg, #f3f4f6) !important;
}

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

.whmp_eve-wrapper .whmp_eve-cselect-option.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

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

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

.whmp_eve-modal,
.whmp_eve-msd-dropdown {
  scrollbar-width: auto !important;
  scrollbar-color: var(--eve-primary-color, #1a4d80) var(--eve-hover-bg, #f3f4f6) !important;
}

.whmp_eve-modal::-webkit-scrollbar,
.whmp_eve-msd-dropdown::-webkit-scrollbar {
  width: 8px !important;
  background: var(--eve-hover-bg, #f3f4f6) !important;
  border-radius: 8px !important;
}
.whmp_eve-modal::-webkit-scrollbar-thumb,
.whmp_eve-msd-dropdown::-webkit-scrollbar-thumb {
  background: var(--eve-primary-color, #1a4d80) !important;
  border-radius: 8px !important;
}
.whmp_eve-modal::-webkit-scrollbar-thumb:hover,
.whmp_eve-msd-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--eve-secondary-color, #1a4d80) !important;
}
.whmp_eve-modal::-webkit-scrollbar-corner,
.whmp_eve-msd-dropdown::-webkit-scrollbar-corner {
  background: var(--eve-hover-bg, #f3f4f6) !important;
}

/* ==========================================================================
   Email Verification Extended -- the verification popup (registration,
   checkout, login) and the client's verification page.
   Colours, radii and shadows come from the --eve-* variables of the Client
   Area Customization tab, so both follow the active template, Lagom included,
   in light and dark mode. Every declaration is !important except display and
   opacity (jQuery fades write those inline) -- see the header of this file.
   ========================================================================== */

/* The popup overlay: hidden until jQuery fades it in (display: flex). */
#whmp_eve_popup.whmp_eve-popup-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.65) !important;
  margin: 0 !important;
  padding: 16px !important;
  border-radius: 0 !important;
}

.whmp_eve-popup-box {
  width: 100% !important;
  max-width: 420px !important;
  background: var(--eve-card-bg, #ffffff) !important;
  color: var(--eve-text-color, #333333) !important;
  border: var(--eve-border-width, 1px) var(--eve-border-style, solid) var(--eve-border-color, #dddddd) !important;
  border-radius: var(--eve-radius-lg, 10px) !important;
  box-shadow: var(--eve-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25)) !important;
  overflow: hidden !important;
}

.whmp_eve-popup-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: var(--eve-header-bg, #f5f5f5) !important;
  border-bottom: var(--eve-border-width, 1px) var(--eve-border-style, solid) var(--eve-border-color, #dddddd) !important;
}

.whmp_eve-popup-title {
  margin: 0 !important;
  font-size: var(--eve-font-size-lg, 16px) !important;
  font-weight: var(--eve-font-weight, 600) !important;
  color: var(--eve-text-color, #333333) !important;
}

.whmp_eve-popup-close {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--eve-muted-color, #6b7280) !important;
}

.whmp_eve-popup-close:hover {
  color: var(--eve-text-color, #333333) !important;
}

.whmp_eve-popup-body {
  padding: 22px 20px !important;
  text-align: center !important;
  color: var(--eve-text-color, #333333) !important;
  font-size: var(--eve-font-size, 14px) !important;
}

.whmp_eve-popup-body p {
  margin: 0 0 14px 0 !important;
  line-height: 1.55 !important;
  color: var(--eve-text-color, #333333) !important;
}

.whmp_eve-popup-body h4 {
  margin: 0 0 8px 0 !important;
  font-size: var(--eve-font-size-lg, 16px) !important;
  font-weight: var(--eve-font-weight, 600) !important;
  color: var(--eve-text-color, #333333) !important;
}

.whmp_eve-popup-body .whmp_eve-btn {
  min-width: 140px !important;
}

.whmp_eve-spinner {
  font-size: 28px !important;
  margin-bottom: 12px !important;
  color: var(--eve-primary-color, #1a4d80) !important;
}

.whmp_eve-popup-success-icon {
  font-size: 34px !important;
  margin-bottom: 10px !important;
  color: var(--eve-alert-success-text, #1e7b34) !important;
}

.whmp_eve-popup-error-title {
  color: var(--eve-alert-danger-text, #b02a1f) !important;
}

.whmp_eve-code-input {
  display: block;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: var(--eve-input-padding, 10px 12px) !important;
  font-size: 20px !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  background: var(--eve-input-bg, #ffffff) !important;
  color: var(--eve-text-color, #333333) !important;
  border: var(--eve-border-width, 1px) var(--eve-border-style, solid) var(--eve-border-color, #dddddd) !important;
  border-radius: var(--eve-radius-sm, 5px) !important;
  outline: none !important;
}

.whmp_eve-code-input:focus {
  border-color: var(--eve-primary-color, #1a4d80) !important;
  box-shadow: 0 0 0 3px var(--eve-primary-soft, rgba(26, 77, 128, 0.15)) !important;
}

.whmp_eve-code-input::placeholder {
  letter-spacing: normal !important;
  font-size: 14px !important;
  color: var(--eve-muted-color, #6b7280) !important;
}

.whmp_eve-code-input.whmp_eve-code-input-invalid {
  border-color: var(--eve-alert-danger-border, #dc3545) !important;
}

/* The client's verification page (templates/clientarea.tpl). */
.whmp_eve-verify-card {
  background: var(--eve-card-bg, #ffffff) !important;
  color: var(--eve-text-color, #333333) !important;
  border: var(--eve-border-width, 1px) var(--eve-border-style, solid) var(--eve-border-color, #e5e7eb) !important;
  border-radius: var(--eve-radius, 8px) !important;
  box-shadow: var(--eve-shadow, none) !important;
  padding: 28px 24px !important;
  text-align: center !important;
}

.whmp_eve-verify-icon {
  font-size: 42px !important;
  margin-bottom: 14px !important;
}

.whmp_eve-verify-icon--success {
  color: var(--eve-alert-success-text, #1e7b34) !important;
}

.whmp_eve-verify-icon--warning {
  color: var(--eve-alert-warning-text, #9a6200) !important;
}

.whmp_eve-verify-icon--danger {
  color: var(--eve-alert-danger-text, #b02a1f) !important;
}

.whmp_eve-verify-title {
  margin: 0 0 8px 0 !important;
  font-size: var(--eve-font-size-lg, 18px) !important;
  font-weight: var(--eve-font-weight, 600) !important;
  color: var(--eve-text-color, #333333) !important;
}

.whmp_eve-verify-text {
  margin: 0 auto 18px auto !important;
  max-width: 560px !important;
  line-height: 1.6 !important;
  color: var(--eve-muted-color, #6b7280) !important;
}

.whmp_eve-verify-email {
  font-weight: 600 !important;
  color: var(--eve-text-color, #333333) !important;
  word-break: break-all !important;
}

.whmp_eve-verify-table {
  max-width: 560px !important;
  margin: 0 auto 18px auto !important;
  text-align: left !important;
}

.whmp_eve-verify-actions {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.whmp_eve-verify-actions a.whmp_eve-btn {
  text-decoration: none !important;
  display: inline-block !important;
}

.whmp_eve-verify-card .whmp_eve-alert {
  margin: 18px auto 0 auto !important;
  max-width: 560px !important;
}

/* Breakpoints: the popup and page on Mobile, Tablet, Laptop, Desktop. */
@media (max-width: 576px) {
  .whmp_eve-popup-box {
    max-width: 100% !important;
  }
  .whmp_eve-popup-body {
    padding: 18px 14px !important;
  }
  .whmp_eve-verify-card {
    padding: 20px 14px !important;
  }
  .whmp_eve-verify-actions .whmp_eve-btn {
    width: 100% !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .whmp_eve-popup-box {
    max-width: 380px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .whmp_eve-popup-box {
    max-width: 400px !important;
  }
}

@media (min-width: 1025px) {
  .whmp_eve-popup-box {
    max-width: 420px !important;
  }
}