/** * 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 55-glyph subset (~46 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). */ @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") 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: "Inter", 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: default; } .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; } .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; } /* 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; } /* 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; } .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-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; } /* 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; } /* Report-incorrect CTA ------------------------------------------- */ .ipie-pp-dt-report { margin-top: 1.25rem; } .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; } /* 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; } .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; } .ipie-pp-rc-err { 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; } /* 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; } .ipie-pp-rc-rev-line--minus dd { color: #b91c1c; } .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; } .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; }