.ddr-ship{max-width:620px;margin:0 auto;font-size:16px;line-height:1.5;color:#1c1c1c}
.ddr-ship *{box-sizing:border-box}
.ddr-load{text-align:center;padding:48px 0;color:#555}
.ddr-spinner{width:28px;height:28px;margin:0 auto 12px;border:3px solid #ddd;border-top-color:#ee2300;border-radius:50%;animation:ddrspin .8s linear infinite}
@keyframes ddrspin{to{transform:rotate(360deg)}}

.ddr-step{border:1px solid #e2e2e2;border-radius:10px;padding:22px;margin:0 0 18px;background:#fff}
.ddr-ship .ddr-step h2{
  margin:0 0 4px !important;
  font-size:clamp(19px,3.4vw,25px) !important;
  line-height:1.25 !important;font-weight:700 !important;
  text-transform:none !important;letter-spacing:normal !important}
.ddr-ship .ddr-card h3{font-size:13px !important;margin:0 0 8px !important;line-height:1.3 !important}
.ddr-step .ddr-sub{margin:0 0 18px;color:#5a5a5a;font-size:14px}
.ddr-ticket{display:block;width:fit-content;background:#fde5e0;color:#ee2300;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;margin:0 auto 14px}

.ddr-field{margin:0 0 14px}
.ddr-field label{display:block;font-weight:600;font-size:14px;margin:0 0 5px}
.ddr-field input{width:100%;padding:11px 12px;border:1px solid #c9c9c9;border-radius:7px;font-size:16px;background:#fff}
.ddr-field input:focus{outline:2px solid #ee2300;outline-offset:0;border-color:#ee2300}
.ddr-field.ddr-bad input{border-color:#8a0f18;background:#fbeced}
.ddr-row{display:flex;gap:12px}
.ddr-row .ddr-field{flex:1}
.ddr-row .ddr-w-st{max-width:96px}
.ddr-row .ddr-w-zip{max-width:140px}
.ddr-hint{font-size:13px;color:#6a6a6a;margin:4px 0 0}
.ddr-err{color:#8a0f18;font-size:13px;margin:5px 0 0;font-weight:600}

/* Buttons are declared defensively. Themes routinely restyle every <button>
   on the page, and a secondary button inheriting the theme's white text on our
   white background disappears completely. Specificity plus !important on the
   handful of properties that decide whether a control is visible at all. */
.ddr-ship button.ddr-btn{
  display:block !important;visibility:visible !important;opacity:1;
  background:#ee2300 !important;color:#fff !important;border:1px solid #ee2300 !important;
  border-radius:7px !important;padding:13px 22px !important;
  font-size:16px !important;font-weight:600 !important;line-height:1.35 !important;
  cursor:pointer;width:100%;text-align:center;text-transform:none !important;
  letter-spacing:normal !important;text-decoration:none !important;box-shadow:none !important;
  margin:0;font-family:inherit;-webkit-appearance:none;appearance:none}
.ddr-ship button.ddr-btn:hover{background:#be1c00 !important;border-color:#be1c00 !important;color:#fff !important}
.ddr-ship button.ddr-btn[disabled]{opacity:.55;cursor:not-allowed}

.ddr-ship button.ddr-btn.ddr-btn-2{
  background:#fff !important;color:#28303a !important;border:1px solid #b9bfc6 !important;margin-top:9px}
.ddr-ship button.ddr-btn.ddr-btn-2:hover{background:#eef1f3 !important;color:#28303a !important;border-color:#8f979f !important}

.ddr-ship button.ddr-link{
  display:block !important;visibility:visible !important;
  background:none !important;border:0 !important;color:#ee2300 !important;
  text-decoration:underline !important;cursor:pointer;font-size:14px !important;
  font-weight:500 !important;padding:10px 0 !important;width:auto;margin:0 auto;
  box-shadow:none !important;font-family:inherit;text-transform:none !important}
.ddr-ship button.ddr-link:hover{color:#be1c00 !important}
/* Same link, set inside a sentence rather than on its own line. */
.ddr-ship button.ddr-link.ddr-inline{display:inline !important;padding:0 !important;font-size:inherit !important;font-weight:600 !important;margin:0;vertical-align:baseline}

.ddr-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
@media(max-width:520px){.ddr-cmp{grid-template-columns:1fr}.ddr-row{flex-wrap:wrap}}
/* Width is declared explicitly for the same reason the buttons declare it:
   themes constrain bare divs in the content area, and a card that inherits a
   fit-content or max-width from the theme sits lopsided against the button
   below it, which spans the full panel. */
.ddr-ship .ddr-card{
  display:block !important;width:100% !important;max-width:none !important;
  margin-left:auto !important;margin-right:auto !important;float:none !important;
  box-sizing:border-box;
  border:1px solid #ddd;border-radius:8px;padding:14px;font-size:15px;text-align:center}
.ddr-ship .ddr-card address{display:inline-block;text-align:left;margin:0}
.ddr-ship .ddr-cmp .ddr-card{text-align:left}
.ddr-ship .ddr-cmp .ddr-card address{display:block}
.ddr-card h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#666}
.ddr-card.ddr-pick{border-color:#ee2300;border-width:2px;background:#fef0ec}
.ddr-card address{font-style:normal;line-height:1.55}
.ddr-chg{background:#fff3cd;padding:0 3px;border-radius:3px;font-weight:600}

.ddr-note{border-radius:8px;padding:13px 15px;margin:0 0 16px;font-size:14.5px}
.ddr-note-warn{background:#fff8e3;border-left:4px solid #8a6000}
.ddr-note-err{background:#fbeced;border-left:4px solid #8a0f18}
.ddr-note-ok{background:#fef0ec;border-left:4px solid #ee2300}
.ddr-note p{margin:0 0 6px}.ddr-note p:last-child{margin:0}

.ddr-opt{display:block;border:1px solid #ddd;border-radius:8px;padding:13px 15px;margin:0 0 9px;cursor:pointer}
.ddr-opt:hover{background:#fafafa}

/* "Recommended", in the expanded list only. Brian, 2026-08-21.
 *
 * Deliberately NOT brand red: red means "this is the one you have selected"
 * everywhere else on this form, and a hint must not dress up as a selection.
 * A dark border and a quiet tag read as emphasis without competing. Declared
 * BEFORE .ddr-pick so that selecting a recommended option still turns it red.
 * See DDR_Tiers::mark_recommended() for when this is allowed to appear. */
.ddr-opt.ddr-rec{border-color:#1c1c1c;border-width:2px}

/* Shippo service token, test mode only. Diagnostic, so it looks like one. */
.ddr-ship .ddr-tok{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#9a9a9a}
.ddr-rec-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  background:#1c1c1c;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:2px;white-space:nowrap}

.ddr-opt.ddr-pick{border-color:#ee2300;border-width:2px;background:#fef0ec}
.ddr-opt input{margin-right:9px}
.ddr-opt .ddr-t{font-weight:600}
.ddr-opt .ddr-n{display:block;color:#666;font-size:13.5px;margin-left:24px}
.ddr-opt.ddr-off{opacity:.5;cursor:not-allowed;background:#f7f7f7}
.ddr-intl{border-top:1px solid #eee;padding-top:12px;margin-top:14px;text-align:center}
.ddr-intl strong{color:#1c1c1c}
.ddr-wait{text-align:center;padding:34px 0}
.ddr-wait h2{margin:0 0 6px}
.ddr-opt .ddr-sig{font-size:12.5px;color:#767676;margin-top:2px}
.ddr-opt .ddr-sig-weak{color:#8a0f18}

.ddr-waiver{border:2px solid #8a0f18;background:#fdf1f1;border-radius:8px;padding:15px;margin:12px 0}
.ddr-waiver p{margin:0 0 10px;font-size:14px}
.ddr-waiver label{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;cursor:pointer}
.ddr-waiver input{margin-top:3px;flex-shrink:0;width:18px;height:18px}

.ddr-sum{border-top:1px solid #eee;padding:11px 0;display:flex;justify-content:space-between;gap:14px;font-size:15px}
.ddr-sum .ddr-k{color:#666}
.ddr-sum .ddr-v{font-weight:600;text-align:right}

.ddr-done{text-align:center;padding:14px 0}
.ddr-ship .ddr-done .ddr-card{max-width:340px !important;width:auto !important;margin:18px auto 0 !important;background:#faf8f8}
.ddr-done .ddr-tick{width:56px;height:56px;border-radius:50%;background:#ee2300;color:#fff;font-size:30px;line-height:56px;margin:0 auto 14px}
.ddr-fatal{background:#fdf1f1;border-left:4px solid #8a0f18;padding:16px;border-radius:8px}
.ddr-test{background:#3c3c3c;color:#fff;text-align:center;padding:7px;border-radius:6px;font-size:13px;margin-bottom:14px;font-weight:600}

/* ---- customer-supplied label upload ---- */
.ddr-ship .ddr-drop{border:2px dashed #c9c9c9;border-radius:9px;padding:18px 15px;text-align:center;margin:0 0 16px;background:#fcfcfc}
.ddr-ship .ddr-drop-t{margin:0 0 12px;font-weight:600;font-size:15px}
.ddr-ship .ddr-drop-n{margin:10px 0 0;font-size:13px;color:#6a6a6a}
.ddr-ship .ddr-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ddr-ship .ddr-drop-btn{display:inline-block;background:#fff;color:#28303a;border:1px solid #b9bfc6;border-radius:7px;padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer}
.ddr-ship .ddr-drop-btn:hover{background:#eef1f3}
.ddr-ship .ddr-drop input[type=file]:focus + .ddr-drop-btn{outline:2px solid #ee2300;outline-offset:2px}
.ddr-ship .ddr-picked{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;background:#fde5e0;border-radius:7px;padding:8px 10px 8px 14px;font-size:14px;font-weight:600;max-width:100%;word-break:break-all}
.ddr-ship .ddr-picked span{font-weight:400;color:#5a5a5a}
.ddr-ship button.ddr-x{background:none !important;border:0 !important;font-size:20px;line-height:1;cursor:pointer;color:#5a5a5a !important;padding:0 4px !important;width:auto !important}

/* "or" divider between the two ways of getting a drive back */
.ddr-ship .ddr-or{display:flex;align-items:center;gap:14px;margin:18px 0 12px;color:#8a8a8a;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.ddr-ship .ddr-or::before,.ddr-ship .ddr-or::after{content:"";flex:1;height:1px;background:#e2e2e2}

/* Back control, top-left of each step. Visible without scrolling. */
.ddr-ship button.ddr-back{
  display:inline-block !important;background:none !important;border:0 !important;
  color:#5a5a5a !important;font-size:14px !important;font-weight:600 !important;
  padding:0 0 12px !important;margin:0;cursor:pointer;width:auto !important;
  text-transform:none !important;letter-spacing:normal !important;box-shadow:none !important;
  font-family:inherit;text-decoration:none !important}
.ddr-ship button.ddr-back:hover{color:#ee2300 !important}

/* ---------------------------------------------------------------------------
 * Progress strip, and the soft warning on the address-suggestion screen.
 * Added 2026-08-19 at Brian's request.
 *
 * The strip sits below the buttons deliberately: it answers "how much more of
 * this is there", which is a question people ask after they have read the step,
 * not before. Everything is scoped under .ddr-ship so a theme cannot bleed in.
 * ------------------------------------------------------------------------ */

.ddr-ship .ddr-prog{margin:26px 0 0;padding:18px 0 0;border-top:1px solid #e7e7e7}
.ddr-ship .ddr-prog ol{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none;counter-reset:none}
.ddr-ship .ddr-prog li{position:relative;flex:1 1 0;min-width:86px;text-align:center;
  padding:0 4px;margin:0;display:flex;flex-direction:column;align-items:center;gap:7px}

/* the connector, drawn behind the dots rather than between them so it cannot
   fall out of alignment when a label wraps to two lines */
.ddr-ship .ddr-prog li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;
  height:2px;background:#e0e0e0;z-index:0}
.ddr-ship .ddr-prog li:first-child::before{display:none}
.ddr-ship .ddr-prog li.ddr-pdone::before,
.ddr-ship .ddr-prog li.ddr-pnow::before{background:#ee2300}

.ddr-ship .ddr-pdot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:#fff;border:2px solid #e0e0e0;color:#8a8a8a;line-height:1}
.ddr-ship .ddr-pn{font-size:12px;line-height:1.3;color:#8a8a8a}

.ddr-ship .ddr-pdone .ddr-pdot{background:#ee2300;border-color:#ee2300;color:#fff}
.ddr-ship .ddr-pdone .ddr-pn{color:#5a5a5a}
.ddr-ship .ddr-pnow .ddr-pdot{background:#fff;border-color:#ee2300;color:#ee2300;
  box-shadow:0 0 0 4px rgba(238,35,0,.13)}
.ddr-ship .ddr-pnow .ddr-pn{color:#1c1c1c;font-weight:700}

.ddr-ship .ddr-pfoot{margin:16px 0 0;font-size:12px;line-height:1.5;color:#8a8a8a;text-align:center}

@media (max-width:420px){
  .ddr-ship .ddr-prog li{min-width:64px}
  .ddr-ship .ddr-pn{font-size:11px}
  .ddr-ship .ddr-pdot{width:24px;height:24px;font-size:12px}
  .ddr-ship .ddr-prog li::before{top:11px}
}

/* Keeping an address the carrier does not recognise. Amber, not red: this is a
   real risk but it is also sometimes the right choice, so it must not read as
   a refusal. */
.ddr-ship .ddr-warn-soft{margin:14px 0 6px;padding:12px 14px;border-radius:8px;
  background:#fff8e6;border:1px solid #e8d08a;color:#5c4813;font-size:13px;line-height:1.55}

/* ---------------------------------------------------------------------------
 * Option rows: keep wrapped text aligned with the first line.
 *
 * Found 2026-08-19 by rendering the real form at 375px. The radio was inline,
 * so "$20.00 — USPS Ground Advantage" wrapped with its second line starting
 * under the radio instead of under the price, and a list of three prices got
 * hard to scan. Pulling the radio out of the text flow fixes the title, the
 * note, and the same pattern on the coverage and signature rows.
 * ------------------------------------------------------------------------ */
.ddr-ship .ddr-opt{position:relative;padding-left:39px}
.ddr-ship .ddr-opt input{position:absolute;left:15px;top:16px;margin:0}
.ddr-ship .ddr-opt .ddr-n{margin-left:0}

/* ---------------------------------------------------------------------------
 * Finished state on the progress strip.
 *
 * Brian, 2026-08-19: "change the 'We ship it' in progress to green so it's
 * clear they are done." Brand red is the colour of "you are here" everywhere
 * else in this form, so leaving the last step red on the confirmation page read
 * as another thing to do rather than as the end.
 * ------------------------------------------------------------------------ */
.ddr-ship .ddr-prog-done li::before{background:#1a7f4b}
.ddr-ship .ddr-prog-done .ddr-pdot{background:#1a7f4b;border-color:#1a7f4b;color:#fff}
.ddr-ship .ddr-prog-done .ddr-pn{color:#5a5a5a}
.ddr-ship .ddr-pend .ddr-pdot{box-shadow:0 0 0 4px rgba(26,127,75,.16)}
.ddr-ship .ddr-pend .ddr-pn{color:#1a7f4b;font-weight:700}

/* A note to us. Matches the address fields rather than inventing a new look. */
.ddr-ship .ddr-field textarea{width:100%;box-sizing:border-box;padding:12px;font:inherit;
  font-size:16px;line-height:1.5;border:1px solid #c9c9c9;border-radius:8px;resize:vertical;
  min-height:76px;background:#fff;color:#1c1c1c}
.ddr-ship .ddr-field textarea:focus{outline:2px solid #ee2300;outline-offset:1px;border-color:#ee2300}

/* The upload button before a file is chosen. Visibly not ready, still readable,
   and it never looks like the page is broken. */
.ddr-ship button.ddr-btn.ddr-off{background:#e6e6e6 !important;color:#8a8a8a !important;
  cursor:not-allowed;box-shadow:none}
.ddr-ship button.ddr-btn.ddr-off:hover{background:#e6e6e6 !important}

/* The note placeholder was rendering nearly black, so an empty box looked like
   it already had an answer in it. (Brian, 2026-08-20.) */
.ddr-ship .ddr-field textarea::placeholder{color:#9a9a9a;opacity:1}
.ddr-ship .ddr-field textarea::-webkit-input-placeholder{color:#9a9a9a}

/* ---------------------------------------------------------------------------
 * "Coming back to you", one item per line.
 *
 * Brian, 2026-08-20. A comma-separated run was unreadable because the labels
 * contain commas of their own. Centred as a block so the list sits under the
 * heading rather than hugging the left edge of a centred card.
 * ------------------------------------------------------------------------ */
/*
 * THE BULLET INDENT IS ONLY ON ONE SIDE, SO CENTRING THE BOX DOES NOT CENTRE
 * THE TEXT. Origin: Brian, 2026-08-25, third time asking.
 *
 * The <ul> is an inline-block centred by the card's text-align. Measured in a
 * browser: the ul box lands dead centre, and the words land 11px right of it,
 * because every line carries 22px of padding on the left for the dot and
 * nothing on the right. Centring the container was never going to fix that.
 *
 * Shifted left by half the indent so the TEXT column is centred, which is the
 * thing anyone actually looks at. The indent is a variable so the offset cannot
 * drift out of step with it: change one number and both follow.
 */
.ddr-ship .ddr-list{--ddr-bullet:22px;list-style:none;margin:0;padding:0;text-align:left;
  display:inline-block;position:relative;left:calc(var(--ddr-bullet) / -2)}
.ddr-ship .ddr-list li{position:relative;padding:3px 0 3px var(--ddr-bullet);line-height:1.45}
.ddr-ship .ddr-list li::before{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;
  border-radius:50%;background:#ee2300}

/*
 * TWO BULLETS PER ITEM. Origin: Brian, 2026-08-20, test ticket 99999.
 *
 * On the live site every line in "Coming back to you" rendered a theme disc
 * AND our red dot. It does not reproduce in an isolated page, so the theme is
 * putting the marker back. list-style is inherited, so `list-style:none` on
 * the UL loses to any theme rule that sets it on the LI itself, however weak
 * that rule looks next to ours.
 *
 * Killed three ways so no theme can win: on the UL, on the LI, and on the
 * ::marker pseudo-element (which list-style:none does not always silence when
 * a theme has given it explicit content). Scoped under the id, which no theme
 * selector is going to outrank, and marked important because the point of this
 * block is to be unarguable rather than tidy.
 */
#ddr-ship .ddr-list,
#ddr-ship .ddr-list > li,
#ddr-ship .ddr-prog ol,
#ddr-ship .ddr-prog ol > li{
  list-style:none !important;
  list-style-type:none !important;
  list-style-image:none !important;
  list-style-position:outside !important;
}
#ddr-ship .ddr-list > li::marker,
#ddr-ship .ddr-prog ol > li::marker{content:"" !important;font-size:0 !important;color:transparent !important}

/* Same reasoning for the pseudo-elements: a theme that draws its own bullet
   with li::before would sit alongside our dot rather than under it, so our dot
   is restated here at a specificity nothing is going to beat, and ::after is
   shut off because some themes hang a marker there instead. */
#ddr-ship .ddr-list > li::before{content:"" !important;position:absolute;left:4px;top:12px;
  width:6px;height:6px;border-radius:50%;background:#ee2300;display:block}
#ddr-ship .ddr-list > li::after{content:none !important}

/* A single item is a centred sentence, not a list of one. Brian, 2026-08-20:
   "make sure the device is centered." See contentsHtml() in ddr-form.js. */
.ddr-ship .ddr-one{margin:0;text-align:center;line-height:1.45}

/* The one optional extra: the paid FedEx pickup. Added 2026-09-15.
   Shaped like the signature waiver on purpose, because it is the same kind of
   thing: a checkbox that changes what happens, with the reasoning next to it. */
.ddr-addon{text-align:left;margin:12px 0 16px}
.ddr-addon label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:700;cursor:pointer;margin:0 0 8px}
.ddr-addon input{margin-top:3px;flex-shrink:0;width:18px;height:18px}
.ddr-addon .ddr-hint{color:#6a5320}

/* Itemised total on the pay screen. Only rendered when there is more than one
   line to show, so an ordinary shipment keeps its single large figure. */
.ddr-lines{width:100%;border-collapse:collapse;margin:.3em 0 .5em}
.ddr-lines th{text-align:left;font-weight:400;padding:4px 0;font-size:14.5px}
.ddr-lines td{text-align:right;padding:4px 0;font-size:14.5px;white-space:nowrap}
.ddr-lines tr.tot th,.ddr-lines tr.tot td{border-top:1px solid #d8d8d8;font-weight:700;padding-top:8px;font-size:1.25em}