/*
  Birdly mobile.css
  Osobny plik ładowany po style.css, żeby telefon nadpisywał desktop bez psucia wersji PC.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
        background: #03080d;
    }

    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        font-size: 15px;
    }

    body::before,
    .page-glow {
        display: none !important;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
    }

    input,
    textarea,
    select,
    button {
        max-width: 100%;
        font-size: 16px; /* iOS nie przybliża ekranu po kliknięciu inputa */
    }

    /* TOPBAR MOBILE */
    .topbar,
    .company-visual-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 9000 !important;
        height: 66px !important;
        min-height: 66px !important;
        overflow: visible !important;
        border-bottom: 1px solid rgba(0,229,255,.12) !important;
        background:
            linear-gradient(180deg, rgba(3,12,20,.96), rgba(1,6,10,.94)) !important;
        box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .topbar::before {
        opacity: .18 !important;
        background-position: center !important;
    }

    .topbar-inner,
    .company-visual-topbar .topbar-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: 66px !important;
        min-height: 66px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .topbar .brand,
    .company-visual-topbar .brand {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 9px !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }

    .topbar .brand-mark,
    .company-visual-topbar .brand-mark {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 13px !important;
    }

    .topbar .brand h1,
    .company-visual-topbar .brand h1 {
        margin: 0 !important;
        font-size: 25px !important;
        line-height: 1 !important;
        letter-spacing: -.045em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar .brand p,
    .company-visual-topbar .brand p,
    .topbar .search-bar,
    .company-visual-topbar .search-bar,
    .topbar .main-nav,
    .company-visual-topbar .main-nav {
        display: none !important;
    }

    .profile-menu,
    .topbar-profile-menu,
    .profile-menu-wrap {
        position: relative !important;
        z-index: 9200 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .user-chip,
    .profile-chip,
    .active-profile-chip,
    .profile-menu-trigger {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.055) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
    }

    .user-chip img,
    .profile-chip img,
    .active-profile-chip img,
    .profile-menu-trigger img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .user-chip span,
    .profile-chip span,
    .active-profile-chip span,
    .profile-menu-trigger span,
    .user-chip > .icon,
    .profile-chip > .icon,
    .active-profile-chip > .icon,
    .profile-menu-trigger > .icon,
    .user-chip > svg,
    .profile-chip > svg,
    .active-profile-chip > svg,
    .profile-menu-trigger > svg {
        display: none !important;
    }

    .profile-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(270px, calc(100vw - 20px)) !important;
        z-index: 9999 !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(5,18,30,.98), rgba(0,7,12,.98)) !important;
        border: 1px solid rgba(0,229,255,.18) !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.72) !important;
    }

    /* LAYOUT MOBILE */
    .layout,
    .profile-layout,
    .pages-layout-v4,
    .company-detail-layout,
    .company-visual-layout,
    .ads-layout,
    .listing-detail-layout,
    .events-layout,
    .event-detail-layout,
    .edit-profile-layout,
    .user-profile-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 10px 96px !important;
        overflow: visible !important;
    }

    .left-sidebar,
    .pages-left-sidebar,
    .ads-sidebar,
    .events-sidebar,
    .company-visual-sidebar,
    .right-column,
    .online-panel,
    .profile-right,
    .pages-right-v4,
    .company-detail-side,
    .company-visual-side,
    .events-right {
        display: none !important;
    }

    .feed-column,
    .profile-main,
    .friend-main,
    .pages-main,
    .ads-main,
    .events-main,
    .company-detail-main,
    .company-visual-main,
    .listing-detail-main,
    .event-detail-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .listing-info-panel,
    .event-side-stack {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    .glass-card,
    .composer,
    .post-card,
    .stories-card,
    .events-card,
    .suggestion-card,
    .profile-hero,
    .profile-about-card,
    .friend-section,
    .friends-hero,
    .mini-panel,
    .pages-hero,
    .pages-card,
    .company-profile-hero-v4,
    .ads-hero,
    .ads-card,
    .listing-detail-card,
    .events-hero,
    .event-detail-card,
    .event-hero-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    h1, h2, h3, h4,
    .section-title h2,
    .friend-section-title h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .section-title,
    .friend-section-title,
    .pages-section-title,
    .ads-section-title,
    .events-section-title {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        margin-bottom: 12px !important;
    }

    .section-title h2,
    .friend-section-title h3,
    .pages-section-title h2,
    .ads-section-title h2,
    .events-section-title h2 {
        font-size: 19px !important;
        line-height: 1.15 !important;
    }

    /* POSTY */
    .composer-top,
    .composer-v3-top {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .composer-top img,
    .composer-v3-top img {
        width: 44px !important;
        height: 44px !important;
        border-radius: 13px !important;
        object-fit: cover !important;
    }

    .composer textarea,
    .composer input,
    .composer select,
    .composer-v3 textarea,
    .composer-v3 input,
    .composer-v3 select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .composer-actions,
    .composer-v3-actions,
    .composer-option-row,
    .composer-options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .composer-actions button,
    .composer-v3-actions button,
    .composer-option-row button,
    .composer-options button,
    .composer-options label {
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    .composer-actions button[type="submit"],
    .composer-v3-actions button[type="submit"],
    .composer-options button[type="submit"] {
        grid-column: 1 / -1 !important;
    }

    .post-head,
    .post-header {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .post-head img,
    .post-header img,
    .comment-form img,
    .comment img {
        width: 44px !important;
        height: 44px !important;
        border-radius: 13px !important;
        object-fit: cover !important;
    }

    .post-body,
    .post-card p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .post-media,
    .post-image-wrap {
        width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(0,0,0,.18) !important;
    }

    .post-media img,
    .post-image,
    .post-card > img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 72vh !important;
        object-fit: contain !important;
        margin-inline: auto !important;
        border-radius: 16px !important;
    }

    .post-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 13px !important;
    }

    .post-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .post-actions > *,
    .post-actions button,
    .post-actions a,
    .reaction-form,
    .reaction-form > button {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding-inline: 6px !important;
    }

    .reaction-picker {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        width: min(342px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        overflow-x: auto !important;
        padding: 8px !important;
        border-radius: 18px !important;
    }

    .comment-form {
        display: grid !important;
        grid-template-columns: 40px minmax(0,1fr) !important;
        gap: 8px !important;
    }

    .comment-form button {
        grid-column: 2 !important;
        width: 100% !important;
    }

    /* RELACJE */
    .stories-grid,
    .story-grid,
    .stories-row {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .story,
    .story-thumb,
    .story-card {
        flex: 0 0 118px !important;
        width: 118px !important;
        height: 164px !important;
        border-radius: 16px !important;
    }

    .story img,
    .story-thumb img,
    .story-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* PROFIL */
    .profile-hero {
        padding: 0 !important;
    }

    .profile-cover,
    .profile-hero-cover,
    .edit-profile-cover {
        height: 132px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .profile-identity,
    .profile-main-row,
    .profile-info-row,
    .edit-profile-hero-content {
        display: block !important;
        padding: 14px !important;
        text-align: left !important;
    }

    .profile-avatar,
    .profile-avatar-big,
    .edit-profile-avatar,
    .profile-photo {
        width: 90px !important;
        height: 90px !important;
        border-radius: 22px !important;
        margin-top: -42px !important;
        margin-bottom: 10px !important;
    }

    .profile-name,
    .profile-identity h1,
    .edit-profile-hero h1 {
        font-size: clamp(28px, 10vw, 42px) !important;
        line-height: 1 !important;
    }

    .profile-actions,
    .profile-premium-actions,
    .edit-profile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .profile-actions a,
    .profile-actions button,
    .edit-profile-actions a,
    .edit-profile-actions button {
        width: 100% !important;
        justify-content: center !important;
    }

    .profile-metrics,
    .profile-stats,
    .profile-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .edit-profile-tabs,
    .profile-tabs,
    .friend-tabs,
    .friends-tabs,
    .events-filter-row,
    .ads-tabs,
    .pages-tabs {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    .edit-profile-tabs a,
    .profile-tabs a,
    .friend-tabs a,
    .friends-tabs a,
    .events-filter-row a,
    .ads-tabs a,
    .pages-tabs a {
        flex: 0 0 auto !important;
    }

    .edit-profile-form-grid,
    .profile-form-grid,
    .profile-settings-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ZNAJOMI */
    .friends-headline,
    .friends-controls,
    .friend-layout,
    .friend-list-row,
    .request-card {
        display: block !important;
    }

    .friends-search,
    .friends-search input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .friends-stats,
    .request-grid,
    .friends-grid,
    .friend-list-grid,
    .friends-category-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .friend-actions,
    .request-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* FIRMY */
    .pages-hero,
    .pages-toolbar,
    .pages-stats,
    .pages-grid,
    .company-grid,
    .company-info-grid-v4,
    .company-bottom-grid-v4,
    .company-profile-stats-v4,
    .company-stat-strip,
    .company-profile-content-v4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .company-profile-cover-v4 {
        height: 145px !important;
    }

    .company-profile-logo-v4 {
        width: 90px !important;
        height: 90px !important;
        border-radius: 20px !important;
    }

    .company-profile-copy-v4 h2 {
        font-size: clamp(27px, 9vw, 40px) !important;
        line-height: 1 !important;
    }

    .company-profile-actions-v4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .company-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* OGŁOSZENIA */
    .ads-hero,
    .ads-toolbar,
    .ads-category-grid,
    .ads-grid,
    .listing-detail-grid,
    .listing-content-grid,
    .listing-gallery {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ad-card,
    .listing-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ad-card img,
    .listing-card img,
    .listing-gallery-main img,
    .listing-photo img {
        width: 100% !important;
        height: auto !important;
        max-height: 62vh !important;
        object-fit: contain !important;
        border-radius: 16px !important;
    }

    .listing-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* WYDARZENIA */
    .events-hero,
    .events-toolbar,
    .events-featured-grid,
    .events-grid,
    .events-list,
    .event-detail-grid,
    .event-hero-content,
    .event-info-grid,
    .event-create-grid,
    .event-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .event-card,
    .event-row,
    .events-list-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .event-card img,
    .event-cover,
    .event-hero img,
    .event-image {
        width: 100% !important;
        height: auto !important;
        max-height: 58vh !important;
        object-fit: contain !important;
        border-radius: 16px !important;
    }

    .right-column .events-card .event-row,
    .events-card .event-row {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .right-column .events-card .event-date,
    .events-card .event-date {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        border-radius: 15px !important;
    }

    .right-column .events-card .event-date strong,
    .right-column .events-card .event-date b,
    .events-card .event-date strong,
    .events-card .event-date b {
        font-size: 22px !important;
    }

    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .chat-box,
    .mobile-menu-toggle,
    .floating-chat {
        display: none !important;
    }

    /* DOLNE MENU */
    .mobile-bottom-nav {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        height: 64px !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 2px !important;
        z-index: 9998 !important;
        padding: 6px !important;
        border: 1px solid rgba(0,229,255,.18) !important;
        border-radius: 22px !important;
        background: linear-gradient(180deg, rgba(6,21,31,.96), rgba(0,6,11,.98)) !important;
        box-shadow: 0 22px 70px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.025) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .mobile-bottom-nav a {
        min-width: 0 !important;
        height: 52px !important;
        display: grid !important;
        place-items: center !important;
        gap: 2px !important;
        padding: 4px 2px !important;
        border-radius: 16px !important;
        color: #8fa6bb !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .mobile-bottom-nav a .icon,
    .mobile-bottom-nav a svg {
        width: 21px !important;
        height: 21px !important;
        display: block !important;
    }

    .mobile-bottom-nav a span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-nav a.active {
        color: #001018 !important;
        background: linear-gradient(135deg, var(--cyan), var(--cyan-2)) !important;
        box-shadow: 0 0 26px rgba(0,229,255,.22) !important;
    }
}

@media (max-width: 430px) {
    .topbar .brand h1 {
        font-size: 23px !important;
    }

    .topbar .brand-mark {
        width: 39px !important;
        height: 39px !important;
        min-width: 39px !important;
    }

    .user-chip,
    .profile-chip,
    .active-profile-chip,
    .profile-menu-trigger {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .user-chip img,
    .profile-chip img,
    .active-profile-chip img,
    .profile-menu-trigger img {
        width: 34px !important;
        height: 34px !important;
    }

    .layout,
    .profile-layout,
    .pages-layout-v4,
    .company-detail-layout,
    .company-visual-layout,
    .ads-layout,
    .events-layout,
    .event-detail-layout,
    .listing-detail-layout,
    .edit-profile-layout {
        padding: 8px 8px 94px !important;
    }

    .glass-card,
    .composer,
    .post-card,
    .profile-hero,
    .friend-section,
    .mini-panel,
    .pages-card,
    .ads-card,
    .events-card {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-nav {
        left: 6px !important;
        right: 6px !important;
        height: 62px !important;
        border-radius: 20px !important;
    }

    .mobile-bottom-nav a {
        font-size: 9px !important;
    }

    .mobile-bottom-nav a .icon,
    .mobile-bottom-nav a svg {
        width: 19px !important;
        height: 19px !important;
    }

    .post-actions {
        gap: 5px !important;
    }

    .post-actions > *,
    .post-actions button,
    .post-actions a,
    .reaction-form > button {
        font-size: 11px !important;
    }
}