/* * ========================================================= * COS – Barion accepted payment methods mark * ========================================================= * * The image itself is the official, unmodified Barion * accepted-payment-methods logo strip. * * This stylesheet only controls placement and responsive * scaling. No filters, recoloring, cropping or distortion. * ========================================================= */ .barion-payment-mark { box-sizing: border-box; color: var(--text, #0f172a); } .barion-payment-mark__copy { min-width: 0; } .barion-payment-mark__title { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 800; } .barion-payment-mark__text { margin: 3px 0 0; color: var(--muted, #64748b); font-size: 11px; line-height: 1.45; } .barion-payment-mark__strip { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 12px; background: #ffffff; } .barion-payment-mark__image { display: block; width: auto; max-width: 100%; height: auto; /* * Intentionally no filter / opacity / object crop. * Preserve the official Barion artwork. */ } /* * Public / main entry: * külön lebegő jelzés a TID gate jobb alsó sarkában. */ .barion-payment-mark--login { position: absolute; right: 22px; bottom: 18px; width: 200px; margin: 0; padding: 0; text-align: center; z-index: 2; } .barion-payment-mark--login .barion-payment-mark__copy { margin-bottom: 5px; } .barion-payment-mark--login .barion-payment-mark__title { font-size: 10px; font-weight: 700; opacity: .68; } .barion-payment-mark--login .barion-payment-mark__strip { width: 100%; padding: 5px 7px; border-radius: 9px; } .barion-payment-mark--login .barion-payment-mark__image { width: 100%; max-width: 180px; } @media (max-width: 680px) { .barion-payment-mark--login { right: 50%; bottom: 12px; width: min(180px, calc(100vw - 32px)); transform: translateX(50%); } .barion-payment-mark--login .barion-payment-mark__image { max-width: 160px; } } /* * Org360 invoice/payment area. */ .barion-payment-mark--payment { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, rgba(15, 23, 42, 0.10)); } .barion-payment-mark--payment .barion-payment-mark__image { max-width: 320px; } @media (max-width: 680px) { .barion-payment-mark--payment { align-items: flex-start; flex-direction: column; } .barion-payment-mark--payment .barion-payment-mark__strip { width: 100%; } .barion-payment-mark--payment .barion-payment-mark__image { max-width: 100%; } } /* COS BARION PAYMENT MARK V3 – FIXED CORNER + THEME */ /* * A COS theme.js mindig a data-theme attribútumát * állítja light/dark értékre. * * A két Barion grafika eredeti, módosítatlan hivatalos * asset. CSS csak azt dönti el, melyik látható. */ .barion-payment-mark__image--light { display: block; } .barion-payment-mark__image--dark { display: none; } html[data-theme="dark"] .barion-payment-mark__image--light { display: none; } html[data-theme="dark"] .barion-payment-mark__image--dark { display: block; } html[data-theme="light"] .barion-payment-mark__image--light { display: block; } html[data-theme="light"] .barion-payment-mark__image--dark { display: none; } /* * Ne legyen saját fehér doboz a Barion grafika körül. * Az official light/dark asset a COS aktuális * felületén jelenik meg. */ .barion-payment-mark__strip { background: transparent; border-color: transparent; box-shadow: none; } /* * LOGIN * * Ez most TÉNYLEG a viewport jobb alsó sarka. * Nem a TID card, nem a grid és nem a page alja. */ .barion-payment-mark--login { position: fixed !important; top: auto !important; left: auto !important; right: max( 16px, env(safe-area-inset-right) ) !important; bottom: max( 16px, env(safe-area-inset-bottom) ) !important; width: 164px !important; max-width: 164px !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 20; pointer-events: none; text-align: right; } /* * Loginon csak a hivatalos logo strip kell. * A magyarázó szöveg az Org360-on megmarad. */ .barion-payment-mark--login .barion-payment-mark__copy { display: none; } .barion-payment-mark--login .barion-payment-mark__strip { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; } .barion-payment-mark--login .barion-payment-mark__image { width: 100%; max-width: 164px; height: auto; margin: 0 0 0 auto; } /* * FONTOS: * Szűk viewporton SEM tesszük középre. * Továbbra is jobb alsó sarok marad. */ @media (max-width: 680px) { .barion-payment-mark--login { right: max( 10px, env(safe-area-inset-right) ) !important; bottom: max( 10px, env(safe-area-inset-bottom) ) !important; width: 144px !important; max-width: 144px !important; transform: none !important; } .barion-payment-mark--login .barion-payment-mark__image { max-width: 144px; } } /* * Org360: * ugyanaz a light/dark official asset váltás, * de maga a blokk marad a számlázási területen. */ .barion-payment-mark--payment .barion-payment-mark__strip { background: transparent; } /* ========================================================= * COS Barion Payment Mark V4 * Org360 logo strip mérete = Login logo strip mérete * ========================================================= */ .barion-payment-mark--payment .barion-payment-mark__strip { flex: 0 0 164px; width: 164px; max-width: 164px; padding: 0; border: 0; border-radius: 0; } .barion-payment-mark--payment .barion-payment-mark__image { width: 100%; max-width: 164px; height: auto; } @media (max-width: 680px) { .barion-payment-mark--payment .barion-payment-mark__strip { flex-basis: 144px; width: 144px; max-width: 144px; } .barion-payment-mark--payment .barion-payment-mark__image { width: 100%; max-width: 144px; } }