/* assets/css/app.css */
/*
 * OlaConvite - mobiele schil (includes/app_nav.php): op de telefoon en in de app (html.oc-movel, gezet in
 * includes/header.php en assets/js/app.js: ingelogd en de app of een scherm tot 720 px). Een smalle balk bovenin met
 * terug en titel, een balk van glas onderin (zoals de tab bar van iOS 26: een zwevende capsule, wazig erachter, het
 * gekozen item in een lens), het paneel "Mais" zoals Instellingen van iOS, tabellen van de admin als kaarten.
 * Ook het kaartje "Instale o app" (dashboard.php) en de pagina zonder internet (offline.html). Tokens --oc-* van main.css.
 * De bel met het aantal nieuwe avisos (bovenin en in het menu van de site) en de caixa de avisos (avisos.php).
 */

:root {
    --oc-glass-blur: 24px;
    --oc-glass-shade: rgba(26, 18, 9, .16);
    --oc-glass-bar: 420px;
    --oc-appbar-h: 4rem;
}

/* ---- buiten de mobiele schil staat niets hiervan ---- */
.oc-apptop,
.oc-appbar {
    display: none;
}

/* ---- de pagina in de mobiele schil ---- */
.oc-movel .oc-nav,
.oc-movel .oc-footer,
.oc-movel .oc-adm-nav {
    display: none;
}
.oc-movel body {
    padding-bottom: calc(var(--oc-appbar-h) + 1.75rem + env(safe-area-inset-bottom, 0px));
}
.oc-movel .oc-main {
    padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 1.5rem max(1rem, env(safe-area-inset-left, 0px));
}
.oc-movel .oc-page-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
}
.oc-movel .oc-page-header__title {
    font-size: 1.625rem;
}
.oc-movel .oc-main code {
    overflow-wrap: anywhere;
}
/* alles past op de breedte van de telefoon (nagelopen op 360 en 375 px): een knop breekt zijn tekst af in plaats van
   buiten de kaart te lopen, een kolom met span 2 maakt geen lege tweede kolom, het adres in Meu perfil op twee regels */
.oc-movel .oc-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.oc-movel .oc-grid > [style*="grid-column:span"] {
    grid-column: auto !important;
}
.oc-movel .oc-main [style*="grid-template-columns:1fr 80px 110px"] {
    grid-template-columns: 1fr 1fr !important;
}
.oc-movel .oc-main [style*="grid-template-columns:1fr 80px 110px"] > :first-child {
    grid-column: 1 / -1;
}
.oc-movel .ocmural-qr > * {
    min-width: 0;
}
/* de terugknop staat al bovenin */
.oc-movel .oc-page-header a[href="/dashboard.php"].oc-btn--ghost {
    display: none;
}
/* Meus convites: de cijfers als 2 x 2 */
.oc-movel .oc-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.oc-movel .oc-stat {
    gap: .75rem;
    padding: .875rem 1rem;
}
.oc-movel .oc-stat__icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
}
.oc-movel .oc-stat__value {
    font-size: 1.5rem;
}
.oc-app body {
    -webkit-tap-highlight-color: transparent;
}
/* de iPhone-app uit de store vernieuwt zelf (UIRefreshControl): daar mag de pagina doorveren; elders vernieuwt
   assets/js/app.js (oc-ptr) en blijft het scherm stil staan */
.oc-app:not(.oc-ptr-nativo) body {
    overscroll-behavior-y: contain;
}

/* ---- balk bovenin: terug, titel ---- */
.oc-movel .oc-apptop {
    position: sticky;
    top: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    min-height: 3.25rem;
    padding: env(safe-area-inset-top, 0px) max(.5rem, env(safe-area-inset-right, 0px)) 0 max(.5rem, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--oc-border);
    background: var(--oc-cream);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-movel .oc-apptop {
        border-bottom-color: rgba(224, 216, 204, .7);
        background: rgba(250, 247, 242, .72);
        -webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%);
        backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%);
    }
}
.oc-apptop__voltar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--oc-gold-dark);
}
.oc-apptop__voltar:active {
    background: rgba(201, 168, 76, .15);
}
.oc-apptop__voltar svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-apptop__titulo {
    transition: opacity .2s;
    overflow: hidden;
    font-family: var(--oc-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--oc-ink);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* zoals iOS: de titel bovenin komt pas als de grote titel van de pagina uit beeld is (assets/js/app.js) */
.oc-apptop--groot .oc-apptop__titulo {
    opacity: 0;
}

/* ---- balk van glas onderin ---- */
.oc-movel .oc-appbar {
    position: fixed;
    right: 0;
    bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 200;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: min(var(--oc-glass-bar), calc(100% - 1.5rem));
    margin: 0 auto;
    padding: .3125rem;
    border: 1px solid var(--oc-border);
    border-radius: 999px;
    background: var(--oc-white);
    box-shadow: 0 .5rem 1.5rem var(--oc-glass-shade);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-movel .oc-appbar {
        border-color: rgba(255, 255, 255, .65);
        background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            inset 0 -1px 0 rgba(26, 18, 9, .06),
            0 .5rem 1.5rem var(--oc-glass-shade);
        -webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(200%);
        backdrop-filter: blur(var(--oc-glass-blur)) saturate(200%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    .oc-movel .oc-appbar {
        border-color: var(--oc-border);
        background: var(--oc-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.oc-appbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .0625rem;
    min-width: 0;
    min-height: 3.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 600;
    color: var(--oc-ink-soft);
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, color .2s;
}
.oc-appbar__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-appbar__ico {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-appbar__item[aria-current="page"] {
    border-color: rgba(255, 255, 255, .85);
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
    box-shadow: inset 0 1px 0 #fff, 0 2px .5rem var(--oc-glass-shade);
    color: var(--oc-gold-dark);
}
.oc-appbar__item[aria-current="page"] .oc-appbar__ico {
    stroke-width: 2.4;
}
.oc-appbar__item:active {
    transform: scale(.94);
}

/* de app uit de stores tekent de balk zelf (native, Liquid Glass op iOS 26): dan staat de eigen balk er niet */
.oc-movel.oc-abas-app .oc-appbar {
    display: none;
}
/* passo a passo: geen balk onderin, Voltar en Continuar staan daar (assets/css/convite-assistente.css) */
.oc-movel:has(.oc-ast) .oc-appbar {
    display: none;
}
.oc-movel:has(.oc-ast) body {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));   /* ruimte voor de vaste balk Voltar / Continuar */
}
/* typen: het toetsenbord duwt een vaste balk onderin mee omhoog (app op het beginscherm, Safari); zolang een tekstveld
   de focus heeft staat de balk er niet */
.oc-movel:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=color]):not([type=range]):focus, textarea:focus, select:focus, [contenteditable]:focus) .oc-appbar {
    display: none;
}
.oc-abas-app.oc-movel body {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ---- paneel Mais ---- */
.oc-sheet-fundo {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    background: rgba(26, 18, 9, .35);
}
.oc-sheet-fundo[hidden] {
    display: none;
}
.oc-sheet {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--oc-border);
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--oc-cream);
    animation: oc-sheet-in .25s ease-out;
}
@keyframes oc-sheet-in {
    from { transform: translateY(40%); opacity: .4; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .oc-sheet { animation: none; }
}
.oc-sheet__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.oc-sheet__kopnaam {
    margin: 0;
    font-family: var(--oc-font-display);
    font-size: 1.375rem;
    color: var(--oc-ink);
}
.oc-sheet__perfil {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .875rem 1rem;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    background: var(--oc-white);
}
.oc-sheet__nome {
    font-weight: 700;
    color: var(--oc-ink);
}
.oc-sheet__papel {
    font-size: .875rem;
    color: var(--oc-muted);
}
.oc-sheet__grupo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.oc-sheet__titulo {
    margin: 0;
    padding: 0 1rem;
    font-family: var(--oc-font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oc-muted);
}
.oc-sheet__lista {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    background: var(--oc-white);
}
.oc-sheet__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oc-ink);
    text-decoration: none !important;
}
.oc-sheet__item + .oc-sheet__item {
    border-top: 1px solid var(--oc-border);
}
.oc-sheet__item:active {
    background: rgba(201, 168, 76, .12);
}
.oc-sheet__texto {
    flex: 1 1 auto;
    min-width: 0;
}
.oc-sheet__seta {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--oc-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-sheet__item[aria-current="page"] {
    color: var(--oc-gold-dark);
}
.oc-sheet__item:hover {
    color: var(--oc-ink);
}
.oc-sheet__item--perigo,
.oc-sheet__item--perigo:hover {
    color: #b91c1c;
}
.oc-sheet-open {
    overflow: hidden;
}

/* ---- tabellen van de admin als kaarten (assets/js/app.js zet oc-table--kaart en data-label) ---- */
.oc-movel .oc-table--kaart thead {
    display: none;
}
.oc-movel .oc-table--kaart,
.oc-movel .oc-table--kaart tbody,
.oc-movel .oc-table--kaart tr,
.oc-movel .oc-table--kaart td {
    display: block;
    width: 100%;
}
.oc-movel .oc-table--kaart tr {
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    background: var(--oc-white);
}
.oc-movel .oc-table--kaart td {
    position: relative;
    min-height: 1.75rem;
    padding: .375rem 0 .375rem 6.75rem !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
}
.oc-movel .oc-table--kaart td::before {
    content: attr(data-label);
    position: absolute;
    top: .5rem;
    left: 0;
    width: 6.25rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--oc-muted);
}
.oc-movel .oc-table--kaart td[data-label=""] {
    padding-left: 0 !important;
}
.oc-movel .oc-table--kaart td[data-label=""]::before {
    display: none;
}
.oc-movel .oc-table-wrap:has(.oc-table--kaart),
.oc-movel .oc-card:has(> .oc-table--kaart) {
    overflow: visible;
}

/* ---- kaartje "Instale o app" (Meus convites) ---- */
.oc-instalar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--oc-gold-light);
    border-radius: var(--oc-radius);
    background: var(--oc-white);
    box-shadow: var(--oc-shadow-sm);
}
.oc-instalar[hidden] {
    display: none;
}
.oc-instalar img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 11px;
}
.oc-instalar__txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    color: var(--oc-ink-soft);
}
.oc-instalar__txt strong {
    display: block;
    font-family: var(--oc-font-display);
    font-size: 1rem;
    color: var(--oc-ink);
}
.oc-instalar__ios,
.oc-instalar [data-ocapp-instalar-sim] {
    display: none;
}
.oc-instalar[data-modo="ios"] .oc-instalar__ios {
    display: block;
}
.oc-instalar[data-modo="android"] [data-ocapp-instalar-sim] {
    display: inline-flex;
}
.oc-instalar__fechar {
    flex: 0 0 auto;
    align-self: flex-start;
    border: 0;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--oc-muted);
    cursor: pointer;
}
@media (max-width: 480px) {
    .oc-instalar { flex-wrap: wrap; }
    .oc-instalar__txt { flex-basis: calc(100% - 6rem); }
}

/* ---- pagina sem internet ---- */
.oc-offline {
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
}
.oc-offline__box {
    max-width: 22rem;
}
.oc-offline__box img {
    border-radius: 16px;
}
.oc-offline__box h1 {
    margin: 1.25rem 0 .5rem;
    font-family: var(--oc-font-display);
    font-size: 1.75rem;
}
.oc-offline__box p {
    margin-bottom: 1.5rem;
    color: var(--oc-ink-soft);
    line-height: 1.6;
}

/* ---- Meu perfil > Avisos no celular (assets/js/push.js) ---- */
.oc-push[hidden] {
    display: none;
}
.oc-push__txt,
.oc-push__estado {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: var(--oc-ink-soft);
}
.oc-push__estado {
    font-weight: 600;
    color: var(--oc-ink);
}
.oc-push__bts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.oc-push__tipos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.oc-push__tipo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    cursor: pointer;
}
.oc-push__tipo input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--oc-gold-dark);
}
.oc-push__msg {
    min-height: 1.25rem;
    margin: .75rem 0 0;
    font-size: .875rem;
    color: #166534;
}
.oc-push__msg--erro {
    color: #b91c1c;
}
/* een knop met hidden blijft weg (.oc-btn zet zelf display) */
.oc-push__bts[hidden],
.oc-push__bts [hidden] {
    display: none !important;
}
/* in de schil: wat je ontvangt als schakelaars zoals in iOS */
.oc-movel .oc-push__tipos {
    gap: 0;
}
.oc-movel .oc-push__tipo {
    flex-direction: row-reverse;
    justify-content: space-between;
    min-height: 3rem;
    border-bottom: 1px solid var(--oc-groep-lijn);
    font-size: 1rem;
}
.oc-movel .oc-push__tipo:last-child {
    border-bottom: 0;
}
.oc-movel .oc-push__tipo input {
    position: relative;
    flex: none;
    width: 3.125rem;
    height: 1.875rem;
    margin: 0;
    border-radius: 1rem;
    background: #E2DCD2;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color .2s;
}
.oc-movel .oc-push__tipo input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s;
}
.oc-movel .oc-push__tipo input:checked {
    background: var(--oc-gold);
}
.oc-movel .oc-push__tipo input:checked::before {
    transform: translateX(1.25rem);
}
@media (prefers-reduced-motion: reduce) {
    .oc-movel .oc-push__tipo input,
    .oc-movel .oc-push__tipo input::before {
        transition: none;
    }
}

/* ---- de bel: balk bovenin en het menu van de site (includes/app_nav.php oc_app_sino) ---- */
.oc-sino {
    position: relative;
}
.oc-nav__links .oc-sino {
    display: inline-flex;
    align-items: center;
    padding: .375rem .5rem;
    color: var(--oc-ink-soft);
}
.oc-nav__links .oc-sino svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-sino__n {
    position: absolute;
    top: .25rem;
    right: .125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3rem;
    border: 2px solid var(--oc-cream);
    border-radius: 99px;
    background: #d93a2b;
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    line-height: .875rem;
    text-align: center;
}
.oc-nav__links .oc-sino__n {
    top: -.125rem;
    right: -.125rem;
    border-color: var(--oc-white);
}
.oc-sino__n[hidden] {
    display: none;
}

/* ---- caixa de avisos (avisos.php, assets/js/avisos.js) ---- */
.oc-avisos {
    max-width: 44rem;
}
.oc-avisos__vazio {
    padding: 2.5rem 1.25rem;
    border: 1px dashed var(--oc-border);
    border-radius: var(--oc-radius-lg);
    color: var(--oc-muted);
    font-size: .9375rem;
    text-align: center;
}
.oc-avisos__vazio[hidden] {
    display: none;
}
.oc-avisos__lista {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-white);
    list-style: none;
}
.oc-aviso {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--oc-border);
    transition: opacity .2s, transform .2s;
}
.oc-aviso:first-child {
    border-top: 0;
}
.oc-aviso--novo {
    background: #fffaf0;
}
.oc-aviso--saindo {
    opacity: 0;
    transform: translateX(-1.5rem);
}
.oc-aviso__link {
    display: flex;
    flex: 1;
    gap: .875rem;
    min-width: 0;
    padding: .875rem 0 .875rem 1rem;
    color: inherit;
    text-decoration: none !important;
}
.oc-aviso__link:active {
    background: rgba(201, 168, 76, .1);
}
.oc-aviso__ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--oc-cream-dark);
    color: var(--oc-gold-dark);
}
.oc-aviso__ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-aviso__ico--rsvp {
    background: #e7f5ec;
    color: #166534;
}
.oc-aviso__ico--presente,
.oc-aviso__ico--pagamento,
.oc-aviso__ico--adm_pagamento {
    background: #fdf3dc;
    color: var(--oc-gold-dark);
}
.oc-aviso__ico--mural {
    background: #eef2fb;
    color: #3b5bab;
}
.oc-aviso__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}
.oc-aviso__topo {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.oc-aviso__titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--oc-ink);
    font-size: .9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-aviso__quando {
    flex: none;
    color: var(--oc-muted);
    font-size: .75rem;
}
.oc-aviso__texto {
    color: var(--oc-ink-soft);
    font-size: .875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.oc-aviso__novo {
    align-self: flex-start;
    margin-top: .25rem;
    padding: .0625rem .5rem;
    border-radius: 99px;
    background: #d93a2b;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.oc-aviso__apagar {
    display: flex;
    margin: 0;
}
.oc-aviso__x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    border: 0;
    background: none;
    color: var(--oc-muted);
    cursor: pointer;
}
.oc-aviso__x:hover,
.oc-aviso__x:focus-visible {
    color: #b91c1c;
}
.oc-aviso__x svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-avisos__tudo {
    margin: 1rem 0 0;
    text-align: center;
}
/* in de schil: vegen om weg te halen (assets/js/avisos.js); rood "Apagar" achter de regel, geen prullenbakje */
.oc-movel .oc-avisos__lista {
    border: 0;
    border-radius: 14px;
}
.oc-movel .oc-aviso {
    position: relative;
    border-top-color: var(--oc-groep-lijn);
    background: #c0392b;
}
.oc-movel .oc-aviso::before {
    content: "Apagar";
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
}
.oc-movel .oc-aviso__link {
    position: relative;
    z-index: 1;
    padding-right: 1rem;
    background: var(--oc-white);
}
.oc-movel .oc-aviso--novo .oc-aviso__link {
    background: #fffaf0;
}
.oc-movel .oc-aviso__apagar {
    display: none;
}
/* in de app geen dubbeltik-zoom (het knijpen zet includes/header.php uit, alleen in de app) */
.oc-app,
.oc-app body {
    touch-action: manipulation;
}
.oc-apptop .oc-sino svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* ---- de app voor het inloggen (html.oc-app, nog niet ingelogd): Entrar, Criar conta en Esqueci minha senha als een
   scherm van de app: geen menu en voet van de site, het icoon van de app, het formulier op glas; Entrar past zonder
   scrollen op een iPhone ---- */
.oc-app:not(.oc-logado) .oc-nav,
.oc-app:not(.oc-logado) .oc-footer,
.oc-app:not(.oc-logado) .oc-auth-card__ornament {
    display: none;
}
.oc-app:not(.oc-logado) body {
    min-height: 100vh;
    background: #efe4cc radial-gradient(120% 60% at 50% 0%, #fffaf0 0%, var(--oc-cream) 55%, #efe4cc 100%) no-repeat;
    background-size: 100% 100vh;
}
.oc-app:not(.oc-logado) .oc-main:has(> .oc-auth-wrap) {
    padding: 0;                 /* het scherm van de app vult zelf het beeld */
}
.oc-app:not(.oc-logado) .oc-auth-wrap {
    box-sizing: border-box;
    flex-direction: column;
    gap: .875rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) max(1.25rem, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 1rem) max(1.25rem, env(safe-area-inset-left, 0px));
}
.oc-app:not(.oc-logado) .oc-auth-wrap::before {
    content: '';
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: url(/assets/img/app/icon-192.png) center / cover no-repeat;
    box-shadow: 0 10px 24px rgba(154, 122, 48, .32);
}
.oc-app:not(.oc-logado) .oc-auth-card {
    max-width: 420px;
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 26px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 48px var(--oc-glass-shade);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-app:not(.oc-logado) .oc-auth-card {
        background: rgba(255, 255, 255, .62);
        -webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%);
        backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%);
    }
}
.oc-app:not(.oc-logado) .oc-auth-card__title {
    margin-bottom: .25rem;
    font-size: 1.625rem;
}
.oc-app:not(.oc-logado) .oc-auth-card__sub {
    margin-bottom: 1.25rem;
    font-size: .8125rem;
}
.oc-app:not(.oc-logado) .oc-auth-card .oc-form-group {
    margin-bottom: 1rem;
}
.oc-app:not(.oc-logado) .oc-auth-card .oc-label {
    margin-bottom: .375rem;
}
.oc-app:not(.oc-logado) .oc-auth-card .oc-input {
    min-height: 2.875rem;
    border-radius: 14px;
    font-size: 1rem;            /* 16 px: de iPhone zoomt dan niet in bij het typen */
}
.oc-app:not(.oc-logado) .oc-auth-card .oc-btn--primary {
    width: 100%;
    min-height: 3rem;
    margin-top: .25rem;
    border-radius: 99px;
}
.oc-app:not(.oc-logado) .oc-auth-divider {
    margin: 1rem 0;
}

/* ---- omlaag trekken om te vernieuwen (assets/js/app.js), in de app op het beginscherm en de Android-app ---- */
.oc-ptr {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + .75rem);
    left: 50%;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-left: -1.625rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: var(--oc-gold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    color: #fff;
    opacity: 0;
    transform: translateY(-3rem);
    pointer-events: none;
}
.oc-movel .oc-ptr {
    top: calc(env(safe-area-inset-top, 0px) + 3.75rem);       /* onder de balk bovenin */
}
.oc-ptr svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* voorbij de drempel: donkerder goud (de pijl draait mee via assets/js/app.js) */
.oc-ptr--klaar,
.oc-ptr--bezig {
    border-color: var(--oc-gold-dark);
    background: var(--oc-gold-dark);
}
.oc-ptr--bezig {
    opacity: 1;
    transform: none;
    transition: transform .2s;
}
.oc-ptr--bezig svg {
    animation: oc-ptr-draai .8s linear infinite;
}
@keyframes oc-ptr-draai {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .oc-ptr--bezig svg { animation: none; }
}

/* ==== Fase 1: de pagina's in de mobiele schil als schermen van een app (html.oc-movel) ====
   Een grijzere grond met witte groepen zoals Instellingen van iOS, de grote titel zonder lijn, kaarten zonder kader en
   schaduw (een kaart in een kaart wordt een deel van de groep), velden die bij de app passen, een knop voor een
   bestand (assets/js/app.js), ingedrukt in plaats van hover, en schermen die in elkaar overlopen. De site op een groot
   scherm blijft zoals hij was. */
.oc-movel {
    --oc-grond: #F3EFE8;
    --oc-groep-lijn: #EEE8DE;
    background: var(--oc-grond);
}
.oc-movel body {
    background: var(--oc-grond);
    -webkit-tap-highlight-color: transparent;
    font-size: 1rem;
}
.oc-movel .oc-apptop {
    border-bottom-color: transparent;
    background: var(--oc-grond);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-movel .oc-apptop {
        background: rgba(243, 239, 232, .78);
    }
    .oc-movel .oc-apptop:not(.oc-apptop--groot) {
        border-bottom-color: rgba(214, 204, 188, .6);
    }
}

/* grote titel: links, zonder lijn eronder; knoppen ernaast worden kleine knoppen op de regel eronder */
.oc-movel .oc-page-header {
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: 0;
}
.oc-movel .oc-page-header__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}
.oc-movel .oc-page-header__sub {
    margin-top: .25rem;
    font-size: .9375rem;
}

/* groepen: wit op de grond, zonder kader of schaduw */
.oc-movel .oc-card,
.oc-movel .oc-stat {
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    padding: 1rem;
}
.oc-movel .oc-card:hover,
.oc-movel .oc-stat:hover {
    box-shadow: none;
}
.oc-movel .oc-card .oc-card {
    margin: 0;
    padding: .875rem 0;
    border-radius: 0;
    border-top: 1px solid var(--oc-groep-lijn);
    background: transparent;
}
.oc-movel .oc-card .oc-card:first-child {
    border-top: 0;
}
.oc-movel .oc-card__title {
    margin-bottom: .875rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* velden zoals in een app: gevuld, zonder kader, 16 px (de iPhone zoomt dan niet in), label zonder hoofdletters */
.oc-movel .oc-form-group {
    margin-bottom: 1.125rem;
}
.oc-movel .oc-label {
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--oc-ink-soft);
}
.oc-movel .oc-input,
.oc-movel .oc-select,
.oc-movel .oc-textarea {
    min-height: 2.875rem;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background-color: #F6F2EC;
    font-size: 1rem;
}
.oc-movel .oc-input:focus,
.oc-movel .oc-select:focus,
.oc-movel .oc-textarea:focus {
    border-color: var(--oc-gold);
    background-color: var(--oc-white);
    box-shadow: none;
}
.oc-movel .oc-card .oc-input,
.oc-movel .oc-card .oc-select,
.oc-movel .oc-card .oc-textarea {
    background-color: #F6F2EC;
}

/* een bestand kiezen: een knop met de naam van het gekozen bestand (assets/js/app.js maakt het label) */
.oc-movel .oc-arquivo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.oc-arquivo {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: .375rem .375rem .375rem .875rem;
    border-radius: 12px;
    background: #F6F2EC;
    cursor: pointer;
}
.oc-arquivo__nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--oc-muted);
    font-size: .9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-arquivo--gekozen .oc-arquivo__nome {
    color: var(--oc-ink);
}
.oc-arquivo__bt {
    flex: none;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--oc-white);
    color: var(--oc-gold-dark);
    font-size: .9375rem;
    font-weight: 600;
}
.oc-arquivo__input:focus-visible + .oc-arquivo {
    outline: 2px solid var(--oc-gold);
    outline-offset: 2px;
}

/* knoppen: groter om te tikken, ingedrukt in plaats van hover */
.oc-movel .oc-btn {
    min-height: 2.75rem;
    border-radius: 12px;
    transition: transform .12s, background-color .12s, opacity .12s;
}
.oc-movel .oc-btn--sm {
    min-height: 2.25rem;
    padding: .4375rem .875rem;
    border-radius: 999px;
    font-size: .875rem;
}
.oc-movel .oc-btn:hover {
    transform: none;
    box-shadow: none;
}
.oc-movel .oc-btn--outline:hover {
    background: transparent;
    color: var(--oc-gold-dark);
}
.oc-movel .oc-btn--ghost {
    border-color: transparent;
    background: var(--oc-white);
    color: var(--oc-ink-soft);
}
.oc-movel .oc-card .oc-btn--ghost {
    background: var(--oc-grond);
}
.oc-movel .oc-btn:active {
    transform: scale(.97);
    opacity: .85;
}
.oc-movel a:hover {
    color: var(--oc-gold-dark);
}
.oc-movel .oc-btn,
.oc-movel .oc-appbar,
.oc-movel .oc-apptop,
.oc-movel .oc-sheet__item,
.oc-movel .oc-badge {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* meldingen bovenin: als een groep, niet als een balk van de site */
.oc-movel .oc-alert {
    border: 0;
    border-radius: 14px;
}
.oc-movel .oc-main > .oc-alert,
.oc-movel body > div:has(> .oc-alert) {
    padding-top: .75rem !important;
}

/* schermen lopen in elkaar over (Safari 18.2+, Chrome 126+): het nieuwe scherm schuift een stukje in, de balken blijven
   staan; zonder ondersteuning gewoon de volgende pagina. Aangezet in includes/header.php, alleen ingelogd op de telefoon
   (@view-transition), zodat de site voor bezoekers niets verandert */
.oc-movel .oc-apptop {
    view-transition-name: oc-apptop;
}
.oc-movel .oc-appbar {
    view-transition-name: oc-appbar;
}
::view-transition-old(root) {
    animation: oc-vt-uit .18s ease-in both;
}
::view-transition-new(root) {
    animation: oc-vt-in .24s ease-out both;
}
@keyframes oc-vt-uit {
    to { opacity: 0; }
}
@keyframes oc-vt-in {
    from { opacity: 0; transform: translateX(1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ---- fase 2: Meus convites als lijst (dashboard.php); de cijfers, de kaart met knoppen en "+ Novo convite" van de
   site staan in de schil niet ---- */
.oc-mlista {
    display: none;
}
.oc-movel .oc-dash-desk {
    display: none;
}
.oc-movel .oc-mlista {
    display: block;
}
.oc-mlista__resumo {
    margin: -.5rem 0 1rem;
    font-size: .9375rem;
    color: var(--oc-muted);
}
.oc-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 0 0 1rem;
    padding: 3px;
    border-radius: 10px;
    background: #E7E0D5;
}
.oc-seg__bt {
    min-height: 2rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font: 500 .875rem var(--oc-font-body);
    color: var(--oc-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.oc-seg__bt[aria-pressed="true"] {
    background: var(--oc-white);
    font-weight: 600;
    color: var(--oc-ink);
    box-shadow: 0 1px 3px rgba(26, 18, 9, .12);
}
.oc-seg__n {
    color: var(--oc-muted);
    font-weight: 500;
}
.oc-mlista__grupo {
    overflow: hidden;
    border-radius: 14px;
    background: var(--oc-white);
}
.oc-mlista__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: -1px;
    padding: .75rem .875rem;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.oc-mlista__item[hidden] {
    display: none;
}
/* lijn tussen de regels, vanaf de tekst (zoals iOS); de laatste valt weg door margin-bottom -1px */
.oc-mlista__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 4.75rem;
    height: 1px;
    background: var(--oc-groep-lijn);
}
.oc-mlista__item:active {
    background: #F6F2EC;
}
.oc-mlista__thumb {
    flex: none;
    width: 52px;
    height: 64px;
    overflow: hidden;
    border: 1px solid #E6DED2;
    border-radius: 8px;
    background: var(--oc-cream-dark);
}
/* a capa do convite em miniatura: a previa (432 x 540) reduzida para o quadro */
.oc-resumo__capa,
.oc-mlista__thumb {
    position: relative;
}
.oc-capa-mini {
    position: absolute;
    top: 0;
    left: 0;
    width: 432px;
    height: 540px;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}
.oc-resumo__capa .oc-capa-mini {
    transform: scale(.2223);
}
.oc-mlista__thumb .oc-capa-mini {
    transform: scale(.1204);
}
.oc-mlista__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.oc-mlista__txt {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.oc-mlista__titulo {
    max-width: 100%;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oc-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-mlista__data {
    font-size: .8125rem;
    color: var(--oc-muted);
}
.oc-mlista__seta {
    flex: none;
    fill: none;
    stroke: #B5A88F;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-mlista__vazio {
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: var(--oc-white);
    font-size: .9375rem;
    color: var(--oc-muted);
    text-align: center;
}
.oc-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
}
.oc-chip--ar { background: #E3F1E6; color: #256B38; }
.oc-chip--pagar { background: #FBF1D9; color: #7A5A10; }
.oc-chip--analise { background: #ECEEF8; color: #3D4A8A; }
.oc-chip--recusado { background: #FBE7E4; color: #9A2A1E; }
.oc-chip--fim { background: #EEEAE3; color: #6B5B45; }

/* ---- fase 2: algemeen voor de schermen van de app ---- */
.oc-so-app {
    display: none;
}
.oc-movel .oc-so-app {
    display: block;
}
.oc-movel .oc-so-site {
    display: none !important;
}
/* groep regels zoals Instellingen van iOS: kop, wit vlak, regel met pictogram, naam, waarde en pijltje */
.oc-grupo__kop {
    margin: 1.375rem 1rem .375rem;
    font-family: var(--oc-font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oc-muted);
}
.oc-grupo {
    overflow: hidden;
    border-radius: 14px;
    background: var(--oc-white);
}
.oc-linha {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.125rem;
    margin-bottom: -1px;
    padding: .375rem .875rem;
    color: var(--oc-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.oc-linha::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 3.5rem;
    height: 1px;
    background: var(--oc-groep-lijn);
}
.oc-linha:active {
    background: #F6F2EC;
}
.oc-linha:visited,
.oc-linha:hover,
.oc-linha__nome {
    color: var(--oc-ink);
}
.oc-linha__ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 8px;
}
.oc-linha__ico svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-linha__nome {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
}
.oc-linha__valor {
    max-width: 45%;
    overflow: hidden;
    font-size: .9375rem;
    color: var(--oc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-linha__seta {
    flex: none;
    width: 8px;
    height: 14px;
    fill: none;
    stroke: #B5A88F;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-grupo--link {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 3.125rem;
    padding: 0 .875rem;
}
.oc-grupo__url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: .9375rem;
    color: var(--oc-ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-grupo__copiar {
    min-height: 2.75rem;
    border: 0;
    background: none;
    font: 600 .9375rem var(--oc-font-body);
    color: var(--oc-gold-dark);
    cursor: pointer;
}

/* ---- fase 2: Resumo van een convite (invite/show.php) ---- */
.oc-resumo {
    margin-bottom: 1.25rem;
}
.oc-movel .oc-page-header:has(+ .oc-resumo) {
    margin-bottom: .75rem;
}
.oc-resumo__topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.oc-resumo__capa {
    flex: none;
    width: 96px;
    height: 120px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--oc-cream-dark);
    box-shadow: 0 6px 18px rgba(26, 18, 9, .16);
}
.oc-resumo__capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.oc-resumo__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    min-width: 0;
}
.oc-resumo__quando {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--oc-ink);
}
.oc-resumo__onde {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--oc-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.oc-resumo__dica {
    margin: 1rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--oc-ink-soft);
}
.oc-resumo__dica em {
    font-style: normal;
    font-weight: 700;
}
.oc-resumo__acoes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .625rem;
    margin-top: 1rem;
}
.oc-resumo__acoes .oc-btn {
    min-height: 3.125rem;
    border-radius: 14px;
    font-size: 1rem;
}
.oc-resumo__cijfers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .875rem;
    padding: .75rem 0;
    border-radius: 14px;
    background: var(--oc-white);
    text-align: center;
}
.oc-resumo__cijfers > div + div {
    border-left: 1px solid var(--oc-groep-lijn);
}
.oc-resumo__cijfers strong {
    display: block;
    font-size: 1.25rem;
    color: var(--oc-ink);
}
.oc-resumo__cijfers span {
    font-size: .75rem;
    color: var(--oc-muted);
}

/* ---- fase 2: Meu perfil (profile.php): menu, en elk onderdeel als eigen scherm (html.oc-perfil-sub) ---- */
.oc-movel .oc-perfil-secao {
    display: none !important;
}
.oc-movel .oc-perfil-secao.is-aberta {
    display: block !important;
}
.oc-movel.oc-perfil-sub .oc-perfil,
.oc-movel.oc-perfil-sub .oc-page-header,
.oc-movel.oc-perfil-sub .oc-alert--success {
    display: none;
}
/* de titel van het onderdeel staat al in de balk bovenin */
.oc-movel.oc-perfil-sub .oc-perfil-secao > .oc-card__title {
    display: none;
}
.oc-movel.oc-perfil-sub .oc-perfil-secao form > .oc-btn {
    width: 100%;
    margin-top: .5rem;
}
.oc-movel .oc-perfil-secao#delete {
    border: 0 !important;
}
.oc-perfil__kaart {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem .875rem;
    border-radius: 14px;
    background: var(--oc-white);
    color: var(--oc-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.oc-perfil__kaart:visited,
.oc-perfil__kaart:hover {
    color: var(--oc-ink);
}
.oc-perfil__foto {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--oc-gold);
    object-fit: cover;
    font-family: var(--oc-font-display);
    font-size: 1.5rem;
    color: var(--oc-ink);
}
.oc-perfil__txt {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.oc-perfil__nome {
    font-size: 1.125rem;
    font-weight: 600;
}
.oc-perfil__email {
    overflow: hidden;
    font-size: .875rem;
    color: var(--oc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-perfil__fim {
    margin-top: 1.375rem;
}
.oc-linha--perigo,
.oc-linha--perigo:visited,
.oc-linha--perigo .oc-linha__nome {
    justify-content: center;
    color: #A33A2A;
    text-align: center;
    font-weight: 600;
}
.oc-linha--perigo::after {
    left: 0;
}
.oc-perfil__desde {
    margin: 1rem 0 0;
    font-size: .8125rem;
    color: var(--oc-muted);
    text-align: center;
}

/* ---- fase 2: Editar convite (invite/edit.php) als menu; elk onderdeel een eigen scherm (html.oc-sec-sub) ---- */
.oc-movel.oc-sec-menu .oc-invite-tabs,
.oc-movel.oc-sec-menu .oc-steps,
.oc-movel.oc-sec-menu .oc-cvd__preview,
.oc-movel.oc-sec-menu .oc-cvd-jump,
.oc-movel.oc-sec-menu .oc-cvd > div > * {
    display: none !important;
}
.oc-movel.oc-sec-menu .oc-cvd {
    display: block;
}
.oc-movel.oc-sec-menu .oc-cvd > div > .is-aberta {
    display: block !important;
}
.oc-movel.oc-sec-sub .oc-secmenu,
.oc-movel.oc-sec-sub .oc-page-header,
.oc-movel.oc-sec-sub .oc-ast-oferta,
.oc-movel.oc-sec-sub .oc-alert--info:has(+ .oc-secmenu) {   /* "Voce pode editar ate ...": alleen in het menu */
    display: none !important;
}
.oc-movel.oc-sec-sub .oc-cvd > div > .is-aberta > .oc-card__title {
    display: none;
}

/* ---- Pagamento (invite/payment.php): bedrag en QR in een vlak, een grote knop Copiar codigo PIX ---- */
.oc-movel:has(.oc-pag) .oc-steps,
.oc-movel .oc-pag-evento,
.oc-movel .oc-pag-qr > .oc-card__title,
.oc-movel .oc-pag-qr div:has(> div > button[id^="copy_pix"]) {
    display: none !important;
}
.oc-movel .oc-pag {
    gap: 1rem !important;
}
.oc-movel .oc-pag-valor {
    padding-bottom: .25rem;
}
.oc-movel .oc-pag-valor > div:nth-child(2) {
    font-size: 2.5rem !important;
}
/* bedrag en QR als een vlak, als ze op elkaar volgen */
.oc-movel .oc-pag-valor:has(+ .oc-pag-qr) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.oc-movel .oc-pag-valor + .oc-pag-qr {
    margin-top: -1.25rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.oc-movel .oc-pag-qr {
    text-align: center;
}
.oc-movel .oc-pag-qr img {
    width: 220px !important;
    height: 220px !important;
}
.oc-movel .oc-so-app.oc-pag-copiar {
    display: flex;
    width: 100%;
    min-height: 3.25rem;
    margin: .25rem 0 .75rem;
    border-radius: 14px;
    font-size: 1.0625rem;
}
/* het comprovante is de tweede weg: geen tweede gouden knop naast Copiar codigo PIX */
.oc-movel .oc-pag .oc-card:has(input[name="upload_proof"]) .oc-btn--primary {
    border-color: transparent;
    background: var(--oc-grond);
    box-shadow: none;
    color: var(--oc-ink);
}
/* ---- Criar novo convite (invite/create.php): tegels per tipo de festa, velden dichter op elkaar ---- */
.oc-movel:has(.oc-create-form) .oc-steps,
.oc-movel:has(.oc-create-form) .oc-page-header__sub,
.oc-movel .oc-create-acoes .oc-btn--ghost,
.oc-movel .oc-create-form > .oc-card__title,
.oc-movel .oc-create-form .oc-form-group:has(> #event_type) {
    display: none !important;
}
.oc-movel .oc-create-form .oc-grid {
    row-gap: .25rem !important;
}
.oc-movel .oc-create-ideia {
    padding: .75rem .875rem;
    border: 0;
    border-radius: 14px;
    font-size: .875rem;
}
.oc-tipos__kop {
    margin: 0 0 .625rem;
    font-family: var(--oc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oc-ink);
}
.oc-tipos__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.oc-tipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 5.25rem;
    padding: .625rem .25rem;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--oc-grond, var(--oc-cream));   /* fora da schil (experimentar.php, create.php no site): o creme */
    font: 600 .8125rem var(--oc-font-body);
    color: var(--oc-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.oc-tipo svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--oc-gold-dark);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.oc-tipo[aria-checked="true"] {
    border-color: var(--oc-gold);
    background: #FBF5E6;
    color: var(--oc-ink);
}
/* ---- Entrada na festa (invite/checkin.php): teller en lijst als groepen ---- */
.oc-movel .occk-topo {
    top: calc(3.5rem + env(safe-area-inset-top, 0px));
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(26, 18, 9, .08);
}
.oc-movel .occk-ler {
    width: 100%;
    min-height: 3.25rem;
    border-radius: 14px;
    font-size: 1.0625rem;
}
.oc-movel .occk-res {
    border-radius: 14px;
}
.oc-movel .occk-lista {
    padding: 0 .875rem;
    border-radius: 14px;
    background: var(--oc-white);
}
.oc-movel .occk-lista:empty {
    display: none;
}
/* Convidados zit al in de balk onderin */
.oc-movel:has(.occk) .oc-page-header .oc-btn--ghost {
    display: none;
}
.oc-movel .oc-pag-gerar .oc-btn {
    min-height: 2.25rem;
    background: none;
    box-shadow: none;
    color: var(--oc-gold-dark);
    font-size: .875rem;
}
/* Personalizar (invite/design.php): de kaarten zitten in het formulier; in een scherm ook de knoppen en de previa */
.oc-movel.oc-sec-menu .oc-cvd > form > * {
    display: none !important;
}
.oc-movel.oc-sec-menu .oc-cvd > form > .is-aberta {
    display: block !important;
}
.oc-movel.oc-sec-menu .oc-page-header .oc-btn--ghost {
    display: none;
}
.oc-movel.oc-sec-sub .oc-cvd > form > .is-aberta > .oc-card__title {
    display: none;
}
.oc-movel.oc-sec-sub .oc-cvd > form > .oc-cvd__actions {
    display: flex !important;
    flex-direction: column-reverse;
    gap: .5rem;
    margin-top: 1rem;
}
.oc-movel.oc-sec-sub .oc-cvd > form > .oc-cvd__actions .oc-btn {
    width: 100%;
}
.oc-movel.oc-sec-sub .oc-cvd:has(> form) > .oc-cvd__preview {
    display: block !important;
    margin-top: 1.25rem;
}
.oc-secmenu .oc-grupo__kop:first-child {
    margin-top: .25rem;
}
/* een scherm met een formulier: velden dichter op elkaar */
.oc-movel.oc-sec-sub .oc-cvd > div > .is-aberta .oc-grid {
    row-gap: .25rem !important;
}
/* "Monte o convite em 8 passos" boven het menu: kort, zonder de rij passos */
.oc-movel.oc-sec-menu .oc-ast-oferta__passos,
.oc-movel.oc-sec-menu .oc-ast-oferta__ou {
    display: none;
}
.oc-movel.oc-sec-menu .oc-ast-oferta__acoes .oc-btn {
    width: 100%;
}

/* ---- ingelogd als admin: label "Administrador" (includes/header.php en includes/app_nav.php) ---- */
.oc-nav__papel {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--oc-gold-dark);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.oc-apptop__papel {
    position: absolute;
    bottom: -.6rem;
    left: 50%;
    z-index: 1;
    padding: .05rem .6rem;
    border-radius: 999px;
    background: var(--oc-gold-dark);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
}