/* =========================================================================
   App UI - inner pages: prices, gallery, contact, payment, dashboard, errors.
   Extends app.css, same tokens.
   ========================================================================= */

/* ------------------------------------------------------------ page header */
.app-page-head {
    padding: 4px 20px 18px;
}
.app-page-head h1 {
    font-size: 24px;
}
.app-page-head p {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--app-plum-soft);
}
.app-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-pink);
    background-color: var(--app-pink-tint);
    border-radius: 100px;
}
.app-section {
    padding: 0 20px 22px;
}
.app-section h2 {
    margin-bottom: 12px;
    font-size: 17px;
}
.app-note {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--app-plum-soft);
    background-color: var(--app-pink-tint-2);
    border-radius: 14px;
}

/* ------------------------------------------------------------- search bar */
.app-searchbar {
    display: flex;
    gap: 9px;
    padding: 0 20px 14px;
}
.app-search-input {
    position: relative;
    flex: 1 1 auto;
}
.app-search-input i {
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 13px;
    color: var(--app-pink-soft);
    transform: translateY(-50%);
}
.app-search-input input {
    width: 100%;
    padding: 13px 16px 13px 40px;
    font-family: inherit;
    font-size: 14px;
    color: var(--app-plum);
    background-color: #fff;
    border: 1.5px solid var(--app-line);
    border-radius: 100px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.app-search-input input:focus {
    border-color: var(--app-pink);
}
.app-searchbar button {
    flex: 0 0 auto;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background-color: var(--app-pink);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
}
.app-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.app-chips::-webkit-scrollbar {
    display: none;
}
.app-chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-pink);
    background-color: var(--app-pink-tint);
    border: 0;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
}
.app-body a.app-chip.is-active,
.app-chip.is-active {
    color: #fff;
    background-color: var(--app-pink);
}

/* -------------------------------------------------------------- list rows */
.app-rows {
    padding: 0 20px;
}
.app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: inherit;
    border-bottom: 1px solid #f7ecf2;
}
.app-row:last-child {
    border-bottom: 0;
}
.app-row-media {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
}
.app-row-body {
    flex: 1 1 auto;
    min-width: 0;
}
.app-row-body strong {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--app-plum);
}
.app-row-body span {
    display: block;
    font-size: 12px;
    color: var(--app-plum-soft);
}
.app-row-price {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--app-pink);
    white-space: nowrap;
}
.app-row-tag {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--app-pink);
    background-color: var(--app-pink-tint);
    border-radius: 100px;
}

/* ---------------------------------------------------------------- gallery */
.app-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 20px;
}
/* one tile per item - a button, so photos and clips are both keyboard
   reachable and open the same viewer */
.app-gallery-item {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background-color: var(--app-pink-tint);
    cursor: zoom-in;
}
.app-gallery-item img,
.app-gallery-item video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background-color: var(--app-pink-tint);
}
.app-gallery-item.is-video {
    cursor: pointer;
}
/* play badge, so a clip is obvious before its poster frame loads */
.app-gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding-left: 3px;
    font-size: 15px;
    color: var(--app-pink);
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(48, 12, 32, 0.28);
    transform: translate(-50%, -50%);
}
.app-gallery-item:hover .app-gallery-play {
    background-color: #fff;
}
.app-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background-color: rgba(30, 8, 20, 0.92);
}
.app-lightbox[hidden] {
    display: none;
}
.app-lb-stage {
    margin: 0;
    text-align: center;
}
.app-lightbox img,
.app-lightbox video {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    margin: 0 auto;
    border-radius: 14px;
    background-color: #000;
}
.app-lightbox img[hidden],
.app-lightbox video[hidden] {
    display: none;
}
.app-lb-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
}
.app-lb-count {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.6);
}
.app-lightbox button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--app-plum);
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.app-lb-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    font-size: 14px;
    z-index: 2;
}
/* arrows overlay the photo on phones, sit beside it once there is room */
.app-lb-nav {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%);
}
.app-lb-nav.is-prev { left: 10px; }
.app-lb-nav.is-next { right: 10px; }
@media screen and (min-width: 560px) {
    .app-lb-nav.is-prev { left: 24px; }
    .app-lb-nav.is-next { right: 24px; }
}

/* -------------------------------------------------------- payment screens */
.app-hold {
    margin: 0 20px 18px;
    padding: 14px 16px;
    background-color: var(--app-pink-tint-2);
    border-radius: 14px;
}
.app-hold-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
.app-hold-top > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-plum-soft);
}
.app-hold-clock {
    font-size: 20px;
    font-weight: 700;
    color: var(--app-pink);
    font-variant-numeric: tabular-nums;
}
.app-hold-track {
    height: 5px;
    overflow: hidden;
    background-color: var(--app-pink-tint);
    border-radius: 100px;
}
.app-hold-fill {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--app-pink);
    transition: width 1s linear;
}
.app-hold.is-urgent .app-hold-clock {
    color: #d3324f;
}
.app-hold.is-urgent .app-hold-fill {
    background-color: #d3324f;
}
.app-summary {
    margin: 0 20px 18px;
    padding: 2px 16px;
    background-color: var(--app-pink-tint-2);
    border-radius: 14px;
}
.app-summary ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.app-summary li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    font-size: 13.5px;
    border-bottom: 1px dashed #f3dbe7;
}
.app-summary li:last-child {
    border-bottom: 0;
}
.app-summary .k {
    color: var(--app-plum-soft);
}
.app-summary .v {
    font-weight: 600;
    color: var(--app-plum);
    text-align: right;
    word-break: break-word;
}
.app-pay-element {
    min-height: 90px;
    padding: 0 20px;
}
.app-pay-message {
    margin: 12px 20px 0;
    padding: 12px 15px;
    font-size: 13px;
    color: #a4103b;
    background-color: #fdeaf1;
    border-radius: 12px;
}
.app-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    padding: 2px 20px 0;
    margin: 0;
    list-style: none;
}
.app-trust li {
    font-size: 11.5px;
    color: var(--app-plum-soft);
}
.app-trust i {
    margin-right: 4px;
    color: #3f9e6b;
}
.app-done {
    padding: 14px 20px 0;
    text-align: center;
}
.app-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    font-size: 32px;
    color: #fff;
    background: linear-gradient(135deg, #58c48c, #3f9e6b);
    border-radius: 50%;
    box-shadow: 0 12px 26px rgba(63, 158, 107, 0.32);
}
.app-done-icon.is-pending {
    color: var(--app-pink);
    background: var(--app-pink-tint);
    box-shadow: none;
}
.app-done h1 {
    margin-bottom: 8px;
    font-size: 24px;
}
.app-done p {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--app-plum-soft);
}
.app-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background-color: rgba(48, 12, 32, 0.62);
}
.app-overlay[hidden] {
    display: none;
}
.app-overlay-box {
    width: 100%;
    max-width: 360px;
    padding: 28px 22px;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
}

/* -------------------------------------------------------------- dashboard */
.app-dashnav {
    display: flex;
    gap: 8px;
    padding: 0 20px 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.app-dashnav::-webkit-scrollbar {
    display: none;
}
.app-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 20px 18px;
}
.app-stat {
    padding: 14px;
    background-color: var(--app-pink-tint-2);
    border-radius: 14px;
}
.app-stat strong {
    display: block;
    font-size: 21px;
    line-height: 1.2;
    color: var(--app-plum);
}
.app-stat span {
    font-size: 11.5px;
    color: var(--app-plum-soft);
}
.app-stat.is-accent {
    background-color: var(--app-pink-tint);
}
.app-stat.is-accent strong {
    color: var(--app-pink);
}
.app-status {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 100px;
}
.app-status.is-pending { color: #a5680a; background-color: #fdf3e2; }
.app-status.is-confirmed { color: #2c7a52; background-color: #e6f6ed; }
.app-status.is-completed { color: #2b6fa8; background-color: #e6f1fa; }
.app-status.is-cancelled,
.app-status.is-failed { color: #b23b3b; background-color: #fdecec; }
.app-status.is-expired,
.app-status.is-refunded { color: #6f6f6f; background-color: #f1f1f1; }
.app-card {
    padding: 16px;
    margin: 0 20px 12px;
    background-color: #fff;
    border: 1px solid #f7dce9;
    border-radius: 16px;
}
.app-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.app-card-head h2 {
    margin: 0;
    font-size: 15px;
}
.app-defs {
    padding: 0;
    margin: 0;
    list-style: none;
}
.app-defs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    font-size: 13.5px;
    border-bottom: 1px dashed #f7ecf2;
}
.app-defs li:last-child {
    border-bottom: 0;
}
.app-defs .k {
    color: var(--app-plum-soft);
}
.app-defs .v {
    font-weight: 600;
    color: var(--app-plum);
    text-align: right;
    word-break: break-word;
}
.app-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 18px 20px 0;
}
.app-pager a,
.app-pager span {
    min-width: 38px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-pink);
    text-align: center;
    background-color: var(--app-pink-tint-2);
    border-radius: 10px;
}
.app-body a.app-pager-active,
.app-pager .app-pager-active {
    color: #fff;
    background-color: var(--app-pink);
}
.app-pager .is-off {
    color: #cbb3c0;
}
.app-chart {
    min-height: 260px;
    padding: 0 6px;
}
.app-chart-range {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--app-plum-soft);
}
/* pill dropdown, styled to sit beside .app-chip without looking like a form */
.app-select {
    flex: 0 0 auto;
    padding: 7px 30px 7px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-pink);
    background-color: var(--app-pink-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ed3d8b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 9px;
    border: 0;
    border-radius: 100px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.app-select:disabled {
    opacity: 0.6;
    cursor: progress;
}
.app-select:focus-visible {
    outline: 2px solid var(--app-pink);
    outline-offset: 2px;
}
.app-code {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    color: var(--app-plum-soft);
    background-color: #f7f2f5;
    border-radius: 6px;
    word-break: break-all;
}
.app-timeline {
    padding: 0;
    margin: 0;
    list-style: none;
}
.app-timeline li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #f7ecf2;
}
/* keep pills their own size instead of stretching to the row height */
.app-timeline .app-status,
.app-timeline .app-row-price {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
}
.app-timeline > li > div {
    flex: 1 1 auto;
    min-width: 0;
}
.app-timeline li:last-child {
    border-bottom: 0;
}
.app-timeline time {
    flex: 0 0 auto;
    min-width: 78px;
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--app-pink);
    text-align: center;
    background-color: var(--app-pink-tint-2);
    border-radius: 8px;
}
.app-timeline strong {
    display: block;
    font-size: 14px;
    color: var(--app-plum);
}
.app-timeline span {
    font-size: 12px;
    color: var(--app-plum-soft);
}

/* ------------------------------------------------------------------- 404 */
.app-oops {
    padding: 40px 24px;
    text-align: center;
}
.app-oops h1 {
    margin-bottom: 10px;
    font-size: 58px;
    color: var(--app-pink);
}
.app-oops p {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--app-plum-soft);
}

/* --------------------------------------------------------------- >= 576px */
@media screen and (min-width: 576px) {
    .app-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    .app-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------- content management pages */
.app-manage-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 12px;
}
.app-manage-bar .app-searchbar {
    flex: 1 1 auto;
    padding: 0;
}
.app-btn-compact {
    flex: 0 0 auto;
    width: auto;
    padding: 10px 16px;
    font-size: 12.5px;
    white-space: nowrap;
}
/* list rows that are not themselves links, so the Edit chip is the target */
.app-row.is-static {
    cursor: default;
}
.app-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.app-field-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #b9a2ae;
}
.app-imagepick {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.app-imagepick img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    background-color: var(--app-pink-tint);
}
.app-imagepick > div {
    flex: 1 1 auto;
    min-width: 0;
}
.app-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    font-size: 13.5px;
    color: var(--app-plum);
    cursor: pointer;
}
.app-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--app-pink);
    cursor: pointer;
}

/* --------------------------------------------------------- gallery manager */
.app-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 20px;
}
.app-gallery-cell {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background-color: var(--app-pink-tint);
}
.app-gallery-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-gallery-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px;
    color: var(--app-pink);
}
.app-gallery-meta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 7px 5px;
    font-size: 10.5px;
    color: #fff;
    background: linear-gradient(to top, rgba(48, 12, 32, 0.72), transparent);
}
.app-gallery-meta strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.app-gallery-star {
    margin-left: auto;
    font-size: 10px;
    color: #ffd15c;
}
.app-gallery-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    margin-bottom: 14px;
    border-radius: var(--app-radius);
}

/* .app-row-body span is display:block, which would stretch a status pill the
   full row width. Keep the pill hugging its own text. */
.app-row-body .app-status,
.app-row-body .app-row-tag {
    display: inline-block;
    width: auto;
}

/* quick contact actions under a detail card */
.app-quickrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.app-quickrow .app-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.app-quickrow .app-chip[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================================================================
   >= 1024px - laptops and desktops. The public pages sit under the top navbar
   from app.css; only the dashboard gets a sidebar, built from the same chip
   nav that scrolls horizontally on phones.
   ========================================================================= */
@media screen and (min-width: 1024px) {
    /* --- public inner pages: gutters match the navbar ------------------- */
    .app-page-head,
    .app-menu-group-head,
    .app-section,
    .app-rows,
    .app-searchbar,
    .app-chips,
    .app-stats,
    .app-gallery,
    .app-gallery-grid,
    .app-manage-bar,
    .app-pay-element {
        padding-right: var(--app-gutter);
        padding-left: var(--app-gutter);
    }
    .app-card,
    .app-hold,
    .app-summary {
        margin-right: var(--app-gutter);
        margin-left: var(--app-gutter);
    }
    .app-page-head {
        padding-top: 30px;
    }
    .app-page-head h1 {
        font-size: 32px;
    }
    .app-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    .app-gallery-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* one long column of rows wastes most of a desktop width, so pair them up */
    .app-rows {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
    }
    /* empty states and notes still want the full width */
    .app-rows > p,
    .app-rows > .app-note {
        grid-column: 1 / -1;
    }
    .app-row {
        padding: 14px 0;
    }
    /* every row keeps its rule, otherwise the last one in each column differs */
    .app-rows > .app-row:last-child {
        border-bottom: 1px solid #f7ecf2;
    }
    /* stop single actions stretching the full width */
    .app-section > .app-btn,
    .app-section > .app-btn-ghost,
    .app-section > form > .app-btn,
    .app-section > form > .app-btn-ghost {
        width: fit-content;
        min-width: 300px;
    }

    /* --- dashboard: the chip nav becomes a sidebar ---------------------- */
    .dash-layout {
        display: grid;
        grid-template-columns: 232px minmax(0, 1fr);
        grid-template-areas:
            "nav head"
            "nav main";
        column-gap: 36px;
        align-items: start;
        padding: 8px var(--app-gutter) 0;
    }
    .dash-layout > .app-page-head {
        grid-area: head;
        padding-right: 0;
        padding-left: 0;
    }
    .dash-layout > .app-dashnav {
        grid-area: nav;
    }
    .dash-layout > .dash-main {
        grid-area: main;
        min-width: 0;
    }
    .app-dashnav {
        position: sticky;
        top: 86px;               /* clears the sticky navbar */
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 14px;
        overflow: visible;
        background-color: var(--app-pink-tint-2);
        border-radius: 16px;
    }
    .app-dashnav .app-chip {
        width: 100%;
        padding: 10px 14px;
        font-size: 13.5px;
        text-align: left;
        background-color: transparent;
    }
    .app-dashnav .app-chip:hover {
        background-color: #fff;
    }
    /* inside the dashboard column the components no longer need their own
       gutters - the grid already provides them */
    .dash-main .app-section,
    .dash-main .app-rows,
    .dash-main .app-searchbar,
    .dash-main .app-chips,
    .dash-main .app-stats,
    .dash-main .app-manage-bar,
    .dash-main .app-gallery-grid,
    .dash-main .app-pay-element {
        padding-right: 0;
        padding-left: 0;
    }
    .dash-main .app-card,
    .dash-main .app-hold,
    .dash-main .app-summary {
        margin-right: 0;
        margin-left: 0;
    }
    .dash-main .app-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1440px) {
    .app-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
    .app-gallery-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .dash-main .app-gallery-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* the gallery manager reuses the play badge at tile scale */
.app-gallery-cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-gallery-play.is-small {
    width: 30px;
    height: 30px;
    font-size: 10px;
    box-shadow: 0 3px 10px rgba(48, 12, 32, 0.3);
}
.app-check.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.app-check-note {
    margin: -8px 0 18px;
}
video.app-gallery-preview {
    max-height: 300px;
    background-color: #000;
}

/* ----------------------------------------------------------- social links */
.app-social {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.app-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 17px;
    color: #fff;
    border-radius: 50%;
}
.app-social-btn.is-instagram {
    /* the Instagram brand gradient, so the icon is recognisable at a glance */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.app-social-btn.is-tiktok {
    background-color: #010101;
}
.app-qr {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--app-plum-soft);
}
.app-qr img {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
}
.app-qr strong {
    display: block;
    font-size: 13px;
    color: var(--app-plum);
}

/* contact page: follow block */
.app-follow {
    display: grid;
    gap: 16px;
}
.app-follow-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: inherit;
    border-bottom: 1px solid #f7ecf2;
}
.app-follow-row:last-child {
    border-bottom: 0;
}
.app-follow-row strong {
    display: block;
    font-size: 14.5px;
    color: var(--app-plum);
}
.app-follow-row span span {
    font-size: 12px;
    color: var(--app-plum-soft);
}
.app-follow-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px;
    background-color: var(--app-pink-tint-2);
    border-radius: 14px;
}
.app-follow-qr img {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 12px;
}
.app-follow-qr figcaption {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--app-plum-soft);
}
@media screen and (min-width: 768px) {
    .app-follow {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

/* ------------------------------------------------- pricing: category groups */
.app-menu-group {
    margin-bottom: 26px;
}
.app-menu-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px 8px;
    margin-bottom: 4px;
    border-bottom: 1.5px solid var(--app-pink-tint);
}
.app-menu-group-head h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.2px;
}
.app-menu-group-head span {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--app-plum-soft);
}