/*======================================
	Pricing Two cards — equal height

	.pricing-two__single only takes its own content's height, so a card
	whose list items wrap to more lines (Basic/Pro have longer feature
	text than Starter) renders taller than its siblings. Bootstrap's
	.row already stretches the columns to equal height; make the card
	itself fill that column height too, and push the CTA button to the
	bottom so it lines up across cards regardless of list length.
========================================*/
.pricing-two .row > [class*="col-"] {
    display: flex;
}

.pricing-two__single {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pricing-two__bottom {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pricing-two__single .pricing-btn {
    margin-top: auto;
}

/*======================================
	Pricing Compare Table CSS
========================================*/
.pricing-compare {
    position: relative;
    display: block;
    background: var(--thm-body-background);
    padding: 120px 0px 40px;
    z-index: 1;
}

.pricing-compare__intro {
    max-width: 700px;
    margin: 0 auto 50px;
}

.pricing-compare__intro p {
    margin: 0;
}

.pricing-compare__table-wrap {
    position: relative;
    display: block;
}

/* Only shown on narrow viewports, where the table's min-width forces
   horizontal scroll (see .pricing-compare table below) — desktop never
   needs it since every column already fits on screen. */
.pricing-compare__swipe-hint {
    display: none;
}

.table-scroll {
    position: relative;
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.pricing-compare table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
}

.pricing-compare thead th,
.pricing-compare tbody td {
    width: 25%;
}

.pricing-compare thead th:first-child,
.pricing-compare tbody td:first-child {
    width: 28%;
}

/* Feature label column stays put while the plan columns scroll on mobile */
.pricing-compare thead th:first-child,
.pricing-compare tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--thm-body-background);
}

.pricing-compare thead th {
    position: relative;
    text-align: center;
    height: 130px;
    padding: 0 20px;
    background: var(--thm-black-bg);
    color: var(--thm-heading-font-color);
    font-family: var(--thm-heading-font-family);
    font-weight: 700;
    text-transform: capitalize;
    border-bottom: 1px solid #3d3d3f;
}

.pricing-compare thead th:first-child {
    background: transparent;
    border-bottom: none;
}

.pricing-compare thead th.popular {
    background: var(--thm-primary-color);
    color: var(--thm-white);
    border-radius: 5px 5px 0 0;
}

/* Absolutely positioned (rather than stacked in normal flow) so the
   "Most Popular" badge doesn't push Basic's plan-name below the
   vertical center that Starter/Pro's plan-name sits at — all three
   plan-name spans center on the same fixed th height regardless of
   whether a badge is present above them. */
.pricing-compare thead th .plan-badge {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--thm-white);
    opacity: 0.85;
}

.pricing-compare thead th .plan-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 34px;
}

.pricing-compare tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 18px 20px;
    border-bottom: 1px solid #3d3d3f;
    color: var(--thm-body-font-color);
    font-size: 16px;
}

.pricing-compare tbody td:first-child {
    text-align: left;
    color: var(--thm-heading-font-color);
    font-family: var(--thm-heading-font-family);
    font-weight: 400;
    font-size: 17px;
}

.pricing-compare tbody td.popular {
    background: rgba(51, 153, 204, 0.08);
}

.pricing-compare tbody tr:last-child td {
    border-bottom: none;
}

/* Plan summary row (description / price / CTA) */
.pricing-compare__intro-row td {
    padding: 30px 25px 35px;
    vertical-align: top;
}

.pricing-compare__intro-row p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}

.pricing-compare__intro-row h3 {
    color: var(--thm-heading-font-color);
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 20px;
}

.pricing-compare__intro-row h3 .small {
    font-size: 15px;
    color: var(--thm-body-font-color);
    font-weight: 700;
}

.pricing-compare__intro-row .button-style-1 {
    display: inline-block;
}

/* Category separator rows ("General", "Marketing", etc.)
   Selector needs to out-specificity the sticky first-column rule above
   (.pricing-compare tbody td:first-child), since a sep row's single
   colspan="4" td is also that row's first (and only) child. */
.pricing-compare tbody tr.pricing-compare__sep td {
    text-align: left;
    background: var(--thm-gray);
    color: var(--thm-black);
    font-family: var(--thm-heading-font-family);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 20px;
}

html[theme="light"] .pricing-compare tbody tr.pricing-compare__sep td {
    background: var(--thm-black);
    color: var(--thm-white);
}

/* Included / not included icons */
.pricing-compare tbody td i.fa-check {
    color: var(--thm-secondary-color);
    font-size: 21px;
}

/* Numeric allowance cells (e.g. Email Account quantity per plan) */
.pricing-compare tbody td .value-num {
    color: var(--thm-heading-font-color);
    font-family: var(--thm-heading-font-family);
    font-size: 18px;
    font-weight: 400;
}

.pricing-compare tbody td i.fa-xmark {
    color: #55555a;
    font-size: 19px;
}

/* Tooltip on feature labels */
.pricing-compare .tooltip-icon {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    cursor: help;
}

.pricing-compare .tooltip-icon i {
    color: var(--thm-body-font-color);
    font-size: 14px;
}

.pricing-compare .tooltip-icon__text {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: var(--thm-black-bg);
    color: var(--thm-body-font-color);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    line-height: 21px;
    padding: 10px 14px;
    border-radius: 5px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.pricing-compare .tooltip-icon__text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--thm-black-bg);
}

.pricing-compare .tooltip-icon:hover .tooltip-icon__text,
.pricing-compare .tooltip-icon:focus .tooltip-icon__text {
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width: 767px) {
    .pricing-compare {
        padding-bottom: 90px;
    }

    .pricing-compare__intro-row td {
        padding: 25px 18px 30px;
    }

    .pricing-compare thead th {
        height: 100px;
        padding: 0 14px;
    }

    .pricing-compare thead th .plan-name {
        font-size: 24px;
    }

    .pricing-compare__swipe-hint {
        display: block;
        text-align: center;
        margin: 0 0 12px;
        color: var(--thm-body-font-color);
        font-size: 13px;
        letter-spacing: 0.3px;
    }

    .pricing-compare__swipe-hint i {
        color: var(--thm-primary-color);
        margin-right: 4px;
    }
}