/* Direction: this file uses LOGICAL properties (margin-inline-end, padding-inline-start, inset-inline-start, text-align: start) rather than left/right, so the widget lays out correctly on the Arabic storefront, which renders under . Until DGLAB-4191 every one of these was a physical left/right and the widget mirrored nothing: the step counters sat on top of their own text, the condition cards stayed left-aligned, and the primary button drifted to the wrong end of the footer. Keep it that way -- prefer a logical property over adding an [dir="rtl"] override, so there is one rule per thing rather than two that can disagree. */ /* Sharaf DG Trade-in — PDP section (V2 design), 3-step modal, and cart/checkout summary. Palette: text #1f2430, primary #0079c1, credit green #1a8f4c, radius 10-12px. Inherits the theme font (Poppins). */ .sdg-tradein { color: #1f2430; margin: 14px 0; } /* --- PDP sidebar box --------------------------------------------------- */ .sdg-tradein__box { border: 1px solid #e6e8ec; background: #f7f8fa; border-radius: 14px; padding: 12px 14px; } .sdg-tradein__box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #ecedf1; } .sdg-tradein__box-icon { display: inline-flex; color: #0079c1; } .sdg-tradein__box-title { font-size: .82rem; font-weight: 700; letter-spacing: .04em; flex: 1; } .sdg-tradein__info { display: inline-flex; background: none; border: 0; padding: 0; color: #7a8698; cursor: pointer; } .sdg-tradein__info:hover { color: #0079c1; } .sdg-tradein__intro { font-size: .85rem; color: #4a5462; margin: 0 0 12px; line-height: 1.5; } .sdg-tradein__add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: #eef6fc; color: #0079c1; border: 1px solid #0079c1; border-radius: 10px; padding: 13px; cursor: pointer; font: inherit; font-weight: 700; } .sdg-tradein__add:hover { background: #e3f0fa; } .sdg-tradein__helper { font-size: .76rem; color: #8a94a3; text-align: center; margin: 10px 0 0; line-height: 1.4; } /* Applied credit (PDP) */ .sdg-tradein__applied { display: flex; flex-direction: column; gap: 10px; } /* The display rule above would otherwise beat the UA [hidden] rule. */ .sdg-tradein__applied[hidden], .sdg-tradein__promo[hidden] { display: none; } .sdg-tradein__credit { display: flex; gap: 12px; border: 1px solid #bfe6cd; background: #eef8f1; border-radius: 10px; padding: 12px; } .sdg-tradein__credit-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #1a8f4c; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .sdg-tradein__credit-body { flex: 1; min-width: 0; } .sdg-tradein__credit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sdg-tradein__credit-top strong { font-weight: 700; } .sdg-tradein__credit-amt { color: #1a8f4c; font-weight: 700; white-space: nowrap; } .sdg-tradein__credit-dev { font-size: .82rem; color: #55606f; margin-top: 2px; } /* Where a floating credit will actually land (DGLAB-4226). Quieter than the device line above it: it qualifies the card rather than competing with it. */ .sdg-tradein__credit-note { font-size: .76rem; color: #6b7684; margin-top: 4px; line-height: 1.35; } .sdg-tradein__credit-actions { display: flex; gap: 14px; margin-top: 8px; } .sdg-tradein__credit-actions button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; } .sdg-tradein__edit { color: #0079c1; } .sdg-tradein__remove-credit { color: #d0342c; } /* Brief highlight when the box switches to the applied state, so the change reads as a confirmation and not as a box that was always sitting there. */ .sdg-tradein__box { transition: box-shadow .3s ease; } .sdg-tradein__box.is-flash { box-shadow: 0 0 0 3px rgba(26, 143, 76, .35); border-color: #bfe6cd; } /* --- Modal ------------------------------------------------------------- */ /* Pinned to the VISUAL viewport, not the layout one. `position: fixed` on a phone means the whole screen, keyboard included, so a centred dialog with the soft keyboard up is centred behind it: on the Android app the shopper tapped the device field and then had to scroll to find the text they were typing and the results under it. widget.js mirrors the visual viewport into the two properties below while the modal is open; the fallbacks are the old full-viewport behaviour, for a browser without the API. */ .sdg-ti-modal { position: fixed; inset-inline: 0; top: var(--sdg-ti-vv-top, 0px); height: var(--sdg-ti-vv-height, 100%); z-index: 100000; display: flex; align-items: center; justify-content: center; } /* Background scroll lock while the modal is open. Pinning the body (rather than `overflow: hidden`, which iOS ignores for touch) is what stops the page behind the dialog from scrolling; widget.js holds the offset in `top` and restores the scroll position on close. */ body.sdg-ti-noscroll { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; } .sdg-ti-modal[hidden] { display: none; } /* `fixed`, not `absolute`: the shell above is only as tall as the visible strip once the keyboard is up, and the dim has to cover the screen. */ .sdg-ti-modal__overlay { position: fixed; inset: 0; background: rgba(15, 22, 33, .55); } .sdg-ti-modal__dialog { position: relative; background: #fff; color: #1f2430; width: 560px; max-width: calc(100vw - 32px); /* 92vh as before, except when the shell is the shrunken visual viewport -- then the dialog has to fit THAT, or it grows back under the keyboard. */ max-height: min(92vh, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); } .sdg-ti-modal__header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px 12px; } .sdg-ti-modal__title { font-weight: 700; font-size: 1.15rem; } .sdg-ti-modal__step { font-size: .8rem; color: #7a8698; margin-top: 3px; } .sdg-ti-modal__close { background: #f2f4f7; border: 0; width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #55606f; } .sdg-ti-progress { height: 3px; background: #eef1f5; } .sdg-ti-progress__bar { display: block; height: 3px; width: 33%; background: #0079c1; transition: width .25s ease; } .sdg-ti-modal__body { padding: 20px 22px; overflow-y: auto; } .sdg-ti-modal__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid #eef1f5; } /* The whole bar is hidden on step 1, which has no forward button since choosing a device is what advances (DGLAB-4410) -- and the point of hiding it is the ~63px, padding and border included, that the device list gets back in compact mode. The `display: flex` above would otherwise beat the UA [hidden] rule and the bar would stay exactly where it is; same trap as .sdg-tradein__applied. */ .sdg-ti-modal__footer[hidden] { display: none; } /* --- Compact (keyboard up) -------------------------------------------- With the soft keyboard open the strip left over is roughly a third of the phone, and the dialog as designed does not fit in it: the header and the close button were clipped off the top, and the results list was down to two rows. widget.js adds this class while the strip is short. The dialog takes the whole of it (so the header, and the ×, are always where the shopper can reach them), the padding and the pill go, and the list takes whatever is left over instead of a fixed 260px. Dropped again as soon as the keyboard closes, so the rounded, centred dialog is what a full screen still gets. */ .sdg-ti-modal.is-compact { align-items: stretch; } .sdg-ti-modal.is-compact .sdg-ti-modal__dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .sdg-ti-modal.is-compact .sdg-ti-modal__header { padding: 10px 16px 8px; } .sdg-ti-modal.is-compact .sdg-ti-modal__title { font-size: 1rem; } .sdg-ti-modal.is-compact .sdg-ti-modal__body { padding: 12px 16px; display: flex; flex-direction: column; min-height: 0; } .sdg-ti-modal.is-compact .sdg-ti-modal__footer { padding: 10px 16px; } .sdg-ti-modal.is-compact .sdg-ti-pill { display: none; } .sdg-ti-modal.is-compact .sdg-ti-step__q { font-size: .92rem; margin-bottom: 8px; } /* `:not([hidden])` because this beats the [hidden] rule on specificity, and step 1 has to stay gone once the shopper is on step 2. `min-height: 0` on both, or the list refuses to shrink below its content and scrolls the body instead of itself. */ .sdg-ti-modal.is-compact .sdg-ti-step[data-step="1"]:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sdg-ti-modal.is-compact .sdg-ti-results { flex: 1 1 auto; max-height: none; min-height: 0; } .sdg-ti-pill { display: block; background: #eaf3fb; color: #0a6bb0; border-radius: 999px; padding: 9px 14px; font-size: .82rem; font-weight: 600; margin-bottom: 16px; } .sdg-ti-pill::before { content: "\2726"; margin-inline-end: 6px; } .sdg-ti-step__q { font-size: 1rem; font-weight: 600; margin: 0 0 12px; } /* Step 2's question carries a second job since choosing a device started advancing the wizard (DGLAB-4410): it is the ONLY place the shopper reads back what they picked, so it is a step up in size and the device name inside it is emphasised. The capacity is the character they may have mis-tapped. */ .sdg-ti-cond-q { font-size: 1.08rem; } .sdg-ti-cond-q__dev { font-weight: 700; color: #0a2540; } /* Headings are focused programmatically on arriving at a step, so they must NOT draw a focus ring: an outline on a heading reads as "this is a control" and invites a click that does nothing. The search field is the one focus target that IS interactive, and it keeps its own ring below. Sighted keyboard users lose nothing -- the next Tab lands on a real control with its own indicator. */ h4.sdg-ti-step__focus:focus, div.sdg-ti-step__focus:focus { outline: none; } /* Step 1: search */ .sdg-ti-search { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #cdd5e0; border-radius: 10px; font: inherit; } /* Focus stays in this field for the whole of step 1 -- the arrow keys move a cursor through the list below rather than moving focus -- so the field's own ring is the only thing telling a keyboard shopper where they are. Stated here rather than left to the UA default because both themes carry `outline: none` rules, and this one field cannot afford to lose it. */ .sdg-ti-search:focus-visible { outline: 2px solid #0079c1; outline-offset: 1px; } /* position: relative makes this the offsetParent of its rows, which is what widget.js measures against to keep the cursored option in view. */ /* The vh half of the cap only bites with the keyboard up, where 260px of options would push the field itself off the top of the scrolled body. */ .sdg-ti-results { position: relative; list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid #eef1f5; border-radius: 10px; max-height: min(260px, 38vh); overflow-y: auto; } .sdg-ti-results li { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid #f2f4f7; } .sdg-ti-results li:last-child { border-bottom: 0; } .sdg-ti-results li:hover { background: #f3f7ff; } /* The chosen device. */ .sdg-ti-results li.is-active { background: #eaf3ff; font-weight: 600; } /* The keyboard cursor, which is a separate thing from the choice above and is standing in for a focus ring, so it needs the weight of one -- a tint alone was too faint. Outline rather than a border or inset box-shadow: it does not grow the row, and it has no side that could end up on the wrong edge on the Arabic store. */ .sdg-ti-results li.is-cursor { outline: 2px solid #0079c1; outline-offset: -2px; } /* Step 2: condition cards (2-column grid, radio) */ .sdg-ti-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* The cards are buttons in a stretch-height grid row, and a button centres its content vertically: the short "Average" card sat level with the middle of the tall "Below Average" one beside it. A top-anchored column keeps every radio and title on the row's first line however long the criteria list runs. */ .sdg-ti-cond { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: start; background: #fff; border: 1.5px solid #e2e7ee; border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: #1f2430; } .sdg-ti-cond:hover { border-color: #b9cdec; } .sdg-ti-cond.is-active { border-color: #0079c1; box-shadow: 0 0 0 1px #0079c1 inset; } .sdg-ti-cond__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .sdg-ti-cond__radio { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border: 2px solid #c2cbd6; border-radius: 50%; } .sdg-ti-cond.is-active .sdg-ti-cond__radio { border-color: #0079c1; background: radial-gradient(#0079c1 42%, #fff 46%); } .sdg-ti-cond__name { font-weight: 700; } /* Same global `ul { list-style: none }` reset as the sheet list — the 18px of padding here was always reserving room for markers that never drew. */ .sdg-ti-cond ul { margin: 0; padding-inline-start: 18px; list-style: disc; } .sdg-ti-cond li { font-size: .78rem; color: #55606f; margin: 3px 0; } @media (max-width: 520px) { .sdg-ti-conditions { grid-template-columns: 1fr; } } /* Step 3: estimate. Stacked on phones, side by side from 480px up. The value is nowrap at 1.9rem, so in a row it takes what it needs and the left column keeps whatever is left: on a 375px screen that was ~120px, which broke the label over three lines and the device name over four. Column order puts the label, the device and then the value on their own full-width lines instead. */ .sdg-ti-estimate { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #eef8f1; border: 1px solid #bfe6cd; border-radius: 12px; padding: 16px 18px; } .sdg-ti-estimate__left { min-width: 0; } .sdg-ti-estimate__label { font-size: .72rem; letter-spacing: .06em; color: #1a8f4c; font-weight: 700; } .sdg-ti-estimate__device { font-weight: 600; margin-top: 4px; } .sdg-ti-estimate__value { font-size: 1.9rem; font-weight: 800; color: #1a8f4c; white-space: nowrap; line-height: 1.2; } @media (min-width: 480px) { .sdg-ti-estimate { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; } } .sdg-ti-next { margin-top: 16px; } .sdg-ti-next__title { font-weight: 700; margin-bottom: 10px; } .sdg-ti-next ol { margin: 0; padding: 0; list-style: none; counter-reset: sdgti; } .sdg-ti-next li { position: relative; padding-inline-start: 30px; font-size: .84rem; color: #4a5462; margin: 10px 0; counter-increment: sdgti; } .sdg-ti-next li::before { content: counter(sdgti); position: absolute; inset-inline-start: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #eaf3fb; color: #0a6bb0; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .sdg-ti-hold { font-size: .82rem; color: #7a8698; margin: 14px 0 0; } .sdg-ti-msg { margin: 10px 0 0; color: #55606f; min-height: 1.1em; font-size: .85rem; } /* Footer buttons */ .sdg-ti-back { background: #fff; border: 1px solid #cdd5e0; color: #1f2430; border-radius: 10px; padding: 11px 20px; cursor: pointer; font: inherit; font-weight: 600; } .sdg-ti-primary { margin-inline-start: auto; background: #0079c1; color: #fff; border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer; font: inherit; font-weight: 700; } .sdg-ti-primary:disabled { background: #a9c9dd; cursor: not-allowed; } /* --- "How Trade-In Works" sheet ---------------------------------------- */ /* One piece of markup, two presentations: a bottom sheet on phones (the design) and a centred dialog from 640px up, where a panel pinned to the bottom edge of a wide viewport reads as a mistake. */ .sdg-ti-sheet { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; } .sdg-ti-sheet[hidden] { display: none; } .sdg-ti-sheet__overlay { position: absolute; inset: 0; background: rgba(15, 22, 33, .55); } .sdg-ti-sheet__panel { position: relative; width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1f2430; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); animation: sdg-ti-sheet-up .22s ease-out; } @keyframes sdg-ti-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* The drag-to-close area: handle + heading. Confined to those so a downward swipe over the bullet list still scrolls it. `touch-action: none` is required or the browser scrolls instead of giving us the pointer events. */ .sdg-ti-sheet__grab { flex: 0 0 auto; touch-action: none; cursor: grab; } .sdg-ti-sheet__grab:active { cursor: grabbing; } .sdg-ti-sheet__handle { display: block; width: 44px; height: 4px; border-radius: 999px; background: #d7dbe2; margin: 10px auto 0; } .sdg-ti-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 22px 4px; } .sdg-ti-sheet__title { font-size: 1.25rem; font-weight: 700; margin: 0; } .sdg-ti-sheet__close { flex: 0 0 auto; background: #f2f4f7; border: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; color: #55606f; touch-action: manipulation; } .sdg-ti-sheet__body { padding: 0 22px 24px; overflow-y: auto; } .sdg-ti-sheet__lead { font-size: 1rem; color: #1f2430; margin: 8px 0 18px; line-height: 1.5; } /* list-style is explicit: the theme resets `ul { list-style: none }` globally, which silently swallowed the markers here. */ .sdg-ti-sheet__list { margin: 0; padding-inline-start: 20px; list-style: disc; } .sdg-ti-sheet__list li { font-size: .92rem; color: #4a5462; line-height: 1.55; margin: 0 0 14px; } .sdg-ti-sheet__list li:last-child { margin-bottom: 0; } @media (min-width: 640px) { .sdg-ti-sheet { align-items: center; } .sdg-ti-sheet__panel { border-radius: 16px; max-height: 84vh; animation: none; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); } .sdg-ti-sheet__handle { display: none; } } @media (prefers-reduced-motion: reduce) { .sdg-ti-sheet__panel { animation: none; } } /* --- Discounted price line in the buy box (price reflection) ----------- */ /* One figure, never split. The currency symbol is a separate inline element from the digits (the platform draws it with a webfont on `span.currency_symbol`, or as an for SA/OM), so without this the buy box -- which is narrow, and narrower still in the mobile theme -- wrapped between the glyph and its own amount. `margin-inline-start` rather than a space in the markup, so the gap survives RTL and is not a break opportunity. */ .sdg-ti-money { white-space: nowrap; } .sdg-ti-money__amount { margin-inline-start: .25em; } /* Flex with `align-items: baseline` is what lines the label, the discounted price and the struck-through original up on one baseline despite their different font sizes; `flex-wrap` then breaks between the three parts rather than inside one of them. The row gap is 0 because a wrapped line here should sit directly under the first, as one price block. */ .sdg-ti-priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 6px; font-size: .9rem; color: #1a8f4c; font-weight: 600; } .sdg-ti-priceline__now { font-size: 1.15rem; font-weight: 800; color: #1a8f4c; } .sdg-ti-priceline__was { color: #8a94a3; font-weight: 500; text-decoration: line-through; } /* The global rule nudges the glyph up (`position: relative; top: -.1em`), tuned for body copy rather than for these bold figures, next to which it sits visibly high. `span.currency_symbol`, NOT `.currency_symbol`: only AE renders it as a span, while SA and OM use an whose em sizing and offset come from that same theme rule. Same reasoning as the cart card below. */ .sdg-ti-priceline span.currency_symbol { position: static; top: auto; vertical-align: baseline; } /* --- Cart / checkout line-level trade-in ------------------------------- Rendered inside the item-name context, so every part is an inline element promoted to block layout here. */ /* The margin is symmetric on purpose. With only a `margin-top` the card had a gap above it and none below, so it sat flush against the "Sold by …" and price lines that follow it in the item -- the card read as belonging to them rather than as its own block. */ .sdg-tradein-item { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; padding: 14px 16px; border: 1px solid #cbe9d6; background: #f2fbf5; border-radius: 12px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #1f2430; } .sdg-tradein-item__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #1a8f4c; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .sdg-tradein-item__body { flex: 1; min-width: 0; } /* Flex replaces the float the amount used to sit on, so the parent no longer needs `overflow: hidden` to contain it. */ .sdg-tradein-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sdg-tradein-item__label { font-weight: 700; color: #1f2430; } .sdg-tradein-item__credit { color: #1a8f4c; font-weight: 700; white-space: nowrap; } /* The minus sign and the figure are one number and must stay on one line. `white-space: nowrap` above is not enough on the order-received page: the theme sets .order-detail-body .item-details .woocommerce-Price-amount{display:block} and a block-level child starts a new line whatever the white-space value, so the sign was left stranded on the line above its own amount. `!important` because that theme selector carries three classes and would otherwise win on specificity regardless of stylesheet order -- this is a money figure that has already been reported wrong once. */ .sdg-tradein-item .sdg-tradein-item__credit .woocommerce-Price-amount, .sdg-tradein-item .sdg-tradein-item__credit bdi { display: inline !important; white-space: nowrap; } /* The global `.currency_symbol` rule nudges the glyph up (position:relative; top:-.1em), tuned for the theme's body copy rather than for this bold figure, next to which it sits visibly high. Baseline alignment is what lines the symbol up with the digits here. `span.currency_symbol` deliberately, NOT `.currency_symbol`: AE renders the symbol as a webfont character in a span, but SA and OM render it as an whose em sizing and offset come from that same theme rule -- resetting those would move a glyph that is not the one being reported. */ .sdg-tradein-item .sdg-tradein-item__credit span.currency_symbol { position: static; top: auto; vertical-align: baseline; } /* Breathing room between the minus and the currency glyph. `margin-inline-end` so the gap stays on the side facing the figure when the page is Arabic. Small deliberately: this is one number, and too much space would read as a dash beside an amount rather than as a negative one. */ .sdg-tradein-item .sdg-tradein-item__sign { margin-inline-end: 2px; } .sdg-tradein-item__note { display: block; color: #8a8f98; font-size: 13px; margin-top: 2px; } .sdg-tradein-item__dev { display: block; color: #3a414d; font-size: 13px; margin-top: 6px; } /* "Remove trade-in" must read as a destructive action, so it is red rather than the theme's link colour. `!important` and the :hover/:focus pair are both needed: this rule already set the same red and the link still rendered dark, so something in the theme's cart CSS outranks a plain `a.class` here, and the theme also repaints every anchor on hover (`a:hover { color: $sdg-dark }`). */ a.sdg-tradein-item__remove { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: #b3261e !important; text-decoration: none; } a.sdg-tradein-item__remove:hover, a.sdg-tradein-item__remove:focus { color: #8c1d17 !important; text-decoration: underline; } /* --- "Added to cart" drawer -------------------------------------------- */ .sdg-ti-drawer:empty { display: none; } .sdg-ti-drawer { margin: 12px 0; } /* Trade-in card */ .sdg-ti-dcard { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #bfe6cd; background: #eef8f1; border-radius: 12px; padding: 14px; } .sdg-ti-dcard__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #1a8f4c; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .sdg-ti-dcard__body { flex: 1; min-width: 0; } .sdg-ti-dcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sdg-ti-dcard__title { font-weight: 700; } .sdg-ti-dcard__amt { color: #1a8f4c; font-weight: 700; white-space: nowrap; } .sdg-ti-dcard__note { font-size: .8rem; color: #8a94a3; margin: 4px 0 0; line-height: 1.45; } .sdg-ti-dcard__dev { font-size: .86rem; color: #1f2430; margin-top: 8px; } .sdg-ti-dcard__actions { display: flex; gap: 16px; margin-top: 10px; } .sdg-ti-dcard__actions button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem; } /* Remove is the drawer's only action -- an attached trade-in cannot be edited. */ .sdg-ti-dcard__remove { color: #d0342c; } /* The drawer's "offer a trade-in" state -- shown when an eligible line has no credit, and in place of the card once one is removed. It carries the PDP box's own classes so it is the same component in a different place; all that is restated here is the text colour, which on the PDP comes from the `.sdg-tradein` wrapper that does not exist inside the drawer. */ .sdg-ti-dpromo { color: #1f2430; } /* Totals summary */ .sdg-ti-dsum { margin-top: 12px; padding: 14px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; } .sdg-ti-dsum__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .92rem; } .sdg-ti-dsum__row.is-credit { color: #1a8f4c; font-weight: 600; } .sdg-ti-dsum__row.is-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid #e6e8ec; font-size: 1.05rem; font-weight: 800; } /* Our summary supersedes the theme's single "Cart Total" row. !important is required because that row carries Bootstrap's .d-flex utility. */ /* Class-only, not `#addedToCartOffcanvas ...`: the flag is set on whichever drawer this theme has, and the mobile one (.offcanvas-wrp.added-to-cart) has no id at all — that id in the selector meant the theme's Cart Total row was never suppressed on mobile. Both drawers use `.cart-bottom .cart-total`. !important is required because that row carries Bootstrap's .d-flex. */ .sdg-ti-has-tradein .cart-bottom .cart-total { display: none !important; } /* --- Cart / checkout summary rows -------------------------------------- */ /* Borders sit on the cells: browsers ignore borders on
in these tables. */ /* The theme's order-total row while a trade-in is showing: hidden, but still in the DOM. Checkout.com parses the amount to authorise out of it (`$('.order-total .amount').last()`), so this row can be invisible but must never be absent. `display: none` keeps jQuery's .text() working. */ tr.order-total.sdg-ti-total-hidden { display: none !important; } /* Spacing follows the design: a dashed rule opening the trade-in block and a solid one closing it before the total. Typography does NOT vary by row -- every label in the panel is set the same, and so is every amount, so the rules and the credit's green are what separate the rows, not size jumps (Subtotal at the theme's 14px/400 next to a 26px/800 total read as two different tables). `.sdg-tradein-paytoday` is the final total row: the class predates the label, which now reads "Total" (the theme's own total row is relabelled on the cart and hidden on checkout, so there is only ever one). */ :root { --sdg-ti-sum-label-size: 15px; --sdg-ti-sum-label-weight: 600; --sdg-ti-sum-amount-size: 15px; --sdg-ti-sum-amount-weight: 600; } .sdg-tradein-credit th, .sdg-tradein-credit td { border-top: 1px dashed #dfe2e6; padding-top: 18px; padding-bottom: 4px; vertical-align: top; } .sdg-tradein-credit th { font-size: var(--sdg-ti-sum-label-size); font-weight: var(--sdg-ti-sum-label-weight); color: #1f2430; } .sdg-tradein-credit td { font-size: var(--sdg-ti-sum-amount-size); font-weight: var(--sdg-ti-sum-amount-weight); color: #1a8f4c; white-space: nowrap; text-align: end; } .sdg-tradein-credit__note { display: block; margin-top: 4px; color: #8a8f98; font-size: 13px; font-weight: 400; line-height: 1.45; white-space: normal; } .sdg-tradein-paytoday th, .sdg-tradein-paytoday td { border-top: 1px solid #eceef1; padding-top: 20px; padding-bottom: 4px; vertical-align: baseline; } .sdg-tradein-paytoday th { font-size: var(--sdg-ti-sum-label-size); font-weight: var(--sdg-ti-sum-label-weight); color: #1f2430; } .sdg-tradein-paytoday td { font-size: var(--sdg-ti-sum-amount-size); font-weight: var(--sdg-ti-sum-amount-weight); color: #1f2430; white-space: nowrap; text-align: end; } /* The theme's own rows in the same panel -- Subtotal, Shipping Fees, discounts, fees, taxes -- carry their own sizes and weights, so matching our two rows to each other is only half the job. The cart is the loud one: its subtotal figure is a `
` set to 21px/800 by `_added_to_cart.scss`, next to a 14px label. Scoped to `body.sdg-ti-summary`, added by SDG_Tradein_Cart::body_class() on the one request that renders the rows, so a panel with no trade-in keeps the theme's typography untouched. This was a `:has(.sdg-tradein-paytoday)` on the table; the class is deterministic where `:has()` is not, and mixing the two in one selector list would have taken the whole rule down with `:has()` in any browser that does not parse it. Every wrapper the figures sit inside is named explicitly rather than styling `td *`: the amount cells also hold a spinner whose size is its own business, and `` would keep the UA's bold through an inherited weight. */ .sdg-ti-summary .checkout-table tfoot tr > th, .sdg-ti-summary .cart_totals table tfoot tr > td:first-child, .sdg-ti-summary .cart_totals table tfoot tr > td:first-child strong { font-size: var(--sdg-ti-sum-label-size); font-weight: var(--sdg-ti-sum-label-weight); } .sdg-ti-summary .checkout-table tfoot tr > td, .sdg-ti-summary .checkout-table tfoot tr > td .woocommerce-Price-amount, .sdg-ti-summary .cart_totals table tfoot tr > td:last-child, .sdg-ti-summary .cart_totals table tfoot tr > td:last-child .total_cart--value, .sdg-ti-summary .cart_totals table tfoot tr > td:last-child .woocommerce-Price-amount { font-size: var(--sdg-ti-sum-amount-size); font-weight: var(--sdg-ti-sum-amount-weight); } /* Full-width rows carry prose or a control, not a label/amount pair: the note under the total, the coupon field, the Easy Payment Plans band. Leave them with whatever the theme gives them. */ .sdg-ti-summary .checkout-table tfoot tr > td[colspan], .sdg-ti-summary .cart_totals table tfoot tr > td[colspan] { font-size: inherit; font-weight: 400; } /* Bottom padding matters as much as top: these rows now sit ABOVE the theme's Easy Payment Plans band, which has no margin of its own, so without it the note and that band touch. */ .sdg-tradein-note td { padding: 14px 0 20px; } .sdg-tradein-note small { display: block; color: #8a8f98; font-size: 12px; line-height: 1.5; } /* The mobile cart page has no summary panel of its own -- its only total is the `position: fixed` bar above "Proceed to Checkout" -- so dgpnext-mobile's cart-totals.php renders one when, and only when, these rows exist, reusing the checkout summary's `.order_cart--summary` / `.checkout-table` classes so the panel is styled by the theme and its rows by the block above. The theme leaves 60px under `.cart_totals` to clear that bar, which is less than the bar is tall (its own padding alone is 32px); the rest is here, so the note this panel ends with is not sitting underneath it. */ .sdg-ti-cart-summary { margin-bottom: 24px; } /* --- My Account: orders-list marker ------------------------------------- */ /* One marker per row, carrying a step and never an amount (DGLAB-3821). The wrapper is a flex child of the row header, so it sits with the date, number and status rather than breaking the row. Named `omark`, not `pill`: `.sdg-ti-pill` is already taken by the modal's step indicator at the top of this file, which carries a decorative ✦ and a 16px bottom margin. Reusing the name inherited both. No left/right anywhere — the marker is symmetrical, so RTL needs no overrides (DGLAB-3843). */ .sdg-ti-omark-wrap { display: flex; align-items: center; } .sdg-ti-omark { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent; } .sdg-ti-omark--ok { background: #eef8f1; border-color: #bfe6cd; color: #14713d; } .sdg-ti-omark--wait { background: #fdf5e3; border-color: #ecd9a6; color: #8a6d00; } .sdg-ti-omark--bad { background: #fdefee; border-color: #f2c6c3; color: #a52a23; } .sdg-ti-omark--idle { background: #f2f4f7; border-color: #e0e4ea; color: #4a5160; } /* The fallback position (under the row's items, not in its header) needs its own breathing room — in the header the row's own gap supplies it. */ .sdg-ti-omark--loose { margin: 10px 0 2px; } /* --- My Account: trade-in rows inside the order totals ------------------ */ /* These rows are injected into WooCommerce's own totals list, so both themes render them through their existing table markup — ``, which is where these class names come from. Styling stays deliberately light: the row should read as one of the order's totals, not as a panel that wandered in. */ /* The key lands on the LABEL cell only, so the adjacent sibling picks up the amount — without it the colour would stop halfway across the row. The cell is a `td`, not the `th` WooCommerce's own template uses: the v2 thank-you page builds its own table and writes `` (order-detail-header.php). A bare `.sdg_tradein_credit` is specificity 0,1,0, which any theme rule of the form `.wrapper td { color: … }` outranks at 0,1,1 — so the credit rendered in the theme's default text colour on that page while cart and checkout showed it green (DGLAB-4237). Qualifying with `td`/`th` and the row lifts these to 0,1,2 so they win on merit rather than on load order, which is not guaranteed between a theme stylesheet and a plugin one. No !important: these should still lose to anything the theme states more deliberately. */ tr td.sdg_tradein_credit, tr td.sdg_tradein_credit + td, tr th.sdg_tradein_credit, tr th.sdg_tradein_credit + td, tr td.sdg_tradein_refunded, tr td.sdg_tradein_refunded + td, tr th.sdg_tradein_refunded, tr th.sdg_tradein_refunded + td { color: #1a8f4c; } tr td.sdg_tradein_held, tr td.sdg_tradein_held + td, tr th.sdg_tradein_held, tr th.sdg_tradein_held + td { color: #8a6d00; } /* The net (DGLAB-4234). Deliberately NOT green: it is the amount payable, not a saving, and colouring it like the credit above would read as a second discount. Weight alone marks it as the figure that matters, which is how the cart and checkout summaries distinguish their total too. Qualified the same way as the colour rules above, and for the same reason. */ tr td.sdg_tradein_net, tr td.sdg_tradein_net + td, tr th.sdg_tradein_net, tr th.sdg_tradein_net + td { font-weight: 700; } /* The same rows in the `.multiple-shipments-order-details` summary — the branch the order pages take while the order has NOT been pushed to DGOMS. That summary is shipping-eta's partials/order-summary.php, not the theme's v2/order-detail-header.php, and two of its rules beat the ones above, so the credit that reads green once the order reaches OMS read grey before it: 1. `.multiple-shipments-order-details .order-summary table td.text-left` (0,3,2) outranks `tr td.sdg_tradein_credit` (0,1,2) and greyed the LABEL cell to #666. 2. That partial writes the amount cell as a bare `` — no `text-right` — and `.box span` (0,1,1) hits wc_price()'s own `` DIRECTLY. A rule ON an element always beats a colour inherited from its cell, whatever the specificity, so `+ td` coloured the `−` sign and the amount beside it stayed #333. That is the half that made the row read as two colours. So both halves are restated at the theme's own class count, and the amount is coloured on the price span as well as on its cell. Selecting the span is what fixes (2); adding `.order-summary table` is what fixes (1). Kept as a separate block rather than folded into the rules above: those apply everywhere and are deliberately weak, and this scope is the one place that needs to outrank another stylesheet by name. Still no !important, for the reason given above. */ .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_credit, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_credit + td, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_credit + td span, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_refunded, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_refunded + td, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_refunded + td span { color: #1a8f4c; } .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_held, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_held + td, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_held + td span { color: #8a6d00; } .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_net, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_net + td, .multiple-shipments-order-details .order-summary table tr td.sdg_tradein_net + td span { font-weight: 700; } /* --- My Account: order details trade-in block -------------------------- */ /* Palette matches the drawer card above so the customer sees one feature across the journey, not two. Logical properties (margin-inline-start, border-inline-start) rather than left/right, so the Arabic RTL pass (DGLAB-3843) needs no mirrored overrides here. */ .sdg-ti-acct { margin: 28px 0 0; } .sdg-ti-acct__h { font-size: 1.05rem; font-weight: 700; margin: 24px 0 10px; } .sdg-ti-acct__h:first-child { margin-top: 0; } .sdg-ti-acct__box { border: 1px solid #e6e8ec; border-radius: 12px; padding: 16px; background: #fff; } .sdg-ti-acct__hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sdg-ti-acct__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #8a94a3; } .sdg-ti-acct__dot--ok { background: #1a8f4c; } .sdg-ti-acct__dot--wait { background: #d98c00; } .sdg-ti-acct__dot--bad { background: #d0342c; } .sdg-ti-acct__dot--idle { background: #8a94a3; } .sdg-ti-acct__title { font-weight: 700; } .sdg-ti-acct__when { margin-inline-start: auto; color: #8a94a3; font-size: .85rem; white-space: nowrap; } .sdg-ti-acct__next { margin: 8px 0 0; color: #4a5160; font-size: .9rem; line-height: 1.55; } .sdg-ti-acct__hist { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #eceef1; } .sdg-ti-acct__hist li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .85rem; color: #8a94a3; } .sdg-ti-acct__dev { border: 1px solid #e6e8ec; border-radius: 12px; padding: 14px; margin-bottom: 10px; } .sdg-ti-acct__dev:last-child { margin-bottom: 0; } .sdg-ti-acct__dev-name { font-weight: 600; } .sdg-ti-acct__dev-grade { color: #8a94a3; font-weight: 400; } .sdg-ti-acct__dev-move { margin-top: 6px; font-size: .92rem; color: #1f2430; } .sdg-ti-acct__dev-delta { margin-top: 4px; font-size: .88rem; font-weight: 600; } .sdg-ti-acct__dev-delta.is-ok { color: #1a8f4c; } .sdg-ti-acct__dev-delta.is-charge { color: #d0342c; } .sdg-ti-acct__dev-reason { margin-top: 10px; padding-inline-start: 10px; border-inline-start: 3px solid #eceef1; font-size: .88rem; color: #4a5160; line-height: 1.55; } .sdg-ti-acct__dev-support { margin-top: 6px; font-size: .88rem; } /* --- Order confirmation: "What's Next?" --------------------------------- */ /* The green here is the same family as .sdg-ti-omark--ok above, so the badge reads as the same "trade-in is fine" signal the orders list uses. Logical properties throughout, as in the account block, so the Arabic RTL pass needs no mirrored overrides. */ .sdg-ti-wn { margin: 24px 0 0; padding: 18px 20px; border: 1px solid #dcece1; border-radius: 12px; background: #f6fbf7; } .sdg-ti-wn__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #1a8f4c; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Drawn as content rather than shipped as an asset: one glyph, and it inherits the badge's colour so there is no second thing to keep in step. */ .sdg-ti-wn__badge-i::before { content: "\21C4"; font-size: .85rem; line-height: 1; } .sdg-ti-wn__h { margin: 10px 0 0; font-size: 1.15rem; font-weight: 700; color: #1f2430; } .sdg-ti-wn__lead { margin: 6px 0 0; color: #4a5160; font-size: .9rem; line-height: 1.55; } .sdg-ti-wn__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px 32px; counter-reset: sdg-ti-wn; } /* Two columns only where there is room for them. The mock is a 2x2, but the count is admin-editable, so the grid takes however many steps it is given. */ @media (min-width: 720px) { .sdg-ti-wn__steps { grid-template-columns: 1fr 1fr; } } .sdg-ti-wn__step { counter-increment: sdg-ti-wn; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-content: start; margin: 0; } /* The number is the list's own counter, so adding a step numbers itself and removing one leaves no gap. Spans both rows so it sits beside the heading and the description together rather than only the heading. */ .sdg-ti-wn__step::before { content: counter(sdg-ti-wn); grid-row: 1 / span 2; align-self: start; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #bfe6cd; background: #fff; color: #14713d; font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .sdg-ti-wn__st { grid-column: 2; font-size: .95rem; font-weight: 700; color: #1f2430; line-height: 1.4; } .sdg-ti-wn__sd { grid-column: 2; margin-top: 3px; color: #6b7280; font-size: .86rem; line-height: 1.55; } /* NOT a flex row, though it looks like one: the icon and one line of prose. Every contiguous run of text in a flex container becomes its own anonymous flex item, and this sentence has the amount wrapped in the middle of it, so flex made three columns of "A hold of" / the figure / "is placed on your card..." -- each wrapping inside its own narrow column, which on a phone read as three ragged stacks rather than a sentence. The icon is taken out of flow instead and the text indented past it, so the prose stays one normal run of text whatever is wrapped inside it -- including in an admin-configured box, where the markup around the {amount} token is not ours to predict. */ .sdg-ti-wn__hold { position: relative; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid #dcece1; padding-inline-start: 24px; color: #4a5160; font-size: .82rem; line-height: 1.55; } /* `inset-inline-start`, so the icon stays on the side the text starts from when the page is Arabic. `top` matches the paragraph's own padding, which puts the glyph on the first line of text rather than on the border above it. */ .sdg-ti-wn__hold-i { position: absolute; inset-inline-start: 0; top: 12px; } .sdg-ti-wn__hold-i::before { content: "\24D8"; font-size: .95rem; line-height: 1.35; color: #8a94a3; } .sdg-ti-wn__amt { font-weight: 700; color: #1f2430; white-space: nowrap; } /* wc_price() wraps the figure in its own spans; keep them from inheriting a link colour or being broken across lines mid-amount. */ .sdg-ti-wn__amt .woocommerce-Price-amount { white-space: nowrap; } /* Payment methods that cannot carry a trade-in (DGLAB-4042). Greyed rather than hidden: the shopper needs to see the method they were looking for, and the reason it is unavailable, or its absence reads as a fault. */ .payment_method_blocked-by-tradein > label, .payment_method_blocked-by-tradein > label * { color: #8a94a3; cursor: not-allowed; } .payment_method_blocked-by-tradein input[type="radio"] { cursor: not-allowed; } /* `margin-inline-start`, not `margin-left`: the 28px lines the reason up under the label rather than under the radio, and a physical left margin puts that indent on the wrong side of an Arabic page -- where it also stops separating the note from anything. Same convention as the account block below. */ .sdg-tradein-gateway-note { display: block; margin: 2px 0 0; margin-inline-start: 28px; font-size: .88rem; color: #8a94a3; line-height: 1.5; } /* The gift-card stand-in sits in a row the theme lays out with flex: .gift-card-block .payment_method_gift_card{display:flex;align-items:center} which makes the label and this note two items on ONE line -- `display: block` is ignored on a flex item, so the reason ran straight on from "Redeem Now" with no space at all, and the indent above could not separate them either. A two-column grid replaces that row: the radio in the first column, the label and the reason stacked in the second. Wrapping the flex row was the earlier fix and it broke on a phone -- the label is two lines wide there, so it wrapped below the radio, which then sat alone on the first line, and the note's 28px indent was measuring from the row edge rather than from the label. The grid holds all three in place at any width, and column order follows the writing direction, so Arabic needs no separate rule. Scoped to the blocked variant on purpose: the real gift-card row, which is rendered by sdg-gift-card and is a single line by design, must keep its layout. The `li` is only there to out-specify the theme's own two-class rule whichever stylesheet loads last. */ .gift-card-block li.payment_method_blocked-by-tradein { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; } .gift-card-block li.payment_method_blocked-by-tradein > input[type="radio"] { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; margin: 3px 0 0; } .gift-card-block li.payment_method_blocked-by-tradein > label { grid-column: 2; grid-row: 1; margin: 0; } /* The grid column already provides the indent the note carries elsewhere. */ .gift-card-block li.payment_method_blocked-by-tradein .sdg-tradein-gateway-note { grid-column: 2; grid-row: 2; margin-inline-start: 0; }