/*
 * Pricing page styles — the plan cards (.pricing-table-area-six), enterprise card and FAQ
 * accordion, copied from SEOptimer production (style.css + override.css) because our copy of
 * the theme CSS predates them. Loaded only on the pricing page (FrontendController::actionPricing).
 */
.pricing-table-area-six { max-width: 1335px; padding: 0 15px; margin: 0 auto; }
.pricing-table-area-six .row {margin: 0 -30px;}
.pricing-table-area-six .row [class*="col-"] {padding: 0 30px;}
.pricing-table-area-six .pr-table-wrapper { border: 1px solid #ECECEC; border-radius: 15px; transition: all 0.3s ease-in-out; padding: 33px 33px 33px; margin-top: 40px; position: relative; z-index: 1; text-align: center; }
.pricing-table-area-six .pr-table-wrapper:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 15px; border: 2px solid #000; z-index: -1; opacity: 0; transition: all 0.3s ease-in-out; }
.pricing-table-area-six .pr-table-wrapper .pack-name { font-weight: 500; font-size: 24px; line-height: 35px; padding: 0 13px; display: inline-block; color: #000; }
.pricing-table-area-six .pr-table-wrapper .pack-details { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: #000; border-bottom: 1px solid #E0E0E0; padding: 0 0 23px; }
.pricing-table-area-six .pr-table-wrapper .price { font-size:58px; font-weight: 500; color: #000; line-height: initial; padding: 13px 0 6px; }
.pricing-table-area-six .pr-table-wrapper .pr-feature { text-align: left; padding: 23px 0 33px 8px; }
.pricing-table-area-six .pr-table-wrapper .pr-feature li { position: relative; line-height: 37px; color: rgba(0, 0, 0, 0.7); }
.pricing-table-area-six .pr-table-wrapper .pr-feature li:not(.no-marker) { padding-left: 30px; }
.pricing-table-area-six .pr-table-wrapper .pr-feature li:not(.no-marker):before { content: url(../images/icon/76.svg); position: absolute; top: 0; left: 0; }
.pricing-table-area-six .pr-table-wrapper .trial-button { display: block; font-size: 16px; font-weight: 500; color: #000; line-height: 52px; border: 2px solid #000; border-radius: 5px; transition: all 0.3s ease-in-out; }
.pricing-table-area-six .pr-table-wrapper .trial-text {font-size: 16px; padding-top: 18px;}
.pricing-table-area-six .pr-table-wrapper:focus-within:before, 
.pricing-table-area-six .pr-table-wrapper:hover:before,
.pricing-table-area-six .pr-table-wrapper.active:before {opacity: 1;}
.pricing-table-area-six .pr-table-wrapper .trial-button:hover,
.pricing-table-area-six .pr-table-wrapper.active .trial-button {background: #FFEAA0; border-color: #FFEAA0;}
.accordion-style-five .card { background: transparent; border-radius: 0; border: none; border-bottom: 1px solid #E5E5E5; }
.accordion-style-five .card .card-header { background: transparent; border-radius: 0; padding: 0; border:none; }
.accordion-style-five .card .card-header button { display: block; width: 100%; text-align: left; padding: 30px 35px 30px 0; font-size: 21px; font-weight: 500; border:none; border-radius: 0; margin: 0; color: var(--heading); text-decoration: none; position: relative; border-bottom: 1px solid transparent; }
.accordion-style-five .card:first-child .card-header button {border-top: 1px solid #E5E5E5;}
.accordion-style-five .card .card-header button:before { content: "\f107"; font-family: 'font-awesome'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.accordion-style-five .card .card-body {padding: 0 50px 20px 0;}
.accordion-style-five .card .card-body p {padding-bottom: 15px;}
.accordion-style-five .card .card-body p a { text-decoration: underline; color: var(--p-color); }
.accordion-style-five .card:last-child .card-body {border:none; padding-bottom: 0;}
.pricing-table-area-six .pr-table-wrapper { display: flex; flex-direction: column; align-items: center; height: 100%; margin-top: 0; }
.pricing-table-area-six .pr-table-wrapper .pack-details,
.pricing-table-area-six .pr-table-wrapper .trial-button { width: 100%; }
.pricing-table-area-six .pr-table-wrapper .trial-button { margin-top: auto; }
.pricing-table-area-six .pr-table-wrapper .trial-button button { display: block; font-size: 16px; font-weight: 500; color: inherit; line-height: 52px; border-radius: 5px; transition: all 0.3s ease-in-out; width: 100%; }
.pricing-table-area-six .pr-table-wrapper .trial-button.active { background: #FFEAA0; border-color: #FFEAA0; }
.pricing-table-area-six .pr-table-wrapper .price { padding: 0; margin-top: 28px; margin-bottom: 15px; margin-left: -28px; }
.pricing-table-area-six .pr-table-wrapper .price,
.pricing-table-area-six .pr-table-wrapper .price * { line-height: 1em; }
.pricing-table-area-six .pr-table-wrapper .price-interval,
.pricing-table-area-six .pr-table-wrapper .price-currency { color: var(--text-color); font-weight: 300; position: absolute; white-space: nowrap; }
.pricing-table-area-six .pr-table-wrapper .price-interval { bottom: calc(50% - 8px); left: calc(100% + 4px); font-size: clamp(14px,28%, 20px); }
.pricing-table-area-six .pr-table-wrapper .price span + span + .price-interval { bottom: 8px; }
.pricing-table-area-six .pr-table-wrapper .price span + span { top:0; font-size: 40%; position: absolute; margin-top:2px; }
.pricing-table-area-six .pr-table-wrapper .price-interval-details { font-size: 16px; }
.pricing-table-area-six .pr-table-wrapper .price-interval-details:empty { display: none; }
.pricing-table-area-six .pr-table-wrapper .price-currency { font-size: 20px; line-height: 100%; right: calc(100% + 4px); bottom: 0; transform: translate(0, -100%); }
.pricing-table-area-six .pr-table-wrapper .trial-button[disabled],
.pricing-section-eight .trial-button[disabled] { background-color: #bfbfbf; border-color: #bfbfbf; color:#FFF; }
.pricing-table-area-six .pr-table-wrapper .pr-feature { padding-bottom: 18px; }
.pricing-table-area-six .pr-table-wrapper .pack-name.pack-name-plain { padding: 0; margin-bottom: 8px; }
.pricing-table-area-six .pr-table-wrapper .pack-details:empty { padding-bottom: 8px; }
.pricing-table-area-six .pr-table-wrapper .pack-details:empty + .pr-feature { padding-top: 16px; }
.pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag { text-align: center; margin-left: -8px; }
.pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag span { display: inline-block; line-height: 29px; padding: 0 12px; border-radius: 6px; color: #000; font-weight: 500; vertical-align: middle; }
@media (max-width: 991px) {
    .pricing-table-area-six .pr-table-wrapper span + span {
        margin-top: 0;
    }
    .pricing-table-area-six .pr-table-wrapper span + span + .price-interval {
        bottom: 2px;
    }
}
@media (max-width: 575px) {
    .pricing-table-area-six .pr-table-wrapper .pr-feature {
        min-height: auto!important;
    }
}
.pricing-enterprise-ad-card-wrapper { max-width: 1400px; margin: 0 auto; background: #F6F9FC; border-radius: 20px; position: relative; z-index: 1; padding: 35px; }
.pricing-enterprise-ad-card { }
.pricing-enterprise-ad-card-column { }
.pricing-enterprise-ad-card h4 { font-weight: 500; }
.pricing-enterprise-ad-card ul li { position: relative; padding-left: 30px; }
.pricing-enterprise-ad-card ul li:before { content: url(../images/icon/76.svg); position: absolute; top: 0; left: 0; }
.faq-section-five-small .accordion-style-five .card .card-header button { padding: 20px 35px 20px 0; font-size: 18px; font-weight: 500; }
.faq-section-five-small .accordion-style-five .card .card-body { font-size: 16px; }

/* messages from the plan-change flow (js/app/components/Alert.js uses the app theme's bg-- classes) */
/* SEOptimer shows these as a floating box over the page (override.css: fixed, 30% down); centred here with a
   transform rather than its left:50% + negative margin, which this file's margin used to cancel (the box
   then started mid-screen and ran off the right) */
.pricing-alerts .alert {
    position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 5000;
    margin: 0 !important; width: 90%; max-width: 720px;
    border-radius: 8px; padding: 18px 48px 18px 22px; font-size: 17px; line-height: 1.6;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.pricing-alerts .alert a { text-decoration: underline; font-weight: 500; }
.pricing-alerts .alert .close { position: absolute; top: 14px; right: 18px; cursor: pointer; font-size: 22px; line-height: 1; }
.pricing-alerts .alert.bg--error { background: #FFECEC; color: #b3261e; }
.pricing-alerts .alert.bg--success { background: #E3F8EF; color: #1e7a4c; }
.pricing-alerts .alert.bg--primary { background: #EAF2FD; color: #1f4f8f; }
.pricing-alerts .alert.bg--warning { background: #FBF3E5; color: #8a5a00; }

/* a plan the current subscriber can't switch to (e.g. the one they're on): greyed out and fully inert —
   no hover border (the theme draws it with :before), no hand cursor, no button hover colour */
.pricing-table-area-six .disabled .pr-table-wrapper { opacity: .6; }
.pricing-table-area-six .disabled .pr-table-wrapper:before,
.pricing-table-area-six .disabled .pr-table-wrapper:hover:before,
.pricing-table-area-six .disabled .pr-table-wrapper:focus-within:before { opacity: 0 !important; }
.pricing-table-area-six .disabled .pr-table-wrapper,
.pricing-table-area-six .disabled .trial-button,
.pricing-table-area-six .disabled .trial-button button { cursor: default; }
.pricing-table-area-six .disabled .trial-button { pointer-events: none; } /* no hover colour; the theme's [disabled] grey fill stays */
/* "billed the difference" note under higher plans for paying customers: SEOptimer's orange, a little larger */
.pricing-table-area-six .note-difference-change { display: block; font-size: 16px; font-weight: 500; color: #f2a83b; margin-top: 12px; text-align: center; }

/* "14 day free trial" star badge beside the title (SEOptimer override.css) */
.seoptimer-active-text .qodef-active-text span,
.seoptimer-show-product-info .qodef-active-text span {
    display: block;
    width: 122.5px;
    height: 122.5px;
    background: var(--theme-color-2);
    /* color: #000; */
    -webkit-transform: rotate(11.25deg);
    -ms-transform: rotate(11.25deg);
    transform: rotate(11.25deg);
    rotation: 12.5deg;
    -ms-rotation: 12.5deg;
}
.seoptimer-active-text .qodef-active-text .qodef-active-text-inner,
.seoptimer-show-product-info .qodef-active-text .qodef-active-text-inner {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    rotation: 90deg;
    -ms-rotation: 90deg;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    line-height: 130%;
    font-size: 22.5px;
    font-weight: 300;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.seoptimer-active-text .qodef-active-text .qodef-active-text-inner label,
.seoptimer-show-product-info .qodef-active-text .qodef-active-text-inner label{
    cursor: auto;
}
.price-page-active-text label { color: var(--heading); }

/* Local Ranking: card features in solid dark text (SEOptimer's rows are .text-dark) */
.pricing-table-area-six .pr-table-wrapper .pr-feature li { color: #000; }
/* gap between the stacked tags (listings / GeoGrid credits): 35px lines around 29px tags */
.pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag { line-height: 35px; }
/* keep each tag on one line so it stays as wide as its text (a wrapped inline-block stretches to
   the full card width and loses its spacing); slightly smaller text where the cards are narrowest */
.pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag span { white-space: nowrap; }
/* ...and in the two ranges where the cards are narrowest: 992-1199px (three across) and
   576-767px (two across). At full size the 16,000 / 32,000 credit tags are ~220px wide but only
   ~213px fits at 576px, so they overran the card border; at 14px they are ~200px. */
@media (min-width: 992px) and (max-width: 1199px), (min-width: 576px) and (max-width: 767px) { .pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag span { font-size: 14px; padding: 0 10px; } }
/* more room between the last tag and the ticked list */
.pricing-table-area-six .pr-table-wrapper .pr-feature .pr-feature-tag + li:not(.pr-feature-tag) { margin-top: 16px; }

/* Secondary black buttons ("Chat to Us", FAQ "Contact Us"): black outline on a transparent background,
   so they take the colour of whatever they sit on and sit back behind the plan buttons */
.theme-btn-eight.lr-btn-outline-dark {
    background: transparent; color: #000; border: 2px solid #000; line-height: 54px;
}
.theme-btn-eight.lr-btn-outline-dark:hover,
.theme-btn-eight.lr-btn-outline-dark:focus { background: #000; color: #fff; }

/* Monthly / Annual billing toggle above the plan cards (_pricing_widget.php) */
.lr-billing-toggle { display: flex; justify-content: center; gap: 0; width: max-content; max-width: 100%; margin: 0 auto 70px; padding: 6px; border-radius: 40px; background: #F6F9FC; } /* the enterprise card's blue-grey */
.lr-billing-toggle button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 34px; border: 0; border-radius: 40px; background: transparent; color: var(--heading); font-size: 18px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lr-billing-toggle button.active { background: #fff; color: var(--heading); box-shadow: 0 2px 8px rgba(16, 22, 33, .08); }
.lr-billing-toggle__badge { padding: 4px 11px; border-radius: 20px; background: #E3F8EF; color: #1B8A5A; font-size: 13px; font-weight: 600; }
@media (max-width: 400px) { .lr-billing-toggle button { padding: 11px 18px; font-size: 16px; } }
/* annual cards: the yearly charge under the per-month price */
.pricing-table-area-six .pr-table-wrapper .price-interval-details { margin: -6px 0 6px; color: var(--text-color); }

/* signed-in customers: the plan-change note under a card ("billed the difference" etc.) sits below the card,
   out of the card's height — in the flow it made that column taller, the row stretched every column to match
   and the cards grew (white space above the buttons). Room is kept for it under the row / the stacked card. */
.pricing-table-area-six .lr-has-note { position: relative; }
.pricing-table-area-six .lr-has-note .note-difference-change { position: absolute; top: 100%; left: 15px; right: 15px; }
.pricing-table-area-six .row.lr-has-notes { padding-bottom: 50px; }
@media (max-width: 991px) {
    .pricing-table-area-six .lr-has-note { margin-bottom: 110px !important; }
}