/*
 * 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; }