s inside .gallery-counts, which has a generic `.gallery-counts div { display:inline-block; min-width:44%; padding:5px; border-radius:25px }` rule (specificity 0,1,1). Every pt-ent DIV selector is therefore scoped under .gallery-counts (0,2,0) and explicitly resets those four props, or the popover collapses to ~44% of the pill width and every word wraps. */ .gallery-counts .pt-ent-pill { position: relative; display: inline-block; min-width: 0; padding: 0; border-radius: 0; z-index: 6; /* sit above the bouncing scroll chevron on the landscape hero strip */ } .pt-ent-trigger { display: inline-flex; align-items: center; background-color: var(--prepaid-background-color); border: 2px solid var(--prepaid-border-color); color: var(--prepaid-font-color); opacity: 0.6; padding: 0.35rem 0.8rem; border-radius: 0.6rem; font-weight: 500; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; } .pt-ent-trigger .pt-ent-count { font-weight: 700; margin: 0 0.25rem; } .pt-ent-trigger .fa-star { color: var(--prepaid-icon-color); } .mode-dark .pt-ent-trigger { opacity: 1; } .pt-ent-pill:hover .pt-ent-trigger, .pt-ent-pill:focus-within .pt-ent-trigger, .pt-ent-pill.is-open .pt-ent-trigger { opacity: 1; } .pt-ent-caret { font-size: 0.7em; transition: transform 0.2s ease; } .pt-ent-pill:hover .pt-ent-caret, .pt-ent-pill:focus-within .pt-ent-caret, .pt-ent-pill.is-open .pt-ent-caret { transform: rotate(180deg); } /* Opens UPWARD: the pill sits near the card's bottom edge, so downward would be covered by the sticky gallery nav (.secondary-menu, z-index 1020). z-index is raised above that nav so the popover is never clipped. */ .gallery-counts .pt-ent-pop { position: absolute; display: block; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 300px; max-width: 360px; margin: 0; background: #fff; color: #333; border-radius: 16px; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24); padding: 18px 20px; z-index: 1080; opacity: 0; visibility: hidden; pointer-events: none; text-align: left; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .pt-ent-pill:hover .pt-ent-pop, .pt-ent-pill:focus-within .pt-ent-pop, .pt-ent-pill.is-open .pt-ent-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* arrow points DOWN toward the pill */ .pt-ent-pop::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; } .gallery-counts .pt-ent-pop-head { display: block; min-width: 0; padding: 0; border-radius: 0; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.6px; color: #6c757d; margin: 0 0 12px; } .gallery-counts .pt-ent-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 0; margin: 0; border-radius: 0; } .gallery-counts .pt-ent-row + .pt-ent-row { border-top: 1px solid #eee; } /* count block: star + number, sits to the LEFT; the "Pre-Paid …" label is to its right */ .pt-ent-row-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.35rem; line-height: 1; color: #2c2c2c; min-width: 2.4em; } .pt-ent-row-star { color: var(--accent-orange); font-size: 1rem; } .pt-ent-row-body { display: flex; flex-direction: column; line-height: 1.3; } .pt-ent-row-label { font-weight: 700; font-size: 1.02rem; } .pt-ent-row-scope { font-size: 0.85rem; color: #6c757d; margin-top: 1px; } /* Reduced-motion: no slide/rotate, snap the reveal. */ @media (prefers-reduced-motion: reduce) { .pt-ent-pop { transition: none; } .pt-ent-caret { transition: none; } } .container-fluid { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .secondary-menu { background-color: var(--bg-color); color: var(--heading-color); transition: all 0.3s ease; /* One definition for the nav's lift, shared by the stuck state and the hover state below, so the two cannot drift apart. */ --nav-lift-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); } .secondary-menu.is-stuck-shadow { box-shadow: var(--nav-lift-shadow); } /* Hover lift — the bar reads as a distinct nav bar the moment it is pointed at, rather than only once it sticks. Opt-in per view via the modifier class (gallery/gallerydownloads today), so the album views keep exactly the behaviour they have. :focus-within earns keyboard users the same cue, who never generate a hover. */ .secondary-menu.nav-hover-shadow:hover, .secondary-menu.nav-hover-shadow:focus-within { box-shadow: var(--nav-lift-shadow); } .mode-dark .secondary-menu { background-color: var(--bg-dark-color); color: var(--font-dark-color); /* A 0.18-alpha black shadow is invisible against a dark surface, which would make the lift a no-op in dark mode — the one place the bar most needs to separate from the page. */ --nav-lift-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); } .mode-dark .modal-content { background-color: var(--bg-dark-color); border: 3px solid var(--accent-orange); color: var(--font-dark-color); box-shadow: 0px 0px 44px var(--soft-shadow); } .mode-light .secondary-menu { background-color: var(--bg-light-color); color: var(--heading-color); transition: all 0.3s ease; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--pulse-glow); } 70% { transform: scale(1); box-shadow: 0 0 0 9px rgba(244, 244, 244, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244, 244, 244, 0); } } @keyframes pulseOrange { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--accent-dark-orange); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(238, 81, 58, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(238, 81, 58, 0); } } @keyframes pulseGreen { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--accent-dark-green); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(44, 182, 167, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(44, 182, 167, 0); } } @keyframes flashingAnimation { 0% { opacity: 1; } 100% { opacity: 0.5; } } .category-item { transition: all 0.3s ease; } .category-item .btn { border-color: var(--accent-orange); color: var(--accent-orange); transition: all 0.3s ease; } .category-item .btn:hover { background-color: var(--accent-orange); color: var(--font-dark-color); } .category-item.active .btn { background-color: var(--accent-orange); color: var(--font-dark-color); font-weight: 800; } .category-card h5{ color: var(--heading-color); padding-top: 5px; cursor: pointer; transition: all 0.3s ease-in-out; } .category-card:hover h5{ color: var(--accent-dark-orange); transition: all 0.3s ease-in-out; } .mode-dark .category-item.active h5 { color: var(--heading-dark-color); } .mode-dark .category-card:hover h5{ color: var(--heading-dark-color); transition: all 0.3s ease-in-out; } .mode-dark .category-card h5{ color: var(--accent-dark-orange); transition: all 0.3s ease-in-out; } #products { top: 62px; padding-top: 15px; transition: all 0.3s ease; } .mode-dark #products { transition: all 0.3s ease; } #products-container { height: 0px; opacity: 0; pointer-events: none; transition: all 0.5s ease; } #products-container.show { height: 100%; pointer-events: auto; opacity: 1; } #products-container .card { margin-top: 15px; border: 2px solid var(--bg-light-color); transition: all 0.3s ease-in-out; } .mode-dark #products-container .card { background-color: var(--cart-dark-grey); } #products-container .card:hover { border-color: var(--accent-orange); box-shadow: 0px 0px 22px var(--soft-shadow); } .mode-dark #products-container .card:hover { border-color: var(--accent-orange); box-shadow: 0px 0px 22px var(--soft-shadow); } #products-container .card.product.selected { transition: all 0.3s ease; border-color: var(--accent-orange); background-color: var(--bg-light-secondary); box-shadow: 0px 0px 11px var(--accent-orange), 0px 0px 44px var(--soft-shadow); transform: scale(1.01); } .mode-dark #products-container .card.product.selected { border-color: var(--accent-dark-orange); background-color: var(--bg-dark-secondary); box-shadow: 0px 0px 66px var(--soft-shadow); transform: scale(1.02); } .product-image { border-radius: 10px; } /* Linear product-stack rows (replaces the cramped multi-column grid). The stack is centered + width-capped so rows read as a list, not full-bleed. */ #products-container .product-div { max-width: 540px; margin-left: auto; margin-right: auto; } #products-container .product-row-card .card-body { padding: 0.6rem 0.85rem; } #products-container .product-row-card .card-title { font-size: 1rem; } #products-container .product-row-card .pricing-hint { white-space: nowrap; font-weight: 600; } .product-img { width: 64px; height: 64px; max-width: 64px; max-height: 64px; object-fit: contain; flex-shrink: 0; transition: transform 0.3s ease; } .product-img:hover { transform: scale(1.1); } .spin-out { transform: rotate(360deg); } .gallery-item { position: relative; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.75); justify-content: center; align-items: center; pointer-events: none; display: flex; z-index: 1; opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0s linear 0.3s; } .overlay.active { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0s linear; } .overlay-content { text-align: center; color: var(--font-white); } .prepaid-footer { position: fixed; bottom: -100%; left: 0px; background-color: var(--prepaid-background-color); color: var(--prepaid-font-color); border-radius: 25px 25px 0px 0px; padding: 10px; transition: all 0.3s ease; } .fixed-bottom { bottom: 0; left: 0; } /* Define the style for the underline */ .fancy-underline { position: relative; display: inline-block; text-decoration: none; color: inherit; } /* Create the pseudo-element for the underline */ .fancy-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: var(--accent-orange); /* Change this to your preferred underline color */ transition: width 0.3s ease; } /* Define the hover effect */ .fancy-underline:hover::after { width: 98%; } /* Optional: Adjustments for links */ .fancy-underline:hover { color: inherit; } /* Ken Burns Slideshow */ #carousel { width: 100%; } .kb-slideshow { position: relative; overflow: hidden; height: 72vh; border: 16px solid var(--photo-border-color); background-color: #111; border-radius: 20px; cursor: pointer; } .kb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; } .kb-slide.kb-active { opacity: 1; } .kb-slide img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%) scale(1.0); } /* Ken Burns animation variants — 4 directions, cycles per slide */ .kb-slide.kb-dir-1.kb-active img { animation: kbDir1 7s ease-in-out forwards; } .kb-slide.kb-dir-2.kb-active img { animation: kbDir2 7s ease-in-out forwards; } .kb-slide.kb-dir-3.kb-active img { animation: kbDir3 7s ease-in-out forwards; } .kb-slide.kb-dir-4.kb-active img { animation: kbDir4 7s ease-in-out forwards; } @keyframes kbDir1 { from { transform: translate(-50%, -50%) scale(1.10) translate(1.5%, 1%); } to { transform: translate(-50%, -50%) scale(1.00) translate(0%, 0%); } } @keyframes kbDir2 { from { transform: translate(-50%, -50%) scale(1.00); } to { transform: translate(-50%, -50%) scale(1.10); } } @keyframes kbDir3 { from { transform: translate(-50%, -50%) scale(1.10) translate(-1.5%, 1%); } to { transform: translate(-50%, -50%) scale(1.00) translate(0%, 0%); } } @keyframes kbDir4 { from { transform: translate(-50%, -50%) scale(1.00) translate(1%, -1%); } to { transform: translate(-50%, -50%) scale(1.10) translate(0%, 0%); } } /* Slide counter */ .kb-counter { position: absolute; bottom: 14px; right: 18px; color: rgba(255, 255, 255, 0.75); font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); z-index: 10; pointer-events: none; } /* Prev / Next nav */ .kb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0, 0, 0, 0.28); border: none; color: rgba(255, 255, 255, 0.8); width: 44px; height: 72px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; transition: background 0.2s, color 0.2s; font-size: 1rem; } .kb-nav:hover { background: rgba(0, 0, 0, 0.55); color: #fff; } .kb-nav-prev { left: 0; border-radius: 0 3px 3px 0; } .kb-nav-next { right: 0; border-radius: 3px 0 0 3px; } #activeProduct .card { border: none; text-align: left !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } #activeProduct .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .mode-dark #activeProduct .card { border: none; background-color: var(--cart-dark-grey); color: var(--heading-dark-color); } .mode-dark #activeProduct .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } #activeProduct .card .btn { position: absolute; background-color: var(--accent-orange); border: 3px solid var(--bg-light-color); color: var(--font-dark-color); bottom: -20px; left: 25%; right: 25%; margin: 0 auto; transition: all 0.3 ease; } #activeProduct .card .btn:hover { background-color: var(--bg-light-color); border: 2px solid var(--accent-orange); color: var(--accent-orange); } .btn { border-radius: 20px; cursor: pointer; padding: 10px; font-weight: 800; } .btn-danger { cursor: pointer; background-color: var(--accent-orange); border-color: var(--accent-orange); } .btn-danger:hover { border-color: var(--accent-orange); color: var(--accent-orange); background-color: var(--bg-light-color); } .btn-outline-danger { cursor: pointer; background-color: var(--bg-light-color); border: 2px solid var(--accent-orange); color: var(--accent-orange); } .btn-outline-danger:hover { background-color: var(--accent-orange); border: 2px solid var(--bg-light-color); color: var(--bg-light-color); } .btn-outline-primary { background-color: var(--bg-light-color); border: 1px solid var(--heading-light-color); color: var(--heading-light-color); margin-bottom: 2px; } .btn-outline-primary:hover { background-color: var(--bg-light-color); border: 1px solid var(--accent-orange); color: var(--accent-orange); } .btn-square { width: 51px; height: 52px; border-radius: 10px; transition: all 0.3 ease-in-out; } .btn-square.active { border: 2px solid var(--accent-orange); color: var(--accent-orange); } .donation-added { background-color: var(--accent-orange); color: var(--font-dark-color); border-radius: 10px; } /* --- Cart Feedback Chip --- */ #cartChip { position: fixed; top: 115px; /* JS overrides this to secondary-menu bottom + 8px */ right: 1rem; width: 300px; background: var(--overlay-bg); color: var(--overlay-text); border: 1px solid var(--overlay-border); border-radius: 12px; box-shadow: 0 6px 28px var(--soft-shadow); z-index: 6000; transform: translateX(calc(100% + 2rem)); transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1); pointer-events: none; } #cartChip.show { transform: translateX(0); pointer-events: auto; } .cart-chip-inner { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.85rem; } .cart-chip-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; flex-shrink: 0; background: var(--overlay-bg-secondary); } .cart-chip-body { flex: 1; min-width: 0; } .cart-chip-title { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--overlay-text); } .cart-chip-meta { display: flex; gap: 0.4rem; font-size: 0.75rem; color: var(--overlay-text-muted); margin-top: 0.1rem; } .cart-chip-price { color: var(--accent-orange); font-weight: 600; } .cart-chip-view { background: var(--accent-orange); color: var(--font-white); border: none; border-radius: 7px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; } .cart-chip-view:hover { background: var(--accent-light-orange); } .cart-chip-close { background: none; border: none; color: var(--overlay-text-muted); cursor: pointer; flex-shrink: 0; font-size: 0.7rem; opacity: 0.55; line-height: 1; /* 44px touch target (small glyph, large hit area) so "dismiss" can't mis-tap "view cart" */ min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; } .cart-chip-close:hover { opacity: 1; } .mode-dark #cartChip { background: var(--surface-elevated-dark); border-color: var(--overlay-border); } img.logo { height: 75px; max-width: 100%; transition: all 0.3s ease; } .live img.logo { max-height: 75px; } .secondary-menu img.logo { max-height: 75px; } .secondary-menu .live img.logo { max-height: 50px; } @media (max-width: 761px) { .secondary-menu img.logo { max-height: 50px; } .secondary-menu .live img.logo { max-height: 40px; } } .secondary-menu img.logo { max-height: 50px; } /* --- Logo slides up off-screen / heading text fades in when scrolled past heading --- */ .nav-logo-area { position: relative; overflow: hidden; } .nav-logo-area img.logo { transition: transform 0.4s ease, opacity 0.3s ease; } .nav-heading-text { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; color: var(--heading-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } /* Scrolled past heading: logo slides up and out, heading fades in */ .secondary-menu.past-heading .nav-logo-area img.logo { transform: translateY(-110%); opacity: 0; pointer-events: none; } .secondary-menu.past-heading .nav-heading-text { opacity: 1; } /* Image clicked: logo slides back down into view, heading fades out */ .secondary-menu.image-selected .nav-logo-area img.logo { transform: translateY(0); opacity: 1; pointer-events: auto; } .secondary-menu.image-selected .nav-heading-text { opacity: 0; } .mode-dark .nav-heading-text { color: var(--font-dark-color); } .donation-logo{ max-height: 75px; } .donation-text{ font-weight: 500; font-size: 14px; color: var(--heading-light-color); } .mode-dark .donation-text{ color: var(--heading-dark-color); } .donation-link{ font-weight: 100; font-size: 12px; text-decoration: none; color: var(--prepaid-font-color); } .footer-text { font-weight: 100; font-size: 12px; } .footer-text a { font-weight: 200; font-size: 12px; text-decoration: none; color: var(--accent-light-orange); } .footer-text a:hover { font-weight: 300; text-decoration: none; color: var(--accent-dark-orange); } /* Checkout footer — themed bar matching the gallery's #prepaid-footer curve. Static at the bottom of the page (not fixed). Breaks out of the container-fluid gutter so the curved bar spans edge to edge; the photographer background (.checkout-page-bg) now runs the full page behind it. Honors the photographer footer color overrides via the inline style, falling back to the same --prepaid-* theme vars the gallery bar uses. */ .checkout-footer-bar { /* No negative side margins: that full-bleed trick pulled the bar wider than the viewport and put a horizontal scrollbar across every checkout step. margin-top:auto pins the bar to the bottom of the flex-column page wrapper (.checkout-page-bg) so a short order no longer leaves a dead band of background beneath the footer. */ margin: auto 0 0; background-color: var(--prepaid-background-color); color: var(--prepaid-font-color); border-radius: 25px 25px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12); padding: 4px 0 14px; } .checkout-footer-bar .footer-text { color: var(--prepaid-font-color); } .checkout-footer-bar .footer-text a { color: var(--prepaid-font-color); text-decoration: underline; text-underline-offset: 2px; } .checkout-footer-bar .footer-text a:hover { color: var(--prepaid-font-color); opacity: 0.8; } /* Photographer background covers the full viewport on the checkout page so it never falls back to the plain body color below the content/footer. Flex column so the footer bar's margin-top:auto can pin it to the bottom (no dead band below it). */ .checkout-page-bg { min-height: 100vh; display: flex; flex-direction: column; } /* --------------------------------------------------------------------------- Login / entry footer + standalone Support link (layout/footer_login.php + login/login.php). Replaces the hardcoded white #eee bar and the raw blue-underlined links/btn-link with a themed, modern surface. Theme-variable driven; light + dark. --------------------------------------------------------------------------- */ #footer.login-footer { background-color: var(--bg-light-secondary); color: var(--font-light-color); border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 12px; font-weight: 300; } .mode-dark #footer.login-footer { background-color: var(--bg-dark-secondary); color: var(--font-dark-color); border-top: 1px solid rgba(255, 255, 255, 0.08); } #footer.login-footer a { color: var(--accent-orange); text-decoration: none; font-weight: 500; transition: color 0.15s ease; } #footer.login-footer a:hover { color: var(--accent-dark-orange); text-decoration: underline; } #footer.login-footer .poweredby { margin-top: 0.25rem; opacity: 0.7; } #footer.login-footer .poweredby a { font-weight: 400; } /* Standalone "Contact Support" link below the entry card — a quiet glass pill that reads cleanly over the photo hero, not a blue underline. */ .login-support-link { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; padding: 7px 18px; font-size: 0.9rem; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.15s ease, border-color 0.15s ease; } .login-support-link:hover, .login-support-link:focus-visible { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; text-shadow: none; outline: none; } /* Cart item row — flex layout */ .cart-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; position: relative; } .cart-item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 1px; background: var(--overlay-border); opacity: 0.5; } .cart-thumb-wrap { position: relative; flex-shrink: 0; width: 48px; height: 48px; } .cart-thumb-wrap:hover .cart-thumb-zoom { opacity: 1; } .cart-thumb-zoom { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); border: none; border-radius: 4px; color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s ease; cursor: pointer; } .cart-item-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; display: block; background: var(--bg-dark-secondary, #eee); } .cart-item-details { flex: 1; min-width: 0; } .cart-item-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .cart-item-meta { font-size: 0.78rem; color: var(--font-muted-color, #888); display: flex; align-items: center; flex-wrap: wrap; } .cart-item-qty-label { display: inline-flex; align-items: center; } .remove-from-cart { flex-shrink: 0; background: none; border: none; color: var(--font-muted-color, #aaa); font-size: 0.7rem; padding: 4px 6px; cursor: pointer; border-radius: 4px; line-height: 1; transition: color 0.15s ease, background 0.15s ease; } .remove-from-cart:hover { color: var(--danger-color, #dc3545); background: rgba(220, 53, 69, 0.1); } /* Cart image lightbox — z-index must exceed cart panel (5000) */ #cartImageLightbox { z-index: 6000; } .cart-lightbox-modal .modal-content { border: 1px solid var(--overlay-border); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55); border-radius: 10px; } .cart-lightbox-modal .modal-header { border-bottom: 1px solid var(--overlay-border); } .mode-light .cart-lightbox-modal .modal-content { background: var(--bg-color); color: var(--font-color); } .mode-light .cart-lightbox-modal .modal-header { background: var(--bg-color); } .mode-dark .cart-lightbox-modal .modal-content { background: var(--bg-dark-color); color: var(--font-dark-color); } .mode-dark .cart-lightbox-modal .modal-header { background: var(--bg-dark-color); } .mode-dark .cart-lightbox-modal .btn-close { filter: invert(1) grayscale(1) brightness(200%); } .cart-lightbox-img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 6px; object-fit: contain; } .checkout-label { font-size: 14px; font-weight: light; color: var(--heading-color); font-family: 'Poppins', sans-serif !important; } /* STYLE FOR SHOPPING CART */ .callout { border-left: 4px solid var(--prepaid-border-color); background-color: var(--prepaid-background-color); color: var(--prepaid-border-color); border-bottom-right-radius: 5px; border-top-right-radius: 5px; } .callout .checkout-label { color: var(--prepaid-border-color); } .callout i { color: var(--prepaid-border-color); } /* Album Select: nudge + campaign modal */ /* Entire-gallery kill-switch: when album_select stamps body.pt-no-egallery (single-image/few-photo configurator mode OR no digital bundle), hide every "Buy/Add Entire Gallery" button + the "get them all" nudge & deal-hint, regardless of which JS path renders them (CSS applies whenever created). */ body.pt-no-egallery #galleryNudge, body.pt-no-egallery #galleryDealHint, body.pt-no-egallery .digital-gallery, body.pt-no-egallery .digital-gallery-checkout, body.pt-no-egallery #select-all-soon, body.pt-no-egallery .cart-gallery-promo, body.pt-no-egallery .pt-egallery { display: none !important; } .gallery-nudge-widget { position: fixed; top: 50%; left: 0; transform: translate(-100%, -50%); background: var(--prepaid-background-color); color: var(--prepaid-font-color); border-radius: 0 12px 12px 0; padding: 16px; box-shadow: 2px 0 8px var(--shadow-color); z-index: 9999; max-width: 260px; transition: transform 0.5s ease-out; opacity: 0.95; border-left: 4px solid var(--accent-orange); } #nudgeText { font-weight: 900; } .gallery-nudge-widget.visible { transform: translate(0, -50%); } /* Album UX V2: lightbox */ .zoom-image-btn { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.62); color: var(--font-white); display: inline-flex; align-items: center; justify-content: center; z-index: 5; } .zoom-image-btn:hover { background: rgba(0, 0, 0, 0.8); } .album-lightbox-modal .modal-content { background: var(--overlay-bg); color: var(--overlay-text); border: 1px solid var(--overlay-border); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55); border-radius: 0; min-height: 100vh; } .album-lightbox-modal .modal-header { background: var(--overlay-bg-secondary); border-bottom: 1px solid var(--accent-dark-orange) !important; } .album-lightbox-modal .modal-body { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 72px); } .mode-dark .album-lightbox-modal .btn-close { filter: invert(1) grayscale(1) brightness(200%); } .album-lightbox-esc-hint { font-size: 0.85rem; color: var(--overlay-text-muted); } .album-lightbox-esc-hint kbd { background: var(--overlay-border); color: var(--overlay-text); border: 1px solid var(--overlay-border); box-shadow: none; } .album-lightbox-stage { position: relative; width: 100%; min-height: calc(100vh - 210px); display: flex; align-items: center; justify-content: center; } .album-lightbox-img { max-width: 100%; max-height: 72vh; border-radius: 8px; } .album-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--overlay-border); background: var(--overlay-bg); color: var(--overlay-text); } .album-lightbox-prev { left: 10px; } .album-lightbox-next { right: 10px; } .album-lightbox-meta { font-size: 0.86rem; opacity: 0.8; } /* ===== Choose-gallery (multi-location disambiguation) ===== */ .choose-gallery-title { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--heading-color, #06054f); font-size: 1.9rem; margin-bottom: 6px; } .choose-gallery-sub { font-family: "Manrope", sans-serif; color: var(--font-color, #333); max-width: 560px; margin: 0 auto; opacity: 0.9; } .gallery-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .gallery-choice-card { display: flex; flex-direction: column; background: var(--bg-secondary, #fff); border: 1px solid var(--overlay-border, rgba(0, 0, 0, 0.12)); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transition: transform 0.12s ease, box-shadow 0.12s ease; } .gallery-choice-card:hover, .gallery-choice-card:focus { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); outline: 2px solid var(--accent-orange, #ee513a); outline-offset: 2px; } .gallery-choice-thumb-wrap { width: 100%; aspect-ratio: 4 / 3; background: #11131a; overflow: hidden; } .gallery-choice-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-choice-body { padding: 14px 16px; } .gallery-choice-name { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--heading-color, #06054f); margin-bottom: 6px; } .gallery-choice-meta { font-size: 0.85rem; color: var(--font-color, #555); opacity: 0.85; } .gallery-choice-cta { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--accent-orange, #ee513a); } .mode-dark .gallery-choice-card { background: var(--bg-dark-secondary, #1a1d26); border-color: var(--overlay-border, rgba(255, 255, 255, 0.14)); } .mode-dark .choose-gallery-title, .mode-dark .gallery-choice-name { color: var(--heading-dark-color, #eef0f5); } .mode-dark .choose-gallery-sub, .mode-dark .gallery-choice-meta { color: var(--font-dark-color, #c8ccd6); } /* ===== Album lightbox loupe — clean-detail window over a watermarked base ===== */ .album-loupe { position: absolute; top: 0; left: 0; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 5; background-repeat: no-repeat; background-color: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 7px var(--accent-light-orange, rgba(238, 81, 58, 0.35)), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(0, 0, 0, 0.25); will-change: transform, background-position; /* moved via transform (composited) — no per-frame layout */ } .album-loupe.is-active { opacity: 1; visibility: visible; } .album-loupe-hint { font-size: 0.86rem; opacity: 0.8; display: inline-flex; align-items: center; gap: 6px; } .album-lightbox-img.loupe-enabled { cursor: pointer; /* click adds to cart — signal "click", not "inspect" */ } .emoji-big { font-size: 2.25rem; line-height: 1; display: inline-block; margin-bottom: 4px; } .close-nudge { position: absolute; top: 6px; right: 10px; background: transparent; border: none; font-size: 1.5rem; line-height: 1; color: var(--cart-dark-grey); cursor: pointer; } .close-nudge:hover { color: var(--font-color); } .prepaid-slideout { position: fixed; right: -315px; bottom: 120px; background: var(--prepaid-background-color); color: var(--prepaid-font-color); padding: 15px 25px; border-radius: 12px 0 0 12px; box-shadow: 0 3px 10px var(--shadow-color); font-size: 14px; font-weight: 500; transition: right 0.5s ease; z-index: 1050; border-left: 10px solid var(--accent-orange); } .prepaid-slideout.show { right: 0; } /* ------------------------------------------------------- Entire-gallery proximity hint (inside mini-cart footer) ------------------------------------------------------- */ /* Shown once the remaining gap drops below half the gallery price */ .gallery-deal-hint { background: var(--prepaid-background-color); color: var(--prepaid-font-color); border-radius: 8px; padding: 10px 12px 8px; margin-bottom: 10px; text-align: center; } .gallery-deal-hint-text { font-size: 0.85rem; margin: 0 0 8px; } .animates-modal { background: var(--accent-orange); border-radius: 20px; border: none !important; padding: 0; } .animates-modal .modal-header, .animates-modal .modal-footer { border: none !important; } .animates-title { font-weight: 900; font-size: 42px; margin-top: 15px; margin-bottom: 10px; color: var(--font-color); text-transform: uppercase; } .animates-subtitle { font-weight: 700; font-size: 22px; color: var(--heading-color); margin-bottom: 10px; } .animates-text { font-size: 17px; font-weight: 500; color: var(--font-color); line-height: 1.45; padding: 0 15px; } .animates-primary-btn { border: 4px solid var(--accent-orange); background: var(--bg-dark-color); color: var(--font-dark-color); font-size: 18px; padding: 12px 0; border-radius: 40px; font-weight: 700; transition: all 0.3s ease-in-out; } .animates-primary-btn:hover { border: 4px solid var(--bg-dark-color); background: var(--accent-orange); color: var(--font-color); font-size: 18px; padding: 12px 0; border-radius: 40px; font-weight: 700; } .animates-skip-btn { background: var(--accent-orange); color: var(--font-color); font-size: 14px; font-weight: 700; border-radius: 30px; padding: 8px 20px; } .animates-footer { border: none; background: transparent; display: flex; justify-content: center; padding-bottom: 20px; } /* ============================================================ Model Release Modal — generic admin-designed modal Colors injected as CSS custom properties on the modal element from admin DB values (--mr-bg, --mr-text, --mr-accent, etc.) ============================================================ */ .mr-modal .mr-modal-dialog { max-width: var(--mr-width, 480px); } .mr-modal .mr-modal-content { background: var(--mr-bg, #ffffff); color: var(--mr-text, #333333); border-radius: var(--mr-radius, 12px); border: none; overflow: hidden; font-family: var(--mr-font, Poppins, system-ui, sans-serif); } .mr-hero { width: 100%; max-height: 200px; overflow: hidden; } .mr-hero-img { width: 100%; height: 200px; object-fit: cover; display: block; } .mr-modal-body { padding: 24px; } .mr-logo-wrap { text-align: center; margin-bottom: 12px; } .mr-logo { max-width: 120px; max-height: 60px; object-fit: contain; } .mr-headline { font-size: 1.5rem; font-weight: 800; color: var(--mr-text, #333333); margin-bottom: 6px; text-align: center; } .mr-subheadline { font-size: 1rem; font-weight: 600; color: var(--mr-text, #333333); opacity: 0.85; text-align: center; margin-bottom: 12px; } .mr-body-text { font-size: 0.9rem; line-height: 1.5; margin-bottom: 14px; } .mr-legal-scroll { max-height: 140px; overflow-y: auto; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; font-size: 0.8rem; line-height: 1.45; background: rgba(0,0,0,0.02); } .mr-legal-text { color: var(--mr-text, #333333); opacity: 0.8; } .mr-form .mr-field-label { font-size: 0.82rem; font-weight: 600; color: var(--mr-text, #333333); margin-bottom: 2px; } .mr-form .mr-field-input { border-color: rgba(0,0,0,0.15); font-size: 0.88rem; } .mr-form .mr-field-input:focus { border-color: var(--mr-accent, #e8513a); box-shadow: 0 0 0 2px rgba(232,81,58,0.15); } .mr-req { color: var(--mr-accent, #e8513a); font-weight: 700; } .mr-consent-check { font-size: 0.85rem; } .mr-consent-label { color: var(--mr-text, #333333); } .mr-cta-btn { background: var(--mr-btn-bg, var(--mr-accent, #e8513a)); color: var(--mr-btn-text, #ffffff); border: none; font-weight: 700; font-size: 1rem; padding: 12px; border-radius: calc(var(--mr-radius, 12px) / 2); transition: opacity 0.2s ease; } .mr-cta-btn:hover { opacity: 0.9; color: var(--mr-btn-text, #ffffff); } .mr-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; } .mr-skip-btn { background: transparent; color: var(--mr-text, #333333); opacity: 0.5; font-size: 0.85rem; font-weight: 500; border: none; transition: opacity 0.2s ease; } .mr-skip-btn:hover { opacity: 0.8; color: var(--mr-text, #333333); } /* Dark mode */ .mode-dark .mr-modal .mr-modal-content { box-shadow: 0 4px 24px rgba(0,0,0,0.5); } .mode-dark .mr-legal-scroll { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); } .mode-dark .mr-form .mr-field-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: var(--mr-text, #eeeeee); } .mode-dark .mr-form .mr-field-input:focus { border-color: var(--mr-accent, #e8513a); box-shadow: 0 0 0 2px rgba(232,81,58,0.25); } /* ============================================================ Styles consolidated from inline