/* Brand Platform Icon Rules - Pixel Perfect Official Brand Vector SVGs */

/* YouTube: Red badge with exact white play triangle */
.fa-brands.fa-youtube,
.ri-youtube-fill,
.ri-youtube-line,
i.service-option-image.fa-youtube {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF0000' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z'/%3E%3Cpolygon fill='%23FFFFFF' points='9.545,15.568 15.818,12 9.545,8.432'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-youtube::before,
.ri-youtube-fill::before,
.ri-youtube-line::before {
    content: "" !important;
}

/* Facebook: Blue circle with pristine white 'f' */
.fa-brands.fa-facebook,
.fa-brands.fa-facebook-f,
.ri-facebook-fill,
.ri-facebook-circle-fill,
.ri-facebook-box-fill,
i.service-option-image.fa-facebook,
i.service-option-image.fa-facebook-f {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%231877F2'/%3E%3Cpath fill='%23FFFFFF' d='M21.25 16.5L21.75 13H18V10.75C18 9.8 18.4 9 19.8 9H21.5V6.1C21.5 6.1 20.05 5.9 18.7 5.9C15.8 5.9 14 7.7 14 10.75V13H10.5V16.5H14V26H18V16.5H21.25Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-facebook::before,
.fa-brands.fa-facebook-f::before,
.ri-facebook-fill::before,
.ri-facebook-circle-fill::before,
.ri-facebook-box-fill::before {
    content: "" !important;
}

/* Dailymotion: Official 3D Isometric D in black circle */
.fa-brands.fa-dailymotion {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230F0F0F' stroke='%23CCCCCC' stroke-width='0.8'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9.5h6.5c3.6 0 6.5 2.9 6.5 6.5s-2.9 6.5-6.5 6.5H10'/%3E%3Cpath d='M12.5 12h4c2.2 0 4 1.8 4 4s-1.8 4-4 4h-4' opacity='0.85'/%3E%3Cpath d='M10 9.5l2.5 2.5'/%3E%3Cpath d='M16.5 9.5l2.5 2.5'/%3E%3Cpath d='M16.5 22.5l2.5-2.5'/%3E%3Cpath d='M10 22.5l2.5-2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-dailymotion::before {
    content: "" !important;
}

/* Discord: Blurple badge with white Clyde robot face & cut-out eyes */
.fa-brands.fa-discord {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%235865F2'/%3E%3Cpath fill='%23FFFFFF' d='M24.7 7.7A19.8 19.8 0 0 0 19.8 6.1a.1.1 0 0 0-.1.1c-.2.4-.4.9-.6 1.3a18.3 18.3 0 0 0-6.2 0 12.3 12.3 0 0 0-.6-1.3.1.1 0 0 0-.1-.1 19.7 19.7 0 0 0-4.9 1.6.1.1 0 0 0 0 0A20.3 20.3 0 0 0 3.7 21.4a.1.1 0 0 0 0 .1 19.9 19.9 0 0 0 6 3c.1 0 .1 0 .2-.1.5-.6.9-1.4 1.2-2.1a.1.1 0 0 0-.1-.2 12.9 12.9 0 0 1-2.1-1c-.1 0-.1-.2 0-.2.1-.1.3-.2.4-.3a.1.1 0 0 1 .1 0 14.2 14.2 0 0 0 14.3 0c.1 0 .2.2.4.3a.1.1 0 0 1 0 .2c-.7.4-1.4.7-2.1 1a.1.1 0 0 0-.1.2c.4.7.7 1.5 1.2 2.1.1.1.1.1.2.1a19.9 19.9 0 0 0 6-3a.1.1 0 0 0 0-.1C29.6 15.1 28 10.3 24.7 7.7zM11.1 19.1c-1.2 0-2.1-1.1-2.1-2.4s.9-2.4 2.1-2.4c1.2 0 2.1 1.1 2.1 2.4s-.9 2.4-2.1 2.4zm9.8 0c-1.2 0-2.1-1.1-2.1-2.4s.9-2.4 2.1-2.4c1.2 0 2.1 1.1 2.1 2.4s-.9 2.4-2.1 2.4z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-discord::before {
    content: "" !important;
}

/* Reddit: Orange circle with white Snoo face */
.fa-brands.fa-reddit,
.fa-brands.fa-reddit-alien {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23FF4500'/%3E%3Cpath fill='%23FFFFFF' d='M26.7 15c0-.9-.7-1.6-1.6-1.6-.4 0-.8.2-1.1.5-1.8-1.3-4.3-2.1-7.1-2.2l1.2-5.7 3.9.8c0 .8.7 1.5 1.5 1.5.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6c-.6 0-1.2.4-1.5.9l-4.4-.9c-.2 0-.4.1-.5.3l-1.4 6.7c-2.9.1-5.4 1-7.2 2.2-.3-.3-.7-.5-1.1-.5-.9 0-1.6.7-1.6 1.6 0 .7.4 1.3 1 1.5-.1.4-.1.8-.1 1.2 0 4.1 4.5 7.4 10 7.4s10-3.3 10-7.4c0-.4 0-.8-.1-1.2.6-.2 1-.8 1-1.5zM10.9 17.5c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6-.7 1.6-1.6 1.6-1.6-.7-1.6-1.6zm10.2 4.4c-1.3 1.3-3.4 1.4-5.1 1.4s-3.8-.1-5.1-1.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 1 1 2.8 1.1 4.4 1.1s3.4-.1 4.4-1.1c.2-.2.5-.2.7 0 .2.2.2.5 0 .7zm-.1-2.8c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-reddit::before,
.fa-brands.fa-reddit-alien::before {
    content: "" !important;
}

/* Twitch: Official Twitch Glitch 3D icon (purple back, white bubble, purple eyes) */
.fa-brands.fa-twitch {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='%239146FF' d='M2.25 0L0 4.5v18h6v4.5l4.5-4.5h4.5L24 13.5V0H2.25zM21.75 12l-3.75 3.75h-4.5L10.5 18.75V15.75H6V2.25h15.75V12z'/%3E%3Cpath fill='%23FFFFFF' d='M21.75 2.25H6v13.5h4.5v3l3-3h4.5l3.75-3.75V2.25z'/%3E%3Crect x='16.5' y='6' width='2.25' height='5.25' fill='%239146FF'/%3E%3Crect x='11.25' y='6' width='2.25' height='5.25' fill='%239146FF'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-twitch::before {
    content: "" !important;
}

/* Telegram: Blue circle with exact white paper plane */
.fa-brands.fa-telegram,
.fa-brands.fa-telegram-plane,
.ri-telegram-fill,
i.service-option-image.fa-telegram {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2326A5E4'/%3E%3Cpath fill='%23FFFFFF' d='M5.3 11.7l12.8-5.3c.6-.2 1.1.1.9.8l-2.2 10.3c-.2.8-.6 1-1.3.6l-3.5-2.6-1.7 1.6c-.2.2-.4.4-.8.4l.2-3.6 6.6-6c.3-.3-.1-.4-.4-.2l-8.2 5.1-3.5-1.1c-.8-.2-.8-.8.1-1.1z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    vertical-align: -0.15em !important;
}
.fa-brands.fa-telegram::before,
.fa-brands.fa-telegram-plane::before,
.ri-telegram-fill::before {
    content: "" !important;
}

/* Twitter / X */
.fa-brands.fa-twitter,
.fa-brands.fa-x-twitter,
.ri-twitter-fill,
i.service-option-image.fa-twitter {
    color: #1DA1F2 !important;
}

/* Instagram: Clean official gradient */
.fa-brands.fa-instagram,
.ri-instagram-fill,
i.service-option-image.fa-instagram,
html[data-bs-theme="dark"] .fa-brands.fa-instagram,
html[data-bs-theme="dark"] .ri-instagram-fill,
[data-theme-mode="dark"] .fa-brands.fa-instagram,
[data-bs-theme="dark"] .fa-brands.fa-instagram,
[data-bs-theme="dark"] .ri-instagram-fill {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: #E1306C !important;
    filter: none !important;
}

/* TikTok: Black note body in Light mode, White note body in Dark mode, with 3D stereo offset */
.fa-brands.fa-tiktok,
.ri-tiktok-fill,
.ri-tiktok-line,
i[class*="tiktok"] {
    color: #000000 !important;
    text-shadow: -1.2px -0.8px 0 #25f4ee, 1.2px 0.8px 0 #fe2c55 !important;
    display: inline-block !important;
}

html[data-bs-theme="dark"] .fa-brands.fa-tiktok,
html[data-bs-theme="dark"] .ri-tiktok-fill,
html[data-bs-theme="dark"] .ri-tiktok-line,
html[data-bs-theme="dark"] i[class*="tiktok"],
[data-theme-mode="dark"] .fa-brands.fa-tiktok,
[data-bs-theme="dark"] .fa-brands.fa-tiktok,
[data-bs-theme="dark"] i[class*="tiktok"] {
    color: #ffffff !important;
    text-shadow: -1.2px -0.8px 0 #25f4ee, 1.2px 0.8px 0 #fe2c55 !important;
    display: inline-block !important;
}

/* Google */
.fa-brands.fa-google { color: #4285F4 !important; }
.google-brand-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.platform-card .google-brand-icon,
.platform-card__icon.google-brand-icon {
    width: 22px;
    height: 22px;
}
.service-option-image.google-brand-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
}
.order-summary__logo-fallback .google-brand-icon,
.service-detail-icon.google-brand-icon {
    width: 36px;
    height: 36px;
}

.fa-brands.fa-pinterest,
.fa-brands.fa-pinterest-p { color: #E60023 !important; }
.fa-brands.fa-vimeo,
.fa-brands.fa-vimeo-v { color: #1AB7EA !important; }
.fa-brands.fa-tumblr { color: #36465D !important; }
.fa-brands.fa-snapchat,
.fa-brands.fa-snapchat-ghost {
    color: #FFFC00 !important;
    text-shadow: 0 0 1px #111, 0 1px 2px rgba(0, 0, 0, .28);
}
.fa-brands.fa-soundcloud { color: #FF5500 !important; }
.fa-brands.fa-spotify { color: #1DB954 !important; }

html[data-bs-theme="dark"] .fa-brands.fa-tumblr,
[data-theme-mode="dark"] .fa-brands.fa-tumblr,
[data-bs-theme="dark"] .fa-brands.fa-tumblr {
    color: #8aa0c2 !important;
}
