/* =========================================================================
 * My Account → Support tab. Frames the Fluent Support customer portal so it
 * sits cleanly inside the account layout, plus the intro header and the
 * (Fluent-Support-absent) fallback state. Scoped to .acc-support.
 * ====================================================================== */

.acc-support{ --acc-accent:#f80031; --acc-accent2:#ff6e40; }

/* Intro header. */
.acc-support-intro{ margin:0 0 20px; }
.acc-support-title{ margin:0 0 6px; font-size:22px; font-weight:800; color:#16161c; line-height:1.2; }
.acc-support-sub{ margin:0; font-size:14px; line-height:1.55; color:#6b7280; }

/* Portal frame: a clean card that hosts the Fluent Support SPA. */
.acc-support-portal{ position:relative; background:#fff; border:1px solid #eef0f3; border-radius:18px;
	box-shadow:0 2px 12px rgba(20,22,30,.05); padding:6px; overflow:hidden; }
/* Let the Fluent Support portal use the full width and blend in — strip its own
   heavy outer chrome, keep its inner controls. */
.acc-support-portal .fluent_support_portal,
.acc-support-portal #fluent_support_portal,
.acc-support-portal .fs_customer_portal,
.acc-support-portal .fluent-support-portal{ max-width:100% !important; margin:0 !important; }
.acc-support-portal .fs-portal-wrapper,
.acc-support-portal .fs_frontend_app{ background:transparent !important; box-shadow:none !important; border:0 !important; }
/* Nudge Fluent Support's primary buttons toward the store accent so the ticket
   actions match the rest of the account (non-destructive: colour only). */
.acc-support-portal .el-button--primary,
.acc-support-portal .ff-btn-primary,
.acc-support-portal .fs_btn_primary,
.acc-support-portal button.fs-primary{ background:linear-gradient(130deg,var(--acc-accent),var(--acc-accent2)) !important;
	border-color:transparent !important; color:#fff !important; }
.acc-support-portal a{ color:var(--acc-accent); }

/* A slim loading shimmer so the card never looks empty while the SPA boots. */
.acc-support-portal:empty::before,
.acc-support-portal > .fs_frontend_app:empty::before{ content:""; display:block; height:220px; border-radius:12px;
	background:linear-gradient(100deg,#f4f5f7 30%,#eceef2 50%,#f4f5f7 70%); background-size:200% 100%;
	animation:acc-support-shimmer 1.2s linear infinite; }
@keyframes acc-support-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* Fallback (Fluent Support not active): friendly contact card. */
.acc-support-empty{ text-align:center; background:#fff; border:1px solid #eef0f3; border-radius:18px;
	box-shadow:0 2px 12px rgba(20,22,30,.05); padding:38px 22px; }
.acc-support-empty-ic{ font-size:40px; line-height:1; margin:0 0 12px; }
.acc-support-empty-tx{ margin:0 0 18px; font-size:15px; color:#3a3f47; line-height:1.55; }
.acc-support-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:13px;
	background:linear-gradient(130deg,var(--acc-accent),var(--acc-accent2)); color:#fff !important; font-weight:800; font-size:14px;
	text-decoration:none !important; box-shadow:0 4px 12px rgba(248,0,49,.2); transition:transform .1s ease, box-shadow .15s ease, filter .15s ease; }
.acc-support-btn:hover{ transform:translateY(-1px); filter:saturate(1.05); box-shadow:0 8px 20px rgba(248,0,49,.28); }
.acc-support-btn:active{ transform:translateY(0); }

@media (max-width:600px){
	.acc-support-title{ font-size:19px; }
	.acc-support-portal{ border-radius:14px; padding:4px; }
	.acc-support-empty{ padding:30px 16px; }
}
@media (prefers-reduced-motion:reduce){
	.acc-support-portal:empty::before{ animation:none; }
	.acc-support-btn{ transition:none; }
}