/* Oregon Coast Guide — package selection cards (Add a Listing / Switch Package)
* ---------------------------------------------------------------------------
* Restyles MyListing's package cards (templates/add-listing/choose-package.php)
* to match the approved pricing design: a plain "free trial" card beside a
* gold-accented "Community Partner" card with a MOST POPULAR ribbon.
*
* Everything is scoped to .c27-packages, so it only affects the package step —
* no other page is touched.
*
* Two things worth knowing before editing:
* 1. The theme prints the product's short description inside
.
* If that description contains block HTML (
,
) the browser is forced to
* close the paragraph early, and those elements end up as LOOSE SIBLINGS inside
* the card. We therefore style `.pricing-item > h3` and `.pricing-item > ul`
* directly, so the card looks right whether the features come from that stray
* markup or (properly) from Listing Type > Packages > Description.
* 2. Card order is: .plan-name, .plan-image, .plan-price, .plan-desc,
* [stray h3/ul], .plan-features, .select-package.
* Added 2026-08.
*/
.c27-packages{
--ocg-teal:#17606b;
--ocg-teal-dark:#124e57;
--ocg-gold:#c08a2e;
--ocg-gold-btn:#d9a441;
--ocg-gold-btn-dark:#c8942f;
--ocg-ribbon:#e4602f;
--ocg-cream:#fdf8ef;
--ocg-ink:#20303a;
--ocg-ink-soft:#4d5f6b;
--ocg-rule:#e6ded1;
--ocg-rule-featured:#ecdcbc; /* divider inside the gold card */
--ocg-card-bg:#ffffff; /* plain card background */
--ocg-on-teal:#ffffff; /* text sitting on teal / on the orange ribbon */
--ocg-on-gold:#3d2c07; /* text sitting on the gold button */
--ocg-shadow:0 2px 14px rgba(32,48,58,.06);
--ocg-shadow-featured:0 4px 20px rgba(192,138,46,.16);
/* Font families come from Elementor > Site Settings > Typography, never from a
* stack hardcoded here. `secondary` is the kit's serif (currently Roboto Slab);
* change it in Site Settings and these cards follow automatically.
* The trailing values are only a fallback if the kit variable is ever absent. */
--ocg-serif:var(--e-global-typography-secondary-font-family, Georgia, serif);
}
/* ── section ─────────────────────────────────────────────────────────────── */
.c27-packages .section-title h2{
font-family:var(--ocg-serif);
font-size:31px;
line-height:1.25;
font-weight:700;
color:var(--ocg-ink);
letter-spacing:-.01em;
margin-bottom:6px;
}
.c27-packages .row-eq-height{ align-items:stretch; }
/* ── the card ────────────────────────────────────────────────────────────── */
.c27-packages .pricing-item{
position:relative;
display:flex;
flex-direction:column;
height:100%;
background:var(--ocg-card-bg);
border:1px solid var(--ocg-rule);
border-radius:14px;
padding:30px 28px 26px;
box-shadow:var(--ocg-shadow);
overflow:hidden;
transition:box-shadow .18s ease, transform .18s ease;
}
/* Hover: the theme does NOT use :hover for this. Its JS adds a class `active` on
* mouseover, and `.pricing-item.active .plan-name` repaints the heading with the
* theme's blue --accent — that was the flicker on hover. Both the JS `active`
* class and the `c27-picked` (selected) class are neutralised below, so hovering
* changes nothing and selecting keeps each card's own colour. */
.c27-packages .pricing-item:hover{
box-shadow:var(--ocg-shadow);
transform:none;
border-color:var(--ocg-rule);
}
.c27-packages .pricing-item.featured:hover{
box-shadow:var(--ocg-shadow-featured);
border-color:var(--ocg-gold-btn) !important;
}
/* the paid plan */
.c27-packages .pricing-item.featured{
background:var(--ocg-cream);
border:2px solid var(--ocg-gold-btn);
padding-top:58px; /* room for the ribbon */
box-shadow:var(--ocg-shadow-featured);
/* NOTE: superseded by the "Ben's overrides" block at the end of this file,
* which floats the ribbon above the card as a rounded pill and therefore sets
* overflow:visible. Left here only as the base value. */
overflow:hidden;
}
/* ── MOST POPULAR ribbon (theme prints only a flash icon here) ───────────── */
.c27-packages .featured-plan-badge{
/* The theme draws this badge as a CSS triangle made of BORDERS:
* width:0; height:0; border-bottom:40px solid transparent;
* border-left:40px solid var(--accent);
* Those borders must be reset, or the blue triangle survives and the
* transparent bottom border pushes our label out of the box (clipped text). */
border:0 !important;
box-sizing:border-box;
position:absolute;
top:0; left:0; right:0; /* inside the gold border */
width:auto !important;
height:36px !important;
padding:0;
margin:0;
background:var(--ocg-ribbon);
border-radius:0; /* the card's overflow:hidden rounds it */
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
.c27-packages .featured-plan-badge [class^="icon-"],
.c27-packages .featured-plan-badge [class*=" icon-"]{ display:none; }
.c27-packages .featured-plan-badge::after{
content:"MOST POPULAR";
position:static;
color:var(--ocg-on-teal);
font-size:12px;
font-weight:800;
letter-spacing:.14em;
}
/* ── plan name ───────────────────────────────────────────────────────────── */
.c27-packages .pricing-item .plan-name{
font-family:var(--ocg-serif);
font-size:17px;
font-weight:700;
line-height:1.3;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--ocg-teal);
text-align:center;
margin:0 0 10px;
}
.c27-packages .pricing-item.featured .plan-name{ color:var(--ocg-gold); }
/* Plan image. The approved design has no image in the card, and the products
* currently carry large generated badge graphics that add ~90px of dead height.
* Hidden here; to bring it back, change `display:none` to `display:block`
* (or clear the "pricing plan image" field on the product instead). */
.c27-packages .pricing-item .plan-image{
display:none;
max-width:74px;
height:auto;
margin:0 auto 14px;
}
/* ── price ───────────────────────────────────────────────────────────────── */
.c27-packages .pricing-item .plan-price{
font-family:var(--ocg-serif);
font-size:42px;
line-height:1.1;
font-weight:700;
color:var(--ocg-ink) !important; /* theme paints this with its primary blue */
text-align:center;
margin:0 0 2px;
}
/* `vertical-align:super` raises by a full step, which on a 42px price throws the
* symbol way above the digits. Nudge it instead. */
.c27-packages .pricing-item .plan-price .woocommerce-Price-currencySymbol{
font-size:.5em;
vertical-align:baseline;
position:relative;
top:-.62em;
margin-right:1px;
font-weight:600;
}
.c27-packages .pricing-item .plan-price del{ opacity:.45; font-size:.55em; margin-right:6px; }
.c27-packages .pricing-item .plan-price ins{ text-decoration:none; }
/* short description sits under the price as a quiet sub-line */
.c27-packages .pricing-item .plan-desc{
text-align:center;
color:var(--ocg-ink-soft);
font-size:14.5px;
margin:0 0 18px;
}
.c27-packages .pricing-item .plan-desc:empty,
.c27-packages .pricing-item > p:empty{ display:none; }
/* divider above the feature list */
.c27-packages .pricing-item .plan-features,
.c27-packages .pricing-item > ul{
border-top:1px solid var(--ocg-rule);
padding-top:18px;
margin-top:2px;
}
.c27-packages .pricing-item.featured .plan-features,
.c27-packages .pricing-item.featured > ul{ border-top-color:var(--ocg-rule-featured); }
/* ── feature lists ───────────────────────────────────────────────────────
* Covers BOTH the correct source (.plan-features li, from Listing Type >
* Packages > Description) and the stray
hoisted out of .plan-desc. */
.c27-packages .pricing-item .plan-features ul,
.c27-packages .pricing-item > ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.c27-packages .pricing-item .plan-features li,
.c27-packages .pricing-item > ul li{
position:relative;
list-style:none;
padding:0 0 0 28px;
margin:0 0 11px;
font-size:15px;
line-height:1.5;
color:var(--ocg-ink);
border:0;
}
.c27-packages .pricing-item .plan-features li::marker,
.c27-packages .pricing-item > ul li::marker{ content:""; }
.c27-packages .pricing-item .plan-features li::before,
.c27-packages .pricing-item > ul li::before{
content:"";
position:absolute;
left:0; top:.34em;
width:17px; height:17px;
border-radius:50%;
/* NOTE: the tick is drawn inside a data: URI, and a data URI cannot read CSS
* variables — the `stroke='white'` below is therefore hardcoded on purpose.
* If --ocg-on-teal ever stops being white, change it here too. */
background:var(--ocg-teal) url("data:image/svg+xml;utf8,") center/11px 11px no-repeat;
}
.c27-packages .pricing-item.featured .plan-features li::before,
.c27-packages .pricing-item.featured > ul li::before{ background-color:var(--ocg-gold-btn); }
/* the stray
that breaks out of .plan-desc — make it a quiet label */
.c27-packages .pricing-item > h3{
font-family:inherit;
font-size:11.5px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ocg-ink-soft);
text-align:left;
margin:20px 0 -4px;
padding-top:18px;
border-top:1px solid var(--ocg-rule);
}
.c27-packages .pricing-item > h3 + ul{ border-top:0; padding-top:14px; }
/* ── button, pinned to the bottom so both cards line up ─────────────────── */
.c27-packages .pricing-item .select-package{
margin-top:auto;
padding-top:22px;
}
.c27-packages .pricing-item .select-plan.buttons,
.c27-packages .pricing-item .select-plan{
display:flex;
align-items:center;
justify-content:center;
width:100%;
background:var(--ocg-teal);
color:var(--ocg-on-teal);
border:0;
border-radius:7px;
padding:14px 20px;
font-size:15px;
font-weight:700;
letter-spacing:.01em;
text-decoration:none;
transition:background .16s ease;
}
.c27-packages .pricing-item .select-plan:hover{ background:var(--ocg-teal-dark); color:var(--ocg-on-teal); }
.c27-packages .pricing-item.featured .select-plan{ background:var(--ocg-gold-btn); color:var(--ocg-on-gold); }
.c27-packages .pricing-item.featured .select-plan:hover{ background:var(--ocg-gold-btn-dark); color:var(--ocg-on-gold); }
.c27-packages .pricing-item .select-plan i{ margin-left:8px; font-size:17px; }
/* "You already own this package" toggle */
.c27-packages .pricing-item .use-package-toggle{
display:block; text-align:center; font-size:14px;
color:var(--ocg-teal); font-weight:600; margin-bottom:10px; cursor:pointer;
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:991px){
.c27-packages .pricing-item{ margin-bottom:26px; padding:30px 24px 26px; }
.c27-packages .pricing-item.featured{ padding-top:48px; }
.c27-packages .section-title h2{ font-size:26px; }
}
/* ── hover / selected states ─────────────────────────────────────────────────
* `active` = added by the theme's JS while the mouse is over a card
* `c27-picked` = added when a package is actually chosen
* Left unstyled, both repaint things with the theme's blue accent. */
.c27-packages .pricing-item.active .plan-name,
.c27-packages .pricing-item.c27-picked .plan-name{ color:var(--ocg-teal); }
.c27-packages .pricing-item.featured.active .plan-name,
.c27-packages .pricing-item.featured.c27-picked .plan-name{ color:var(--ocg-gold); }
/* selected card keeps its own colour rather than turning blue */
.c27-packages .c27-pick-package.c27-picked{ border:1px solid var(--ocg-teal) !important; }
.c27-packages .pricing-item.featured.c27-picked{ border:2px solid var(--ocg-gold-btn) !important; }
/* nothing moves or flickers on hover */
.c27-packages .pricing-item,
.c27-packages .pricing-item.active{ transition:none; }
/* ══════════════════════════════════════════════════════════════════════════
* Ben's overrides — added verbatim 2026-08-20
* Floats the MOST POPULAR ribbon above the card as a rounded pill, evens up the
* padding on both cards, tightens the plan name, and blackens the price.
* These come last on purpose: they are meant to win over the base rules above.
* ══════════════════════════════════════════════════════════════════════════ */
.featured-plan-badge {
max-width: 90%;
margin: 0 auto !important;
top: -16px !important;
border-radius: 9px !important;
}
.pricing-item.c27-pick-package.cts-pricing-item.featured {
overflow: visible;
}
h2.plan-name {
padding: 5px 30px !important;
}
.pricing-item.c27-pick-package.cts-pricing-item.featured {
padding-top: 40px;
}
.pricing-item.c27-pick-package.cts-pricing-item {
padding-top: 40px;
}
/* Ben's original was:
* span.woocommerce-Price-amount.amount { color:#000; }
* Changed for two reasons, both verified:
* 1. It never took effect. The theme's `.pricing-item .plan-price > span` (in
* package-selection-widget.css) sets color:var(--accent) at the SAME specificity
* (0,2,1), and its stylesheet loads later, so the theme won the tie.
* 2. Unscoped, it would have blackened every WooCommerce price on the site — cart,
* checkout, product pages — because this stylesheet loads site-wide.
* Scoping to .c27-packages both fixes the specificity and contains the blast radius. */
.c27-packages .pricing-item .plan-price > span,
.c27-packages .pricing-item .plan-price span.woocommerce-Price-amount.amount {
color: #000;
}
h2.plan-name {
margin-bottom: 0px !important;
}