/* Prevent overflow and scrollbars */
        html {
            overflow-x: hidden;
            overflow-y: scroll; /* Always show scrollbar space to prevent layout shift */
            max-width: 100vw;
        }
        
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }

        /* Fix background jumping on scroll.
           The photo MUST be declared here: styles.deduped.min.css sets the
           photo on body but then a later rule resets body to transparent,
           leaving a plain background with nothing for the frosted blur
           to show. (home/activity declare it inline for the same reason) */
        body {
            background-image: url('seba.jpg') !important;
            background-attachment: fixed !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        /* Override background-overlay to remove blur */
        /* Match homepage: no dark overlay, the photo shows through and
           frosted cards provide the contrast */
        .recipients-page .background-overlay {
            backdrop-filter: none !important;
            background: transparent !important;
        }

        /* Breathing room at the very top - the navbar was removed, so the
           filter panel starts the page (respects the phone's status bar).
           Applied on BODY: padding there cannot be affected by margin
           collapse or any container rule. Mobile only - on desktop the
           sidebar's 12px alignment applies. */
        @media (max-width: 991.98px) {
            body.recipients-page {
                padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
            }
            .recipients-page .container.mt-4 {
                margin-top: 0 !important;
                padding-top: 8px !important;
            }
        }

        /* Frosted cards - unified app look */
        .recipients-page .card,
        .recipients-page .main-card,
        .recipients-page .compact-card,
        .recipients-page .aws-action-card,
        .recipients-page .aws-main-content {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(16px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
        }

        /* Recipient cards - same frosted surface */
        .recipients-page .recipient-card {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(16px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
        }

        /* Frosted modals */
        .recipients-page .modal-content {
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(16px) !important;
        }

        /* ===== Homepage-like layout =====
           The big wrapper card disappears; the header and each person card
           float directly on the background like the homepage sections. */
        /* K1: outer wrapper is transparent — individual recipient cards
           float directly on the background photo, no double-frosted-glass
           stacking that breaks backdrop-filter on the inner cards. */
        .recipients-page .aws-main-content {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .recipients-page .aws-main-content > .aws-content-header {
            border-radius: 16px;
            margin-bottom: 14px;
        }

        .recipients-page .aws-content-body {
            padding: 0 !important;
        }

        /* backdrop-filter on the cards only works when NO ancestor forms
           a "backdrop root" (transform / filter / backdrop-filter /
           opacity / will-change...). Neutralize the remaining wrapper
           chain down to the list (outer wrapper is now transparent, but
           the content-body and list divs still need neutralizing). */
        .recipients-page .aws-content-body,
        .recipients-page #recipientsList,
        .recipients-page #recipientsList .loading-placeholder {
            transform: none !important;
            filter: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            opacity: 1 !important;
            will-change: auto !important;
            isolation: auto !important;
            mix-blend-mode: normal !important;
            contain: none !important;
            overflow: visible !important;
        }

        .recipients-page .recipient-item {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(16px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            border-radius: 20px !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
            margin-bottom: 16px !important;
            padding: 24px !important;
            /* aws-design.css sets will-change: transform which promotes the
               card to its own compositing layer and BREAKS backdrop-filter
               in Chromium - the blur samples an empty backdrop. Reset it so
               the frosted blur actually renders (home cards don't have it). */
            will-change: auto !important;
        }
        
        /* ===== Homepage-style present rows =====
           aws-design.css forces every .d-flex inside present items into a
           CENTERED COLUMN (flex-direction: column; align-items: center;
           text-align: center) which stacked the icon/title/buttons in the
           middle. Undo all of it: the row is horizontal, content sits on
           the left, only the actions column stacks vertically (on the
           right), exactly like the homepage rows. */
        .recipients-page .present-item {
            text-align: left !important;
        }
        .recipients-page .present-item .d-flex {
            flex-direction: row !important;
            align-items: flex-start !important;
            text-align: left !important;
            flex-wrap: nowrap !important;
        }
        .recipients-page .present-item .d-flex > div {
            text-align: left !important;
            width: auto !important;
        }
        /* The actions cell is the one column in the row */
        .recipients-page .present-item .present-actions.d-flex {
            flex-direction: column !important;
            align-items: stretch !important;
        }
        /* Legacy rules centered dates/comments - back to the left */
        .recipients-page .present-item .text-muted,
        .recipients-page .present-item .small,
        .recipients-page .present-item .d-flex .text-muted,
        .recipients-page .present-item .d-flex .small {
            text-align: left !important;
            width: auto !important;
            margin: 0 !important;
        }
        .recipients-page .present-item .present-title,
        .recipients-page .present-item .present-comments {
            text-align: left !important;
        }
        /* Gift icon: static (no pulse animation) and tinted by state,
           matching the homepage rows */
        .recipients-page .present-item .present-gift-icon {
            color: #FF9800;
            animation: none !important;
            text-shadow: none !important;
        }
        .recipients-page .present-item.reserved-by-me .present-gift-icon { color: #EF6C00; }
        .recipients-page .present-item.checked .present-gift-icon { color: #43A047; }
        .recipients-page .present-item.reserved-by-other .present-gift-icon { color: #9e9e9e; }
        .recipients-page .present-item .present-actions .btn { white-space: nowrap; }

        /* I1: Small-screen button safety — prevent overflow on narrow viewports */
        @media (max-width: 480px) {
            .recipients-page .present-item .present-actions .btn {
                white-space: normal;
                font-size: 0.8rem;
                padding: 0.5rem 0.75rem;
                min-height: 36px;
            }
        }

        /* Present rows: readable titles, no mid-word breaks. The legacy
           word-break: break-word / break-all rules let the title collapse
           to single letters next to the nowrap action buttons. */
        .recipients-page .present-item .present-title,
        .recipients-page .present-item .present-comments {
            word-break: normal !important;
            overflow-wrap: break-word !important;
            hyphens: manual;
        }
        .recipients-page .present-item .present-title {
            line-height: 1.4 !important;
        }
        .recipients-page .present-item:not(.checked):not(.reserved-by-other):not(.reserved-by-me) .present-title {
            color: #1a1a1a !important;
        }
        .recipients-page .present-item .present-link {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
        }
        @media (max-width: 767.98px) {
            .recipients-page .present-item .present-title { font-size: 16px !important; }
            .recipients-page .present-item .present-comments {
                font-size: 15px !important;
                line-height: 1.45;
            }
            .recipients-page .present-item:not(.checked):not(.reserved-by-other) .present-comments {
                color: #2b2b2b !important;
            }
        }
        /* Narrow phones: actions drop below the title instead of squeezing it */
        @media (max-width: 480px) {
            .recipients-page .present-item > .d-flex {
                flex-wrap: wrap !important;
                row-gap: 10px !important;
            }
            .recipients-page .present-item > .d-flex > .present-details {
                flex: 1 1 100% !important;
                width: 100% !important;
            }
            .recipients-page .present-item > .d-flex > .present-actions.d-flex {
                flex: 1 1 100% !important;
                flex-direction: row !important;
                justify-content: flex-end !important;
                align-items: center !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
                width: 100% !important;
            }
            .recipients-page .present-item .present-actions .btn,
            .recipients-page .present-item .present-actions .btn.w-100 {
                width: auto !important;
                min-width: 0 !important;
                white-space: nowrap !important;
                min-height: 40px;
                padding: 0.5rem 0.9rem !important;
                font-size: 0.875rem !important;
            }
        }
        /* Keep the last card clear of the floating tab bar + FAB */
        @media (max-width: 991.98px) {
            body.recipients-page.has-tab-bar {
                padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* Gray text with white shadow in modals */
        .recipients-page .modal-content,
        .recipients-page .modal-content * {
            color: #333 !important;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
        }
        
        /* Keep input text without shadow */
        .recipients-page .modal-content input,
        .recipients-page .modal-content textarea,
        .recipients-page .modal-content select {
            text-shadow: none !important;
        }
        
        /* White text for buttons with colored background */
        .recipients-page .modal-content .btn-primary,
        .recipients-page .modal-content .btn-primary *,
        .recipients-page .modal-content .btn-danger,
        .recipients-page .modal-content .btn-danger *,
        .recipients-page .modal-content .btn-success,
        .recipients-page .modal-content .btn-success *,
        .recipients-page .modal-content .btn-warning,
        .recipients-page .modal-content .btn-warning *,
        .recipients-page .modal-content .btn-info,
        .recipients-page .modal-content .btn-info *,
        .recipients-page .modal-content .aws-btn-primary,
        .recipients-page .modal-content .aws-btn-primary * {
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }
        
        /* Gray background with white text for secondary buttons */
        .recipients-page .modal-content .btn-secondary,
        .recipients-page .modal-content .aws-btn-secondary {
            background-color: #6c757d !important;
            border-color: #6c757d !important;
            color: white !important;
        }
        
        .recipients-page .modal-content .btn-secondary *,
        .recipients-page .modal-content .aws-btn-secondary * {
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }
        
        /* Skeleton loading placeholders */
        .skeleton-cards {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 8px 0;
        }
        .skeleton-card {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .skeleton {
            background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
            border-radius: 8px;
        }
        .skeleton-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .skeleton-lines {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 6px;
        }
        .skeleton-line {
            height: 14px;
        }
        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .skeleton { animation: none; }
        }

        /* Reserved presents modal - yellow background for "Do kupienia" */
        .recipients-page #reservedPresentsModal .card-header[style*="fff3cd"] {
            background-color: #ffc107 !important;
            border-color: #ffc107 !important;
        }
        
        .recipients-page #reservedPresentsModal .card-header[style*="fff3cd"] strong,
        .recipients-page #reservedPresentsModal .card-header[style*="fff3cd"] i {
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }
        
        /* Reserved presents modal - green background for "Kupione" */
        .recipients-page #reservedPresentsModal .card-header[style*="d4edda"] {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
        }
        
        .recipients-page #reservedPresentsModal .card-header[style*="d4edda"] strong,
        .recipients-page #reservedPresentsModal .card-header[style*="d4edda"] i {
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }

        /* Make modal close button black and visible */
        .modal .btn-close,
        .recipients-page .modal .btn-close {
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
            opacity: 1 !important;
            width: 1em !important;
            height: 1em !important;
        }

        /* Fix modal backdrop to cover entire page */
        .modal-backdrop {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1055 !important;
        }
        
        /* Modal should be above backdrop */
        .modal {
            z-index: 1060 !important;
        }

        /* Center modal in viewport */
        .modal-dialog-centered {
            display: flex !important;
            align-items: center !important;
            min-height: 100vh !important;
        }

        /* Position modal lower on mobile for easier reach */
        @media (max-width: 768px) {
            .modal-dialog-centered-mobile {
                display: flex !important;
                align-items: flex-end !important;
                min-height: calc(100vh - 100px) !important;
                margin-bottom: 20px !important;
            }
        }

        /* On desktop, center normally */
        @media (min-width: 769px) {
            .modal-dialog-centered-mobile {
                display: flex !important;
                align-items: center !important;
                min-height: 100vh !important;
            }
        }
        
        /* Prevent body scroll when modal is open */
        body.modal-open {
            overflow: hidden;
        }

        /* Red background for card headers - solid color */
        .recipients-page .card-header,
        .recipients-page .aws-content-header {
            background: #F44336 !important;
            backdrop-filter: none !important;
        }

        /* Make header text white for better contrast */
        .recipients-page .card-header h5,
        .recipients-page .aws-content-header h5,
        .recipients-page .card-header .card-title,
        .recipients-page .aws-content-header .card-title,
        .recipients-page .aws-header-title h5 {
            color: white !important;
        }

        /* Make header icons white */
        .recipients-page .card-header i,
        .recipients-page .aws-content-header i,
        .recipients-page .aws-gradient-icon {
            color: white !important;
        }

        /* White action titles with blur shadow */
        .recipients-page .aws-action-title {
            color: white !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
            font-weight: 600 !important;
        }

        /* Navbar gradient from black to transparent - override aws-design.css */
        .recipients-page .navbar {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)) !important;
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)) !important;
            backdrop-filter: none !important;
            border-bottom: none !important;
            padding-top: 0.25rem !important;
            padding-bottom: 0.25rem !important;
            min-height: auto !important;
            z-index: 1020 !important;
        }

        /* Remove red gradient from container and reduce top margin */
        .recipients-page .container.mt-4 {
            background: none !important;
            background-image: none !important;
            margin-top: -2.5rem !important;
        }

        /* Hide aws-action-section (replaced by tab bar) */
        .recipients-page .aws-action-section {
            display: none !important;
        }

        /* Make navbar text white with shadow */
        .recipients-page .navbar .navbar-brand,
        .recipients-page .navbar .brand-text {
            color: white !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
        }

        .recipients-page .navbar i {
            color: white !important;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        /* FAB button - same style as notification bell */
        .recipients-page .fab-container {
            display: none !important;
        }
        
        .recipients-page .fab-main {
            width: 50px !important;
            height: 50px !important;
            background: rgba(255, 255, 255, 0.15) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
            backdrop-filter: blur(5px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
            border-radius: 50% !important;
        }
        
        .recipients-page .fab-main::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
            pointer-events: none;
        }

        .recipients-page .fab-main:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            border-color: rgba(255, 255, 255, 0.8) !important;
            transform: scale(1.05) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
        }

        .recipients-page .fab-main i {
            color: white !important;
            font-size: 20px !important;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
        }

        /* Fix alignment in all action cards */
        .recipients-page .aws-action-card .card-body {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            min-height: 140px !important;
            padding: 1.5rem !important;
        }

        /* Ensure icons and titles are centered on mobile */
        .recipients-page .aws-action-icon {
            margin: 0 auto !important;
        }

        .recipients-page .aws-action-title {
            margin-top: 0.75rem !important;
            text-align: center !important;
        }

        /* Mobile specific fixes */
        @media (max-width: 768px) {
            .recipients-page .aws-action-card .card-body {
                min-height: 120px !important;
                padding: 1rem !important;
            }
        }

        /* Fixed header bar retired (dark gradient overlay over content) */
        
        /* Hamburger Menu Button - fixed positioning for floating */
        .hamburger-menu-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
            background: transparent;
            border: none;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.3s ease;
            color: white;
            pointer-events: auto;
        }

        .hamburger-menu-btn:hover {
            opacity: 0.8;
        }

        .hamburger-menu-btn i {
            font-size: 20px;
            color: white;
        }

        /* Sidebar Menu */
        .sidebar-menu {
            position: fixed;
            top: 0;
            right: -320px;
            width: 320px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
            z-index: 1100;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .sidebar-menu.active {
            right: 0;
        }

        .sidebar-header {
            padding: 25px 20px;
            background: #F44336;
            color: white;
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
        }

        .sidebar-logo {
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }

        .sidebar-header h5 {
            margin: 0;
            font-weight: 600;
            flex: 1;
            color: white;
        }

        .sidebar-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 8px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
        }

        .sidebar-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px 0;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 25px;
            color: #2d3748;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }

        .sidebar-item:hover {
            background: #f7fafc;
            color: #667eea;
            border-left-color: #667eea;
        }

        .sidebar-item.active {
            background: #edf2f7;
            color: #667eea;
            border-left-color: #667eea;
            font-weight: 600;
        }

        .sidebar-item i {
            font-size: 20px;
            width: 25px;
            text-align: center;
        }

        .sidebar-divider {
            height: 1px;
            background: #e2e8f0;
            margin: 15px 25px;
        }

        .sidebar-footer {
            padding: 20px 25px;
            border-top: 1px solid #e2e8f0;
            text-align: center;
        }

        /* Sidebar Overlay */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1090;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Notification Bell - fixed positioning */
        
        .recipients-page .notification-bell-btn {
            background: rgba(244, 67, 54, 0.3) !important;
            border: 2px solid rgba(244, 67, 54, 0.5) !important;
            box-shadow: 0 8px 32px 0 rgba(244, 67, 54, 0.4) !important;
            backdrop-filter: blur(5px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
            position: relative !important;
        }
        
        .recipients-page .notification-bell-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
            pointer-events: none;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .sidebar-menu {
                width: 280px;
                right: -280px;
            }

            .hamburger-menu-btn {
                bottom: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
            }
        }