/* Checkout reskin — new shopping-card look applied to the legacy tkn-flow pages.
   All rules are scoped under .rd so they never collide with bootstrap/sitewebnew.css
   (which still style the overlays, modals and language dropdown outside .rd). */

:root { --rd-blue:#0567b4; --rd-blue-dark:#004f9e; --rd-green:#28a745; --rd-green-dark:#256b34; --rd-gray:#5a5a5a; }

/* Hero */
.rd-hero { background:#0567b4; color:#fff; margin-bottom:20px; }
.rd-hero__bar { background:#fff; padding:10px 16px; text-align:center; }
.rd-hero__bar img { height:34px; }
.rd-hero__banner { padding:26px 16px; text-align:center; font-weight:700; font-size:30px; }
@media (max-width:820px){ .rd-hero__bar img{ height:24px; } .rd-hero__banner{ font-size:22px; } }

/* Layout */
.rd { font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; color:#222; background:#fff; }
.rd-wrap { max-width:1180px; margin:0 auto; padding:0 16px 32px; }
.rd-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.rd-grid > .rd-col-left { order:1; }
.rd-grid > .rd-col-right { order:2; text-align:left; }
@media (max-width:820px){ .rd-grid{ grid-template-columns:1fr; gap:8px; } .rd-grid > .rd-col-left{ order:2; } .rd-grid > .rd-col-right{ order:1; } }

/* legacy headings inside the reskin */
.rd .headingconfirm { color:var(--rd-blue); font-weight:600; margin:10px 0; }
.rd .product_box.rd-card .confirmation_row { padding:6px 0; }
.rd .order_summary { margin-top:16px; }

.rd-col-title { color:var(--rd-blue); font-size:20px; font-weight:600; margin:24px 0 16px; }

/* Cards */
.rd-card { background:#fff; box-shadow:2px 2px 10px 0 rgba(90,99,109,.15); border-radius:8px; padding:20px; margin-bottom:16px; }
.rd-card-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; }
.rd-card-row .lbl { color:var(--rd-gray); }
.rd-card-row .val { color:#000; }
.rd-sep { border:0; border-top:1px solid #ddd; margin:10px 0; }
.rd-total { font-weight:700; }
.rd-total .val { font-weight:800; }

/* Product hero (left) */
.rd-prod { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
.rd-prod__title { font-size:22px; font-weight:600; color:#000; line-height:1.3; }
.rd-prod__sub { color:var(--rd-gray); font-size:13px; margin-top:6px; }
.rd-prod__price { text-align:right; }
.rd-vat-note { color:var(--rd-gray,#5a636d); font-size:12px; margin-top:2px; }
.rd-prod__price .lbl { color:var(--rd-gray); font-size:13px; }
.rd-prod__price .val { font-size:22px; font-weight:400; color:#000; }

/* Payment schedule rows */
.rd-sched { width:100%; }
.rd-sched .rd-sched-row { display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid #f0f0f0; }
.rd-sched .rd-sched-head { color:var(--rd-blue); font-weight:600; border-top:0; }

/* Form */
.rd-form label { display:block; margin-bottom:6px; color:var(--rd-blue); font-size:14px; }
.rd-field { margin-bottom:14px; }
.rd-row2 { display:flex; gap:18px; }
.rd-row2 > * { flex:1; }
.rd-input-like { border:1px solid #d6d6d6; border-radius:4px; display:flex; align-items:center; padding:0 6px; background:#fff; }
.rd-input-like:focus-within { outline:1px solid #000; border-color:#000; }
.rd .rd-input-like input,
.rd .rd-input-like select,
.rd .rd-input-like textarea { border:0; padding:9px 8px; width:100%; background:transparent; font-size:14px; box-shadow:none; }
.rd .rd-input-like input:focus, .rd .rd-input-like select:focus, .rd .rd-input-like textarea:focus { outline:none; }
.rd-required { color:var(--rd-gray); font-size:12px; margin-bottom:14px; }

/* Restyle the LEGACY inputs/selects/textareas in place (no markup wrapping needed) */
.rd .form-control,
.rd input[type="text"],
.rd input[type="email"],
.rd input[type="tel"],
.rd select,
.rd textarea {
  width:100%; border:1px solid #d6d6d6; border-radius:4px; padding:9px 10px; font-size:14px;
  background:#fff; box-shadow:none; height:auto; color:#222;
}
.rd .form-control:focus,
.rd input:focus, .rd select:focus, .rd textarea:focus { outline:none; border-color:#000; box-shadow:none; }
.rd .form-group, .rd .margin_tb { margin-bottom:14px; }
.rd label { color:var(--rd-blue); font-size:14px; margin-bottom:6px; display:inline-block; }

/* Restyle the LEGACY action buttons in place to the new look */
.rd .button_our, .rd .button_our_inline, .rd .button_inline { background:var(--rd-blue); color:#fff; border-radius:4px;
  padding:12px 22px; font-weight:600; text-align:center; cursor:pointer; display:inline-block; }
.rd .button_our:hover, .rd .button_our_inline:hover { background:var(--rd-blue-dark); }
.rd #payment_buttons { display:flex; flex-wrap:wrap; gap:10px; }
.rd #payment_buttons > div { flex:0 1 calc(50% - 10px); min-width:150px; margin:0; }

/* Toggle (Yes/No) rows + misc legacy bits keep working; just align spacing */
.rd-toggle-row { display:flex; align-items:center; gap:14px; margin:14px 0; }
.rd-toggle-row .rd-toggle-label { color:#333; }

/* Buttons */
.rd-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:4px;
  padding:12px 22px; font-size:14px; font-weight:600; cursor:pointer; color:#fff; background:var(--rd-blue); transition:background .12s; }
.rd-btn:hover { background:var(--rd-blue-dark); }
.rd-btn--green { background:var(--rd-green); }
.rd-btn--green:hover { background:var(--rd-green-dark); }
.rd-btn--block { width:100%; }
.rd-btn--ghost { background:#fff; color:var(--rd-blue); border:1px solid var(--rd-blue); }
.rd-pay-methods { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.rd-pay-methods .rd-btn { flex:1 1 calc(50% - 10px); min-width:140px; }

.rd-more { margin-top:16px; }
.rd-more__toggle { color:var(--rd-blue); cursor:pointer; text-align:right; font-size:14px; }
.rd-more__list { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.rd-more__list label { color:#333; display:inline; margin-left:6px; }

/* Footer trust badges: one line at every width, anchors aligned with bare imgs */
.rd-trust { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:34px; padding:30px 0; height:auto; }
.rd-trust.footimgfive img { height:50px; max-height:none; width:auto; margin:0; object-fit:contain; }
.rd-trust.footimgfive a { height:auto; display:inline-flex; align-items:center; }
@media (max-width:820px){
  .rd-trust { gap:12px; }
  .rd-trust.footimgfive img { height:32px; }
}
@media (max-width:500px){
  .rd-trust { gap:6px; }
  .rd-trust.footimgfive img { height:22px; }
}
.rd-legal { color:var(--rd-gray); font-size:11px; text-align:center; max-width:1000px; margin:0 auto; padding:0 16px; }

.rd-hideit { display:none !important; }

/* Overlays: sitewebnew's .fullscreen is position:absolute with no top, so on a page
   taller than one viewport it lands at the bottom of the document instead of covering
   the screen. Pin every overlay to the viewport (this stylesheet loads only on the
   prices checkout page). */
.fullscreen,
#agreeoverlay:not(.hideit),
#disconnectoverlay,
#messageoverlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100vh;
    z-index: 1050;
    overflow-y: auto;
}
#agreeoverlay:not(.hideit) .overlayterms,
#disconnectoverlay .overlayterms,
#messageoverlay .overlayterms { min-height: 100%; }

/* Legacy .flexchild widths would shrink the grid cells — full width inside .rd-grid */
.rd .flexchild1, .rd .flexchild2 { width:auto; display:block; margin:0; }
.rd .rd-prod__price .val { white-space:nowrap; }

/* Product card: neutralize the legacy .product_box frame (sitewebnew.css draws a blue border box) */
.rd .product_box { border:0; text-align:left; padding:20px; }
.rd .product_box .customerdata,
.rd .order_summary .customerdata { font-style:normal; color:#000; }
.rd .rd-prod__title #productdisplay { font-size:22px; font-weight:600; color:#000; }
.rd .rd-prod__sub b { font-weight:400; }
.rd .rd-card-row .lbl { color:var(--rd-gray); font-weight:500; }
.rd .rd-card-row .val { color:#000; }
.rd .rd-card-row.rd-total .lbl { color:#000; font-weight:700; }
.rd .rd-card-row.rd-total .val, .rd .rd-card-row.rd-total .val span { font-weight:800; font-size:16px; }

/* Payment summary card */
.rd .order_summary .headingconfirm { font-size:16px; font-weight:600; margin-bottom:4px; }
.rd #paymentsummary .confirmation_row { margin:0; padding:7px 0; border-top:1px solid #f0f0f0; }
.rd #paymentsummary .confirmation_row:first-child { border-top:0; color:var(--rd-blue); font-weight:600; }
.rd #paymentsummary_refresh { padding:10px 0; }

/* Payment buttons: green CTA on top, secondary methods in a 2-col grid below */
.rd #payment_buttons .rd-btn--block { flex:1 1 100%; }
.rd #payment_buttons .rd-btn--cta { padding:15px 22px; font-size:16px; }
/* flex-grow 0 so an odd last button (e.g. PayPal when Family Upgrade is hidden)
   keeps half width and stays left instead of stretching across the row. */
.rd #payment_buttons .rd-btn--ghost { flex:0 1 calc(50% - 10px); min-width:150px; }
.rd .rd-btn.nopointer { opacity:.5; cursor:default; }
.rd .rd-btn.nopointer:hover { background:#fff; }

/* Product hero with box image */
.rd .rd-prod { grid-template-columns:auto 1fr auto; }
.rd-prod__img { width:110px; height:110px; display:flex; align-items:center; justify-content:center; }
.rd-prod__img img { max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:820px){ .rd-prod__img { width:72px; height:72px; } }

/* Compact variant for the narrow wire order column: image + title on the
   first row, price line spanning the full card width below. */
.rd-wire .rd-prod,
.rd-wire.rd .rd-prod { grid-template-columns:56px minmax(0,1fr); gap:8px 10px; align-items:center; }
.rd-wire .rd-prod__img { width:56px; height:56px; }
.rd-wire .rd-prod__title { font-size:15px; font-weight:600; }
.rd-wire .rd-prod__price { grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:baseline; gap:8px; }
.rd-wire .rd-prod__price .val,
.rd-wire.rd .rd-prod__price .val { font-size:16px; white-space:nowrap; }
.rd-wire .rd-vat-note { margin-top:0; }
.rd-wire .product_box { padding:14px; }
.rd-wire .rd-totals .rd-total-amount .val { font-size:22px; }
.rd-wire .rd-totals .rd-total-amount { flex-wrap:wrap; }

/* Wire page row: flex instead of Bootstrap floats — keeps the two columns
   side by side and stops the following nav buttons floating up behind the
   container. */
.rd-wire-row { display:flex; flex-wrap:wrap; align-items:flex-start; }
.rd-wire-row::before, .rd-wire-row::after { content:none; }
.rd-wire-row > .col-md-5 { float:none; flex:0 0 41.66%; max-width:41.66%; }
.rd-wire-row > .col-md-7 { float:none; flex:0 0 58.33%; max-width:58.33%; }
@media (max-width:820px){
  .rd-wire-row > .col-md-5, .rd-wire-row > .col-md-7 { flex:0 0 100%; max-width:100%; }
}

/* Add-on card — shopping-cart interaction (box image + Add / bin-remove) */
.rd-addon__row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; }
.rd-addon__img { width:88px; height:88px; display:flex; align-items:center; justify-content:center; }
.rd-addon__img img { max-width:100%; max-height:100%; object-fit:contain; }
.rd-addon__info { min-width:0; }
.rd-addon__cta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; white-space:nowrap; }
.rd-addon__price { font-size:22px; font-weight:400; color:#000; }

/* Totals card: per-product prices show above (not bold); the sum lives here,
   bigger, with the incl.-VAT line right under it. */
.rd-totals .rd-total-amount .val { font-size:26px; font-weight:700; }
.rd-totals .rd-total-amount .lbl { font-size:16px; color:#000; font-weight:600; }
.rd-totals .rd-total-vat .val, .rd-totals .rd-total-vat .lbl { font-size:13px; }
.rd-addon .rd-addon-add { padding:8px 16px; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.rd-addon .rd-addon-add .rd-ico { width:18px; height:18px; }
.rd-addon-incart { display:none; align-items:center; gap:10px; }
.rd-addon-incart__label { color:var(--rd-green-dark,#1c7a3f); font-weight:600; font-size:14px; }
.rd-addon-remove { background:none; border:none; cursor:pointer; color:var(--rd-gray,#5a636d); padding:4px; line-height:0; }
.rd-addon-remove:hover { color:#c0392b; }
.rd-addon-remove .rd-ico { width:20px; height:20px; }
/* Toggle: not-in-cart shows Add; in-cart shows the added+bin state */
.rd-addon.in-cart .rd-addon-add { display:none; }
.rd-addon.in-cart .rd-addon-incart { display:flex; }
@media (max-width:820px){ .rd-addon__img { width:60px; height:60px; } }

/* Optional agent-email field */
.rd-optional { color:var(--rd-gray,#5a636d); font-weight:400; font-size:13px; }
.rd-agenthint { color:var(--rd-gray,#5a636d); font-size:12.5px; line-height:1.4; margin:6px 2px 0; }

/* Card title (payment schedule, options) */
.rd-card__title { color:#000; font-size:16px; font-weight:700; margin-bottom:10px; }

/* Step 1 on phones: product, price and features first, then the options + Continue.
   Step 2 keeps the form on top (default order). */
@media (max-width:820px){
  .rd.rd--step1 .rd-grid > .rd-col-left { order:1; }
  .rd.rd--step1 .rd-grid > .rd-col-right { order:2; }
}

/* "Included in your plan" card: rows valued "included" */
.rd-incl { padding:0; overflow:visible; }
.rd-incl__head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid #eceef1; }
.rd-incl__title { flex:1; color:#000; font-size:16px; font-weight:700; }
.rd-incl__count { background:#e8f1fb; color:var(--rd-blue); font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.rd-incl__list { list-style:none; margin:0; padding:10px 20px 12px; }
.rd-incl__item { display:flex; align-items:center; gap:12px; padding:9px 0; }
.rd-incl__name { flex:1; color:#222; font-size:14.5px; }
.rd-incl__pill { background:#f1f2f4; color:#333; font-size:13px; padding:7px 12px; border-radius:8px; white-space:nowrap; }
@media (max-width:500px){ .rd-incl__item { flex-wrap:wrap; } .rd-incl__pill { white-space:normal; margin-left:34px; } }
.rd-incl__check { flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#e3f3e8; color:var(--rd-green-dark,#256b34);
  display:inline-flex; align-items:center; justify-content:center; }
.rd-incl__check svg { width:12px; height:12px; }

/* (i) tooltip: hover on desktop, tap (focus) on touch */
.rd-info { position:relative; flex:0 0 18px; width:18px; height:18px; color:#9aa0a6; cursor:help; display:inline-flex; outline:none; }
.rd-info svg { width:18px; height:18px; }
.rd-info:hover, .rd-info:focus { color:var(--rd-blue); }
.rd-info__tip { display:none; position:absolute; top:26px; right:-4px; z-index:30; width:270px; max-width:72vw;
  background:#fff; color:#333; font-size:12.5px; font-weight:400; line-height:1.45; text-align:left;
  border:1px solid #d5d9de; border-radius:7px; padding:10px 12px; box-shadow:2px 2px 10px 0 rgba(90,99,109,.25); }
.rd-info:hover .rd-info__tip, .rd-info:focus .rd-info__tip { display:block; }

/* Promo code: input + button on one line */
.rd .rd-promo-row { display:flex; gap:10px; align-items:stretch; }
.rd .rd-promo-row input { flex:1; }
.rd .rd-promo-row .rd-btn { white-space:nowrap; }

/* Step navigation */
.rd-back { color:var(--rd-blue); cursor:pointer; font-size:14px; margin-bottom:12px; display:inline-block; }
.rd-back:hover { text-decoration:underline; }

/* Form inputs: placeholder style like the cart */
.rd .form-control::placeholder, .rd input::placeholder, .rd textarea::placeholder { color:#9a9a9a; }
.rd .rd-row2 .form-group { flex:1; margin-bottom:14px; }
.rd .rd-row2--address .rd-grow { flex:2.4; }
.rd .rd-row2--address .rd-narrow { flex:1; }
@media (max-width:600px){ .rd .rd-row2 { flex-direction:column; gap:0; } }

/* More options */
.rd .buttonMoreOptions { color:var(--rd-blue); font-weight:600; font-size:14px; }
.rd .moreOptions label { width:auto; margin-left:8px; color:#333; }
.rd .moreOptions { padding:4px 0; }

/* Icons on the primary payment buttons */
.rd .rd-ico { width:20px; height:20px; flex:none; }
.rd .rd-btn--cta .rd-ico { width:22px; height:22px; }
.rd .rd-btn-logo { height:18px; width:auto; object-fit:contain; }

/* Alternative payment methods: brand buttons instead of radios */
.rd .rd-alt-methods { display:flex; flex-wrap:wrap; gap:10px; }
.rd .rd-alt-methods .rd-btn--brand { flex:1 1 calc(50% - 10px); min-width:150px; gap:10px; color:#333; font-weight:500; border-color:#d6d6d6; }
.rd .rd-alt-methods .rd-btn--brand:hover { background:#f6f9fd; border-color:var(--rd-blue); }
.rd .rd-chip { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:24px;
  padding:0 8px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.2px; }
.rd .rd-chip-img { height:22px; width:22px; object-fit:contain; }
.rd .rd-chip--amex { background:#016FD0; color:#fff; }
.rd .rd-chip--ecomm { background:#5A2D82; color:#fff; }
.rd .rd-chip--neosurf { background:#E4007C; color:#fff; text-transform:lowercase; }
.rd .rd-chip--apple { background:#000; color:#fff; }
.rd .rd-chip--ideal { background:#C06; color:#fff; }
.rd .rd-chip--bancontact { background:#004E91; color:#FFD800; }
.rd .rd-chip--swish { background:#EF7CA7; color:#fff; }
.rd .rd-chip--sofort { background:#EA7B93; color:#fff; }
.rd .rd-chip--mobilepay { background:#5A78FF; color:#fff; }
.rd .rd-chip--klarna { background:#FFB3C7; color:#000; }
.rd .rd-chip--crypto { background:#F7931A; color:#fff; font-size:14px; }
.rd .rd-chip--viva { background:#013AFF; color:#fff; text-transform:lowercase; }

/* Toggle rows on step 1 (VAT, instalments, plan count, setup fee, NIF).
   The legacy markup puts the control first and floats it, which left each control at a
   different right edge and let the plan select overrun its own wrapper. Lay the row out
   as label left / control right so every control ends flush with the fields above. */
.rd .rd-step1 .margin_tb_big { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rd .rd-step1 .margin_tb_big > .anyinlineright { order:2; float:none; width:auto; margin:0; text-align:right; }
.rd .rd-step1 .margin_tb_big > .anyinlinebreak { order:1; margin:0; }
.rd .rd-step1 .margin_tb_big .btn-group { display:inline-flex; }
.rd .rd-step1 #sel_inst_plan { width:170px !important; min-width:0; }
@media (max-width:500px){
  .rd .rd-step1 #sel_inst_plan { width:140px !important; }
}

/* Payment schedule rows: keep date and amount side by side at every width
   (the legacy col-md-* columns stack below 992px) */
.rd #paymentsummary .confirmation_row { display:flex; align-items:baseline; }
.rd #paymentsummary .confirmation_row > div { float:none; width:auto; padding:0; }
.rd #paymentsummary .confirmation_row > .col-md-5 { flex:0 0 45%; }
.rd #paymentsummary .confirmation_row > .col-md-7 { flex:1; }

/* Step 2 left column: special conditions and agent email sit under the payment
   schedule, so give them the same card frame as the cards above them. */
.rd #rdSpecialSlot > div { background:#fff; box-shadow:2px 2px 10px 0 rgba(90,99,109,.15);
  border-radius:8px; padding:20px; margin:0 0 16px; }
.rd #rdSpecialSlot .rd-agenthint { margin-bottom:0; }

/* Why a promo code was refused (or accepted) */
.rd .rd-promo-msg { margin-top:8px; font-size:13px; line-height:1.4; color:#c0392b; }
.rd .rd-promo-msg--ok { color:var(--rd-green-dark,#256b34); }