/** * Provider Portal styles (provider-portal PP2 — auth screens). * * Mobile-first, high-contrast, large tap targets for the low-literacy / * outdoor-sunlight audience (§6). PP2 ships only the login/OTP/selector * screens; PP3 layers the full "Popsicle Mix B" home grid + shell on top. */ /* * Material Symbols Rounded — self-hosted subset (PP12, low-bandwidth/offline). * A 64-glyph subset (~52 KB) vendored at assets/vendor/material-symbols/ * replaces the full ~3 MB Google Fonts CDN download and removes the third-party * runtime dependency, so the icon-heavy UI renders on patchy/offline data once * the page is cached. Glyph list + regeneration command: see that dir's README. * The .material-symbols-rounded base class + per-element font-variation-settings * live further down; this only supplies the @font-face. font-display:block keeps * the prior CDN behaviour (no ligature-text flash before the tiny font loads). * * The ?v= is the subset generation, NOT the plugin version: fonts are served * with "expires max", so a regenerated subset only reaches a provider who has * already used the portal if this query string changes. Bump it (and the README * glyph list) every time the .woff2 is regenerated. */ @font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400 700; font-display: block; src: url("../vendor/material-symbols/material-symbols-rounded-subset.woff2?v=3") format("woff2"); } /* ------------------------------------------------------------------------- * Terang design tokens + the full-viewport app frame. * * Visual language "Terang": white app background, warm off-white "paper" cards, * 3px pure-ink borders (2px on buttons/pills/inputs), heavy Inter type, high * contrast for outdoor-sunlight readability, Material Symbols Rounded icons. * * The portal owns the whole screen. On mobile it fills the viewport edge to * edge (no outer frame) as a flex column: fixed top (brand + header), a single * scrolling body, and — on the shell — a pinned bottom bar. On desktop (rarely * used by owners) it becomes a centred "device" card on a light-grey backdrop * with a top margin. Tokens are scoped to .ipie-pp so nothing leaks into WP. * * The site's front-end stylesheets are dequeued on portal pages * (IPIE_Provider_Auth::dequeue_theme_assets), so this file is the whole cascade * and sets its own font stack + reset. * ------------------------------------------------------------------------- */ .ipie-pp { --pp-ink: #0e0e0c; /* near-black: text + every border */ --pp-ink-soft: #5b5b56; /* muted labels / meta */ --pp-hair: #dcd6c8; /* warm hairline */ --pp-bg: #ffffff; /* app background */ --pp-paper: #f8f4ea; /* warm off-white card fill */ --pp-backdrop: #e7e4dc; /* desktop grey frame surround */ --pp-ok: #15803d; --pp-warn: #d97706; --pp-alert: #dc2626; --pp-green: #22c55e; --pp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --pp-device-w: 26rem; width: 100%; margin: 0 auto; font-family: var(--pp-font); font-size: 1.0625rem; line-height: 1.5; color: var(--pp-ink); background: var(--pp-bg); box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ipie-pp *, .ipie-pp *::before, .ipie-pp *::after { box-sizing: inherit; } /* Body scope — the Portal Pemilik template adds .ipie-portal-page. Literal * values here: the --pp-* tokens are scoped to .ipie-pp and do not cascade to * . Kept in sync with --pp-bg / --pp-backdrop. */ body.ipie-portal-page { margin: 0; background: #ffffff; } /* Both the shell and the auth flow are a full-viewport flex column. */ #ipie-provider-portal.ipie-pp { display: flex; flex-direction: column; height: 100dvh; max-width: none; } /* dvh fallback for older engines. */ @supports not (height: 100dvh) { #ipie-provider-portal.ipie-pp { height: 100vh; } } /* WordPress admin bar (logged-in QA only; providers are anonymous). Trim its * height off the app so the pinned bottom bar stays on-screen. */ .admin-bar #ipie-provider-portal.ipie-pp { height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { .admin-bar #ipie-provider-portal.ipie-pp { height: calc(100dvh - 46px); } } /* Desktop (owners rarely use it): light-grey backdrop + a centred device frame * with a top margin so the frame is not flush to the page top. */ @media (min-width: 40rem) { body.ipie-portal-page { background: #e7e4dc; } #ipie-provider-portal.ipie-pp { max-width: var(--pp-device-w); margin: 2rem auto; height: min(88dvh, 780px); border: 3px solid var(--pp-ink); border-radius: 22px; box-shadow: 0 18px 48px rgba(14, 14, 12, 0.22); } /* The shell clips to the rounded frame; its body is the scroller. The auth * column is itself the scroller (overflow-y:auto below) and clips too. */ #ipie-provider-portal.ipie-pp-shell { overflow: hidden; } .admin-bar #ipie-provider-portal.ipie-pp { height: min(calc(88dvh - 32px), 780px); } } /* Cards ---------------------------------------------------------- */ .ipie-pp-card { background: var(--pp-paper); border: 3px solid var(--pp-ink); border-radius: 14px; padding: 1.5rem; margin-bottom: 1rem; } .ipie-pp-heading { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 800; } /* Notices -------------------------------------------------------- */ .ipie-pp-notice, .ipie-pp-error { border: 3px solid var(--pp-ink); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1rem; font-weight: 600; } .ipie-pp-notice { background: #ecfeff; } .ipie-pp-error { background: #fef2f2; } /* Fields --------------------------------------------------------- */ .ipie-pp-field { margin-bottom: 1rem; position: relative; } .ipie-pp-field label { display: block; font-weight: 700; margin-bottom: 0.35rem; } .ipie-pp-input { width: 100%; padding: 0.85rem 0.9rem; font-size: 1.125rem; border: 3px solid var(--pp-ink); border-radius: 12px; background: #fff; } .ipie-pp-otp-input { letter-spacing: 0.4em; text-align: center; font-size: 1.6rem; font-weight: 800; } /* Buttons -------------------------------------------------------- */ .ipie-pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.95rem 1rem; font-size: 1.125rem; font-weight: 800; border: 3px solid var(--pp-ink); border-radius: 12px; background: #fff; color: var(--pp-ink); cursor: pointer; text-decoration: none; text-align: center; } .ipie-pp-btn--primary { background: #2563eb; color: #fff; border-color: var(--pp-ink); } .ipie-pp-btn--support { background: #0891b2; color: #fff; margin-top: 0.5rem; } .ipie-pp-btn--home { justify-content: flex-start; margin-bottom: 0.5rem; } .ipie-pp-btn--link { border: none; background: none; color: #2563eb; width: auto; padding: 0.5rem; font-weight: 700; } .ipie-pp-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* A disabled link-button carries no border or background, so opacity alone still leaves it looking like blue link text. With the resend countdown gone the disabled state is the ONLY signal that the control is not yet available, so drop the link colour too — otherwise it reads as clickable while doing nothing, which is a worse confusion than the countdown was. */ .ipie-pp-btn--link:disabled { color: #6b7280; text-decoration: none; } .ipie-pp-link { display: inline-block; margin-top: 1rem; color: #2563eb; font-weight: 700; text-decoration: none; } /* Divider -------------------------------------------------------- */ .ipie-pp-divider { display: flex; align-items: center; text-align: center; color: #666; margin: 1.25rem 0; } .ipie-pp-divider::before, .ipie-pp-divider::after { content: ""; flex: 1; border-top: 2px solid #ddd; } .ipie-pp-divider span { padding: 0 0.75rem; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; } /* Autocomplete suggestions -------------------------------------- */ .ipie-pp-suggestions { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 3px solid var(--pp-ink); border-radius: 12px; overflow: hidden; background-color: #fff; } .ipie-pp-suggestion { border-bottom: 1px solid #eee; } .ipie-pp-suggestion:last-child { border-bottom: none; } .ipie-pp-suggestion--msg { padding: 0.85rem 1rem; color: #666; font-weight: 600; } .ipie-pp-suggestion-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; text-decoration: none; color: var(--pp-ink); font-weight: 600; } .ipie-pp-suggestion-link:hover, .ipie-pp-suggestion-link:focus { background: #f1f5f9; } .ipie-pp-suggestion-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } /* Confirm step --------------------------------------------------- */ .ipie-pp-confirm-home { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; } /* Homestay list / switcher -------------------------------------- */ .ipie-pp-homestay-list { list-style: none; margin: 1rem 0 0; padding: 0; } .ipie-pp-switcher { margin: 1rem 0; } .ipie-pp-switcher select { width: 100%; padding: 0.75rem; font-size: 1.0625rem; border: 3px solid var(--pp-ink); border-radius: 12px; } .ipie-pp-escape { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid #eee; } .ipie-pp-resend { margin-top: 0.5rem; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ================================================================= * PP3 — Authenticated shell: home grid, nav, switcher (D18) * * Visual language "Popsicle Mix B": white bg, 3px pure-black borders, * saturated colour tiles, heavy type, Material Symbols Rounded. Tuned for * one-hand mobile use in outdoor sunlight (§6). * ================================================================= */ .material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* The shell is the app column (flex + height come from #ipie-provider-portal * .ipie-pp above): brand + header fixed at the top, a single scrolling body, * and a pinned bottom bar. No card border on mobile — the portal is edge to * edge; the desktop device frame is applied on .ipie-pp above. */ .ipie-pp-shell { padding: 0; overflow: hidden; background: var(--pp-bg); } /* Auth flow (login / OTP / select): no bottom bar — the whole column scrolls. */ .ipie-pp--auth { overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--pp-bg); } /* Restore the horizontal gutter the old .ipie-pp padding used to give the auth * cards (the brand bar stays full-bleed). */ .ipie-pp--auth > .ipie-pp-notice, .ipie-pp--auth > .ipie-pp-error, .ipie-pp--auth > .ipie-pp-card { margin-left: 1rem; margin-right: 1rem; } .ipie-pp--auth > .ipie-pp-notice:first-of-type, .ipie-pp--auth > .ipie-pp-error:first-of-type, .ipie-pp--auth > .ipie-pp-card:first-of-type { margin-top: 1rem; } .ipie-pp--auth > .ipie-pp-card:last-child { margin-bottom: 1.5rem; } /* Header --------------------------------------------------------- */ /* Per-site brand bar (logo, or site-title fallback) above the shell/login. */ .ipie-pp-brandbar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; background: var(--pp-bg); margin-bottom: 1.5rem; } /* On the login flow the brand bar is the top of the screen, so it carries the * heavy divider. */ .ipie-pp-brandbar--auth { padding: 1rem; border-bottom: 3px solid var(--pp-ink); } /* Once logged in, drop the site branding — the design's authenticated screens * lead with the homestay header, not a site logo. (Login keeps its brand bar.) */ .ipie-pp-shell .ipie-pp-brandbar { display: none; } .ipie-pp-site-logo-img { display: block; max-height: 25px; width: auto; height: auto; } .ipie-pp-site-logo--text { font-weight: 700; font-size: 1.05rem; line-height: 1.2; } .ipie-pp-header { flex-shrink: 0; display: flex; align-items: stretch; border-bottom: 3px solid var(--pp-ink); } .ipie-pp-header-home { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: var(--pp-ink); } .ipie-pp-header-home--static { cursor: default; } .ipie-pp-header-thumb { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; border: 2px solid var(--pp-ink); } .ipie-pp-header-thumb--ph { display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #5b5b56; } .ipie-pp-header-thumb--ph .material-symbols-rounded { font-size: 24px; } .ipie-pp-header-text { flex: 1; min-width: 0; } .ipie-pp-header-eyebrow { display: block; font-size: 0.6875rem; letter-spacing: 0.05em; color: #5b5b56; font-weight: 400; } .ipie-pp-header-name { display: flex; align-items: center; gap: 0.25rem; margin-top: 2px; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ipie-pp-header-chev { font-size: 16px; color: #5b5b56; flex: 0 0 auto; } .ipie-pp-langpill { display: flex; align-items: center; gap: 0.25rem; min-width: 56px; padding: 0 0.625rem; background: var(--pp-ink); color: #fff; border-left: 3px solid var(--pp-ink); font-weight: 800; font-size: 0.75rem; } .ipie-pp-langpill-opt { color: #fff; opacity: 0.4; text-decoration: none; } .ipie-pp-langpill-opt.is-active { opacity: 1; } .ipie-pp-langpill-sep { opacity: 0.4; } /* Page header (function screens) -------------------------------- */ .ipie-pp-pageheader { flex-shrink: 0; display: flex; align-items: stretch; color: #fff; border-bottom: 3px solid var(--pp-ink); } .ipie-pp-pageheader-back { width: 56px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-right: 3px solid var(--pp-ink); color: #fff; text-decoration: none; } .ipie-pp-pageheader-back .material-symbols-rounded { font-size: 26px; font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24; } .ipie-pp-pageheader-text { flex: 1; min-width: 0; padding: 0.625rem 0.875rem; } .ipie-pp-pageheader-eyebrow { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; letter-spacing: 0.06em; opacity: 0.85; } .ipie-pp-pageheader-eyebrow .material-symbols-rounded { font-size: 14px; } .ipie-pp-pageheader-title { margin-top: 2px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; } /* Body — the single internal scroller between the fixed header and bottom bar. */ .ipie-pp-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--pp-bg); } /* Home grid (2 cols). Gridlines are drawn by a 3px gap over a black * background, which stays clean whether there are six tiles or five (the * receive tile is hidden when the invoicing triple-gate fails — the common * default). When the count is odd the final tile spans the full width so the * grid never leaves a dangling empty cell. */ .ipie-pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--pp-ink); border-bottom: 3px solid var(--pp-ink); } .ipie-pp-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 148px; padding: 1.125rem 1rem; color: #fff; text-decoration: none; } .ipie-pp-tile--wide { grid-column: 1 / -1; } .ipie-pp-tile-top { display: flex; align-items: flex-start; justify-content: space-between; } .ipie-pp-tile-icon { font-size: 44px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48; } .ipie-pp-tile-badge { background: #fff; font-weight: 800; font-size: 0.875rem; line-height: 1; min-width: 22px; padding: 4px 8px; border-radius: 999px; border: 2px solid var(--pp-ink); text-align: center; } .ipie-pp-tile-labels { display: block; } .ipie-pp-tile-primary { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .ipie-pp-tile-secondary { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.75; margin-top: 2px; } .ipie-pp-home-logout { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 1rem; color: #5b5b56; } .ipie-pp-home-logout .material-symbols-rounded { font-size: 18px; } /* Function screen body wrapper ---------------------------------- */ .ipie-pp-screen { padding: 1rem; } .ipie-pp-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; color: #5b5b56; } .ipie-pp-placeholder-icon { font-size: 48px; color: #94a3b8; } /* Bottom bar ----------------------------------------------------- */ .ipie-pp-bottombar { display: flex; align-items: stretch; border-top: 3px solid var(--pp-ink); background: var(--pp-ink); flex-shrink: 0; } .ipie-pp-bottombar-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0.5rem; color: #fff; background: var(--pp-ink); text-decoration: none; font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; } .ipie-pp-bottombar-btn .material-symbols-rounded { font-size: 22px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-bottombar-btn--home { border-right: 3px solid var(--pp-ink); } .ipie-pp-bottombar-btn--help { background: #0891b2; } /* Homestay switcher — bottom sheet (D2) ------------------------- */ .ipie-pp-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; } .ipie-pp-sheet[hidden] { display: none; } .ipie-pp-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .ipie-pp-sheet-panel { position: relative; width: 100%; max-width: 30rem; margin: 0 auto; background: #fff; border-top: 3px solid var(--pp-ink); border-radius: 18px 18px 0 0; max-height: 88%; overflow: auto; padding-bottom: 1rem; } .ipie-pp-sheet-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; border-bottom: 3px solid var(--pp-ink); } .ipie-pp-sheet-title { flex: 1; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; } .ipie-pp-sheet-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--pp-ink); border-radius: 8px; background: #fff; cursor: pointer; } .ipie-pp-sheet-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; } .ipie-pp-sheet-list form { margin: 0; } .ipie-pp-sheet-item { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.75rem; background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; cursor: pointer; text-align: left; font: inherit; } .ipie-pp-sheet-item.is-current { background: #f8f4ea; border-color: #db2777; } .ipie-pp-sheet-thumb { width: 46px; height: 46px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; border: 2px solid var(--pp-ink); } .ipie-pp-sheet-thumb--ph { display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #5b5b56; } .ipie-pp-sheet-name { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; } .ipie-pp-sheet-mark { font-size: 24px; flex: 0 0 auto; color: var(--pp-ink); } .ipie-pp-sheet-item.is-current .ipie-pp-sheet-mark { color: #db2777; } .ipie-pp-sheet-logout { display: block; text-align: center; margin: 0 1rem; } /* ================================================================= * PP4 — Tamu bookings list (D5) * * Cards reuse the shell's heavy-border language. Confirmed bookings * (paid / checked-in) read as solid; an awaiting-payment (accepted) * card is demoted with an amber accent so "confirmed" is unmistakable. * ================================================================= */ .ipie-pp-bk-section { margin-bottom: 1.25rem; } .ipie-pp-bk-section-title { margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5b56; } .ipie-pp-bk-card { background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; padding: 1rem; margin-bottom: 0.875rem; } .ipie-pp-bk-card--unconfirmed { border-left-width: 8px; border-left-color: #d97706; background: #fffbeb; } .ipie-pp-bk-unconfirmed { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.01em; color: #b45309; text-transform: uppercase; } .ipie-pp-bk-unconfirmed .material-symbols-rounded { font-size: 18px; } /* Status badges -------------------------------------------------- */ .ipie-pp-bk-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .ipie-pp-bk-status { display: inline-block; padding: 0.25rem 0.6rem; border: 2px solid var(--pp-ink); border-radius: 999px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -0.01em; } /* Booking reference chip. Reads as an identifier, not a status: square corners and a monospace face rather than the pill treatment above. Sized to stay legible at 360px — this is the string a provider reads out loud or types into WhatsApp, so it must not be the smallest text on the card. */ .ipie-pp-bk-ref { display: inline-block; padding: 0.25rem 0.55rem; border: 2px solid var(--pp-ink); border-radius: 6px; background: #f8fafc; color: #475569; font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; /* A long ref must wrap rather than push the status badge off the row. */ overflow-wrap: anywhere; } /* The old SRA id of a migrated booking, shown beside the new ref so a provider can match the screen against their own paper/WhatsApp records. Deliberately subordinate — lighter, lighter-weight, no letter-spacing — so it reads as a cross-reference rather than a second identifier of equal standing. Renders only where migrated_from_post_id is set; transition-period scaffolding, and one of the things to delete when the transition ends. */ .ipie-pp-ref-legacy { color: #94a3b8; font-weight: 500; letter-spacing: 0; white-space: nowrap; } /* In the cancel confirm-modal the ref sits above the guest name, so it needs to break the summary's flow rather than sit inline with it. */ .ipie-pp-cancel-summary .ipie-pp-bk-ref { align-self: flex-start; margin-bottom: 0.15rem; } .ipie-pp-bk-status--staying { background: #eef2ff; color: #3730a3; } .ipie-pp-bk-status--today { background: #dcfce7; color: #166534; } .ipie-pp-bk-status--soon { background: #f1f5f9; color: #334155; } .ipie-pp-bk-status--await { background: #fef3c7; color: #92400e; } .ipie-pp-bk-status--checkout { background: #ffe4e6; color: #9f1239; } .ipie-pp-bk-status--cancelled { background: #f3f4f6; color: #4b5563; } /* Cancelled section — collapsed, muted, and visually subordinate to the operational list above it. Native

, so no JS. ------------- */ .ipie-pp-bk-section--cancelled { margin-top: 1.75rem; } .ipie-pp-bk-collapse-summary { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; user-select: none; } /* Hide the default disclosure marker in both engines; the icon replaces it. */ .ipie-pp-bk-collapse-summary::-webkit-details-marker { display: none; } .ipie-pp-bk-collapse-summary::marker { content: ""; } .ipie-pp-bk-collapse-summary .material-symbols-rounded { font-size: 20px; transition: transform 0.15s ease; } .ipie-pp-bk-collapse[open] > .ipie-pp-bk-collapse-summary .material-symbols-rounded { transform: rotate(180deg); } .ipie-pp-bk-collapse-summary:focus-visible { outline: 3px solid var(--pp-ink); outline-offset: 3px; border-radius: 6px; } .ipie-pp-bk-card--cancelled { border-color: #9ca3af; background: #fafafa; opacity: 0.85; } /* A cancelled booking's payout is no longer owed — do not present it as a live figure the provider can expect. */ .ipie-pp-bk-card--cancelled .ipie-pp-bk-payout-amt { text-decoration: line-through; color: #6b7280; } /* Guest + meta --------------------------------------------------- */ .ipie-pp-bk-guest { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .ipie-pp-bk-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; font-size: 0.9375rem; font-weight: 600; color: #1f2937; } .ipie-pp-bk-meta .material-symbols-rounded { font-size: 20px; color: #5b5b56; flex: 0 0 auto; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } .ipie-pp-bk-nights { color: #5b5b56; font-weight: 700; } /* Contact the guest — collapsed disclosure under the guest name. Same native

treatment as the cancelled section above: marker hidden, chevron rotates on [open], no JS. -------------------------- */ .ipie-pp-bk-contact { margin: 0 0 0.5rem; } .ipie-pp-bk-contact-summary { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; font-weight: 700; color: #1f2937; cursor: pointer; list-style: none; user-select: none; } .ipie-pp-bk-contact-summary::-webkit-details-marker { display: none; } .ipie-pp-bk-contact-summary::marker { content: ""; } .ipie-pp-bk-contact-summary .material-symbols-rounded { font-size: 19px; color: #5b5b56; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } .ipie-pp-bk-contact-chevron { transition: transform 0.15s ease; } .ipie-pp-bk-contact[open] .ipie-pp-bk-contact-chevron { transform: rotate(180deg); } .ipie-pp-bk-contact-summary:focus-visible { outline: 3px solid var(--pp-ink); outline-offset: 3px; border-radius: 6px; } .ipie-pp-bk-contact-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .ipie-pp-bk-contact-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; font-size: 0.9375rem; font-weight: 800; text-decoration: none; border: 2px solid var(--pp-ink); border-radius: 999px; background: #fff; color: var(--pp-ink); } /* WhatsApp is the action that actually reaches a guest here, so it is the filled one — same reasoning as the support CTA (D15). */ .ipie-pp-bk-contact-btn--primary { background: var(--pp-ink); color: #fff; } .ipie-pp-bk-contact-btn .material-symbols-rounded { font-size: 19px; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } /* Money footer --------------------------------------------------- */ .ipie-pp-bk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 2px solid #eee; } .ipie-pp-bk-payout { min-width: 0; } .ipie-pp-bk-payout-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #5b5b56; } .ipie-pp-bk-payout-amt { display: block; margin-top: 1px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pp-ink); } .ipie-pp-bk-pay { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding: 0.3rem 0.6rem; border: 2px solid var(--pp-ink); border-radius: 999px; font-size: 0.8125rem; font-weight: 800; } .ipie-pp-bk-pay .material-symbols-rounded { font-size: 18px; } .ipie-pp-bk-pay--paid { background: #dcfce7; color: #166534; } .ipie-pp-bk-pay--unpaid { background: #fef3c7; color: #92400e; } /* Bookings notice flash (PP5) --------------------------------------- */ .ipie-pp-notice--ok, .ipie-pp-notice--err { display: flex; align-items: center; gap: 0.5rem; } .ipie-pp-notice--ok { background: #ecfdf5; border-color: var(--pp-ink); } .ipie-pp-notice--err { background: #fef2f2; border-color: var(--pp-ink); } .ipie-pp-notice--ok .material-symbols-rounded { color: #166534; } .ipie-pp-notice--err .material-symbols-rounded { color: #b91c1c; } /* Booking-card cancel action (PP5 / D6) ----------------------------- */ .ipie-pp-bk-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px dashed #d6d3cb; } .ipie-pp-cancel-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.9rem; font-size: 0.9375rem; font-weight: 800; border: 2px solid #b91c1c; border-radius: 999px; background: #fff; color: #b91c1c; cursor: pointer; } .ipie-pp-cancel-btn .material-symbols-rounded { font-size: 19px; } /* Cancel confirm sheet (reuses .ipie-pp-sheet panel chrome) ---------- */ .ipie-pp-sheet-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } .ipie-pp-cancel-summary { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9375rem; color: #3f3f3a; } .ipie-pp-cancel-summary strong { font-size: 1.0625rem; color: var(--pp-ink); } .ipie-pp-cancel-refund { margin: 0; border: 2px solid var(--pp-ink); border-radius: 12px; padding: 0.75rem 0.9rem; background: #faf9f6; } .ipie-pp-cancel-refund > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; } .ipie-pp-cancel-refund dt { font-size: 0.875rem; color: #5b5b56; font-weight: 600; } .ipie-pp-cancel-refund dd { margin: 0; font-weight: 800; color: var(--pp-ink); text-align: right; } .ipie-pp-cancel-nomoney { margin: 0 0 0.25rem; font-size: 0.875rem; color: #5b5b56; } /* Cancellation-fee disclosure. Sits between the refund table and the confirm form, and must read as a consequence of confirming — amber, not decorative. */ .ipie-pp-cancel-fee { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.75rem 0 0; padding: 0.6rem 0.7rem; border: 2px solid var(--pp-ink); border-radius: 8px; background: #fef3c7; color: #78350f; font-size: 0.875rem; line-height: 1.4; } .ipie-pp-cancel-fee .material-symbols-rounded { flex: 0 0 auto; font-size: 20px; line-height: 1.2; } .ipie-pp-cancel-payout { margin-top: 0.4rem; padding-top: 0.55rem; border-top: 2px solid #e7e5df; display: flex !important; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .ipie-pp-cancel-payout dd { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; } .ipie-pp-cancel-was { font-size: 0.8125rem; color: #9a9a93; text-decoration: line-through; font-weight: 600; } .ipie-pp-cancel-delta { font-size: 0.8125rem; color: #b91c1c; font-weight: 700; } .ipie-pp-cancel-reason-label { display: block; font-weight: 700; margin-bottom: 0.35rem; } .ipie-pp-cancel-reason { width: 100%; padding: 0.8rem 0.9rem; font-size: 1.0625rem; border: 3px solid var(--pp-ink); border-radius: 12px; background: #fff; } .ipie-pp-cancel-note-wrap { margin-top: 0.9rem; } .ipie-pp-cancel-note-wrap[hidden] { display: none; } .ipie-pp-cancel-note { width: 100%; padding: 0.8rem 0.9rem; font-size: 1.0625rem; font-family: inherit; border: 3px solid var(--pp-ink); border-radius: 12px; background: #fff; resize: vertical; } .ipie-pp-cancel-buttons { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .ipie-pp-cancel-confirm { width: 100%; padding: 0.95rem 1rem; font-size: 1.0625rem; font-weight: 800; border: 3px solid var(--pp-ink); border-radius: 12px; background: #e11d48; color: #fff; cursor: pointer; } .ipie-pp-cancel-confirm.is-busy { opacity: 0.6; cursor: default; } .ipie-pp-cancel-keep { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 800; border: 3px solid var(--pp-ink); border-radius: 12px; background: #fff; color: var(--pp-ink); cursor: pointer; } /* ================================================================= * PP6 — Homestay details (D14) + Support (D15) * * Both reuse the shell's heavy-border card language. Details is a * read-only stack: hero, room/price cards, rating, latest review, * cancellation policy, and a single WhatsApp "report incorrect" CTA. * Support is an hours-aware status banner + a single WhatsApp CTA. * ================================================================= */ /* Shared section heading ----------------------------------------- */ .ipie-pp-dt-h2 { display: flex; align-items: center; gap: 0.4rem; margin: 1.25rem 0 0.625rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5b56; } .ipie-pp-dt-h2 .material-symbols-rounded { font-size: 19px; color: #5b5b56; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* Hero — name + thumbnail (no address) --------------------------- */ .ipie-pp-dt-hero { position: relative; border: 3px solid var(--pp-ink); border-radius: 14px; overflow: hidden; background: var(--pp-ink); margin-bottom: 0.25rem; min-height: 96px; } .ipie-pp-dt-hero-img { display: block; width: 100%; height: 150px; object-fit: cover; } .ipie-pp-dt-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.9rem 0.7rem; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); } .ipie-pp-dt-hero-eyebrow { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; } .ipie-pp-dt-hero-name { display: block; margin-top: 1px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } /* Room + pricing cards ------------------------------------------- */ .ipie-pp-dt-room { padding: 1rem; } .ipie-pp-dt-room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .ipie-pp-dt-room-name { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .ipie-pp-dt-room-qty { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: #5b5b56; } .ipie-pp-dt-rates { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 2px solid var(--pp-ink); border-radius: 10px; overflow: hidden; } .ipie-pp-dt-rate { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.6rem 0.3rem; text-align: center; background: #faf9f6; } .ipie-pp-dt-rate + .ipie-pp-dt-rate { border-left: 2px solid var(--pp-ink); } .ipie-pp-dt-rate .material-symbols-rounded { font-size: 18px; color: #5b5b56; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .ipie-pp-dt-rate-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #5b5b56; } .ipie-pp-dt-rate-amt { font-size: 0.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pp-ink); } .ipie-pp-dt-rate-note { margin: 0.6rem 0 0; font-size: 0.75rem; color: #5b5b56; } /* Contact + payout rows ------------------------------------------ */ .ipie-pp-dt-info-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .ipie-pp-dt-info-row:last-of-type { border-bottom: 0; } .ipie-pp-dt-info-row .material-symbols-rounded { font-size: 20px; color: #5b5b56; align-self: center; } .ipie-pp-dt-info-label { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #5b5b56; } .ipie-pp-dt-info-value { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: 400; overflow-wrap: anywhere; color: var(--pp-ink); font-size: 14px; } /* Tabular figures so the four visible digits line up between rails. */ .ipie-pp-dt-masked { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; white-space: nowrap; } /* Stars ---------------------------------------------------------- */ .ipie-pp-dt-stars { display: inline-flex; gap: 1px; } .ipie-pp-dt-star { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .ipie-pp-dt-star.is-full, .ipie-pp-dt-star.is-half { color: #d97706; } .ipie-pp-dt-star.is-empty { color: #d6d3cb; } /* Rating block --------------------------------------------------- */ .ipie-pp-dt-rating { padding: 1rem; } .ipie-pp-dt-rating-score { display: flex; align-items: center; gap: 0.6rem; } .ipie-pp-dt-rating-avg { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .ipie-pp-dt-rating-meta { margin-top: 0.4rem; font-size: 0.875rem; font-weight: 600; color: #5b5b56; } .ipie-pp-dt-empty { margin: 0; font-size: 0.9375rem; color: #5b5b56; } /* Latest review -------------------------------------------------- */ .ipie-pp-dt-review { padding: 1rem; } .ipie-pp-dt-review-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .ipie-pp-dt-review-date { font-size: 0.8125rem; color: #5b5b56; } .ipie-pp-dt-review-text { margin: 0; padding: 0; border: 0; font-size: 0.9375rem; font-style: italic; line-height: 1.5; color: #1f2937; } .ipie-pp-dt-review-by { margin: 0.6rem 0 0; font-size: 0.8125rem; font-weight: 800; color: #5b5b56; } /* Cancellation policy -------------------------------------------- */ .ipie-pp-dt-policy { padding: 1rem 1rem 1rem 1.1rem; } .ipie-pp-dt-policy-list { margin: 0; padding-left: 1.1rem; } .ipie-pp-dt-policy-list li { margin: 0.3rem 0; font-size: 0.9375rem; line-height: 1.5; color: #1f2937; } /* Header actions — public listing + report-incorrect ------------- */ .ipie-pp-dt-report { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; } /* The public-listing button is the secondary action of the pair: same shape and size as its sibling (the issue asked for "the same styling"), inverted so the report CTA still reads as primary. */ .ipie-pp-dt-report-btn--public { background: #fff; color: var(--pp-ink); } .ipie-pp-dt-report-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.95rem 1rem; font-size: 1.0625rem; font-weight: 800; text-decoration: none; border: 3px solid var(--pp-ink); border-radius: 12px; background: #db2777; color: #fff; } .ipie-pp-dt-report-btn .material-symbols-rounded { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-dt-report-note { margin: 0.6rem 0 0; font-size: 0.8125rem; color: #5b5b56; text-align: center; line-height: 1.5; } /* Support — status banner ---------------------------------------- */ .ipie-pp-sp-status { border: 3px solid var(--pp-ink); border-radius: 14px; padding: 1.1rem 1rem; text-align: center; margin-bottom: 1rem; } .ipie-pp-sp-status--open { background: #ecfdf5; } .ipie-pp-sp-status--closed { background: #fef2f2; } .ipie-pp-sp-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; background: #fff; border: 2px solid var(--pp-ink); border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; } .ipie-pp-sp-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; } .ipie-pp-sp-status--open .ipie-pp-sp-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2); } .ipie-pp-sp-status--closed .ipie-pp-sp-dot { background: #dc2626; } .ipie-pp-sp-state { margin: 0.75rem 0 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--pp-ink); } .ipie-pp-sp-hours { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #5b5b56; } /* Support — CTA -------------------------------------------------- */ .ipie-pp-sp-lead { margin: 0 0 0.9rem; font-size: 0.9375rem; color: #5b5b56; text-align: center; line-height: 1.5; } .ipie-pp-sp-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 1rem; font-size: 1.125rem; font-weight: 800; text-decoration: none; border: 3px solid var(--pp-ink); border-radius: 12px; background: #0891b2; color: #fff; } .ipie-pp-sp-btn .material-symbols-rounded { font-size: 22px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-sp-btn-end { margin-left: auto; } .ipie-pp-sp-unavailable { margin: 0; padding: 0.9rem 1rem; border: 2px dashed #d6d3cb; border-radius: 12px; font-size: 0.9375rem; color: #5b5b56; text-align: center; } /* ================================================================= * PP7 — Disbursements (D12) + Reporting (D13) * ================================================================= */ /* Shared empty state (disbursements/reporting no-data) ----------- */ .ipie-pp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; color: #5b5b56; } .ipie-pp-empty-icon { font-size: 2.5rem; color: #9ca3af; } /* ---- Disbursements: next-disbursement card (D12) --------------- */ .ipie-pp-db-next { text-align: center; background: #fff7f9; } .ipie-pp-db-next--neg { background: #fff7ed; } .ipie-pp-db-next-eyebrow { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; color: #9f1239; } .ipie-pp-db-next-date { margin-top: 0.35rem; font-size: 1.0625rem; font-weight: 700; color: #1f2937; } .ipie-pp-db-next-date--muted { color: #6b7280; font-weight: 600; } .ipie-pp-db-next-amount { margin: 0.5rem 0; font-size: 2.5rem; font-weight: 900; line-height: 1.1; color: var(--pp-ink); } .ipie-pp-db-next-caveat { margin: 0; font-size: 0.8125rem; color: #6b7280; } /* Negative-balance swap copy (D12) ------------------------------- */ .ipie-pp-db-neg { margin-top: 0.75rem; padding-top: 0.85rem; border-top: 2px dashed #fdba74; } .ipie-pp-db-neg .material-symbols-rounded { font-size: 1.75rem; color: #ea580c; } .ipie-pp-db-neg-lead { margin: 0.25rem 0 0; font-size: 0.95rem; color: #1f2937; } .ipie-pp-db-neg-lead strong { display: block; font-size: 1.5rem; font-weight: 900; color: #b91c1c; } .ipie-pp-db-neg-note { margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: #92400e; } /* Coloured ledger rows (D12) ------------------------------------- */ .ipie-pp-db-entries { background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; padding: 0.5rem 1rem; margin-bottom: 1rem; } .ipie-pp-db-entries-head { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; color: #6b7280; padding: 0.5rem 0 0.25rem; } .ipie-pp-db-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid #f0f0ee; } .ipie-pp-db-row:last-child { border-bottom: 0; } .ipie-pp-db-row-icon { font-size: 1.4rem; color: #4b5563; flex: 0 0 auto; } .ipie-pp-db-row-label { flex: 1 1 auto; font-size: 0.9375rem; color: #1f2937; } .ipie-pp-db-row-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.9375rem; } .ipie-pp-db-row-amt--pos { color: #15803d; } .ipie-pp-db-row-amt--neg { color: #b91c1c; } .ipie-pp-db-row--total { border-top: 3px solid var(--pp-ink); border-bottom: 0; margin-top: 0.25rem; padding-top: 0.75rem; } .ipie-pp-db-row--total .ipie-pp-db-row-label { font-weight: 800; } .ipie-pp-db-row--total .ipie-pp-db-row-amt { font-size: 1.0625rem; } .ipie-pp-db-noentries { margin: 0 0 1rem; padding: 0.85rem 1rem; font-size: 0.9375rem; color: #6b7280; text-align: center; } /* Past-disbursements accordion (D12) ----------------------------- */ .ipie-pp-db-history { background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; } .ipie-pp-db-history-summary { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; font-weight: 800; cursor: pointer; list-style: none; } .ipie-pp-db-history-summary::-webkit-details-marker { display: none; } .ipie-pp-db-history-chev { margin-left: auto; transition: transform 0.15s ease; } .ipie-pp-db-history[open] .ipie-pp-db-history-chev { transform: rotate(180deg); } .ipie-pp-db-history-list { border-top: 1px solid #e5e5e3; } .ipie-pp-db-hrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid #f0f0ee; } .ipie-pp-db-hrow-date { flex: 1 1 auto; font-size: 0.9375rem; color: #1f2937; } .ipie-pp-db-hrow-status { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: #f3f4f6; color: #4b5563; } .ipie-pp-db-hrow-status--completed { background: #dcfce7; color: #15803d; } .ipie-pp-db-hrow-status--failed { background: #fee2e2; color: #b91c1c; } .ipie-pp-db-hrow-status--processing { background: #fef9c3; color: #a16207; } .ipie-pp-db-hrow-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.9375rem; } .ipie-pp-db-history-more { display: block; text-align: center; padding: 0.85rem; font-weight: 700; color: #2563eb; text-decoration: none; border-top: 1px solid #e5e5e3; } /* ---- Reporting: period switcher + metric cards (D13) ----------- */ .ipie-pp-rp-switch { display: flex; gap: 0.4rem; margin-bottom: 1rem; background: #f3f4f6; border: 3px solid var(--pp-ink); border-radius: 999px; padding: 0.25rem; } .ipie-pp-rp-switch-opt { flex: 1 1 0; text-align: center; padding: 0.55rem 0.5rem; font-weight: 700; font-size: 0.9375rem; color: #4b5563; text-decoration: none; border-radius: 999px; } .ipie-pp-rp-switch-opt.is-active { background: #65a30d; color: #fff; } .ipie-pp-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1rem; } .ipie-pp-rp-card { display: flex; flex-direction: column; gap: 0.15rem; background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; padding: 1rem; } .ipie-pp-rp-card-icon { font-size: 1.6rem; color: #65a30d; margin-bottom: 0.25rem; } .ipie-pp-rp-card-value { font-size: 1.875rem; font-weight: 900; line-height: 1.1; color: var(--pp-ink); font-variant-numeric: tabular-nums; } /* Money card ("Pendapatan"): keep the currency label at the big value size but * drop the amount to the body font so large IDR figures fit the card. */ .ipie-pp-rp-card-value--money { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; } .ipie-pp-rp-cur { font-size: 1.875rem; font-weight: 900; line-height: 1.1; } .ipie-pp-rp-num { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; } .ipie-pp-rp-card-label { font-size: 0.9375rem; font-weight: 700; color: #1f2937; } .ipie-pp-rp-card-sub { font-size: 0.8125rem; color: #6b7280; } .ipie-pp-rp-foot { margin: 0; text-align: center; font-size: 0.8125rem; color: #6b7280; } /* ================================================================= * PP9 — Receive money (D7–D11). Function colour: tangerine #EA580C. * ================================================================= */ .ipie-pp-rc-lead { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 700; color: #1f2937; } /* "This guest already paid one" — the receipt, as a link above the category grid rather than a screen standing in front of it. Quieter than a booking row: it is a reference, not the thing the provider came here to do. */ .ipie-pp-rc-prevpaid { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.7rem 0.85rem; background: #ecfdf5; border: 3px solid var(--pp-ink); border-radius: 14px; text-decoration: none; color: #065f46; } .ipie-pp-rc-prevpaid-text { flex: 1 1 auto; font-size: 0.9375rem; font-weight: 800; } .ipie-pp-rc-prevpaid .material-symbols-rounded { font-size: 20px; flex: none; } /* Status badge on the link, when the settled invoice is not plain `paid` (a refund is in flight, or the money has already gone back). The shared badge rule aligns to flex-start, which reads as misaligned in this centred single-line row. */ .ipie-pp-rc-prevpaid .ipie-pp-rc-badge { align-self: center; } /* Shared booking chip ------------------------------------------- */ .ipie-pp-rc-bk { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .ipie-pp-rc-bk > .material-symbols-rounded { flex: none; font-size: 22px; color: #ea580c; } .ipie-pp-rc-bk-text { display: flex; flex-direction: column; min-width: 0; } .ipie-pp-rc-bk-name { font-size: 1rem; font-weight: 800; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ipie-pp-rc-bk-meta { font-size: 0.8125rem; color: #6b7280; } /* Booking picker ------------------------------------------------- */ .ipie-pp-rc-list { display: flex; flex-direction: column; gap: 0.75rem; } .ipie-pp-rc-bkrow { display: flex; align-items: center; gap: 0.6rem; padding: 1rem; background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; text-decoration: none; } .ipie-pp-rc-bkrow .ipie-pp-rc-bk { flex: 1 1 auto; } .ipie-pp-rc-tag { flex: none; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #92400e; background: #fef3c7; border: 2px solid var(--pp-ink); border-radius: 999px; } /* A refund in flight also blocks a second invoice, but it is money moving the OTHER way — it must not wear the amber "you are owed this" colour. Matches the `info` status badge used in the invoice history for the same state. */ .ipie-pp-rc-tag--refund { color: #1e40af; background: #dbeafe; } .ipie-pp-rc-chev { flex: none; color: #9ca3af; } /* Category grid (D7) -------------------------------------------- */ .ipie-pp-rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .ipie-pp-rc-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; aspect-ratio: 1 / 1; padding: 0.5rem; text-align: center; text-decoration: none; background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; color: var(--pp-ink); } .ipie-pp-rc-cat-icon { font-size: 34px; color: #ea580c; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 40; } .ipie-pp-rc-cat-label { font-size: 0.8125rem; font-weight: 800; line-height: 1.1; } /* Chosen-service strip (amount step) ---------------------------- */ .ipie-pp-rc-chosen { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.75rem; padding: 0.6rem 0.9rem; font-weight: 800; color: #7c2d12; background: #ffedd5; border: 3px solid var(--pp-ink); border-radius: 12px; } .ipie-pp-rc-chosen .material-symbols-rounded { font-size: 22px; color: #ea580c; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } /* Amount form --------------------------------------------------- */ .ipie-pp-rc-form { display: flex; flex-direction: column; } .ipie-pp-rc-flabel { margin: 0.5rem 0 0.35rem; font-size: 0.875rem; font-weight: 800; color: #1f2937; } .ipie-pp-rc-text, .ipie-pp-rc-amount { width: 100%; padding: 0.85rem 1rem; font-size: 1.125rem; font-weight: 700; color: var(--pp-ink); background: #fff; border: 3px solid var(--pp-ink); border-radius: 12px; box-sizing: border-box; } .ipie-pp-rc-amount { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; } .ipie-pp-rc-hint { margin: 0.4rem 0 0; font-size: 0.8125rem; color: #6b7280; } /* Field errors. `.ipie-pp-rc-err` is the receive screen's server-rendered amount error; `.ipie-pp-fielderr` is the same treatment applied by JS to any portal form, so an inline validation message looks identical wherever it appears rather than each screen inventing its own. */ .ipie-pp-rc-err, .ipie-pp-fielderr { margin: 0.6rem 0 0; padding: 0.6rem 0.85rem; font-size: 0.875rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 2px solid #b91c1c; border-radius: 10px; } /* The offending control itself, so the error is not carried by colour alone on the message. */ .ipie-pp-cancel-reason[aria-invalid='true'], .ipie-pp-rc-select[aria-invalid='true'], [data-pp-cancel-note] textarea[aria-invalid='true'] { border-color: #b91c1c; } /* Buttons ------------------------------------------------------- */ .ipie-pp-rc-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.0625rem; font-weight: 800; text-decoration: none; border: 3px solid var(--pp-ink); border-radius: 12px; box-sizing: border-box; cursor: pointer; } .ipie-pp-rc-btn .material-symbols-rounded { font-size: 22px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-rc-btn--primary { background: #ea580c; color: #fff; } .ipie-pp-rc-btn--ghost { background: #fff; color: var(--pp-ink); } .ipie-pp-rc-btn--wa { background: #16a34a; color: #fff; } .ipie-pp-rc-btn.is-busy { opacity: 0.6; pointer-events: none; } /* Review (D8/D9b) ----------------------------------------------- */ .ipie-pp-rc-review { margin-top: 1rem; } .ipie-pp-rc-rev-service { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 1.125rem; font-weight: 800; color: var(--pp-ink); } .ipie-pp-rc-rev-service .material-symbols-rounded { color: #ea580c; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-rc-rev-lines { margin: 0; } .ipie-pp-rc-rev-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; font-size: 1rem; } .ipie-pp-rc-rev-line dt { color: #4b5563; font-weight: 600; } .ipie-pp-rc-rev-line dd { margin: 0; font-weight: 800; color: var(--pp-ink); font-variant-numeric: tabular-nums; } /* A deduction from the provider's own money — the refund screen's clawback. */ .ipie-pp-rc-rev-line--minus dd { color: #b91c1c; } /* Commission added on top of what the provider entered. Not a loss to them, so it is deliberately not the --minus red; it stays the neutral ink of an ordinary line while the sign carries the meaning. */ .ipie-pp-rc-rev-line--plus dd { color: #4b5563; } .ipie-pp-rc-rev-line--total { margin-top: 0.25rem; padding-top: 0.6rem; border-top: 2px solid var(--pp-ink); font-size: 1.125rem; } .ipie-pp-rc-rev-line--total dt, .ipie-pp-rc-rev-line--total dd { font-weight: 900; color: var(--pp-ink); } .ipie-pp-rc-rev-guest { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 2px dashed #d6d3cb; } .ipie-pp-rc-rev-guest-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; } .ipie-pp-rc-rev-guest-amt { font-size: 1.5rem; font-weight: 900; color: var(--pp-ink); font-variant-numeric: tabular-nums; } .ipie-pp-rc-rev-rate { font-size: 0.8125rem; color: #6b7280; } /* Show — QR + actions ------------------------------------------- */ .ipie-pp-rc-showhead { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; padding: 0.75rem 1rem; background: #ffedd5; border: 3px solid var(--pp-ink); border-radius: 12px; } .ipie-pp-rc-showhead > .material-symbols-rounded { font-size: 24px; color: #ea580c; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; } .ipie-pp-rc-showhead-label { font-weight: 800; color: #7c2d12; } .ipie-pp-rc-showhead-amt { margin-left: auto; font-size: 1.25rem; font-weight: 900; color: var(--pp-ink); font-variant-numeric: tabular-nums; } .ipie-pp-rc-qrwrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1rem; padding: 1.25rem; background: #fff; border: 3px solid var(--pp-ink); border-radius: 16px; } .ipie-pp-rc-qr { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .ipie-pp-rc-qr svg { width: 100%; height: 100%; display: block; } .ipie-pp-rc-qrhint { margin: 0; font-size: 0.9375rem; font-weight: 700; color: #1f2937; text-align: center; } .ipie-pp-rc-expiry { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 700; color: #92400e; } .ipie-pp-rc-expiry .material-symbols-rounded { font-size: 20px; } .ipie-pp-rc-expiry.is-expired { color: #b91c1c; } .ipie-pp-rc-showactions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1.25rem; } .ipie-pp-rc-cancelform { margin: 0; } .ipie-pp-rc-link { background: none; border: none; padding: 0.35rem 0.5rem; font-size: 0.9375rem; font-weight: 700; color: #6b7280; text-decoration: underline; cursor: pointer; } .ipie-pp-rc-link--danger { color: #b91c1c; } .ipie-pp-rc-link.is-busy { opacity: 0.6; pointer-events: none; } /* Empty / closed states ----------------------------------------- */ .ipie-pp-rc-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; color: #5b5b56; } .ipie-pp-rc-empty-icon { font-size: 40px; color: #9ca3af; } /* Paid confirmation ------------------------------------------------ Replaces the QR block outright rather than restyling it. The tester could not tell what was supposed to change when an invoice was paid, so this is deliberately the loudest thing on the screen: full-width green panel, large tick, the amount in display size. Read across a counter, at arm's length. */ .ipie-pp-rc-paid { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 1rem 0; padding: 1.5rem 1rem; background: #dcfce7; border: 3px solid var(--pp-ink); border-radius: 12px; text-align: center; } .ipie-pp-rc-paid-icon { font-size: 56px; color: #15803d; } .ipie-pp-rc-paid-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: #14532d; } /* Reached for a refunded / refund-pending invoice too, so the receipt states which it is. Absent on a plain paid one — the card already says that. */ .ipie-pp-rc-paid-state { margin: 0; } .ipie-pp-rc-paid-state .ipie-pp-rc-badge { align-self: center; } .ipie-pp-rc-paid-amt { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: #14532d; font-variant-numeric: tabular-nums; } .ipie-pp-rc-paid-payout, .ipie-pp-rc-paid-meta { margin: 0; font-size: 0.875rem; color: #166534; } .ipie-pp-rc-paid-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .ipie-pp-rc-expired .ipie-pp-rc-empty-icon { color: #b91c1c; } /* PP10 — invoice history list + refund request ------------------- */ .ipie-pp-rc-history-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; padding: 0.5rem 0.25rem; font-size: 0.9375rem; font-weight: 800; color: #0f172a; text-decoration: underline; } .ipie-pp-rc-history-link .material-symbols-rounded { font-size: 20px; } .ipie-pp-rc-invlist { display: flex; flex-direction: column; gap: 0.75rem; } .ipie-pp-rc-invrow { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; background: #fff; border: 3px solid var(--pp-ink); border-radius: 14px; } .ipie-pp-rc-invrow-main { display: flex; align-items: center; gap: 0.6rem; } .ipie-pp-rc-invrow-icon { flex: none; font-size: 26px; color: #ea580c; } .ipie-pp-rc-invrow-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .ipie-pp-rc-invrow-label { font-weight: 800; color: var(--pp-ink); } .ipie-pp-rc-invrow-meta { font-size: 0.8125rem; color: #6b7280; } .ipie-pp-rc-invrow-amts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; } .ipie-pp-rc-invrow-payout { font-weight: 800; color: var(--pp-ink); } .ipie-pp-rc-invrow-guest { font-size: 0.8125rem; color: #6b7280; } .ipie-pp-rc-invrow-denied { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0; font-size: 0.8125rem; font-weight: 700; color: #b91c1c; } .ipie-pp-rc-invrow-denied .material-symbols-rounded { font-size: 18px; } /* status badge */ .ipie-pp-rc-badge { flex: none; align-self: flex-start; padding: 0.2rem 0.55rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border: 2px solid var(--pp-ink); border-radius: 999px; white-space: nowrap; } .ipie-pp-rc-badge--ok { color: #065f46; background: #d1fae5; } .ipie-pp-rc-badge--warn { color: #92400e; background: #fef3c7; } .ipie-pp-rc-badge--info { color: #1e40af; background: #dbeafe; } .ipie-pp-rc-badge--muted { color: #374151; background: #e5e7eb; } /* refund form */ .ipie-pp-rc-select { width: 100%; margin-bottom: 1rem; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600; background: #fff; border: 3px solid var(--pp-ink); border-radius: 12px; box-sizing: border-box; } .ipie-pp-rc-btn--danger { background: #b91c1c; color: #fff; }