@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");

:root {
    /* Forest green palette */
    --fg-900: #0b2e1f; /* nearly black */
    --fg-800: #0f3d2e;
    --fg-700: #14532d;
    --fg-600: #166534;
    --fg-500: #1b7e43; /* accent */
    --fg-400: #2f9e5f; /* hover */
    --fg-150: #e7f4ec; /* light surface */
    --fg-100: #f4faf7; /* page bg */
    --ink-800: #1d2b25;
    --ink-800: #050706;
    --ink-500: #2f4439;
    --muted: #6b7c73;
    --border: #e6eee8;
    --warning: #fef3c7; /* save badge */
}

#pricingTables {
    font-family: "Inter", sans-serif !important;
}

.pricing-intro {
    max-width: 760px;
    margin: auto;
}

/* Billing toggle */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.billing-toggle .opt {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.billing-toggle .opt.active {
    background: var(--fg-700);
    color: #fff;
}
.save-pill {
    display: inline-block;
    background: var(--warning);
    color: #7a5800;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.4rem;
}

/* Plan cards */
.p-plan-col {
    padding: 0 10px !important
}

.plan-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    display: flex; /* merged from duplicate block */
    flex-direction: column; /* merged from duplicate block */
}
.plan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.plan-name {
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--fg-800);
}
.plan-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--fg-700);
    line-height: 1;
}
.plan-suffix {
    font-size: 0.85rem;
    color: var(--muted);
}
.divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0 1.25rem;
}

.popular {
    border-color: var(--fg-700);
    box-shadow: 0 0 0 4px rgba(27, 126, 67, 0.08);
}
.popular .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fg-700);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(27, 126, 67, 0.25);
}

.feature {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0;
}
.feature i {
    margin-right: 0.6rem;
    margin-top: 0.15rem;
    color: var(--fg-600);
}
.feature.muted i {
    color: #c8d3cd;
}
.feature small {
    color: var(--muted);
}

.plan-cta {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    margin-top: 0; /* ensure no flex push */
}
.plan-cta .btn {
    border-radius: 999px;
    font-weight: 700;
    padding: 0.55rem 1rem;
}
.plan-cta .btn-success,
.plan-cta .btn-success:hover,
.plan-cta .btn.dropdown-toggle:hover {
    background: var(--fg-700) !important;
    border: none;
    color: #fff;
}
.plan-cta .btn-success:hover,
.plan-cta .btn.dropdown-toggle:hover {
    opacity: 0.9;
}

.plan-cta .pay,
.plan-cta .pay:hover,
.plan-cta .pay:focus,
.plan-cta .pay-paypal,
.plan-cta .pay-paypal:hover,
.plan-cta .pay-paypal:focus,
.plan-cta .dropdown .dropdown-item.text-info:hover {
    color: var(--fg-500) !important;
    background: none !important;
}

.price-box .price-line { display: block; line-height: 1.1; }
.price-box .compare { margin-bottom: 2px; }
.strikethrough {
  text-decoration: line-through;
  color: #af2a18;
  font-size: 1rem;
  font-weight: 600;
}

.ribbon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: var(--fg-150);
    color: var(--fg-700);
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
}

.all-plans {
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 1rem;
}

/* Responsive layout spacing */
@media (min-width: 992px) {
    .plan-card {
        height: 100%;
    }
}

/* --- Comparison grid below pricing --- */
.compare-wrap {
    border-radius: 1rem;
    border: 1px solid var(--border);
    overflow: hidden;
    background: #fff;
}

.compare-wrap .table {
    margin-bottom: 0;
}

.compare-wrap { overflow: visible; }                 /* Don't clip Y */
.table-responsive { overflow-y: visible; } 

.compare-wrap .table thead th {
    background: var(--fg-150);
    border-bottom: 2px solid var(--border);
    color: var(--fg-800);
    vertical-align: bottom;
    white-space: nowrap;
    font-weight: 700;
    position: sticky;
    top: 0;
}

.compare-wrap .table td,
.compare-wrap .table th {
    border-top: 1px solid var(--border);
}
.compare-wrap .table tbody tr:hover td {
    background: #fafdfb;
}

.feature-col {
    padding-left: 10px !important;
}

.plan-col {
    min-width: 170px;
    text-align: center;
}
.ic-yes {
    color: var(--fg-600);
}
.ic-no {
    color: #c8d3cd;
}
.qty {
    font-weight: 700;
    color: var(--fg-700);
}
.pill {
    display: block;
    color: var(--fg-800);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.table-section th {
    background: #f7faf8 !important;
    color: var(--ink-800) !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Centering + collapsible descriptions in comparison grid */
.compare-wrap th.plan,
.compare-wrap td.plan {
    text-align: center !important;
}

.compare-wrap td,
.compare-wrap th {
    vertical-align: middle !important;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


.pricing-grid-table {
  width: 100%;
}

.pricing-grid-table th.plan {
    position: relative;
    padding-top: 28px;
}

.pricing-grid-table th.plan.is-popular::before {
  content: "Most Popular";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fg-700);
  border: 0;
  color: #fff;
  white-space: nowrap;
  text-transform: capitalize !important;
}

.pricing-grid-table th,
.pricing-grid-table td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.pricing-grid-table .feature-col {
  width: 40%;
  text-align: left;
}

.pricing-grid-table th.plan,
.pricing-grid-table td.plan {
  width: 15%;
}

.feature-col.heading {
  font-size: 20px;
  text-align: left !important;
  font-weight: 700;
  padding-left: 10px !important;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid #333 !important;
  border-bottom: 1px solid #333 !important;
  background: #fff !important;
  width: 100%;
}

.feature-title {
    cursor: pointer;
    position: relative;
    padding-right: 1.25rem;
    color: var(--ink-800) !important;
    font-size: 14.5px !important;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

a.feature-title:hover {
    text-decoration: none !important;
}

a.feature-title:hover > span {
    opacity: unset !important;
    text-decoration: underline !important;
}

.feature-title .caret {
    transform: rotate(0);
    transition: transform 0.2s;
    color: var(--fg-700);
}
.feature-title[aria-expanded="true"] .caret {
    transform: rotate(180deg);
}
.feature-desc div {
    background: #fbfdfc;
    color: var(--ink-500) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* Core features tooltip for Startup plan */
.core-plus {
    color: var(--ink-500);
    font-weight: 400;
}

#coreTipStartup .core-features {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #f0f0f0;
}

#coreTipStartup .core-features > span{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

#coreTipStartup .core-features span i {
    color: var(--fg-150);
}

.core-tip-wrap {
    position: relative;
    display: inline-block;
}
.core-link {
    font-weight: 800;
    text-decoration: underline;
    color: var(--fg-700);
}
.core-link:hover {
    color: var(--fg-500);
}
.core-static {
    font-weight: 800;
    pointer-events: inherit;
}

.core-tip {
  position: absolute;
  top: 135%;
  left: -25px;
  background: var(--fg-800);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  width: 300px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  z-index: 50;

  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  pointer-events: none;
  /* prevent hover stealing when hidden */
}

.core-tip.show {
  opacity: 0.92;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
  pointer-events: auto;
}

/* Arrow: border (before) + fill (after) */
.core-tip::before,
.core-tip::after {
  content: "";
  position: absolute;
  left: 30%;
  /* arrow horizontal position */
  width: 0;
  height: 0;
  /* triangles */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.core-tip::before {
  /* thin border edge */
  top: -10px;
  border-bottom: 10px solid #f0f0f0;
}

.core-tip::after {
  /* white fill on top of border */
  top: -9px;
  border-bottom: 10px solid var(--fg-800);;
}

@media (min-width: 767.98px) {
    .feature-col {
        position: sticky;
        left: 0;
        padding-left: 20px !important;
        z-index: 1;
        background: #fff;
        font-weight: 600;
        color: var(--ink-500);
    }

    .pricing-grid-table {
        table-layout: fixed;
    }
}