/* ONEMC.LT – profilis.php stiliai */

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {

    margin: 0;

    background: #0a0d14;

    color: #e5e7eb;

    font-family: 'Inter', sans-serif;

    overflow-x: hidden;
}

/*
|--------------------------------------------------------------------------
| Bendra
|--------------------------------------------------------------------------
*/

.neon-line {

    height: 2px;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3b82f6,
            transparent
        );

    box-shadow:
        0 0 14px
        rgba(59,130,246,.7);
}

.content-width {

    max-width: 1280px;

    margin: 0 auto;

    width: 100%;

    padding-left: 48px;

    padding-right: 48px;
}

.section-title {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 8px;
}

.section-title::before {

    content: '';

    display: block;

    width: 3px;

    height: 19px;

    background: #3b82f6;

    box-shadow:
        0 0 10px
        rgba(59,130,246,.65);
}

.section-title h2 {

    margin: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 800;
}

.section-description {

    margin-left: 14px;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| Profilio header
|--------------------------------------------------------------------------
*/

.profile-header {

    position: relative;

    min-height: 330px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.profile-header.none {

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(59,130,246,.28),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(29,78,216,.25),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #08101f 0%,
            #0b1b38 48%,
            #0a0d14 100%
        );
}

.profile-header.none::before {

    content: '';

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            115deg,
            rgba(59,130,246,.08),
            transparent 42%,
            rgba(29,78,216,.08)
        );
}

/*
|--------------------------------------------------------------------------
| Custom ir preset baneris per visą headerį
|--------------------------------------------------------------------------
*/

.profile-header.with-banner {

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}

.profile-header.with-banner::before {

    content: '';

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(10,13,20,.94),
            rgba(10,13,20,.58),
            rgba(10,13,20,.82)
        );
}

.profile-header.with-banner::after {

    content: '';

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 30%,
            #0a0d14 100%
        );
}

.profile-header-content {

    position: relative;

    z-index: 3;

    min-height: 330px;
}

/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.profile-avatar-wrap {

    position: relative;

    width: 104px;

    height: 104px;

    flex-shrink: 0;
}

.profile-avatar-wrap::before {

    content: '';

    position: absolute;

    inset: -5px;

    border: 1px solid
        rgba(59,130,246,.55);

    border-radius: 14px;

    box-shadow:
        0 0 24px
        rgba(59,130,246,.18);
}

.profile-avatar {

    position: relative;

    z-index: 2;

    display: block;

    width: 104px;

    height: 104px;

    image-rendering: pixelated;

    border-radius: 10px;

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.45);
}

/*
|--------------------------------------------------------------------------
| Header statistika
|--------------------------------------------------------------------------
*/

.profile-header-stats {

    display: flex;

    align-items: stretch;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(5,10,20,.16);

    backdrop-filter: blur(7px);
}

.profile-header-stat {

    min-width: 135px;

    padding:
        14px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.profile-header-stat + .profile-header-stat {

    border-left:
        1px solid
        rgba(255,255,255,.10);
}

.profile-header-stat-value {

    color: #ffffff;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;
}

.profile-header-stat-label {

    margin-top: 5px;

    color: #6b7280;

    font-size: 10px;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Tabai
|--------------------------------------------------------------------------
*/

.profile-tabs-wrapper {

    border-bottom:
        1px solid
        rgba(31,41,55,.9);

    background:
        rgba(13,16,23,.72);
}

.profile-tabs-nav {

    display: flex;

    align-items: center;

    overflow-x: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;
}

.profile-tabs-nav::-webkit-scrollbar {
    display: none;
}

.profile-tab {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 60px;

    margin-right: 32px;

    flex-shrink: 0;

    color: #6b7280;

    font-size: 13px;

    font-weight: 600;

    transition:
        color .2s ease;

    cursor: pointer;

    text-decoration: none;
}

.profile-tab:last-child {
    margin-right: 0;
}

.profile-tab:hover {
    color: #d1d5db;
}

.profile-tab.active {
    color: #ffffff;
}

.profile-tab.active::after {

    content: '';

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 2px;

    background: #3b82f6;

    box-shadow:
        0 0 12px
        rgba(59,130,246,.75);
}

/*
|--------------------------------------------------------------------------
| Statistikos eilutės
|--------------------------------------------------------------------------
*/

.overview-columns {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 48px;
}

.overview-column + .overview-column {

    border-left:
        1px solid
        rgba(31,41,55,.75);

    padding-left: 48px;
}

.overview-stat {

    min-height: 78px;

    display: flex;

    align-items: center;

    position: relative;

    border-bottom:
        1px solid
        rgba(31,41,55,.72);

    transition:
        padding-left .2s ease,
        border-color .2s ease;
}

.overview-stat:hover {

    padding-left: 5px;

    border-color:
        rgba(59,130,246,.35);
}

.overview-stat:last-child {
    border-bottom: 0;
}

.overview-stat-icon {

    width: 38px;

    flex-shrink: 0;

    margin-right: 15px;

    color: #60a5fa;

    font-size: 17px;

    text-align: center;
}

.overview-stat-value {

    color: #f9fafb;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;
}

.overview-stat-label {

    margin-top: 3px;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| TOP eilutės
|--------------------------------------------------------------------------
*/

.top-columns {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 48px;
}

.top-column + .top-column {

    border-left:
        1px solid
        rgba(31,41,55,.75);

    padding-left: 48px;
}

.top-row {

    min-height: 62px;

    display: flex;

    align-items: center;

    position: relative;

    border-bottom:
        1px solid
        rgba(31,41,55,.72);

    text-decoration: none;

    transition:
        padding-left .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.top-row:last-child {
    border-bottom: 0;
}

.top-row:hover {

    padding-left: 7px;

    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.06),
            transparent
        );

    border-color:
        rgba(59,130,246,.35);
}

.top-number {

    width: 60px;

    flex-shrink: 0;

    color: #3b82f6;

    font-weight: 800;

    font-size: 13px;
}

.top-name {

    flex: 1;

    color: #d1d5db;

    font-size: 13px;

    font-weight: 500;
}

.top-icon {

    color: #4b5563;

    font-size: 13px;

    transition:
        color .2s ease;
}

.top-row:hover .top-icon {
    color: #60a5fa;
}

/*
|--------------------------------------------------------------------------
| Istorija / nustatymai
|--------------------------------------------------------------------------
*/

.flat-section {

    padding:
        0 0 28px;

    margin-bottom: 28px;

    border-bottom:
        1px solid
        rgba(31,41,55,.75);
}

.flat-section:last-child {

    border-bottom: 0;

    margin-bottom: 0;
}

.flat-section-title {

    color: #ffffff;

    font-size: 17px;

    font-weight: 800;
}

.flat-section-description {

    margin-top: 5px;

    color: #6b7280;

    font-size: 11px;
}

.empty-history {

    padding:
        28px 0 0;

    color: #4b5563;

    font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| Setting eilutės
|--------------------------------------------------------------------------
*/

.setting-row {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    border-bottom:
        1px solid
        rgba(31,41,55,.72);

    transition:
        padding-left .2s ease;
}

.setting-row:last-child {
    border-bottom: 0;
}

.setting-row:hover {
    padding-left: 5px;
}

.setting-title {

    color: #e5e7eb;

    font-size: 13px;

    font-weight: 600;
}

.setting-description {

    margin-top: 4px;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Toggle
|--------------------------------------------------------------------------
*/

.toggle {

    position: relative;

    display: block;

    width: 40px;

    height: 22px;

    border-radius: 999px;

    background: #1f2937;

    border:
        1px solid
        rgba(255,255,255,.06);

    transition:
        background .2s ease,
        border-color .2s ease;
}

.toggle::after {

    content: '';

    position: absolute;

    width: 16px;

    height: 16px;

    top: 2px;

    left: 2px;

    border-radius: 50%;

    background: #9ca3af;

    transition:
        left .2s ease,
        background .2s ease;
}

input:checked + .toggle {

    background: #2563eb;

    border-color:
        rgba(96,165,250,.55);
}

input:checked + .toggle::after {

    left: 20px;

    background: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Baneriai
|--------------------------------------------------------------------------
*/

.banner-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;

    max-width: 900px;

    margin-top: 20px;
}

.banner-option {

    position: relative;

    display: block;

    cursor: pointer;
}

.banner-option img {

    display: block;

    width: 100%;

    height: 76px;

    object-fit: cover;

    border-radius: 6px;

    opacity: .48;

    border:
        1px solid
        rgba(255,255,255,.08);

    transition:
        opacity .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.banner-option:hover img {

    opacity: .9;

    transform:
        translateY(-2px);
}

.banner-option.selected img {

    opacity: 1;

    border-color: #3b82f6;

    box-shadow:
        0 0 0 2px
        rgba(59,130,246,.16);
}

.banner-none {

    width: 100%;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    border:
        1px solid
        rgba(75,85,99,.7);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(59,130,246,.25),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #101b31,
            #0a1222
        );

    color: #9ca3af;

    font-size: 11px;

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.banner-option:hover .banner-none {

    color: #e5e7eb;

    transform:
        translateY(-2px);
}

.banner-option.selected .banner-none {

    color: #ffffff;

    border-color: #3b82f6;

    box-shadow:
        0 0 0 2px
        rgba(59,130,246,.16);
}

/*
|--------------------------------------------------------------------------
| Custom banerio pasirinkimas
|--------------------------------------------------------------------------
*/

.custom-banner-upload {

    height: 76px;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    border:
        1px dashed
        #374151;

    color: #6b7280;

    font-size: 11px;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.custom-banner-upload:hover {

    color: #d1d5db;

    border-color: #6b7280;

    background:
        rgba(59,130,246,.04);

    transform:
        translateY(-2px);
}

.custom-banner-upload.custom-selected {

    color: #ffffff;

    border-color: #3b82f6;

    background:
        rgba(59,130,246,.07);

    box-shadow:
        0 0 0 2px
        rgba(59,130,246,.16);
}

.custom-banner-upload i {

    margin-bottom: 5px;

    font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| Atsijungimas
|--------------------------------------------------------------------------
*/

.logout-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f87171;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .2s ease;
}

.logout-link:hover {
    color: #fca5a5;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .content-width {

        padding-left: 32px;

        padding-right: 32px;
    }

    .profile-header-stats {
        width: 100%;
    }

    .profile-header-stat {
        flex: 1;
    }

    .banner-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .content-width {

        padding-left: 20px;

        padding-right: 20px;
    }

    .profile-header {

        min-height: 450px;
    }

    .profile-header-content {

        min-height: 450px;
    }

    .profile-avatar-wrap,
    .profile-avatar {

        width: 86px;

        height: 86px;
    }

    .profile-avatar-wrap::before {
        border-radius: 12px;
    }

    .profile-header-stat {

        min-width: 0;

        padding:
            12px 7px;
    }

    .profile-header-stat-value {
        font-size: 14px;
    }

    .profile-header-stat-label {
        font-size: 8px;
    }

    .profile-tab {

        height: 54px;

        margin-right: 22px;

        font-size: 12px;
    }

    .overview-columns,
    .top-columns {

        grid-template-columns: 1fr;

    }

    .overview-column + .overview-column,
    .top-column + .top-column {

        border-left: 0;

        padding-left: 0;

        border-top:
            1px solid
            rgba(31,41,55,.75);

        margin-top: 0;
    }

    .overview-column + .overview-column {
        margin-top: 0;
    }

    .banner-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 100%;
    }
}

@media (max-width: 520px) {

    .content-width {

        padding-left: 16px;

        padding-right: 16px;
    }

    .profile-header {

        min-height: 475px;
    }

    .profile-header-content {

        min-height: 475px;
    }

    .profile-header-stat {

        padding:
            11px 4px;
    }

    .profile-header-stat-value {
        font-size: 13px;
    }

    .profile-header-stat-label {

        font-size: 7px;

        letter-spacing: .04em;
    }

    .profile-tab {

        margin-right: 18px;
    }

    .section-title h2 {
        font-size: 18px;
    }

    .banner-grid {
        gap: 8px;
    }

    .banner-option img,
    .banner-none,
    .custom-banner-upload {

        height: 68px;
    }

    .setting-row {

        min-height: 78px;

        gap: 12px;
    }
}