/* RCS Sales Promotions: built-in look (works on OpenCart's default theme; Journal colours come in through the
   --rcs-sp-* variables the extension's settings print on the page). */
:root {
	--rcs-sp-accent: #1f4e8c;
	--rcs-sp-accent-text: #ffffff;
	--rcs-sp-deal: #1d7a35;
	--rcs-sp-deal-bg: #e6f4e9;
	--rcs-sp-card-bg: #e4e6e9;
	--rcs-sp-card-border: #3d4652;
	--rcs-sp-box-border: #c3c8ce;
	--rcs-sp-box-border-width: 1px;
	--rcs-sp-text: #2b2f33;
	--rcs-sp-muted: #5c646d;
	--rcs-sp-radius: 10px;
}

.rcs-sp-small { font-size: 12px; color: var(--rcs-sp-muted); }
.rcs-sp-link { cursor: pointer; }

/* Steps strip: all steps on one line, wrapping only when there is no room */
.rcs-sp-steps { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rcs-sp-deal); border: 1px solid var(--rcs-sp-deal); border-radius: 6px; overflow: hidden; margin: 8px 0; }
.rcs-sp-steps > span { flex: 1 1 auto; text-align: center; padding: 3px 6px; background: var(--rcs-sp-deal-bg); color: var(--rcs-sp-deal); font-size: 12px; white-space: nowrap; }
.rcs-sp-steps b { font-weight: 600; }
.rcs-sp-steps-inline { display: inline-flex; margin: 0 8px; vertical-align: middle; }

/* Promotions page */
.rcs-sp-intro { margin-bottom: 14px; }
.rcs-sp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rcs-sp-filter { border: 1px solid var(--rcs-sp-accent); background: transparent; color: var(--rcs-sp-accent); border-radius: 6px; padding: 4px 12px; }
.rcs-sp-filter.active { background: var(--rcs-sp-accent); color: var(--rcs-sp-accent-text); }
.rcs-sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.rcs-sp-card { display: flex; flex-direction: column; background: var(--rcs-sp-card-bg); border: var(--rcs-sp-card-border-width, 2px) solid var(--rcs-sp-card-border); border-radius: var(--rcs-sp-card-radius, var(--rcs-sp-radius)); overflow: hidden; text-align: center; }
.rcs-sp-card[hidden] { display: none; }
/* With Journal (card.twig adds post-grid / post-thumb / post-stats / btn-read-more): Journal's Post Grid style draws the
   bar and the deal button; these rules keep what is the card's own: grid layout, border, background, the bar as a strip
   under the picture (Journal lays it over the picture) and the parts' natural heights. */
.rcs-sp-cards.post-grid:not(.swiper-wrapper):not(.auto-grid) { display: grid; }
.rcs-sp-cards.post-grid .rcs-sp-card.post-thumb { background: var(--rcs-sp-card-bg); border: var(--rcs-sp-card-border-width, 2px) solid var(--rcs-sp-card-border); border-radius: var(--rcs-sp-card-radius, var(--rcs-sp-radius)); overflow: hidden; }
.rcs-sp-cards.post-grid .rcs-sp-card.post-thumb > div { flex-basis: auto; }
.rcs-sp-cards.post-grid .rcs-sp-card.post-thumb > .rcs-sp-card-body { flex: 1 1 auto; }
.rcs-sp-cards.post-grid .rcs-sp-card.post-thumb .rcs-sp-card-bar.post-stats { position: static; transform: none; margin: 0; }
.rcs-sp-card-image { position: relative; background: #fff; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.rcs-sp-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rcs-sp-badge { position: absolute; top: 10px; left: 10px; background: var(--rcs-sp-deal); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; line-height: 1.2; }
.rcs-sp-card-bar { display: flex; justify-content: center; gap: 16px; background: var(--rcs-sp-accent); color: var(--rcs-sp-accent-text); font-size: 12px; font-weight: 600; padding: 6px 8px; text-transform: uppercase; }
.rcs-sp-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.rcs-sp-card-title { font-size: 18px; margin: 4px 0 8px; line-height: 1.25; }
.rcs-sp-card-title a { color: var(--rcs-sp-accent); text-decoration: none; }
.rcs-sp-card-text { font-size: 13px; color: var(--rcs-sp-text); }
.rcs-sp-card-note { font-size: 12px; color: var(--rcs-sp-muted); }
.rcs-sp-card-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* Buttons: with Journal (its <html> carries a skin-N class) they take Journal's default button style untouched;
   on other themes they get a plain light button. */
html:not([class*="skin-"]) .rcs-sp-button { background: #f8f9fa; border: 1px solid #ced4da; color: #212529; border-radius: 8px; }
html:not([class*="skin-"]) .rcs-sp-button:hover { background: #e9ecef; }

/* Promotion page */
/* Promotion page: title + text left, picture + deal details right; phones: title, picture, details, text */
.rcs-sp-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 25%); grid-template-areas: "title aside" "text aside"; gap: 0 28px; align-items: start; }
.rcs-sp-info-title { grid-area: title; }
.rcs-sp-info-aside { grid-area: aside; background: var(--rcs-sp-card-bg); border: var(--rcs-sp-box-border-width) solid var(--rcs-sp-box-border); border-radius: var(--rcs-sp-radius); padding: 12px; }
.rcs-sp-info-text { grid-area: text; min-width: 0; }
.rcs-sp-info-text img { max-width: 100%; height: auto; }
.rcs-sp-info-image { display: block; width: 100%; height: auto; border-radius: var(--rcs-sp-radius); margin-bottom: 12px; }
.rcs-sp-info-aside .rcs-sp-details { margin-top: 0; }
.rcs-sp-info-aside .rcs-sp-more { display: inline-flex; gap: 6px; }
@media (max-width: 767px) {
	.rcs-sp-info { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "aside" "text"; }
}
.rcs-sp-details { margin: 12px 0; }
.rcs-sp-headline { font-size: 18px; font-weight: 600; color: var(--rcs-sp-deal); }
.rcs-sp-step-table { border-collapse: collapse; margin: 8px 0; }
.rcs-sp-step-table td { padding: 4px 12px; border-bottom: 1px solid #d9dde1; }
.rcs-sp-step-table td + td { color: var(--rcs-sp-deal); }
.rcs-sp-excluded ul { margin: 4px 0 0; padding-left: 18px; }

/* Product box */
.rcs-sp-boxes { margin: 12px 0; display: grid; gap: 10px; }
.rcs-sp-boxes[data-rcs-sp-place="top"] { margin-top: 0; }  /* level with the product picture */
.rcs-sp-box { border: var(--rcs-sp-box-border-width) solid var(--rcs-sp-box-border); border-radius: var(--rcs-sp-radius); padding: 12px 14px; background: #fff; color: var(--rcs-sp-text); }
.rcs-sp-box-title { font-weight: 600; margin-bottom: 8px; }
.rcs-sp-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.rcs-sp-rung { background: var(--rcs-sp-deal-bg); color: var(--rcs-sp-deal); border-radius: 8px; padding: 8px; text-align: center; }
.rcs-sp-rung-qty { display: block; font-size: 12px; font-weight: 700; }
.rcs-sp-rung-gives { display: block; font-size: 18px; font-weight: 700; }
.rcs-sp-box-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--rcs-sp-muted); }
.rcs-sp-box .rcs-sp-oneclick { margin-top: 8px; }
.rcs-sp-box-banner { border-color: var(--rcs-sp-accent); padding: 8px 12px; }
.rcs-sp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rcs-sp-banner-title { font-weight: 600; }
.rcs-sp-banner-text { color: var(--rcs-sp-muted); font-size: 13px; }
.rcs-sp-banner .rcs-sp-link { margin-left: auto; font-size: 13px; }
.rcs-sp-price-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rcs-sp-price-table thead td { text-align: left; font-weight: 500; }
.rcs-sp-price-table td { padding: 5px 10px; }
.rcs-sp-price-table tbody td { border-top: 1px solid #e3e7eb; }
.rcs-sp-price-table td:last-child { text-align: right; }
.rcs-sp-price-table tr.rcs-sp-current td { background: var(--rcs-sp-deal-bg); color: var(--rcs-sp-deal); font-weight: 600; }

/* Category strip */
.rcs-sp-strips { margin: 10px 0 16px; display: grid; gap: 8px; }
.rcs-sp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--rcs-sp-deal); background: var(--rcs-sp-deal-bg); border-radius: var(--rcs-sp-radius); padding: 8px 12px; }
.rcs-sp-strip-title { font-weight: 600; color: var(--rcs-sp-deal); }
.rcs-sp-strip .rcs-sp-link { margin-left: auto; }

/* Cart messages */
.rcs-sp-messages { display: grid; gap: 6px; margin: 0 0 14px; }
.rcs-sp-message { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.rcs-sp-message-applied { background: var(--rcs-sp-deal-bg); color: var(--rcs-sp-deal); border: 1px solid var(--rcs-sp-deal); }
.rcs-sp-message-applied a { color: inherit; font-weight: 600; }
.rcs-sp-message-nudge, .rcs-sp-message-gift { background: #fff7e0; color: #6b4b00; border: 1px solid #e0b84a; }
.rcs-sp-mini { font-size: 12px; color: var(--rcs-sp-deal); padding: 4px 10px; }
.rcs-sp-was { text-decoration: line-through; color: var(--rcs-sp-muted); font-weight: normal; }
.rcs-sp-now { color: var(--rcs-sp-deal); font-weight: 600; }

/* Pop-up */
.rcs-sp-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: none; align-items: center; justify-content: center; z-index: 100000; padding: 16px; }
.rcs-sp-modal.open { display: flex; }
.rcs-sp-modal-box { position: relative; background: var(--rcs-sp-pop-bg, var(--rcs-sp-card-bg)); color: var(--rcs-sp-text); border-radius: var(--rcs-sp-radius); max-width: 540px; width: 100%; max-height: 88vh; overflow: auto; padding: 0; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.rcs-sp-modal-close { position: absolute; top: 10px; right: 12px; z-index: 1; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--rcs-sp-pop-head-text, #e4e6e9); opacity: .85; }
.rcs-sp-modal-close:hover { opacity: 1; }
.rcs-sp-pop-head { display: flex; align-items: center; gap: 12px; background: var(--rcs-sp-pop-head, var(--rcs-sp-accent)); color: var(--rcs-sp-pop-head-text, #e4e6e9); padding: 14px 48px 14px 18px; }
.rcs-sp-pop-head h3 { margin: 0; font-size: 19px; line-height: 1.25; color: inherit; }
.rcs-sp-pop-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: calc(var(--rcs-sp-radius) * .6); background: #fff; flex: 0 0 56px; }
.rcs-sp-pop-body { padding: 16px 18px 6px; display: grid; gap: 12px; }
.rcs-sp-pop-headline { margin: 0; font-size: 22px; font-weight: 700; color: var(--rcs-sp-deal); }
.rcs-sp-pop-steps { margin: 0; }
.rcs-sp-pop-row { font-size: 14px; }
.rcs-sp-pop-line { color: var(--rcs-sp-muted); font-style: italic; }
.rcs-sp-pop-label { font-weight: 700; color: var(--rcs-sp-text); }
.rcs-sp-pop-excluded { font-size: 12px; color: var(--rcs-sp-muted); }
.rcs-sp-pop-excluded .rcs-sp-pop-label { color: var(--rcs-sp-muted); font-weight: 600; }
.rcs-sp-pop-excluded ul { margin: 2px 0 0; padding-left: 16px; }
.rcs-sp-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rcs-sp-pop-tags span { background: var(--rcs-sp-deal-bg); color: var(--rcs-sp-deal); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.rcs-sp-pop-foot { border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 10px; padding: 12px 18px 14px; }

/* "Shop the deal": one compact line above the products */
.rcs-sp-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0 0 5px; padding: 8px 12px; font-size: 13px; background: var(--rcs-sp-card-bg); border: var(--rcs-sp-box-border-width) solid var(--rcs-sp-box-border); border-radius: var(--rcs-sp-radius); }
.rcs-sp-summary-left, .rcs-sp-summary-right { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.rcs-sp-summary-right { align-items: flex-end; margin-left: auto; }
.rcs-sp-summary-left { flex: 1 1 260px; }
.rcs-sp-summary .rcs-sp-steps { margin: 0; }

/* Last line of a box: the "can't be combined" note on the left, "More Details" in the bottom right corner */
.rcs-sp-last { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin-top: 4px; }
.rcs-sp-more { margin-left: auto; white-space: nowrap; }

/* Phones: the "Get the Deal!" summary box stacks and centres */
@media (max-width: 767px) {
	.rcs-sp-summary { flex-direction: column; align-items: center; text-align: center; }
	.rcs-sp-summary-left, .rcs-sp-summary-right { align-items: center; margin-left: 0; flex: 0 1 auto; }
	.rcs-sp-summary .rcs-sp-more { margin-left: 0; }
	/* Product page boxes centre too */
	.rcs-sp-box { text-align: center; }
	.rcs-sp-box .rcs-sp-box-foot { justify-content: center; }
	.rcs-sp-box .rcs-sp-last { flex-direction: column; align-items: center; }
	.rcs-sp-box .rcs-sp-more { margin-left: 0; }
	.rcs-sp-box .rcs-sp-price-table { margin-left: auto; margin-right: auto; }
	/* Pop-up footer stacks and centres */
	.rcs-sp-pop-foot { flex-direction: column; align-items: center; text-align: center; }
	.rcs-sp-pop-body { text-align: center; }
	.rcs-sp-pop-tags { justify-content: center; }
	.rcs-sp-pop-excluded ul { list-style: none; padding-left: 0; }
	.rcs-sp-pop-foot .rcs-sp-more { margin-left: 0; }
}