/* Public pages on layouts.front (My Orders, content pages, public forms).
   Loads after menu.css, which themes the Argon components they share. */

.public-page { margin-top: 72px; padding-block: 28px 80px; background: var(--paper); color: var(--ink); }
.public-page__inner { max-width: 860px; }
.public-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.public-page__head h1 { margin: 0; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.public-page__back { display: inline-block; margin-bottom: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.public-page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.public-page__empty { padding-block: 32px; color: var(--muted); }

.public-page .card {
    margin-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: none !important;
    overflow: hidden;
}
.public-page .bg-secondary { background: var(--paper) !important; }
.public-page .card-header { background: transparent !important; border-bottom: 1px solid var(--line); }
.public-page .card-header h3 { margin: 0; font-size: 1.3125rem; font-weight: 800; }
.public-page h3 { font-size: 1.25rem; }
.public-page h4 { font-family: var(--body); font-size: 1rem; font-weight: 500; }
.public-page h6.heading-small { font-size: .9375rem; text-transform: none; letter-spacing: 0; }
.public-page hr { border-color: var(--line); }
.public-page .form-control-label { color: var(--ink); font-weight: 700; }
.public-page .timeline-step { background: var(--saffron); color: var(--navy); }
.public-page .timeline-one-side::before, .public-page .timeline::before { border-color: var(--line); }

.public-page .btn-success, .public-page .btn-success:hover, .public-page .btn-success:focus {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-ink);
    box-shadow: none;
}
.public-page .btn-secondary, .public-page .btn-secondary:hover, .public-page .btn-secondary:focus {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    box-shadow: none;
}
.public-page .paymentbutton { display: block; margin: 0 24px 24px !important; }

/* Admin-written page content */
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.5em 0 .5em; font-family: var(--display); font-weight: 800; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img, .prose iframe, .prose table { max-width: 100%; }
.prose img { height: auto; border-radius: 10px; }

@media (max-width: 767px) {
    .public-page { margin-top: 64px; }
}