/* 
  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_ft-` (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 --ft-primary-color and --ft-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_ft-wrapper * {
  box-sizing: border-box;
}

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

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

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

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

.whmp_ft-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: var(--ft-card-bg, #ffffff);
  border: 1px solid var(--ft-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(--ft-shadow, 0 2px 8px rgba(0, 0, 0, 0.05));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   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 --ft-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_ft-alert whmp_ft-alert-danger">`.
   ========================================================================== */
.whmp_ft-alert {
  position: relative;
  padding: var(--ft-card-padding, 12px 16px);
  margin-top: 15px;
  margin-bottom: 15px;
  border: var(--ft-border-width, 1px) var(--ft-border-style, solid) transparent;
  border-radius: var(--ft-radius, 6px);
  font-size: var(--ft-font-size, 13px);
  line-height: 1.5;
}

.whmp_ft-alert-success {
  background-color: var(--ft-alert-success-bg, #d4edda);
  color: var(--ft-alert-success-text, #155724);
  border-color: var(--ft-alert-success-border, #c3e6cb);
}

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

.whmp_ft-alert-warning {
  background-color: var(--ft-alert-warning-bg, #fff3cd);
  color: var(--ft-alert-warning-text, #856404);
  border-color: var(--ft-alert-warning-border, #ffeeba);
}

.whmp_ft-alert-info {
  background-color: var(--ft-alert-info-bg, #d1ecf1);
  color: var(--ft-alert-info-text, #0c5460);
  border-color: var(--ft-alert-info-border, #bee5eb);
}

.whmp_ft-alert-primary {
  background-color: var(--ft-alert-primary-bg, #cce5ff);
  color: var(--ft-alert-primary-text, #004085);
  border-color: var(--ft-alert-primary-border, #b8daff);
}

.whmp_ft-alert-secondary {
  background-color: var(--ft-alert-secondary-bg, #e2e3e5);
  color: var(--ft-alert-secondary-text, #383d41);
  border-color: var(--ft-alert-secondary-border, #d6d8db);
}

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

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

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

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

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

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

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

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

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

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

.whmp_ft-inline-icon-muted {
  color: var(--ft-icon-muted-color, var(--ft-muted-color, #6b7280));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   Store banner
   ==========================================================================
   The corner ribbon the module puts on every store product that offers a free
   trial. Nothing here is a literal colour: every value resolves through the
   --ft-* variables styling.php maps onto the ACTIVE client-area template, so
   the ribbon follows the store's own brand colour, radius, shadow and type
   scale — and follows the template into dark mode, because the dark block
   redefines the same variables.

   --ft-banner-bg / --ft-banner-text are the two hooks the Settings tab
   overrides when "Match Client Area Theme" is turned off. They default to the
   theme's primary button, which is the closest thing every template has to
   "our accent, with readable text on it".
   ========================================================================== */

.whmp_ft-banner-host {
    /* The ribbon is absolutely positioned against the product card, and its
       tail is clipped by the card's own edge. */
    position: relative;
    overflow: hidden;
}

/* GEOMETRY NOTE — these four numbers were tuned against a real store, not
   guessed: on whmcs813 (twenty-one + one_step_order_form) the product card is
   235px wide, which is about the narrowest card any WHMCS order form renders.

   The visible part of a 45-degree ribbon is the chord the card's corner cuts
   out of it, and that chord is only centred on the label when the ribbon's
   centre sits the same distance from the right edge as it does from the top.
   The earlier values (width 180px, right -52px, top 18px) were off in both
   directions, so "5 Days Free Trial" reached the page reading
   "DAYS FREE TRIA". Change any of the three and re-check the label end to end
   on a narrow card. */
.whmp_ft-store-banner {
    --ft-banner-bg: var(--ft-btn-primary-bg, var(--ft-primary-color, #1A4D80));
    --ft-banner-text: var(--ft-btn-primary-text, #ffffff);

    position: absolute;
    top: 27px;
    right: -30px;
    z-index: 2;

    width: 140px;
    padding: 5px 0;

    transform: rotate(45deg);
    transform-origin: center;

    background: var(--ft-banner-bg);
    color: var(--ft-banner-text);
    box-shadow: var(--ft-shadow-sm, 0 2px 6px rgba(0, 0, 0, .25));

    font-size: var(--ft-font-size-sm, 11px);
    font-weight: var(--ft-font-weight, 600);
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;

    /* A long banner text must not push the ribbon out of shape. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    /* The ribbon sits over the card's own header; it must never swallow a
       click meant for the product. */
    pointer-events: none;
}

/* ---- Responsive ---------------------------------------------------------- */
/* The geometry holds across breakpoints because the card itself does not grow
   much; only the type scales, so a long label still fits on a phone. */
@media (max-width: 576px) {
    .whmp_ft-store-banner {
        top: 25px;
        right: -32px;
        width: 134px;
        padding: 4px 0;
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* ==========================================================================
   Checkout notice (2.4.1)
   ==========================================================================
   Shown above the payment methods when the cart holds a trial item but the
   Free Trial gateway cannot be offered — see js/client_area_scripts.js. The
   box itself is .whmp_ft-alert-warning above; only the list and the closing
   hint are laid out here.
   ========================================================================== */
.whmp_ft-checkout-notice ul {
  margin: 6px 0 6px 18px !important;
  padding: 0 !important;
  list-style: disc !important;
}

.whmp_ft-checkout-notice li {
  margin: 2px 0 !important;
}

.whmp_ft-checkout-notice-hint {
  margin-top: 6px !important;
  opacity: .9;
}

.whmp_ft-hidden-gateway {
  display: none !important;
}