/* ==========================================================================
   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.
       dwPositionCselectList() 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_dw-` (use this single prefix consistently everywhere — do not mix in a shorter `dw-` 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 --dw-primary-color and --dw-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_dw-wrapper * {
  box-sizing: border-box !important;
}

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

/* Text in the brand colour uses --dw-primary-text: the brand colour as the template
   draws it for TEXT (a button colour can be too dark to read on a dark card). */
.whmp_dw-section-title {
  font-size: var(--dw-font-size-lg, 16px) !important;
  font-weight: var(--dw-font-weight, 700) !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  margin: 0 0 15px 10px !important;
}

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

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

.whmp_dw-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(--dw-card-bg, #ffffff) !important;
  border: 1px solid var(--dw-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(--dw-shadow, 0 2px 8px rgba(0, 0, 0, 0.05)) !important;
}

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

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

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

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

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

/* Tables read the dedicated --dw-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_dw-info-table tr:nth-child(odd) td,
.whmp_dw-info-table tr:nth-child(odd) th {
  background-color: var(--dw-table-row-bg, var(--dw-bg-color, #ffffff)) !important;
}

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

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

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

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

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

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

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

/* Interactive Utility Buttons */
.whmp_dw-copy-btn {
  background: none !important;
  border: 1px solid var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  border-radius: var(--dw-radius-sm, 4px) !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  padding: 1px 6px !important;
  font-size: var(--dw-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_dw-copy-btn:hover {
  background: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  color: var(--dw-bg-color, #ffffff) !important;
}

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

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

/* Float Popup messages styling */
.whmp_dw-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: whmpDwSlideInOutRight 3s ease-in-out forwards !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  font-size: var(--dw-font-size, 13px) !important;
}

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

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

/* ==========================================================================
   DOMAIN WHOIS -- the lookup page's own components
   ==========================================================================
   Built on the starter's isolation rule (every declaration !important, bar
   display and opacity) and on its --dw-* variables, so the admin's Client Area
   Customization mapping colours every part of the page on every template.
   Alerts and buttons are the starter's own components above; these rules only
   add the lookup page's layout around them.
   ========================================================================== */

.whmp_dw-lookup-container {
  width: 100% !important;
}

.whmp_dw-wrapper .whmp_dw-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: none !important;
  border: none !important;
}

/* ---- Lookup form ---- */
.whmp_dw-wrapper .whmp_dw-form {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
}

.whmp_dw-wrapper .whmp_dw-input-group {
  display: flex;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 !important;
  border: var(--dw-border-width, 1px) var(--dw-border-style, solid) var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius, 6px) !important;
  overflow: hidden !important;
  box-shadow: var(--dw-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.05)) !important;
  background-color: var(--dw-input-bg, #ffffff) !important;
}

.whmp_dw-wrapper .whmp_dw-input-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: var(--dw-input-padding, 12px 16px) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: var(--dw-font-size-lg, 15px) !important;
  line-height: 1.4 !important;
  color: var(--dw-text-color, #1a1d23) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.whmp_dw-wrapper .whmp_dw-input-field::placeholder {
  color: var(--dw-muted-color, #6b7280) !important;
  opacity: 1;
}

.whmp_dw-wrapper .whmp_dw-input-field:focus {
  box-shadow: none !important;
  outline: none !important;
}

.whmp_dw-wrapper .whmp_dw-input-group:focus-within {
  border-color: var(--dw-primary-color, #1a4d80) !important;
}

/* Buttons are the starter's .whmp_dw-btn tones. An <a> styled as a button needs
   the box model and the link states a template would otherwise impose. */
.whmp_dw-wrapper .whmp_dw-btn {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--dw-gap, 8px) !important;
  margin: 0 !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

.whmp_dw-wrapper a.whmp_dw-btn:hover,
.whmp_dw-wrapper a.whmp_dw-btn:focus,
.whmp_dw-wrapper a.whmp_dw-btn:active,
.whmp_dw-wrapper a.whmp_dw-btn:visited {
  text-decoration: none !important;
}

.whmp_dw-wrapper .whmp_dw-btn-primary:hover,
.whmp_dw-wrapper .whmp_dw-btn-primary:focus {
  color: var(--dw-btn-primary-text, #fff) !important;
}

.whmp_dw-wrapper .whmp_dw-btn-success:hover,
.whmp_dw-wrapper .whmp_dw-btn-success:focus {
  color: var(--dw-btn-success-text, #fff) !important;
}

.whmp_dw-wrapper .whmp_dw-btn-secondary:hover,
.whmp_dw-wrapper .whmp_dw-btn-secondary:focus {
  color: var(--dw-btn-secondary-text, #fff) !important;
}

/* The search button is joined to the field: square on the field side. */
.whmp_dw-wrapper .whmp_dw-btn-search {
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  border: none !important;
  padding: var(--dw-btn-padding, 10px 24px) !important;
}

.whmp_dw-wrapper .whmp_dw-btn-block {
  display: flex;
  width: 100% !important;
}

.whmp_dw-wrapper .whmp_dw-btn i,
.whmp_dw-wrapper .whmp_dw-alert i,
.whmp_dw-wrapper .whmp_dw-tld-note i,
.whmp_dw-wrapper .whmp_dw-card-title i {
  line-height: inherit !important;
  color: inherit !important;
}

/* ---- Captcha ---- */
.whmp_dw-wrapper .whmp_dw-captcha-container {
  margin: 15px 0 0 0 !important;
  text-align: center !important;
}

/* ---- Result messages: the starter's alert, laid out under the form ---- */
.whmp_dw-wrapper .whmp_dw-lookup-alert {
  display: flex;
  align-items: center !important;
  gap: 10px !important;
  max-width: 600px !important;
  margin: 0 auto 20px auto !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.whmp_dw-wrapper .whmp_dw-lookup-alert strong {
  font-weight: 700 !important;
  color: inherit !important;
}

.whmp_dw-wrapper .whmp_dw-action-container {
  margin: 0 0 25px 0 !important;
  text-align: center !important;
}

/* "We do not currently offer .xx domains" */
.whmp_dw-wrapper .whmp_dw-tld-note {
  display: flex;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 600px !important;
  margin: 0 auto 25px auto !important;
  padding: var(--dw-card-padding, 12px 16px) !important;
  border: var(--dw-border-width, 1px) var(--dw-border-style, solid) var(--dw-border-color, #e5e7eb) !important;
  border-left: 3px solid var(--dw-muted-color, #6b7280) !important;
  border-radius: var(--dw-radius, 6px) !important;
  background-color: var(--dw-hover-bg, #f3f4f6) !important;
  color: var(--dw-text-color, #1a1d23) !important;
  font-size: var(--dw-font-size, 13px) !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.whmp_dw-wrapper .whmp_dw-tld-note--card {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* ---- The WHOIS record and the transfer panel ---- */
.whmp_dw-wrapper .whmp_dw-results-layout {
  display: flex;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 30px 0 0 0 !important;
}

.whmp_dw-wrapper .whmp_dw-raw-content {
  flex: 2 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: var(--dw-card-bg, #ffffff) !important;
  border: var(--dw-border-width, 1px) var(--dw-border-style, solid) var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius, 6px) !important;
  box-shadow: var(--dw-shadow, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
}

.whmp_dw-wrapper .whmp_dw-card-header {
  padding: 15px 20px !important;
  background-color: var(--dw-header-bg, #f9fafb) !important;
  border-bottom: 1px solid var(--dw-border-color, #e5e7eb) !important;
}

.whmp_dw-wrapper .whmp_dw-card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--dw-font-size-lg, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
}

.whmp_dw-wrapper .whmp_dw-results-body {
  padding: 20px !important;
  color: var(--dw-text-color, #1a1d23) !important;
}

.whmp_dw-wrapper .whmp_dw-section-subtitle {
  margin: 0 0 12px 0 !important;
  padding: 0 0 6px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
  border-bottom: 1px solid var(--dw-border-color, #e5e7eb) !important;
}

.whmp_dw-wrapper .whmp_dw-section-subtitle:not(:first-child) {
  margin-top: 25px !important;
}

.whmp_dw-wrapper .whmp_dw-whois-list {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

.whmp_dw-wrapper .whmp_dw-row--whois {
  display: flex;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed var(--dw-border-color, #e5e7eb) !important;
  font-size: var(--dw-font-size, 13px) !important;
  line-height: 1.5 !important;
  background: none !important;
}

.whmp_dw-wrapper .whmp_dw-whois-list .whmp_dw-row--whois:last-child {
  border-bottom: none !important;
}

.whmp_dw-wrapper .whmp_dw-whois-label {
  flex: 0 0 180px !important;
  width: 180px !important;
  font-weight: 600 !important;
  color: var(--dw-text-color, #1a1d23) !important;
}

.whmp_dw-wrapper .whmp_dw-whois-value {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--dw-text-color, #1a1d23) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.whmp_dw-wrapper .whmp_dw-raw-pre {
  margin: 0 !important;
  padding: 15px !important;
  overflow-x: auto !important;
  background-color: var(--dw-input-bg, #f9fafb) !important;
  border: 1px solid var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius-sm, 4px) !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--dw-text-color, #1a1d23) !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.whmp_dw-wrapper .whmp_dw-whois-heading {
  font-weight: 700 !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
}

.whmp_dw-wrapper .whmp_dw-transfer-sidebar {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.whmp_dw-wrapper .whmp_dw-transfer-card {
  padding: 20px !important;
  background-color: var(--dw-card-bg, #ffffff) !important;
  border: var(--dw-border-width, 1px) var(--dw-border-style, solid) var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius, 6px) !important;
  box-shadow: var(--dw-shadow, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
}

.whmp_dw-wrapper .whmp_dw-transfer-title {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-size: var(--dw-font-size-lg, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--dw-primary-text, var(--dw-primary-color, #1a4d80)) !important;
}

.whmp_dw-wrapper .whmp_dw-transfer-description {
  margin: 0 0 20px 0 !important;
  font-size: var(--dw-font-size, 13px) !important;
  line-height: 1.5 !important;
  color: var(--dw-text-color, #1a1d23) !important;
}

/* 
==========================================================================
   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) {
  /* Domain WHOIS: field above button, record rows stacked */
  .whmp_dw-wrapper .whmp_dw-title {
    font-size: 20px !important;
  }
  .whmp_dw-wrapper .whmp_dw-input-group {
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    overflow: visible !important;
    gap: 10px !important;
  }
  .whmp_dw-wrapper .whmp_dw-input-field {
    width: 100% !important;
    border: var(--dw-border-width, 1px) var(--dw-border-style, solid) var(--dw-border-color, #e5e7eb) !important;
    border-radius: var(--dw-radius, 6px) !important;
    background-color: var(--dw-input-bg, #ffffff) !important;
  }
  .whmp_dw-wrapper .whmp_dw-btn-search {
    width: 100% !important;
    border-radius: var(--dw-radius, 6px) !important;
  }
  .whmp_dw-wrapper .whmp_dw-results-layout {
    flex-direction: column !important;
  }
  .whmp_dw-wrapper .whmp_dw-raw-content,
  .whmp_dw-wrapper .whmp_dw-transfer-sidebar {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .whmp_dw-wrapper .whmp_dw-results-body {
    padding: 15px !important;
  }
  .whmp_dw-wrapper .whmp_dw-row--whois {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .whmp_dw-wrapper .whmp_dw-whois-label {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .whmp_dw-wrapper {
    padding: 12px !important;
  }
  .whmp_dw-actions-boxes {
    margin-left: 0 !important;
    gap: 8px !important;
  }
  .whmp_dw-action-box {
    width: calc(50% - 4px) !important;
    height: 90px !important;
  }
  .whmp_dw-action-box i {
    font-size: 24px !important;
  }
  .whmp_dw-info-table th,
  .whmp_dw-info-table td {
    display: block;
    width: 100% !important;
    border-bottom: none !important;
  }
  .whmp_dw-info-table th {
    padding-bottom: 3px !important;
  }
  .whmp_dw-info-table td {
    padding-top: 3px !important;
    border-bottom: 1px solid var(--dw-border-color, #e5e7eb) !important;
  }
  .whmp_dw-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) {
  /* Domain WHOIS: the transfer panel moves under the record */
  .whmp_dw-wrapper .whmp_dw-results-layout {
    flex-direction: column !important;
  }
  .whmp_dw-wrapper .whmp_dw-raw-content,
  .whmp_dw-wrapper .whmp_dw-transfer-sidebar {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .whmp_dw-wrapper .whmp_dw-whois-label {
    flex: 0 0 150px !important;
    width: 150px !important;
  }
  .whmp_dw-wrapper {
    padding: 16px !important;
  }
  .whmp_dw-actions-boxes {
    gap: 12px !important;
  }
  .whmp_dw-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) {
  /* Domain WHOIS */
  .whmp_dw-wrapper .whmp_dw-results-layout {
    gap: 15px !important;
  }
  .whmp_dw-wrapper .whmp_dw-whois-label {
    flex: 0 0 160px !important;
    width: 160px !important;
  }
  .whmp_dw-wrapper {
    max-width: 100% !important;
  }
  .whmp_dw-actions-boxes {
    gap: 16px !important;
  }
  .whmp_dw-action-box {
    width: 105px !important;
    height: 105px !important;
  }
}

/* 4. Large Desktop Displays (min-width: 1025px) */
@media (min-width: 1025px) {
  /* Domain WHOIS */
  .whmp_dw-wrapper .whmp_dw-results-layout {
    gap: 20px !important;
  }
  .whmp_dw-wrapper {
    max-width: 1200px !important;
    margin: 20px auto !important;
  }
  .whmp_dw-actions-boxes {
    gap: 20px !important;
  }
  .whmp_dw-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 --dw-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_dw-alert whmp_dw-alert-danger">`.
   ========================================================================== */
.whmp_dw-alert {
  position: relative !important;
  padding: var(--dw-card-padding, 12px 16px) !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: var(--dw-border-width, 1px) var(--dw-border-style, solid) transparent !important;
  border-radius: var(--dw-radius, 6px) !important;
  font-size: var(--dw-font-size, 13px) !important;
  line-height: 1.5 !important;
}

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

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

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

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

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

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

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

/* ==========================================================================
   Buttons — one --dw-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_dw-btn {
  padding: var(--dw-btn-padding, 10px 20px) !important;
  border-radius: var(--dw-radius-sm, 5px) !important;
  cursor: pointer !important;
  font-size: var(--dw-font-size, 14px) !important;
  font-weight: 500 !important;
  transition: var(--dw-transition, all 0.3s ease) !important;
}

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

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

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

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

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

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

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

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

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

.whmp_dw-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. --dw-bg-color) are overridden dynamically inside 
      hooks.php mapping rules.
   2. Standardized theme state classes (.whmp_dw-dark-mode and .whmp_dw-light-mode) are
      dynamically applied to the .whmp_dw-wrapper container via JS, allowing you
      to write direct static rules for mode-specific styling:
*/

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

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

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

.whmp_dw-wrapper select.whmp_dw-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_dw-wrapper .whmp_dw-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(--dw-input-padding, 8px 12px) !important;
  background: var(--dw-card-bg, #ffffff) !important;
  color: var(--dw-text-color, #1a1d23) !important;
  border: 1px solid var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-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_dw-wrapper .whmp_dw-cselect-trigger:hover,
.whmp_dw-wrapper .whmp_dw-cselect.open .whmp_dw-cselect-trigger {
  border-color: var(--dw-primary-color, #1a4d80) !important;
}

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

.whmp_dw-wrapper .whmp_dw-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_dw-wrapper .whmp_dw-cselect-caret {
  flex-shrink: 0 !important;
  font-size: 12px !important;
  color: var(--dw-muted-color, #9ca3af) !important;
  transition: transform 0.2s ease !important;
}

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

.whmp_dw-wrapper .whmp_dw-cselect-list {
  /* position/top/left/width/bottom are set dynamically in JS (see
     dwPositionCselectList() 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(--dw-card-bg, #ffffff) !important;
  border: 1px solid var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius, 8px) !important;
  box-shadow: var(--dw-shadow, 0 4px 12px rgba(0, 0, 0, 0.08)) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  display: none;
}

.whmp_dw-wrapper .whmp_dw-cselect.open .whmp_dw-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_dw-wrapper .whmp_dw-cselect-search {
  width: 100% !important;
  padding: var(--dw-input-padding, 8px 12px) !important;
  margin-bottom: 6px !important;
  border: 1px solid var(--dw-border-color, #e5e7eb) !important;
  border-radius: var(--dw-radius-sm, 4px) !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-size: var(--dw-font-size, 13px) !important;
  color: var(--dw-text-color, #1a1d23) !important;
  background: var(--dw-card-bg, #ffffff) !important;
}

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

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

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

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

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

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

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

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

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