/* Sticky How-to-Buy floating button + slide-out panel.
 * Same palette as the rest of the site (DESIGN.md): accent #B86B0B,
 * dark #231508, cream #FFFCF2, hairline #e9ddc9.
 * Scoped under .shtb-* to avoid collisions.
 */

/* ── Design tokens ──────────────────────────────────────────────── */
:root{
	--shtb-accent:#B86B0B;
	--shtb-accent-hover:#a35f09;
	--shtb-ink:#231508;
	--shtb-ink-soft:#6b5b4a;
	--shtb-cream:#FFFCF2;
	--shtb-line:#e9ddc9;
	--shtb-gold-soft:#C9A573;
	--shtb-panel-w:380px;
	--shtb-fab-top:160px;             /* below header / admin bar */
	--shtb-z:99990;                   /* below WP admin-bar (99999) */
}

/* ── Vertical tab (right edge, top area) ────────────────────────── */
.shtb-fab{
	position:fixed !important;
	right:0 !important;
	top:var(--shtb-fab-top) !important;
	z-index:var(--shtb-z) !important;
	display:flex !important;
	align-items:center !important;
	gap:6px !important;
	background:var(--shtb-accent) !important;
	color:#fff !important;
	border:none !important;
	/* Rotate so text reads top-to-bottom; anchor at top-right corner */
	writing-mode:vertical-rl !important;
	text-orientation:mixed !important;
	border-radius:10px !important;
	padding:16px 10px !important;
	cursor:pointer !important;
	font-family:"Manrope",sans-serif !important;
	font-size:12.5px !important;
	font-weight:700 !important;
	letter-spacing:.05em !important;
	line-height:1.4 !important;
	text-decoration:none !important;
	text-transform:none !important;
	box-shadow:-2px 4px 16px rgba(184,107,11,.25) !important;
	transition:background .2s ease,
	           box-shadow .25s ease,
	           transform .25s cubic-bezier(.4,0,.2,1) !important;
	animation:shtb-breathe 3.5s ease-in-out 2s infinite;
	-webkit-tap-highlight-color:transparent;
}
html[lang="th"] .shtb-fab{font-family:"IBM Plex Sans Thai",sans-serif;}
.shtb-fab:hover{
	background:var(--shtb-accent-hover) !important;
	box-shadow:-2px 6px 20px rgba(184,107,11,.35);
	animation:none;
}
.shtb-fab:active{transform:scale(.97);}

/* Breathing keyframes — gentle nudge out + shadow swell */
@keyframes shtb-breathe{
	0%,100%{
		transform:translateX(0);
		box-shadow:-2px 4px 16px rgba(184,107,11,.25);
	}
	50%{
		transform:translateX(-5px);
		box-shadow:-4px 6px 22px rgba(184,107,11,.4);
	}
}

/* Accent left-border with glow pulse in sync */
.shtb-fab::before{
	content:"";
	position:absolute;
	left:0;top:8px;bottom:8px;
	width:3px;
	border-radius:2px;
	background:rgba(255,255,255,.5);
	opacity:.7;
	animation:shtb-bar-glow 3.5s ease-in-out 2s infinite;
}
@keyframes shtb-bar-glow{
	0%,100%{opacity:.5;box-shadow:none;}
	50%{opacity:1;box-shadow:0 0 8px rgba(255,255,255,.4);}
}
.shtb-fab:hover::before{opacity:1;animation:none;}

.shtb-fab-icon{
	flex:none;
	width:20px;height:20px;
	display:flex;align-items:center;justify-content:center;
}
.shtb-fab-icon svg{width:20px;height:20px;}
.shtb-fab-text{white-space:nowrap;}

/* When panel is open, hide the tab */
.shtb-fab[aria-expanded="true"]{
	pointer-events:none;
	opacity:0;
	transform:translateX(20px);
}

/* ── Backdrop overlay ───────────────────────────────────────────── */
.shtb-overlay{
	position:fixed;
	inset:0;
	z-index:calc(var(--shtb-z) + 1);
	background:rgba(35,21,8,.45);
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease, visibility .3s ease;
	-webkit-tap-highlight-color:transparent;
}
.shtb-overlay.shtb-open{opacity:1;visibility:visible;}

/* ── Slide-out panel ────────────────────────────────────────────── */
.shtb-panel{
	position:fixed;
	top:0;right:0;bottom:0;
	z-index:calc(var(--shtb-z) + 2);
	width:var(--shtb-panel-w);
	max-width:100vw;
	background:var(--shtb-cream);
	transform:translateX(100%);
	transition:transform .35s cubic-bezier(.4,0,.2,1);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	box-shadow:-4px 0 30px rgba(35,21,8,.12);
	font-family:"Manrope",sans-serif;
}
html[lang="th"] .shtb-panel{font-family:"IBM Plex Sans Thai",sans-serif;}
.shtb-panel[aria-hidden="false"]{transform:translateX(0);}

.shtb-panel-inner{
	display:flex;
	flex-direction:column;
	min-height:100%;
	padding:24px 20px 32px;
}

/* ── Panel header ───────────────────────────────────────────────── */
.shtb-panel-header{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:24px;
}
.shtb-panel-title-row{display:flex;align-items:center;gap:12px;}
.shtb-panel-icon{
	flex:none;
	width:44px;height:44px;
	border-radius:12px;
	background:var(--shtb-ink);
	color:var(--shtb-cream);
	display:flex;align-items:center;justify-content:center;
}
.shtb-panel-icon svg{width:22px;height:22px;}
.shtb-panel-h2{
	margin:0;
	font-size:18px;
	font-weight:800;
	color:var(--shtb-ink);
	line-height:1.2;
}
.shtb-panel-sub{
	margin:2px 0 0;
	font-size:13px;
	color:var(--shtb-ink-soft);
	line-height:1.4;
}

.shtb-close{
	flex:none;
	width:36px;height:36px;
	display:flex;align-items:center;justify-content:center;
	border:none;
	background:transparent;
	color:var(--shtb-ink-soft);
	border-radius:8px;
	cursor:pointer;
	transition:background .15s ease,color .15s ease;
	-webkit-tap-highlight-color:transparent;
}
.shtb-close:hover{background:var(--shtb-line);color:var(--shtb-ink);}
.shtb-close svg{width:20px;height:20px;}

/* ── Steps list ─────────────────────────────────────────────────── */
.shtb-steps{
	list-style:none;
	margin:0;padding:0;
	display:flex;
	flex-direction:column;
	gap:2px;
	flex:1;
}
.shtb-step{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border-radius:10px;
	transition:background .15s ease;
	position:relative;
}
.shtb-step:hover{background:rgba(184,107,11,.06);}

/* Connector line between steps */
.shtb-step:not(:last-child)::after{
	content:"";
	position:absolute;
	left:34px;        /* centered under step-icon */
	top:calc(100%);
	width:2px;
	height:2px;
	background:var(--shtb-line);
}

/* Icon circle – matches trust-pillar .tp-icon aesthetic */
.shtb-step-icon{
	flex:none;
	width:40px;height:40px;
	display:flex;align-items:center;justify-content:center;
	background:#fce9d8;
	border-radius:12px;
	color:#e8792b;
}
.shtb-step-icon svg{width:20px;height:20px;display:block;}
.shtb-step-text{
	flex:1;
	font-size:14px;
	font-weight:500;
	color:var(--shtb-ink);
	line-height:1.35;
}

/* ── Full guide CTA ─────────────────────────────────────────────── */
.shtb-full-guide{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-top:24px;
	padding:14px 20px;
	background:var(--shtb-accent);
	color:#fff;
	font-size:14px;
	font-weight:700;
	border-radius:10px;
	text-decoration:none;
	transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.shtb-full-guide:hover{
	background:var(--shtb-accent-hover);
	transform:translateY(-1px);
	box-shadow:0 4px 14px rgba(184,107,11,.3);
	color:#fff;
}
.shtb-full-guide:active{transform:translateY(0);box-shadow:none;}

/* ── Admin-bar offset ───────────────────────────────────────────── */
.admin-bar .shtb-panel{top:32px;}
.admin-bar .shtb-fab{top:calc(var(--shtb-fab-top) + 32px);}

/* ── Mobile responsive ──────────────────────────────────────────── */

/* Tablet and below: panel goes full-width */
@media (max-width:480px){
	:root{--shtb-panel-w:100vw;}

	.shtb-fab{
		padding:12px 8px;
		font-size:11.5px;
		letter-spacing:.04em;
	}
	.shtb-fab-icon svg{width:18px;height:18px;}
	.shtb-fab-icon{width:18px;height:18px;}

	.shtb-panel-inner{padding:20px 16px 28px;}
	.shtb-panel-h2{font-size:16px;}
	.shtb-step{padding:10px 10px;gap:10px;}
	.shtb-step-text{font-size:13.5px;}
	.shtb-step-icon{width:34px;height:34px;border-radius:10px;}
	.shtb-step-icon svg{width:17px;height:17px;}
}

@media (max-width:480px){
	.admin-bar .shtb-fab{top:calc(var(--shtb-fab-top) + 46px);}
	.admin-bar .shtb-panel{top:46px;}
}

/* Very short screens: tighten spacing */
@media (max-height:600px){
	.shtb-step{padding:8px 10px;}
	.shtb-panel-inner{padding-top:16px;padding-bottom:20px;}
	.shtb-panel-header{margin-bottom:16px;}
	.shtb-full-guide{margin-top:16px;padding:12px 16px;}
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
	.shtb-fab,
	.shtb-panel,
	.shtb-overlay,
	.shtb-step,
	.shtb-full-guide{transition:none;}
	.shtb-fab,
	.shtb-fab::before{animation:none;}
}