/* Planify WP Pricing Lite - frontend layout */

:where(.pwpl-table) {
  --pwpl-width-active: var(--pwpl-width-global, 1140px);
  --pwpl-columns-default: 4;
  --pwpl-columns-active: var(--pwpl-columns-global, var(--pwpl-columns-default));
  --pwpl-card-min-active: var(--pwpl-card-min-global, 0px);
  --pwpl-card-min-h-active: var(--pwpl-card-min-h-global, auto);
  --pwpl-card-gap: 64px;
  --pwpl-card-max: 420px;
}

.pwpl-table.pwpl-table--theme-firevps,
.pwpl-table {
  --pwpl-radius: 18px;
  --pwpl-gap: 18px;
  --pwpl-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --pwpl-arrow-bg: rgba(15, 23, 42, 0.65);
  --pwpl-arrow-hover: rgba(37, 99, 235, 0.85);
  --pwpl-arrow-color: #ffffff;
  --pwpl-location-bg: rgba(37, 99, 235, 0.12);
  --pwpl-location-text: var(--pwpl-accent, #2563eb);
  --pwpl-badge-bg: rgba(14, 165, 233, 0.16);
  --pwpl-badge-color: var(--pwpl-accent, #2563eb);
  --pwpl-tab-badge-bg: rgba(37, 99, 235, 0.12);
  --pwpl-tab-badge-color: var(--pwpl-accent, #2563eb);
  --pwpl-badge-shadow-strength: 0;
  --pwpl-badge-shadow-color: rgba(37, 99, 235, 0.26);
  --pwpl-cta-bg: var(--pwpl-accent, #2563eb);
  --pwpl-cta-color: var(--pwpl-accent-contrast, #ffffff);
  --pwpl-cta-hover-bg: var(--pwpl-accent-strong, #1d4ed8);
  --pwpl-card-border: rgba(148, 163, 184, 0.18);
  --pwpl-featured-border: var(--pwpl-accent, #2563eb);
  --pwpl-featured-bg: var(--pwpl-accent, #2563eb);
  --pwpl-featured-text: var(--pwpl-accent-contrast, #ffffff);
  --pwpl-table-active: var(--pwpl-width-active);


  border: 1px solid var(--pwpl-border, #e2e8f0);
  border-radius: var(--pwpl-radius);
  background: var(--pwpl-bg, #ffffff);
  color: var(--pwpl-text, #0f172a);
  padding: 28px;
  margin: 32px 0;
  box-shadow: var(--pwpl-shadow);
  width: 100%;
  width: min(100%, var(--pwpl-width-active));
  max-width: none;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Remove the global frame when FireVPS theme is active */
.pwpl-table.pwpl-table--theme-firevps {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pwpl-table__title {
  margin: 0 0 20px;
  font-size: 1.6rem;
  font-weight: 700;
}

.pwpl-dimension-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.pwpl-tab {
  border: 1px solid var(--pwpl-tab-border, #d1d5db);
  background: var(--pwpl-tab-bg, #f8fafc);
  color: var(--pwpl-text, #0f172a);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pwpl-tab:hover,
.pwpl-tab.is-active {
  background: var(--pwpl-tab-active-bg, #2563eb);
  border-color: var(--pwpl-tab-active-bg, #2563eb);
  color: var(--pwpl-tab-active-text, #ffffff);
}

.pwpl-tab__label {
  display: inline-block;
}

.pwpl-tab__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pwpl-tab-badge-bg, rgba(59, 130, 246, 0.18));
  color: var(--pwpl-tab-badge-color, #1d4ed8);
  box-shadow: 0 0 calc(var(--pwpl-badge-shadow-strength, 0) * 0.8px) calc(var(--pwpl-badge-shadow-strength, 0) * 0.4px) var(--pwpl-badge-shadow-color, rgba(59, 130, 246, 0.24));
}

.pwpl-tab__badge-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.pwpl-plan-rail-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: 56px;
}

.pwpl-plan-grid {
  display: flex;
  gap: var(--pwpl-gap);
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-x;
}

.pwpl-plan-grid:active {
  cursor: grabbing;
}

.pwpl-plan-grid::-webkit-scrollbar {
  height: 8px;
}

.pwpl-plan-grid::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 8px;
}

.pwpl-plan {
  scroll-snap-align: start;
  --pwpl-columns-effective: var(--pwpl-columns-active, var(--pwpl-columns-default, 4));
  --pwpl-card-min-effective: var(--pwpl-card-min-active, 0px);
  --pwpl-card-base: clamp(260px, calc((var(--pwpl-table-active) - var(--pwpl-card-gap, 64px)) / var(--pwpl-columns-effective)), var(--pwpl-card-max, 420px));
  flex: 0 0 max(var(--pwpl-card-min-effective), var(--pwpl-card-base));
  min-width: max(var(--pwpl-card-min-effective), var(--pwpl-card-base));
  background: var(--pwpl-card-bg, #f8fafc);
  border: 1px solid var(--pwpl-card-border, rgba(226, 232, 240, 0.7));
  border-radius: calc(var(--pwpl-radius) - 6px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--pwpl-card-shadow, 0 14px 40px rgba(15, 23, 42, 0.12));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: var(--pwpl-card-min-h-active, auto);
}

.pwpl-plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--pwpl-card-shadow-hover, 0 22px 48px rgba(15, 23, 42, 0.16));
}

.pwpl-plan__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwpl-plan__header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pwpl-plan__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--pwpl-location-bg);
  color: var(--pwpl-location-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pwpl-plan__location[hidden] {
  display: none !important;
}

.pwpl-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pwpl-badge-bg);
  color: var(--pwpl-badge-color);
  box-shadow: 0 0 calc(var(--pwpl-badge-shadow-strength, 0) * 1px) calc(var(--pwpl-badge-shadow-strength, 0) * 0.6px) var(--pwpl-badge-shadow-color, rgba(59, 130, 246, 0.28));
  transition: box-shadow 0.2s ease;
}

.pwpl-plan__badge[hidden] {
  display: none !important;
}

.pwpl-plan__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.pwpl-plan__badge-icon[hidden] {
  display: none !important;
}

.pwpl-plan__featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pwpl-featured-bg, var(--pwpl-accent, #2563eb));
  color: var(--pwpl-featured-text, #ffffff);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.pwpl-plan--featured {
  border: 2px solid var(--pwpl-featured-border, var(--pwpl-accent, #2563eb));
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22), 0 0 calc(var(--pwpl-badge-shadow-strength, 0) * 1.2px) var(--pwpl-featured-border, var(--pwpl-accent, #2563eb));
  transform: translateY(-8px);
  position: relative;
}

.pwpl-plan--featured:hover {
  transform: translateY(-12px);
}

/* Inner ring to ensure the highlight is visible on all sides, above theme overlay */
.pwpl-plan--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--pwpl-featured-border, var(--pwpl-accent, #2563eb));
}

.pwpl-plan--featured .pwpl-plan__cta-button {
  background: var(--pwpl-featured-bg, var(--pwpl-accent, #2563eb));
  color: var(--pwpl-featured-text, #ffffff);
  box-shadow: 0 22px 45px rgba(250, 204, 21, 0.28);
}

.pwpl-plan--featured .pwpl-plan__cta-button:hover,
.pwpl-plan--featured .pwpl-plan__cta-button:focus {
  background: var(--pwpl-cta-hover-bg, var(--pwpl-featured-bg, #2563eb));
}

.pwpl-plan__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pwpl-text, #0f172a);
}

.pwpl-plan__pricing {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--pwpl-text, #0f172a);
}

.pwpl-plan__price-sale {
  color: var(--pwpl-sale, #dc2626);
}

.pwpl-plan__price-original {
  font-size: 0.95rem;
  color: var(--pwpl-muted, #475569);
  text-decoration: line-through;
  opacity: 0.7;
}

.pwpl-plan__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.pwpl-plan__billing {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pwpl-muted, #475569);
  font-weight: 500;
  text-transform: capitalize;
}

.pwpl-plan__billing[hidden] {
  display: none !important;
}

.pwpl-plan__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--pwpl-cta-radius, 12px);
  background: var(--pwpl-cta-bg);
  color: var(--pwpl-cta-color);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  box-shadow: var(--pwpl-cta-shadow, 0 12px 24px rgba(37, 99, 235, 0.25));
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pwpl-plan__cta-button:hover,
.pwpl-plan__cta-button:focus {
  background: var(--pwpl-cta-hover-bg, var(--pwpl-cta-bg));
  transform: translateY(-1px);
}

.pwpl-plan__cta-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
}

.pwpl-plan__cta-button[hidden] {
  display: none !important;
}

.pwpl-plan__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}

.pwpl-plan__specs li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.pwpl-plan__spec-label {
  font-weight: 600;
  color: var(--pwpl-text, #0f172a);
}

.pwpl-plan__spec-value {
  color: var(--pwpl-muted, #475569);
  text-align: right;
}

.pwpl-plan-nav {
  position: absolute;
  bottom: 12px;
  pointer-events: none;
  z-index: 5;
}

.pwpl-plan-nav--prev {
  left: 12px;
}

.pwpl-plan-nav--next {
  right: 12px;
}

.pwpl-plan-nav__btn {
  pointer-events: auto;
  background: var(--pwpl-arrow-bg);
  color: var(--pwpl-arrow-color);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: var(--pwpl-arrow-shadow, 0 10px 28px rgba(15, 23, 42, 0.25));
}

.pwpl-plan-nav__btn:hover,
.pwpl-plan-nav__btn:focus {
  background: var(--pwpl-arrow-hover);
  transform: translateY(-1px);
}

.pwpl-plan-nav__btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 3px;
}

.pwpl-plan-nav[hidden] {
  display: none;
}

.pwpl-plan-nav__btn[hidden] {
  display: none !important;
}

/* Badge tone fallbacks */
.pwpl-plan__badge--tone-success {
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
}
.pwpl-plan__badge--tone-info {
  background: rgba(14, 165, 233, 0.2);
  color: #075985;
}
.pwpl-plan__badge--tone-warning {
  background: rgba(251, 191, 36, 0.25);
  color: #92400e;
}
.pwpl-plan__badge--tone-danger {
  background: rgba(248, 113, 113, 0.24);
  color: #991b1b;
}
.pwpl-plan__badge--tone-neutral {
  background: rgba(148, 163, 184, 0.28);
  color: #1f2937;
}

.pwpl-plan__price--empty {
  font-style: italic;
  color: var(--pwpl-muted, #475569);
}

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

.pwpl-unavailable {
  opacity: 0.6;
}

@media (max-width: 767px) {
  .pwpl-table {
    padding: 20px;
    --pwpl-width-active: var(--pwpl-width-sm, var(--pwpl-width-global, 1140px));
    --pwpl-columns-default: 1;
    --pwpl-columns-active: var(--pwpl-columns-sm, var(--pwpl-columns-global, var(--pwpl-columns-default)));
    --pwpl-card-min-active: var(--pwpl-card-min-sm, var(--pwpl-card-min-global, 0px));
    --pwpl-card-min-h-active: var(--pwpl-card-min-h-sm, var(--pwpl-card-min-h-global, auto));
    --pwpl-card-gap: 0px;
    --pwpl-card-max: 82vw;
  }

  .pwpl-plan__cta-button {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pwpl-table {
    --pwpl-width-active: var(--pwpl-width-md, var(--pwpl-width-global, 1140px));
    --pwpl-columns-default: 3;
    --pwpl-columns-active: var(--pwpl-columns-md, var(--pwpl-columns-global, var(--pwpl-columns-default)));
    --pwpl-card-min-active: var(--pwpl-card-min-md, var(--pwpl-card-min-global, 0px));
    --pwpl-card-min-h-active: var(--pwpl-card-min-h-md, var(--pwpl-card-min-h-global, auto));
    --pwpl-card-gap: 64px;
    --pwpl-card-max: 380px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .pwpl-table {
    --pwpl-width-active: var(--pwpl-width-lg, var(--pwpl-width-global, 1140px));
    --pwpl-columns-default: 3;
    --pwpl-columns-active: var(--pwpl-columns-lg, var(--pwpl-columns-global, var(--pwpl-columns-default)));
    --pwpl-card-min-active: var(--pwpl-card-min-lg, var(--pwpl-card-min-global, 0px));
    --pwpl-card-min-h-active: var(--pwpl-card-min-h-lg, var(--pwpl-card-min-h-global, auto));
    --pwpl-card-gap: 64px;
    --pwpl-card-max: 400px;
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .pwpl-table {
    --pwpl-width-active: var(--pwpl-width-xl, var(--pwpl-width-global, 1140px));
    --pwpl-columns-default: 4;
    --pwpl-columns-active: var(--pwpl-columns-xl, var(--pwpl-columns-global, var(--pwpl-columns-default)));
    --pwpl-card-min-active: var(--pwpl-card-min-xl, var(--pwpl-card-min-global, 0px));
    --pwpl-card-min-h-active: var(--pwpl-card-min-h-xl, var(--pwpl-card-min-h-global, auto));
    --pwpl-card-gap: 92px;
    --pwpl-card-max: 420px;
  }
}

@media (min-width: 1536px) {
  .pwpl-table {
    --pwpl-width-active: var(--pwpl-width-xxl, var(--pwpl-width-global, 1140px));
    --pwpl-columns-default: 4;
    --pwpl-columns-active: var(--pwpl-columns-xxl, var(--pwpl-columns-global, var(--pwpl-columns-default)));
    --pwpl-card-min-active: var(--pwpl-card-min-xxl, var(--pwpl-card-min-global, 0px));
    --pwpl-card-min-h-active: var(--pwpl-card-min-h-xxl, var(--pwpl-card-min-h-global, auto));
    --pwpl-card-gap: 96px;
    --pwpl-card-max: 440px;
  }
}