/**
 * Simple Social & Entrepreneurial Links — Public Button Styles
 *
 * Uses a CSS custom property (--ssel-color) injected per-button via inline style.
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.ssel-btn {
	--ssel-color:      #555;
	--ssel-hover-dark: rgba(0, 0, 0, .12);

	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	text-decoration: none;
	cursor:          pointer;
	transition:      transform .15s, box-shadow .15s, filter .15s;
	border:          none;
	outline:         none;
	background:      var(--ssel-color);
	color:           #fff;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight:     600;
	line-height:     1;
	position:        relative;
	overflow:        hidden;
	vertical-align:  middle;
}

.ssel-btn:hover,
.ssel-btn:focus-visible {
	filter:     brightness(1.08);
	transform:  translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	color:      #fff;
	text-decoration: none;
}

.ssel-btn:active {
	transform:  translateY(0);
	box-shadow: none;
	filter:     brightness(.96);
}

.ssel-btn:focus-visible {
	outline:        3px solid var(--ssel-color);
	outline-offset: 3px;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.ssel-btn__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

.ssel-btn__icon svg {
	display: block;
	fill:    currentColor;
}

/* ── Small (icon only, circle) ────────────────────────────────────────────── */
.ssel-btn--small {
	width:         44px;
	height:        44px;
	border-radius: 50%;
	padding:       0;
}

.ssel-btn--small .ssel-btn__icon {
	width:  44px;
	height: 44px;
}

/* ── Large (icon + label, pill) ───────────────────────────────────────────── */
.ssel-btn--large {
	gap:           10px;
	padding:       0 22px 0 16px;
	height:        48px;
	border-radius: 100px;
	font-size:     15px;
	letter-spacing: .01em;
}

.ssel-btn--large .ssel-btn__icon {
	width:  22px;
	height: 22px;
}

.ssel-btn__label {
	white-space: nowrap;
	line-height: 1.2;
}

/* ── Block wrapper — single blocks ────────────────────────────────────────── */
.ssel-block-wrap {
	display: block;
}

.ssel-block-wrap.aligncenter {
	text-align: center;
}

.ssel-block-wrap.alignright {
	text-align: right;
}

.ssel-block-wrap.alignleft {
	text-align: left;
}

/* ── Shortcode align wrapper — single button ──────────────────────────────── */
.ssel-align-wrap {
	display: block;
}

.ssel-align-wrap.ssel-align-center { text-align: center; }
.ssel-align-wrap.ssel-align-right  { text-align: right; }
.ssel-align-wrap.ssel-align-left   { text-align: left; }

/* ── Row block ────────────────────────────────────────────────────────────── */
/*
 * KEY FIX: width:100% is required so that justify-content has space to work.
 * A flex container with no explicit width is only as wide as its children —
 * justify-content:center on a container that's exactly the same width as its
 * content has zero visible effect. Setting width:100% fills the available
 * column width and gives the items room to be positioned within it.
 *
 * justify-content is set via inline style in PHP (from the sidebar attribute)
 * so we do NOT set it here — CSS rules cannot override inline styles, so any
 * justify-content set here would be silently ignored whenever an inline style
 * is present.
 */
.ssel-row {
	display:     flex;
	align-items: center;
	width:       100%;  /* ← THE critical fix */
	box-sizing:  border-box;
}

/*
 * Inner block wrappers become transparent to the flex layout.
 * display:contents removes the div from box layout while keeping its children
 * as direct flex children of .ssel-row, so gap and justify-content apply
 * directly to the buttons themselves.
 */
.ssel-row .ssel-block-wrap {
	display: contents;
}

/* ── Shortcode row wrapper — [ssel_row] ───────────────────────────────────── */
/*
 * Same rules as .ssel-row. justify-content and gap come from inline styles
 * set by the shortcode PHP, so they are not repeated here.
 */
.ssel-shortcode-row {
	display:    flex;
	align-items: center;
	width:      100%;
	box-sizing: border-box;
	flex-wrap:  wrap;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.ssel-btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ssel-btn { transition: none; }
}

/* ── Instagram gradient ───────────────────────────────────────────────────── */
.ssel-btn[data-network="instagram"] {
	background: #e1306c;
	background: linear-gradient( 45deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100% );
}
.ssel-btn[data-network="instagram"]:hover,
.ssel-btn[data-network="instagram"]:focus-visible {
	background: linear-gradient( 45deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100% );
	filter: brightness(1.1);
}

/* ── TikTok gradient ──────────────────────────────────────────────────────── */
.ssel-btn[data-network="tiktok"] {
	background: #010101;
	background: linear-gradient( 135deg, #25F4EE 0%, #010101 40%, #FE2C55 100% );
}
.ssel-btn[data-network="tiktok"]:hover,
.ssel-btn[data-network="tiktok"]:focus-visible {
	background: linear-gradient( 135deg, #25F4EE 0%, #010101 40%, #FE2C55 100% );
	filter: brightness(1.15);
}

/* ── Pocket gradient ──────────────────────────────────────────────────────── */
.ssel-btn[data-network="pocket"] {
	background: #ef3f56;
	background: linear-gradient( 145deg, #ff6b6b 0%, #ef3f56 55%, #c0202f 100% );
}
.ssel-btn[data-network="pocket"]:hover,
.ssel-btn[data-network="pocket"]:focus-visible {
	background: linear-gradient( 145deg, #ff6b6b 0%, #ef3f56 55%, #c0202f 100% );
	filter: brightness(1.08);
}

/* ── iTunes gradient (classic pink → violet → blue icon look) ─────────────── */
.ssel-btn[data-network="itunes"] {
	background: #fb5bc5;
	background: linear-gradient( 135deg, #fb5bc5 0%, #b465da 50%, #2e8de1 100% );
}
.ssel-btn[data-network="itunes"]:hover,
.ssel-btn[data-network="itunes"]:focus-visible {
	background: linear-gradient( 135deg, #fb5bc5 0%, #b465da 50%, #2e8de1 100% );
	filter: brightness(1.08);
}

/* ── Snapchat — yellow background needs black text & icon ─────────────────── */
/*
 * Snapchat's brand yellow (#FFFC00) is a light colour — white text and the
 * default white currentColor icon would be invisible against it.
 * We override color to black so both the label text and the SVG icon
 * (which uses fill="#000000" in the path itself) render correctly.
 */
.ssel-btn[data-network="snapchat"] {
	color: #000000;
}

.ssel-btn[data-network="snapchat"]:hover,
.ssel-btn[data-network="snapchat"]:focus-visible {
	color: #000000;
	filter: brightness(0.97);
}

.ssel-btn[data-network="snapchat"]:focus-visible {
	outline-color: #000000;
}

/* ── Mary Kay & Avon — no logo, center the label ──────────────────────────── */
/*
 * Both networks ship without an SVG icon (trademark restrictions — see
 * SSEL_Networks). The large button normally reserves a 22px icon box plus a
 * 10px flex gap and uses asymmetric padding to optically balance icon + label,
 * which leaves a logo-less button's text sitting off-center. Hide the empty
 * icon box (display:none also removes the flex gap) and even out the padding
 * so the label is truly centered.
 */
.ssel-btn--large[data-network="marykay"] .ssel-btn__icon,
.ssel-btn--large[data-network="avon"] .ssel-btn__icon {
	display: none;
}

.ssel-btn--large[data-network="marykay"],
.ssel-btn--large[data-network="avon"] {
	padding: 0 22px;
}

/* ── Social List — base ───────────────────────────────────────────────────── */
.ssel-list {
	--ssel-list-gap: 12px;

	display:        flex;
	flex-direction: column;
	align-items:    center;
	/* Fill the container up to the cap even inside a flex parent (the admin
	   live preview, or a theme's flex layout) — flex items otherwise shrink
	   to fit and the card renders narrower than the front end. */
	width:          100%;
	max-width:      580px;
	margin:         0 auto;
	padding:        32px 24px;
	border-radius:  20px;
	box-sizing:     border-box;
	background:     rgba(var(--ssel-card-rgb, 255, 255, 255), var(--ssel-card-alpha, 1));
}

.ssel-list__header {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	margin-bottom:  24px;
	color:          var(--ssel-list-text);
}

.ssel-list__avatar {
	display:       block;
	width:         104px;
	height:        104px;
	margin:         0 auto 14px;
	object-fit:    cover;
}

/* Avatar shape — chosen in the Style box (round | square). */
.ssel-list[data-avatar-shape="round"] .ssel-list__avatar {
	border-radius: 50%;
}

.ssel-list[data-avatar-shape="square"] .ssel-list__avatar {
	border-radius: 14px;
}

/* Avatar size — chosen in the Style box. Extra Large pairs with the square
   shape for a Linkfire-style album-cover header. */
.ssel-list[data-avatar-size="small"] .ssel-list__avatar {
	width:  72px;
	height: 72px;
}

.ssel-list[data-avatar-size="medium"] .ssel-list__avatar {
	width:  96px;
	height: 96px;
}

.ssel-list[data-avatar-size="large"] .ssel-list__avatar {
	width:  120px;
	height: 120px;
}

.ssel-list[data-avatar-size="xlarge"] .ssel-list__avatar {
	width:  180px;
	height: 180px;
}

.ssel-list__name {
	font-size:   1.15em;
	font-weight: 600;
	line-height: 1.3;
	color:       var(--ssel-list-text);
}

.ssel-list__bio {
	margin-top: 4px;
	font-size:  .9em;
	color:      var(--ssel-list-muted);
}

.ssel-list__buttons {
	display:        flex;
	flex-direction: column;
	gap:            var(--ssel-list-gap, 12px);
	width:          100%;
}

.ssel-list .ssel-btn {
	width:           100%;
	box-sizing:      border-box;
	justify-content: center;
}

/* ── Social List — button fill opacity ────────────────────────────────────── */
.ssel-list .ssel-btn:not([data-network="instagram"]):not([data-network="tiktok"]):not([data-network="pocket"]):not([data-network="itunes"]) {
	background: rgba(var(--ssel-color-rgb), var(--ssel-btn-alpha, 1));
}

/* ── Social List — scheme ─────────────────────────────────────────────────── */
.ssel-list[data-scheme="light"] {
	--ssel-list-text:  #1d2327;
	--ssel-list-muted: #50575e;
}

.ssel-list[data-scheme="dark"] {
	--ssel-list-text:  #ffffff;
	--ssel-list-muted: rgba(255, 255, 255, .7);
}

/* ── Social List — radius ─────────────────────────────────────────────────── */
.ssel-list[data-radius="small"] .ssel-btn {
	/* Nearly sharp — clearly distinct from medium (10px) and pill. */
	border-radius: 2px;
}

.ssel-list[data-radius="medium"] .ssel-btn {
	border-radius: 10px;
}

.ssel-list[data-radius="pill"] .ssel-btn {
	border-radius: 999px;
}

/* ── Social List — Linktree preset ────────────────────────────────────────── */
.ssel-list[data-preset="linktree"] {
	--ssel-card-rgb:  255, 255, 255;
	--ssel-list-gap:  14px;

	box-shadow: 0 8px 32px rgba(0, 0, 0, .09);
}

.ssel-list[data-preset="linktree"] .ssel-list__avatar {
	border:     3px solid #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.ssel-list[data-preset="linktree"] .ssel-list__name {
	font-size:   1.25em;
	font-weight: 600;
}

/* ── Social List — HyperFollow preset ─────────────────────────────────────── */
.ssel-list[data-preset="hyperfollow"] {
	--ssel-card-rgb: 18, 18, 20;
	--ssel-list-gap: 9px;
}

.ssel-list[data-preset="hyperfollow"] .ssel-btn {
	justify-content: flex-start;
	padding-left:    18px;
}

.ssel-list[data-preset="hyperfollow"] .ssel-btn__label {
	letter-spacing: .02em;
}

/* ── Social List — Linkfire preset ────────────────────────────────────────── */
.ssel-list[data-preset="linkfire"] {
	--ssel-card-rgb: 245, 245, 247;
	--ssel-list-gap: 0;
	/* Edge definition that scales with the Card Opacity slider — at the
	   preset's default 0 opacity the card stays fully invisible, exactly
	   as before; raising the slider now reveals a real card (the light
	   grey fill alone is imperceptible on light page backgrounds). */
	border:     1px solid rgba(17, 17, 24, calc(var(--ssel-card-alpha, 1) * .12));
	box-shadow: 0 6px 24px rgba(17, 17, 24, calc(var(--ssel-card-alpha, 1) * .10));
}

.ssel-list[data-preset="linkfire"] .ssel-btn {
	margin-bottom: 10px;
	font-size:     13px;
	font-weight:   700;
	letter-spacing: .03em;
}

.ssel-list[data-preset="linkfire"] .ssel-btn:last-child {
	margin-bottom: 0;
}

/*
 * Outlined look — comes after the generic button-opacity rule so it wins by
 * cascade. The :not() chain keeps this rule's specificity above the generic
 * opacity rule for the non-gradient networks.
 */
.ssel-list[data-preset="linkfire"] .ssel-btn:not([data-network="instagram"]):not([data-network="tiktok"]):not([data-network="pocket"]):not([data-network="itunes"]) {
	background: transparent;
	border:     1.5px solid rgba(var(--ssel-color-rgb), var(--ssel-btn-alpha, 1));
	color:      var(--ssel-color);
}

/*
 * The gradient brands get the same outlined treatment in Linkfire lists —
 * their full-strength gradient fills only suit the filled presets (Linktree,
 * HyperFollow). High enough specificity to beat the base and :hover
 * gradient rules. The border itself carries the brand gradient: a masked
 * ::before paints the gradient, then the mask knocks out everything except
 * the 1.5px ring (border-image can't follow border-radius, this can). The
 * transparent real border keeps the layout identical to the flat-border
 * buttons, and the ring honours the Button Opacity slider via opacity.
 */
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="instagram"],
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="tiktok"],
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="pocket"],
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="itunes"] {
	position:   relative;
	background: transparent;
	border:     1.5px solid transparent;
	color:      var(--ssel-color);
}

.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="instagram"]::before,
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="tiktok"]::before,
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="pocket"]::before,
.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="itunes"]::before {
	content:        "";
	position:       absolute;
	inset:          0;
	border-radius:  inherit;
	padding:        1.5px;
	opacity:        var(--ssel-btn-alpha, 1);
	pointer-events: none;
	-webkit-mask:           linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask:                   linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	mask-composite:         exclude;
}

.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="instagram"]::before {
	background: linear-gradient( 45deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100% );
}

.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="tiktok"]::before {
	background: linear-gradient( 135deg, #25F4EE 0%, #010101 40%, #FE2C55 100% );
}

.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="pocket"]::before {
	background: linear-gradient( 145deg, #ff6b6b 0%, #ef3f56 55%, #c0202f 100% );
}

.ssel-list[data-preset="linkfire"] .ssel-btn[data-network="itunes"]::before {
	background: linear-gradient( 135deg, #fb5bc5 0%, #b465da 50%, #2e8de1 100% );
}

.ssel-list[data-preset="linkfire"] .ssel-btn svg {
	fill: currentColor;
}

/* ── Social List — responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
	.ssel-list {
		padding: 20px 14px;
	}
}

/* ── User Links — [ssel_user_links] / ssel/user-links ─────────────────────── */
.ssel-user-links {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
}

.ssel-user-links--row {
	flex-direction:  row;
	justify-content: center;
}

.ssel-user-links--stack {
	flex-direction: column;
}

.ssel-user-links--stack .ssel-btn {
	width:           100%;
	box-sizing:      border-box;
	justify-content: center;
}