/* ==========================================================================
   Pocket Pass Digital - Design System
   Modern Financial API SaaS Platform
   ========================================================================== */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* Brand Colors */
    --pp-dark: #00261C;
    --pp-dark-light: #003d2e;
    --pp-gold: #FCB715;
    --pp-gold-hover: #e5a410;
    --pp-blue: #2a8bea;
    --pp-blue-light: #e8f3fd;
    --pp-red: #f73c5c;
    --pp-green-success: #10b981;

    /* Neutrals */
    --pp-white: #ffffff;
    --pp-gray-50: #f8fafc;
    --pp-gray-100: #f1f5f9;
    --pp-gray-200: #e2e8f0;
    --pp-gray-300: #cbd5e1;
    --pp-gray-400: #94a3b8;
    --pp-gray-500: #64748b;
    --pp-gray-600: #475569;
    --pp-gray-700: #334155;
    --pp-gray-800: #1e293b;
    --pp-gray-900: #0f172a;

    /* Typography */
    --pp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pp-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

    /* Spacing */
    --pp-section-gap: 6rem;

    /* Shadows */
    --pp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --pp-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --pp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

    /* Border Radius */
    --pp-radius-sm: 6px;
    --pp-radius: 8px;
    --pp-radius-md: 12px;
    --pp-radius-lg: 16px;
    --pp-radius-xl: 24px;

    /* Transitions */
    --pp-transition: 150ms cubic-bezier(.4, 0, .2, 1);
    --pp-transition-slow: 300ms cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
    font-family: var(--pp-font-sans);
    color: var(--pp-gray-800);
    background-color: var(--pp-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    background-color: var(--pp-white);
    min-height: 80%;
}

a {
    text-decoration: none !important;
    color: var(--pp-blue);
    transition: color var(--pp-transition);
}

a:hover {
    color: var(--pp-dark);
}

a.active {
    font-weight: 600;
}

::selection {
    background-color: var(--pp-gold);
    color: var(--pp-dark);
}


/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
    background: var(--pp-dark) !important;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    transition: padding var(--pp-transition-slow), box-shadow var(--pp-transition-slow);
}

.navbar-lg {
    min-height: 71px;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, .7) !important;
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .875rem !important;
    border-radius: var(--pp-radius-sm);
    transition: all var(--pp-transition);
    letter-spacing: .01em;
}

.navbar .nav-link:hover {
    color: var(--pp-white) !important;
    background: rgba(255, 255, 255, .08);
}

.navbar .nav-link.active {
    color: var(--pp-gold) !important;
    background: rgba(252, 183, 21, .08);
}

.brand-logo-header {
    height: 36px !important;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: -.01em;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    border-radius: var(--pp-radius);
    font-weight: 600;
    font-size: .875rem;
    padding: .625rem 1.25rem;
    transition: all var(--pp-transition);
    letter-spacing: .01em;
}

.btn.btn-primary {
    background-color: var(--pp-gold);
    border-color: var(--pp-gold);
    color: var(--pp-dark);
}

.btn.btn-primary:hover {
    background-color: var(--pp-gold-hover);
    border-color: var(--pp-gold-hover);
    color: var(--pp-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(252, 183, 21, .35);
}

.btn.btn-outline-primary {
    border-color: var(--pp-gold);
    color: var(--pp-gold);
}

.btn.btn-outline-primary:hover {
    background-color: var(--pp-gold);
    border-color: var(--pp-gold);
    color: var(--pp-dark);
}

.btn.btn-outline-light {
    border-color: rgba(255, 255, 255, .2);
    color: var(--pp-white);
}

.btn.btn-outline-light:hover {
    background-color: var(--pp-white);
    border-color: var(--pp-white);
    color: var(--pp-dark);
}

.btn-lg {
    padding: .875rem 2rem;
    font-size: 1rem;
    border-radius: var(--pp-radius-md);
}

.btn-hero {
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    border-radius: var(--pp-radius-md);
    font-weight: 700;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    border: 1px solid var(--pp-gray-200);
    border-radius: var(--pp-radius-md);
    box-shadow: var(--pp-shadow-sm);
    transition: all var(--pp-transition-slow);
}

.card:hover {
    box-shadow: var(--pp-shadow-md);
}

.card-footer-link {
    color: var(--pp-dark);
}


/* ==========================================================================
   Forms
   ========================================================================== */

.form-group label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pp-gray-600);
    margin-bottom: .375rem;
}

.form-control {
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-gray-300);
    background-color: var(--pp-white);
    box-shadow: var(--pp-shadow-sm);
    padding: .625rem .875rem;
    font-size: .875rem;
    transition: all var(--pp-transition);
}

.form-control:hover {
    border-color: var(--pp-gray-400);
    box-shadow: var(--pp-shadow-sm);
}

.form-control:focus {
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 3px rgba(42, 139, 234, .15);
    background-color: var(--pp-white);
}

.error-text {
    color: var(--pp-red);
    font-size: .8125rem;
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    background: var(--pp-dark) !important;
}

footer a {
    color: rgba(255, 255, 255, .7);
    transition: color var(--pp-transition);
}

footer a:hover {
    color: var(--pp-gold) !important;
}

address {
    font-size: .75rem;
    line-height: 1.7;
}

.copy-logo {
    height: 32px !important;
}

.copy-text {
    font-size: .6875rem;
    color: var(--pp-gray-400);
}


/* ==========================================================================
   Offcanvas Sidebar
   ========================================================================== */

.offcanvas {
    background-color: var(--pp-white);
}

.offcanvas-end-footer {
    background: var(--pp-dark) !important;
    color: var(--pp-white);
}

/* Group heading in the offcanvas menu. The bar collapses the same groups into
   dropdowns; a column has room to name them. */
.portal-nav-group {
    padding: .25rem .75rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pp-gray-500, rgba(0, 0, 0, .45));
}

/* Column heading in the desktop footer. */
.footer-heading {
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .4);
}


/* ==========================================================================
   Landing Page - Hero
   ========================================================================== */

.hero-section {
    background: linear-gradient(135deg, var(--pp-dark) 0%, #004d3a 50%, var(--pp-dark-light) 100%);
    position: relative;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(252, 183, 21, .08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(42, 139, 234, .08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(252, 183, 21, .12);
    border: 1px solid rgba(252, 183, 21, .25);
    color: var(--pp-gold);
    font-size: .8125rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 100px;
    letter-spacing: .02em;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--pp-white);
    letter-spacing: -.03em;
}

.hero-title .text-gradient {
    background: linear-gradient(135deg, var(--pp-gold) 0%, #ffe082 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.1875rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    max-width: 540px;
}

.hero-code {
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--pp-radius-lg);
    padding: 1.5rem;
    font-family: var(--pp-font-mono);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.8;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.hero-code .code-keyword {
    color: #c792ea;
}

.hero-code .code-string {
    color: #c3e88d;
}

.hero-code .code-comment {
    color: rgba(255, 255, 255, .3);
}

.hero-code .code-number {
    color: #f78c6c;
}

.hero-code .code-property {
    color: #82aaff;
}

.hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2rem;
}

.hero-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--pp-white);
    letter-spacing: -.02em;
}

.hero-stat-label {
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
}


/* ==========================================================================
   Landing Page - Feature Sections
   ========================================================================== */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-blue);
    margin-bottom: .75rem;
}

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--pp-gray-900);
    letter-spacing: -.02em;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.0625rem;
    color: var(--pp-gray-500);
    line-height: 1.7;
    max-width: 640px;
}

.feature-card {
    background: var(--pp-white);
    border: 1px solid var(--pp-gray-200);
    border-radius: var(--pp-radius-lg);
    padding: 2rem;
    transition: all var(--pp-transition-slow);
    height: 100%;
}

.feature-card:hover {
    border-color: var(--pp-gray-300);
    box-shadow: var(--pp-shadow-lg);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--pp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.feature-icon-blue {
    background: var(--pp-blue-light);
    color: var(--pp-blue);
}

.feature-icon-gold {
    background: rgba(252, 183, 21, .12);
    color: var(--pp-gold);
}

.feature-icon-green {
    background: rgba(16, 185, 129, .1);
    color: var(--pp-green-success);
}

.feature-icon-dark {
    background: rgba(0, 38, 28, .08);
    color: var(--pp-dark);
}

.feature-card h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pp-gray-900);
    margin-bottom: .5rem;
}

.feature-card p {
    font-size: .9375rem;
    color: var(--pp-gray-500);
    line-height: 1.6;
    margin-bottom: 0;
}


/* ==========================================================================
   Landing Page - API Showcase
   ========================================================================== */

.api-endpoint-card {
    background: var(--pp-gray-50);
    border: 1px solid var(--pp-gray-200);
    border-radius: var(--pp-radius-md);
    padding: 1.25rem 1.5rem;
    transition: all var(--pp-transition);
}

.api-endpoint-card:hover {
    background: var(--pp-white);
    box-shadow: var(--pp-shadow-md);
}

.api-method {
    display: inline-block;
    font-family: var(--pp-font-mono);
    font-size: .6875rem;
    font-weight: 700;
    padding: .25rem .625rem;
    border-radius: var(--pp-radius-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.api-method-get {
    background: rgba(16, 185, 129, .1);
    color: #059669;
}

.api-method-post {
    background: rgba(42, 139, 234, .1);
    color: var(--pp-blue);
}

.api-method-delete {
    background: rgba(247, 60, 92, .1);
    color: var(--pp-red);
}

.api-path {
    font-family: var(--pp-font-mono);
    font-size: .8125rem;
    color: var(--pp-gray-700);
    font-weight: 500;
}

.api-desc {
    font-size: .8125rem;
    color: var(--pp-gray-500);
}


/* ==========================================================================
   Landing Page - Social Proof / Stats
   ========================================================================== */

.stats-section {
    background: var(--pp-gray-50);
    border-top: 1px solid var(--pp-gray-200);
    border-bottom: 1px solid var(--pp-gray-200);
}

.stat-item {
    text-align: center;
    padding: 2rem 1rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pp-dark);
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: .5rem;
}

.stat-description {
    font-size: .875rem;
    color: var(--pp-gray-500);
    font-weight: 500;
}


/* ==========================================================================
   Landing Page - CTA Section
   ========================================================================== */

.cta-section {
    background: linear-gradient(135deg, var(--pp-dark) 0%, #004d3a 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(252, 183, 21, .06) 0%, transparent 70%);
    pointer-events: none;
}

.cta-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--pp-white);
    letter-spacing: -.02em;
}

.cta-subtitle {
    color: rgba(255, 255, 255, .6);
    font-size: 1.0625rem;
}


/* ==========================================================================
   Auth Pages (CAS)
   ========================================================================== */

.cas-card {
    width: 100%;
    max-width: 860px;
    border-radius: var(--pp-radius-lg);
    border: 1px solid var(--pp-gray-200);
    box-shadow: var(--pp-shadow-xl);
    overflow: hidden;
}

.cas-card-left {
    background: linear-gradient(180deg, var(--pp-dark) 0%, #004d3a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cas-card-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(252, 183, 21, .1) 0%, transparent 60%);
    pointer-events: none;
}

.cas-card-form {
    font-size: 90%;
}

.cas-password-reset {
    text-align: center;
    font-size: .8125rem;
}

.cas-form-submit {
    height: 48px;
    width: 100%;
    color: var(--pp-dark);
    font-weight: 700;
}

.cas-passkey-button {
    font-size: 1.5rem !important;
    width: 68px;
    height: 68px;
}

.cas-card-logo {
    margin-top: 2rem;
    height: 180px;
}

.nav-link-cas {
    text-align: center;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--pp-gray-500) !important;
    padding: .875rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all var(--pp-transition);
}

.nav-link-cas:hover {
    color: var(--pp-dark) !important;
}

.nav-link-cas.active {
    color: var(--pp-dark) !important;
    border-bottom: 3px solid var(--pp-gold);
    font-weight: 600;
}


/* ==========================================================================
   Overview / Dashboard
   ========================================================================== */

.dashboard-welcome {
    background: linear-gradient(135deg, var(--pp-dark) 0%, #004d3a 100%);
    border-radius: var(--pp-radius-lg);
    padding: 2.5rem;
    color: var(--pp-white);
    position: relative;
    overflow: hidden;
}

.dashboard-welcome::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(252, 183, 21, .08) 0%, transparent 60%);
    pointer-events: none;
}

.dashboard-welcome h2 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.info-card {
    background: var(--pp-white);
    border: 1px solid var(--pp-gray-200);
    border-radius: var(--pp-radius-md);
    padding: 2rem;
    height: 100%;
    transition: all var(--pp-transition-slow);
}

.info-card:hover {
    box-shadow: var(--pp-shadow-md);
    border-color: var(--pp-gray-300);
}

.info-card .info-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--pp-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.info-card h5 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--pp-gray-900);
    margin-bottom: .5rem;
}

.info-card p {
    font-size: .875rem;
    color: var(--pp-gray-500);
    line-height: 1.6;
}


/* ==========================================================================
   Use Cases & Tutorial Sidebar
   ========================================================================== */

.sidebar-nav {
    background: var(--pp-gray-50);
    border-right: 1px solid var(--pp-gray-200);
    min-height: 100%;
}

.sidebar-nav a {
    display: block;
    padding: .625rem 1rem;
    color: var(--pp-gray-500);
    font-size: .8125rem;
    font-weight: 500;
    border-radius: var(--pp-radius-sm);
    transition: all var(--pp-transition);
}

.sidebar-nav a:hover {
    color: var(--pp-dark);
    background: var(--pp-gray-100);
}

.sidebar-nav a.active {
    color: var(--pp-dark);
    background: var(--pp-gray-200);
    font-weight: 600;
}

.sidebar-nav h5,
.sidebar-nav .sidebar-heading {
    font-size: .875rem;
    font-weight: 700;
    color: var(--pp-gray-900);
    padding: .625rem 1rem;
    margin-bottom: 0;
}


/* ==========================================================================
   Content Pages (About, Privacy, Terms)
   ========================================================================== */

.content-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.content-page h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pp-gray-900);
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
}

.content-page h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pp-gray-800);
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.content-page p,
.content-page li {
    font-size: .9375rem;
    color: var(--pp-gray-600);
    line-height: 1.75;
}

.content-page ul {
    padding-left: 1.25rem;
}

.content-page ul li {
    margin-bottom: .5rem;
}


/* ==========================================================================
   Registry Cards
   ========================================================================== */

.registry-card {
    border: 1px solid var(--pp-gray-200);
    border-radius: var(--pp-radius-md);
    background: var(--pp-white);
    transition: all var(--pp-transition-slow);
    overflow: hidden;
}

.registry-card:hover {
    box-shadow: var(--pp-shadow-lg);
    transform: translateY(-2px);
}

.registry-card .card-body {
    padding: 1.5rem;
}

.registry-card .card-footer {
    background: var(--pp-gray-50);
    border-top: 1px solid var(--pp-gray-200);
    padding: 1rem 1.5rem;
}


/* ==========================================================================
   Nav Pills (Sidebar active states)
   ========================================================================== */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--pp-white) !important;
    background-color: var(--pp-dark);
}

.nav-link-app {
    text-align: center;
    letter-spacing: 0;
    background: var(--pp-dark);
    color: var(--pp-white) !important;
    padding: 1rem;
    width: 100%;
}


/* ==========================================================================
   Status Badges
   ========================================================================== */

.badge {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .375rem .75rem;
}


/* ==========================================================================
   Loading Modal
   ========================================================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pp-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--pp-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pp-gray-400);
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-gradient {
    background: linear-gradient(135deg, var(--pp-gold), #ffe082);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-subtle-gold {
    background: rgba(252, 183, 21, .06);
}

.bg-subtle-blue {
    background: rgba(42, 139, 234, .06);
}

.debit-amount {
    color: var(--pp-red) !important;
}

.credit-amount {
    color: var(--pp-blue) !important;
}

.badge-primary {
    font-size: .625rem !important;
    background: var(--pp-white);
    color: #004DA6;
}


/* ==========================================================================
   Responsive Tweaks
   ========================================================================== */

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 4rem 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat-value {
        font-size: 1.25rem;
    }

    .hero-code {
        display: none;
    }

    .cas-card {
        margin: 1rem;
        max-width: 100%;
    }

    .content-page {
        padding: 2rem .5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .dashboard-welcome {
        padding: 1.5rem;
    }

    /* Disable reveal animations on mobile for performance */
    .feature-card,
    .info-card,
    .api-endpoint-card,
    .stat-item,
    .registry-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ==========================================================================
   Legacy / Card Management (kept for compatibility)
   ========================================================================== */

.feat-card-brand {
    font-size: 5em !important;
}

.feat-bg-green {
    color: #fff !important;
    background-color: var(--pp-dark) !important;
    min-width: 320px;
    max-height: 670px;
}

.feat-bg-blue {
    color: #fff !important;
    background-color: var(--pp-blue) !important;
    min-width: 320px;
    max-height: 670px;
}

.feat-bg-yellow {
    color: #fff !important;
    background-color: #ff9d00 !important;
    min-width: 320px;
    max-height: 670px;
}

.feat-bg-red {
    color: #fff !important;
    background-color: var(--pp-red) !important;
    min-width: 320px;
    max-height: 670px;
}

.feat-video {
    width: 80%;
    border-radius: 21px 21px 0 0;
}

.avatar-circle {
    width: 44px;
    height: 44px;
    background-color: var(--pp-dark);
    text-align: center;
    border-radius: 50%;
}

.initials {
    position: relative;
    top: 13px;
    font-size: 16px;
    line-height: 16px;
    color: #ffffff;
    font-family: var(--pp-font-sans);
}

.product-carousel-indicators {
    bottom: -30px;
}

.product-carousel-indicator {
    background-color: var(--pp-gold) !important;
}

.product-carousel-caption {
    bottom: auto;
    text-align: left;
}

.credit-card-carousel-stage {
    width: 100%;
    height: 55vw;
    object-fit: cover;
    color: #f8f8ff;
    max-width: 450px;
    max-height: 280px;
    border-radius: var(--pp-radius-md);
}

.carousel-item-no-animation {
    transition: unset;
}

.card-form {
    color: var(--pp-gray-500);
}

.card-form .form-label {
    font-size: .75em;
    margin-bottom: .35em;
}

.card-form .form-control {
    margin-bottom: 8px;
}

.ppvc {
    background: #00260c;
}

.ppvc-barcode {
    width: 90%;
}

.cc-brands {
    background: #d3d3d3;
}

.cc-add {
    background: #e0e0e0 !important;
    border-color: black;
    border-width: thin;
    border-style: dashed;
}

.card-center-button {
    font-size: 1.5em;
    text-decoration: unset;
    color: #f8f8ff;
}

.card-center-button-add {
    font-size: 1.5em;
    text-decoration: unset;
    color: #2f4f4f;
}

.card-center-button-minus {
    font-size: 1.5em;
    text-decoration: unset;
    color: var(--pp-gold);
}

.extra-small {
    font-size: .55em;
}

.card-caption {
    left: 0;
    top: -20px;
    position: absolute;
    color: var(--pp-gray-500);
}

.credit-card-carousel-description {
    height: 100px;
}

.credit-card-carousel-indicators .pills {
    background-color: var(--pp-gold);
}

.credit-card-carousel-controls {
    bottom: unset;
    height: 70%;
    color: var(--pp-gold);
    opacity: unset;
}

.credit-card-carousel-controls:focus,
.credit-card-carousel-controls:hover {
    color: var(--pp-gold);
}

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    display: none;
    transform: rotateY(180deg);
    font-size: .80em !important;
}

.flip-card-back-btn {
    width: 72px;
    border-radius: 5px;
    font-size: .95em !important;
}

.add-to-google-wallet,
.add-to-apple-wallet {
    height: 40px;
    max-width: 130px;
    margin-bottom: 8px;
}

.fa-lg {
    font-size: 1.75em !important;
    line-height: 1 !important;
}

.fa-card-brand {
    font-size: 4em !important;
}

.fa-2xl {
    font-size: 3em !important;
    line-height: .5em !important;
    vertical-align: -.1875em;
}

.virtual-card-brand {
    width: 72px;
}


/* ==========================================================================
   Backoffice Sidebar
   ========================================================================== */

.bo-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: var(--pp-dark);
    color: var(--pp-white);
    display: flex;
    flex-direction: column;
    z-index: 1030;
}

.bo-sidebar-brand {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    font-size: .9375rem;
}

.bo-sidebar-nav {
    flex: 1;
    padding: 1rem .75rem;
    overflow-y: auto;
}

.bo-sidebar-group {
    padding: 1rem 1rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.35);
}

.bo-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(255,255,255,.6);
    border-radius: var(--pp-radius-sm);
    transition: all var(--pp-transition);
}

.bo-sidebar-nav a:hover {
    color: var(--pp-white);
    background: rgba(255,255,255,.08);
}

.bo-sidebar-nav a.active {
    color: var(--pp-gold);
    background: rgba(252,183,21,.1);
    font-weight: 600;
}

.bo-sidebar-nav a i {
    width: 18px;
    text-align: center;
    font-size: .875rem;
}

.bo-sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .75rem;
    color: rgba(255,255,255,.45);
}

.bo-sidebar-footer a {
    color: rgba(255,255,255,.6);
    font-size: .75rem;
}

.bo-sidebar-footer a:hover {
    color: var(--pp-gold);
}

.bo-main {
    margin-left: 240px;
    min-height: 100vh;
    background: var(--pp-gray-50);
}

@media (max-width: 991.98px) {
    .bo-sidebar {
        transform: translateX(-100%);
        transition: transform var(--pp-transition-slow);
    }
    .bo-sidebar.show {
        transform: translateX(0);
    }
    .bo-main {
        margin-left: 0;
    }
}


/* ==========================================================================
   Mobile & Tablet Layer

   Everything below assumes a hand-held: a thumb rather than a cursor, a
   viewport that runs under a notch, and a table that will not fit. It is
   appended last so it wins over the desktop rules above without !important.
   ========================================================================== */

/* --- Safe areas -----------------------------------------------------------
   The pages declare viewport-fit=cover so the dark chrome reaches the screen
   edge. That is only an improvement if the content is inset back out of the
   notch, the rounded corners and the home indicator. */

.navbar > .container,
.navbar > .container-fluid {
    padding-left: max(var(--bs-gutter-x, 1.5rem) * .5, env(safe-area-inset-left));
    padding-right: max(var(--bs-gutter-x, 1.5rem) * .5, env(safe-area-inset-right));
}

footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.offcanvas {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.offcanvas-end {
    padding-right: env(safe-area-inset-right);
}

.offcanvas-start {
    padding-left: env(safe-area-inset-left);
}

/* Toasts sit at the bottom of the viewport, which is exactly where the home
   indicator is. */
.toast-container.bottom-0 {
    padding-bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem)) !important;
}

/* An anchor scrolled to the top of the viewport lands underneath the sticky
   navbar. This is what the tutorial and use-case scrollspy pages rely on. */
html {
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}


/* --- Overflow guards ------------------------------------------------------
   A single wide element drags the whole page sideways, and on a phone that is
   the difference between a usable page and one that jitters under the thumb.
   Long identifiers — client IDs, secrets, references — are the usual culprit. */

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

code:not(pre code) {
    overflow-wrap: anywhere;
}

.text-break-all {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* --- Touch targets --------------------------------------------------------
   Coarse pointers only, so a mouse-driven desktop keeps its compact controls.
   44px is the smallest target that can be hit reliably with a thumb. */

@media (pointer: coarse) {

    .btn,
    .navbar-toggler,
    .page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Full width by design, so it is aligned rather than centred. */
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Dense tables and toolbars use btn-sm heavily; give them a real target
       without inflating them to full size. */
    .btn-sm {
        min-height: 40px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-link,
    .bo-sidebar-nav a,
    .bo-sidebar-footer a,
    .offcanvas .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* An icon-only button in a search group is as wide as its glyph — about
       28px, and the glyph is the whole target. */
    .input-group .btn {
        min-width: 44px;
    }

    /* The close control is a 16px glyph by default — reliably missed. */
    .btn-close {
        min-width: 44px;
        min-height: 44px;
        background-position: center;
        background-size: .875rem;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: .1875rem;
    }

    .form-check-label,
    .form-check {
        min-height: 32px;
    }

    /* Hover transforms have no meaning without a cursor, and they fire on tap,
       which reads as the layout twitching. */
    .btn:hover,
    .feature-card:hover,
    .info-card:hover,
    .registry-card:hover,
    .api-endpoint-card:hover {
        transform: none;
    }
}

/* iOS zooms the whole page in when a focused field is under 16px, and never
   zooms back out. Every field on a phone is therefore 16px, whatever the
   design elsewhere says. */
@media (max-width: 767.98px) {

    .form-control,
    .form-select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"] {
        font-size: 16px;
    }
}


/* --- Scrollable filter bars -----------------------------------------------
   The list pages carry a row of status filters. Wrapped over three lines they
   push the data off the screen; as one swipeable row they cost one line. */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to the screen edge so the row visibly continues past it. */
        margin-inline: -1rem;
        padding-inline: 1rem;
        padding-bottom: .25rem;
        scroll-padding-inline: 1rem;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-bar > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* The vertical rule between filter groups reads as clutter in a scroller. */
    .filter-bar .filter-bar-divider {
        display: none;
    }
}


/* --- Search --------------------------------------------------------------
   The list pages' search box was capped at 360px inline. On a phone that is
   wider than the screen; on a tablet it leaves the line half empty. */

.search-group {
    max-width: 360px;
}

@media (max-width: 991.98px) {
    .search-group {
        max-width: 100%;
    }
}


/* --- Tables as cards ------------------------------------------------------
   A ledger row has eight columns. Inside a horizontal scroller on a phone the
   reader has to swipe to see an amount and swipe back to see whose it was, and
   the header scrolls away meanwhile. Below the lg breakpoint each row becomes
   a card instead, with the column name printed against its own value. The
   labels come from data-label on each cell; a cell without one spans the card,
   which is what the action and empty-state cells want. */

@media (max-width: 991.98px) {

    .table-stack {
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-stack thead {
        /* Not display:none — that drops the header from the accessibility
           tree, and the per-cell labels below are what replace it visually. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        position: relative;
        margin-bottom: .75rem;
        padding: .25rem .875rem .75rem;
        border: 1px solid var(--pp-gray-200);
        border-radius: var(--pp-radius-md);
        background: var(--pp-white);
        box-shadow: var(--pp-shadow-sm);
    }

    .table-stack tr:last-child {
        margin-bottom: 0;
    }

    /* Bootstrap's striping and hover shading make the cards look randomly
       tinted once they are no longer rows. */
    .table-stack.table-hover > tbody > tr:hover > *,
    .table-stack.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
        background-color: transparent;
        box-shadow: none;
    }

    .table-stack td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .5rem 0;
        border: 0;
        border-bottom: 1px solid var(--pp-gray-100);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .table-stack td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--pp-gray-500);
        text-align: left;
    }

    /* A cell with no label — the row's actions, or an empty-state message —
       gets the full width of the card. */
    .table-stack td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
    }

    .table-stack td.table-stack-actions {
        justify-content: flex-end;
        gap: .5rem;
        padding-top: .75rem;
    }

    .table-stack td.table-stack-actions .btn {
        flex: 1 1 auto;
    }

    /* One label-value pair per line is right on a phone. On a tablet it wastes
       half the width and pushes a seven-column row past 500px tall, so the
       pairs go two-up and the identity and actions span the card. */
    @media (min-width: 576px) {
        .table-stack tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 1.5rem;
            align-items: start;
        }

        .table-stack td.table-stack-title,
        .table-stack td.table-stack-actions,
        .table-stack td:not([data-label]) {
            grid-column: 1 / -1;
        }

        /* The border between pairs would otherwise stop mid-card. */
        .table-stack td:nth-last-child(2) {
            border-bottom: 0;
        }
    }

    /* The first cell is the row's identity — the reference, the name, the
       account number. Promote it to the card's heading. */
    .table-stack td.table-stack-title {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: var(--pp-gray-900);
        text-align: left;
        padding-top: .75rem;
    }

    .table-stack td.table-stack-title::before {
        display: block;
        margin-bottom: .125rem;
    }

    /* Nested in a card, table-responsive would clip the cards' shadows and
       reintroduce a scroller that no longer has anything to scroll. The card
       that framed the table is redundant once each row is its own card, so a
       list page's outer card steps aside. A table inside a card-body is a
       section within a larger page and keeps its frame. */
    .table-stack-wrap,
    .card:has(> .table-responsive > .table-stack) {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .table-stack-wrap > .table-responsive,
    .table-responsive:has(> .table-stack) {
        overflow: visible;
    }
}

/* Where a table still scrolls sideways — a wide table above the stacking
   breakpoint — say so, rather than leaving the reader to discover it. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}


/* --- Pagination -----------------------------------------------------------
   Twenty page links wrap into a block that owns the bottom of the screen. */

@media (max-width: 767.98px) {
    .pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        padding-bottom: .25rem;
    }

    .pagination::-webkit-scrollbar {
        display: none;
    }

    .page-item {
        flex: 0 0 auto;
    }
}


/* --- Phone layout ---------------------------------------------------------
   Reclaiming horizontal space: the desktop gutters are generous, and on a
   360px screen they are most of the line length. */

@media (max-width: 767.98px) {

    :root {
        --pp-section-gap: 3rem;
    }

    .container,
    .container-fluid {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* g-5 asks for 3rem gutters, which Bootstrap applies as a -24px margin on
       the row. That is wider than the container's own padding, so the row hung
       8px off both edges of the phone and dragged the page sideways. Three rem
       of gutter is not a phone measurement anyway. */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }

    .hero-subtitle,
    .section-subtitle {
        font-size: 1rem;
    }

    /* A phone has room for exactly one call to action per line. Side by side
       they were two ragged pills; stacked and full width they are two obvious
       targets, and the primary one is unmistakably the primary one. */
    .btn-hero {
        width: 100%;
        padding: .875rem 1.5rem;
        font-size: 1rem;
    }

    .stat-item {
        padding: 1.25rem .5rem;
    }

    .stat-number {
        font-size: 1.875rem;
    }

    .content-page h3 {
        font-size: 1.5rem;
    }

    .content-page h4 {
        font-size: 1.125rem;
        margin-top: 1.5rem;
    }

    /* Full-bleed sign-in card: a rounded panel floating on a phone wastes the
       margin on both sides and looks like a dialog that failed to open. */
    .cas-card {
        border-radius: var(--pp-radius-md);
        box-shadow: var(--pp-shadow);
    }

    .cas-card > .row {
        min-height: 0 !important;
    }

    /* Long code samples and API references are the portal's own content; let
       them use the full width on a phone. */
    .card-body {
        padding: 1.25rem;
    }
}

/* --- Tablet ---------------------------------------------------------------
   Between the phone and the desktop the portal has room for two columns but
   not for the desktop's whitespace budget. */

@media (min-width: 768px) and (max-width: 1199.98px) {

    :root {
        --pp-section-gap: 4.5rem;
    }

    .hero-section {
        min-height: auto;
        padding: 4.5rem 0;
    }
}

/* A tablet held in landscape has plenty of width and very little height; a
   full-height hero leaves no room for the content it introduces. */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 3rem 0;
    }
}


/* --- Backoffice on a hand-held --------------------------------------------- */

.bo-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--pp-white);
    border-bottom: 1px solid var(--pp-gray-200);
    padding: .625rem 1rem;
    padding-top: max(.625rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.bo-topbar-toggle {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 991.98px) {

    /* px-4 py-4 on every backoffice page is 24px of gutter each side. */
    .bo-main .container-fluid {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .bo-main {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }


}

/* The page header puts a title and an action side by side. Below md the action
   ends up a two-character sliver, so the pair stacks; a tablet has room for
   both on one line and keeps them there. */
@media (max-width: 767.98px) {
    .bo-page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: .875rem;
    }

    .bo-page-header .btn {
        width: 100%;
    }
}

/* Two dashboard tiles to a phone row leaves roughly 90px of text width beside
   a 48px decorative icon. The count is the content; the icon goes. */
@media (max-width: 575.98px) {
    .bo-stat-icon {
        display: none !important;
    }

    .info-card {
        padding: 1rem;
    }
}

@media (max-width: 991.98px) {
    .offcanvas .bo-sidebar-nav {
        flex: 0 0 auto;
    }

    #boMobileNav .offcanvas-body {
        display: flex;
        flex-direction: column;
    }
}


/* --- Install prompt -------------------------------------------------------
   Injected by app.js when the browser offers beforeinstallprompt. It sits at
   the bottom, within thumb reach, and above the home indicator. */

.pwa-install-bar {
    position: fixed;
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, calc(env(safe-area-inset-bottom) + .25rem));
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    border-radius: var(--pp-radius-md);
    background: var(--pp-dark);
    color: var(--pp-white);
    box-shadow: var(--pp-shadow-xl);
    transform: translateY(calc(100% + 1.5rem));
    transition: transform var(--pp-transition-slow);
}

.pwa-install-bar.is-visible {
    transform: translateY(0);
}

.pwa-install-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pwa-install-copy strong {
    font-size: .9375rem;
    font-weight: 700;
}

.pwa-install-copy span {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .6);
}

.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

.pwa-install-bar .pwa-install-later {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.pwa-install-bar .pwa-install-later:hover {
    color: var(--pp-white);
}

@media (min-width: 576px) {
    .pwa-install-bar {
        left: auto;
        right: max(1.25rem, env(safe-area-inset-right));
        max-width: 26rem;
    }
}

/* The bar animates in from off-screen; without motion it simply appears. */
@media (prefers-reduced-motion: reduce) {
    .pwa-install-bar {
        transition: none;
        transform: translateY(0);
        display: none;
    }

    .pwa-install-bar.is-visible {
        display: flex;
    }
}


/* --- Standalone display ---------------------------------------------------
   Installed, there is no browser chrome to fall back on: no back button, and
   the status bar sits over the page because the pages ask for a translucent
   one. Pay both back here. */

@media (display-mode: standalone) {

    .navbar.sticky-top,
    .bo-topbar {
        padding-top: max(.75rem, env(safe-area-inset-top));
    }

    /* Text selection on a long-press reads as a broken tap on chrome that is
       navigation, not content. The content itself stays selectable. */
    .navbar,
    .bo-sidebar,
    .bo-topbar,
    .offcanvas-header {
        -webkit-user-select: none;
        user-select: none;
    }
}


/* --- Reduced motion -------------------------------------------------------
   The reveal and count-up effects are also disabled in app.js; this covers
   the CSS transitions and anything already mid-flight. */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .feature-card,
    .info-card,
    .api-endpoint-card,
    .stat-item,
    .registry-card,
    .section-label,
    .section-title,
    .section-subtitle,
    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .hero-stats,
    .dashboard-welcome,
    .registry-card,
    .cta-title,
    .cta-subtitle {
        opacity: 1 !important;
        transform: none !important;
    }
}