/*
 * Project-specific overrides layered on top of the Gerow theme's vendor
 * CSS. Kept in its own file (loaded last) rather than editing style.css
 * directly, so theme updates/diffs stay clean.
 */

/* Service/course/OJS-sub-service card thumbnails (.services-thumb-two):
   real photos vary in natural aspect ratio, unlike the theme demo's
   pre-cropped stock images — force a uniform height + cover-crop so grid
   rows line up evenly instead of each card matching its own image height. */
/* Service detail page body copy (About/Features text) — justified so both
   edges line up evenly instead of the default ragged-right. */
.services-details-content {
    text-align: justify;
}
/* Service page main title (e.g. "Website Design") — dedicated class so it
   stays clearly bigger than the Key Features card headings below it,
   which are already 20px by default (.features-content-two .title in
   style.css) and were reading the same size as this heading before. */
.service-main-title {
    font-size: 36px;
}
.services-details-content .features-content-two .title {
    font-size: 20px;
}

/* How It Works (process_steps.php) — alternate background so it reads as
   its own band between the white About/Features area above and Pricing
   below, instead of blending into both. */
.how-it-works-area {
    background: var(--tg-section-background);
}

/* Site logo (header_nav.php) — cap height so a wide/tall source logo file
   doesn't blow out the nav bar. */
.header-style-two .logo img {
    max-height: 50px;
}

/* cta_block.php — make the CTA's background span the full viewport width
   instead of being boxed in by .container (the theme's original design).
   The .container now sits inside .cta-inner-wrap for text/button
   centering, so this just needs to undo the theme's card sizing. */
.cta-inner-wrap-full {
    width: 100%;
    border-radius: 0;
    padding: 70px 0;
}

/* .cta-content is still display:flex from the theme's original design,
   where it held the "Call For More Info" block side-by-side with the
   title — now that block is removed, that flex row was sitting the title
   and this new subtitle paragraph next to each other horizontally instead
   of stacking them as separate lines. Stack them. */
.cta-content {
    display: block;
}
.cta-content p {
    color: var(--tg-white);
    margin-top: 8px;
    margin-bottom: 0;
}

.services-thumb-two {
    height: 260px;
}
.services-thumb-two img {
    height: 100%;
    object-fit: cover;
}

/* Blog thumbnails (blog index, category archive, homepage blog teaser —
   all share .blog-post-thumb-two): admin-uploaded featured images vary in
   natural aspect ratio, but style.css only sets a `min-height`, so a
   portrait or oddly-cropped upload stretches to fill it since there's no
   object-fit. Force a real 16:9 box and cover-crop instead. */
.blog-post-thumb-two img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: cover;
}

/* Service detail sidebar: with the growing services list (~13 entries) and
   several new content sections, the main column now runs much longer than
   the sidebar — stick the sidebar so it stays visible while scrolling
   instead of ending after the first screen. align-self overrides the
   parent .row's default stretch so the sticky element isn't forced to the
   (taller) main column's full height. */
.services-sidebar-sticky {
    position: sticky;
    top: 30px;
    align-self: flex-start;
}

/* Trust badge strip on service pages (trust_badges.php) — white card +
   orange icon circle, matching the hero slider's .hero-feature-pill so
   badges don't read as a bare row of unstyled icons. */
.trust-badges-area {
    background: var(--tg-lavender);
}
.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    height: 100%;
    padding: 24px 16px;
    background: var(--tg-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 20, 43, 0.06);
}
.trust-badge-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 122, 0, 0.1);
    color: var(--tg-primary-color);
    font-size: 26px;
}
.trust-badge-item .label {
    font-size: 15px;
    font-weight: 700;
    color: var(--tg-secondary-color);
}
.trust-badge-item .desc {
    font-size: 13px;
    color: var(--tg-paragraph-color);
}

/* .breadcrumb-bg (breadcrumb.php, used on every inner page: services,
   courses, OJS, about, contact, etc.) sits directly under the site header,
   which is `.transparent-header` — position:absolute, so it takes no space
   in normal flow and overlays whatever's below it instead of pushing it
   down. breadcrumb-bg kept the original theme's top padding (120px, tuned
   for a normal non-overlay header), so page titles like "Shared Hosting"
   render behind the menu bar. banner-bg-two (the Home hero, which sits
   under this same overlay header without issue) reserves 170px/150px of
   top padding to clear it — match that here instead of guessing. */
.breadcrumb-bg {
    padding-top: 170px;
}
@media (max-width: 991.98px) {
    .breadcrumb-bg {
        padding-top: 150px;
    }
}

/* Home hero slider — numbered slides matching the live WordPress site.
   Sits under the same transparent/absolute header as everything else, so
   it needs its own header clearance (see .breadcrumb-bg note above). */
.hero-slider-area {
    position: relative;
    background: var(--tg-lavender);
    padding: 190px 0 100px;
    overflow: hidden;
}
.hero-slider .swiper-slide {
    height: auto;
}
.hero-slide-number {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--tg-secondary-color);
    margin-bottom: 10px;
}
.hero-slide-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--tg-secondary-color);
    margin-bottom: 20px;
    /* Matches the live site's hero, which uses its own headline font
       distinct from other headings (admin-editable, see main.php). */
    font-family: var(--tg-hero-font-family, var(--tg-heading-font-family));
}
.hero-slide-title span {
    display: block;
    color: var(--tg-primary-color);
}
.hero-slide-content > p {
    font-size: 17px;
    color: var(--tg-paragraph-color);
    max-width: 480px;
    margin-bottom: 35px;
}
.hero-slide-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 45px;
}
.hero-feature-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--tg-white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(20, 20, 43, 0.06);
}
.hero-feature-pill .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 122, 0, 0.1);
    color: var(--tg-primary-color);
    font-size: 18px;
}
.hero-feature-pill .label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tg-secondary-color);
}
.hero-slider-nav {
    display: flex;
    gap: 15px;
}
.hero-slider-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--tg-primary-color);
    border-radius: 50%;
    background: transparent;
    color: var(--tg-primary-color);
    font-size: 16px;
    line-height: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.hero-slider-nav button:hover {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.hero-slider-prev i {
    display: inline-block;
    transform: rotate(180deg);
}

/* Right-side illustration stack (assets/img/hero-slider/, pulled from the
   live site — see the note in home/index.php). The main graphic is
   self-contained (no separate background blob); the 3 floating pieces
   already include their own card/shadow, so they're positioned only, no
   added background here. Positions approximate the live site's layout;
   `overflow: visible` lets them hang past the main image's edges. */
.hero-slide-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.hero-visual-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
}
.hero-visual-float {
    position: absolute;
    z-index: 2;
    height: auto;
}
.hero-visual-float-gem {
    top: -2%;
    left: 32%;
    width: 8%;
}
.hero-visual-float-lock {
    top: 14%;
    left: 0;
    width: 22%;
}
.hero-visual-float-check {
    top: 6%;
    right: 2%;
    width: 22%;
}

@media (max-width: 991.98px) {
    .hero-slider-area {
        padding: 160px 0 70px;
    }
    .hero-slide-title {
        font-size: 36px;
    }
    .hero-slide-visual {
        margin-top: 50px;
    }
    .hero-visual-main {
        max-width: 420px;
    }
}
@media (max-width: 575.98px) {
    .hero-slide-features {
        flex-direction: column;
    }
}

/* Header dropdown menus: the template's min-width (230px) is too narrow for
   longer service names ("Official Meta WhatsApp Messaging", "AI Automation
   Tools Development"), so they were wrapping onto two lines. Widen the
   dropdown and stop the labels from wrapping so each stays on one line. */
.navbar-wrap ul li .sub-menu {
    min-width: 300px;
}
.navbar-wrap ul li .sub-menu li a {
    white-space: nowrap;
}

/* Top-bar "Offers" slider — replaces the template's static address/email/
   social-icons row. Dark bar (same tone as the template's original top bar)
   with bold white text and orange links, so the solid-orange "Get a Quote"
   button still pops at the right edge. Shows one admin-managed offer at a
   time (Swiper, already loaded site-wide for the Home hero slider), sliding
   vertically, with a stacked up/down arrow pair at the start of the row. */
.header-style-two .heder-top-wrap {
    background: var(--tg-secondary-color);
}
.offers-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-left: 25px;
}
.offers-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.offers-slider-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.offers-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    overflow: hidden;
}
.offers-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.offers-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    border: none;
    background: transparent;
    color: #fff;
    opacity: .6;
    font-size: 9px;
    line-height: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.offers-slider-nav:hover {
    opacity: 1;
    color: var(--tg-primary-color);
}
.offers-slider-prev i {
    display: inline-block;
    transform: rotate(180deg);
}
.offer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.offer-pill a {
    color: var(--tg-primary-color);
    text-decoration: none;
}
.offer-pill a:hover {
    color: #fff;
}
.offer-pill__trigger {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--tg-primary-color);
    cursor: pointer;
}
.offer-pill__trigger:hover {
    color: #fff;
}

/* Offer details popup, opened from the header ticker (see custom.js) */
.offer-details-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}
.offer-details-modal .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    padding: 8px;
}
.offer-details-modal .offer-modal-image img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
}
.offer-details-modal .modal-body {
    padding: 30px;
}
.offer-details-modal .offer-modal-dates {
    display: inline-block;
    background: var(--tg-primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.offer-details-modal .offer-modal-title {
    margin-bottom: 12px;
}
.offer-details-modal .offer-modal-details {
    color: #666;
    margin-bottom: 20px;
}

/* Public /offers/ archive — cards reuse the theme's .services-item-two
   layout as-is; only the status badge and expired dimming are custom. */
.offer-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 12px;
}
.offer-card--expired .services-thumb-two img {
    filter: grayscale(60%);
    opacity: 0.75;
}

/* Offer detail page (/offers/{id}/) — .services-details-thumb has no
   position of its own elsewhere in the theme, so scope it here rather than
   changing the shared rule (which also backs the Services/Courses detail
   pages). */
.offer-details-thumb {
    position: relative;
}
/* .header-top-btn sits in the same flex row as the slider; without this it
   was allowed to shrink below its text's width, wrapping "Get a Quote" onto
   a second line that then overlapped itself (the template gives the anchor
   line-height:0, which only looks right on a single line). Let the slider
   (which has its own overflow:hidden) absorb all the shrinking instead. */
.offers-topbar .header-top-btn {
    flex-shrink: 0;
    /* Keep the button pinned to the right edge even when there are no active
       offers and it's the only child left in this space-between flex row
       (with a single item, space-between has nothing to push against, so
       without this it would collapse back to the left edge). */
    margin-left: auto;
}
.offers-topbar .header-top-btn a {
    white-space: nowrap;
}

/* On tablet/mobile the template hides the whole top bar (responsive.css,
   .header-style-two .heder-top-wrap { display: none } at <=991.98px) since
   it originally only held address/email/social links. Our top bar carries
   the admin-managed offer strip instead, which is worth keeping — re-show
   the bar but drop the "Get a Quote" button (it's redundant with the
   hamburger/offcanvas menu and site-wide CTAs) and shrink things to fit. */
@media (max-width: 991.98px) {
    .header-style-two .heder-top-wrap {
        display: block;
    }
    .offers-topbar {
        padding: 10px 15px;
    }
    .offers-topbar .header-top-btn {
        display: none;
    }
    .offer-pill {
        font-size: 12px;
    }
}
@media (max-width: 575.98px) {
    .offer-pill {
        font-size: 11px;
        gap: 6px;
    }
}

/*
 * Testimonials (home page, slick carousel, slidesToShow: 2): quotes vary in
 * length, so the two visible cards end up different heights by default.
 * Stretch each slide to the row's tallest and pin the avatar/name to the
 * bottom so short and long quotes still line up.
 */
.testimonial-active-two.slick-slider .slick-track {
    display: flex !important;
}
.testimonial-active-two .slick-slide {
    height: auto;
}
.testimonial-active-two .slick-slide > div {
    height: 100%;
}
.testimonial-active-two .col-lg-6 {
    height: 100%;
}
.testimonial-item-two {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.testimonial-content-two {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.testimonial-avatar {
    margin-top: auto;
}

/*
 * The theme sets a global `p { text-transform: capitalize }` (style.css),
 * meant for short marketing blurbs/teasers elsewhere on the site. Applied to
 * the actual blog post body — long-form prose from the admin's rich-text
 * editor — it turns every word into Title Case, which reads as written only
 * with normal sentence casing. Scoped to just the article body so the rest
 * of the site keeps its existing look.
 */
.blog-details-content p {
    text-transform: none;
}

/* Services icon cards (.services-item-seven, Services listing + Home
   "Featured Services") — the theme's base .btn always adds a 50px round
   ::before behind the label (meant for a spacious full-width CTA button)
   plus its own arrow via ::after. The compact "Read More" pill here
   (.services-content-seven .btn, 14px/24px padding) is too small for that
   circle, which overflowed past the pill's edge. The arrow itself already
   renders fine via ::after — just drop the oversized circle. */
.services-content-seven .btn::before {
    display: none;
}

/* Services icon cards — equal-height grid (the theme's default lets each
   card size to its own content, so a longer description makes its card
   taller than its neighbours), a soft shadow, and a rotating 4-colour tint
   (service-tint-0..3, assigned in services/index.php and home/index.php by
   index % 4) so the grid doesn't read as one flat block of white cards.
   Icon badge colour follows the tint per card; the "Read More" pill and
   its arrow stay the theme's standard orange throughout for a consistent
   call-to-action colour regardless of card colour. */
.services-item-seven {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(20, 20, 43, 0.08);
}
.services-item-seven:hover {
    box-shadow: 0 15px 40px rgba(20, 20, 43, 0.14);
}
.services-content-seven {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.services-content-seven .btn {
    background: var(--tg-white);
    margin-top: auto;
    align-self: flex-start;
}

.service-tint-0 {
    background: #FFF4E9;
}
.service-tint-0 .services-icon-seven {
    background: var(--tg-primary-color);
}
.service-tint-1 {
    background: #EAF2FF;
}
.service-tint-1 .services-icon-seven {
    background: #2F6FED;
}
.service-tint-2 {
    background: #EAF7EF;
}
.service-tint-2 .services-icon-seven {
    background: var(--tg-green);
}
.service-tint-3 {
    background: #F3EEFF;
}
.service-tint-3 .services-icon-seven {
    background: var(--tg-purple);
}

/* "Why We Are The Best" section (choose-area, home page) — the theme's
   photo overlay (.choose-bg::before) is a flat navy (#001641) with no
   connection to the site's actual brand color. Replace with a gradient
   from the site's dark secondary color into the primary orange, so it
   reads as on-brand. Kept the dark end where the white heading/paragraph
   sit (left side) rather than solid bright orange — white text on solid
   #FF7A00 falls below readable contrast. */
.choose-bg::before {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.88) 0%, rgba(255, 122, 0, 0.55) 100%);
}

/* Site-wide announcement popup (theme/partials/popup.php, Admin > Popups).
   Reuses .offer-details-modal's rounded/borderless modal-content shell for
   visual consistency with the existing offer-details popup, styled as its
   own class so the two don't collide. */
.site-popup-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}
.site-popup-modal .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    padding: 8px;
}
.site-popup-image img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
}
.site-popup-modal .modal-body {
    padding: 30px;
    text-align: center;
}
.site-popup-title {
    margin-bottom: 12px;
}
.site-popup-body {
    color: #666;
    margin-bottom: 20px;
}

/* Breadcrumb banner (theme/partials/breadcrumb.php, Admin > Settings >
   Breadcrumb Banner) — when an admin sets a flat background color instead
   of an image, skip .breadcrumb-bg's dark photo overlay (style.css) so the
   exact color they picked shows, rather than being darkened underneath it. */
.breadcrumb-bg.breadcrumb-flat-color::before {
    display: none;
}

/* Breadcrumb heading + trail link colors — admin-editable (Admin > Settings
   > Breadcrumb Banner, and per-item on Pages/Services/Blog Posts). Read via
   custom properties set inline on the <section> (breadcrumb.php); the
   var(..., fallback) second argument keeps the original theme colors byte-
   identical when nothing's configured, since the property is then unset. */
.breadcrumb-content .title {
    color: var(--breadcrumb-title-color, var(--tg-white));
}
.breadcrumb-content .breadcrumb-item {
    color: var(--breadcrumb-link-color, var(--tg-primary-color));
}
.breadcrumb-content .breadcrumb-item a {
    color: var(--breadcrumb-link-color, #9FA9BE);
}
.breadcrumb-content .breadcrumb-item a:hover {
    color: var(--breadcrumb-link-color, var(--tg-primary-color));
}

/* Floating WhatsApp widget (theme/partials/whatsapp_widget.php). Stacked
   above .scroll-top (style.css owns bottom-right at bottom:30px, 35px tall)
   so both sit on the right without overlapping. z-index is well above the
   theme's own fixed full-screen overlays (#preloader, .menu-backdrop,
   .offcanvas-overly, .search-popup-wrap all use z-index:999) so a lingering
   one can never sit on top of the widget and silently swallow clicks. */
.wa-widget {
    position: fixed;
    right: 25px;
    bottom: 40px;
    z-index: 100000;
}
.wa-widget-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #25D366;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0px 10px 25px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease;
}
.wa-widget-bubble:hover {
    transform: scale(1.06);
}

/* Panel chrome — matches the site's card/box language (font, radius, soft
   shadow — see .services-widget-form / .pricing-box-two in style.css)
   rather than raw browser defaults. */
.wa-widget-panel {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--tg-white, #fff);
    border-radius: 12px;
    box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.25);
    overflow: hidden;
    font-family: var(--tg-body-font-family, 'Plus Jakarta Sans', sans-serif);
}
.wa-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #25D366;
    color: #fff;
    padding: 14px 18px;
    font-family: var(--tg-heading-font-family, 'Urbanist', sans-serif);
    font-weight: 700;
    font-size: 16px;
}
.wa-widget-header i {
    margin-right: 6px;
}
.wa-widget-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}
.wa-widget-close:hover {
    opacity: 1;
}
.wa-widget-body {
    padding: 18px;
    max-height: 70vh;
    overflow-y: auto;
}
.wa-widget-field {
    margin-bottom: 14px;
}
.wa-widget-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--tg-secondary-color, #1A1A1A);
}
.wa-widget-field input,
.wa-widget-field select,
.wa-widget-field textarea {
    width: 100%;
    border: 1px solid #E0E6F2;
    border-radius: 5px;
    background: var(--tg-white, #fff);
    padding: 12px 14px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    color: var(--tg-paragraph-color, #4A4A4A);
}
.wa-widget-field input,
.wa-widget-field select {
    height: 48px;
}
.wa-widget-field textarea {
    min-height: 90px;
    resize: vertical;
}
.wa-widget-field input:focus,
.wa-widget-field select:focus,
.wa-widget-field textarea:focus {
    outline: none;
    border-color: #25D366;
}
.wa-widget-field input::placeholder,
.wa-widget-field textarea::placeholder {
    color: var(--tg-gray-four, #667594);
}
.wa-widget-error,
.wa-widget-error-text {
    color: #d9534f;
    font-size: 13px;
    margin-bottom: 12px;
}
.wa-widget-submit {
    width: 100%;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 13px 20px;
    height: 48px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.wa-widget-submit:hover {
    background: #1ebe5a;
}
.wa-widget-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
@media (max-width: 480px) {
    .wa-widget {
        right: 15px;
        bottom: 40px;
    }
    .wa-widget-panel {
        right: -15px;
        width: calc(100vw - 30px);
    }
}

/* Order Now — "You're ordering: ..." summary shown when the form was
   reached via a plan's Buy Now link (theme/forms/order_now.php). */
.order-plan-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    color: #333;
}