/* ==========================================================================
   Theme 3 — the one footer
   Styles theme3/partials/footer.blade.php, which the landing sidebar, the split
   auth shell and the main app sidebar all render. Loaded by all three so the
   Login/Dashboard pill, the social icons and the attribution line are literally
   the same rules everywhere.

   Colours come from the --t3-* tokens in auth-theme3.css (landing + auth) and
   from the --t3s-* tokens in theme3-app-sidebar.css (app sidebar). Both are
   mapped onto the --t3f-* names below, so this file never has to know which
   host it is in.

   Hosts own only spacing, via the wrapper class they pass in:
   .t3l-sidebar-bottom (landing), .t3-foot (auth), .t3s-bottom (app).
   ========================================================================== */

.t3f {
    --t3f-primary: var(--t3-primary, var(--t3s-brand, #2f6fed));
    --t3f-text: var(--t3-text, var(--t3s-text, #101828));
    --t3f-muted: var(--t3-text-muted, var(--t3s-muted, #667085));
    --t3f-faint: var(--t3-placeholder, var(--t3s-faint, #98a2b3));
    --t3f-border: var(--t3-border, var(--t3s-border, #e4e7ec));
    --t3f-subtle: var(--t3-subtle-bg, var(--t3s-subtle, #f9fafb));
    --t3f-radius: var(--t3-radius, var(--t3s-radius, 10px));

    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --------------------------------------------------------------------------
   Login / Dashboard pill, optionally beside the "visit site" button
   -------------------------------------------------------------------------- */

/* align-items: stretch keeps the square button exactly as tall as the pill. */
.t3f-cta-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.t3f-cta-row .t3f-cta {
    flex: 1 1 auto;
    min-width: 0;
}

.t3f-home {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    border-radius: var(--t3f-radius);
    border: 1px solid var(--t3f-border);
    background: var(--t3f-subtle);
    color: var(--t3f-muted);
    font-size: 15px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

.t3f-home:hover {
    background: var(--t3f-primary);
    border-color: var(--t3f-primary);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.t3f-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 17px;
    border-radius: var(--t3f-radius);
    background: #101828;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
    transition: background .15s ease, transform .12s ease;
    white-space: nowrap;
}

.t3f-cta:hover {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* On a dark panel the near-black button would disappear — invert it. */
.dark-theme .t3f-cta {
    background: #fff;
    color: #101828;
}

.dark-theme .t3f-cta:hover {
    background: #e4e7ec;
    color: #101828;
}

/* --------------------------------------------------------------------------
   Mini footer: languages, social, attribution
   -------------------------------------------------------------------------- */

.t3f-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.t3f-langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
}

.t3f-langs a {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t3f-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.t3f-langs a:hover {
    color: var(--t3f-primary);
}

.t3f-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.t3f-social-ic {
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--t3f-border);
    background: var(--t3f-subtle);
    color: var(--t3f-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.t3f-social-ic:hover {
    color: #fff;
    background: var(--t3f-primary);
    border-color: var(--t3f-primary);
    transform: translateY(-2px);
    text-decoration: none;
}

.t3f-copy {
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--t3f-faint);
}

.t3f-sep {
    opacity: .5;
    margin: 0 2px;
}

.t3f-link {
    color: var(--t3f-muted);
    font-weight: inherit;
    text-decoration: none;
    transition: color .15s ease;
}

.t3f-link:hover {
    color: var(--t3f-primary);
    text-decoration: underline;
}