/*
 * Styles for the Hosting Plan Calculator
 *
 * The calculator is composed of two main columns: the left column contains
 * configuration controls (sliders) and the right column displays the summary,
 * plan type selection, and CPU graph. The layout adapts responsively using
 * flexbox. RTL support is provided by adding the class `hcalc-rtl` to the
 * container for Hebrew.
 */

.hcalc-main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: #f3f6fc;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/*
 * Root-level CSS variables with default font sizes. These values can be
 * overridden dynamically from the plugin settings. JavaScript will set
 * these variables on the `.hcalc-container` element when custom font
 * sizes are defined. Using CSS variables avoids hardcoding pixel values
 * throughout the stylesheet and centralizes typographic control.
 */
.hcalc-container {
  --hcalc-title-font-size: 1.5rem;
  --hcalc-label-font-size: 0.875rem;
  --hcalc-price-font-size: 2rem;
  --hcalc-desc-font-size: 0.875rem;
  --hcalc-graph-title-font-size: 0.9rem;
  --hcalc-button-font-size: 1rem;
  /* Primary colour variables used throughout the calculator.  These may be overridden
     via JavaScript to customise the accent colour and its hover state. */
  --hcalc-primary-color: #2563eb;
  --hcalc-primary-hover-color: #1d4ed8;
}

.hcalc-sliders {
  flex: 1 1 60%;
  min-width: 300px;
}

.hcalc-summary {
  flex: 1 1 35%;
  min-width: 280px;
  background: #eef5ff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
}

.hcalc-title {
  font-size: var(--hcalc-title-font-size);
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Price displayed next to the title on small screens */
.hcalc-title-price {
  font-size: var(--hcalc-price-font-size);
  color: #2563eb;
  margin-left: 0.5rem;
}

@media (min-width: 768px) {
  /* Hide responsive price on larger screens */
  .hcalc-title-price {
    display: none;
  }
}

/* Wrap graph and breakdown side by side on desktop */
.hcalc-graph-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .hcalc-graph-breakdown {
    flex-direction: row;
  }
  .hcalc-graph-breakdown .hcalc-graph-container {
    flex: 1 1 60%;
    /* Override default width when displayed alongside breakdown */
    width: auto;
    margin-bottom: 0;
  }
  .hcalc-graph-breakdown .hcalc-breakdown {
    flex: 1 1 40%;
    margin-top: 0;
  }
}

/* Details list in sliders column */
.hcalc-details-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #475569;
  display: none; /* Hidden, as breakdown appears in tooltip now */
  flex-wrap: wrap;
  gap: 1rem;
}

.hcalc-details-list li {
  margin-bottom: 0;
}

/* Hide native radio inputs for plan type */
.hcalc-plan-input {
  display: none;
}

.hcalc-group {
  /* Provide extra spacing between slider groups */
  margin-bottom: 2rem;
}

.hcalc-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
  font-size: var(--hcalc-label-font-size);
}

.hcalc-value {
  font-weight: 600;
  margin-left: 0.25rem;
}

.hcalc-slider-wrapper {
  position: relative;
  height: 32px;
  margin-top: 0.25rem;
}

.hcalc-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 4px;
  background: #dce7f7;
  border-radius: 2px;
}

.hcalc-slider-tick {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: #dce7f7;
  border-radius: 50%;
  pointer-events: none;
}

.hcalc-slider-tick.active {
  background: var(--hcalc-primary-color);
}

.hcalc-slider-label {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
}

.hcalc-slider-label.active {
  color: var(--hcalc-primary-color);
  font-weight: 600;
}

.hcalc-slider-thumb {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  /* Match the thumb border to the primary colour */
  border: 4px solid var(--hcalc-primary-color);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 2;
}

.hcalc-plan-types {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.hcalc-plan-type-label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.hcalc-plan-label {
  display: flex;
  /* Stack icon and label vertically */
  flex-direction: column;
  align-items: center;
  /* gap removed; spacing controlled by padding/margin */
  padding: 5px;
  border-radius: 0.5rem;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  border: 1px solid var(--hcalc-primary-color);
  transition: background 0.2s ease, color 0.2s ease;
  /* Make each button occupy roughly a third of the available width and center it */
  width: 30%;
  margin: auto;
}

.hcalc-plan-label input {
  display: none;
}

.hcalc-plan-label.selected {
  /* Use the primary colour for selected states */
  background: var(--hcalc-primary-color);
  color: #ffffff;
}

.hcalc-plan-label.selected .hcalc-plan-icons svg {
  color: #ffffff;
}

.hcalc-plan-icons svg {
  width: 14px;
  height: 14px;
  /* Icons adopt the primary colour by default */
  color: var(--hcalc-primary-color);
}

.hcalc-desc {
  font-size: var(--hcalc-desc-font-size);
  color: #475569;
  min-height: 2.5rem;
  margin-bottom: 0.5rem;
}

.hcalc-price {
  font-size: var(--hcalc-price-font-size);
  font-weight: 700;
  /* The total price inherits the primary colour */
  color: var(--hcalc-primary-color);
  /* Remove bottom margin to align the price closer to adjacent elements */
  margin-bottom: 0;
}

/* Layout wrapper for the price and info icon in the summary.
   Ensures the price and the info icon appear on the same line and maintain
   consistent spacing. */
.hcalc-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hcalc-cpu-title {
  font-size: var(--hcalc-graph-title-font-size);
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.hcalc-graph-container {
  width: 100%;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.hcalc-breakdown {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #475569;
}

.hcalc-breakdown li {
  margin-bottom: 0.25rem;
  cursor: help;
}

/* Info icon and tooltip styles */
.hcalc-info-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
}
.hcalc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Info icons share the primary colour */
  color: var(--hcalc-primary-color);
}
.hcalc-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 999;
  /*
   * Expand the tooltip width so longer text doesn't wrap awkwardly. The
   * minimum width ensures very short messages still look balanced,
   * while the larger max width prevents premature line breaks. These
   * values can be tuned via admin settings if needed.
   */
  /*
   * Increase the tooltip width so longer sentences fit comfortably on one line.
   * A larger min-width helps avoid early line breaks for moderate length
   * strings, while a generous max-width allows multi‑word tooltips to span
   * across the tooltip without wrapping. Adjust these values via a future
   * settings option if desired.
   */
  min-width: 300px;
  max-width: 500px;
  /* Slightly bolder font for tooltip text for better readability */
  font-weight: 500;
}

/*
 * Tooltip displayed when clicking on CPU graph bars.  This tooltip
 * contains an illustrative image and a legend.  It is positioned
 * absolutely relative to the graph container.  The design mirrors
 * the existing tooltip styling but adapts dimensions and layout for
 * an image and text.
 */
.hcalc-bar-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
  z-index: 1000;
  max-width: 220px;
  display: none;
}
.hcalc-bar-tooltip img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}
.hcalc-bar-marker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #374151;
}
.hcalc-bar-marker span:first-child {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: green;
  border-radius: 2px;
}
.hcalc-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hcalc-tooltip li {
  font-size: 0.875rem;
  color: #475569;
  margin-bottom: 0.25rem;
}
.hcalc-tooltip li:last-child {
  margin-bottom: 0;
}
/* Show tooltip only when hovering over the info icon.  Using the sibling
   selector ensures that the tooltip hides as soon as the pointer leaves
   the icon. This prevents the tooltip from staying visible when the
   mouse moves over the tooltip itself. */
.hcalc-info-icon:hover + .hcalc-tooltip {
  display: block;
}

/*
 * Responsive adjustments for tooltips on small screens.  When the viewport
 * width is small, the default fixed widths (min-width: 300px; max-width: 500px)
 * could cause the tooltip to overflow the viewport if the info icon is near
 * either edge.  For screens up to 600px wide, limit the tooltip to 90% of
 * the viewport width and centre it horizontally relative to the viewport.
 */
@media (max-width: 600px) {
  .hcalc-tooltip {
    /* Maintain a reasonable minimum width on small screens so the text has
       room to flow horizontally.  Without a minimum width the tooltip
       collapses to the width of the info icon, causing text to stack
       vertically one letter per line. */
    min-width: 200px;
    max-width: 90vw;
    left: 50% !important;
    right: auto;
    transform: translateX(-50%) !important;
    word-break: break-word;
  }
}

/* Range description under each slider.  These descriptions are
   configurable via the admin settings and provide additional
   context for what the slider controls.  Use the description font
   size variable so admins can control its size globally. */
.hcalc-range-desc {
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: var(--hcalc-desc-font-size);
}

.hcalc-order-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--hcalc-primary-color);
  color: #ffffff;
  border-radius: 0.5rem;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  margin-top: auto;
  /* Use the button font size variable so admins can customise
     the size of the order button text via the settings page. */
  font-size: var(--hcalc-button-font-size);
  /* Smooth transition for hover state */
  transition: background 0.2s ease;
}

.hcalc-order-btn:hover {
  background: var(--hcalc-primary-hover-color);
}

/* Summary footer styling
   When an admin enters text into the summary footer field, this element
   appears at the bottom of the summary column. Provide margin and
   typography consistent with the rest of the calculator. */
.hcalc-summary-footer {
  margin-top: 0.75rem;
  font-size: var(--hcalc-desc-font-size);
  color: #475569;
  line-height: 1.4;
}

/* RTL adjustments: apply overall text direction, but do not reverse the
   column order. The sliders themselves flip via JavaScript. */
.hcalc-rtl {
  direction: rtl;
}