/*!
 =============================================================================
 Project      : DLE Plugin — bogpay
 File         : bogpay.css

 Description  : Front-end styles. Every class is bp- prefixed so nothing here
                can collide with the site's own CSS, and the palette lives in
                custom properties at the top — restyle by changing these, not
                by rewriting the rules.

 Developer    : ნიკა შველიძე (Nika Shvelidze)
 Company      : Diveloper.Digital   ·   https://diveloper.digital

 Version      : 1.0.0
 Copyright    : © 2026 Diveloper.Digital. All Rights Reserved.
 =============================================================================
*/

/* Brand the plugin by overriding these four in your own copy of this file.
   The defaults are deliberately colourless: they take the surrounding text
   colour, so the button reads correctly on a light or a dark template without
   knowing anything about either. A shipped blue would look wrong on most
   sites — as it did on the first install, against a dark gold theme. */
.bp-inline,
.bp-checkout {
	--bp-accent: transparent;
	--bp-accent-text: inherit;
	--bp-accent-border: currentColor;
	--bp-border: currentColor;
	--bp-muted: inherit;
	--bp-radius: 4px;
	--bp-bg: transparent;
}

/* No card, no background, no border: the block sits inside whatever the theme
   already built. Only spacing and the button itself are ours.

   Every text-sizing property is stated explicitly rather than inherited. A
   theme with an unusual line-height stretched this button to 199px instead of
   43px — a plugin that lands in unknown templates cannot leave line boxes to
   whatever it inherits. */
.bp-inline {
	margin: 14px 0;
	line-height: 1.4;
	font-size: 15px;

	/* Older DLE templates are built on floats — artlinegroup's course card
	   floats every one of its rows. A non-floated block dropped into that
	   context gets caught beside the floats and stretched: the button
	   rendered 202px tall instead of 43px. Clearing is what makes an injected
	   block behave in a float layout, and it also puts the button below the
	   price rather than across them. */
	clear: both;
	width: 100%;
	box-sizing: border-box;
}

/* Plain text, not pills: a row of outlined chips reads as clutter next to a
   template that already lists what it accepts. */
.bp-methods-line {
	margin-top: 7px;
	font-size: 12px;
	opacity: 0.7;
}

.bp-chip {
	white-space: nowrap;
}

.bp-chip + .bp-chip::before {
	content: ' · ';
	opacity: 0.6;
}

.bp-btn {
	display: block;
	box-sizing: border-box;
	text-align: center;
	background: var(--bp-accent);
	color: var(--bp-accent-text);
	padding: 11px 16px;
	border: 1px solid var(--bp-accent-border);
	border-radius: var(--bp-radius);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	height: auto;
	min-height: 0;
}

.bp-btn:hover,
.bp-btn:focus {
	opacity: 0.85;
	color: var(--bp-accent-text);
	text-decoration: none;
}

/* --- checkout ------------------------------------------------------------ */

.bp-checkout {
	max-width: 520px;
	margin: 30px auto;
	font-size: 15px;
}

.bp-checkout h1 {
	font-size: 22px;
	margin: 0 0 6px;
}

.bp-summary {
	background: #f7f8fa;
	border-radius: var(--bp-radius);
	padding: 16px 18px;
	margin-bottom: 22px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.bp-summary strong {
	font-size: 22px;
}

.bp-field {
	margin-bottom: 16px;
}

.bp-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

.bp-field input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--bp-border);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
}

.bp-methods {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
}

.bp-method {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--bp-border);
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
}

.bp-method:has(input:checked) {
	border-color: var(--bp-accent);
	background: #f2f7fd;
}

.bp-errors {
	background: #fdeaea;
	border: 1px solid #f0bcbc;
	color: #8d2020;
	padding: 12px 14px;
	border-radius: 8px;
	margin-bottom: 18px;
}

.bp-note {
	color: var(--bp-muted);
	font-size: 13px;
	margin-top: 14px;
}

.bp-result {
	max-width: 520px;
	margin: 40px auto;
	text-align: center;
}

.bp-result h1 {
	font-size: 22px;
	margin-bottom: 10px;
}

/* The bank's calculator is injected into our DOM rather than an iframe, so our
   CSS reaches it. On phones it clips its own header under the address bar —
   verified on a real device; Chrome's emulator does not reproduce it. */
@media (max-width: 600px) {
	.bog-smart-modal-wrapper {
		top: 0 !important;
		height: 100% !important;
		max-height: 100% !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		padding-top: 64px !important;
		box-sizing: border-box !important;
	}
}

/* --- not available yet ----------------------------------------------------
   A method the merchant has not switched on is shown dimmed and marked rather
   than hidden: a customer who came looking for it learns it is coming, instead
   of concluding the shop stopped taking it.
   -------------------------------------------------------------------------- */
.bp-soon {
	opacity: 0.45;
	cursor: not-allowed;
}

.bp-soon input {
	pointer-events: none;
}

/* --- blocked submit -------------------------------------------------------
   The button stays visible and says why, rather than silently refusing.
   -------------------------------------------------------------------------- */
.bp-blocked,
button.bp-blocked,
input.bp-blocked {
	opacity: 0.5;
	cursor: not-allowed;
}
/*! artlinegroup.ge overrides for bogpay — regenerate bogpay.css as base + this file */

/* --- artlinegroup.ge -------------------------------------------------------
   Site-specific branding. This is the whole customisation surface: four
   variables, matched to the template's own gold accent, square corners and
   dark surfaces. Nothing structural is touched, so a plugin update that
   changes the layout still lands cleanly.
   -------------------------------------------------------------------------- */
.bp-inline,
.bp-checkout {
	--bp-accent: #c99c37;
	--bp-accent-text: #1a1a1a;
	--bp-accent-border: #c99c37;
	--bp-radius: 0;
}

.bp-inline .bp-btn {
	font-size: 14px;
	letter-spacing: .2px;
}

.bp-checkout .bp-field input {
	background: #2d3138;
	border: 1px solid #3b4452;
	border-radius: 0;
	color: #fff;
}

.bp-checkout .bp-summary {
	background: #2d3138;
	border-radius: 0;
	color: #fff;
}

.bp-checkout .bp-method {
	border: 1px solid #3b4452;
	border-radius: 0;
}

/* --- artlinegroup.ge: payment controls read as radios ----------------------
   These options are mutually exclusive (one name="payment" group), but the
   template draws them as a square box with a tick — which promises the
   customer they can pick several. Rounding the control and swapping the tick
   for a dot makes the markup and the picture agree.
   -------------------------------------------------------------------------- */
.payment-option span {
	border-radius: 50%;
}

.payment-option input:checked + span::after {
	content: "";
	width: 9px;
	height: 9px;
	left: 3px;
	top: 3px;
	border-radius: 50%;
	line-height: 0;
}

/* One row per option on desktop: name on the left, badge on the right, both on
   the same line. The badge is a pill, so its text has to stay short. */
.installment-item .installment-price {
	white-space: nowrap;
	flex: 0 0 auto;
}

.installment-item .installment-name {
	overflow-wrap: anywhere;
}