/* Additional styles (generic): includes 7.css-like balloon and alert box */

/* 7.css Balloon (scoped) */
.is-style-7css-balloon {
	--w7-el-bdr: 3px;
	--w7-el-bg-s-1: #ebebeb;
	--w7-bl-bd: #0006;
	--w7-blt-size: 18px;
	--w7-blt-offset: 1em;
}

.is-style-7css-balloon {
	background: linear-gradient(to bottom, #fff, var(--w7-el-bg-s-1));
	border: 1px solid var(--w7-bl-bd);
	border-radius: var(--w7-el-bdr);
	box-shadow: 5px 5px 3px -3px var(--w7-bl-bd);
	padding: 1em 1em 1em 2.5em;
	position: relative;
}

.is-style-7css-balloon:before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
	content: "";
	height: var(--w7-blt-size);
	left: var(--w7-blt-offset);
	position: absolute;
	top: calc(var(--w7-blt-size) * -1);
	width: var(--w7-blt-size);
}

.is-style-7css-balloon.is-top:before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23ebebeb' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
	bottom: calc(var(--w7-blt-size) * -1);
	top: unset;
	transform: scale(-1);
}

.is-style-7css-balloon.is-top.is-right:before { transform: scaleY(-1); }

.is-style-7css-balloon.is-left:before {
	left: unset;
	right: var(--w7-blt-offset);
}

.is-style-7css-balloon.is-left.is-bottom:before { transform: scaleX(-1); }

.is-style-7css-balloon.is-left,
.is-style-7css-balloon.is-left.is-bottom { padding-right: 2.5em; }


/* Alert Warning box (scoped) */
.is-style-alert-warning {
	--aw-frame: 8px;
	--aw-radius: 10px;
	--aw-inner-border: 3px;
	--aw-stripe-dark: #000;
	--aw-stripe-accent: #f7c600;
	--aw-text: #111;
	--aw-shadow: 0 6px 18px rgba(0,0,0,.25);
	--aw-gap: 12px;
	--aw-icon-size: 36px;

	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: var(--aw-gap);
	color: var(--aw-text);
	line-height: 1.6;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

	border-radius: var(--aw-radius);
	border: var(--aw-frame) solid transparent;
	padding: 14px 16px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		repeating-linear-gradient(45deg, var(--aw-stripe-dark) 0 12px, var(--aw-stripe-accent) 12px 24px) border-box;
	box-shadow: var(--aw-shadow), inset 0 0 0 var(--aw-inner-border) #111;
}

.is-style-alert-warning::before {
	content: "";
	display: block;
	width: var(--aw-icon-size);
	height: var(--aw-icon-size);
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='warnGrad' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd54d'/%3E%3Cstop offset='1' stop-color='%23f7b500'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M28.9 6.9 3.7 51.8A6 6 0 0 0 8.9 61h46.2a6 6 0 0 0 5.2-9.2L35.1 6.9a6 6 0 0 0-6.2 0z' fill='url(%23warnGrad)' stroke='%23111' stroke-width='3' /%3E%3Crect x='30' y='22' width='4' height='18' rx='2' fill='%23111'/%3E%3Ccircle cx='32' cy='46' r='3' fill='%23111'/%3E%3C/svg%3E");
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}

.is-style-alert-warning p:first-child { margin-top: 0; }
.is-style-alert-warning p:last-child  { margin-bottom: 0; }