/*
|--------------------------------------------------------------------------
| UFC.GG Custom Styles
|--------------------------------------------------------------------------
| Username roles, effects, sparkle animations, and forum overrides.
|--------------------------------------------------------------------------
*/

/* -----------------------------------------------------------------------
   COLOR ANIMATION (shared by sparkle effects)
   ----------------------------------------------------------------------- */
@-webkit-keyframes colorchange {
    0%   { color: #f00; }
    10%  { color: #ff8c00; }
    20%  { color: #ffd700; }
    30%  { color: #0f0; }
    40%  { color: #00bfff; }
    50%  { color: #00f; }
    60%  { color: #8a2be2; }
    70%  { color: #ff1493; }
    80%  { color: #ff4500; }
    90%  { color: #00ced1; }
    100% { color: #f00; }
}

@keyframes colorchange {
    0%   { color: #f00; }
    10%  { color: #ff8c00; }
    20%  { color: #ffd700; }
    30%  { color: #0f0; }
    40%  { color: #00bfff; }
    50%  { color: #00f; }
    60%  { color: #8a2be2; }
    70%  { color: #ff1493; }
    80%  { color: #ff4500; }
    90%  { color: #00ced1; }
    100% { color: #f00; }
}

/* -----------------------------------------------------------------------
   ROLE CLASSES — color + weight + text-shadow
   ----------------------------------------------------------------------- */

/* Super Admin & Admin */
.superadmin {
    color: #f00 !important;
    font-weight: 600;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.superadmin:hover {
    color: #ff4444 !important;
    text-decoration: none;
}

/* Global Moderator */
.gmod {
    color: #58FF50 !important;
    font-weight: 500;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.gmod:hover {
    color: #7fff77 !important;
    text-decoration: none;
}

/* Moderator */
.mod {
    color: #70d7ea !important;
    font-weight: 500;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.mod:hover {
    color: #9ce5f2 !important;
    text-decoration: none;
}

/* Publisher */
.publisher {
    color: #c084fc !important;
    font-weight: 500;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.publisher:hover {
    color: #d8b4fe !important;
    text-decoration: none;
}

/* Support */
.support {
    color: #0ab39c !important;
    font-weight: 500;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.support:hover {
    color: #2dd4bf !important;
    text-decoration: none;
}

/* Premium Member */
.premium {
    color: #ffd700 !important;
    font-weight: 600;
    text-shadow: 0 4px 5px #000;
    text-decoration: none;
}
.premium:hover {
    color: #ffe44d !important;
    text-decoration: none;
}

/* Regular Member */
.member {
    color: #9eaab6 !important;
    font-weight: 400;
    text-decoration: none;
}
.member:hover {
    color: #ccc !important;
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   EFFECT CLASSES — sparkle GIFs + animations
   ----------------------------------------------------------------------- */

/* Super Admin / Admin sparkle */
.effect-super {
    background: url('/images/build/sparkle_blue.gif') repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: colorchange 20s infinite alternate;
    animation: colorchange 20s infinite alternate;
}

/* Global Mod sparkle */
.effect-gmod {
    background: url('/images/build/sparkle_white.gif') repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: colorchange 20s infinite alternate;
    animation: colorchange 20s infinite alternate;
}

/* Moderator sparkle */
.effect-mod {
    background: url('/images/build/sparkle_teal.gif') repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: colorchange 20s infinite alternate;
    animation: colorchange 20s infinite alternate;
}

/* Premium sparkle */
.effect-premium {
    background: url('/images/build/sparkle_gold.gif') repeat;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Admin effect (same as super but can be customized) */
.effect-admin {
    background: url('/images/build/sparkle_blue.gif') repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: colorchange 20s infinite alternate;
    animation: colorchange 20s infinite alternate;
}

/* Banned user — strikethrough */
.effect-banned {
    color: #787878 !important;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #cc3333;
    text-shadow: none;
    background: none !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #787878;
    -webkit-animation: none;
    animation: none;
}

/* -----------------------------------------------------------------------
   FORUM POST CONTENT
   ----------------------------------------------------------------------- */
.forum-post-content {
    color: #d0d6de;
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}

.forum-post-content blockquote {
    border-left: 3px solid #e63946;
    padding: 8px 14px;
    margin: 10px 0;
    color: #9eaab6;
    background: rgba(230, 57, 70, .06);
    border-radius: 0 4px 4px 0;
}

/* -----------------------------------------------------------------------
   FORM INPUTS & TEXTAREAS — site-wide dark theme
   ----------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
    background-color: #131517 !important;
    border: 1px solid #2a2d31 !important;
    color: #ddd !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: #131517 !important;
    border-color: #e63946 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, .15) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: #555 !important;
}

/* -----------------------------------------------------------------------
   CKEDITOR DARK THEME
   ----------------------------------------------------------------------- */

/* Editor wrapper border */
.ck.ck-editor {
    border-radius: 6px !important;
    overflow: hidden;
}

/* Toolbar */
.ck.ck-toolbar {
    background: #1b1d20 !important;
    border: none !important;
    border-bottom: 1px solid #2a2d31 !important;
    padding: 4px 6px !important;
}

/* Toolbar buttons */
.ck.ck-button {
    color: #9eaab6 !important;
    border-radius: 4px !important;
}

.ck.ck-button:hover {
    background: rgba(230, 57, 70, .12) !important;
    color: #fff !important;
}

.ck.ck-button.ck-on {
    background: rgba(230, 57, 70, .2) !important;
    color: #e63946 !important;
}

/* Toolbar separator */
.ck.ck-toolbar__separator {
    background: #2a2d31 !important;
}

/* Editable area */
.ck-editor__editable_inline {
    min-height: 180px !important;
    background: #131517 !important;
    color: #ddd !important;
    border: none !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    padding: 16px !important;
}

.ck-editor__editable_inline.ck-focused {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Placeholder text */
.ck.ck-editor__editable > .ck-placeholder::before {
    color: #555 !important;
}

/* Outer border of the whole editor */
.ck.ck-editor__main > .ck-editor__editable {
    border: none !important;
}

.ck.ck-editor__top .ck-sticky-panel__content {
    border: none !important;
}

/* Focused state — red glow on the entire editor wrapper */
.ck.ck-editor:focus-within {
    box-shadow: 0 0 0 2px rgba(230, 57, 70, .2);
}

/* Dropdown panels (heading picker, etc.) */
.ck.ck-dropdown__panel {
    background: #1b1d20 !important;
    border: 1px solid #2a2d31 !important;
}

.ck.ck-list__item .ck-button {
    color: #ddd !important;
}

.ck.ck-list__item .ck-button:hover {
    background: rgba(230, 57, 70, .12) !important;
}

/* Blockquotes inside editor */
.ck-content blockquote {
    border-left: 3px solid #e63946;
    padding: 10px 16px;
    margin: 12px 0;
    color: #9eaab6;
    background: rgba(230, 57, 70, .06);
    border-radius: 0 4px 4px 0;
}

/* Links inside editor */
.ck-content a {
    color: #e63946;
}

/* Lists inside editor */
.ck-content ul, .ck-content ol {
    color: #ddd;
    padding-left: 20px;
}

/* ---------------------------------------------------------------------------
   Ported layout additions
   ---------------------------------------------------------------------------
   The donor template carried these as inline style attributes repeated across
   the header and slide-out panel. Collected here so they can be themed per
   outlet rather than hardcoded in Blade.
   --------------------------------------------------------------------------- */

.header-badge {
    margin: 2px;
    background: #ff1111;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.3;
}

.header-badge--absolute {
    position: absolute;
    top: 0;
    right: 2px;
    margin: 0;
}

.header-support-btn {
    font-size: 12px;
}

.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav__item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.side-nav__item--last {
    border-bottom: 0;
}

.side-nav__item a {
    color: #000;
}

.side-nav__item a i {
    width: 20px;
    color: #ff1111;
}

.side-nav__link--danger,
.side-nav__link--danger i {
    color: #f66;
}

/* ---------------------------------------------------------------------------
   MMA pages
   ---------------------------------------------------------------------------
   Fighters, events and rankings. The donor template expressed all of this as
   inline style attributes inside the Blade; collected here so the accent
   colour is themable per hosted outlet.
   --------------------------------------------------------------------------- */

/* Aliased onto the enhancement layer's ramp (enhance.css) so the site has one
   accent rather than two subtly different reds. Custom properties resolve at
   use time, so referencing tokens declared in a later stylesheet is valid. */
:root {
    --ufc-accent: var(--u-accent, #f34141);
    --ufc-accent-alt: var(--u-accent-bright, #ff5a5a);
    --ufc-muted: var(--u-text-dim, #9a9da2);
    --ufc-panel: var(--u-surface-2, #22262c);
    --ufc-border: var(--u-hairline, rgba(255, 255, 255, .07));
}

.page-heading--accent { border-bottom: 3px solid var(--ufc-accent-alt); }
.page-heading__lede { color: #aaa; font-size: 14px; margin: 6px 0 0; max-width: 720px; }

.post-filter--rounded { border-radius: 10px; margin-bottom: 20px; }
.post-filter__select--wide { flex: 2; }
.btn--rounded { border-radius: 10px; }

.empty-state { padding: 40px; text-align: center; }
.empty-state i { color: #555; margin-bottom: 15px; }
.empty-state__text { color: var(--ufc-muted); padding: 20px 0; }

/* Fighter roster cards */
.fighter-card__col { margin-bottom: 20px; }
.fighter-card { text-align: center; height: 100%; }
.fighter-card__body { padding: 20px 20px 16px; }
.fighter-card__avatar {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--ufc-accent); margin: 0 auto 10px; display: block;
}
.fighter-card__avatar--empty {
    background: #222; display: flex; align-items: center; justify-content: center;
}
.fighter-card__avatar--empty i { color: #555; }
.fighter-card__name { margin: 0 0 2px; font-weight: 700; }
.fighter-card__name a { color: #fff; }
.fighter-card__nickname { font-style: italic; color: #aaa; font-size: 12px; margin-bottom: 4px; }
.fighter-card__meta { font-size: 12px; color: var(--ufc-muted); margin-bottom: 8px; }
.fighter-card__meta i { color: var(--ufc-accent); }
.fighter-card__record { font-weight: 700; font-size: 15px; }
.fighter-card__belt { background: #c9a227; color: #111; margin-top: 8px; display: inline-block; }

/* Fighter profile */
.fighter-profile__header { display: flex; gap: 20px; align-items: center; padding: 24px; }
.fighter-profile__avatar {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--ufc-accent); flex-shrink: 0;
}
.fighter-profile__avatar--empty {
    background: #222; display: flex; align-items: center; justify-content: center;
}
.fighter-profile__avatar--empty i { color: #555; }
.fighter-profile__identity h2 { margin: 0 0 6px; }
.fighter-profile__record { font-size: 20px; font-weight: 700; color: var(--ufc-accent); margin-bottom: 8px; }

.tale-of-the-tape { margin: 0; }
.tale-of-the-tape > div {
    display: flex; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid var(--ufc-border);
}
.tale-of-the-tape > div:last-child { border-bottom: 0; }
.tale-of-the-tape dt { color: var(--ufc-muted); font-weight: 400; margin: 0; }
.tale-of-the-tape dd { margin: 0; font-weight: 600; }

.record-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.record-grid__cell { text-align: center; background: var(--ufc-panel); border-radius: 8px; padding: 14px 6px; }
.record-grid__cell strong { display: block; font-size: 24px; line-height: 1.1; }
.record-grid__cell span { font-size: 11px; color: var(--ufc-muted); text-transform: uppercase; }

/* Bout history rows */
.bout-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ufc-border); }
.bout-row:last-child { border-bottom: 0; }
.bout-row__outcome { flex-shrink: 0; width: 42px; }
.bout-row__opponent { margin: 0 0 4px; }
.bout-row__meta { font-size: 12px; color: var(--ufc-muted); }
.bout-row__result { font-size: 13px; margin-top: 4px; }

.label--win { background: #2e7d32; color: #fff; }
.label--loss { background: #b71c1c; color: #fff; }
.label--draw { background: #616161; color: #fff; }
.label--scheduled { background: #37474f; color: #fff; }
.label--live { background: var(--ufc-accent); color: #fff; }
.label--ppv { background: #c9a227; color: #111; }
.label--bonus { background: #6a1b9a; color: #fff; }
.label--rank { background: #263238; color: #fff; margin-right: 4px; }

/* Event listings */
.event-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ufc-border); }
.event-row:last-child { border-bottom: 0; }
.event-row--compact { padding: 10px 0; }
.event-row__poster { width: 90px; height: 120px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.event-row__title { margin: 0 0 6px; }
.event-row__meta { font-size: 13px; color: var(--ufc-muted); margin-bottom: 3px; }
.event-row__meta i { color: var(--ufc-accent); width: 16px; }
.event-row__broadcasts { font-size: 12px; color: var(--ufc-muted); margin-top: 4px; }
.event-row__broadcasts i { color: var(--ufc-accent); }

/* Fight card */
.bout-card { padding: 16px 0; border-bottom: 1px solid var(--ufc-border); }
.bout-card:last-child { border-bottom: 0; }
.bout-card__billing {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ufc-muted); margin-bottom: 10px;
}
.bout-card__corners { display: flex; align-items: center; gap: 12px; }
.bout-card__corner { flex: 1; }
.bout-card__corner h6 { margin: 0 0 2px; }
.bout-card__corner--blue { text-align: right; }
.bout-card__corner.is-winner h6 a { color: #66bb6a; }
.bout-card__record { font-size: 12px; color: var(--ufc-muted); }
.bout-card__versus { color: var(--ufc-muted); font-weight: 700; flex-shrink: 0; }
.bout-card__footer { margin-top: 10px; font-size: 13px; }
.bout-card__result { color: var(--ufc-muted); }

/* Rankings */
.rankings-table { margin: 0; }
.rankings-table td { padding: 10px 8px; border-top: 1px solid var(--ufc-border); vertical-align: middle; }
.rankings-table tr.is-champion { background: rgba(201, 162, 39, .08); }
.rankings-table__position { width: 48px; font-weight: 700; color: var(--ufc-accent); }
.rankings-table__record { color: var(--ufc-muted); font-size: 13px; width: 90px; }
.rankings-table__movement { width: 60px; text-align: right; font-size: 12px; }

.movement--up { color: #66bb6a; }
.movement--down { color: #ef5350; }
.movement--none { color: #555; }

.p4p-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ufc-border); }
.p4p-row:last-child { border-bottom: 0; }
.p4p-row__position { font-weight: 700; color: var(--ufc-accent); width: 28px; }
.p4p-row__record { margin-left: auto; font-size: 12px; color: var(--ufc-muted); }

.side-nav__hint { display: block; font-size: 11px; color: var(--ufc-muted); }

/* Captcha widget + admin panel */
.captcha-field { margin-top: 10px; }
.captcha-field__error { margin-top: 6px; font-size: 12px; color: var(--ufc-accent); }

.captcha-admin__toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.captcha-admin__toggle--small { margin-top: 8px; font-size: 12px; opacity: .85; }
.captcha-admin__grid > [class^="col-"] { margin-bottom: 14px; }

/* Forum */
.forum-tabs { list-style: none; padding: 0; margin: 0 0 18px; display: flex; gap: 4px; flex-wrap: wrap; }
.forum-tabs__link {
    display: block; padding: 8px 16px; border-radius: 6px 6px 0 0;
    background: var(--ufc-panel); color: #ccc; font-weight: 600; font-size: 13px;
}
.forum-tabs__link.is-active { background: var(--ufc-accent); color: #fff; }

.forum-section { margin-bottom: 18px; }

.board-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ufc-border); }
.board-row:last-child { border-bottom: 0; }
.board-row--sub { padding-left: 34px; opacity: .92; }
.board-row__icon { width: 34px; flex-shrink: 0; text-align: center; color: var(--ufc-accent); font-size: 20px; }
.board-row__icon img { width: 34px; height: 34px; object-fit: contain; }
.board-row__main { flex: 1; min-width: 0; }
.board-row__title { margin: 0 0 3px; font-size: 15px; }
.board-row__lock { font-size: 11px; color: var(--ufc-muted); margin-left: 4px; }
.board-row__description { margin: 0; font-size: 12px; color: var(--ufc-muted); }
.board-row__stats { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--ufc-muted); display: flex; flex-direction: column; }
.board-row__last-post { width: 200px; flex-shrink: 0; font-size: 12px; }
.board-row__last-subject { display: block; font-weight: 600; }
.board-row__last-meta { color: var(--ufc-muted); }

.thread-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ufc-border); }
.thread-row:last-child { border-bottom: 0; }
.thread-row__main { flex: 1; min-width: 0; }
.thread-row__title { margin: 0 0 3px; font-size: 14px; }
.thread-row__meta { font-size: 12px; color: var(--ufc-muted); }
.thread-row__stats { width: 110px; flex-shrink: 0; font-size: 12px; color: var(--ufc-muted); display: flex; flex-direction: column; }
.thread-row__last { width: 180px; flex-shrink: 0; font-size: 12px; color: var(--ufc-muted); }

.prefix-pill {
    display: inline-block; padding: 1px 7px; border: 1px solid; border-radius: 4px;
    font-size: 11px; font-weight: 700; margin-right: 5px; vertical-align: middle;
}

.post-block { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--ufc-border); }
.post-block:last-child { border-bottom: 0; }
.post-block__author { width: 150px; flex-shrink: 0; text-align: center; }
.post-block__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; }
.post-block__username { font-weight: 700; display: block; }
.post-block__usertitle { font-size: 11px; color: var(--ufc-muted); }
.post-block__counters { font-size: 11px; color: var(--ufc-muted); margin-top: 6px; }
.post-block__body { flex: 1; min-width: 0; }
.post-block__meta { font-size: 11px; color: var(--ufc-muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.post-block__content { line-height: 1.65; word-wrap: break-word; }
.post-block__edited { font-size: 11px; color: var(--ufc-muted); margin-top: 10px; font-style: italic; }
.post-block__reactions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.post-block__pending { background: rgba(255, 193, 7, .1); border-left: 3px solid #ffc107; padding-left: 12px; }

.reaction-chip {
    font-size: 11px; padding: 2px 8px; border-radius: 12px;
    background: var(--ufc-panel); color: #ccc; border: 1px solid var(--ufc-border);
}

/* News */
.news-card__image, .news-row__image { width: 100%; object-fit: cover; }
.news-card--featured .news-card__image { height: 160px; }
.news-card__body, .news-row__body { padding: 14px; }
.news-card__title, .news-row__title { margin: 8px 0 4px; }
.news-card__date, .news-row__meta { font-size: 12px; color: var(--ufc-muted); }
.news-row { display: flex; gap: 16px; margin-bottom: 14px; }
.news-row__image { width: 200px; height: 130px; flex-shrink: 0; }
.news-row__excerpt { font-size: 13px; color: #bbb; margin: 6px 0; }

.article__figure { margin: 0; }
.article__image { width: 100%; }
.article__figure figcaption { padding: 8px 14px; font-size: 12px; color: var(--ufc-muted); }
.article__excerpt { font-size: 16px; font-weight: 600; color: #ddd; margin-bottom: 18px; }
.article__body { line-height: 1.75; font-size: 15px; }
.article__sources { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--ufc-border); font-size: 13px; }

.comment { padding: 12px 0; border-bottom: 1px solid var(--ufc-border); }
.comment:last-child { border-bottom: 0; }
.comment--reply { margin-left: 28px; border-bottom: 0; border-left: 2px solid var(--ufc-border); padding-left: 12px; }
.comment__meta { font-size: 12px; color: var(--ufc-muted); margin-bottom: 4px; }
.comment__body { line-height: 1.6; }
.comment-form { margin-top: 18px; }

/* Profile */
.profile-card { text-align: center; }
.profile-card__avatar {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--ufc-accent); margin: 0 auto 12px; display: block;
}
.profile-card__tier { display: inline-block; margin-bottom: 12px; }

.award-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.award-chip {
    display: flex; align-items: center; gap: 7px; padding: 6px 11px;
    border: 1px solid var(--ufc-border); border-left-width: 3px; border-radius: 6px;
    background: var(--ufc-panel); font-size: 12px;
}
.award-chip img { width: 20px; height: 20px; }
.award-chip__icon { font-size: 16px; }
.award-chip__count { color: var(--ufc-muted); }

.award-card { padding: 14px; margin-bottom: 14px; height: 100%; }
.award-card--retired { opacity: .55; }
.award-card__head { display: flex; align-items: center; gap: 10px; }
.award-card__icon { font-size: 22px; width: 28px; }
.award-card__name { margin: 0; }
.award-card__description { font-size: 12px; color: var(--ufc-muted); margin: 8px 0; }

/* Store */
.product-card__col { margin-bottom: 20px; }
.product-card { height: 100%; }
.product-card__image { width: 100%; height: 200px; object-fit: cover; }
.product-card__image--empty { display: flex; align-items: center; justify-content: center; background: var(--ufc-panel); color: #555; }
.product-card__body { padding: 12px; }
.product-card__name { margin: 0 0 6px; font-size: 14px; }
.product-card__price { font-weight: 700; }
.product-card__compare { text-decoration: line-through; color: var(--ufc-muted); font-weight: 400; margin-left: 6px; font-size: 12px; }
.product-detail__image { width: 100%; margin-bottom: 10px; }
.product-detail__price { font-size: 26px; font-weight: 700; margin-bottom: 12px; }

.cart-line { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ufc-border); }
.cart-line:last-of-type { border-bottom: 0; }
.cart-line__image img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.cart-line__main { flex: 1; min-width: 0; }
.cart-line__name { margin: 0 0 3px; }
.cart-line__variant { font-size: 12px; color: var(--ufc-muted); }
.cart-line__qty, .cart-line__total { width: 90px; text-align: right; }
.cart-line__total { font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; padding-top: 16px; font-size: 18px; }

.tier-card { height: 100%; margin-bottom: 20px; text-align: center; }
.tier-card__name { margin: 0 0 8px; }
.tier-card__price { font-size: 30px; font-weight: 800; }
.tier-card__period { font-size: 13px; font-weight: 400; color: var(--ufc-muted); }
.tier-card__description { font-size: 13px; color: var(--ufc-muted); margin: 10px 0; }
.tier-card__features { list-style: none; padding: 0; margin: 16px 0; text-align: left; font-size: 13px; }
.tier-card__features li { padding: 5px 0; }
.tier-card__features i { color: var(--ufc-accent); margin-right: 7px; }

/* Admin panel */
.side-nav__item a.is-active { color: var(--ufc-accent); font-weight: 700; }
.admin-errors { margin: 0; padding-left: 18px; }
.admin-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; margin: 16px 0 20px; }
.admin-submit-cell { display: flex; align-items: flex-end; }

.admin-node { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ufc-border); }
.admin-node:last-child { border-bottom: 0; }
.admin-node--depth-1 { padding-left: 28px; }
.admin-node--depth-2 { padding-left: 56px; }
.admin-node__main { flex: 1; min-width: 0; }
.admin-node__type {
    display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ufc-muted); border: 1px solid var(--ufc-border); border-radius: 3px;
    padding: 1px 5px; margin-right: 7px;
}
.admin-node__name { font-size: 14px; }
.admin-node__description { font-size: 12px; color: var(--ufc-muted); margin-top: 3px; }
.admin-node__stats { width: 110px; flex-shrink: 0; font-size: 11px; color: var(--ufc-muted); text-align: right; }
.admin-node__actions { display: flex; gap: 6px; flex-shrink: 0; }

.queue-item { padding: 16px 0; border-bottom: 1px solid var(--ufc-border); }
.queue-item:last-child { border-bottom: 0; }
.queue-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.queue-item__title { margin: 0; }
.queue-item__meta { font-size: 12px; color: var(--ufc-muted); flex-shrink: 0; }
.queue-item__body {
    margin: 10px 0; padding: 10px 12px; background: var(--ufc-panel);
    border-radius: 6px; font-size: 13px; line-height: 1.6; white-space: pre-wrap;
}
.queue-item__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.queue-item__reject { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 260px; }

.log-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ufc-border); }
.log-row:last-child { border-bottom: 0; }
.log-row__action {
    width: 64px; flex-shrink: 0; font-size: 10px; text-transform: uppercase;
    font-weight: 700; padding: 2px 6px; border-radius: 3px; text-align: center;
}
.log-row__action--allow { background: #2e7d32; color: #fff; }
.log-row__action--flag { background: #f9a825; color: #111; }
.log-row__action--hide { background: #ef6c00; color: #fff; }
.log-row__action--delete { background: #b71c1c; color: #fff; }
.log-row__main { flex: 1; min-width: 0; }
.log-row__target { font-size: 13px; }
.log-row__provider { color: var(--ufc-muted); font-size: 11px; }
.log-row__reason { font-size: 12px; color: var(--ufc-muted); margin-top: 3px; }
.log-row__meta { width: 130px; flex-shrink: 0; text-align: right; font-size: 11px; color: var(--ufc-muted); }

.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; margin-top: 12px; }
.permission-grid__cell { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; }
.permission-grid__cell.is-restriction span { color: #ffb74d; }
.permission-grid__cell em { font-size: 10px; opacity: .7; font-style: normal; }

.prefix-row { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.prefix-row__color { width: 54px; padding: 2px; }
.prefix-row__order { width: 72px; }
.prefix-row__delete { padding-bottom: 8px; border-bottom: 1px solid var(--ufc-border); margin-bottom: 4px; }

/* Notifications */
.notification-actions { display: flex; gap: 6px; }
.notification-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ufc-border); }
.notification-row:last-child { border-bottom: 0; }
.notification-row.is-unread { background: rgba(255, 17, 17, .05); }
.notification-row__main { flex: 1; min-width: 0; }
.notification-row__title { font-weight: 700; font-size: 14px; }
.notification-row__body { font-size: 13px; color: #bbb; margin-top: 3px; }
.notification-row__time { font-size: 11px; color: var(--ufc-muted); margin-top: 4px; }
.notification-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Support tickets */
.ticket-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ufc-border); }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row__main { flex: 1; min-width: 0; }
.ticket-row__subject { margin: 0 0 3px; font-size: 14px; }
.ticket-row__meta { font-size: 12px; color: var(--ufc-muted); }

.ticket-message { padding: 14px 0; border-bottom: 1px solid var(--ufc-border); }
.ticket-message:last-child { border-bottom: 0; }
.ticket-message--staff { background: rgba(46, 125, 50, .07); border-left: 3px solid #2e7d32; padding-left: 12px; }
.ticket-message__meta { font-size: 12px; color: var(--ufc-muted); margin-bottom: 6px; }
.ticket-message__body { line-height: 1.65; white-space: pre-wrap; }
.ticket-message__attachments { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12px; }
.ticket-message__attachments li { padding: 3px 0; }
.ticket-close { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ufc-border); }

/* Auth pages */
.card--dark { background: var(--ufc-panel); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; flex-wrap: wrap; }
.auth-row__link { font-size: 13px; }
.auth-footer { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ufc-muted); }
.btn-block { display: block; width: 100%; }

/* Footer status indicator */
.status-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    color: #888; text-decoration: none; font-size: 11px;
}
.status-indicator__dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    animation: status-dot 2s ease-in-out infinite;
}
@keyframes status-dot { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }