/* Royal Shop.com 導流彈窗.
   Borrows the theme's variables where they exist and falls back to literals, so the plugin still
   looks right if it is ever activated under a different theme. z-index sits above 100000, which is
   the highest the theme itself uses. */

.royal-scp{
	position:fixed;inset:0;z-index:100010;
	display:flex;align-items:center;justify-content:center;
	padding:24px;
}
.royal-scp[hidden]{display:none}

.royal-scp__scrim{
	position:absolute;inset:0;background:rgba(17,17,17,.55);
	opacity:0;transition:opacity .3s ease;
}
.royal-scp.is-open .royal-scp__scrim{opacity:1}

.royal-scp__box{
	position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
	width:min(720px,100%);max-height:min(600px,calc(100vh - 48px));
	background:var(--bg,#fbfaf8);border-radius:var(--radius,10px);overflow:hidden;
	box-shadow:0 30px 70px rgba(17,17,17,.28);
	opacity:0;transform:translateY(12px) scale(.985);
	transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.royal-scp.is-open .royal-scp__box{opacity:1;transform:none}

.royal-scp__img{
	display:block;width:100%;height:100%;object-fit:cover;
	background:var(--soft,#f4f3f1);
}

.royal-scp__body{
	display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
	gap:12px;padding:clamp(26px,4vw,40px);
	font-family:var(--sans,"Jost",system-ui,sans-serif);color:var(--ink,#111);
}
.royal-scp__eyebrow{
	margin:0;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--ink-soft,#3a3a38);
}
.royal-scp__title{
	margin:0;font-family:var(--serif,"Cormorant Garamond","Noto Serif TC",Georgia,serif);
	font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;
}
.royal-scp__text{margin:0;font-size:.9rem;font-weight:300;line-height:1.75;color:var(--ink-soft,#3a3a38)}
.royal-scp__meta{
	margin:0;font-size:.66rem;letter-spacing:.06em;line-height:1.6;
	color:var(--muted,#8a8880);word-break:break-all;
}
/* The button colour comes from the settings screen as --royal-scp-btn, set inline on the dialog.
   Hover INVERTS — filled becomes outlined — which is the move the theme's own .btn makes, and the
   only one that stays visible whatever colour is chosen. The first version went from #111 to #000
   with white text in both states: a 17/255 shift in a single channel, i.e. no visible reaction.
   The 1px border is present at rest too, otherwise the button would grow by 2px on hover and
   nudge everything below it. */
.royal-scp__cta{
	margin-top:6px;padding:1.05em 2.4em;
	background:var(--royal-scp-btn,var(--ink,#111));
	color:#fff;text-decoration:none;
	border:1px solid var(--royal-scp-btn,var(--ink,#111));
	border-radius:var(--radius,10px);
	font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;
	cursor:pointer;
	transition:background .3s,color .3s,border-color .3s;
}
/* Gated on a pointer that can hover: a finger cannot leave an element, so on a phone this
   applied on tap and stayed applied until the visitor tapped elsewhere. :focus-visible and
   :active still answer keyboard and touch. */
@media (hover: hover){
.royal-scp__cta:hover{
	background:#fff;
	color:var(--royal-scp-btn,var(--ink,#111));
	border-color:var(--royal-scp-btn,var(--ink,#111));
}
}
.royal-scp__cta:focus-visible,
.royal-scp__cta:active{
	background:#fff;
	color:var(--royal-scp-btn,var(--ink,#111));
	border-color:var(--royal-scp-btn,var(--ink,#111));
}
.royal-scp__cta:focus-visible{outline:2px solid var(--royal-scp-btn,var(--ink,#111));outline-offset:2px}

/* With no image chosen the text column is the whole dialog, so let it use the width. */
.royal-scp__body--wide{grid-column:1 / -1;text-align:center;align-items:center}

.royal-scp__x{
	position:absolute;top:10px;right:10px;z-index:2;
	display:grid;place-items:center;width:34px;height:34px;
	background:var(--bg,#fbfaf8);color:var(--ink,#111);
	border:0;border-radius:50%;cursor:pointer;
	box-shadow:0 2px 8px rgba(17,17,17,.14);
	transition:background .2s,color .2s;
}
@media (hover: hover){.royal-scp__x:hover{background:var(--ink,#111);color:#fff}}
.royal-scp__x:active{background:var(--ink,#111);color:#fff}

/* Holding the page still while the dialog is up. */
html.royal-scp-locked,html.royal-scp-locked body{overflow:hidden}

@media (max-width:720px){
	.royal-scp{padding:16px}
	/* One column, and the image takes a fixed slice rather than half the height — on a short
	   phone screen an equal split leaves the text too cramped to read. */
	.royal-scp__box{grid-template-columns:1fr;max-height:calc(100vh - 32px);overflow-y:auto}
	.royal-scp__img{height:200px}
}

@media (prefers-reduced-motion:reduce){
	.royal-scp__scrim,.royal-scp__box{transition:none}
	.royal-scp__box{transform:none}
}