/* bijuymodacheckout — classic-pablito conventions: brand #7828C8, soft tint #fbf9fe, 46px inputs,
   full-width 52px buttons on mobile. Cards, typography and .btn-primary come from the theme. */
.bjm-checkout { max-width: 100%; overflow-wrap: anywhere; }
.bjm-checkout .card { margin-bottom: 1rem; }
.bjm-card__title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; }
.bjm-card__step { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: #7828C8; color: #fff; font-size: .85rem; flex: 0 0 auto; }

/* form */
.bjm-grid { display: flex; flex-wrap: wrap; margin: 0 -.5rem; }
.bjm-field { width: 100%; padding: 0 .5rem; margin-bottom: .85rem; }
.bjm-field[hidden] { display: none; }
.bjm-checkout label, .bjm-checkout legend { text-align: left; }
.bjm-field__label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; }
.bjm-field__required { color: #7828C8; }
.bjm-field__optional { font-weight: 400; color: #7a7a7a; }
.bjm-checkout .form-control { height: 46px; font-size: 16px; border-radius: 6px; }
.bjm-checkout .form-control:focus { border-color: #7828C8; box-shadow: 0 0 0 2px rgba(120, 40, 200, .15); }
.bjm-checkout .form-control[readonly] { background: #f6f6f6; }
.bjm-field__hint { display: block; margin-top: .25rem; color: #7a7a7a; font-size: .8rem; }
.bjm-field__error { display: block; margin-top: .25rem; color: #c0392b; font-size: .8rem; }
.bjm-field.has-error .form-control, .bjm-consent.has-error .bjm-check { border-color: #c0392b; }
.bjm-check { display: flex; align-items: flex-start; gap: .6rem; margin: .25rem 0 0; font-weight: 600; cursor: pointer; }
.bjm-check input { width: 18px; height: 18px; margin-top: .15rem; flex: 0 0 auto; accent-color: #7828C8; }
.bjm-consent { margin: 0 0 1rem; padding: .75rem 1rem; font-size: .8rem; background: #fff; border-radius: 6px; }
.bjm-consent__text, .bjm-consent__text * { text-align: left; font-style: normal; }
.bjm-consent .bjm-check { font-weight: 400; }
.bjm-consent__text p { margin: 0; }
.bjm-privacy-info { margin: 0 0 1rem; font-size: .8rem; color: #555; }
.bjm-privacy-info a { color: #7828C8; text-decoration: underline; }
.bjm-summary__edit { display: inline-block; margin: -.25rem 0 .75rem; font-size: .85rem; color: #7828C8; text-decoration: underline; }
.bjm-login { padding: 0; }
.bjm-login__summary { padding: .9rem 1.25rem; font-weight: 600; color: #7828C8; cursor: pointer; }
.bjm-signed-in { margin-bottom: 1rem; }
.bjm-cta { width: 100%; min-height: 52px; font-size: 15px; font-weight: 700; white-space: normal; }
.bjm-btn-outline { background: #fff; color: #7828C8; border: 2px solid #7828C8; text-transform: uppercase; }
.bjm-btn-outline:hover, .bjm-btn-outline:focus { background: #fbf9fe; color: #5a1a99; border-color: #5a1a99; }

.bjm-option--primary { border: 2px solid #7828C8; }
.bjm-option--secondary { background: #fbf9fe; border: 1px solid rgba(120, 40, 200, .25); }
.bjm-option__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: .75rem; }
.bjm-option__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.bjm-option__title--small { font-size: 1rem; margin-bottom: .4rem; }
.bjm-option__total { margin: 0; text-align: right; }
.bjm-option__total span { display: block; font-size: .75rem; color: #7a7a7a; }
.bjm-option__total strong { font-size: 1.5rem; color: #7828C8; }
.bjm-option__text { font-size: .875rem; margin-bottom: .85rem; }
.bjm-methods { border: 0; padding: 0; margin: 0 0 1rem; }
.bjm-methods__legend { font-size: .875rem; font-weight: 700; margin-bottom: .5rem; }
.bjm-method { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid #7828C8; border-radius: 6px; background: #fbf9fe; cursor: pointer; }
.bjm-method input { margin-top: .6rem; accent-color: #7828C8; flex: none; }
/* 1.6.1: a glyph per method and the accepted card brands, so each option is recognised without reading. */
.bjm-method__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: rgba(120, 40, 200, .08); border: 1px solid rgba(120, 40, 200, .18); }
.bjm-method__icon img { width: 1.5rem; height: 1.5rem; display: block; }
.bjm-method__body { flex: 1; min-width: 0; }
.bjm-method__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.bjm-method__head strong { font-size: .95rem; }
.bjm-method__brands { display: inline-flex; gap: .3rem; }
.bjm-method__brands img { width: 38px; height: 24px; display: block; }
.bjm-method__body small { display: block; font-size: .8rem; color: #555; margin-top: .2rem; }
.bjm-methods .bjm-method { background: #fff; border-color: #d9d2e6; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.bjm-methods .bjm-method:hover { border-color: #7828C8; }
.bjm-methods .bjm-method:has(input:checked) { border-color: #7828C8; background: #fbf9fe; box-shadow: 0 0 0 1px #7828C8; }
.bjm-methods .bjm-method:focus-within { outline: 2px solid rgba(120, 40, 200, .35); outline-offset: 2px; }
/* Only the chosen method explains itself (Pablo, 1.6.1: less text). Browsers without :has() keep every line visible. */
@supports selector(:has(*)) {
  .bjm-methods .bjm-method { align-items: center; }
  .bjm-methods .bjm-method input { margin-top: 0; }
  .bjm-methods .bjm-method small { display: none; }
  .bjm-methods .bjm-method:has(input:checked) small { display: block; }
}

/* summary */
.bjm-summary__lines { list-style: none; padding: 0; margin: 0 0 1rem; }
.bjm-summary__line { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #eee; font-size: .875rem; }
.bjm-summary__thumb { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid #eee; border-radius: 6px; background: #fff; }
.bjm-summary__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.bjm-summary__qty { position: absolute; top: -.5rem; right: -.5rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: .7rem;
  background: #7828C8; color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bjm-summary__name { flex: 1 1 auto; min-width: 0; }
.bjm-summary__name small { display: block; color: #7a7a7a; }
.bjm-summary__amount { white-space: nowrap; font-weight: 600; }
.bjm-summary__totals { display: flex; flex-wrap: wrap; margin: 0; font-size: .9rem; }
.bjm-summary__totals dt { width: 62%; font-weight: 400; margin-bottom: .35rem; }
.bjm-summary__totals dd { width: 38%; text-align: right; margin-bottom: .35rem; }
.bjm-summary__totals .bjm-summary__total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid #eee; padding-top: .5rem; }
.bjm-summary__note { margin: .5rem 0 0; font-size: .8rem; color: #555; }
.bjm-payment-return__bank dt { font-weight: 600; }

/* transfer result */
.bjm-result__lead { font-size: 1rem; margin-bottom: 1rem; }
.bjm-result__keys { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.bjm-result__key { flex: 1 1 14rem; margin: 0; padding: .9rem 1rem; border: 2px solid #7828C8; border-radius: 8px; background: #fbf9fe; }
.bjm-result__key span { display: block; font-size: .8rem; color: #555; }
.bjm-result__key strong { display: block; font-size: 1.5rem; color: #7828C8; letter-spacing: .02em; overflow-wrap: anywhere; }
.bjm-result__title { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
.bjm-result__bank { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .4rem 1rem; margin: 0 0 1.25rem; padding: .9rem 1rem;
  border: 1px solid #eee; border-radius: 8px; font-size: .9rem; }
.bjm-result__bank dt { font-weight: 600; margin: 0; }
.bjm-result__bank dd { margin: 0; overflow-wrap: anywhere; }
.bjm-result__steps { margin: 0 0 1.25rem; padding-left: 1.25rem; font-size: .9rem; }
.bjm-result__steps li { margin-bottom: .35rem; }

/* mobile: tighter frame and summaries, same content and 16px inputs */
@media (max-width: 575px) {
  #module-bijuymodacheckout-checkout #content.page-content,
  #module-bijuymodacheckout-result #content.page-content { padding: .5rem; }
  .bjm-checkout .card-block, .bjm-result .card-block { padding: .9rem .85rem; }
  .bjm-checkout .card { margin-bottom: .75rem; }
  .bjm-card__title { margin-bottom: .7rem; font-size: 1rem; }
  .bjm-field { margin-bottom: .7rem; }
  .bjm-login__summary { padding: .7rem .85rem; }
  .bjm-review__block { flex-basis: 100%; margin-bottom: .5rem; font-size: .85rem; }
  .bjm-option__head { margin-bottom: .5rem; }
  .bjm-option__total strong { font-size: 1.35rem; }
  .bjm-result__bank { grid-template-columns: 1fr; gap: .15rem; }
  .bjm-result__bank dd { margin-bottom: .45rem; }
}
@media (min-width: 576px) {
  .bjm-field--half { width: 50%; }
}
@media (min-width: 768px) {
  .bjm-cta { width: auto; min-width: 16rem; }
}

/* one page (1.4.0): form and state on the left, summary on the right; summary first and collapsed on phones */
.bjm-checkout__row { display: flex; flex-wrap: wrap; }
.bjm-checkout__row > [class*="col-"] { float: none; }
.bjm-checkout__aside { order: -1; margin-bottom: .75rem; }
@media (min-width: 992px) {
  .bjm-checkout__aside { order: 2; margin-bottom: 0; }
  .bjm-checkout__aside .bjm-summary { position: sticky; top: 1rem; }
}
.bjm-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bjm-checkout__main .bjm-card { margin-bottom: 0; }
.bjm-checkout__main .bjm-card + .bjm-card, .bjm-state-slot .bjm-card, .bjm-state > .alert { border-top: 1px solid #eee; }
.bjm-state > .alert { margin: 1rem 1.25rem 0; }
.bjm-delivery { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; }
.bjm-delivery__title { font-size: 1rem; font-weight: 700; margin: 0 0 .85rem; }
.bjm-save { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .5rem; }
.bjm-save__status { margin: 0; font-size: .875rem; color: #555; }
.bjm-save__status--alert { color: #c0392b; font-weight: 600; }
.bjm-checkout[data-bjm-busy="1"] .bjm-state, .bjm-checkout[data-bjm-busy="1"] .bjm-summary { opacity: .55; transition: opacity .15s; }
.bjm-checkout[data-bjm-dirty] .bjm-shipping__line strong, .bjm-checkout[data-bjm-dirty] .bjm-option__total strong { color: #9a9a9a; text-decoration: line-through; }
.bjm-checkout [data-bjm-op-submit]:disabled { opacity: .5; cursor: not-allowed; }
.bjm-shipping__row { display: flex; align-items: center; gap: .9rem; }
.bjm-shipping__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 10px; background: rgba(120, 40, 200, .08); border: 1px solid rgba(120, 40, 200, .18); }
.bjm-shipping__icon img { width: 1.75rem; height: 1.75rem; display: block; }
.bjm-shipping__row .bjm-shipping__line, .bjm-shipping__row .bjm-shipping__text { flex: 1; }
.bjm-shipping__line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; font-size: 1.05rem; color: #232323; }
.bjm-shipping__line strong { white-space: nowrap; font-size: 1.1rem; }
.bjm-shipping__line strong { white-space: nowrap; }
.bjm-shipping__text { margin: 0; font-size: .95rem; }
.bjm-shipping__note { margin: .25rem 0 0; font-size: .8rem; color: #7a7a7a; }
.bjm-shipping__note--fiscal { margin: .4rem 0 0 3.9rem; }
.bjm-method--fixed { cursor: default; }
.bjm-conditions { margin: 0 0 .85rem; font-size: .9rem; font-weight: 400; color: #232323; }
.bjm-conditions a { color: #7828C8; text-decoration: underline; }
.bjm-option { margin-bottom: 1rem; padding: 1rem; border-radius: 8px; }
.bjm-checkout .bjm-route-notice {
  margin-bottom: 1rem;
  background-color: #fbf9fe;
  border: 1px solid rgba(120, 40, 200, 0.35);
  border-left: 4px solid #7828C8;
  color: #232323;
  border-radius: 6px;
  padding: .85rem 1.15rem;
  font-size: .95rem;
  line-height: 1.45;
}
.bjm-summary__toggle { display: none; }
@media (max-width: 991px) {
  .bjm-summary__toggle:not([hidden]) { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .25rem 0; border: 0; background: none; color: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
  .bjm-summary__toggle::after { content: ''; width: .5rem; height: .5rem; margin-left: .25rem; border-right: 2px solid #7828C8;
    border-bottom: 2px solid #7828C8; transform: rotate(45deg); transition: transform .15s; }
  .bjm-summary__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .bjm-summary__toggle strong { margin-left: auto; color: #7828C8; }
  .bjm-summary__toggle:not([hidden]) ~ .bjm-summary__title { display: none; }
  .bjm-summary__toggle[aria-expanded="true"] { margin-bottom: .75rem; }
}

/* country combobox and town suggestions */
.bjm-combo { position: relative; }
.bjm-combo__flag { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); line-height: 0; pointer-events: none; }
.bjm-checkout .bjm-combo__input { padding-left: 2.6rem; }
.bjm-flag { display: inline-flex; flex: 0 0 20px; width: 20px; height: 15px; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.bjm-flag img { width: 20px; height: 15px; object-fit: cover; display: block; }
.bjm-flag--none { background: repeating-linear-gradient(135deg, #eee 0 3px, #f8f8f8 3px 6px); }
.bjm-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem 0;
  list-style: none; background: #fff; border: 1px solid rgba(120, 40, 200, .35); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.bjm-combo__option { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .75rem; cursor: pointer; font-size: .95rem; }
.bjm-combo__option small { margin-left: auto; color: #7a7a7a; font-size: .8rem; }
.bjm-combo__option:hover, .bjm-combo__option.is-active { background: #fbf9fe; color: #5a1a99; }
.bjm-combo__option[aria-selected="true"] { font-weight: 700; }
.bjm-combo__option.is-active { outline: 2px solid #7828C8; outline-offset: -2px; }
.bjm-combo__none { padding: .6rem .75rem; color: #7a7a7a; font-size: .9rem; }
.bjm-field--suggest { position: relative; }
.bjm-suggest { top: auto; }
.bjm-suggest__hint { color: #8a5a00; }
.bjm-checkout [role="combobox"]:focus { border-color: #7828C8; box-shadow: 0 0 0 2px rgba(120, 40, 200, .15); }

/* phone input with prefix selector and flag */
.bjm-field--phone { width: 100% !important; }
.bjm-field--phone .bjm-field__label { line-height: 1.4; }
.bjm-phone-input { display: flex; position: relative; width: 100%; }
.bjm-phone-prefix { display: flex; align-items: center; justify-content: space-between; gap: .35rem; background: #f6f6f6; border: 1px solid #ccc;
  border-right: none; border-radius: 6px 0 0 6px; padding: 0 .5rem; min-height: 46px; height: auto; flex: 0 0 auto; min-width: 86px; white-space: nowrap; cursor: pointer; user-select: none; }
.bjm-phone-prefix:hover, .bjm-phone-prefix:focus { background: #eee; border-color: #7828C8; outline: none; }
.bjm-phone-prefix__value { font-size: 14px; font-weight: 600; color: #232323; }
.bjm-phone-prefix__chevron { font-size: 11px; color: #666; margin-left: 2px; }
.bjm-phone-prefix__dropdown {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 1rem)); max-height: 280px;
  background: #fff; border: 1px solid #7828C8; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 1050; display: flex; flex-direction: column; overflow: hidden;
}
.bjm-phone-prefix__dropdown[hidden] { display: none !important; }
.bjm-phone-prefix__search-wrap { padding: .5rem; background: #fbf9fe; border-bottom: 1px solid #eee; }
.bjm-phone-prefix__search { height: 36px; font-size: 13px; padding: .35rem .6rem; border-radius: 4px; width: 100%; }
.bjm-phone-prefix__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 220px; }
.bjm-phone-prefix__option {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid #f6f6f6; transition: background .15s ease;
}
.bjm-phone-prefix__option:hover, .bjm-phone-prefix__option.is-highlighted { background: #fbf9fe; color: #7828C8; }
.bjm-phone-prefix__option.is-selected { background: #f3ebf9; font-weight: 600; }
.bjm-phone-prefix__option-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bjm-phone-prefix__option-code { color: #555; font-size: 12px; }

.bjm-checkout .bjm-phone-number { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  flex: 1 1 auto; min-width: 0; }
.bjm-field.has-error .bjm-phone-prefix { border-color: #c0392b; }

/* notes / special delivery instructions */
.bjm-notes { margin-top: .75rem; width: 100%; }
.bjm-notes__input { min-height: 56px; resize: vertical; }

/* dirty state banner & cta banner */
.bjm-dirty-notice {
  background-color: #fbf9fe; border: 1px solid #7828C8; color: #5a1a99;
  border-radius: 6px; padding: .75rem 1rem; margin-bottom: .75rem; font-size: 13px;
  font-weight: 600; line-height: 1.4;
}
.bjm-dirty-notice[hidden] { display: none !important; }
.bjm-checkout .bjm-dirty-cta-banner { margin-bottom: .75rem; font-weight: 600; cursor: pointer; text-align: center;
  background-color: #fbf9fe; border: 1px solid #7828C8; color: #5a1a99; }

/* confirmation option divider */
.bjm-option-divider {
  display: flex; align-items: center; text-align: center; margin: 1.25rem 0; color: #767676;
  font-size: 13px; font-weight: 600;
}
.bjm-option-divider::before, .bjm-option-divider::after {
  content: ''; flex: 1; border-bottom: 1px dashed #d1c4e9;
}
.bjm-option-divider span { padding: 0 1rem; background: #fff; }

/* guest account creation */
.bjm-field--create-account { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid #f0f0f0; }
.bjm-password-box { margin-top: .75rem; padding: .75rem; background: #fbf9fe; border: 1px solid #e2d9f3; border-radius: 6px; }
.bjm-password-box[hidden] { display: none !important; }
.bjm-password-box .bjm-field__label { margin-bottom: .35rem; }
.bjm-password-box .bjm-field__hint { display: block; margin-top: .35rem; font-size: 12px; color: #666; }

/* login drawer form formatting */
.bjm-login, .bjm-login__summary, .bjm-login .form-control-label, .bjm-login .forgot-password { line-height: 1.4; }
.bjm-login .form-group.row { display: flex; flex-direction: column; margin-left: 0; margin-right: 0; margin-bottom: 1rem; }
.bjm-login .form-control-label { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  text-align: left !important; padding: 0 0 .35rem 0 !important; font-weight: 600; font-size: 13px; }
.bjm-login .col-md-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
/* The native table group gives its button column width:1%. Reset both columns for flex,
   and include padding in field widths even when the theme uses content-box on desktop. */
.bjm-login .form-control { box-sizing: border-box; width: 100%; min-width: 0; height: auto; min-height: 46px; }
.bjm-login .input-group { display: flex; width: 100%; align-items: stretch; }
.bjm-login .input-group .form-control { flex: 1 1 0; width: 0; float: none; border-radius: 6px 0 0 6px; }
.bjm-login .input-group .input-group-btn { display: flex; flex: 0 0 auto; width: auto; height: auto; }
.bjm-login .input-group .input-group-btn > .btn[data-action="show-password"] {
  box-sizing: border-box; height: auto; min-height: 46px; border-radius: 0 6px 6px 0; border: 1px solid #ccc;
  border-left: none; background: #f6f6f6; color: #555; font-size: .75rem; font-weight: 600; padding: .5rem .75rem; }
.bjm-login .input-group .btn:focus-visible { outline: 2px solid #7828C8; outline-offset: 2px; }
.bjm-login .forgot-password { display: block; margin-top: .5rem; font-size: 13px; color: #7828C8; }
.bjm-login .form-footer { text-align: left; padding-top: .5rem; }
.bjm-login .form-footer .btn-primary { background: #7828C8; border-color: #7828C8; min-height: 46px; height: auto; font-size: 15px;
  box-sizing: border-box; max-width: 100%; white-space: normal; font-weight: 600; border-radius: 6px; padding: .5rem 1.5rem; }

/* desktop wide layout (1.4.1): side-by-side cards to reduce vertical scrolling */
.bjm-form__actions { margin-top: .75rem; }
@media (min-width: 1200px) {
  #module-bijuymodacheckout-checkout #wrapper .container,
  #module-bijuymodacheckout-result #wrapper .container {
    max-width: 1320px;
    width: 95%;
  }
  .bjm-form__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0;
  }
  .bjm-form__cards > .bjm-card {
    margin-bottom: 0 !important;
    border-top: none !important;
    height: 100%;
  }
  .bjm-form__cards > .bjm-card .card-block {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

/* VIES V1 (1.5.0): status under the VAT field. A signal, never an error: it does not block the save or the quote.
   Tones from DESIGN.md §5 (AA on their own background): green = valid, amber = needs attention, neutral = information. */
.bjm-vies-slot { width: 100%; padding: 0 .5rem; }
.bjm-vies { margin: -.35rem 0 .85rem; padding: .5rem .75rem; border-left: 3px solid #b8b8b8; border-radius: 0 6px 6px 0;
  background: #f6f6f6; color: #444; font-size: .8rem; line-height: 1.4; }
.bjm-vies[hidden] { display: none; }
.bjm-checkout .bjm-vies .bjm-vies__text { margin: 0; color: inherit; font-size: inherit; }
.bjm-vies--valid { border-left-color: #217C57; background: #E7F7EF; color: #217C57; }
.bjm-vies--invalid, .bjm-vies--format, .bjm-vies--unavailable { border-left-color: #886800; background: #FBF1D6; color: #886800; }
.bjm-vies--checking { border-left-color: #7828C8; background: #F4ECFB; color: #4A1A7A; }
.bjm-vies__spinner { display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em; border: 2px solid #C9A8EC;
  border-top-color: #7828C8; border-radius: 50%; animation: bjm-vies-spin .8s linear infinite; }
@keyframes bjm-vies-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bjm-vies__spinner { animation-duration: 2.4s; } }
.bjm-vies__recheck { padding: 0; margin-top: .25rem; font-size: .8rem; font-weight: 600; color: #7828C8; text-decoration: underline; }

/* 1.5.1: one optional tax number field; the EU hint sits under it. RE is a clear, visible option for Spain (Pablo). */
.bjm-vat-hint { width: 100%; margin: -.35rem .5rem .85rem; color: #555; font-size: .8rem; line-height: 1.4; }
.bjm-vat-hint[hidden] { display: none; }
.bjm-surcharge { margin-top: .25rem; }
.bjm-surcharge__option { padding: .7rem .9rem; border: 1px solid #d8cdea; border-radius: 8px; background: #faf7fd; font-size: .95rem;
  font-weight: 700; color: #2b2b2b; transition: border-color .15s, background-color .15s; }
.bjm-surcharge__option:hover { border-color: #7828C8; }
.bjm-surcharge__option:has(input:checked) { border-color: #7828C8; background: #f3ecfb; }
.bjm-surcharge__option:has(input:focus-visible) { outline: 2px solid #7828C8; outline-offset: 2px; }
.bjm-surcharge .bjm-field__hint { margin-left: .1rem; }
.bjm-summary__note--exempt { color: #217C57; font-weight: 600; }

/* 1.8.0: observations of a quote request. A question the customer can open; nothing in it is required. */
.bjm-quote-notes { margin: 0 0 .9rem; padding: .6rem .8rem; border: 1px solid #d8cdea; border-radius: 8px; background: #faf7fd; }
.bjm-quote-notes__title { cursor: pointer; font-size: .9rem; font-weight: 700; color: #4A1A7A; list-style-position: outside; }
.bjm-quote-notes__title:focus-visible { outline: 2px solid #7828C8; outline-offset: 2px; }
.bjm-quote-notes[open] .bjm-quote-notes__title { margin-bottom: .5rem; }
.bjm-quote-notes__reasons { margin: 0 0 .6rem; padding: 0; border: 0; }
.bjm-quote-notes__legend { margin-bottom: .25rem; font-size: .8rem; font-weight: 400; color: #555; }
.bjm-quote-notes__reason { font-weight: 400; font-size: .875rem; }
.bjm-quote-notes__input { display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 4.5rem; font-size: .875rem; }