/* ============================================================================= WISHES V2 — redesign for My Wishes / Single Wish (editor) / Receiver Card Loaded only on the three relevant URLs (see functions.php enqueue logic). Most base components live in main.css; this file adds: • extra design tokens missing from main.css (gradients, pill radius, motion) • scoped page-background override (#f5f3f0 warm) • new shared components (icon-btn, action-btn, modal, toast, btn-danger) • page-specific layouts (stats strip, toolbar, owner toolbar, letter card…) • envelope/letter animations for the receiver card ============================================================================= */ /* ===== Extra design tokens, scoped to the wish pages ====================== */ .page-template-page-my-wishes, body.single-dream, body.post-type-archive-dream { --color-primary-lilac: #c4b8ff; --radius-pill: 100px; --shadow-primary: 0 12px 24px -6px rgba(96, 80, 176, 0.35); --shadow-primary-hover: 0 16px 32px -6px rgba(96, 80, 176, 0.45); --gradient-primary: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%); --gradient-cta: linear-gradient(135deg, #6050b0 0%, #9d80f8 100%); --duration-fast: 0.2s; --duration-base: 0.25s; --duration-slow: 0.3s; /* Inherits body background (--color-page-bg). The rule is kept for belt-and-braces in case the body color ever drifts — the wish pages rely on this warm beige for their cards-on-paper feel. */ background: var(--color-page-bg); } /* =========================================================================== SHARED COMPONENTS (used by all three pages) =========================================================================== */ /* Danger button — Delete action */ .btn-danger { background: var(--color-bg-white); color: #c54343; border: 1px solid var(--color-border); } .btn-danger:hover { background: #fdecec; border-color: #c54343; color: #c54343; } /* Circle icon button (e.g. floating action on cards/figures) */ .icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); } .icon-btn--danger:hover { color: #c54343; border-color: #c54343; background: #fdecec; } /* Toast (single floating notification) — sits above every overlay we ship (drawer 1190, modals 1300, WP admin-bar 99999) so confirmations are visible while a modal/drawer is open. */ .wv2-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--color-text-dark); color: white; padding: 0.75rem 1.25rem; border-radius: 100px; font-size: 0.88rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 1000000; display: inline-flex; align-items: center; gap: 0.5rem; max-width: calc(100vw - 2rem); } .wv2-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Modal — used for delete confirmation, preview, and inline dialogs. z-index has to clear the WP admin-bar (99999) AND the site-header (which uses position:fixed; z-index:1200). !important guards against stale main.css from a CDN/browser cache. JS also re-parents the modal to on open, so any parent stacking context can't trap it. */ .wv2-modal-overlay { position: fixed; inset: 0; background: rgba(47, 47, 49, 0.65); display: flex; align-items: center; justify-content: center; z-index: 999999 !important; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 1rem; } .wv2-modal-overlay.open { opacity: 1; pointer-events: auto; } .wv2-modal { background: var(--color-bg-white); border-radius: var(--radius-md); padding: 2rem; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(0.96); transition: transform 0.25s ease; } .wv2-modal-overlay.open .wv2-modal { transform: translateY(0) scale(1); } .wv2-modal h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; } .wv2-modal p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 1.5rem; } .wv2-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .wv2-modal-icon { width: 48px; height: 48px; border-radius: 50%; background: #fdecec; color: #c54343; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } /* Wide modal variant — used for the receiver-card preview */ .wv2-modal--wide { max-width: 820px; padding: 0; overflow: hidden; background: transparent; box-shadow: none; } .wv2-modal--wide .wv2-modal-frame { width: 100%; height: min(90vh, 980px); border: none; border-radius: var(--radius-lg); background: var(--color-page-bg); box-shadow: var(--shadow-lg); display: block; } .wv2-modal--wide .wv2-modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(47, 47, 49, 0.78); color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .wv2-modal--wide .wv2-modal-close:hover { background: rgba(47, 47, 49, 1); } /* Single-wish preview modal — full-screen iframe. Overlay gets zero padding, the modal box and the iframe both fill 100vw/vh so the receiver-card view shows exactly as it would on its own page. */ #single-preview-modal { padding: 0; } #single-preview-modal .wv2-modal--wide { max-width: none; width: 100vw; height: 100vh; border-radius: 0; } #single-preview-modal .wv2-modal-frame { width: 100%; height: 100%; border-radius: 0; } /* =========================================================================== PAGE — MY WISHES =========================================================================== */ .wishes-list-page { min-height: 60vh; padding-bottom: 2rem; } .wishes-list-page .container { max-width: 1500px; margin: 0 auto; padding: 0 1rem; } /* Page header (title + Generate Wish CTA) */ .wishes-list-page .page-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 2.5rem 0 1.5rem; gap: 2rem; flex-wrap: wrap; } .wishes-list-page .page-title { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-primary); margin-bottom: 0.4rem; line-height: 1.1; } .wishes-list-page .page-sub { color: var(--color-text-muted); font-size: 1rem; max-width: 520px; line-height: 1.55; } /* Stats strip — 4 small cards */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-light); transform: translateY(-2px); } /* Cards with a stat-filter target are clickable — they swap the grid into a client-side filtered mode (handled in page-my-wishes.js). */ .stat-card[data-stat-filter] { cursor: pointer; user-select: none; } .stat-card[data-stat-filter].is-active { border-color: var(--color-primary); box-shadow: 0 8px 20px -8px rgba(96, 80, 176, 0.4), 0 0 0 2px rgba(96, 80, 176, 0.15); transform: translateY(-2px); } .stat-card[data-stat-filter].is-active .stat-num { color: var(--color-primary); } .stat-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text-dark); line-height: 1; margin-bottom: 0.3rem; } .stat-num.accent { color: var(--color-primary); } .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.35rem; } /* Wraps the search row + filter-bar. Always sticks to the top of the viewport (just under the site-header) so the user can re-search / re-filter without scrolling back up. On desktop the children stack (search above, filter-bar below); on mobile (≤600px) the wrapper switches to a single flex row — search fills the remaining width, filter is an icon-only trigger. */ .my-wishes-controls { display: block; position: sticky; top: 50px; z-index: 20; background: transparent; padding: 0.5rem 0; } /* Toolbar (search row only — 100% wide). View-switch lives in .filter-bar below alongside the filter pills. */ .my-wishes-toolbar { display: block; margin-bottom: 0.75rem; } /* Filter icon (only rendered on mobile — hidden on desktop where the trigger uses the full "All wishes ▼" label). */ .filter-dropdown-icon { display: none; flex-shrink: 0; } .search-wrap { position: relative; width: 100%; } .search-wrap .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } .search-input { width: 100%; padding: 0.7rem 2.4rem 0.7rem 2.6rem; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-bg-white); font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-text-dark); /* Defeat the native pill rendering of input[type=search] in Safari/iOS so the explicit border-radius above stays a clean 100px and never shifts on focus (Group E, 2026-05-14). */ -webkit-appearance: none; appearance: none; transition-property: border-color, box-shadow; transition-duration: 0.2s; } .search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12); } /* Hide native browser X for type=search across engines */ .search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration, .search-input::-webkit-search-results-button, .search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; } .search-input::-ms-clear { display: none; width: 0; height: 0; } /* Custom thin clear (×) — appears only when input has value */ .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s ease; } .search-clear:hover { color: var(--color-text-dark); background: rgba(47, 47, 49, 0.06); } .search-clear[hidden] { display: none; } /* ── Wish-grid loader overlay (search / category change) ─────────────── */ .wish-grid-wrap { position: relative; } .wish-grid-loader { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; background: rgba(245, 243, 240, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius-md); opacity: 0; pointer-events: none; z-index: 5; transition: opacity 0.18s ease; } .wish-grid-wrap.is-loading .wish-grid-loader { opacity: 1; pointer-events: auto; } .wish-grid-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(96, 80, 176, 0.18); border-top-color: var(--color-primary); animation: wish-grid-spin 0.7s linear infinite; } @keyframes wish-grid-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .wish-grid-spinner { animation-duration: 1.6s; } } .view-switch { display: inline-flex; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 100px; padding: 3px; } .view-switch button { padding: 0.45rem 0.75rem; border: none; background: transparent; border-radius: 100px; cursor: pointer; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-primary); font-size: 0.82rem; font-weight: 600; transition: all 0.2s; } .view-switch button.active { background: var(--color-primary); color: white; } /* Filter bar — single row across all breakpoints. Contains the filter pills wrap on the left and the view-switch on the right, with space-between. On mobile the wrap collapses into a dropdown trigger; the bar layout itself stays the same. */ .wishes-list-page .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: nowrap; } .wishes-list-page .filter-pills-wrap { position: relative; flex: 0 0 auto; /* don't grow — keep toggle compact */ min-width: 0; } /* Phase 6.8 G — Filter pills hidden by default on ALL viewports * (was only hidden on mobile). Toggle button is always visible. The pills * panel opens via the .is-open class on .filter-pills-wrap (handled by * main.js click delegate). The panel rules in the @media block below now * apply everywhere via the unscoped selector overrides here. */ .wishes-list-page .filter-pills { position: absolute; top: calc(100% + 6px); /* Phase 6.9.3 — popup opens DOWN-LEFT from the toggle (was DOWN-RIGHT). User wants the panel anchored to the toggle's left edge. */ left: 0; right: auto; min-width: 220px; max-width: calc(100vw - 2rem); z-index: 20; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.25rem; padding: 0.5rem; margin: 0; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .wishes-list-page .filter-pills-wrap.is-open .filter-pills { opacity: 1; transform: none; pointer-events: auto; } .wishes-list-page .filter-pills .pill { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; width: 100%; border-radius: 8px; border-color: transparent; } .wishes-list-page .filter-pills .pill:hover { background: var(--color-primary-light); } /* Phase 6.8 G — Hide the count number inside each pill (keep markup so * future restore is one line). User wants emoji + label only. */ .wishes-list-page .filter-pills .pill .pill-count { display: none; } .wishes-list-page .filter-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.85rem; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-white); color: var(--color-text-dark); font-family: var(--font-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer; position: relative; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } .wishes-list-page .filter-dropdown-toggle:hover, .wishes-list-page .filter-pills-wrap.is-open .filter-dropdown-toggle { border-color: var(--color-primary); color: var(--color-primary); } .wishes-list-page .filter-pills-wrap.has-active-filter .filter-dropdown-toggle { border-color: var(--color-primary); color: var(--color-primary); } .wishes-list-page .filter-bar .view-switch { flex-shrink: 0; } .wishes-list-page .pill, .wishes-list-page .blog-page-cat-pill { padding: 0.45rem 1rem; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-bg-white); color: var(--color-text-muted); cursor: pointer; font-size: 0.82rem; font-family: var(--font-primary); font-weight: 500; transition: all 0.2s; } .wishes-list-page .pill:hover, .wishes-list-page .blog-page-cat-pill:hover { border-color: var(--color-primary); color: var(--color-primary); } .wishes-list-page .pill.active, .wishes-list-page .blog-page-cat-pill--active, .wishes-list-page .blog-page-cat-pill.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } /* Wish grid — overrides the older main.css rules with greater specificity */ .wishes-list-page .wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; } .wishes-list-page .wish-grid.list-view { grid-template-columns: 1fr; } /* main.css ships an older `.wish-card` rule with its own transition (used by the public /wish/ archive). On my-wishes the rule below WINS by specificity, so it must include every transitioned property the user sees — otherwise the legacy `transform: translateY(-4px)` on hover from main.css fires without easing and the card jumps. */ .wishes-list-page .wish-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.25s ease; position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .wishes-list-page .wish-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .wishes-list-page .list-view .wish-card { flex-direction: row; align-items: stretch; } .wishes-list-page .list-view .wish-card-thumb { width: 350px; aspect-ratio: auto; height: auto; align-self: stretch; flex-shrink: 0; } .wishes-list-page .list-view .wish-card-body { flex: 1; } /* Only the meta row reserves space for the floating actions in the top-right corner — title, quote and footer fill the full body width so there's no dead column on the right. Actions are in the same vertical band as the meta row, so the reserve only needs to apply here. */ .wishes-list-page .list-view .wish-card-meta { padding-right: 130px; } /* In list-view actions sit next to the meta row (article-level absolute), and they stay visible without hover — the row has plenty of space. */ .wishes-list-page .list-view .wish-card-actions { opacity: 1; transform: none; } /* Thumb is a positioning frame; the inner .wish-card-thumb-img layer holds the background image so we can scale it on hover without scaling the floating action buttons that live in the same frame. The base theme (main.css) applies `transform: scale(1.04)` to .wish-card-thumb on hover — we cancel it here so only the image layer grows, not the whole frame. */ .wishes-list-page .wish-card-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; display: block; transition: none; transform: none; } .wishes-list-page .wish-card:hover .wish-card-thumb { transform: none; } .wishes-list-page .wish-card-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.5s ease; z-index: 0; } .wishes-list-page .wish-card-thumb-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%); pointer-events: none; } .wishes-list-page .wish-card:hover .wish-card-thumb-img { transform: scale(1.06); } .wishes-list-page .wish-card-thumb-link { position: absolute; inset: 0; z-index: 1; } /* Floating action menu (top-right of thumb). Hidden by default, slides in from above on card hover so the appearance reads as motion, not just a sudden opacity flip. */ .wish-card-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transform: translateY(-6px); transition: all 0.25s ease; z-index: 2; } .wishes-list-page .wish-card:hover .wish-card-actions { opacity: 1; transform: translateY(0); } .action-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-text-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(47, 47, 49, 0.28), 0 2px 4px rgba(47, 47, 49, 0.12); transition: all 0.2s ease; text-decoration: none; } .action-btn:hover { background: var(--color-primary); color: #fff; box-shadow: 0 10px 22px -6px rgba(96, 80, 176, 0.55), 0 3px 6px rgba(96, 80, 176, 0.25); transform: translateY(-1px); } .action-btn--danger:hover { background: #c54343; color: #fff; box-shadow: 0 10px 22px -6px rgba(197, 67, 67, 0.55), 0 3px 6px rgba(197, 67, 67, 0.25); } /* Card body redesigned: meta row, h3 title, line-clamp quote */ .wishes-list-page .wish-card-body { padding: 1.1rem 1.2rem 1.2rem; flex: 1; display: flex; flex-direction: column; } .wishes-list-page .wish-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; flex-wrap: wrap; } /* main.css gives every .badge a 1rem margin-bottom — fine on the single-wish header but inside the meta row it floats the badge above the date. Reset. */ .wishes-list-page .wish-card-meta .badge { margin: 0; } /* "My wish" badge — appears on the public archive when the visitor is the author of the card. Pinned to the right edge of the meta row via the margin-left:auto trick (works inside a flex row even with flex-wrap). */ .wishes-list-page .wish-card-meta .badge--mine { margin-left: auto; background: #d6f5e1; color: #1c6e3e; border-color: #a8e3bd; font-weight: 600; cursor: default; } .wishes-list-page .wish-card-meta .badge--mine:hover { background: #d6f5e1; color: #1c6e3e; } /* Click-to-filter affordance: any badge tagged with data-occasion-slug filters the grid to that category. JS delegates the click and forwards it to the matching pill in #my-dreams-filters. */ .wishes-list-page .wish-card-meta .badge[data-occasion-slug] { cursor: pointer; user-select: none; transition: all 0.18s ease; } .wishes-list-page .wish-card-meta .badge[data-occasion-slug]:hover { background: var(--color-primary); color: #fff; } .wishes-list-page .wish-card-date { font-size: 0.7rem; color: var(--color-text-muted); } .wishes-list-page .wish-card-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 0.5rem; color: var(--color-text-dark); } .wishes-list-page .wish-card-title a { color: inherit; } .wishes-list-page .wish-card-title a:hover { color: var(--color-primary); } .wishes-list-page .wish-card-quote { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.55; /* Hard cap so flex stretching can't reveal a 4th half-line. */ flex: 0 1 auto; max-height: calc(1.55em * 3); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 1rem; } .wishes-list-page .wish-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.85rem; border-top: 1px dashed var(--color-border); } .wishes-list-page .wish-card-link { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: gap 0.15s ease; } .wishes-list-page .wish-card-link:hover { gap: 0.5rem; } /* Empty state */ .wishes-list-page .empty-state, .my-dreams-empty-v2 { text-align: center; padding: 4rem 1rem; } .empty-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .wishes-list-page .empty-state :is(h2, h3) { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; } .wishes-list-page .empty-state p { color: var(--color-text-muted); margin-bottom: 1.5rem; } .wishes-list-page .load-more-wrap { text-align: center; margin-top: 2.5rem; } /* ── Pagination strip ──────────────────────────────────────────────────── Mirrors blog-redesign.css `.pag-btn`. Duplicated here so /my-wishes/ and /account/wishes/ don't have to pull in blog-redesign.css just for this. */ .wishes-list-page .pagination { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem 0; margin-top: 2rem; flex-wrap: wrap; } .wishes-list-page .pag-btn { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-dark); font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.85rem; text-decoration: none; transition: all 0.2s var(--ease-standard); } .wishes-list-page .pag-btn:hover { border-color: rgba(96, 80, 176, 0.35); color: var(--color-primary); } .wishes-list-page .pag-btn.is-active { background: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: var(--shadow-primary); } .wishes-list-page .pag-btn.is-disabled { opacity: 0.4; pointer-events: none; } .wishes-list-page .pag-dots { color: var(--color-text-muted); padding: 0 0.25rem; } .wishes-list-page .pag-arrow { gap: 0.35rem; padding: 0 1rem; } /* Tighter pagination on the load-more block when both render. The default .load-more-wrap margin-top is 2.5rem; nudge it down when pagination precedes it so they read as one navigation cluster. */ .wishes-list-page .pagination + .load-more-wrap { margin-top: 1rem; } /* Mobile: actions always visible (no hover on touch) */ @media (hover: none) { .wishes-list-page .wish-card .wish-card-actions { opacity: 1; transform: none; } } @media (max-width: 980px) { .wishes-list-page .wish-grid { grid-template-columns: repeat(2, 1fr); } .stats-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wishes-list-page .wish-grid { grid-template-columns: 1fr; } /* Hard reset for list-view on mobile: there isn't enough horizontal space for a thumb-on-the-side row, so we override every list-view rule to match the default grid layout. The view switch is also hidden so the user can't toggle into list at all — but if the class is already on the grid (set on a wider viewport), the styles below make it indistinguishable from grid. */ .wishes-list-page .filter-bar .view-switch { display: none; } .wishes-list-page .wish-grid.list-view { grid-template-columns: 1fr; } .wishes-list-page .list-view .wish-card { flex-direction: column; align-items: stretch; } .wishes-list-page .list-view .wish-card-thumb { width: 100%; height: auto; aspect-ratio: 4/3; align-self: auto; flex-shrink: 1; } .wishes-list-page .list-view .wish-card-body { padding: 1.1rem 1.2rem 1.2rem; } .wishes-list-page .list-view .wish-card-meta { padding-right: 0; } .wishes-list-page .page-title { font-size: 2rem; } .wishes-list-page .wish-card .wish-card-actions { opacity: 1; transform: none; } /* ── Sticky controls row (mobile flex layout) ───────────────── The wrapper itself is already sticky from the base rule — here we just collapse the two children (search + filter trigger) into one row, since there isn't enough horizontal space to stack them on mobile. */ .wishes-list-page .my-wishes-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .wishes-list-page .my-wishes-controls .my-wishes-toolbar { flex: 1; min-width: 0; margin-bottom: 0; } .wishes-list-page .my-wishes-controls .filter-bar { flex: 0 0 auto; margin-bottom: 0; } /* ── Filter dropdown (mobile only) ───────────────────────────── Pills collapse into a button trigger inside .filter-pills-wrap. On mobile we drop the "All wishes ▼" label and render the trigger as an icon-only square button that matches the search-input height; an active non-"all" filter shows a primary dot. */ .wishes-list-page .filter-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-bg-white); color: var(--color-text-dark); font-family: var(--font-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; position: relative; } .wishes-list-page .filter-dropdown-toggle:hover, .wishes-list-page .filter-pills-wrap.is-open .filter-dropdown-toggle { border-color: var(--color-primary); color: var(--color-primary); } .wishes-list-page .filter-dropdown-icon { display: inline-flex; } .wishes-list-page .filter-dropdown-label, .wishes-list-page .filter-dropdown-chevron { display: none; } .wishes-list-page .filter-pills-wrap.has-active-filter .filter-dropdown-toggle { border-color: var(--color-primary); color: var(--color-primary); } .wishes-list-page .filter-pills-wrap.has-active-filter .filter-dropdown-toggle::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-bg-white); } .wishes-list-page .filter-pills-wrap .filter-pills { position: absolute; top: calc(100% + 6px); left: auto; right: 0; min-width: 220px; max-width: calc(100vw - 2rem); z-index: 20; flex-direction: column; flex-wrap: nowrap; gap: 0.25rem; padding: 0.5rem; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .wishes-list-page .filter-pills-wrap.is-open .filter-pills { opacity: 1; transform: none; pointer-events: auto; } .wishes-list-page .filter-pills-wrap .filter-pills .pill { text-align: left; width: 100%; border-radius: 8px; border-color: transparent; } .wishes-list-page .filter-pills-wrap .filter-pills .pill:hover { background: var(--color-primary-light); } } /* =========================================================================== PAGE — SINGLE WISH (editor / owner view) =========================================================================== */ /* Reset old layout for single-wish pages */ body.single-dream .single-wish-main { padding-bottom: 2rem; } body.single-dream .container { max-width: 1500px; padding: 0 1rem; } /* main.css clamps body to overflow-x: hidden, which turns into a scroll container and breaks position: sticky on .owner-toolbar (it would stick to the body box, not the viewport). Drop the clamp on this page; horizontal overflow elsewhere is still contained by html. */ body.single-dream { overflow-x: visible; } /* New centred 720px hero column */ .wish-hero { max-width: 720px; margin: 0 auto; padding: 1rem 0 2rem; } /* Breadcrumbs */ .wish-breadcrumbs { padding: 1.5rem 0 0.75rem; font-size: 0.82rem; color: var(--color-text-muted); max-width: 720px; margin: 0 auto; } .wish-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .wish-breadcrumbs a:hover { color: var(--color-primary); } .wish-breadcrumbs span.sep { margin: 0 0.5rem; opacity: 0.5; } /* Badges row (centered) */ .wish-hero .wish-badges { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; } /* Title (centered, balanced) */ .wish-hero .wish-title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; text-align: center; line-height: 1.15; margin: 0 0 1.25rem; color: var(--color-text-dark); text-wrap: balance; } /* Owner toolbar — visibility, divider, preview, edit, delete. Sticks just below the (collapsed) site-header so it remains reachable while the user scrolls through a long wish. */ .owner-toolbar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; position: sticky; top: 50px; z-index: 1; background: rgba(245, 243, 240, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.6rem 0.5rem; border-radius: var(--radius-md); } .owner-toolbar .divider { width: 1px; height: 24px; background: var(--color-border); margin: 0 0.4rem; } .owner-toolbar .btn { padding: 0.55rem 1.05rem; font-size: 0.85rem; } @media (max-width: 1199px) { .owner-toolbar { top: 41px; } } /* Edit-mode banner — collapsed by default, revealed when the parent .wish-hero gets .is-editing (toggled by the JS edit-mode logic). */ .edit-bar { background: rgba(96, 80, 176, 0.06); border: 1px solid rgba(96, 80, 176, 0.2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-height: 0; margin: 0; padding: 0 1.25rem; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.3s ease, margin 0.25s ease, padding 0.25s ease, border-width 0.25s ease, opacity 0.25s ease; } .wish-hero.is-editing .edit-bar { max-height: 220px; margin-bottom: 1rem; padding: 0.85rem 1.25rem; border-width: 1px; opacity: 1; pointer-events: auto; } .edit-bar-msg { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; } .edit-bar-actions { display: flex; gap: 0.5rem; } /* Image — wider corners, with floating image actions. No fixed aspect ratio: let the uploaded image show in its native shape. */ .wish-hero .wish-figure { width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 1.75rem; box-shadow: var(--shadow-md); background: var(--color-bg-light); position: relative; } .wish-hero .wish-figure img { width: 100%; height: auto; display: block; } .img-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; } .img-action-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); color: var(--color-text-dark); transition: all 0.2s; } .img-action-btn:hover { transform: scale(1.06); color: var(--color-primary); } /* Wish text body (white card, primary border-left) */ .wish-hero .wish-body { background: var(--color-bg-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: 2rem 2.25rem; margin: 0 0 1.5rem; position: relative; } .wish-hero .wish-body p { font-size: 1rem; line-height: 1.8; color: var(--color-text-dark); margin-bottom: 1rem; } .wish-hero .wish-body p:last-child { margin-bottom: 0; } .wish-hero .wish-body[contenteditable="true"] { background: rgba(96, 80, 176, 0.03); box-shadow: 0 0 0 2px rgba(96, 80, 176, 0.18); outline: none; cursor: text; } /* Quick edits panel — always visible; clicking any pill auto-enters edit mode (handled in single-wish.js). */ .quick-edits { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin: 0 0 2rem; } .quick-edits .quick-edits-heading, .quick-edits h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-primary-text); /* AAA on white (~9.5:1) */ font-weight: 700; margin: 0 0 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; } .quick-edits-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .quick-edit { padding: 0.45rem 0.95rem; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-bg-white); color: var(--color-text-dark); font-size: 0.82rem; font-family: var(--font-primary); cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; } .quick-edit:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } .quick-edit:disabled, .quick-edit[disabled] { opacity: 0.55; cursor: progress; pointer-events: none; } /* While an AI rewrite request is in flight, dim the editor and lock it so the user doesn't type into a paragraph that's about to be replaced. */ .wish-hero .wish-body.is-rewriting { opacity: 0.6; pointer-events: none; transition: opacity 0.2s ease; } /* Stats row (views / likes) — hidden by request: counters add no value to the owner view. Markup stays for now in case we want them back. */ .wish-stats-row { display: none; } /* Share section (centered, larger circular share buttons) */ .wish-hero .share-section { text-align: center; padding: 1.5rem 0 1rem; } .wish-hero .share-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 0.85rem; display: block; } .wish-hero .share-buttons { display: flex; gap: 0.65rem; justify-content: center; flex-wrap: wrap; } .wish-hero .share-section .share-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; transition: transform .2s ease; cursor: pointer; border: none; padding: 0; } .wish-hero .share-section .share-btn:hover { transform: translateY(-3px) scale(1.06); color: white; } .wish-hero .share-section .share-btn--copy { background: var(--color-text-dark); } /* Inspiration / "Gallery of inspiration" */ .inspiration { background: var(--color-bg-light); border-top: 1px solid var(--color-border); padding: 3.5rem 0; margin-top: 2rem; } .inspiration .container { max-width: 1200px; } .inspiration h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.03em; text-align: center; margin: 0 0 1.5rem; } .insp-filters { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.75rem; } .insp-filters .pill { padding: 0.45rem 1rem; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-bg-white); color: var(--color-text-muted); cursor: pointer; font-size: 0.82rem; font-family: var(--font-primary); font-weight: 500; transition: all 0.2s; } .insp-filters .pill:hover { border-color: var(--color-primary); color: var(--color-primary); } .insp-filters .pill.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .insp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .insp-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .insp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .insp-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--color-primary-light); } .insp-body { padding: 1rem 1.2rem 1.2rem; flex: 1; display: flex; flex-direction: column; } .insp-body .badge { margin-bottom: 0.5rem; align-self: flex-start; } .insp-quote { font-size: 0.85rem; color: var(--color-text-dark); line-height: 1.6; margin: 0 0 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .insp-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--color-text-muted); margin-top: auto; } .insp-foot a { color: var(--color-primary); font-weight: 600; text-decoration: none; } @media (max-width: 880px) { .insp-grid { grid-template-columns: 1fr; } .wish-hero .wish-body { padding: 1.5rem; } } @media (max-width: 600px) { .wish-hero .wish-figure { border-radius: var(--radius-md); } .wish-hero .share-section .share-btn { width: 40px; height: 40px; } } /* Single Wish v3 — sticky owner toolbar + delivery settings drawer */ .single-wish-toolbar-sentinel { height: 1px; } .sticky-toolbar-wrap { position: sticky; top: 50px; z-index: 1190; margin: 0 auto 1.75rem; } .sticky-toolbar.owner-toolbar { position: relative; top: auto; z-index: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.55rem 0.9rem; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-bg-white); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .sticky-toolbar-wrap.is-stuck .sticky-toolbar { background: rgba(255, 255, 255, 0.92); border-color: rgba(96, 80, 176, 0.18); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* .st-title block (heart icon + wish title) — hidden by request: the toolbar shows only the action buttons. */ .st-title, .sticky-toolbar-wrap.is-stuck .st-title { display: none; } .st-title-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .st-title-text { max-width: 220px; color: var(--color-text-dark); font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; } .st-divider { width: 1px; height: 20px; background: var(--color-border); margin: 0 0.2rem; } .sticky-toolbar .btn.btn-sm, .owner-toolbar .btn.btn-sm { min-height: 34px; padding: 0.45rem 0.85rem; font-size: 0.82rem; gap: 0.35rem; } .btn-delivery .btn-count { min-width: 17px; height: 17px; margin-left: 0.2rem; padding: 0 5px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 17px; display: inline-flex; align-items: center; justify-content: center; } .btn-delivery .btn-count[hidden] { display: none; } .single-delivery-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(47, 47, 49, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .single-delivery-overlay.open { opacity: 1; pointer-events: auto; } .single-delivery-drawer { position: fixed; top: 0; right: 0; z-index: 1301; width: min(500px, 100%); height: 100vh; display: flex; flex-direction: column; background: var(--color-bg-white); box-shadow: -16px 0 40px -16px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .single-delivery-drawer.open { transform: translateX(0); } [dir="rtl"] .single-delivery-drawer { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .single-delivery-drawer.open { transform: translateX(0); } .single-delivery-handle { display: none; } .single-delivery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--color-border); } .single-delivery-head h3 { margin: 0 0 0.2rem; color: var(--color-text-dark); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.025em; } .single-delivery-head p { margin: 0; color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.45; } .single-delivery-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .single-delivery-close:hover { background: var(--color-bg-light); color: var(--color-text-dark); } .single-delivery-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; } .single-delivery-foot { display: flex; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); } .single-delivery-routes { display: grid; gap: 0.6rem; margin-bottom: 1rem; } .dr-route { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; padding: 0.85rem 0.95rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-white); } .dr-route-icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; } .dr-route-icon svg { width: 19px; height: 19px; } .dr-route-icon.ch-email { background: linear-gradient(135deg, #6C5CE7, #5546c9); } .dr-route-icon.ch-telegram { background: linear-gradient(135deg, #2AABEE, #229ED9); } .dr-route-icon.ch-sms { background: linear-gradient(135deg, #6050b0, #493e95); } .dr-route-icon.ch-link { background: linear-gradient(135deg, #313330, #5e5f5c); } .dr-route-body { min-width: 0; } .dr-route-line1, .dr-route-line2 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .dr-route-line1 { margin-bottom: 0.2rem; } .dr-route-channel { color: var(--color-text-dark); font-size: 0.9rem; font-weight: 700; } .dr-route-recipient { max-width: 100%; color: var(--color-text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-route-when { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-text-muted); font-size: 0.76rem; } .dr-route-when strong { color: var(--color-text-dark); font-weight: 600; } .dr-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; } .dr-status .dot { width: 6px; height: 6px; border-radius: 50%; } .dr-status--pending, .dr-status--scheduled, .dr-status--awaiting_chat_id { background: rgba(96, 80, 176, 0.1); color: var(--color-primary); } .dr-status--pending .dot, .dr-status--scheduled .dot, .dr-status--awaiting_chat_id .dot { background: var(--color-primary); } .dr-status--sent { background: rgba(16, 185, 129, 0.12); color: #0e8a63; } .dr-status--sent .dot { background: #10b981; } .dr-status--failed { background: #fdecec; color: #c54343; } .dr-status--failed .dot { background: #c54343; } .dr-route-actions { display: flex; gap: 0.3rem; justify-content: flex-end; } .dr-iconbtn { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dr-iconbtn:hover { border-color: var(--color-border); background: var(--color-bg-light); color: var(--color-text-dark); } .dr-iconbtn--danger:hover { border-color: #f3c8c8; background: #fdecec; color: #c54343; } .dr-iconbtn[disabled] { opacity: 0.45; cursor: not-allowed; } .single-delivery-empty { padding: 1.8rem 1.1rem; margin-bottom: 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-white); text-align: center; } .single-delivery-empty-icon { width: 52px; height: 52px; margin: 0 auto 0.85rem; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; } .single-delivery-empty h4 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .single-delivery-empty p { max-width: 280px; margin: 0 auto; color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.5; } .single-delivery-form { display: grid; gap: 0.95rem; padding-top: 0.25rem; } .single-delivery-mode { display: flex; gap: 0.5rem; } .single-delivery-mode-btn { flex: 1; min-height: 42px; border: 1.5px solid rgba(178, 178, 174, 0.45); border-radius: 14px; background: #fff; color: var(--color-text-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: inherit; font-size: 0.9rem; font-weight: 700; transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .single-delivery-mode-btn:hover, .single-delivery-mode-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12); } .single-delivery-when[hidden], .single-delivery-contact[hidden], .single-delivery-success[hidden], .single-delivery-pickup[hidden], .single-delivery-error[hidden], .single-delivery-empty[hidden] { display: none; } /* Delivery contacts wrapper — vertical stack with breathing room between the email and telegram fields, plus margin above the first one so it doesn't hug the channels grid. */ .single-delivery-contacts { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .single-delivery-contact { display: flex; flex-direction: column; } .single-delivery-label { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--color-text-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.45rem; } .single-delivery-label span { color: var(--color-text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; } .single-delivery-input { width: 100%; min-height: 42px; padding: 0.68rem 0.8rem; border: 1.5px solid rgba(178, 178, 174, 0.45); border-radius: 12px; background: #fff; color: var(--color-text-dark); font: inherit; font-size: 0.92rem; } .single-delivery-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.16); } .single-delivery-email-list { display: grid; gap: 0.5rem; } .single-delivery-phone-list { display: grid; gap: 0.5rem; } .single-delivery-email-row, .single-delivery-phone-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 0.5rem; align-items: center; } .single-delivery-email-remove, .single-delivery-phone-remove { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1.5px solid #d94a42; border-radius: 50%; background: #fff; color: #d94a42; cursor: pointer; display: inline-grid; place-items: center; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .single-delivery-email-remove:hover, .single-delivery-phone-remove:hover { background: #d94a42; border-color: #d94a42; color: #fff; box-shadow: 0 0 0 3px rgba(217, 74, 66, 0.14); } .single-delivery-email-remove[hidden], .single-delivery-email-add[hidden], .single-delivery-phone-remove[hidden], .single-delivery-phone-add[hidden] { display: none; } .single-delivery-email-add, .single-delivery-phone-add { margin-top: 0.65rem; border: 0; background: transparent; color: var(--color-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.88rem; font-weight: 700; padding: 0; } .single-delivery-email-add .delivery-email-add-icon, .single-delivery-phone-add .delivery-phone-add-icon { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--color-primary); color: #fff; font-size: 1rem; /* line-height === element height so the "+" glyph sits on the optical center even when inline-grid's place-items: center falls short with an anonymous text node child. */ line-height: 24px; } .single-delivery-phone-row .iti, .delivery-phone-row .iti { width: 100%; min-width: 0; } .single-delivery-phone-row .iti input, .delivery-phone-row .iti input { width: 100%; } .single-delivery-drawer .iti__dropdown-content, .single-delivery-drawer .iti__country-list { z-index: 1000105; } .single-delivery-when-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; margin-top: 0.4rem; } .single-delivery-time-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .single-delivery-time-chip { border: 1px solid rgba(178, 178, 174, 0.45); border-radius: 999px; background: #fff; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.42rem 0.8rem; } .single-delivery-time-chip:hover, .single-delivery-time-chip.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; } .single-delivery-tz { display: flex; align-items: center; gap: 0.4rem; margin: 0.65rem 0 0; color: var(--color-text-muted); font-size: 0.82rem; } .single-delivery-tz strong { color: var(--color-text-dark); font-weight: 700; } .air-datepicker { --adp-font-family: var(--font-primary, Inter, system-ui, sans-serif); --adp-z-index: 1000102; --adp-width: 290px; --adp-border-radius: 12px; --adp-border-color: rgba(96, 80, 176, 0.2); --adp-border-color-inner: rgba(178, 178, 174, 0.22); --adp-accent-color: var(--color-primary); --adp-color-current-date: var(--color-primary); --adp-cell-background-color-selected: var(--color-primary); --adp-cell-background-color-selected-hover: #51449d; --adp-btn-color: var(--color-primary); box-shadow: 0 18px 48px rgba(49, 51, 48, 0.18); } .air-datepicker-overlay { --adp-overlay-z-index: 1000101; } .air-datepicker-time--current-hours, .air-datepicker-time--current-minutes { font-family: var(--font-primary, Inter, system-ui, sans-serif); } .air-datepicker.-only-timepicker- { --adp-width: 260px; } .single-delivery-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem; } .single-delivery-channel { position: relative; min-width: 0; border: 1.5px solid rgba(178, 178, 174, 0.45); border-radius: 14px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.8rem 0.55rem 0.7rem; text-align: center; font: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .single-delivery-channel:hover { border-color: var(--color-primary); transform: translateY(-1px); } .single-delivery-channel.is-active { border-color: var(--color-primary); background: rgba(196, 184, 255, 0.12); box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.14); } .single-delivery-channel--soon { opacity: 0.55; cursor: not-allowed; filter: saturate(0.7); } .single-delivery-channel--soon:hover { transform: none; border-color: inherit; box-shadow: none; } .single-delivery-channel-icon { width: 38px; height: 38px; border-radius: 12px; background: #f6f5f1; color: var(--color-text-dark); display: grid; place-items: center; font-size: 1rem; font-weight: 700; } .single-delivery-channel-icon--email { color: var(--color-primary); } .single-delivery-channel-icon--telegram { color: #2aabee; } .single-delivery-channel-icon--sms { color: var(--color-primary); } .single-delivery-channel-icon svg { width: 20px; height: 20px; display: block; } .single-delivery-channel-name { color: var(--color-text-dark); font-size: 0.88rem; font-weight: 700; } .single-delivery-channel small { color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.3; } .single-delivery-copy-row { display: flex; gap: 0.4rem; } .single-delivery-copy { border: 1.5px solid var(--color-primary); border-radius: 10px; background: #fff; color: var(--color-primary); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.5rem 0.9rem; } .single-delivery-copy:hover { background: var(--color-primary); color: #fff; } .single-delivery-success, .single-delivery-pickup { border: 1px solid rgba(96, 80, 176, 0.18); border-radius: 14px; background: rgba(196, 184, 255, 0.16); padding: 0.85rem 0.95rem; } .single-delivery-success > strong, .single-delivery-pickup > strong { display: block; margin-bottom: 0.3rem; color: var(--color-text-dark); font-size: 0.92rem; } .single-delivery-success p, .single-delivery-pickup p { margin: 0 0 0.55rem; color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.45; } .single-delivery-error { padding: 0.7rem 0.95rem; border: 1px solid #f4c2c2; border-radius: 12px; background: #ffeded; color: #8a2222; font-size: 0.86rem; } .single-delivery-foot .btn-primary:disabled, .dg-delivery-modal-foot .btn-primary:disabled, .dg-delivery-modal-foot .btn:disabled, .dg-delivery-modal-box [data-modal-submit]:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; } @media (max-width: 700px) { body.single-dream:not(.is-receiver-card) .single-wish-main { padding-top: 78px; } .sticky-toolbar-wrap { position: fixed; top: var(--single-wish-toolbar-top, var(--header-height, 72px)); left: 0; right: 0; z-index: 1190; margin: 0; padding: 0.5rem 0.8rem 0.6rem; border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .sticky-toolbar.owner-toolbar { width: 100%; display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .st-title, .sticky-toolbar-wrap.is-stuck .st-title { max-width: none; margin: 0 0 0.5rem; padding: 0; border-right: 0; opacity: 1; transform: none; } .st-title-icon { width: 20px; height: 20px; } .st-title-text { max-width: calc(100vw - 5rem); font-size: 0.78rem; } .st-actions { justify-content: flex-start; flex-wrap: nowrap; gap: 0.3rem; } .st-divider { display: none; } .sticky-toolbar .visibility-toggle { margin-right: auto; } [dir="rtl"] .sticky-toolbar .visibility-toggle { margin-right: 0; margin-left: auto; } .sticky-toolbar .visibility-btn { width: 30px; min-width: 30px; height: 28px; justify-content: center; padding: 0; } .sticky-toolbar .visibility-label, .sticky-toolbar .btn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sticky-toolbar .btn.btn-sm, .owner-toolbar .btn.btn-sm { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 10px; } .sticky-toolbar .btn-delivery { position: relative; background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-delivery .btn-count { position: absolute; top: -6px; right: -6px; margin-left: 0; background: #c54343; border: 2px solid var(--color-bg-white); } [dir="rtl"] .btn-delivery .btn-count { right: auto; left: -6px; } .wish-breadcrumbs { padding-top: 1rem; } .single-delivery-drawer { top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: auto; max-height: 84vh; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.25); transform: translateY(100%); } [dir="rtl"] .single-delivery-drawer { right: 0; left: 0; transform: translateY(100%); } .single-delivery-drawer.open, [dir="rtl"] .single-delivery-drawer.open { transform: translateY(0); } .single-delivery-handle { display: block; width: 36px; height: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.18); margin: 8px auto 0; flex: 0 0 auto; } .single-delivery-head { padding: 0.85rem 1.1rem 0.75rem; } .single-delivery-body { padding: 0.85rem 1rem; } .single-delivery-foot { padding: 0.75rem 1rem 1rem; } .single-delivery-foot .btn-primary { flex: 1; } .single-delivery-mode, .single-delivery-when-row, .single-delivery-copy-row { grid-template-columns: 1fr; flex-direction: column; } .single-delivery-channels { grid-template-columns: 1fr; } .dr-route { grid-template-columns: auto 1fr; gap: 0.65rem; padding: 0.72rem 0.8rem; } .dr-route-icon { width: 34px; height: 34px; border-radius: 9px; } .dr-route-actions { grid-column: 2; justify-content: flex-start; } /* Mobile route-actions stay visible (edit + delete iconы inline). Cards on mobile are still tappable as a secondary way to open edit, but the icon buttons are the primary affordance. */ .dr-route[data-delivery-tappable] { cursor: pointer; } .dr-route-actions { display: flex; grid-column: 2; justify-content: flex-end; padding-top: 0.4rem; } /* On mobile the 4-col channel grid would crush tiles to ~70px wide (with 16px gutters and the modal padding). Drop to 3-col so each tile keeps its tap target. */ .dg-delivery-modal-box .dr-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Modal becomes a bottom sheet on mobile, same animation pattern as the sidebar drawer above. */ .dg-delivery-modal-box { top: auto !important; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: auto; max-height: 90vh; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.25); transform: translate(0, 100%); } .dg-delivery-modal-box.open { transform: translate(0, 0); } .dg-delivery-modal-head { padding: 0.85rem 1.1rem 0.75rem; } .dg-delivery-modal-body { padding: 0.85rem 1rem; } .dg-delivery-modal-foot { padding: 0.75rem 1rem 1rem; flex-wrap: wrap; } } /* =========================================================================== SINGLE-WISH DELIVERY MODAL (add / edit) Adds-on top of .single-delivery-* form classes shared with the sidebar. Desktop: centered modal. Mobile: bottom sheet (rules in the mobile media query above). Z-index sits above .single-delivery-drawer (1301) so the modal can be opened while the sidebar is still on screen. =========================================================================== */ .dg-delivery-modal-overlay { position: fixed; inset: 0; z-index: 1320; background: rgba(47, 47, 49, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .dg-delivery-modal-overlay.open { opacity: 1; pointer-events: auto; } .dg-delivery-modal-box { position: fixed; top: 50%; left: 50%; z-index: 1321; width: min(620px, calc(100vw - 2rem)); max-height: min(94vh, 920px); background: var(--color-bg-white, #fff); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4); transform: translate(-50%, calc(-50% + 12px)); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; overflow: hidden; } .dg-delivery-modal-box.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .dg-delivery-modal-head { padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--color-border, #e8e6e1); display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .dg-delivery-modal-head h3 { margin: 0 0 0.2rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.025em; display: inline-flex; align-items: center; gap: 0.5rem; } .dg-delivery-modal-title-icon { flex-shrink: 0; color: var(--color-text-dark, #2f2f31); } .dg-delivery-modal-head p { margin: 0; font-size: 0.82rem; color: var(--color-text-muted, #666); } .dg-delivery-modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--color-text-muted, #666); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } .dg-delivery-modal-close:hover { background: var(--color-bg-light, #f5f3f0); color: var(--color-text-dark, #2f2f31); border-color: var(--color-border, #e8e6e1); } .dg-delivery-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1.25rem; } .dg-delivery-modal-foot { padding: 0.85rem 1.25rem 1rem; border-top: 1px solid var(--color-border, #e8e6e1); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .dg-delivery-modal-foot-right { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; } .dg-delivery-modal-delete { /* Lives in the footer-left slot in edit mode. Hidden by [hidden] attribute in create mode. */ gap: 0.4rem; } /* Drag handle is shared with the sidebar drawer (.single-delivery-handle). On desktop it stays display:none via the global rule; the mobile media query above re-enables it for the bottom-sheet variant. No extra rules needed here. */ /* Hide morning/noon/evening quick-time chips per current task spec — kept in DOM (and could be re-enabled by dropping this rule + the [hidden] attribute in delivery-modal.php). */ .dg-delivery-modal-box .single-delivery-time-chips { display: none !important; } /* Repeat chips — single-select pill group (radiogroup). Visual mirrors the existing .single-delivery-time-chips style for consistency. */ .single-delivery-repeat { margin-top: 0.85rem; } .single-delivery-repeat-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.45rem; } .single-delivery-repeat-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--color-border, #e8e6e1); background: var(--color-bg-white, #fff); color: var(--color-text-muted, #666); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .single-delivery-repeat-chip:hover { border-color: var(--color-primary, #6050b0); color: var(--color-primary, #6050b0); } .single-delivery-repeat-chip.is-active { background: var(--color-primary, #6050b0); border-color: var(--color-primary, #6050b0); color: #fff; } .single-delivery-repeat-chip.is-active:hover { background: #4d3f95; } /* Recurrence badge on route cards in the sidebar — small pill next to the status pill, only rendered when route.repeat !== 'none'. */ .dr-recurrence { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.55rem; border-radius: 999px; background: rgba(122, 87, 68, 0.12); color: var(--color-accent-brown, #7a5744); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; } .dr-recurrence svg { width: 11px; height: 11px; } /* =========================================================================== Delivery v2 — pieces lifted from the standalone bundle `Single Wish v2 _delivery routes_ - standalone.html`. Keep class names and shapes 1:1 with the design so future updates land cleanly. =========================================================================== */ /* Quick-send hero — purple banner inside sidebar body, above the route list. */ .dr-quicksend { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, var(--color-primary, #6050b0), #4a3d99); color: #fff; border-radius: var(--radius-md, 12px); margin-bottom: 1.25rem; box-shadow: 0 8px 22px -12px rgba(96, 80, 176, 0.55); } .dr-quicksend-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; } .dr-quicksend-text { flex: 1; min-width: 0; } .dr-quicksend-text strong { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.1rem; color: #fff; } .dr-quicksend-text small { display: block; font-size: 0.74rem; opacity: 0.85; line-height: 1.35; } .dr-quicksend-btn { background: #fff; color: var(--color-primary, #6050b0); border: none; border-radius: 999px; padding: 0.5rem 0.95rem; font-family: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .dr-quicksend-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.25); } /* Empty-state — two CTAs (Send now / Schedule for later). Layout the buttons in a centered flex row matching the design's
*/ .single-delivery-empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; } /* Sidebar footer — two buttons side-by-side (Schedule + Send now). Both grow equally, label stays on a single line so "Schedule delivery" doesn't wrap on the narrower sidebar widths. */ .single-delivery-foot { display: flex; gap: 0.6rem; } .single-delivery-foot > .btn { flex: 1; justify-content: center; white-space: nowrap; } /* Timing segmented control inside the editor — Send now / Schedule for later. */ .dr-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.3rem; background: var(--color-bg-light, #f5f3f0); border: 1px solid var(--color-border, #e8e6e1); border-radius: 10px; margin-bottom: 0.85rem; } .dr-timing-opt { background: transparent; border: none; padding: 0.55rem 0.6rem; border-radius: 7px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted, #5e5f5c); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: all 0.15s; } .dr-timing-opt:hover { color: var(--color-text-dark, #2f2f31); } .dr-timing-opt.active { background: var(--color-bg-white, #fff); color: var(--color-primary, #6050b0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(96, 80, 176, 0.18); } /* In edit mode the toggle is hidden — JS sets data-modal-mode="edit". */ .dg-delivery-modal-box[data-modal-mode="edit"] [data-delivery-timing-toggle] { display: none; } /* "Delivered immediately" callout — purple-tinted banner that replaces the date+time/repeat block when timing='now'. JS toggles [hidden] on it. */ .dr-now-callout { background: linear-gradient(135deg, rgba(96, 80, 176, 0.08), rgba(96, 80, 176, 0.02)); border: 1px solid rgba(96, 80, 176, 0.22); border-radius: var(--radius-md, 12px); padding: 0.95rem 1.05rem; display: flex; gap: 0.7rem; /* Center vertically so a single-line summary doesn't sit above the icon. Multi-line text still reads fine — icon ends up next to the text's optical middle either way. */ align-items: center; margin-top: 0.85rem; } .dr-now-callout-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary, #6050b0); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dr-now-callout-text { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-dark, #2f2f31); } .dr-now-callout-text strong { color: var(--color-primary, #6050b0); font-weight: 700; } /* Alert-style confirm modal — used for the "Delete this delivery?" prompt. */ .dg-confirm-modal-overlay { position: fixed; inset: 0; z-index: 1340; background: rgba(47, 47, 49, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .dg-confirm-modal-overlay.open { opacity: 1; pointer-events: auto; } .dg-confirm-modal-box { position: fixed; top: 50%; left: 50%; z-index: 1341; width: min(420px, calc(100vw - 2rem)); background: var(--color-bg-white, #fff); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4); transform: translate(-50%, calc(-50% + 12px)); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.32, 0.72, 0, 1); padding: 1.5rem 1.5rem 1.25rem; text-align: left; } .dg-confirm-modal-box.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .dg-confirm-modal-icon { width: 44px; height: 44px; border-radius: 50%; background: #fdecec; color: #c54343; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .dg-confirm-modal-box h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.5rem; } .dg-confirm-modal-box p { font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted, #5e5f5c); margin-bottom: 1.25rem; } .dg-confirm-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } /* Channel picker inside the modal — compact 4-col grid that matches the design file "Single Wish v2 (delivery routes).html" RouteEditor. Visually each tile is just an icon-square + name; "Coming soon" surfaces as greyed (.dr-channel--soon), no text-metadata under the icon. Mobile collapses to 3-col below. */ .dg-delivery-modal-box .dr-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; } .dg-delivery-modal-box .dr-channel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.7rem 0.4rem 0.65rem; border: 1.5px solid var(--color-border, #e8e6e1); border-radius: 12px; background: var(--color-bg-white, #fff); color: var(--color-text-dark, #2f2f31); font-family: inherit; cursor: pointer; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s; } .dg-delivery-modal-box .dr-channel:hover { border-color: var(--color-primary, #6050b0); transform: translateY(-1px); } .dg-delivery-modal-box .dr-channel.is-active { border-color: var(--color-primary, #6050b0); background: linear-gradient(180deg, #fff 0%, rgba(196, 184, 255, 0.14) 100%); box-shadow: 0 6px 14px -8px rgba(96, 80, 176, 0.45); } .dg-delivery-modal-box .dr-channel-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .dg-delivery-modal-box .dr-channel-icon svg { width: 18px; height: 18px; } .dg-delivery-modal-box .dr-channel-icon.ch-email { background: linear-gradient(135deg, #6c5ce7, #5546c9); } .dg-delivery-modal-box .dr-channel-icon.ch-sms { background: linear-gradient(135deg, #7a5744, #6b4a39); } .dg-delivery-modal-box .dr-channel-icon.ch-telegram { background: linear-gradient(135deg, #2aabee, #229ed9); } .dg-delivery-modal-box .dr-channel-icon.ch-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); } .dg-delivery-modal-box .dr-channel-icon.ch-viber { background: linear-gradient(135deg, #7360f2, #5a4ad0); } .dg-delivery-modal-box .dr-channel-icon.ch-link { background: linear-gradient(135deg, #313330, #5e5f5c); } .dg-delivery-modal-box .dr-channel-name { font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; line-height: 1.2; } /* Coming-soon channels — hidden in the editor (per latest task). Backend whitelist is the real gate; once a channel becomes shippable, drop its `--soon` class in delivery-modal.php to make it visible again. */ .dg-delivery-modal-box .dr-channel--soon { display: none; } /* =========================================================================== PAGE — RECEIVER CARD (greeting envelope view) Activated by body class .is-receiver-card (set in single-dream.php) =========================================================================== */ body.is-receiver-card { background: var(--color-page-bg); background-image: radial-gradient(circle at 12% 18%, rgba(168, 152, 255, 0.18), transparent 35%), radial-gradient(circle at 88% 82%, rgba(255, 195, 105, 0.18), transparent 40%), radial-gradient(circle at 80% 12%, rgba(255, 153, 184, 0.14), transparent 35%); min-height: 100vh; overflow-x: hidden; padding-top: 0 !important; margin-top: 0 !important; } /* Belt-and-braces — admin-bar is also disabled in PHP via show_admin_bar filter, but if it ever leaks back in (cached page, etc) we still hide it. */ body.is-receiver-card #wpadminbar { display: none !important; } html:has(body.is-receiver-card) { margin-top: 0 !important; padding-top: 0 !important; } body.is-receiver-card .site-header, body.is-receiver-card .site-footer, body.is-receiver-card .mobile-nav-overlay, body.is-receiver-card .auth-modal { display: none !important; } .receiver-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; } .receiver-card { width: 100%; max-width: 720px; background: var(--color-bg-white); border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(96, 80, 176, 0.35), 0 12px 32px -16px rgba(47, 47, 49, 0.18); overflow: hidden; position: relative; animation: receiver-card-in 0.9s cubic-bezier(.22, .9, .32, 1) both; } @keyframes receiver-card-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } } /* Cover (Aurora) — replaces the old envelope+seal cover. Soft gradient surface with a glowing medallion. Visible until the user taps "Open the wish"; then we drop it from layout entirely so the letter/reactions/actions are not pushed by an empty cover slot. */ .receiver-open-prompt { position: relative; z-index: 6; text-align: center; padding: 4rem 2rem 3.5rem; color: white; min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #8B7AC8 0%, #6050B0 45%, #3d3380 100%); isolation: isolate; } /* Soft warm glows in the corners */ .receiver-open-prompt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 20% 20%, rgba(255, 195, 105, 0.25), transparent 60%), radial-gradient(40% 30% at 80% 70%, rgba(255, 158, 177, 0.22), transparent 60%); pointer-events: none; z-index: 0; } /* Subtle dot pattern, masked into a soft ellipse */ .receiver-open-prompt::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%); pointer-events: none; z-index: 0; } .receiver-medallion { position: relative; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #FFC369, #ff9eb1); display: flex; align-items: center; justify-content: center; color: white; font-size: 2.2rem; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.35); margin-bottom: 1.6rem; z-index: 2; } .receiver-medallion::before, .receiver-medallion::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); animation: receiver-ring-pulse 2.4s ease-out infinite; } .receiver-medallion::after { animation-delay: 1.2s; } @keyframes receiver-ring-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } } .receiver-open-prompt h2 { position: relative; z-index: 2; font-size: clamp(1.75rem, 4.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; margin: 0 0 0.55rem; color: white; } .receiver-open-prompt p { position: relative; z-index: 2; font-size: 1rem; line-height: 1.55; opacity: 0.92; margin: 0 0 1.85rem; max-width: 380px; } .receiver-open-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; padding: 1rem 2.25rem; border-radius: 100px; border: none; background: white; color: var(--color-primary); font-family: var(--font-primary); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); transition: transform .25s ease, box-shadow .25s ease; } .receiver-open-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); } /* Once opened, drop the cover from layout entirely (no transition — the confetti burst + the letter's fadeInUp carry the visual handoff). */ .receiver-card.opened .receiver-open-prompt { display: none; } /* Sections that follow the cover stay out of layout while the card is sealed, so there's no empty white strip below the cover before the user taps "Open". The .opened state brings them in with a staggered fade-up — we animate, not transition, because animation is exempt from the no-transition-on-display-change rule. */ @keyframes receiver-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* Letter content */ .receiver-letter { display: none; position: relative; z-index: 1; padding: 3rem 3rem 2.5rem; } .receiver-card.opened .receiver-letter { display: block; animation: receiver-fade-up 0.7s 0.1s both; } .letter-from { text-align: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2.5px; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .letter-from::before, .letter-from::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--color-border); } .letter-occasion { text-align: center; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; margin-bottom: 0.5rem; } .letter-date { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.2px; margin-bottom: 0.85rem; } .letter-title { font-size: clamp(2rem, 5vw, 2.85rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-align: center; text-wrap: balance; background: linear-gradient(135deg, #6050B0, #FFC369); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 2rem; } .letter-figure { width: 100%; border-radius: 20px; overflow: hidden; margin: 0 0 2rem; box-shadow: 0 12px 30px -10px rgba(47, 47, 49, 0.25); } .letter-figure img { width: 100%; height: auto; display: block; } .letter-body { font-size: 1.05rem; line-height: 1.85; color: var(--color-text-dark); } /* Phase 6.10.3 — salutation line (the editable greeting from the generator preview). Reads as the opening of the letter, above the message body. */ .letter-greeting { font-size: 1.12rem; font-weight: 600; color: var(--color-text-dark); margin: 0 0 1.15rem; text-wrap: pretty; } .letter-body p { margin: 0 0 1rem; text-wrap: pretty; } /* Phase 6.10.2 — the whole wish reads as one voice; the first paragraph must match the rest (was bold/larger/purple, which looked like a stray lead-in). */ .letter-body p:first-child { font-weight: inherit; font-size: inherit; color: inherit; } .letter-body p:last-child { margin-bottom: 0; } .letter-signature { margin-top: 2.5rem; text-align: right; padding-right: 0.5rem; font-family: 'Caveat', 'Brush Script MT', cursive; font-size: 1.85rem; color: var(--color-primary); line-height: 1; } /* Reactions */ .receiver-reactions { display: none; padding: 2rem 3rem 1.5rem; border-top: 1px dashed var(--color-border); flex-direction: column; align-items: center; gap: 1rem; } .receiver-card.opened .receiver-reactions { display: flex; animation: receiver-fade-up 0.6s 0.35s both; } .reactions-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text-muted); font-weight: 700; } .reaction-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .react-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-bg-white); font-size: 1.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; position: relative; line-height: 1; } .react-btn:hover { transform: translateY(-4px) scale(1.1); border-color: var(--color-primary); box-shadow: 0 8px 18px rgba(96, 80, 176, 0.18); } .react-btn.picked { border-color: var(--color-primary); background: var(--color-primary-light); transform: scale(1.1); } .react-btn .count { position: absolute; bottom: -6px; right: -4px; background: var(--color-primary); color: white; font-size: 0.65rem; padding: 1px 6px; border-radius: 100px; font-family: var(--font-primary); font-weight: 700; line-height: 1.4; } /* Card footer actions */ .receiver-card-actions { display: none; padding: 1.25rem 3rem 2rem; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .receiver-card.opened .receiver-card-actions { display: flex; animation: receiver-fade-up 0.6s 0.55s both; } .receiver-card-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.2rem; border: 1px solid var(--color-border); background: var(--color-bg-white); border-radius: 100px; font-family: var(--font-primary); font-size: 0.85rem; font-weight: 600; color: var(--color-text-dark); cursor: pointer; transition: all 0.2s; text-decoration: none; } .receiver-card-action:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .receiver-card-action.primary { background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%); color: white; border-color: transparent; box-shadow: 0 12px 24px -6px rgba(96, 80, 176, 0.35); } .receiver-card-action.primary:hover { color: white; box-shadow: 0 16px 32px -6px rgba(96, 80, 176, 0.45); } .receiver-brand-mark { text-align: center; padding: 1.25rem; font-size: 0.72rem; color: var(--color-text-muted); } .receiver-brand-mark a { color: var(--color-primary); font-weight: 600; text-decoration: none; } /* Confetti */ .confetti { position: fixed; top: -10px; width: 10px; height: 14px; opacity: 0; pointer-events: none; z-index: 1000; border-radius: 2px; } .confetti.go { animation: confetti-fall 3.2s cubic-bezier(.3, 0, .7, 1) forwards; } @keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } @media (max-width: 600px) { .receiver-stage { padding: 1rem; } .receiver-letter { padding: 2rem 1.5rem 1.5rem; } .receiver-reactions, .receiver-card-actions { padding-left: 1.5rem; padding-right: 1.5rem; } .letter-body { font-size: 1rem; } .letter-signature { font-size: 1.6rem; } } /* ─── Phase 6.7 F — Wishes filter pills: emoji + chip count ───────── */ .wishes-list-page .pill { display: inline-flex; align-items: center; gap: 0.4rem; } .wishes-list-page .pill-emoji { font-size: 0.95rem; line-height: 1; } .wishes-list-page .pill-label { line-height: 1.1; } .wishes-list-page .pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 0.4rem; border-radius: 999px; background: rgba(96, 80, 176, 0.12); color: var(--color-primary, #6050b0); font-size: 0.72rem; font-weight: 700; line-height: 1; } .wishes-list-page .pill.active .pill-count { background: rgba(255, 255, 255, 0.22); color: #fff; }